Merge branch 'character' into dev

app.vue

@@ -1,10 +1,9 @@
 <template>
 	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
 		<NuxtRouteAnnouncer/>
-		<NuxtLoadingIndicator />
 		<TooltipProvider>
 			<NuxtLayout>
-				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full max-w-full relative">
+				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full max-w-full relative" id="mainContainer">
 					<NuxtPage />
 				</div>
 			</NuxtLayout>
@@ -14,8 +13,27 @@
 </template>
 
 <script setup lang="ts">
+import { Content } from './shared/content.util';
+import * as Floating from '#shared/floating.util';
+
 provideToaster();
 
+onBeforeMount(() => {
+	Content.init();
+	Floating.init();
+
+	const unmount = useRouter().afterEach((to, from, failure) => {
+		if(failure) return;
+
+		document.querySelectorAll(`a[href="${from.path}"][data-active]`).forEach(e => e.classList.remove(e.getAttribute('data-active') ?? ''));
+		document.querySelectorAll(`a[href="${to.path}"][data-active]`).forEach(e => e.classList.add(e.getAttribute('data-active') ?? ''));
+	});
+
+	onUnmounted(() => {
+		unmount();
+	})
+});
+
 const { list } = useToast();
 </script>
 
@@ -39,6 +57,123 @@ const { list } = useToast();
 	@apply bg-light-50;
 	@apply dark:bg-dark-50;
 }
+.callout[data-type="abstract"],
+.callout[data-type="summary"],
+.callout[data-type="tldr"]
+{
+	@apply bg-light-cyan;
+	@apply dark:bg-dark-cyan;
+	@apply text-light-cyan;
+	@apply dark:text-dark-cyan;
+}
+.callout[data-type="info"]
+{
+	@apply bg-light-blue;
+	@apply dark:bg-dark-blue;
+	@apply text-light-blue;
+	@apply dark:text-dark-blue;
+}
+.callout[data-type="todo"]
+{
+	@apply bg-light-blue;
+	@apply dark:bg-dark-blue;
+	@apply text-light-blue;
+	@apply dark:text-dark-blue;
+}
+.callout[data-type="important"]
+{
+	@apply bg-light-cyan;
+	@apply dark:bg-dark-cyan;
+	@apply text-light-cyan;
+	@apply dark:text-dark-cyan;
+}
+.callout[data-type="tip"],
+.callout[data-type="hint"]
+{
+	@apply bg-light-cyan;
+	@apply dark:bg-dark-cyan;
+	@apply text-light-cyan;
+	@apply dark:text-dark-cyan;
+}
+.callout[data-type="success"],
+.callout[data-type="check"],
+.callout[data-type="done"]
+{
+	@apply bg-light-green;
+	@apply dark:bg-dark-green;
+	@apply text-light-green;
+	@apply dark:text-dark-green;
+}
+.callout[data-type="question"],
+.callout[data-type="help"],
+.callout[data-type="faq"]
+{
+	@apply bg-light-orange;
+	@apply dark:bg-dark-orange;
+	@apply text-light-orange;
+	@apply dark:text-dark-orange;
+}
+.callout[data-type="warning"],
+.callout[data-type="caution"],
+.callout[data-type="attention"]
+{
+	@apply bg-light-orange;
+	@apply dark:bg-dark-orange;
+	@apply text-light-orange;
+	@apply dark:text-dark-orange;
+}
+.callout[data-type="failure"],
+.callout[data-type="fail"],
+.callout[data-type="missing"]
+{
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply text-light-red;
+	@apply dark:text-dark-red;
+}
+.callout[data-type="danger"],
+.callout[data-type="error"]
+{
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply text-light-red;
+	@apply dark:text-dark-red;
+}
+.callout[data-type="bug"]
+{
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply text-light-red;
+	@apply dark:text-dark-red;
+}
+.callout[data-type="example"]
+{
+	@apply bg-light-purple;
+	@apply dark:bg-dark-purple;
+	@apply text-light-purple;
+	@apply dark:text-dark-purple;
+}
+.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;
+}
 
 ::-webkit-scrollbar-corner {
 	@apply bg-transparent;

components/CanvasEditor.vue

@@ -29,12 +29,6 @@ type EdgeEditor = InstanceType<typeof CanvasEdgeEditor>;
 
 const cancelEvent = (e: Event) => e.preventDefault();
 const stopPropagation = (e: Event) => e.stopImmediatePropagation();
-function getID(length: number)
-{
-    for (var id = [], i = 0; i < length; i++)
-        id.push((16 * Math.random() | 0).toString(16));
-    return id.join("");
-}
 function center(touches: TouchList): Position
 {
     const pos = { x: 0, y: 0 };
@@ -58,7 +52,7 @@ function distance(touches: TouchList): number
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import { clamp } from '#shared/general.util';
+import { clamp, getID, ID_SIZE } from '#shared/general.util';
 import type { CanvasContent, CanvasEdge, CanvasNode } from '~/types/canvas';
 
 const canvas = defineModel<CanvasContent>({ required: true });
@@ -75,12 +69,11 @@ const hints = ref<SnapHint[]>([]);
 const viewport = computed<Box>(() => {
     const width = viewportSize.width.value / zoom.value, height = viewportSize.height.value / zoom.value;
     const movementX = viewportSize.width.value - width, movementY = viewportSize.height.value - height;
-    return { x: -dispX.value + movementX / 2, y: -dispY.value + movementY / 2, w: width, h: height };
+    return { x: -dispX.value + movementX / 2, y: -dispY.value + movementY / 2, width, height };
 });
 const updateScaleVar = useDebounceFn(() => {
     if(transformRef.value)
     {
-        console.log(zoom.value);
         transformRef.value.style.setProperty('--tw-scale', zoom.value.toString());
     }
     if(canvasRef.value)
@@ -100,10 +93,19 @@ 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));
+    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 = {};
@@ -334,11 +336,10 @@ function edit(element: Element)
 }
 function createNode(e: MouseEvent)
 {
-    let box = canvasRef.value?.getBoundingClientRect()!;
     const width = 250, height = 100;
-    const x = (e.layerX / zoom.value) - dispX.value - (width  / 2);
-    const y = (e.layerY / zoom.value) - dispY.value - (height / 2);
-    const node: CanvasNode = { id: getID(16), x, y, width, height, type: 'text' };
+    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];
@@ -404,7 +405,7 @@ function dragEndEdgeTo(e: MouseEvent): void
     if(fakeEdge.value.snapped)
     {
         const node = canvas.value.nodes!.find(e => e.id === fakeEdge.value.drag!.id)!;
-        const edge: CanvasEdge = { fromNode: fakeEdge.value.drag!.id, fromSide: fakeEdge.value.fromSide!, toNode: fakeEdge.value.snapped.node, toSide: fakeEdge.value.snapped.side, id: getID(16), color: node.color };
+        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' } }]);

components/Editor.vue

@@ -89,7 +89,7 @@ class Decorator
                         decorations.push(Bullet.range(node.from, node.to + 1));
 
                     else if(node.matchContext(['Blockquote']))
-                        decorations.push(Blockquote.range(node.from, node.from));
+                        decorations.push(Blockquote.range(node.from, node.to));
 
                     return true;
                 },
@@ -119,29 +119,7 @@ onMounted(() => {
             parent: editor.value,
             extensions: [
                 markdown({
-                    base: markdownLanguage,
-                    extensions: {
-                        defineNodes: [
-                            { name: "Tag", style: TagTag },
-                            { name: "TagMark", style: tags.processingInstruction }
-                        ],
-                        parseInline: [{
-                            name: "Tag",
-                            parse(cx, next, pos) {
-                                if (next != 35 || cx.char(pos + 1) == 35) return -1;
-                                let elts = [cx.elt("TagMark", pos, pos + 1)];
-                                for (let i = pos + 1; i < cx.end; i++) {
-                                    let next = cx.char(i);
-                                    if (next == 35)
-                                        return cx.addElement(cx.elt("Tag", pos, i + 1, elts.concat(cx.elt("TagMark", i, i + 1))));
-                                    if (next == 92)
-                                        elts.push(cx.elt("Escape", i, i++ + 2));
-                                    if (next == 32 || next == 9 || next == 10 || next == 13) break;
-                                }
-                                return -1
-                            }
-                        }],
-                    }
+                    base: markdownLanguage
                 }),
                 history(),
                 search(),

components/FramedEditor.vue

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

components/MarkdownRenderer.vue

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

components/ProsesRenderer.vue

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

components/TrainingViewer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { MAIN_STATS, mainStatTexts, type CharacterConfig } from '~/types/character';
+import { MAIN_STATS, mainStatTexts } from '#shared/character.util';
+import type { CharacterConfig, MainStat } from '~/types/character';
 
 const { config } = defineProps<{
     config: CharacterConfig
@@ -13,7 +14,7 @@ const position = ref(0);
         <div class="flex flex-shrink gap-3 items-center relative w-48 ms-12">
             <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
             hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></span>
-            <span :style="{ 'left': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[left]
+            <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">

components/canvas/CanvasNode.vue

@@ -2,7 +2,7 @@
     <div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
         <div :class="[style.border]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full hover:outline-4">
             <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07] overflow-auto" :class="style.bg">
-                <div v-if="node.text?.length > 0" class="flex items-center">
+                <div v-if="node.text && node.text.length > 0" class="flex items-center">
                     <MarkdownRenderer :content="node.text" />
                 </div>
             </div>

components/canvas/CanvasNodeEditor.vue

@@ -2,7 +2,7 @@
     <div class="absolute" ref="dom" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
         <div v-if="!editing || node.type === 'group'" style="outline-style: solid;" :class="[style.border, style.outline, { '!outline-4 cursor-move': focusing }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full hover:outline-4">
             <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07] overflow-auto" :class="style.bg" @click.left="(e) => { if(node.type !== 'group') selectNode(e) }" @dblclick.left="(e) => { if(node.type !== 'group') editNode(e) }">
-                <div v-if="node.text?.length > 0" class="flex items-center">
+                <div v-if="node.text && node.text.length > 0" class="flex items-center">
                     <MarkdownRenderer :content="node.text" :proses="{ a: FakeA }" />
                 </div>
             </div>
@@ -85,7 +85,7 @@ function editNode(e: Event) {
     dom.value?.removeEventListener('mousedown', dragstart);
     emit('edit', { type: 'node', id: node.id });
 }
-function resizeNode(e: MouseEvent, x: number, y: number, w: number, h: number) {
+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;
@@ -96,15 +96,15 @@ function resizeNode(e: MouseEvent, x: number, y: number, w: number, h: number) {
 
         realx = realx + (e.movementX / zoom) * x;
         realy = realy + (e.movementY / zoom) * y;
-        realw = Math.max(realw + (e.movementX / zoom) * w, 64);
-        realh = Math.max(realh + (e.movementY / zoom) * h, 64);
+        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, w, h });
+        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?.w ?? realw;
-        node.height = result?.h ?? realh;
+        node.width = result?.width ?? realw;
+        node.height = result?.height ?? realh;
     };
     const resizeend = (e: MouseEvent) => {
         if(e.button !== 0)
@@ -127,7 +127,7 @@ function dragEdge(e: MouseEvent, direction: Direction) {
 function unselect() {
     if(editing.value)
     {
-        const text = node.type === 'group' ? node.label : node.text;
+        const text = node.type === 'group' ? node.label! : node.text!;
         
         if(text !== oldText)
         {

components/character/editor/LevelEditor.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import type { CharacterBuilder } from '~/shared/character';
+import type { CharacterBuilder } from '#shared/character.util';
 import type { CharacterConfig, Level } from '~/types/character';
 
 const { config } = defineProps<{

components/character/editor/PeopleSelector.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import type { CharacterBuilder } from '~/shared/character';
+import type { CharacterBuilder } from '#shared/character.util';
 import type { CharacterConfig } from '~/types/character';
 
 const { config } = defineProps<{

components/page/Canvas.vue

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

components/prose/PreviewA.vue

@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { parseURL } from 'ufo';
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import { iconByType } from '#shared/general.util';
+import { iconByType } from '#shared/content.util';
 
 const { href } = defineProps<{
 	href: string

components/prose/ProseA.vue

@@ -1,6 +1,6 @@
 <template>
 	<NuxtLink class="text-accent-blue inline-flex items-center" :to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: decodeURIComponent(hash) } : href" :class="class">
-		<HoverCard nuxt-client class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
+		<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>
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { parseURL } from 'ufo';
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import { iconByType } from '#shared/general.util';
+import { iconByType } from '#shared/content.util';
 
 const { href } = defineProps<{
 	href: string

components/prose/ProseCallout.vue

@@ -35,7 +35,6 @@ const defaultCalloutIcon = 'radix-icons:info-circled';
 </script>
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 const {	type, title, fold } = defineProps<{
 	type: string;
@@ -44,103 +43,3 @@ const {	type, title, fold } = defineProps<{
 }>();
 const disabled = computed(() => fold === undefined);
 </script>
-
-<style>
-.callout[data-type="abstract"],
-.callout[data-type="summary"],
-.callout[data-type="tldr"]
-{
-	@apply bg-light-cyan;
-	@apply dark:bg-dark-cyan;
-	@apply text-light-cyan;
-	@apply dark:text-dark-cyan;
-}
-.callout[data-type="info"]
-{
-	@apply bg-light-blue;
-	@apply dark:bg-dark-blue;
-	@apply text-light-blue;
-	@apply dark:text-dark-blue;
-}
-.callout[data-type="todo"]
-{
-	@apply bg-light-blue;
-	@apply dark:bg-dark-blue;
-	@apply text-light-blue;
-	@apply dark:text-dark-blue;
-}
-.callout[data-type="important"]
-{
-	@apply bg-light-cyan;
-	@apply dark:bg-dark-cyan;
-	@apply text-light-cyan;
-	@apply dark:text-dark-cyan;
-}
-.callout[data-type="tip"],
-.callout[data-type="hint"]
-{
-	@apply bg-light-cyan;
-	@apply dark:bg-dark-cyan;
-	@apply text-light-cyan;
-	@apply dark:text-dark-cyan;
-}
-.callout[data-type="success"],
-.callout[data-type="check"],
-.callout[data-type="done"]
-{
-	@apply bg-light-green;
-	@apply dark:bg-dark-green;
-	@apply text-light-green;
-	@apply dark:text-dark-green;
-}
-.callout[data-type="question"],
-.callout[data-type="help"],
-.callout[data-type="faq"]
-{
-	@apply bg-light-orange;
-	@apply dark:bg-dark-orange;
-	@apply text-light-orange;
-	@apply dark:text-dark-orange;
-}
-.callout[data-type="warning"],
-.callout[data-type="caution"],
-.callout[data-type="attention"]
-{
-	@apply bg-light-orange;
-	@apply dark:bg-dark-orange;
-	@apply text-light-orange;
-	@apply dark:text-dark-orange;
-}
-.callout[data-type="failure"],
-.callout[data-type="fail"],
-.callout[data-type="missing"]
-{
-	@apply bg-light-red;
-	@apply dark:bg-dark-red;
-	@apply text-light-red;
-	@apply dark:text-dark-red;
-}
-.callout[data-type="danger"],
-.callout[data-type="error"]
-{
-	@apply bg-light-red;
-	@apply dark:bg-dark-red;
-	@apply text-light-red;
-	@apply dark:text-dark-red;
-}
-.callout[data-type="bug"]
-{
-	@apply bg-light-red;
-	@apply dark:bg-dark-red;
-	@apply text-light-red;
-	@apply dark:text-dark-red;
-}
-.callout[data-type="example"]
-{
-	@apply bg-light-purple;
-	@apply dark:bg-dark-purple;
-	@apply text-light-purple;
-	@apply dark:text-dark-purple;
-}
-
-</style>

components/prose/ProseTag.vue

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

composables/useContent.ts

@@ -1,9 +1,11 @@
+import { Content } from '~/shared/content.util';
 import type { ExploreContent, ContentComposable, TreeItem } from '~/types/content';
 
 const useContentState = () => useState<ExploreContent[]>('content', () => []);
 
 export function useContent(): ContentComposable {
     const contentState = useContentState();
+
     return {
         content: contentState,
         tree: computed(() => {
@@ -19,22 +21,25 @@ export function useContent(): ContentComposable {
     }
 }
 
-async function fetch(force: boolean) {
+async function fetch(force: boolean = false) {
     const content = useContentState();
     if(content.value.length === 0 || force)
         content.value = await useRequestFetch()('/api/file/overview');
 }
 
-async function get(path: string) {
+async function get(path: string, force: boolean = false): Promise<ExploreContent | undefined> {
     const content = useContentState()
     const value = content.value;
     const item = value.find(e => e.path === path);
-    if(item)
+
+    if(item && !item.content)
     {
         item.content = await useRequestFetch()(`/api/file/content/${encodeURIComponent(path)}`);
     }
 
     content.value = value;
+
+    return item;
 }
 
 function addChild(arr: TreeItem[], e: ExploreContent): void {

composables/useMarkdown.ts

@@ -8,9 +8,14 @@ import RemarkGfm from 'remark-gfm';
 import RemarkBreaks from 'remark-breaks';
 import RemarkFrontmatter from 'remark-frontmatter';
 
-export default function useMarkdown(): (md: string) => Root
+interface Parser
 {
-    let processor: Processor;
+    parse: (md: string) => Promise<Root>;
+    parseSync: (md: string) => Root
+}
+export default function useMarkdown(): Parser
+{
+    let processor: Processor, processorSync: Processor;
 
     const parse = (markdown: string) => {
         if (!processor) 
@@ -19,9 +24,20 @@ export default function useMarkdown(): (md: string) => Root
             processor.use(RemarkRehype);
         }
 
+        const processed = processor.run(processor.parse(markdown)) as Promise<Root>;
+        return processed;
+    }
+
+    const parseSync = (markdown: string) => {
+        if (!processor) 
+        {
+            processor = unified().use([RemarkParse, RemarkGfm, RemarkOfm, RemarkBreaks, RemarkFrontmatter]);
+            processor.use(RemarkRehype);
+        }
+
         const processed = processor.runSync(processor.parse(markdown)) as Root;
         return processed;
     }
 
-    return parse;
+    return { parse, parseSync };
 }

composables/useUserSession.ts

@@ -1,9 +1,7 @@
 import type { UserSession, UserSessionComposable } from '~/types/auth'
-import { useContent } from './useContent'
 
 const useSessionState = () => useState<UserSession>('nuxt-session', () => ({}))
 const useAuthReadyState = () => useState('nuxt-auth-ready', () => false)
-const useContentFetch = (force: boolean) => useContent().fetch(force);
 
 /**
  * Composable to get back the user session and utils around it.

db/schema.ts

@@ -1,8 +1,8 @@
 import { relations } from 'drizzle-orm';
-import { int, text, sqliteTable, primaryKey, blob } from 'drizzle-orm/sqlite-core';
-import { ABILITIES, MAIN_STATS } from '~/shared/character';
+import { int, text, sqliteTable as table, primaryKey, blob } from 'drizzle-orm/sqlite-core';
+import { ABILITIES, MAIN_STATS } from '../shared/character.util';
 
-export const usersTable = sqliteTable("users", {
+export const usersTable = table("users", {
     id: int().primaryKey({ autoIncrement: true }),
     username: text().notNull().unique(),
     email: text().notNull().unique(),
@@ -10,43 +10,46 @@ export const usersTable = sqliteTable("users", {
     state: int().notNull().default(0),
 });
 
-export const usersDataTable = sqliteTable("users_data", {
+export const usersDataTable = table("users_data", {
     id: int().primaryKey().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     signin: int({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
     lastTimestamp: int({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
-    logCount: int().notNull().default(0),
 });
 
-export const userSessionsTable = sqliteTable("user_sessions", {
+export const userSessionsTable = table("user_sessions", {
     id: int().notNull(),
     user_id: int().notNull().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     timestamp: int({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
 }, (table) => [primaryKey({ columns: [table.id, table.user_id] })]);
 
-export const userPermissionsTable = sqliteTable("user_permissions", {
+export const userPermissionsTable = table("user_permissions", {
     id: int().notNull().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     permission: text().notNull(),
 }, (table) => [primaryKey({ columns: [table.id, table.permission] })]);
 
-export const explorerContentTable = sqliteTable("explorer_content", {
-    path: text().primaryKey(),
+export const projectFilesTable = table("project_files", {
+    id: text().primaryKey(),
+    path: text().notNull().unique(),
     owner: int().notNull().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     title: text().notNull(),
     type: text({ enum: ['file', 'folder', 'markdown', 'canvas', 'map'] }).notNull(),
-    content: blob({ mode: 'buffer' }),
     navigable: int({ mode: 'boolean' }).notNull().default(true),
     private: int({ mode: 'boolean' }).notNull().default(false),
     order: int().notNull(),
-    visit: int().notNull().default(0),
     timestamp: int({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
 });
 
-export const emailValidationTable = sqliteTable("email_validation", {
+export const projectContentTable = table("project_content", {
+    id: text().primaryKey(),
+    content: blob({ mode: 'buffer' }),
+});
+
+export const emailValidationTable = table("email_validation", {
     id: text().primaryKey(),
     timestamp: int({ mode: 'timestamp' }).notNull(),
 })
 
-export const characterTable = sqliteTable("character", {
+export const characterTable = table("character", {
     id: int().primaryKey({ autoIncrement: true }),
     name: text().notNull(),
     owner: int().notNull().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
@@ -61,33 +64,33 @@ export const characterTable = sqliteTable("character", {
     thumbnail: blob(),
 });
 
-export const characterTrainingTable = sqliteTable("character_training", {
+export const characterTrainingTable = table("character_training", {
     character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     stat: text({ enum: MAIN_STATS }).notNull(),
     level: int().notNull(),
     choice: int().notNull(),
 }, (table) => [primaryKey({ columns: [table.character, table.stat, table.level] })]);
 
-export const characterLevelingTable = sqliteTable("character_leveling", {
+export const characterLevelingTable = table("character_leveling", {
     character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     level: int().notNull(),
     choice: int().notNull(),
 }, (table) => [primaryKey({ columns: [table.character, table.level] })]);
 
-export const characterAbilitiesTable = sqliteTable("character_abilities", {
+export const characterAbilitiesTable = table("character_abilities", {
     character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     ability: text({ enum: ABILITIES }).notNull(),
     value: int().notNull().default(0),
     max: int().notNull().default(0),
 }, (table) => [primaryKey({ columns: [table.character, table.ability] })]);
 
-export const characterModifiersTable = sqliteTable("character_modifiers", {
+export const characterModifiersTable = table("character_modifiers", {
     character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     modifier: text({ enum: MAIN_STATS }).notNull(),
     value: int().notNull().default(0),
 }, (table) => [primaryKey({ columns: [table.character, table.modifier] })]);
 
-export const characterSpellsTable = sqliteTable("character_spell", {
+export const characterSpellsTable = table("character_spell", {
     character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     value: text().notNull(),
 }, (table) => [primaryKey({ columns: [table.character, table.value] })]);
@@ -96,7 +99,7 @@ export const usersRelation = relations(usersTable, ({ one, many }) => ({
     data: one(usersDataTable, { fields: [usersTable.id], references: [usersDataTable.id], }),
     session: many(userSessionsTable),
     permission: many(userPermissionsTable),
-    content: many(explorerContentTable),
+    files: many(projectFilesTable),
 }));
 export const usersDataRelation = relations(usersDataTable, ({ one }) => ({
     users: one(usersTable, { fields: [usersDataTable.id], references: [usersTable.id], }),
@@ -107,8 +110,8 @@ export const userSessionsRelation = relations(userSessionsTable, ({ one }) => ({
 export const userPermissionsRelation = relations(userPermissionsTable, ({ one }) => ({
     users: one(usersTable, { fields: [userPermissionsTable.id], references: [usersTable.id], }),
 }));
-export const explorerContentRelation = relations(explorerContentTable, ({ one }) => ({
-    users: one(usersTable, { fields: [explorerContentTable.owner], references: [usersTable.id], }),
+export const projectFilesRelation = relations(projectFilesTable, ({ one }) => ({
+    users: one(usersTable, { fields: [projectFilesTable.owner], references: [usersTable.id], }),
 }));
 export const characterRelation = relations(characterTable, ({ one, many }) => ({
     user: one(usersTable, { fields: [characterTable.owner], references: [usersTable.id], }),

drizzle/0006_luxuriant_blade.sql

@@ -0,0 +1,21 @@
+CREATE TABLE `project_content` (
+	`id` text PRIMARY KEY NOT NULL,
+	`content` blob
+);
+--> statement-breakpoint
+CREATE TABLE `project_files` (
+	`id` text PRIMARY KEY NOT NULL,
+	`path` text NOT NULL,
+	`owner` integer NOT NULL,
+	`title` text NOT NULL,
+	`type` text NOT NULL,
+	`navigable` integer DEFAULT true NOT NULL,
+	`private` integer DEFAULT false NOT NULL,
+	`order` integer NOT NULL,
+	`timestamp` integer NOT NULL,
+	FOREIGN KEY (`owner`) REFERENCES `users`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `project_files_path_unique` ON `project_files` (`path`);--> statement-breakpoint
+DROP TABLE `explorer_content`;--> statement-breakpoint
+ALTER TABLE `users_data` DROP COLUMN `logCount`;

drizzle/0013_wakeful_lake.sql

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

drizzle/meta/0013_snapshot.json

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

drizzle/meta/_journal.json

@@ -92,6 +92,13 @@
       "when": 1746027790969,
       "tag": "0012_graceful_energizer",
       "breakpoints": true
+    },
+    {
+      "idx": 13,
+      "version": "6",
+      "when": 1753097020642,
+      "tag": "0013_wakeful_lake",
+      "breakpoints": true
     }
   ]
 }

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
     <CollapsibleRoot class="flex flex-1 flex-col" v-model:open="open">
-        <div class="z-50 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
+        <div class="z-30 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
 			<div class="flex items-center px-2 gap-4">
 				<CollapsibleTrigger asChild>
 					<Button icon class="!bg-transparent group md:hidden">
@@ -40,31 +40,19 @@
 			</div>
         </div>
         <div class="flex flex-1 flex-row relative h-screen w-screen overflow-hidden">
-			<CollapsibleContent asChild forceMount>
+			<!-- <CollapsibleContent asChild forceMount> -->
 				<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
-					<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
+					<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden" ref="treeParent">
 						<div v-if="user" class="flex flex-1 py-4 px-2 flex-row flex-1 justify-between items-center">
 							<NuxtLink v-if="hasPermissions(user.permissions, ['admin', 'editor'])" :to="{ name: 'explore-edit' }"><Button icon><Icon icon="radix-icons:pencil-2" /></Button></NuxtLink>
 						</div>
-						<Tree v-if="pages" v-model="pages" :getKey="(item) => item.path" class="ps-4">
-							<template #default="{ item, isExpanded }">
-								<NuxtLink :href="item.value.path && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.path } } : undefined" class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full" :class="{ 'font-medium': item.hasChildren }" active-class="text-accent-blue" :data-private="item.value.private">
-									<Icon v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level / 2 - 1.5}em` }" />
-									<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="w-5 h-5" />
-									<div class="pl-1.5 py-1.5 flex-1 truncate">
-										{{ item.value.title }}
-									</div>
-									<Tooltip message="Privé" side="right"><Icon v-show="item.value.private" class="mx-1" icon="radix-icons:lock-closed" /></Tooltip>
-								</NuxtLink>
-							</template>
-						</Tree>
 					</div>
 					<div class="xl:px-12 px-6 pt-4 pb-2 text-center text-xs text-light-60 dark:text-dark-60">
 						<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
 						<p>Copyright Peaceultime - 2025</p>
 					</div>
 				</div>
-			</CollapsibleContent>
+			<!-- </CollapsibleContent> -->
 			<slot></slot>
 		</div>
     </CollapsibleRoot>
@@ -72,10 +60,14 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import { iconByType } from '#shared/general.util';
 import type { DropdownOption } from '~/components/base/DropdownMenu.vue';
-import { hasPermissions } from '~/shared/auth.util';
-import type { TreeItem } from '~/types/content';
+import { hasPermissions } from '#shared/auth.util';
+import { TreeDOM } from '#shared/tree';
+import { Content, iconByType } from '#shared/content.util';
+import { dom, icon, text } from '#shared/dom.util';
+import { unifySlug } from '#shared/general.util';
+import { popper } from '#shared/floating.util';
+import { link } from '#shared/proses';
 
 const options = ref<DropdownOption[]>([{
 	type: 'item',
@@ -94,16 +86,43 @@ const { fetch } = useContent();
 await fetch(false);
 
 const route = useRouter().currentRoute;
-const path = computed(() => route.value.params.path ? Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path : undefined);
+const path = computed(() => route.value.params.path ? decodeURIComponent(unifySlug(route.value.params.path)) : undefined);
+
+await Content.init();
+const tree = new TreeDOM((item, depth) => {
+	return dom('div', { class: 'group flex items-center ps-2 outline-none relative cursor-pointer', style: { 'padding-left': `${depth / 2 - 0.5}em` } }, [dom('div', { class: ['flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full cursor-pointer font-medium'], attributes: { 'data-private': item.private } }, [
+		icon('radix-icons:chevron-right', { class: 'h-4 w-4 transition-transform absolute group-data-[state=open]:rotate-90', style: { 'left': `${depth / 2 - 1.5}em` } }),
+		dom('div', { class: 'pl-1.5 py-1.5 flex-1 truncate', text: item.title, attributes: { title: item.title } }),
+		item.private ? popper(dom('span', { class: 'flex' }, [icon('radix-icons:lock-closed', { class: 'mx-1' })]), { delay: 150, offset: 8, placement: 'right', arrow: true, content: [text('Privé')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }) : undefined,
+	])]);
+}, (item, depth) => {
+	return dom('div', { class: 'group flex items-center ps-2 outline-none relative cursor-pointer', style: { 'padding-left': `${depth / 2 - 0.5}em` } }, [link({ class: ['flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full'], attributes: { 'data-private': item.private }, active: 'text-accent-blue' }, item.path ? { name: 'explore-path', params: { path: item.path } } : undefined, [
+		icon(iconByType[item.type], { class: 'w-5 h-5', width: 20, height: 20 }),
+		dom('div', { class: 'pl-1.5 py-1.5 flex-1 truncate', text: item.title, attributes: { title: item.title } }),
+		item.private ? popper(dom('span', { class: 'flex' }, [icon('radix-icons:lock-closed', { class: 'mx-1' })]), { delay: 150, offset: 8, placement: 'right', arrow: true, content: [text('Privé')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }) : undefined,
+	])]);
+}, (item) => item.navigable);
+(path.value?.split('/').map((e, i, a) => a.slice(0, i).join('/')) ?? []).forEach(e => tree.toggle(e, true));
+const treeParent = useTemplateRef('treeParent');
+
+const unmount = useRouter().afterEach((to, from, failure) => {
+	if(failure)
+		return;
+
+	to.name === 'explore-path' && (unifySlug(to.params.path).split('/').map((e, i, a) => a.slice(0, i).join('/')) ?? []).forEach(e => tree.toggle(e, true));
+});
 
 watch(route, () => {
 	open.value = false;
 });
 
-const { tree } = useContent();
-const pages = computed(() => transform(tree.value));
-function transform(list: TreeItem[] | undefined): TreeItem[] | undefined
+onMounted(() => {
+	if(treeParent.value)
 	{
-	return list?.filter(e => e.navigable)?.map(e => ({ ...e, open: path.value?.startsWith(e.path), children: transform(e.children) }));
+		treeParent.value.appendChild(tree.container);
 	}
+})
+onUnmounted(() => {
+	unmount();
+})
 </script>

nuxt.config.ts

@@ -17,6 +17,11 @@ export default defineNuxtConfig({
   tailwindcss: {
     viewer: false,
     config: {
+      content: {
+        files: [
+          "./shared/**/*.{vue,js,jsx,mjs,ts,tsx}"
+        ]
+      },
       theme: {
         extend: {
           boxShadow: {
@@ -115,6 +120,7 @@ export default defineNuxtConfig({
     pageTransition: false,
     layoutTransition: false
   },
+  ssr: false,
   components: [
     {
       path: '~/components',
@@ -139,7 +145,6 @@ export default defineNuxtConfig({
   runtimeConfig: {
     session: {
       password: '699c46bd-9aaa-4364-ad01-510ee4fe7013',
-      maxAge: 60 * 60 * 24 *30,
     },
     database: 'db.sqlite',
     mail: {
@@ -185,19 +190,9 @@ export default defineNuxtConfig({
       cert: fs.readFileSync(path.resolve(__dirname, 'localhost+1.pem')).toString('utf-8'),
     }
   },
-  devtools: {
-    enabled: false,
-  },
-  vite: {
-    server: {
-      watch: {
-        usePolling: true,
-      }
-    }
-  },
-  watchers: {
-    chokidar: {
-      usePolling: true,
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === 'iconify-icon',
     }
   }
 })

package.json

@@ -4,30 +4,35 @@
   "type": "module",
   "scripts": {
     "predev": "bun i",
-    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bunx --bun nuxi dev --no-f"
+    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bunx --bun nuxi dev --no-f",
+    "premigrate": "bunx drizzle-kit generate",
+    "migrate": "bun migrate.ts"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@codemirror/lang-markdown": "^6.3.3",
+    "@floating-ui/dom": "^1.7.2",
     "@iconify/vue": "^4.3.0",
     "@lezer/highlight": "^1.2.1",
     "@markdoc/markdoc": "^0.5.2",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/sitemap": "^7.4.2",
-    "@nuxtjs/tailwindcss": "^6.13.1",
+    "@nuxtjs/sitemap": "^7.4.3",
+    "@nuxtjs/tailwindcss": "^6.14.0",
     "@vueuse/gesture": "^2.0.0",
-    "@vueuse/math": "^13.4.0",
-    "@vueuse/nuxt": "^13.4.0",
+    "@vueuse/math": "^13.5.0",
+    "@vueuse/nuxt": "^13.5.0",
     "codemirror": "^6.0.2",
-    "drizzle-orm": "^0.44.2",
+    "drizzle-orm": "^0.44.3",
     "hast": "^1.0.0",
     "hast-util-heading": "^3.0.0",
     "hast-util-heading-rank": "^3.0.0",
+    "iconify-icon": "^2.3.0",
     "lodash.capitalize": "^4.2.1",
     "mdast-util-find-and-replace": "^3.0.2",
-    "nodemailer": "^7.0.3",
-    "nuxt": "3.17.5",
+    "nodemailer": "^7.0.5",
+    "nuxt": "^4.0.1",
     "nuxt-security": "^2.2.0",
     "radix-vue": "^1.9.17",
     "rehype-raw": "^7.0.0",
@@ -43,15 +48,15 @@
     "unist-util-visit": "^5.0.0",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "zod": "^3.25.67"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@types/bun": "^1.2.17",
+    "@types/bun": "^1.2.19",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/nodemailer": "^6.4.17",
     "@types/unist": "^3.0.3",
-    "better-sqlite3": "^12.1.1",
-    "bun-types": "^1.2.17",
+    "better-sqlite3": "^12.2.0",
+    "bun-types": "^1.2.19",
     "drizzle-kit": "^0.31.4",
     "mdast-util-to-string": "^4.0.0",
     "rehype-stringify": "^10.0.1"

pages/admin/index.vue

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

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

@@ -1,115 +1,27 @@
 <script setup lang="ts">
-import characterConfig from '#shared/character-config.json';
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import { CharacterBuilder, defaultCharacter } from '~/shared/character';
-import type { Character, CharacterConfig } from '~/types/character';
-
-const stepTexts: Record<number, string> = {
-    0: 'Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.',
-    1: 'Déterminez la progression de votre personnage en choisissant une option par niveau disponible.',
-    2: 'Spécialisez votre personnage en attribuant vos points d\'entrainement parmi les 7 branches disponibles.\nChaque paliers de 3 points augmentent votre modifieur.',
-    3: 'Diversifiez vos possibilités en affectant vos points dans les différentes compétences disponibles.',
-    4: 'Déterminez l\'Aspect qui vous corresponds et benéficiez de puissants bonus.'
-};
+import { CharacterBuilder } from '#shared/character.util';
+import { unifySlug } from '~/shared/general.util';
 
 definePageMeta({
     guestsGoesTo: '/user/login',
 });
-let id = useRouter().currentRoute.value.params.id;
-const { add } = useToast();
-const config = characterConfig as CharacterConfig;
-const data = ref<Character>({ ...defaultCharacter });
-const builder = markRaw(new CharacterBuilder(data.value));
+const id = unifySlug(useRouter().currentRoute.value.params.id ?? "new");
+const container = useTemplateRef('container');
 
-const step = ref(0);
-
-if(id !== 'new')
+onMounted(() => {
+    queueMicrotask(() => {
+        if(container.value)
         {
-    const character = await useRequestFetch()(`/api/character/${id}`);
-
-    if(!character)
-    {
-        throw new Error('Donnée du personnage introuvables');
-    }
-
-    data.value = Object.assign(defaultCharacter, data.value, character);
-}
-
-async function save(leave: boolean)
-{
-    if(data.value.name === '' || data.value.people === undefined || data.value.people === -1)
-    {                
-        add({ title: 'Données manquantes', content: "Merci de saisir un nom et une race avant de pouvoir enregistrer votre personnage", type: 'error', duration: 25000, timer: true });
-        return;
-    }
-    if(id === 'new')
-    {
-        //@ts-ignore
-        id = await useRequestFetch()(`/api/character`, {
-            method: 'post',
-            body: data.value,
-            onResponseError: (e) => {
-                add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', duration: 25000, timer: true });
-            }
-        });
-        add({ content: 'Personnage créé', type: 'success', duration: 25000, timer: true });
-        useRouter().replace({ name: 'character-id-edit', params: { id: id } })
-        if(leave) useRouter().push({ name: 'character-id', params: { id: id } });
-    }
-    else
-    {
-        //@ts-ignore
-        await useRequestFetch()(`/api/character/${id}`, {
-            method: 'post',
-            body: data.value,
-            onResponseError: (e) => {
-                add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', duration: 25000, timer: true });
-            }
-        });
-        add({ content: 'Personnage enregistré', type: 'success', duration: 25000, timer: true });
-        if(leave) useRouter().push({ name: 'character-id', params: { id: id } });
-    }
-}
+            const builder = new CharacterBuilder(container.value, id === 'new' ? undefined : id);
 
             useShortcuts({
-    "Meta_S": () =>save(false),
+                "Meta_S": () => builder.save(false),
+            })
+        }
+    });
 })
 </script>
 
 <template>
-    <Head>
-        <Title>d[any] - Edition de {{ data.name || 'nouveau personnage' }}</Title>
-    </Head>
-    <div class="flex flex-1 max-w-full flex-col align-center">
-        <StepperRoot class="flex flex-1 flex-col justify-start items-center px-8 w-full h-full overflow-y-hidden" v-model="step">
-            <div class="flex w-full flex-row gap-4 items-center justify-between px-4 bg-light-0 dark:bg-dark-0 z-20">
-                <div></div>
-                <div class="flex w-full flex-row gap-4 items-center justify-center relative">
-                    <StepperItem :step="0" class="group"><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue group-data-[state=active]:text-accent-blue">Peuples</StepperTrigger></StepperItem>
-                    <StepperItem :disabled="data.people === undefined" :step="1" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue">Niveaux</StepperTrigger></StepperItem>
-                    <StepperItem :disabled="data.people === undefined" :step="2" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue">Entrainement</StepperTrigger></StepperItem>
-                    <StepperItem :disabled="data.people === undefined" :step="3" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue">Compétences</StepperTrigger></StepperItem>
-                    <StepperItem :disabled="data.people === undefined" :step="4" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue">Aspect</StepperTrigger></StepperItem>
-                </div>
-                <div>
-                    <Tooltip class="max-w-96" side="bottom" align="end" :message="stepTexts[step]"><Icon icon="radix-icons:question-mark-circled" class="w-5 h-5" /></Tooltip>
-                </div>
-            </div>
-            <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 0">
-                <PeopleSelector v-model="builder" :config="config" @next="step = 1" />
-            </div>
-            <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 1">
-                <LevelEditor v-model="builder" :config="config" @next="step = 2" />
-            </div>
-            <!-- <div class="flex-1 outline-none max-w-full w-full h-full max-h-full overflow-y-auto" v-show="step === 2">
-                <TrainingEditor v-model="builder" :config="config" @next="step = 3" />
-            </div>
-            <div class="flex-1 outline-none max-w-full w-fulloverflow-y-auto" v-show="step === 3">
-                <AbilityEditor v-model="builder" :config="config" @next="step = 4" />
-            </div>
-            <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 4">
-                <AspectSelector v-model="builder" :config="config" @next="save(true)" />
-            </div> -->
-        </StepperRoot>
-    </div>
+    <div class="flex flex-1 max-w-full flex-col align-center" ref="container"></div>
 </template>

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import config from '#shared/character-config.json';
+import characterConfig from '#shared/character-config.json';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import PreviewA from '~/components/prose/PreviewA.vue';
-import { clamp } from '~/shared/general.util';
+import { clamp } from '#shared/general.util';
 import type { SpellConfig } from '~/types/character';
-import { elementTexts, spellTypeTexts, type CharacterConfig } from '~/types/character';
+import type { CharacterConfig } from '~/types/character';
 
-const characterConfig = config as CharacterConfig;
+const config = characterConfig as CharacterConfig;
 
 const id = useRouter().currentRoute.value.params.id;
 const { user } = useUserSession();
@@ -148,7 +148,7 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                             </div>
                             <div class="flex flex-col">
                                 <span class="text-lg font-semibold">Aptitudes</span>
-                                <MarkdownRenderer :content="character.features.misc.map(e => `> ${e}`).join('\n\n')" />
+                                <MarkdownRenderer :content="character.features.passive.map(e => `> ${e}`).join('\n\n')" />
                             </div>
                         </div>
                     </TabsContent>

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

@@ -1,24 +1,23 @@
 <template>
-    <div class="flex flex-1 justify-start items-start" v-if="overview">
+    <div class="flex flex-1 justify-start items-start" ref="element">
         <Head>
-            <Title>d[any] - {{ overview.title }}</Title>
+            <Title>d[any] - {{ overview?.title ?? "Erreur" }}</Title>
         </Head>
-        <Markdown v-if="overview.type === 'markdown'" :path="path" />
-        <Canvas v-else-if="overview.type === 'canvas'" :path="path" />
-        <ProseH2 v-else class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
-    </div>
-    <div v-else>
-        <Head>
-            <Title>d[any] - Erreur</Title>
-        </Head>
-        <div><ProseH2>Impossible d'afficher le contenu demandé</ProseH2></div>
     </div>
 </template>
 
 <script setup lang="ts">
-const route = useRouter().currentRoute;
-const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
+import { Content } from '#shared/content.util';
+import { unifySlug } from '#shared/general.util';
 
-const { content } = useContent();
-const overview = computed(() => content.value.find(e => e.path === path.value));
+const element = useTemplateRef('element'), overview = ref();
+const route = useRouter().currentRoute;
+const path = computed(() => unifySlug(route.value.params.path ?? ''));
+
+onMounted(async () => {
+	if(element.value && path.value && await Content.ready)
+    {
+        overview.value = Content.render(element.value, path.value);
+    }
+});
 </script>

pages/explore/edit/index.vue

@@ -2,17 +2,15 @@
 	<Head>
 		<Title>d[any] - Modification</Title>
 	</Head>
-	<ClientOnly>
-		<CollapsibleRoot asChild class="flex flex-1 flex-col xl:-mx-12 xl:-my-8 lg:-mx-8 lg:-my-6 -mx-6 -my-3  overflow-hidden" v-model="open">
-			<div>
-				<div class="z-50 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
+	<div class="flex flex-1 flex-col xl:-mx-12 xl:-my-8 lg:-mx-8 lg:-my-6 -mx-6 -my-3 overflow-hidden">
+		<div class="z-30 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
 			<div class="flex items-center px-2 gap-4">
-						<CollapsibleTrigger asChild>
+<!-- 			<CollapsibleTrigger asChild>
 					<Button icon class="!bg-transparent group md:hidden">
 						<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
 						<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
 					</Button>
-						</CollapsibleTrigger>
+				</CollapsibleTrigger> -->
 				<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-opacity-70 m-2 flex items-center gap-4" aria-label="Accueil" :to="{ path: '/', force: true }">
 					<Avatar src="/logo.dark.svg" class="dark:block hidden" />
 					<Avatar src="/logo.light.svg" class="block dark:hidden" />
@@ -23,207 +21,94 @@
 				<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">{{ user!.username }}</NuxtLink>
 			</div>
 		</div>
-				<div class="flex flex-1 flex-row relative overflow-hidden">
-					<CollapsibleContent asChild forceMount>
+		<div class="flex flex-1 flex-row relative h-screen overflow-hidden">
 			<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
-							<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
-								<div class="flex flex-row justify-between items-center pt-2 pb-4 mb-2 px-2 gap-4 border-b border-light-35 dark:border-dark-35">
-									<Button @click="router.push({ name: 'explore-path', params: { path: selected ? getPath(selected) : 'index' } })">Quitter</Button>
-									<Button @click="save(true);">Enregistrer</Button>
-									<Tooltip side="top" message="Nouveau">
-										<DropdownMenu align="end" side="bottom" :options="[{
-											type: 'item',
-											label: 'Markdown',
-											kbd: 'Ctrl+N',
-											icon: 'radix-icons:file-text',
-											select: () => add('markdown'),
-										}, {
-											type: 'item',
-											label: 'Dossier',
-											kbd: 'Ctrl+Shift+N',
-											icon: 'lucide:folder',
-											select: () => add('folder'),
-										}, {
-											type: 'item',
-											label: 'Canvas',
-											icon: 'ph:graph-light',
-											select: () => add('canvas'),
-										}, {
-											type: 'item',
-											label: 'Carte',
-											icon: 'lucide:map',
-											select: () => add('map'),
-										}, {
-											type: 'item',
-											label: 'Fichier',
-											icon: 'radix-icons:file',
-											select: () => add('file'),
-										}]">
-											<Button icon><Icon class="w-5 h-5" icon="radix-icons:plus" /></Button>
-										</DropdownMenu>
-									</Tooltip>
-								</div>
-								<DraggableTree class="ps-4 text-sm" :items="navigation ?? undefined" :get-key="(item: Partial<TreeItemEditable>) => item.path !== undefined ? getPath(item as TreeItemEditable) : ''" @updateTree="drop" 
-								v-model="selected" :defaultExpanded="defaultExpanded" :get-children="(item: Partial<TreeItemEditable>) => item.type === 'folder' ? item.children : undefined" >
-									<template #default="{ handleToggle, handleSelect, isExpanded, isDragging, item }">
-										<div class="flex flex-1 items-center overflow-hidden" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level / 2 - 0.5}em` }">
-											<div class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple group-data-[selected]:text-accent-blue">
-												<Icon @click="handleToggle" v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level / 2 - 1.5}em` }" />
-												<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="w-5 h-5" @click="handleSelect" />
-												<div class="pl-1.5 py-1.5 flex-1 truncate" :title="item.value.title" @click="handleSelect" :class="{ 'font-semibold': item.hasChildren }">
-													{{ item.value.title }}
-												</div>
-											</div>
-											<div class="flex gap-2">
-												<span @click="item.value.private = !item.value.private">
-													<Icon v-if="item.value.private" icon="radix-icons:lock-closed" />
-													<Icon v-else class="text-light-50 dark:text-dark-50" icon="radix-icons:lock-open-2" />
-												</span>
-												<span @click="item.value.navigable = !item.value.navigable">
-													<Icon v-if="item.value.navigable" icon="radix-icons:eye-open" />
-													<Icon v-else class="text-light-50 dark:text-dark-50" icon="radix-icons:eye-none" />
-												</span>
-											</div>
-										</div>
-									</template>
-									<template #hint="{ instruction }">
-										<div v-if="instruction" class="absolute h-full w-full top-0 right-0 border-light-50 dark:border-dark-50" :style="{
-												width: `calc(100% - ${instruction.currentLevel / 2 - 1.5}em)`
-											}" :class="{
-												'!border-b-4': instruction?.type === 'reorder-below',
-												'!border-t-4': instruction?.type === 'reorder-above',
-												'!border-4': instruction?.type === 'make-child',
-											}"></div>
-									</template>
-								</DraggableTree>
-							</div>
+				<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden" ref="tree"></div>
 				<div class="xl:px-12 px-6 pt-4 pb-2 text-center text-xs text-light-60 dark:text-dark-60">
 					<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
 					<p>Copyright Peaceultime - 2025</p>
 				</div>
 			</div>
-					</CollapsibleContent>
-					<div class="flex flex-1 flex-row max-h-full overflow-hidden">
-						<div v-if="selected" class="flex flex-1 flex-col items-start justify-start max-h-full relative">
-							<Head>
-								<Title>d[any] - Modification de {{ selected.title }}</Title>
-							</Head>
-							<CollapsibleRoot v-model:open="topOpen" class="group data-[state=open]:mt-4 w-full relative">
-								<CollapsibleTrigger asChild>
-									<Button class="absolute left-1/2 -translate-x-1/2 group-data-[state=open]:-bottom-3 group-data-[state=closed]:-bottom-6 z-30" icon>
-										<Icon v-if="topOpen" icon="radix-icons:caret-up" class="h-4 w-4" />
-										<Icon v-else icon="radix-icons:caret-down" class="h-4 w-4" />
-									</Button>
-								</CollapsibleTrigger>
-								<CollapsibleContent class="xl:px-12 lg:px-8 px-6">
-									<div class="pb-2 grid lg:grid-cols-2 grid-cols-1 lg:items-center justify-between gap-x-4 flex-1 border-b border-light-35 dark:border-dark-35">
-										<input type="text" v-model="selected.title" @input="() => {
-											if(selected && !selected.customPath)
-											{
-												selected.name = parsePath(selected.title);
-												rebuildPath(selected.children, getPath(selected));
-											}
-										}" placeholder="Titre" style="line-height: normal;" class="flex-1 md:text-5xl text-4xl md:h-14 h-12 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none pb-3 font-thin bg-transparent"/>
-										<div class="flex flex-row justify-between items-center gap-x-4">
-											<div v-if="selected.customPath" class="flex lg:items-center truncate">
-												<pre class="md:text-base text-sm truncate" style="direction: rtl">/{{ selected.parent !== '' ? selected.parent + '/' : '' }}</pre>
-												<TextInput v-model="selected.name" @input="(e: Event) => {
-													if(selected && selected.customPath)
-													{
-														selected.name = parsePath(selected.name);
-														rebuildPath(selected.children, getPath(selected));
-													}
-												}" class="mx-0 font-mono"/>
-											</div>
-											<pre v-else class="md:text-base text-sm truncate" style="direction: rtl">{{ getPath(selected) }}/</pre>
-											<div class="flex gap-4">
-												<Dialog :title="`Supprimer '${selected.title}'${selected.children?.length ?? 0 > 0 ? ' et ses enfants' : ''}`">
-													<template #trigger><Button icon class="bg-light-red dark:bg-dark-red !bg-opacity-40 border-light-red dark:border-dark-red hover:bg-light-red dark:hover:bg-dark-red hover:!bg-opacity-70 hover:border-light-red dark:hover:border-dark-red"><Icon icon="radix-icons:trash" /></Button></template>
-													<template #default>
-														<div class="flex gap-4">
-															<DialogClose><Button @click="navigation = tree.remove(navigation, getPath(selected)); selected = undefined;" class="bg-light-red dark:bg-dark-red !bg-opacity-40 border-light-red dark:border-dark-red hover:bg-light-red dark:hover:bg-dark-red hover:!bg-opacity-70 hover:border-light-red dark:hover:border-dark-red">Oui</Button></DialogClose>
-															<DialogClose><Button>Non</Button></DialogClose>
-														</div>
-													</template>
-												</Dialog>
-												<Dialog title="Préférences Markdown" v-if="selected.type === 'markdown'">
-													<template #trigger><Button icon><Icon icon="radix-icons:gear" /></Button></template>
-													<template #default>
-														<Select label="Editeur de markdown" :modelValue="preferences.markdown.editing" @update:model-value="v => preferences.markdown.editing = (v as 'reading' | 'editing' | 'split')">
-															<SelectItem label="Mode lecture" value="reading" />
-															<SelectItem label="Mode edition" value="editing" />
-															<SelectItem label="Ecran partagé" value="split" />
-														</Select>
-													</template>
-												</Dialog>
-												<DropdownMenu align="end" :options="[{
-													type: 'checkbox',
-													label: 'URL custom',
-													select: (state: boolean) => { selected!.customPath = state; if(!state) selected!.name = parsePath(selected!.title) },
-													checked: selected.customPath
-												}]">
-													<Button icon><Icon icon="radix-icons:dots-vertical"/></Button>
-												</DropdownMenu>
+			<div class="flex flex-1 flex-row max-h-full overflow-hidden" ref="container"></div>
 		</div>
 	</div>
-									</div>
-								</CollapsibleContent>
-							</CollapsibleRoot>
-							<div class="py-4 flex-1 w-full max-h-full flex overflow-hidden xl:px-12 lg:px-8 px-6 relative">
-								<template v-if="selected.type === 'markdown'">
-									<div v-if="contentStatus === 'pending'" class="flex flex-1 justify-center items-center">
-										<Loading />
-									</div>
-									<span v-else-if="contentError">{{ contentError }}</span>
-									<template v-else-if="preferences.markdown.editing === 'editing'">
-										<Editor v-model="selected.content" autofocus class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto lg:mx-16 xl:mx-32 2xl:mx-64" />
-									</template>
-									<template v-else-if="preferences.markdown.editing === 'reading'">
-										<div class="flex-1 max-h-full !overflow-y-auto px-4 xl:px-32 2xl:px-64"><MarkdownRenderer :content="(debounced as string)" :proses="{ 'a': FakeA }" /></div>
-									</template>
-									<template v-else-if="preferences.markdown.editing === 'split'">
-										<SplitterGroup direction="horizontal" class="flex-1 w-full flex">
-											<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }" :defaultSize="50">
-												<Editor v-model="selected.content" autofocus class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }" />
-											</SplitterPanel>
-											<SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
-											<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
-												<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><MarkdownRenderer :content="(debounced as string)" :proses="{ 'a': FakeA }" /></div>
-											</SplitterPanel>
-										</SplitterGroup>
-									</template>
-								</template>
-								<template v-else-if="selected.type === 'canvas'">
-									<CanvasEditor v-if="selected.content" :modelValue="selected.content" :path="getPath(selected)" />
-								</template>
-								<template v-else-if="selected.type === 'map'">
-									<span class="flex flex-1 justify-center items-center"><ProseH3>Editeur de carte en cours de développement</ProseH3></span>
-								</template>
-								<template v-else-if="selected.type === 'file'">
-									<span>Modifier le contenu :</span><input type="file" @change="(e: Event) => console.log((e.target as HTMLInputElement).files?.length)" />
-								</template>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</CollapsibleRoot>
-	</ClientOnly>
 </template>
 
 <script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
-import { iconByType, convertContentFromText, convertContentToText, DEFAULT_CONTENT,parsePath } from '#shared/general.util';
-import type { ExploreContent, FileType, TreeItem } from '~/types/content';
-import FakeA from '~/components/prose/FakeA.vue';
-import type { Preferences } from '~/types/general';
+import { Content, Editor } from '#shared/content.util';
+import { button, loading } from '#shared/proses';
+import { dom, icon, text } from '~/shared/dom.util';
+import { modal, popper } from '~/shared/floating.util';
  
-export type TreeItemEditable = TreeItem &
+definePageMeta({
+	rights: ['admin', 'editor'],
+	layout: 'null',
+});
+
+const toaster = useToast();
+const { user } = useUserSession();
+const tree = useTemplateRef('tree'), container = useTemplateRef('container');
+let editor: Editor;
+
+function pull()
 {
-	parent: string;
-	name: string;
-	customPath: boolean;
+	Content.pull().then(e => {
+		toaster.add({ type: 'success', content: 'Données mises à jour avec succès.', timer: true, duration: 7500 });
+	}).catch(e => {
+		toaster.add({ type: 'success', content: 'Une erreur est survenue durant la récupération des données.', timer: true, duration: 7500 });
+		console.error(e);
+	});
+}
+function push()
+{
+	const { close } = modal([dom('div', { class: 'flex flex-col gap-4 justify-center items-center' }, [ dom('div', { class: 'text-xl', text: 'Mise à jour des données' }), loading('large') ])], { priority: false, closeWhenOutside: true, });
+	Content.push().then(e => {
+		close();
+		toaster.add({ type: 'success', content: 'Données mises à jour avec succès.', timer: true, duration: 7500 });
+	}).catch(e => {
+		close();
+		toaster.add({ type: 'success', content: 'Une erreur est survenue durant l\'enregistrement des données.', timer: true, duration: 7500 });
+		console.error(e);
+	});
+}
+
+onMounted(async () => {
+	if(tree.value && container.value && await Content.ready)
+	{ 
+		const load = loading('normal');
+		tree.value.appendChild(load);
+
+		const content = dom('div', { class: 'flex flex-row justify-start items-center gap-4 p-2' }, [
+			popper(button(icon('ph:cloud-arrow-down', { height: 20, width: 20 }), pull, 'p-1'), { placement: 'top', offset: 4, delay: 120, arrow: true, content: [text('Actualiser')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }),
+			popper(button(icon('ph:cloud-arrow-up', { height: 20, width: 20 }), push, 'p-1'), { placement: 'top', offset: 4, delay: 120, arrow: true, content: [text('Enregistrer')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }),
+		])
+
+		tree.value.insertBefore(content, load);
+		
+		editor = new Editor();
+
+		tree.value.replaceChild(editor.tree.container, load);
+		container.value.appendChild(editor.container);
+	}
+});
+
+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[];
 }
 
@@ -240,225 +125,73 @@ const open = ref(true), topOpen = ref(true);
 const toaster = useToast();
 const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
 
-const { content: complete, tree: project } = useContent();
-const navigation = ref<TreeItemEditable[]>(transform(JSON.parse(JSON.stringify(project.value)))!);
-const selected = ref<TreeItemEditable>(), edited = ref(false);
-const contentStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), contentError = ref<string>();
+let navigation = Content.tree as TreeItemEditable[];
+const selected = ref<TreeItemEditable>();
 
-const preferences = useCookie<Preferences>('preferences', { default: () => ({ markdown: { editing: 'split' }, canvas: { snap: true, size: 32 } }), watch: true, maxAge: 60*60*24*31 });
+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)
 		{
-			contentStatus.value = 'pending';
-			try
-			{
-				const storedEdit = sessionStorage.getItem(`editing:${encodeURIComponent(selected.value.path)}`);
-
-				if(storedEdit)
-				{
-					selected.value.content = convertContentFromText(selected.value.type, storedEdit);
-					contentStatus.value = 'success';
-				}
-				else
-				{
-					selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }));
-					contentStatus.value = 'success';
+			selected.value = await Content.content(selected.value.path);
 		}
 
-				//@ts-ignore
-				debounced.value = selected.value.content ?? '';
-			}
-			catch(e)
-			{
-				contentError.value = (e as Error).message;
-				contentStatus.value = 'error';
-			}
-		}
-		else
-		{
-			//@ts-ignore
-			debounced.value = selected.value.content ?? '';
-		}
-		router.replace({ hash: '#' + selected.value.path || getPath(selected.value) });
+		router.replace({ hash: '#' + selected.value!.path || getPath(selected.value!) });
 	}
 	else
 	{
 		router.replace({ hash: '' });
 	}
 })
-const content = computed(() => selected.value?.content ?? '');
-const debounced = useDebounce(content, 250, { maxWait: 500 });
+const debouncedSave = useDebounceFn(save, 60000, { maxWait: 180000 });
 
-watch(debounced, () => {
-	if(selected.value && debounced.value)
-		sessionStorage.setItem(`editing:${encodeURIComponent(selected.value.path)}`, typeof debounced.value === 'string' ? debounced.value : JSON.stringify(debounced.value));
-});
 useShortcuts({
-    meta_s: { usingInput: true, handler: () => save(false), prevent: true },
+    //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 }
 })
 
-const tree = {
-  remove(data: TreeItemEditable[], id: string): TreeItemEditable[] {
-	return data
-	  .filter(item => getPath(item) !== id)
-	  .map((item) => {
-		if (tree.hasChildren(item)) {
-		  return {
-			...item,
-			children: tree.remove(item.children ?? [], id),
-		  };
-		}
-		return item;
-	  });
-  },
-  insertBefore(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
-	return data.flatMap((item) => {
-	  if (getPath(item) === targetId)
-		return [newItem, item];
-
-	  if (tree.hasChildren(item)) {
-		return {
-		  ...item,
-		  children: tree.insertBefore(item.children ?? [], targetId, newItem),
-		};
-	  }
-	  return item;
-	});
-  },
-  insertAfter(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
-	return data.flatMap((item) => {
-	  if (getPath(item) === targetId)
-		return [item, newItem];
-
-	  if (tree.hasChildren(item)) {
-		return {
-		  ...item,
-		  children: tree.insertAfter(item.children ?? [], targetId, newItem),
-		};
-	  }
-
-	  return item;
-	});
-  },
-  insertChild(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
-	return data.flatMap((item) => {
-	  if (getPath(item) === targetId) {
-		// already a parent: add as first child
-		return {
-		  ...item,
-		  // opening item so you can see where item landed
-		  isOpen: true,
-		  children: [newItem, ...item.children ?? []],
-		};
-	  }
-
-	  if (!tree.hasChildren(item))
-		return item;
-
-	  return {
-		...item,
-		children: tree.insertChild(item.children ?? [], targetId, newItem),
-	  };
-	});
-  },
-  find(data: TreeItemEditable[], itemId: string): TreeItemEditable | undefined {
-	for (const item of data) {
-	  if (getPath(item) === itemId)
-		return item;
-
-	  if (tree.hasChildren(item)) {
-		const result = tree.find(item.children ?? [], itemId);
-		if (result)
-		  return result;
-	  }
-	}
-  },
-  search(data: TreeItemEditable[], prop: keyof TreeItemEditable, value: string): TreeItemEditable[] {
-	const arr = [];
-
-	for (const item of data)
-	{
-	  if (item[prop]?.toString().toLowerCase()?.startsWith(value.toLowerCase()))
-		arr.push(item);
-
-	  if (tree.hasChildren(item)) {
-		arr.push(...tree.search(item.children ?? [], prop, value));
-	  }
-	}
-
-	return arr;
-  },
-  getPathToItem({
-	current,
-	targetId,
-	parentIds = [],
-  }: {
-	current: TreeItemEditable[]
-	targetId: string
-	parentIds?: string[]
-  }): string[] | undefined {
-	for (const item of current) {
-	  if (getPath(item) === targetId)
-		return parentIds;
-
-	  const nested = tree.getPathToItem({
-		current: (item.children ?? []),
-		targetId,
-		parentIds: [...parentIds, getPath(item)],
-	  });
-	  if (nested)
-		return nested;
-	}
-  },
-  hasChildren(item: TreeItemEditable): boolean {
-	return (item.children ?? []).length > 0;
-  },
-}
-
 function add(type: FileType): void
 {
-	if(!navigation.value)
+	if(!navigation)
 	{
 		return;
 	}
 
-	const news = [...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
+	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.value = [...navigation.value, item];
+		navigation = [...navigation, item];
 	}
 	else if(selected.value?.children)
 	{
 		item.parent = getPath(selected.value);
-		navigation.value = tree.insertChild(navigation.value, item.parent, item);
+		navigation = tree.insertChild(navigation, item.parent, item);
 	}
 	else
 	{
-		navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
+		navigation = tree.insertAfter(navigation, getPath(selected.value), item);
 	}
 }
 function updateTree(instruction: Instruction, itemId: string, targetId: string) : TreeItemEditable[] | undefined {
-	if(!navigation.value)
+	if(!navigation)
 		return;
 
-    const item = tree.find(navigation.value, itemId);
-    const target = tree.find(navigation.value, targetId);
+    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.value,
+			current: navigation,
 			targetId: targetId,
 		});
 		if (!path) {
@@ -467,23 +200,23 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
 		}
 
 		const desiredId = path[instruction.desiredLevel];
-		let result = tree.remove(navigation.value, itemId);
+		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.value;
+		return navigation;
 
 	if (instruction.type === 'reorder-above') {
-		let result = tree.remove(navigation.value, itemId);
+		let result = tree.remove(navigation, itemId);
 		result = tree.insertBefore(result, targetId, item);
 		return result;
 	}
 
 	if (instruction.type === 'reorder-below') {
-		let result = tree.remove(navigation.value, itemId);
+		let result = tree.remove(navigation, itemId);
 		result = tree.insertAfter(result, targetId, item);
 		return result;
 	}
@@ -492,13 +225,13 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
         if(!target || target.type !== 'folder')
             return;
 
-		let result = tree.remove(navigation.value, itemId);
+		let result = tree.remove(navigation, itemId);
 		result = tree.insertChild(result, targetId, item);
         rebuildPath([item], targetId);
 		return result;
 	}
 
-  return navigation.value;
+  return navigation;
 }
 function transform(items: TreeItem[] | undefined): TreeItemEditable[] | undefined
 {
@@ -516,7 +249,7 @@ function flatten(items: TreeItemEditable[] | undefined): TreeItemEditable[]
 }
 function drop(instruction: Instruction, itemId: string, targetId: string)
 {
-    navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value ?? [];
+    navigation = updateTree(instruction, itemId, targetId) ?? navigation ?? [];
 }
 function rebuildPath(tree: TreeItemEditable[] | null | undefined, parentPath: string)
 {
@@ -528,37 +261,13 @@ function rebuildPath(tree: TreeItemEditable[] | null | undefined, parentPath: st
         rebuildPath(e.children, getPath(e));
     });
 }
-async function save(redirect: boolean): Promise<void>
+function save()
 {
-	//@ts-ignore
-	const map = (e: TreeItemEditable[]): TreeItemEditable[] => e.map(f => ({ ...f, content: f.content ? convertContentToText(f.type, f.content) : undefined, children: f.children ? map(f.children) : undefined }));
-	saveStatus.value = 'pending';
-	try {
-		const result = await $fetch(`/api/project`, {
-			method: 'post',
-			body: map(navigation.value),
-		});
-		saveStatus.value = 'success';
-		edited.value = false;
-		sessionStorage.clear();
-
-		toaster.clear('error');
-		toaster.add({ type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000 });
-
-		//@ts-ignore
-		complete.value = result as ExploreContent[];
-		if(redirect) router.go(-1);
-	} catch(e: any) {
-		toaster.add({
-			type: 'error', content: e.message, timer: true, duration: 10000
-		})
-		console.error(e);
-		saveStatus.value = 'error';
-	}
-}
-function getPath(item: TreeItemEditable): string
+	if(selected.value && selected.value.content)
 	{
-    return [item.parent, parsePath(item.customPath ? item.name : item.title)].filter(e => !!e).join('/');
+		selected.value.path = getPath(selected.value);
+		Content.save(selected.value);
+	}
 }
 
 const defaultExpanded = computed(() => {
@@ -568,10 +277,10 @@ const defaultExpanded = computed(() => {
 		split.forEach((e, i) => { if(i !== 0) split[i] = split[i - 1] + '/' + e });
 		return split;
 	}
-})
+});
 /*watch(router.currentRoute, (value) => {
-	if(value && value.hash && navigation.value)
-		selected.value = tree.find(navigation.value, value.hash.substring(1));
+	if(value && value.hash && navigation)
+		selected.value = tree.find(navigation, value.hash.substring(1));
 	else
 		selected.value = undefined;
 }, { immediate: true }); */

schemas/file.ts

@@ -1,16 +0,0 @@
-import { z } from "zod";
-
-export const fileType = z.enum(['folder', 'file', 'markdown', 'canvas', 'map']);
-export const schema = z.object({
-    path: z.string(),
-    owner: z.number().finite(),
-    title: z.string(),
-    type: fileType,
-    content: z.string(),
-    navigable: z.boolean(),
-    private: z.boolean(),
-    order: z.number().finite(),
-});
-
-export type FileType = z.infer<typeof fileType>;
-export type File = z.infer<typeof schema>; 

schemas/navigation.ts

@@ -1,16 +0,0 @@
-import { z } from "zod";
-import { fileType } from "./file";
-
-export const single = z.object({
-    path: z.string(),
-    owner: z.number().finite(),
-    title: z.string(),
-    type: fileType,
-    navigable: z.boolean(),
-    private: z.boolean(),
-    order: z.number().finite(),
-});
-export const table = z.array(single);
-
-export type Navigation = z.infer<typeof table>; 
-export type NavigationItem = z.infer<typeof single>; 

schemas/project.ts

@@ -1,22 +1,16 @@
 import { z } from "zod";
-import { fileType } from "./file";
+import { projectFilesTable } from "~/db/schema";
 
-const baseItem = z.object({
+export const Project = z.array(z.object({
+    id: z.string(),
     path: z.string(),
-    parent: z.string(),
-    name: z.string(),
     title: z.string(),
-    type: fileType,
+    type: z.enum(projectFilesTable.type.enumValues),
     navigable: z.boolean(),
     private: z.boolean(),
     order: z.number().finite(),
-    content: z.string().optional().or(z.null()),
-});
-export const item: z.ZodType<ProjectItem> = baseItem.extend({
-    children: z.lazy(() => item.array().optional()),
-});
-export const project = z.array(item);
+    timestamp: z.string(),
+}));
 
-export type ProjectItem = z.infer<typeof baseItem> & {
-    children?: ProjectItem[]
-}; 
+export type ProjectType = z.infer<typeof Project>;
+export type ProjectItemType = ProjectType[number];

server/api/__sitemap__/urls.ts

@@ -1,10 +1,10 @@
 import type { SitemapUrlInput } from '#sitemap/types'
-import { explorerContentTable } from '~/db/schema';
+import { projectFilesTable as files } from '~/db/schema';
 import useDatabase from '~/composables/useDatabase';
 
 export default defineSitemapEventHandler(() => {
     const db = useDatabase();
-    const pages = db.select({ path: explorerContentTable.path, lastMod: explorerContentTable.timestamp, navigable: explorerContentTable.navigable, private: explorerContentTable.private, type: explorerContentTable.type }).from(explorerContentTable).all();
+    const pages = db.select({ path: files.path, lastMod: files.timestamp, navigable: files.navigable, private: files.private, type: files.type }).from(files).all();
 
     return pages.filter(e => e.type !== 'folder' && e.navigable && !e.private && e.path.split('/').map((_, i, a) => a.slice(0, i).join('/')).every(p => !pages.find(_p => _p.path === p)?.private)).map(e => ({
         loc: `/explore/${encodeURIComponent(e.path)}`,

server/api/admin/pages.get.ts

@@ -1,7 +1,6 @@
-import { ne, sql } from 'drizzle-orm';
 import useDatabase from '~/composables/useDatabase';
-import { explorerContentTable } from '~/db/schema';
-import { hasPermissions } from '~/shared/auth.util';
+import { projectFilesTable } from '~/db/schema';
+import { hasPermissions } from '#shared/auth.util';
 
 export default defineEventHandler(async (e) => {
     const session = await getUserSession(e);
@@ -16,17 +15,15 @@ export default defineEventHandler(async (e) => {
 
     const db = useDatabase();
     const content = db.select({ 
-        path: explorerContentTable.path,
-        owner: explorerContentTable.owner,
-        title: explorerContentTable.title,
-        type: explorerContentTable.type,
-        size: sql<number>`CASE WHEN ${explorerContentTable.content} IS NULL THEN 0 ELSE length(${explorerContentTable.content}) END`.as('size'),
-        navigable: explorerContentTable.navigable,
-        private: explorerContentTable.private,
-        order: explorerContentTable.order,
-        visit: explorerContentTable.visit,
-        timestamp: explorerContentTable.timestamp,
-    }).from(explorerContentTable).all();
+        path: projectFilesTable.path,
+        owner: projectFilesTable.owner,
+        title: projectFilesTable.title,
+        type: projectFilesTable.type,
+        navigable: projectFilesTable.navigable,
+        private: projectFilesTable.private,
+        order: projectFilesTable.order,
+        timestamp: projectFilesTable.timestamp,
+    }).from(projectFilesTable).all();
 
     content.sort((a, b) => {
         return a.path.split('/').length - b.path.split('/').length;

server/api/admin/users.get.ts

@@ -1,6 +1,4 @@
-import { sql } from 'drizzle-orm';
 import useDatabase from '~/composables/useDatabase';
-import { userSessionsTable } from '~/db/schema';
 import { hasPermissions } from '~/shared/auth.util';
 
 export default defineEventHandler(async (e) => {

server/api/auth/login.post.ts

@@ -93,8 +93,6 @@ export default defineEventHandler(async (e): Promise<Return> => {
             }
         }) as UserSessionRequired);
 
-        db.update(usersDataTable).set({ logCount: user.data.logCount + 1 }).where(eq(usersDataTable.id, user.id)).run();
-
         setResponseStatus(e, 201);
         return { success: true, session: data };
     }

server/api/auth/register.post.ts

@@ -72,7 +72,7 @@ export default defineEventHandler(async (e): Promise<Return> => {
 
             db.insert(usersDataTable).values({ id: sql.placeholder('id') }).prepare().run({ id: id.id });
 
-            logSession(e, await setUserSession(e, { user: { id: id.id, username: body.data.username, email: body.data.email, state: 0, signin: new Date(), permissions: [], lastTimestamp: new Date(), logCount: 1 } }) as UserSessionRequired);
+            logSession(e, await setUserSession(e, { user: { id: id.id, username: body.data.username, email: body.data.email, state: 0, signin: new Date(), permissions: [], lastTimestamp: new Date() } }) as UserSessionRequired);
 
             const emailId = Bun.hash('register' + id.id + hash, Date.now());
             const timestamp = Date.now() + 1000 * 60 * 60;

server/api/auth/reset.post.ts

@@ -72,7 +72,7 @@ export default defineEventHandler(async (e): Promise<Return> => {
 
             db.insert(usersDataTable).values({ id: sql.placeholder('id') }).prepare().run({ id: id.id });
 
-            logSession(e, await setUserSession(e, { user: { id: id.id, username: body.data.username, email: body.data.email, state: 0, signin: new Date(), permissions: [], lastTimestamp: new Date(), logCount: 1 } }) as UserSessionRequired);
+            logSession(e, await setUserSession(e, { user: { id: id.id, username: body.data.username, email: body.data.email, state: 0, signin: new Date(), permissions: [], lastTimestamp: new Date() } }) as UserSessionRequired);
 
             await sendMail({
                 payload: {

server/api/character.post.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import useDatabase from '~/composables/useDatabase';
 import { characterAbilitiesTable, characterLevelingTable, characterModifiersTable, characterSpellsTable, characterTable, characterTrainingTable } from '~/db/schema';
-import { CharacterValidation } from '~/shared/character';
+import { CharacterValidation } from '#shared/character.util';
 import { type Ability, type MainStat } from '~/types/character';
 
 

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

@@ -1,7 +1,7 @@
 import { eq } from 'drizzle-orm';
 import useDatabase from '~/composables/useDatabase';
 import { characterAbilitiesTable, characterLevelingTable, characterModifiersTable, characterSpellsTable, characterTable, characterTrainingTable } from '~/db/schema';
-import { CharacterValidation } from '~/shared/character';
+import { CharacterValidation } from '#shared/character.util';
 import { type Ability, type MainStat } from '~/types/character';
 
 export default defineEventHandler(async (e) => {

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

@@ -1,8 +1,8 @@
 import useDatabase from '~/composables/useDatabase';
 import { type Character, type CharacterConfig, type CompiledCharacter, type DoubleIndex, type Level, type MainStat, type TrainingLevel, type TrainingOption } from '~/types/character';
 import characterData from '#shared/character-config.json';
-import { group } from '~/shared/general.util';
-import { defaultCharacter, MAIN_STATS } from '~/shared/character';
+import { group } from '#shared/general.util';
+import { defaultCharacter, MAIN_STATS } from '#shared/character.util';
 
 export default defineCachedEventHandler(async (e) => {
     const id = getRouterParam(e, "id");

server/api/file.post.ts

@@ -1,37 +0,0 @@
-import useDatabase from '~/composables/useDatabase';
-import { explorerContentTable } from '~/db/schema';
-import { schema } from '~/schemas/file';
-import { parsePath } from '~/shared/general.util';
-
-export default defineEventHandler(async (e) => {
-    const body = await readValidatedBody(e, schema.safeParse);
-    if(!body.success)
-    {
-        setResponseStatus(e, 403);
-        throw body.error;
-    }
-
-    const db = useDatabase();
-    
-    const buffer = Buffer.from(convertToStorableLinks(body.data.content, db.select({ path: explorerContentTable.path }).from(explorerContentTable).all().map(e => e.path)), 'utf-8');
-
-    const content = db.insert(explorerContentTable).values({ ...body.data, content: buffer }).onConflictDoUpdate({ target: explorerContentTable.path, set: { ...body.data, content: buffer, timestamp: new Date() } });
-
-    if(content !== undefined)
-    {        
-        return content;
-    }
-    
-    setResponseStatus(e, 404);
-    return;
-});
-
-export function convertToStorableLinks(content: string, path: string[]): string
-{
-    return content.replaceAll(/!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/g, (e: string, a1?: string, a2?: string , a3?: string) => {
-        const parsed = parsePath(a1 ?? '%%%%----%%%%----%%%%');
-        const replacer = path.find(e => e.endsWith(parsed));
-        const value = `[[${a1 ? (replacer ?? '') : ''}${a2 ?? ''}${(!a3 && a1 && replacer !== parsed ? '|' + a1 : a3) ?? ''}]]`;
-        return value;
-    });
-}

server/api/file/content/[id].get.ts

@@ -0,0 +1,46 @@
+import { eq, sql } from 'drizzle-orm';
+import useDatabase from '~/composables/useDatabase';
+import { projectFilesTable as files, projectContentTable as content } from '~/db/schema';
+
+export default defineEventHandler(async (e) => {
+    try
+    {
+        const id = getRouterParam(e, "id") ?? '';
+        if(!id)
+        {
+            setResponseStatus(e, 404);
+            return;
+        }
+
+        const db = useDatabase();
+        const data = db.select({ content: sql<string>`cast(${content.content} as TEXT)`.as('content'), private: files.private, owner: files.owner, }).from(content).leftJoin(files, eq(content.id, files.id)).where(eq(content.id, id)).get();
+
+        if(data && data.content)
+        {
+            const session = await getUserSession(e);
+
+            if(!session || !session.user || session.user.id !== data.owner)
+            {
+                if(data.private)
+                {
+                    setResponseStatus(e, 404);
+                    return;
+                }
+                else
+                {
+                    return data.content.replace(/%%(.+?)%%/g, "");
+                }
+            }
+
+            return data.content;
+        }
+        
+        return;
+    }
+    catch(_e)
+    {
+        console.error(_e);
+        setResponseStatus(e, 500);
+        return;
+    }
+});

server/api/file/content/[id].post.ts

@@ -0,0 +1,43 @@
+import useDatabase from '~/composables/useDatabase';
+import { hasPermissions } from '#shared/auth.util';
+import { projectContentTable, projectFilesTable } from '~/db/schema';
+import { eq } from 'drizzle-orm';
+
+export default defineEventHandler(async (e) => {
+    const { user } = await getUserSession(e);
+
+    if(!user || !hasPermissions(user.permissions, ['admin', 'editor']))
+    {
+        throw createError({ statusCode: 401, statusText: 'Unauthorized' });
+    }
+    
+    try
+    {
+        const id = getRouterParam(e, "id") ?? '';
+        const body = await readRawBody(e);
+        
+        if(!id)
+        {
+            setResponseStatus(e, 404);
+            return;
+        }
+
+        const db = useDatabase();
+        const item = db.select({ id: projectFilesTable.id }).from(projectFilesTable).where(eq(projectFilesTable.id, id)).get();
+
+        if(!item)
+        {
+            setResponseStatus(e, 404);
+            return;
+        }
+
+        db.insert(projectContentTable).values({ id: id, content: body }).onConflictDoUpdate({ set: { content: body }, target: projectContentTable.id }).run();
+        db.update(projectFilesTable).set({ timestamp: new Date() }).where(eq(projectFilesTable.id, id)).run()
+    }
+    catch(_e)
+    {
+        console.error(_e);
+        setResponseStatus(e, 500);
+        return;
+    }
+});

server/api/file/content/[path].get.ts

@@ -1,66 +0,0 @@
-import { eq, sql } from 'drizzle-orm';
-import useDatabase from '~/composables/useDatabase';
-import { explorerContentTable } from '~/db/schema';
-import { convertContentFromText } from '~/shared/general.util';
-
-export default defineEventHandler(async (e) => {
-    const path = decodeURIComponent(getRouterParam(e, "path") ?? '');
-    const query = getQuery(e);
-
-    if(!path)
-    {
-        setResponseStatus(e, 404);
-        return;
-    }
-
-    const db = useDatabase();
-    const content = db.select({ 
-        'content': sql<string>`cast(${explorerContentTable.content} as TEXT)`.as('content'),
-        'private': explorerContentTable.private,
-        'type': explorerContentTable.type,
-        'owner': explorerContentTable.owner,
-        'visit': explorerContentTable.visit,
-    }).from(explorerContentTable).where(eq(explorerContentTable.path, sql.placeholder('path'))).prepare().get({ path });
-
-    if(content !== undefined)
-    {
-        const session = await getUserSession(e);
-
-        if(!session || !session.user || session.user.id !== content.owner)
-        {
-            if(content.private)
-            {
-                setResponseStatus(e, 404);
-                return;
-            }
-            else
-            {
-                content.content = content.content.replace(/%%(.+)%%/g, "");
-            }
-        }
-        if(query.type === 'view')
-        {
-            db.update(explorerContentTable).set({ visit: content.visit + 1 }).where(eq(explorerContentTable.path, path)).run();
-        }
-        if(query.type === 'editing')
-        {
-            content.content = convertFromStorableLinks(content.content);
-        }
-
-        return convertContentFromText(content.type, content.content);
-    }
-    
-    setResponseStatus(e, 404);
-    return;
-});
-
-export function convertFromStorableLinks(content: string): string
-{
-    /*return content.replaceAll(/!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/g, (e: string, a1?: string, a2?: string , a3?: string) => {
-        const parsed = parsePath(a1 ?? '%%%%----%%%%----%%%%');
-        const replacer = path.find(e => e.endsWith(parsed)) ?? parsed;
-        const value = `[[${replacer}${a2 ?? ''}${(!a3 && replacer !== parsed ? '|' + a1 : a3) ?? ''}]]`;
-        return value;
-    });*/
-    return content;
-}

server/api/file/overview.get.ts

@@ -1,13 +1,11 @@
 import useDatabase from '~/composables/useDatabase';
-import { getTableColumns } from 'drizzle-orm';
-import { explorerContentTable } from '~/db/schema';
+import { projectFilesTable } from '~/db/schema';
 
 export default defineEventHandler(async (e) => {
     const { user } = await getUserSession(e);
 
     const db = useDatabase();
-    const { content: _, ...columns } = getTableColumns(explorerContentTable);
-    const content = db.select(columns).from(explorerContentTable).all();
+    const content = db.select().from(projectFilesTable).all();
 
     content.sort((a, b) => {
         return a.path.split('/').length - b.path.split('/').length;
@@ -36,6 +34,5 @@ export default defineEventHandler(async (e) => {
         return content.filter(e => !!e);
     }
     
-    setResponseStatus(e, 404);
-    return;
+    return [];
 });

server/api/file/overview.post.ts

@@ -0,0 +1,76 @@
+import useDatabase from '~/composables/useDatabase';
+import { hasPermissions } from "#shared/auth.util";
+import { eq, sql } from "drizzle-orm";
+import { projectFilesTable } from "~/db/schema";
+import { Project } from "~/schemas/project";
+
+export default defineEventHandler(async (e) => {
+    const { user } = await getUserSession(e);
+
+    if(!user || !hasPermissions(user.permissions, ['admin', 'editor']))
+    {
+        throw createError({ statusCode: 401, statusText: 'Unauthorized' });
+    }
+
+    const body = await readValidatedBody(e, Project.safeParse);
+
+    if(!body.success)
+    {
+        throw body.error;
+    }
+
+    const db = useDatabase(), items = body.data, blocked: string[] = [];
+
+    db.transaction((tx) => {
+        const data = tx.select({ id: projectFilesTable.id, timestamp: projectFilesTable.timestamp }).from(projectFilesTable).all();
+        const deletion = tx.delete(projectFilesTable).where(eq(projectFilesTable.id, sql.placeholder('id'))).prepare();
+
+        for(let i = 0; i < items.length; i++)
+        {
+            const item = items[i];
+
+            const index = data.findIndex(e => e.id === item.id);
+
+            if(index !== -1)
+            {
+                if(data[index].timestamp > new Date(item.timestamp))
+                {
+                    blocked.push(item.id);
+                    continue;
+                }
+
+                data.splice(index, 1);
+            }
+
+            tx.insert(projectFilesTable).values({
+                id: item.id,
+                path: item.path,
+                owner: user.id,
+                title: item.title,
+                type: item.type,
+                navigable: item.navigable,
+                private: item.private,
+                order: item.order,
+            }).onConflictDoUpdate({
+                set: {
+                    id: item.id,
+                    path: item.path,
+                    title: item.title,
+                    type: item.type,
+                    navigable: item.navigable,
+                    private: item.private,
+                    order: item.order,
+                    timestamp: new Date(),
+                },
+                target: projectFilesTable.id,
+            }).run();
+        }
+
+        for(let i = 0; i < data.length; i++)
+        {
+            deletion.run({ id: data[i].id });
+        }
+    });
+
+    return blocked;
+});

server/api/file/overview/[id].get.ts

@@ -1,11 +1,11 @@
 import { eq, sql } from 'drizzle-orm';
 import useDatabase from '~/composables/useDatabase';
-import { explorerContentTable } from '~/db/schema';
+import { projectFilesTable } from '~/db/schema';
 
-export default defineEventHandler(async (e) => {
-    const path = decodeURIComponent(getRouterParam(e, "path") ?? '');
+export default defineCachedEventHandler(async (e) => {
+    const id = getRouterParam(e, "id") ?? '';
 
-    if(!path)
+    if(!id)
     {
         setResponseStatus(e, 404);
         return;
@@ -14,13 +14,14 @@ export default defineEventHandler(async (e) => {
     const db = useDatabase();
 
     const content = db.select({ 
-        'path': explorerContentTable.path,
-        'owner': explorerContentTable.owner,
-        'title': explorerContentTable.title,
-        'type': explorerContentTable.type,
-        'navigable': explorerContentTable.navigable,
-        'private': explorerContentTable.private,
-    }).from(explorerContentTable).where(eq(explorerContentTable.path, sql.placeholder('path'))).prepare().get({ path });
+        'id': projectFilesTable.id,
+        'path': projectFilesTable.path,
+        'owner': projectFilesTable.owner,
+        'title': projectFilesTable.title,
+        'type': projectFilesTable.type,
+        'navigable': projectFilesTable.navigable,
+        'private': projectFilesTable.private,
+    }).from(projectFilesTable).where(eq(projectFilesTable.id, sql.placeholder('id'))).prepare().get({ id });
 
     if(content !== undefined)
     {
@@ -47,4 +48,4 @@ export default defineEventHandler(async (e) => {
     
     setResponseStatus(e, 404);
     return;
-});
+}, { getKey: (e) => getRouterParam(e, "id") ?? '', });

server/api/navigation.get.ts

@@ -1,77 +0,0 @@
-import useDatabase from '~/composables/useDatabase';
-import { explorerContentTable } from '~/db/schema';
-import type { NavigationItem } from '~/schemas/navigation';
-
-export type NavigationTreeItem = NavigationItem & { children?: NavigationTreeItem[] };
-export default defineEventHandler(async (e) => {
-    const { user } = await getUserSession(e);
-
-    const db = useDatabase();
-    const content = db.select({ 
-        path: explorerContentTable.path, 
-        type: explorerContentTable.type, 
-        owner: explorerContentTable.owner,
-        title: explorerContentTable.title, 
-        navigable: explorerContentTable.navigable, 
-        private: explorerContentTable.private, 
-        order: explorerContentTable.order,
-    }).from(explorerContentTable).all();
-
-    content.sort((a, b) => {
-        return a.path.split('/').length - b.path.split('/').length;
-    });
-
-    if(content.length > 0)
-    {
-        const navigation: NavigationTreeItem[] = [];
-
-        for(const idx in content)
-        {
-            const item = content[idx];
-            if(!!item.private && (user?.id ?? -1) !== item.owner || !item.navigable)
-            {
-                delete content[idx];
-                continue;
-            }
-            
-            const parent = item.path.includes('/') ? item.path.substring(0, item.path.lastIndexOf('/')) : undefined;
-
-            if(parent && !content.find(e => e && e.path === parent))
-            {
-                delete content[idx];
-                continue;
-            }
-        }
-        for(const item of content.filter(e => !!e))
-        {
-            addChild(navigation, item);
-        }
-
-        return navigation;
-    }
-    
-    setResponseStatus(e, 404);
-    return;
-});
-
-function addChild(arr: NavigationTreeItem[], e: NavigationItem): void
-{
-    const parent = arr.find(f => e.path.startsWith(f.path));
-
-    if(parent)
-    {
-        if(!parent.children)
-            parent.children = [];
-
-        addChild(parent.children, e);
-    }
-    else
-    {
-        arr.push({ ...e });
-        arr.sort((a, b) => {
-            if(a.order !== b.order)
-                return a.order - b.order;
-            return a.title.localeCompare(b.title);
-        });
-    }
-}

server/api/project.get.ts

@@ -1,80 +0,0 @@
-import useDatabase from '~/composables/useDatabase';
-import { explorerContentTable } from '~/db/schema';
-import type { NavigationItem } from '~/schemas/navigation';
-import type { ProjectItem, Project } from '~/schemas/project';
-import { hasPermissions } from '~/shared/auth.util';
-
-export default defineEventHandler(async (e) => {
-    const { user } = await getUserSession(e);
-
-    if(!user || !hasPermissions(user.permissions, ['editor', 'admin']))
-    {
-        throw createError({
-            statusCode: 401,
-            statusMessage: 'Unauthorized',
-        });
-    }
-
-    const db = useDatabase();
-    const content = db.select({
-        path: explorerContentTable.path,
-        type: explorerContentTable.type,
-        owner: explorerContentTable.owner,
-        title: explorerContentTable.title,
-        navigable: explorerContentTable.navigable,
-        private: explorerContentTable.private,
-        order: explorerContentTable.order,
-    }).from(explorerContentTable).prepare().all();
-
-    content.sort((a, b) => {
-        return a.path.split('/').length - b.path.split('/').length;
-    });
-
-    if(content.length > 0)
-    {
-        const project: Project = {
-            items: [],
-        }
-        
-        for(const item of content.filter(e => !!e))
-        {
-            addChild(project.items, item);
-        }
-
-        return project;
-    }
-    
-    setResponseStatus(e, 404);
-    return;
-});
-
-function addChild(arr: ProjectItem[], e: NavigationItem): void
-{
-    const parent = arr.find(f => e.path.startsWith(f.path));
-
-    if(parent)
-    {
-        if(!parent.children)
-            parent.children = [];
-
-        addChild(parent.children, e);
-    }
-    else
-    {
-        arr.push({ 
-            path: e.path,
-            parent: e.path.substring(0, e.path.lastIndexOf('/')),
-            name: e.path.substring(e.path.lastIndexOf('/') + 1),
-            title: e.title,
-            type: e.type,
-            navigable: e.navigable,
-            private: e.private,
-            order: e.order,
-        });
-        arr.sort((a, b) => {
-            if(a.order !== b.order)
-                return a.order - b.order;
-            return a.title.localeCompare(b.title);
-        });
-    }
-}

server/api/project.post.ts

@@ -1,106 +0,0 @@
-import { hasPermissions } from "#shared/auth.util";
-import useDatabase from '~/composables/useDatabase';
-import { explorerContentTable } from '~/db/schema';
-import { project, type ProjectItem } from '~/schemas/project';
-import { parsePath } from "#shared/general.util";
-import { eq, getTableColumns, sql } from "drizzle-orm";
-import type { ExploreContent, TreeItem } from "~/types/content";
-import type { TreeItemEditable } from "~/pages/explore/edit/index.vue";
-
-export default defineEventHandler(async (e) => {
-    const { user } = await getUserSession(e);
-
-    if(!user || !hasPermissions(user.permissions, ['admin', 'editor']))
-    {
-        throw createError({ statusCode: 401, statusText: 'Unauthorized' });
-    }
-
-    const body = await readValidatedBody(e, project.safeParse);
-
-    if(!body.success)
-    {
-        throw body.error;
-    }
-
-    const items = buildOrder(body.data) as Array<TreeItemEditable & { match?: number }>;
-
-    const db = useDatabase();
-    const { ...cols } = getTableColumns(explorerContentTable);
-    const full = db.select(cols).from(explorerContentTable).all() as Record<string, any>[];
-
-    for(let i = full.length - 1; i >= 0; i--)
-    {
-        const item = items.find(e => (e.path === '' ? [e.parent, parsePath(e.name === '' ? e.title : e.name)].filter(e => !!e).join('/') : e.path) === full[i].path);
-        if(item)
-        {
-            item.match = i;
-            full[i].include = true;
-        }
-    }
-
-    db.transaction((tx) => {
-        for(let i = 0; i < items.length; i++)
-        {
-            const item = items[i];
-            const old = full[item.match!];
-
-            const path = [item.parent, parsePath(item.name === '' ? item.title : item.name)].filter(e => !!e).join('/');
-
-            tx.insert(explorerContentTable).values({ 
-                path: item.path || path,
-                owner: user.id,
-                title: item.title,
-                type: item.type,
-                navigable: item.navigable,
-                private: item.private,
-                order: item.order,
-                content: item.content ?? old?.content ?? null,
-            }).onConflictDoUpdate({
-                set: {
-                    path: path,
-                    title: item.title,
-                    type: item.type,
-                    navigable: item.navigable,
-                    private: item.private,
-                    order: item.order,
-                    timestamp: new Date(),
-                    content: item.content ?? old?.content ?? null,
-                },
-                target: explorerContentTable.path,
-            }).run();
-
-            if(item.path !== path && !old)
-            {
-                tx.update(explorerContentTable).set({ content: sql`replace(${explorerContentTable.content}, ${sql.placeholder('old')}, ${sql.placeholder('new')})` }).prepare().run({ 'old': item.path, 'new': path });
-            }
-        }
-        for(let i = 0; i < full.length; i++)
-        {
-            if(full[i].include !== true)
-                tx.delete(explorerContentTable).where(eq(explorerContentTable.path, full[i].path)).run();
-        }
-    });
-
-    return items.map(e => ({ 
-        path: e.path,
-        owner: e.owner,
-        title: e.title,
-        type: e.type,
-        content: e.content,
-        navigable: e.navigable,
-        private: e.private,
-        order: e.order,
-        visit: e.visit,
-        timestamp: e.timestamp,
-     })) as ExploreContent[];
-});
-
-function buildOrder(items: ProjectItem[]): ProjectItem[]
-{
-    items.forEach((e, i) => {
-        e.order = i;
-        if(e.children) e.children = buildOrder(e.children);
-    });
-
-    return items.flatMap(e => [e, ...(e.children ?? [])]);
-}

server/api/search.get.ts

@@ -1,20 +0,0 @@
-import useDatabase from '~/composables/useDatabase';
-
-export default defineEventHandler(async (e) => {
-    const query = getQuery(e);
-
-    if (query.search) {
-        const db = useDatabase();
-
-        const files = db.query(`SELECT f.*, u.username, count(c.path) as comments FROM explorer_files f LEFT JOIN users u ON f.owner = u.id LEFT JOIN explorer_comments c ON c.project = f.project AND c.path = f.path WHERE title LIKE ?1 AND private = 0 AND type != "Folder" GROUP BY f.project, f.path`).all(query.search) as FileSearch[];
-        const users = db.query(`SELECT id, username FROM users WHERE username LIKE ?1`).all(query.search) as UserSearch[];
-
-        return {
-            projects,
-            files,
-            users
-        } as Search;
-    }
-
-    setResponseStatus(e, 404);
-});

server/tasks/pull.ts

@@ -1,10 +1,9 @@
 import useDatabase from "~/composables/useDatabase";
 import { extname, basename } from 'node:path';
-import type { FileType } from '~/types/content';
 import type { CanvasColor, CanvasContent } from "~/types/canvas";
-import { explorerContentTable } from "~/db/schema";
-import { convertToStorableLinks } from "../api/file.post";
-import { parsePath } from "~/shared/general.util";
+import type { FileType, ProjectContent } from "#shared/content.util";
+import { getID, ID_SIZE, parsePath } from "#shared/general.util";
+import { projectContentTable, projectFilesTable } from "~/db/schema";
 
 const typeMapping: Record<string, FileType> = {
     ".md": "markdown",
@@ -30,20 +29,21 @@ export default defineTask({
                 }
             }) as { tree: any[] } & Record<string, any>;
 
-            const files: typeof explorerContentTable.$inferInsert[] = await Promise.all(tree.tree.filter((e: any) => !e.path.startsWith(".")).map(async (e, i) => { 
+            const files: ProjectContent[] = await Promise.all(tree.tree.filter((e: any) => !e.path.startsWith(".")).map(async (e, i) => { 
                 if(e.type === 'tree')
                 {
                     const title = basename(e.path);
                     const order = /(\d+)\. ?(.+)/gsmi.exec(title);
                     return { 
-                        path: e.path, 
+                        id: getID(ID_SIZE),
+                        path: parsePath(e.path), 
                         order: i,
                         title: title,
                         type: 'folder',
                         content: null,
                         owner: 1,
                         navigable: true,
-                        private: e.path === '98. Privé',
+                        private: e.path.startsWith('98.Privé'),
                         timestamp: new Date(),
                     }
                 }
@@ -54,26 +54,28 @@ export default defineTask({
                 const content = (await $fetch(`https://git.peaceultime.com/api/v1/repos/peaceultime/system-aspect/raw/${encodeURIComponent(e.path)}`));
 
                 return { 
-                    path: extension === '.md' ? e.path.replace(extension, '') : e.path, 
+                    id: getID(ID_SIZE),
+                    path: parsePath(extension === '.md' ? e.path.replace(extension, '') : e.path), 
                     order: i,
                     title: title,
                     type: (typeMapping[extension] ?? 'file'), 
                     content: reshapeContent(content as string, typeMapping[extension] ?? 'File'),
                     owner: 1,
                     navigable: true,
-                    private: e.path === '98. Privé',
+                    private: e.path.startsWith('98.Privé'),
                     timestamp: new Date(),
                 }
             }));
 
-            files.forEach(e => {
-                const content = reshapeLinks(e.content as string | null, files) ?? null;
-                e.content = content ? Buffer.from(content, 'utf-8') : null;
-            });
+            files.forEach(e => e.content = reshapeLinks(e.content as string | null, files) ?? null);
 
             const db = useDatabase();
-            db.delete(explorerContentTable).run();
-            db.insert(explorerContentTable).values(files).run();
+            db.transaction(tx => {
+                db.delete(projectFilesTable).run();
+                db.insert(projectFilesTable).values(files.map(e => {const { content, ...rest } = e; return rest; })).run();
+                db.delete(projectContentTable).run();
+                db.insert(projectContentTable).values(files.map(e => ({ content: e.content ? Buffer.from(e.content as string) : null, id: e.id }))).run();
+            });
             
             return { result: true };
         }
@@ -85,10 +87,11 @@ export default defineTask({
         }
     },
 })
-function reshapeLinks(content: string | null, all: typeof explorerContentTable.$inferInsert[])
+
+function reshapeLinks(content: string | null, all: ProjectContent[])
 {
-    return content?.replace(/!?\[\[([^\[\]\|\#]+)?(#+[^\[\]\|\#]+)?(\|[^\[\]\|\#]+)?\]\]/g, (str, link, header, title) => {
-        return `[[${link ? all.find(e => e.path.endsWith(link))?.path ?? link : ''}${header ?? ''}${title ?? ''}]]`;
+    return content?.replace(/\[\[(.*?)?(#.*?)?(\|.*?)?\]\]/g, (str, link, header, title) => {
+        return `[[${link ? parsePath(all.find(e => e.path.endsWith(parsePath(link)))?.path ?? parsePath(link)) : ''}${header ?? ''}${title ?? ''}]]`;
     });
 }
 
@@ -97,12 +100,13 @@ function reshapeContent(content: string, type: FileType): string | null
     switch(type)
     {
         case "markdown":
+            return content;
         case "file":
             return content;
         case "canvas":
             const data = JSON.parse(content) as CanvasContent;
-            data.edges?.forEach(e => e.color = typeof e.color === 'string' ? getColor(e.color) : undefined);
-            data.nodes?.forEach(e => e.color = typeof e.color === 'string' ? getColor(e.color) : undefined);
+            data.edges?.forEach(e => { console.log(e.color); e.color = typeof e.color === 'string' ? getColor(e.color) : undefined; console.log(e.color); });
+            data.nodes?.forEach(e => { console.log(e.color); e.color = typeof e.color === 'string' ? getColor(e.color) : undefined; console.log(e.color); });
             return JSON.stringify(data);
         default:
         case 'folder': 

server/tasks/push.ts

@@ -1,12 +1,6 @@
 import useDatabase from "~/composables/useDatabase";
-import type { FileType } from '~/types/content';
-import { explorerContentTable } from "~/db/schema";
-import { eq, ne } from "drizzle-orm";
-
-const typeMapping: Record<string, FileType> = {
-    ".md": "markdown",
-    ".canvas": "canvas"
-};
+import { projectFilesTable, projectContentTable } from "~/db/schema";
+import { eq } from "drizzle-orm";
 
 export default defineTask({
     meta: {
@@ -15,19 +9,10 @@ export default defineTask({
     },
     async run(event) {
         try {
-            const tree = await $fetch('https://git.peaceultime.com/api/v1/repos/peaceultime/system-aspect/git/trees/master', {
-                method: 'get',
-                headers: {
-                    accept: 'application/json',
-                },
-                params: {
-                    recursive: true,
-                    per_page: 1000,
-                }
-            }) as any;
-
             const db = useDatabase();
-            const files = db.select().from(explorerContentTable).where(ne(explorerContentTable.type, 'folder')).all();
+            const files = db.select().from(projectFilesTable).leftJoin(projectContentTable, eq(projectContentTable.id, projectFilesTable.id)).all();
+
+            
             
             return { result: true };
         }

shared/canvas.util.ts

@@ -1,9 +1,17 @@
-import type { CanvasNode } from "~/types/canvas";
-import { clamp } from "#shared/general.util";
+import type { CanvasContent, CanvasEdge, CanvasNode } from "~/types/canvas";
+import { clamp, lerp } from "#shared/general.util";
+import { dom, icon, svg, text } from "./dom.util";
+import render from "./markdown.util";
+import { popper } from "#shared/floating.util";
+import { Content } from "./content.util";
+import { History } from "./history.util";
+import { fakeA, link } from "./proses";
+import { SnapFinder, SpatialGrid } from "./physics.util";
+import type { CanvasPreferences } from "~/types/general";
 
 export type Direction = 'bottom' | 'top' | 'left' | 'right';
 export type Position = { x: number, y: number };
-export type Box = Position & { w: number, h: number };
+export type Box = Position & { width: number, height: number };
 export type Path = {
     path: string;
     from: Position;
@@ -101,3 +109,896 @@ export function gridSnap(value: number, grid: number): number
 {
     return Math.round(value / grid) * grid;
 }
+
+const cancelEvent = (e: Event) => e.preventDefault();
+function center(touches: TouchList): Position
+{
+    const pos = { x: 0, y: 0 };
+
+    for(const touch of touches)
+    {
+        pos.x += touch.clientX;
+        pos.y += touch.clientY;
+    }
+
+    pos.x /= touches.length;
+    pos.y /= touches.length;
+    return pos;
+}
+function distance(touches: TouchList): number
+{
+    const [A, B] = touches;
+    return Math.hypot(B.clientX - A.clientX, B.clientY - A.clientY);
+}
+
+export class Node extends EventTarget
+{
+    properties: CanvasNode;
+
+    nodeDom!: HTMLDivElement;
+
+    constructor(properties: CanvasNode)
+    {
+        super();
+
+        this.properties = properties;
+
+        this.getDOM()
+    }
+
+    protected getDOM()
+    {
+        const style = this.style;
+
+        this.nodeDom = dom('div', { class: ['absolute', {'-z-10': this.properties.type === 'group', 'z-10': this.properties.type !== 'group'}], style: { transform: `translate(${this.properties.x}px, ${this.properties.y}px)`, width: `${this.properties.width}px`, height: `${this.properties.height}px`, '--canvas-color': this.properties.color?.hex } }, [
+            dom('div', { class: ['outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full hover:outline-4', style.border] }, [
+                dom('div', { class: ['w-full h-full py-2 px-4 flex !bg-opacity-[0.07] overflow-auto', style.bg] }, [this.properties.text ? dom('div', { class: 'flex items-center' }, [render(this.properties.text)]) : undefined])
+            ])
+        ]);
+
+        if(this.properties.type === 'group')
+        {
+            if(this.properties.label !== undefined)
+            {
+                this.nodeDom.appendChild(dom('div', { 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', style.border], style: 'max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))', text: this.properties.label }));
+            }
+        }
+    }
+
+    get style()
+    {
+        return this.properties.color ? this.properties.color?.class ? 
+            { bg: `bg-light-${this.properties.color?.class} dark:bg-dark-${this.properties.color?.class}`, border: `border-light-${this.properties.color?.class} dark:border-dark-${this.properties.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` }
+    }
+}
+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;
+    constructor(properties: CanvasNode)
+    {
+        super(properties);
+    }
+    protected override getDOM()
+    {
+        const style = this.style;
+
+        this.nodeDom = dom('div', { class: ['absolute group', {'-z-10': this.properties.type === 'group', 'z-10': this.properties.type !== 'group'}], style: { transform: `translate(${this.properties.x}px, ${this.properties.y}px)`, width: `${this.properties.width}px`, height: `${this.properties.height}px`, '--canvas-color': this.properties.color?.hex } }, [
+            dom('div', { class: ['outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full group-hover:outline-4', style.border, style.outline] }, [
+                dom('div', { class: ['w-full h-full py-2 px-4 flex !bg-opacity-[0.07] overflow-auto', style.bg], listeners: this.properties.type === 'text' ? { mouseenter: e => this.dispatchEvent(new CustomEvent('focus', { detail: this })), click: e => this.dispatchEvent(new CustomEvent('select', { detail: this })), dblclick: e => this.dispatchEvent(new CustomEvent('edit', { detail: this })) } : undefined }, [this.properties.text ? dom('div', { class: 'flex items-center' }, [render(this.properties.text, undefined, { tags: { a: fakeA } })]) : undefined])
+            ])
+        ]);
+
+        if(this.properties.type === 'group')
+        {
+            if(this.properties.label !== undefined)
+            {
+                this.nodeDom.appendChild(dom('div', { 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', style.border], style: 'max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))', text: this.properties.label, listeners: { mouseenter: e => this.dispatchEvent(new CustomEvent('focus', { detail: this })), mouseleave: e => this.dispatchEvent(new CustomEvent('unfocus', { detail: this })), click: e => this.dispatchEvent(new CustomEvent('select', { detail: this })), dblclick: e => this.dispatchEvent(new CustomEvent('edit', { detail: this })) } }));
+            }
+        }
+    }
+    update()
+    {
+        if(!this.dirty)
+            return;
+
+        Object.assign(this.nodeDom.style, {
+            transform: `translate(${this.properties.x}px, ${this.properties.y}px)`,
+            width: `${this.properties.width}px`,
+            height: `${this.properties.height}px`,
+        });
+        this.edges.forEach(e => e.update());
+        this.dirty = false;
+    }
+
+    override get style()
+    {
+        return this.properties.color ? this.properties.color?.class ? 
+            { bg: `bg-light-${this.properties.color?.class} dark:bg-dark-${this.properties.color?.class}`, border: `border-light-${this.properties.color?.class} dark:border-dark-${this.properties.color?.class}`, outline: `outline-light-${this.properties.color?.class} dark:outline-dark-${this.properties.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` }
+    }
+
+    get x()
+    {
+        return this.properties.x;
+    }
+    set x(value: number)
+    {
+        this.properties.x = value;
+        this.dirty = true;
+    }
+    get y()
+    {
+        return this.properties.y;
+    }
+    set y(value: number)
+    {
+        this.properties.y = value;
+        this.dirty = true;
+    }
+    get width()
+    {
+        return this.properties.width;
+    }
+    set width(value: number)
+    {
+        this.properties.width = value;
+        this.dirty = true;
+    }
+    get height()
+    {
+        return this.properties.height;
+    }
+    set height(value: number)
+    {
+        this.properties.height = value;
+        this.dirty = true;
+    }
+}
+
+export class Edge extends EventTarget
+{
+    properties: CanvasEdge;
+
+    edgeDom!: HTMLDivElement;
+    protected from: Node;
+    protected to: Node;
+    protected path: Path;
+    protected labelPos: string;
+
+    constructor(properties: CanvasEdge, from: Node, to: Node)
+    {
+        super();
+        this.properties = properties;
+
+        this.from = from;
+        this.to = to;
+        this.path = getPath(this.from.properties, properties.fromSide, this.to.properties, properties.toSide)!;
+        this.labelPos = labelCenter(this.from.properties, properties.fromSide, this.to.properties, properties.toSide);
+
+        this.getDOM();
+    }
+
+    protected getDOM()
+    {
+        const style = this.style;
+        this.edgeDom = dom('div', { class: 'absolute overflow-visible' }, [
+            this.properties.label ? dom('div', { style: { transform: `${this.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', text: this.properties.label }) : undefined,
+            svg('svg', { class: 'absolute top-0 overflow-visible h-px w-px' }, [
+                svg('g', { style: {'--canvas-color': this.properties.color?.hex}, class: 'z-0'  }, [
+                    svg('g', { style: `transform: translate(${this.path!.to.x}px, ${this.path!.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[this.path!.side]}deg);` }, [
+                        svg('polygon', { class: style.fill, attributes: { points: '0,0 6.5,10.4 -6.5,10.4' } }),
+                    ]),
+                    svg('path', { style: `stroke-width: calc(3px * var(--zoom-multiplier)); stroke-linecap: butt;`, class: [style.stroke, 'fill-none stroke-[4px]'], attributes: { d: this.path!.path } }),
+                ]),
+            ]),
+        ]);
+    }
+
+    get style()
+    {
+        return this.properties.color ? this.properties.color?.class ? 
+            { fill: `fill-light-${this.properties.color?.class} dark:fill-dark-${this.properties.color?.class}`, stroke: `stroke-light-${this.properties.color?.class} dark:stroke-dark-${this.properties.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` }
+    }
+}
+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;
+
+    private pathDom!: SVGPathElement;
+    private inputDom!: HTMLDivElement;
+    constructor(properties: CanvasEdge, from: NodeEditable, to: NodeEditable)
+    {
+        super(properties, from, to);
+        from.edges.add(this);
+        to.edges.add(this);
+    }
+    protected override getDOM()
+    {
+        const style = this.style;
+        this.pathDom = svg('path', { style: { 'stroke-width': `calc(3px * var(--zoom-multiplier))`, 'stroke-linecap': 'butt' }, class: ['transition-[stroke-width] fill-none stroke-[4px]', style.stroke], attributes: { d: this.path.path }, listeners: { mouseenter: e => this.dispatchEvent(new CustomEvent('focus', { detail: this })), click: e => this.dispatchEvent(new CustomEvent('select', { detail: this })), dblclick: e => this.dispatchEvent(new CustomEvent('edit', { detail: this })) } });
+        this.inputDom = dom('div', { 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', { 'hidden': this.properties.label === undefined }], style: { transform: this.labelPos }, text: this.properties.label });
+        this.edgeDom = dom('div', { class: 'absolute overflow-visible group' }, [
+            this.inputDom,
+            svg('svg', { class: 'absolute top-0 overflow-visible h-px w-px' }, [
+                svg('g', { style: { '--canvas-color': this.properties.color?.hex } }, [
+                    svg('g', { style: { transform: `translate(${this.path.to.x}px, ${this.path.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[this.path.side]}deg)` } }, [
+                        svg('polygon', { class: style.fill, attributes: { 'points': '0,0 6.5,10.4 -6.5,10.4' } }),
+                    ]),
+                    this.pathDom,
+                    svg('path', { style: { 'stroke-width': `calc(22px * var(--zoom-multiplier))` }, class: ['fill-none transition-opacity z-30 opacity-0 hover:opacity-25', style.stroke], attributes: { d: this.path.path } }),
+                ]),
+            ]),
+        ]);
+    }
+    update()
+    {
+        this.path = getPath(this.from.properties, this.properties.fromSide, this.to.properties, this.properties.toSide)!;
+        this.pathDom.setAttribute('d', this.path.path);
+    }
+}
+
+export class Canvas
+{
+    static minZoom: number = 0.08;
+    static maxZoom: number = 3;
+
+    protected content: Required<CanvasContent>;
+    protected _zoom: number = 0.5;
+    protected _x: number = 0;
+    protected _y: number = 0;
+
+    protected containZoom: number = this._zoom;
+    protected centerX: number = this._x;
+    protected centerY: number = this._y;
+
+    protected visualZoom: number = this._zoom;
+    protected visualX: number = this._x;
+    protected visualY: number = this._y;
+
+    protected tweener: Tweener = new Tweener();
+    private debouncedTimeout: Timer = setTimeout(() => {}, 0);
+
+    protected transform!: HTMLDivElement;
+    container!: HTMLDivElement;
+
+    protected firstX = 0;
+    protected firstY = 0;
+    protected lastX = 0;
+    protected lastY = 0;
+    protected lastDistance = 0;
+    
+    protected nodes: Node[] = [];
+    protected edges: Edge[] = [];
+
+    constructor(content?: CanvasContent)
+    {
+        if(!content)
+            content = { nodes: [], edges: [], groups: [] };
+
+        if(!content.nodes)
+            content.nodes = [];
+
+        if(!content.edges)
+            content.edges = [];
+
+        if(!content.groups)
+            content.groups = [];
+
+        this.content = content as Required<CanvasContent>;
+
+        this.createDOM();
+    }
+
+    protected createDOM()
+    {
+        this.nodes = this.content.nodes.map(e => new Node(e));
+        this.edges = this.content.edges.map(e => new Edge(e, this.nodes.find(f => e.fromNode === f.properties.id)!, this.nodes.find(f => e.toNode === f.properties.id)!));
+        //const { loggedIn, user } = useUserSession();
+        this.transform = dom('div', { class: 'origin-center h-full' }, [
+            dom('div', { class: 'absolute top-0 left-0 w-full h-full pointer-events-none *:pointer-events-auto *:select-none touch-none' }, [
+                dom('div', {}, this.nodes.map(e => e.nodeDom)), dom('div', {}, this.edges.map(e => e.edgeDom)),
+            ])
+        ]);
+
+        this.container = dom('div', { class: 'absolute top-0 left-0 overflow-hidden w-full h-full touch-none' }, [
+            dom('div', { class: 'flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4' }, [
+                dom('div', { class: 'border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10' }, [
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.zoomTo(this._x, this._y, clamp(this._zoom * 1.1, this.containZoom, Canvas.maxZoom)) } }, [icon('radix-icons:plus')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Zoom avant')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: (e: MouseEvent) => { this.reset(); } } }, [icon('radix-icons:corners')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Tout contenir')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.zoomTo(this._x, this._y, clamp(this._zoom / 1.1, this.containZoom, Canvas.maxZoom)) } }, [icon('radix-icons:minus')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Zoom arrière')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                ]), 
+                //link({}, { name: 'explore-edit' }),
+            ]), this.transform,
+        ]);
+    }
+
+    protected computeLimits()
+    {
+        const box = this.container.getBoundingClientRect();
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+        this.content.nodes.forEach(e => {
+            minX = Math.min(minX, e.x);
+            minY = Math.min(minY, e.y);
+            maxX = Math.max(maxX, e.x + e.width);
+            maxY = Math.max(maxY, e.y + e.height);
+        });
+
+        this.containZoom = clamp(Math.pow(1 / Math.max((maxX - minX) / box.width, (maxY - minY) / box.height), 1.05), Canvas.minZoom, 1);
+        this.centerX = -(minX + (maxX - minX) / 2) + box.width / 2;
+        this.centerY = -(minY + (maxY - minY) / 2) + box.height / 2;
+    }
+
+    mount()
+    {
+        const dragMove = (e: MouseEvent) => {
+            this.dragMove(e);
+        };
+        const dragEnd = (e: MouseEvent) => {
+            window.removeEventListener('mouseup', dragEnd);
+            window.removeEventListener('mousemove', dragMove);
+
+            this.dragEnd(e);
+        };
+        this.container.addEventListener('mouseenter', () => { 
+            window.addEventListener('wheel', cancelEvent, { passive: false });
+            document.addEventListener('gesturestart', cancelEvent);
+            document.addEventListener('gesturechange', cancelEvent);
+    
+            this.container.addEventListener('mouseleave', () => {
+                window.removeEventListener('wheel', cancelEvent);
+                document.removeEventListener('gesturestart', cancelEvent);
+                document.removeEventListener('gesturechange', cancelEvent);
+            });
+        });
+        this.container.addEventListener('mousedown', (e) => {
+            this.lastX = e.clientX;
+            this.lastY = e.clientY;
+
+            const pos = this.getPosFromCursor(e.clientX, e.clientY);
+            this.firstX = pos.x;
+            this.firstY = pos.y;
+    
+            window.addEventListener('mouseup', dragEnd, { passive: true });
+            window.addEventListener('mousemove', dragMove, { passive: true });
+
+            this.dragStart(e);
+        }, { passive: true });
+        this.container.addEventListener('wheel', (e) => {
+            if((this._zoom >= Canvas.maxZoom && e.deltaY < 0) || (this._zoom <= this.containZoom && e.deltaY > 0))
+                return;
+
+            const box = this.container.getBoundingClientRect(), diff = Math.exp(e.deltaY * -0.001);
+            const centerX = (box.x + box.width / 2), centerY = (box.y + box.height / 2);
+            const mousex = centerX - e.clientX, mousey = centerY - e.clientY;
+
+            this.zoomTo(this._x - (mousex / (diff * this._zoom) - mousex / this._zoom), this._y - (mousey / (diff * this._zoom) - mousey / this._zoom), clamp(this._zoom * diff, this.containZoom, Canvas.maxZoom));
+        }, { passive: true });
+        this.container.addEventListener('touchstart', (e) => {
+            ({ x: this.lastX, y: this.lastY } = center(e.touches));
+    
+            if(e.touches.length > 1)
+            {
+                this.lastDistance = distance(e.touches);
+            }
+    
+            this.container.addEventListener('touchend', touchend, { passive: true });
+            this.container.addEventListener('touchcancel', touchcancel, { passive: true });
+            this.container.addEventListener('touchmove', touchmove, { passive: true });
+        }, { passive: true });
+        const touchend = (e: TouchEvent) => {
+            if(e.touches.length > 1)
+            {
+                ({ x: this.lastX, y: this.lastY } = center(e.touches));
+            }
+    
+            this.container.removeEventListener('touchend', touchend);
+            this.container.removeEventListener('touchcancel', touchcancel);
+            this.container.removeEventListener('touchmove', touchmove);
+        };
+        const touchcancel = (e: TouchEvent) => {
+            if(e.touches.length > 1)
+            {
+                ({ x: this.lastX, y: this.lastY } = center(e.touches));
+            }
+    
+            this.container.removeEventListener('touchend', touchend);
+            this.container.removeEventListener('touchcancel', touchcancel);
+            this.container.removeEventListener('touchmove', touchmove);
+        };
+        const touchmove = (e: TouchEvent) => {
+            const pos = center(e.touches);
+            this._x = this.visualX = this._x - (this.lastX - pos.x) / this._zoom;
+            this._y = this.visualY = this._y - (this.lastY - pos.y) / this._zoom;
+            this.lastX = pos.x;
+            this.lastY = pos.y;
+    
+            if(e.touches.length === 2)
+            {
+                const dist = distance(e.touches);
+                const diff = dist / this.lastDistance;
+                
+                this._zoom = clamp(this._zoom * diff, this.containZoom, Canvas.maxZoom);
+            }
+    
+            this.updateTransform();
+        };
+
+        this.computeLimits();
+        this.reset();
+    }
+
+    protected updateTransform()
+    {
+        this.transform.style.transform = `scale3d(${this.visualZoom}, ${this.visualZoom}, 1) translate3d(${this.visualX}px, ${this.visualY}px, 0)`;
+
+        clearTimeout(this.debouncedTimeout);
+        this.debouncedTimeout = setTimeout(this.updateScale.bind(this), 150);
+    }
+
+    private updateScale()
+    {
+        this.transform.style.setProperty('--tw-scale', this.visualZoom.toString());
+        this.container.style.setProperty('--zoom-multiplier', (1 / Math.pow(this.visualZoom, 0.7)).toFixed(3));
+    }
+
+    protected zoomTo(x: number, y: number, zoom: number)
+    {
+        const oldX = this._x, oldY = this._y, oldZoom = this._zoom;
+        this._x = x;
+        this._y = y;
+        this._zoom = zoom;
+
+        this.tweener.update((e) => {
+            this.visualX = lerp(e, oldX, x);
+            this.visualY = lerp(e, oldY, y);
+            this.visualZoom = lerp(e, oldZoom, zoom);
+
+            this.updateTransform();
+        }, 50);
+    }
+
+    protected reset()
+    {
+        this.zoomTo(this.centerX, this.centerY, this.containZoom);
+    }
+
+    protected dragStart(e: MouseEvent) {}
+    protected dragMove(e: MouseEvent)
+    {
+        this._x = this.visualX = this._x - (this.lastX - e.clientX) / this._zoom;
+        this._y = this.visualY = this._y - (this.lastY - e.clientY) / this._zoom;
+
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+
+        this.updateTransform();
+    }
+    protected dragEnd(e: MouseEvent) {}
+
+    protected getPosFromCursor(x: number, y: number): Position
+    {
+        const box = this.container.getBoundingClientRect();
+        const centerX = box.x + box.width / 2,  centerY = box.y + box.height / 2;
+        return {x: (x - centerX) / this._zoom - this._x + box.width / 2, y: (y - centerY) / this._zoom - this._y + box.height / 2 };
+    }
+
+    get zoom()
+    {
+        return this._zoom;
+    }
+    get x()
+    {
+        return this._x;
+    }
+    get y()
+    {
+        return this._y;
+    }
+
+    get viewport()
+    {
+        const box = this.container.getBoundingClientRect();
+        const width = box.width / this._zoom, height = box.height / this._zoom;
+        const movementX = box.width - width, movementY = box.height - height;
+        return { x: -this._x + movementX / 2, y: -this._y + movementY / 2, width, height };
+    }
+}
+export class CanvasEditor extends Canvas
+{
+    private static SPACING = 32;
+    private history: History;
+    private focused: NodeEditable | EdgeEditable | undefined;
+    private selection: Set<NodeEditable> = new Set();
+
+    private dragging: boolean = false;
+    private dragger: HTMLElement = dom('div', { class: 'border border-accent-blue absolute shadow-accent-blue pointer-events-none', style: { 'box-shadow': '0 0 2px var(--tw-shadow-color)' } });
+    
+    private pattern: SVGElement = svg('svg', { class: 'absolute top-0 left-0 w-full h-full pointer-events-none' }, [
+        svg('pattern', { attributes: { id: 'canvasPattern', patternUnits: 'userSpaceOnUse' } }, [ svg('circle', { class: 'fill-light-35 dark:fill-dark-35', attributes: { cx: '0.75', cy: '0.75', r: '0.75' } }) ]),
+        svg('rect', { attributes: { x: '0', y: '0', width: '100%', height: '100%', fill: 'url(#canvasPattern)' } })
+    ]);
+    private nodeHelper: HTMLElement = dom('div', { class: 'cursor-move absolute z-40', listeners: { mousedown: e =>  this.moveSelection(e) }, style: { width: '0px', height: '0px' } }, [
+       dom('span', { class: 'cursor-n-resize absolute -top-3 -right-3 -left-3 h-6 group', listeners: { mousedown: e => this.resizeSelection(e, 0, 1, 0, -1) } }, [ dom('span', { class: 'hidden group-hover:block absolute rounded-full border-2 border-light-70 dark:border-dark-70 w-4 h-4 top-1 left-1/2 -translate-x-2', listeners: { mousedown: e => this.dragNewEdge(e, 'top') } }) ]),
+       dom('span', { class: 'cursor-s-resize absolute -bottom-3 -right-3 -left-3 h-6 group', listeners: { mousedown: e => this.resizeSelection(e, 0, 0, 0, 1) } }, [ dom('span', { class: 'hidden group-hover:block absolute rounded-full border-2 border-light-70 dark:border-dark-70 w-4 h-4 bottom-1 left-1/2 -translate-x-2', listeners: { mousedown: e => this.dragNewEdge(e, 'bottom') } }) ]),
+       dom('span', { class: 'cursor-e-resize absolute -top-3 -bottom-3 -right-3 w-6 group', listeners: { mousedown: e => this.resizeSelection(e, 0, 0, 1, 0) } }, [ dom('span', { class: 'hidden group-hover:block absolute rounded-full border-2 border-light-70 dark:border-dark-70 w-4 h-4 right-1 top-1/2 -translate-y-2', listeners: { mousedown: e => this.dragNewEdge(e, 'right') } }) ]),
+       dom('span', { class: 'cursor-w-resize absolute -top-3 -bottom-3 -left-3 w-6 group', listeners: { mousedown: e => this.resizeSelection(e, 1, 0, -1, 0) } }, [ dom('span', { class: 'hidden group-hover:block absolute rounded-full border-2 border-light-70 dark:border-dark-70 w-4 h-4 left-1 top-1/2 -translate-y-2', listeners: { mousedown: e => this.dragNewEdge(e, 'left') } }) ]),
+       dom('span', { class: 'cursor-nw-resize absolute -top-4 -left-4  w-8 h-8', listeners: { mousedown: e => this.resizeSelection(e, 1, 1, -1, -1) } }),
+       dom('span', { class: 'cursor-ne-resize absolute -top-4 -right-4 w-8 h-8', listeners: { mousedown: e => this.resizeSelection(e, 0, 1, 1, -1) } }),
+       dom('span', { class: 'cursor-se-resize absolute -bottom-4 -right-4 w-8 h-8', listeners: { mousedown: e => this.resizeSelection(e, 0,  0, 1, 1) } }),
+       dom('span', { class: 'cursor-sw-resize absolute -bottom-4 -left-4  w-8 h-8', listeners: { mousedown: e => this.resizeSelection(e, 1, 0, -1, 1) } }),
+    ]);
+    private edgeHelper: HTMLElement = dom('div', { class: 'absolute', listeners: {  } });
+    private boxHelper: HTMLElement = dom('div', { class: '-m-2 border border-accent-purple absolute z-10 p-2 box-content', listeners: { mouseenter: () => this.focusSelection() } });
+
+    protected override nodes: NodeEditable[] = [];
+    protected override edges: EdgeEditable[] = [];
+
+    private preferences: Ref<CanvasPreferences>; 
+    private grid: SpatialGrid<NodeEditable> = new SpatialGrid<NodeEditable>(128);
+
+    constructor(content?: CanvasContent)
+    {
+        super(content);
+
+        this.createDOM();
+
+        this.history = new History();
+        this.history.register('canvas', {
+            move: {
+                undo: action => {
+                    
+                },
+                redo: action => {
+                    
+                },
+            }
+        });
+
+        this.preferences = useCookie<CanvasPreferences>('canvasPreference', { default: () => ({ gridSnap: true, neighborSnap: true, spacing: 32 }) });
+    }
+    protected override createDOM()
+    {
+        if(!this.grid)
+            return;
+
+        this.nodes = this.content.nodes.map(e => {
+            const node = new NodeEditable(e);
+            //@ts-ignore
+            node.properties.type === "text" && node.addEventListener('focus', this.focusNode.bind(this));
+            //@ts-ignore
+            node.addEventListener('select', this.selectNode.bind(this));
+            //@ts-ignore
+            node.addEventListener('edit', this.editNode.bind(this));
+            node.properties.type === "text" && this.grid.insert(node);
+            return node;
+        });
+        this.edges = this.content.edges.map(e => {
+            const edge = new EdgeEditable(e, this.nodes.find(f => e.fromNode === f.properties.id)!, this.nodes.find(f => e.toNode === f.properties.id)!);
+            //@ts-ignore
+            edge.addEventListener('focus', this.focusEdge.bind(this));
+            //@ts-ignore
+            edge.addEventListener('select', this.selectEdge.bind(this));
+            //@ts-ignore
+            edge.addEventListener('edit', this.editEdge.bind(this));
+            return edge;
+        });
+
+        this.transform = dom('div', { class: 'origin-center h-full' }, [
+            dom('div', { class: 'absolute top-0 left-0 w-full h-full pointer-events-none *:pointer-events-auto *:select-none touch-none' }, [
+                dom('div', {}, [...this.nodes.map(e => e.nodeDom), this.nodeHelper]), dom('div', {}, [...this.edges.map(e => e.edgeDom)]),
+            ]), this.edgeHelper,
+        ]);
+
+        this.container = dom('div', { class: 'absolute top-0 left-0 overflow-hidden w-full h-full touch-none', listeners: { mousedown: () => { this.selection.clear(); this.updateSelection() } } }, [
+            dom('div', { class: 'flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4' }, [
+                dom('div', { class: 'border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10' }, [
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.zoomTo(this._x, this._y, clamp(this._zoom * 1.1, this.containZoom, Canvas.maxZoom)) } }, [icon('radix-icons:plus')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Zoom avant')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.reset() } }, [icon('radix-icons:corners')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Tout contenir')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.zoomTo(this._x, this._y, clamp(this._zoom / 1.1, this.containZoom, Canvas.maxZoom)) } }, [icon('radix-icons:minus')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Zoom arrière')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                ]),
+                dom('div', { class: 'border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10' }, [
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.history.undo() } }, [icon('ph:arrow-bend-up-left')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Annuler (Ctrl+Z)')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => this.history.redo() } }, [icon('ph:arrow-bend-up-right')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Rétablir (Ctrl+Y)')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                ]),
+                dom('div', { class: 'border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10' }, [
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => {} } }, [icon('radix-icons:gear')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Préférences')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                    popper(dom('span', { class: 'w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer', listeners: { click: () => {} } }, [icon('radix-icons:question-mark-circled')]), {
+                        delay: 120, arrow: true, placement: 'right', offset: 8, content: [text('Aide')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50'
+                    }),
+                ]),
+            ]), this.pattern, this.transform
+        ]);
+    }
+
+    private focusNode(e: CustomEvent<NodeEditable>)
+    {
+        if(this.dragging)
+            return;
+
+        e.stopImmediatePropagation();
+
+        this.focused = e.detail;
+        Object.assign(this.nodeHelper.style, {
+            transform: `translate(${e.detail.x}px, ${e.detail.y}px)`,
+            width: `${e.detail.width}px`,
+            height: `${e.detail.height}px`,
+        });
+    }
+    private selectNode(e: CustomEvent<NodeEditable>)
+    {
+
+    }
+    private editNode(e: CustomEvent<NodeEditable>)
+    {
+
+    }
+    private updateSelection()
+    {
+        if(this.selection.size > 0)
+        {
+            const selectionBox = getBox(this.selection);
+            Object.assign(this.boxHelper.style, {
+                left: `${selectionBox.x}px`,
+                top: `${selectionBox.y}px`,
+                width: `${selectionBox.width}px`,
+                height: `${selectionBox.height}px`,
+            });
+
+            if(this.boxHelper.parentElement === null) this.transform.appendChild(this.boxHelper);
+        }
+        else
+            this.boxHelper.remove();
+    }
+    private focusSelection()
+    {
+        if(this.dragging)
+            return;
+        
+        const box = this.boxHelper.getBoundingClientRect();
+        Object.assign(this.nodeHelper.style, {
+            top: `${box.top}px`,
+            left: `${box.left}px`,
+            width: `${box.width}px`,
+            height: `${box.height}px`,
+        });
+    }
+    private moveSelection(e: MouseEvent)
+    {
+        if(!(e.buttons & 1))
+            return;
+
+        e.stopImmediatePropagation();
+
+        if(this.selection.size === 0 && this.focused !== undefined)
+        {
+            this.selection.add(this.focused as NodeEditable);
+            this.updateSelection();
+        }
+
+        const end = () => {
+            if(moveX !== 0 && moveY !== 0)
+                this.history.add('canvas', 'move', [...this.selection.values()].map(e => ({ element: e, from: { x: startX, y: startY }, to: { x: startX + moveX, y: startY + moveY } })));
+
+            window.removeEventListener('mousemove', move);
+            window.removeEventListener('mouseup', end);
+        };
+        const move = (e: MouseEvent) => {
+            const movementX = e.movementX / this._zoom, movementY = e.movementY / this._zoom;
+
+            moveX += movementX;
+            moveY += movementY;
+
+            this.selection.forEach(_e => {
+                _e.x += movementX;
+                _e.y += movementY;
+
+                _e.update();
+            });
+
+            let box = this.boxHelper.getBoundingClientRect();
+            Object.assign(this.boxHelper.style, {
+                left: `${box.x + movementX}px`,
+                top: `${box.y + movementY}px`,
+            })
+
+            box = this.nodeHelper.getBoundingClientRect();
+            Object.assign(this.nodeHelper.style, {
+                left: `${box.x + movementX}px`,
+                top: `${box.y + movementY}px`,
+            })
+        };
+
+        const startX = e.clientX, startY = e.clientY;
+        let moveX = 0, moveY = 0;
+        window.addEventListener('mousemove', move);
+        window.addEventListener('mouseup', end);
+    }
+    private resizeSelection(e: MouseEvent, x: number, y: number, w: number, h: number)
+    {
+        if(!(e.buttons & 1))
+            return;
+
+        e.stopImmediatePropagation();
+
+
+    }
+    private focusEdge(e: CustomEvent<EdgeEditable>)
+    {
+        this.focused = e.detail;
+    }
+    private selectEdge(e: CustomEvent<EdgeEditable>)
+    {
+
+    }
+    private editEdge(e: CustomEvent<EdgeEditable>)
+    {
+
+    }
+    private dragNewEdge(e: MouseEvent, direction: Direction)
+    {
+        e.stopImmediatePropagation();
+    }
+
+    override updateTransform()
+    {
+        super.updateTransform();
+
+        this.pattern.parentElement?.classList.toggle('hidden', !this.preferences.value.gridSnap);
+        if(this.preferences.value.gridSnap)
+        {
+            this.pattern.setAttribute("x", (this.viewport.width / 2 + this._x % CanvasEditor.SPACING * this._zoom).toFixed(3));
+            this.pattern.setAttribute("y", (this.viewport.height / 2 + this._y % CanvasEditor.SPACING * this._zoom).toFixed(3));
+            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));
+        }
+    }
+    override mount()
+    {
+        super.mount();
+
+        this.container.addEventListener('contextmenu', cancelEvent);
+    }
+    protected override dragStart(e: MouseEvent)
+    {
+        super.dragStart(e);
+
+        this.dragging = !!(e.buttons & 1);
+
+        if(this.dragging)
+        {
+            this.transform.appendChild(this.dragger);
+
+            const pos = this.getPosFromCursor(e.clientX, e.clientY);
+            Object.assign(this.dragger.style, {
+                left: `${pos.x}px`,
+                top: `${pos.y}px`,
+                width: `0px`,
+                height: `0px`,
+            });
+        }
+    }
+    protected override dragMove(e: MouseEvent)
+    {
+        if(this.dragging)
+        {
+            const pos = this.getPosFromCursor(e.clientX, e.clientY);
+            const minX = Math.min(this.firstX, pos.x), minY = Math.min(this.firstY, pos.y), maxX = Math.max(this.firstX, pos.x), maxY = Math.max(this.firstY, pos.y);
+
+            Object.assign(this.dragger.style, {
+                left: `${minX}px`,
+                top: `${minY}px`,
+                width: `${maxX - minX}px`,
+                height: `${maxY - minY}px`,
+            });
+
+            this.selection = new Set(this.grid.query(minX, minY, maxX, maxY));
+            this.updateSelection();
+        }
+        else if(!this.dragging)
+        {
+            super.dragMove(e);
+        }
+    }
+    protected override dragEnd(e: MouseEvent)
+    {
+        this.dragging = false;
+        this.dragger.remove();
+    }
+}
+
+function getBox<T extends Box>(selection: Set<T>): Box
+{
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+    selection.forEach(e => {
+        minX = Math.min(minX, e.x);
+        minY = Math.min(minY, e.y);
+        maxX = Math.max(maxX, e.x + e.width);
+        maxY = Math.max(maxY, e.y + e.height);
+    });
+
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+class Tweener
+{
+    static linear = (progress: number) => progress;
+
+    private progress: number;
+    private duration: number;
+    private last: number;
+
+    private animationFrame: number = 0;
+
+    private animation: (progress: number) => number;
+    private tick?: (progress: number) => void;
+
+    constructor(animation: (progress: number) => number = Tweener.linear)
+    {
+        this.progress = 0, this.duration = 0, this.last = 0;
+        this.animation = animation;
+    }
+    private loop(t: DOMHighResTimeStamp)
+    {
+        const elapsed = t - this.last;
+        this.progress = clamp(this.progress + elapsed, 0, this.duration);
+        this.last = t;
+
+        const step = this.animation(clamp(this.progress / this.duration, 0, 1));
+        this.tick!(step);
+
+        if(this.progress < this.duration)
+            this.animationFrame = requestAnimationFrame(this.loop.bind(this));
+    }
+    update(tick: (progress: number) => void, duration: number)
+    {
+        this.duration = duration + this.duration - this.progress;
+        this.progress = 0;
+        this.last = performance.now();
+        this.tick = tick;
+
+        cancelAnimationFrame(this.animationFrame);
+        this.animationFrame = requestAnimationFrame(this.loop.bind(this));
+    }
+    stop()
+    {
+        cancelAnimationFrame(this.animationFrame);
+
+        this.duration = 0;
+        this.progress = 0;
+    }
+}

shared/character.ts

@@ -1,273 +0,0 @@
-import type { Ability, Character, CharacterConfig, CompiledCharacter, DoubleIndex, Feature, FeatureItem, Level, MainStat, SpellElement, SpellType, TrainingLevel } from "~/types/character";
-import { z, type ZodRawShape } from "zod/v4";
-import characterConfig from './character-config.json';
-
-const config = characterConfig as CharacterConfig;
-
-export const MAIN_STATS = ["strength","dexterity","constitution","intelligence","curiosity","charisma","psyche"] as const;
-export const ABILITIES = ["athletics","acrobatics","intimidation","sleightofhand","stealth","survival","investigation","history","religion","arcana","understanding","perception","performance","medecine","persuasion","animalhandling","deception"] as const;
-export const LEVELS = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] as const;
-export const TRAINING_LEVELS = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] as const;
-export const SPELL_TYPES = ["precision","knowledge","instinct","arts"] as const;
-export const CATEGORIES = ["action","reaction","freeaction","misc"] as const;
-export const SPELL_ELEMENTS = ["fire","ice","thunder","earth","arcana","air","nature","light","psyche"] as const;
-
-export const defaultCharacter: Character = {
-    id: -1,
-
-    name: "",
-    people: undefined,
-    level: 1,
-    health: 0,
-    mana: 0,
-
-    training: MAIN_STATS.reduce((p, v) => { p[v] = [[0, 0]]; return p; }, {} as Record<MainStat, DoubleIndex<TrainingLevel>[]>),
-    leveling: [[1, 0]],
-    abilities: {},
-    spells: [],
-    modifiers: {},
-    choices: {},
-
-    owner: -1,
-    visibility: "private",
-};
-
-export const mainStatTexts: Record<MainStat, string> = {
-    "strength": "Force",
-    "dexterity": "Dextérité",
-    "constitution": "Constitution",
-    "intelligence": "Intelligence",
-    "curiosity": "Curiosité",
-    "charisma": "Charisme",
-    "psyche": "Psyché",
-};
-
-export const elementTexts: Record<SpellElement, { class: string, text: string }> = {
-    fire: { class: 'text-light-red dark:text-dark-red border-light-red dark:border-dark-red bg-light-red dark:bg-dark-red', text: 'Feu' },
-    ice: { class: 'text-light-blue dark:text-dark-blue border-light-blue dark:border-dark-blue bg-light-blue dark:bg-dark-blue', text: 'Glace' },
-    thunder: { class: 'text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow', text: 'Foudre' },
-    earth: { class: 'text-light-orange dark:text-dark-orange border-light-orange dark:border-dark-orange bg-light-orange dark:bg-dark-orange', text: 'Terre' },
-    arcana: { class: 'text-light-indigo dark:text-dark-indigo border-light-indigo dark:border-dark-indigo bg-light-indigo dark:bg-dark-indigo', text: 'Arcane' },
-    air: { class: 'text-light-lime dark:text-dark-lime border-light-lime dark:border-dark-lime bg-light-lime dark:bg-dark-lime', text: 'Air' },
-    nature: { class: 'text-light-green dark:text-dark-green border-light-green dark:border-dark-green bg-light-green dark:bg-dark-green', text: 'Nature' },
-    light: { class: 'text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow', text: 'Lumière' },
-    psyche: { class: 'text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-purple bg-light-purple dark:bg-dark-purple', text: 'Psy' },
-};
-
-export const spellTypeTexts: Record<SpellType, string> = { "instinct": "Instinct", "knowledge": "Savoir", "precision": "Précision", "arts": "Oeuvres" };
-
-export const CharacterValidation = z.object({
-    id: z.number(),
-    name: z.string(),
-    people: z.number().nullable(),
-    level: z.number().min(1).max(20),
-    aspect: z.number().nullable().optional(),
-    notes: z.string().nullable().optional(),
-    health: z.number().default(0),
-    mana: z.number().default(0),
-    training: z.object(MAIN_STATS.reduce((p, v) => {
-        p[v] = z.array(z.tuple([z.number().min(0).max(15), z.number()]));
-        return p;
-    }, {} as Record<MainStat, z.ZodArray<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>>)),
-    leveling: z.array(z.tuple([z.number().min(1).max(20), z.number()])),
-    abilities: z.object(ABILITIES.reduce((p, v) => {
-        p[v] = z.tuple([z.number(), z.number()]);
-        return p;
-    }, {} as Record<Ability, z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>)).partial(),
-    spells: z.string().array(),
-    modifiers: z.object(MAIN_STATS.reduce((p, v) => {
-        p[v] = z.number();
-        return p;
-    }, {} as Record<MainStat, z.ZodNumber>)).partial(),
-    owner: z.number(),
-    username: z.string().optional(),
-    visibility: z.enum(["public", "private"]),
-    thumbnail: z.any(),
-});
-
-type PropertySum = { list: Array<string | number>, value: number, _dirty: boolean };
-export class CharacterBuilder
-{
-    private _character: Character;
-    private _result!: CompiledCharacter;
-    private _buffer: Record<string, PropertySum> = {};
-
-    constructor(character: Character)
-    {
-        this._character = character;
-
-        if(character.people)
-        {
-            const people = config.peoples[character.people];
-
-            character.leveling.forEach(e => {
-                const feature = people.options[e[0]][e[1]];
-                feature.effect.map(e => this.apply(e));
-            });
-
-            MAIN_STATS.forEach(stat => {
-                character.training[stat].forEach(option => {
-                    config.training[stat][option[0]][option[1]].features?.forEach(this.apply.bind(this));
-                })
-            });
-        }
-    }
-    compile(properties: string[])
-    {
-        const queue = properties;
-        queue.forEach(e => {
-            const buffer = this._buffer[e];
-
-            if(buffer._dirty === true)
-            {
-                let sum = 0;
-                for(let i = 0; i < buffer.list.length; i++)
-                {
-                    if(typeof buffer.list[i] === 'string')
-                    {
-                        if(this._buffer[buffer.list[i]]._dirty)
-                        {
-                            //Put it back in queue since its dependencies haven't been resolved yet
-                            queue.push(e);
-                            return;
-                        }
-                        else
-                            sum += this._buffer[buffer.list[i]].value;
-                    }
-                    else
-                        sum += buffer.list[i] as number;
-                }
-
-                const path = e[0].split("/");
-                const object = path.slice(0, -1).reduce((p, v) => p[v], this._result as any);
-
-                object[path.slice(-1)[0]] = sum;
-                this._buffer[e].value = sum;
-                this._buffer[e]._dirty = false;
-            }
-        })
-    }
-    updateLevel(level: Level)
-    {
-        this._character.level = level;
-
-        if(this._character.leveling) //Invalidate higher levels
-        {
-            for(let level = 20; level > this._character.level; level--)
-            {
-                const index = this._character.leveling.findIndex(e => e[0] == level);
-                if(index !== -1)
-                {
-                    const option = this._character.leveling[level];
-                    this._character.leveling.splice(index, 1);
-
-                    this.remove(config.peoples[this._character.people!].options[option[0]][option[1]]);
-                }
-            }
-        }
-    }
-    toggleLevelOption(level: Level, choice: number)
-    {
-        if(level > this._character.level) //Cannot add more level options than the current level
-            return;
-
-        if(this._character.leveling === undefined) //Add level 1 if missing
-        {
-            this._character.leveling = [[1, 0]];
-            this.add(config.peoples[this._character.people!].options[1][0]);
-        }
-
-        if(level == 1) //Cannot remove level 1
-            return;
-
-        for(let i = 1; i < level; i++) //Check previous levels as a requirement
-        {
-            if(!this._character.leveling.some(e => e[0] == i))
-                return;
-        }
-
-        const option = this._character.leveling.find(e => e[0] == level);
-        if(option && option[1] !== choice) //If the given level is already selected, switch to the new choice
-        {
-            this._character.leveling.splice(this._character.leveling.findIndex(e => e[0] == level), 1, [level, choice]);
-
-            this.remove(config.peoples[this._character.people!].options[option[0]][option[1]]);
-            this.add(config.peoples[this._character.people!].options[level][choice]);
-        }
-        else if(!option) 
-        {
-            this._character.leveling.push([level, choice]);
-            
-            this.add(config.peoples[this._character.people!].options[level][choice]);
-        }
-    }
-    toggleTrainingOption(stat: MainStat, level: TrainingLevel, option: number)
-    {
-
-    }
-    private add(feature: Feature)
-    {
-        feature.effect.forEach(this.apply.bind(this));
-    }
-    private remove(feature: Feature)
-    {
-
-    }
-
-    get character(): Character
-    {
-        return this._character;
-    }
-    get compiled(): CompiledCharacter
-    {
-        this.compile(Object.keys(this._buffer));
-
-        return this._result;
-    }
-    get values(): Record<string, number>
-    {
-        const keys = Object.keys(this._buffer);
-        this.compile(keys);
-
-        return keys.reduce((p, v) => {
-            p[v] = this._buffer[v].value;
-            return p;
-        }, {} as Record<string, number>);
-    }
-
-    private apply(feature: FeatureItem)
-    {
-        switch(feature.category)
-        {
-            case "feature":
-                this._result.features[feature.kind].push(feature.text);
-
-                return;
-            case "list":
-                if(feature.action === 'add' && !this._result[feature.list].includes(feature.item))
-                    this._result[feature.list].push(feature.item);
-                else
-                    this._result[feature.list] = this._result[feature.list].filter((e: string) => e !== feature.item);
-
-                return;
-            case "value":
-                this._buffer[feature.property] ??= { list: [], value: 0, _dirty: true };
-
-                if(feature.operation === 'add')
-                    this._buffer[feature.property].list.push(feature.value);
-                else if(feature.operation === 'set')
-                    this._buffer[feature.property].list = [feature.value];
-
-                this._buffer[feature.property]._dirty = true;
-
-                return;
-            case "choice":
-                const choice = this._character.choices[feature.id];
-                choice.forEach(e => this.apply(feature.options[e]));
-
-                return;
-            default:
-                return;
-        }
-    }
-}

shared/character.util.ts

@@ -0,0 +1,498 @@
+import type { Ability, Character, CharacterConfig, CompiledCharacter, DoubleIndex, Feature, FeatureItem, Level, MainStat, SpellElement, SpellType, TrainingLevel } from "~/types/character";
+import { z } from "zod/v4";
+import characterConfig from './character-config.json';
+import { button, loading } from "./proses";
+import { div, dom, icon, text } from "./dom.util";
+import { popper } from "./floating.util";
+
+const config = characterConfig as CharacterConfig;
+
+export const MAIN_STATS = ["strength","dexterity","constitution","intelligence","curiosity","charisma","psyche"] as const;
+export const ABILITIES = ["athletics","acrobatics","intimidation","sleightofhand","stealth","survival","investigation","history","religion","arcana","understanding","perception","performance","medecine","persuasion","animalhandling","deception"] as const;
+export const LEVELS = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] as const;
+export const TRAINING_LEVELS = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] as const;
+export const SPELL_TYPES = ["precision","knowledge","instinct","arts"] as const;
+export const CATEGORIES = ["action","reaction","freeaction","misc"] as const;
+export const SPELL_ELEMENTS = ["fire","ice","thunder","earth","arcana","air","nature","light","psyche"] as const;
+
+export const defaultCharacter: Character = {
+    id: -1,
+
+    name: "",
+    people: undefined,
+    level: 1,
+    health: 0,
+    mana: 0,
+
+    training: MAIN_STATS.reduce((p, v) => { p[v] = [[0, 0]]; return p; }, {} as Record<MainStat, DoubleIndex<TrainingLevel>[]>),
+    leveling: [[1, 0]],
+    abilities: {},
+    spells: [],
+    modifiers: {},
+    choices: {},
+
+    owner: -1,
+    visibility: "private",
+};
+
+export const mainStatTexts: Record<MainStat, string> = {
+    "strength": "Force",
+    "dexterity": "Dextérité",
+    "constitution": "Constitution",
+    "intelligence": "Intelligence",
+    "curiosity": "Curiosité",
+    "charisma": "Charisme",
+    "psyche": "Psyché",
+};
+
+export const elementTexts: Record<SpellElement, { class: string, text: string }> = {
+    fire: { class: 'text-light-red dark:text-dark-red border-light-red dark:border-dark-red bg-light-red dark:bg-dark-red', text: 'Feu' },
+    ice: { class: 'text-light-blue dark:text-dark-blue border-light-blue dark:border-dark-blue bg-light-blue dark:bg-dark-blue', text: 'Glace' },
+    thunder: { class: 'text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow', text: 'Foudre' },
+    earth: { class: 'text-light-orange dark:text-dark-orange border-light-orange dark:border-dark-orange bg-light-orange dark:bg-dark-orange', text: 'Terre' },
+    arcana: { class: 'text-light-indigo dark:text-dark-indigo border-light-indigo dark:border-dark-indigo bg-light-indigo dark:bg-dark-indigo', text: 'Arcane' },
+    air: { class: 'text-light-lime dark:text-dark-lime border-light-lime dark:border-dark-lime bg-light-lime dark:bg-dark-lime', text: 'Air' },
+    nature: { class: 'text-light-green dark:text-dark-green border-light-green dark:border-dark-green bg-light-green dark:bg-dark-green', text: 'Nature' },
+    light: { class: 'text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow', text: 'Lumière' },
+    psyche: { class: 'text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-purple bg-light-purple dark:bg-dark-purple', text: 'Psy' },
+};
+
+export const spellTypeTexts: Record<SpellType, string> = { "instinct": "Instinct", "knowledge": "Savoir", "precision": "Précision", "arts": "Oeuvres" };
+
+export const CharacterValidation = z.object({
+    id: z.number(),
+    name: z.string(),
+    people: z.number().nullable(),
+    level: z.number().min(1).max(20),
+    aspect: z.number().nullable().optional(),
+    notes: z.string().nullable().optional(),
+    health: z.number().default(0),
+    mana: z.number().default(0),
+    training: z.object(MAIN_STATS.reduce((p, v) => {
+        p[v] = z.array(z.tuple([z.number().min(0).max(15), z.number()]));
+        return p;
+    }, {} as Record<MainStat, z.ZodArray<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>>)),
+    leveling: z.array(z.tuple([z.number().min(1).max(20), z.number()])),
+    abilities: z.object(ABILITIES.reduce((p, v) => {
+        p[v] = z.tuple([z.number(), z.number()]);
+        return p;
+    }, {} as Record<Ability, z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>)).partial(),
+    spells: z.string().array(),
+    modifiers: z.object(MAIN_STATS.reduce((p, v) => {
+        p[v] = z.number();
+        return p;
+    }, {} as Record<MainStat, z.ZodNumber>)).partial(),
+    owner: z.number(),
+    username: z.string().optional(),
+    visibility: z.enum(["public", "private"]),
+    thumbnail: z.any(),
+});
+
+const stepTexts: Record<number, string> = {
+    0: 'Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.',
+    1: 'Déterminez la progression de votre personnage en choisissant une option par niveau disponible.',
+    2: 'Spécialisez votre personnage en attribuant vos points d\'entrainement parmi les 7 branches disponibles.\nChaque paliers de 3 points augmentent votre modifieur.',
+    3: 'Diversifiez vos possibilités en affectant vos points dans les différentes compétences disponibles.',
+    4: 'Déterminez l\'Aspect qui vous corresponds et benéficiez de puissants bonus.'
+};
+
+type PropertySum = { list: Array<string | number>, value: number, _dirty: boolean };
+export class CharacterBuilder
+{
+    private _container: HTMLDivElement;
+    private _content?: HTMLDivElement;
+    private _stepsHeader: HTMLDivElement[] = [];
+    private _stepsContent: BuilderTab[] = [];
+    private id?: string;
+
+    private _character!: Character;
+    private _result!: CompiledCharacter;
+    private _buffer: Record<string, PropertySum> = {};
+
+    constructor(container: HTMLDivElement, id?: string)
+    {
+        this.id = id;
+        this._container = container;
+
+        if(id)
+        {
+            const load = div("flex justify-center items-center w-full h-full", [ loading('large') ]);
+            container.replaceChildren(load);
+            useRequestFetch()(`/api/character/${id}`).then(character => {
+                if(character)
+                {
+                    this._character = character;
+
+                    document.title = `d[any] - Edition de ${character.name ?? 'nouveau personnage'}`;
+
+                    if(character.people)
+                    {
+                        const people = config.peoples[character.people]!;
+
+                        character.leveling.forEach(e => {
+                            const feature = people.options[e[0]][e[1]]!;
+                            feature.effect.map(e => this.apply(e));
+                        });
+
+                        MAIN_STATS.forEach(stat => {
+                            character.training[stat].forEach(option => {
+                                config.training[stat][option[0]][option[1]]!.features?.forEach(this.apply.bind(this));
+                            })
+                        });
+                    }
+                    load.remove();
+
+                    this.render();
+                    this.display(0);
+                }
+            });
+        }
+        else
+        {
+            this._character = Object.assign({}, defaultCharacter);
+
+            document.title = `d[any] - Edition de nouveau personnage`;
+
+            this.render();
+            this.display(0);
+        }
+    }
+    private render()
+    {
+        this._stepsHeader = [
+            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: e => this.display(0) } }, [text("Peuples")]),
+            ]),
+            dom("div", { class: "group flex items-center", }, [
+                icon("radix-icons:chevron-right", { class: "w-6 h-6 flex justify-center items-center group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" }),
+                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: e => this.display(1) } }, [text("Niveaux")]),
+            ]),
+            dom("div", { class: "group flex items-center", }, [
+                icon("radix-icons:chevron-right", { class: "w-6 h-6 flex justify-center items-center group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" }),
+                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: e => this.display(2) } }, [text("Entrainement")]),
+            ]),
+            dom("div", { class: "group flex items-center", }, [
+                icon("radix-icons:chevron-right", { class: "w-6 h-6 flex justify-center items-center group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" }),
+                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: e => this.display(3) } }, [text("Compétences")]),
+            ]),
+            dom("div", { class: "group flex items-center", }, [
+                icon("radix-icons:chevron-right", { class: "w-6 h-6 flex justify-center items-center group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" }),
+                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: e => this.display(4) } }, [text("Aspect")])
+            ]),
+        ];
+        this._stepsContent = [
+            new PeoplePicker(this),
+        ];
+        this._content = div('flex-1 outline-none max-w-full w-full overflow-y-auto');
+        this._container.appendChild(div('flex flex-1 flex-col justify-start items-center px-8 w-full h-full overflow-y-hidden', [
+            div("flex w-full flex-row gap-4 items-center justify-between px-4 bg-light-0 dark:bg-dark-0 z-20", [
+                div(), div("flex w-full flex-row gap-4 items-center justify-center relative", this._stepsHeader), div(undefined, [popper(icon("radix-icons:question-mark-circled", { height: 20, width: 20 }), { 
+                    arrow: true,
+                    offset: 8,
+                    content: [ text("Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.") ],
+                    placement: "bottom-end",
+                    class: "max-w-96 fixed hidden TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50"
+                })]),
+            ]),
+            this._content,
+        ]));
+    }
+    display(step: number)
+    {
+        if(step < 0 || step >= this._stepsHeader.length)
+            return;
+
+        if(this._stepsContent.slice(0, step).some(e => !e.validate()))
+            return;
+
+        this._stepsHeader.forEach(e => e.setAttribute('data-state', 'inactive'));
+        this._stepsHeader[step]!.setAttribute('data-state', 'active');
+
+        this._stepsContent[step]!.update();
+        this._content?.replaceChildren(...this._stepsContent[step]!.dom);
+    }
+    async save(leave: boolean = true)
+    {
+        if(this.id === 'new')
+        {
+            //@ts-ignore
+            this.id = this._character.id = await useRequestFetch()(`/api/character`, {
+                method: 'post',
+                body: this._character,
+                onResponseError: (e) => {
+                    //add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', duration: 25000, timer: true });
+                }
+            });
+            //add({ content: 'Personnage créé', type: 'success', duration: 25000, timer: true });
+            useRouter().replace({ name: 'character-id-edit', params: { id: this.id } })
+            if(leave) useRouter().push({ name: 'character-id', params: { id: this.id } });
+        }
+        else
+        {
+            //@ts-ignore
+            await useRequestFetch()(`/api/character/${id}`, {
+                method: 'post',
+                body: this._character,
+                onResponseError: (e) => {
+                    //add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', duration: 25000, timer: true });
+                }
+            });
+            //add({ content: 'Personnage enregistré', type: 'success', duration: 25000, timer: true });
+            if(leave) useRouter().push({ name: 'character-id', params: { id: this.id } });
+        }
+    }
+
+    get character(): Character
+    {
+        return this._character;
+    }
+    get compiled(): CompiledCharacter
+    {
+        this.compile(Object.keys(this._buffer));
+
+        return this._result;
+    }
+    get values(): Record<string, number>
+    {
+        const keys = Object.keys(this._buffer);
+        this.compile(keys);
+
+        return keys.reduce((p, v) => {
+            p[v] = this._buffer[v]!.value;
+            return p;
+        }, {} as Record<string, number>);
+    }
+
+    private compile(properties: string[])
+    {
+        const queue = properties;
+        queue.forEach(property => {
+            const buffer = this._buffer[property];
+
+            if(property === "")
+                return
+
+            if(buffer && buffer._dirty === true)
+            {
+                let sum = 0;
+                for(let i = 0; i < buffer.list.length; i++)
+                {
+                    if(typeof buffer.list[i] === 'string')
+                    {
+                        if(this._buffer[buffer.list[i]!]!._dirty)
+                        {
+                            //Put it back in queue since its dependencies haven't been resolved yet
+                            queue.push(property);
+                            return;
+                        }
+                        else
+                            sum += this._buffer[buffer.list[i]!]!.value;
+                    }
+                    else
+                        sum += buffer.list[i] as number;
+                }
+
+                const path = property.split("/");
+                const object = path.slice(0, -1).reduce((p, v) => p[v], this._result as any);
+
+                object[path.slice(-1)[0]!] = sum;
+                this._buffer[property]!.value = sum;
+                this._buffer[property]!._dirty = false;
+            }
+        })
+    }
+    private updateLevel(level: Level)
+    {
+        this._character.level = level;
+
+        if(this._character.leveling) //Invalidate higher levels
+        {
+            for(let level = 20; level > this._character.level; level--)
+            {
+                const index = this._character.leveling.findIndex(e => e[0] == level);
+                if(index !== -1)
+                {
+                    const option = this._character.leveling[level]!;
+                    this._character.leveling.splice(index, 1);
+
+                    this.remove(config.peoples[this._character.people!]!.options[option[0]][option[1]]!);
+                }
+            }
+        }
+    }
+    private toggleLevelOption(level: Level, choice: number)
+    {
+        if(level > this._character.level) //Cannot add more level options than the current level
+            return;
+
+        if(this._character.leveling === undefined) //Add level 1 if missing
+        {
+            this._character.leveling = [[1, 0]];
+            this.add(config.peoples[this._character.people!]!.options[1][0]!);
+        }
+
+        if(level == 1) //Cannot remove level 1
+            return;
+
+        for(let i = 1; i < level; i++) //Check previous levels as a requirement
+        {
+            if(!this._character.leveling.some(e => e[0] == i))
+                return;
+        }
+
+        const option = this._character.leveling.find(e => e[0] == level);
+        if(option && option[1] !== choice) //If the given level is already selected, switch to the new choice
+        {
+            this._character.leveling.splice(this._character.leveling.findIndex(e => e[0] == level), 1, [level, choice]);
+
+            this.remove(config.peoples[this._character.people!]!.options[option[0]][option[1]]!);
+            this.add(config.peoples[this._character.people!]!.options[level][choice]!);
+        }
+        else if(!option) 
+        {
+            this._character.leveling.push([level, choice]);
+            
+            this.add(config.peoples[this._character.people!]!.options[level][choice]!);
+        }
+    }
+    private toggleTrainingOption(stat: MainStat, level: TrainingLevel, option: number)
+    {
+
+    }
+    private add(feature: Feature)
+    {
+        feature.effect.forEach(this.apply.bind(this));
+    }
+    private remove(feature: Feature)
+    {
+
+    }
+    private apply(feature: FeatureItem)
+    {
+        switch(feature.category)
+        {
+            case "feature":
+                this._result.features[feature.kind].push(feature.text);
+
+                return;
+            case "list":
+                if(feature.action === 'add' && !this._result[feature.list].includes(feature.item))
+                    this._result[feature.list].push(feature.item);
+                else
+                    this._result[feature.list] = this._result[feature.list].filter((e: string) => e !== feature.item);
+
+                return;
+            case "value":
+                this._buffer[feature.property] ??= { list: [], value: 0, _dirty: true };
+
+                if(feature.operation === 'add')
+                    this._buffer[feature.property]!.list.push(feature.value);
+                else if(feature.operation === 'set')
+                    this._buffer[feature.property]!.list = [feature.value];
+
+                this._buffer[feature.property]!._dirty = true;
+
+                return;
+            case "choice":
+                const choice = this._character.choices[feature.id]!;
+                choice.forEach(e => this.apply(feature.options[e]!));
+
+                return;
+            default:
+                return;
+        }
+    }
+}
+
+interface BuilderTab {
+    dom: Array<Node | string>;
+    update: () => void;
+    validate: () => boolean;
+};
+class PeoplePicker implements BuilderTab
+{
+    private _builder: CharacterBuilder;
+    private _content: Array<Node | string>;
+
+    private _nameInput: HTMLInputElement;
+    private _visibilityInput: HTMLDivElement;
+    private _options: HTMLDivElement[];
+
+    private _activeOption?: HTMLDivElement;
+
+    constructor(builder: CharacterBuilder)
+    {
+        /* 
+        <div class="flex flex-1 gap-4 p-2 overflow-x-auto justify-center">
+            <div v-for="(people, i) of config.peoples" @click="model.character.people = i" class="flex flex-col flex-nowrap gap-2 p-2 border border-light-35 dark:border-dark-35 
+            cursor-pointer hover:border-light-70 dark:hover:border-dark-70 w-[320px]" :class="{ '!border-accent-blue outline-2 outline outline-accent-blue': model.character.people === i }">
+                <Avatar :src="people.name" :text="`Image placeholder`" class="h-[320px]" />
+                <span class="text-xl font-bold text-center">{{ people.name }}</span>
+                <span class="w-full border-b border-light-50 dark:border-dark-50"></span>
+                <span class="text-wrap word-break">{{ people.description }}</span>
+            </div>
+        </div>
+        */
+        this._builder = builder;
+
+        this._nameInput = dom("input", { class: `mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
+        bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+        border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20`, listeners: {
+            input: (e: Event) => {
+                this._builder.character.name = this._nameInput.value ?? '';
+                document.title = `d[any] - Edition de ${this._builder.character.name || 'nouveau personnage'}`;
+            }
+        }});
+        this._visibilityInput = dom("div", { class: `group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
+        data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
+        data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative py-[2px]`, attributes: { "data-state": "unckecked" }, listeners: {
+            click: (e: Event) => {
+                this._builder.character.visibility = this._builder.character.visibility === "private" ? "public" : "private";
+                console.log(this._builder.character.visibility);
+                this._visibilityInput.setAttribute('data-state', this._builder.character.visibility === "private" ? "checked" : "unchecked");
+            }
+        }}, [ div('block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 group-data-[state=checked]:translate-x-[26px] group-data-[disabled]:bg-light-30 dark:group-data-[disabled]:bg-dark-30 group-data-[disabled]:border-light-30 dark:group-data-[disabled]:border-dark-30') ]);
+        
+        this._options = config.peoples.map(
+            (people, i) => dom("div", { class: "flex flex-col flex-nowrap gap-2 p-2 border border-light-35 dark:border-dark-35 cursor-pointer hover:border-light-70 dark:hover:border-dark-70 w-[320px]", listeners: { click: () => { 
+                    this._builder.character.people = i;
+                    "border-accent-blue outline-2 outline outline-accent-blue".split(" ").forEach(e => this._activeOption?.classList.toggle(e, false));
+                    this._activeOption = this._options[i]!;
+                    "border-accent-blue outline-2 outline outline-accent-blue".split(" ").forEach(e => this._activeOption?.classList.toggle(e, true));
+                }
+            } }, [div("h-[320px]"), div("text-xl font-bold text-center", [text(people.name)]), div("w-full border-b border-light-50 dark:border-dark-50"), div("text-wrap word-break", [text(people.description)])]),
+        );
+        
+        this._content = [ div("flex flex-1 gap-12 px-2 py-4 justify-center items-center", [
+            dom("label", { class: "flex justify-center items-center my-2" }, [
+                dom("span", { class: "pb-1 md:p-0", text: "Nom" }),
+                this._nameInput,
+            ]),
+            dom("label", { class: "flex justify-center items-center my-2" }, [
+                dom("span", { class: "md:text-base text-sm", text: "Privé ?" }),
+                this._visibilityInput,
+            ]),
+            button(text('Suivant'), () => this._builder.display(1), 'h-[35px] px-[15px]'),
+        ]), div('flex flex-1 gap-4 p-2 overflow-x-auto justify-center', this._options)];
+    }
+    update()
+    {
+        this._nameInput.value = this._builder.character.name;
+        this._visibilityInput.setAttribute('data-state', this._builder.character.visibility === "private" ? "checked" : "unchecked");
+        "border-accent-blue outline-2 outline outline-accent-blue".split(" ").forEach(e => this._activeOption?.classList.toggle(e, false));
+
+        if(this._builder.character.people !== undefined)
+        {
+            this._activeOption = this._options[this._builder.character.people]!;
+            "border-accent-blue outline-2 outline outline-accent-blue".split(" ").forEach(e => this._activeOption?.classList.toggle(e, true));
+        }
+    }
+    validate(): boolean
+    {
+        return this._builder.character.people !== undefined;
+    }
+    get dom()
+    {
+        return this._content;
+    }
+}

shared/content.util.ts

@@ -0,0 +1,911 @@
+import { safeDestr as parse } from 'destr';
+import { Canvas, CanvasEditor } from "#shared/canvas.util";
+import render from "#shared/markdown.util";
+import { confirm, contextmenu, popper } from "#shared/floating.util";
+import { cancelPropagation, dom, icon, text, type Node } from "#shared/dom.util";
+import prose, { h1, h2, loading } from "#shared/proses";
+import { getID, ID_SIZE, parsePath } from '#shared/general.util';
+import { TreeDOM, type Recursive } from '#shared/tree';
+import { History } from '#shared/history.util';
+import { MarkdownEditor } from '#shared/editor.util';
+import type { CanvasContent } from '~/types/canvas';
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { type Instruction, attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types';
+
+export type FileType = keyof ContentMap;
+export interface ContentMap
+{
+    markdown: string;
+    file: string;
+    canvas: CanvasContent;
+    map: string;
+    folder: null;
+}
+export interface Overview<T extends FileType>
+{
+    id: string;
+    path: string;
+    owner: number;
+    title: string;
+    timestamp: Date;
+    navigable: boolean;
+    private: boolean;
+    order: number;
+    type: T;
+}
+export type ProjectContent<T extends FileType = FileType> = Overview<T> & { content: ContentMap[T] };
+
+class AsyncQueue
+{
+    private size: number;
+    private count: number = 0;
+    private _queue: Array<() => Promise<any>>;
+
+    promise: Promise<void> = Promise.resolve();
+    finished: boolean = true;
+
+    private res: (value: void | PromiseLike<void>) => void = () => {};
+    private rej: (value: void | PromiseLike<void>) => void = () => {};
+
+    constructor(size: number = 8)
+    {
+        this.size = size;
+        this._queue = [];
+    }
+
+    queue(fn: () => Promise<any>): Promise<void>
+    {
+        if(this.finished)
+        {
+            this.finished = false;
+    
+            this.promise = new Promise((res, rej)  => { 
+                this.res = res;
+                this.rej = rej;
+            });
+        }
+
+        this._queue.push(fn);
+        this.refresh();
+
+        return this.promise;
+    }
+
+    private refresh()
+    {
+        for(let i = this.count; i < this.size && this._queue.length > 0; i++)
+        {
+            this.count++;
+
+            const fn = this._queue.shift()!;
+            fn().catch(e => this.rej(e)).then(() => {
+                this.count--;
+                this.refresh();
+            });
+        }
+
+        if(this.count === 0 && this._queue.length === 0 && !this.finished)
+        {
+            this.finished = true;
+            this.res();
+        }
+    }
+}
+
+export const DEFAULT_CONTENT: Record<FileType, ContentMap[FileType]> = {
+    map: {},
+    canvas: { nodes: [], edges: []},
+    markdown: '',
+    file: '',
+    folder: null,
+};
+export type LocalContent<T extends FileType = FileType> = ProjectContent<T> & { 
+    localEdit?: boolean;
+    error?: boolean;
+};
+export class Content
+{
+    private static _ready = false;
+    private static initPromise?: Promise<boolean>;
+
+    private static root: FileSystemDirectoryHandle;
+
+    private static _overview: Record<string, Omit<LocalContent, 'content'>>;
+    private static _reverseMapping: Record<string, string>;
+    private static queue = new AsyncQueue();
+
+    static init(): Promise<boolean>
+    {
+        if(Content._ready)
+            return Promise.resolve(true);
+
+        Content.initPromise = new Promise(async (res) => {
+            try
+            {
+                if(!('storage' in navigator))
+                    return false;
+        
+                Content.root = await navigator.storage.getDirectory();
+    
+                const overview = await Content.read('overview', { create: true });
+                try
+                {
+                    Content._overview = parse<Record<string, Omit<LocalContent, 'content'>>>(overview);
+                }
+                catch(e)
+                {
+                    Content._overview = {};
+                    await Content.pull();
+                }
+                Content._reverseMapping = Object.values(Content._overview).reduce((p, v) => {
+                    p[v.path] = v.id;
+                    return p;
+                }, {} as Record<string, string>);
+    
+                Content._ready = true;
+            }
+            catch(e)
+            {
+                console.error(e);
+            }
+    
+            res(Content._ready);
+        });
+
+        return Content.initPromise;
+    }
+    static getFromPath(path: string)
+    {
+        const id = Content.idFromPath(path);
+        return id ?  Content._overview[id] : undefined;
+    }
+    static idFromPath(path: string)
+    {
+        return Content._reverseMapping[path];
+    }
+    static get(id: string)
+    {
+        return Content._overview[id];
+    }
+    static async getContent(id: string): Promise<LocalContent | undefined>
+    {
+        const overview = Content._overview[id];
+
+        if(!overview)
+            return;
+
+        return { ...overview, content: Content.fromString(overview, (await Content.read(id, { create: true }))!) };
+    }
+    static set(id: string, overview?: Omit<LocalContent, 'content'> | Recursive<Omit<LocalContent, 'content'>>)
+    {
+        if(overview === undefined)
+        {
+            delete Content._overview[id];
+        }
+        else
+        {
+            const { 
+                id: _id,
+                path: _path,
+                owner: _owner,
+                title: _title,
+                timestamp: _timestamp,
+                navigable: _navigable,
+                private: _private,
+                order: _order,
+                type: _type,
+                ...rest
+            } = overview as Recursive<LocalContent>;
+            Content._overview[id] = {
+                id: _id,
+                path: _path,
+                owner: _owner,
+                title: _title,
+                timestamp: _timestamp,
+                navigable: _navigable,
+                private: _private,
+                order: _order,
+                type: _type,
+            };
+        }
+    }
+    static async save(content?: ProjectContent)
+    {
+        const overviewAsString = JSON.stringify(Content._overview)
+        Content.queue.queue(() => Content.write("overview", overviewAsString));
+
+        if(content && content.content)
+        {
+            const contentAsString = Content.toString(content);
+            Content.queue.queue(() => Content.write(content.id, contentAsString));
+        }
+
+        return Content.queue.promise;
+    }
+    static async pull()
+    {
+        const overview = (await useRequestFetch()('/api/file/overview', { cache: 'no-cache' })) as ProjectContent<FileType>[] | undefined;
+
+        if(!overview)
+        {
+            //TODO: Cannot get data :'(
+            //Add a warning ?
+            return;
+        }
+
+        for(const file of overview)
+        {
+            const _overview = Content._overview[file.id];
+            if(_overview && _overview.localEdit)
+            {
+                //TODO: Ask what to do about this file.
+            }
+            else
+            {
+                Content._overview[file.id] = file;
+
+                Content.queue.queue(() => {
+                    return useRequestFetch()(`/api/file/content/${file.id}`, { cache: 'no-cache' }).then(async (content: string | undefined) => {
+                        if(content)
+                        {
+                            if(file.type !== 'folder')
+                            {
+                                Content.queue.queue(() => Content.write(file.id, content, { create: true }));
+                                //Content.queue.queue(() => Content.write('storage/' + file.path + (file.type === 'canvas' ? '.canvas' : '.md'), Content.toString({ ...file, content: Content.fromString(file, content) }), { create: true }));
+                            }
+                        }
+                        else
+                            Content._overview[file.id]!.error = true;
+                    }).catch(e => {
+                        Content._overview[file.id]!.error = true;
+                    });
+                });
+            }
+        }
+
+        return Content.queue.queue(() => {
+            return Content.write('overview', JSON.stringify(Content._overview), { create: true });
+        });
+    }
+    static async push()
+    {
+        const blocked = (await useRequestFetch()('/api/file/overview', { method: 'POST', body: Object.values(Content._overview), cache: 'no-cache' }));
+
+        for(const [id, value] of Object.entries(Content._overview).filter(e => !blocked.includes(e[0])))
+        {
+            if(value.type === 'folder')
+                continue;
+            
+            Content.queue.queue(() => Content.read(id).then(e => {
+                if(e) Content.queue.queue(() => useRequestFetch()(`/api/file/content/${id}`, { method: 'POST', body: e, cache: 'no-cache' }));
+            }));
+        }
+
+        return Content.queue.promise;
+    }
+    //Maybe store the file handles ? Is it safe to keep them ? 
+    private static async read(path: string, options?: FileSystemGetFileOptions): Promise<string | undefined>
+    {
+        try
+        {
+            console.time(`Reading '${path}'`);
+            const handle = await Content.root.getFileHandle(path, options);
+            const file = await handle.getFile();
+    
+            const text = await file.text();
+            console.timeEnd(`Reading '${path}'`);
+            return text;
+        }
+        catch(e)
+        {
+            console.error(path, e);
+            console.timeEnd(`Reading '${path}'`);
+        }
+    }
+    private static async goto(path: string, options?: FileSystemGetDirectoryOptions): Promise<FileSystemDirectoryHandle | undefined>
+    {
+        const splitPath = path.split("/");
+        let handle = Content.root;
+        try 
+        {
+            for(const p of splitPath)
+            {
+                handle = await handle.getDirectoryHandle(p, options);
+            }
+            return handle;
+        }
+        catch(e)
+        {
+            return undefined;
+        }
+    }
+    //Easy to use, but not very performant.
+    private static async write(path: string, content: string, options?: FileSystemGetFileOptions): Promise<void>
+    {
+        const size = new TextEncoder().encode(content).byteLength;
+        console.time(`Writing ${size} bytes to '${path}'`);
+        try
+        {
+            const parent = path.split('/').slice(0, -1).join('/'), basename = path.split('/').slice(-1).join('/');
+            const handle = await (await Content.goto(parent, { create: true }) ?? Content.root).getFileHandle(basename, options);
+            const file = await handle.createWritable({ keepExistingData: false });
+
+            await file.write(content);
+            await file.close();
+        }
+        catch(e)
+        {
+            console.error(path, e);
+        }
+        console.timeEnd(`Writing ${size} bytes to '${path}'`);
+    }
+
+    static get estimate(): Promise<StorageEstimate>
+    {
+        return Content._ready ? navigator.storage.estimate() : Promise.reject();
+    }
+
+    static toString<T extends FileType>(content: ProjectContent<T>): string
+    {
+        return handlers[content.type].toString(content.content);
+    }
+    
+    static fromString<T extends FileType>(overview: Omit<ProjectContent<T>, 'content'>, content: string): ContentMap[T]
+    {
+        return handlers[overview.type].fromString(content);
+    }
+
+    static render(parent: HTMLElement, path: string): Omit<LocalContent, 'content'> | undefined
+    {
+        const overview = Content.getFromPath(path);
+
+        if(!!overview)
+        {
+            const load = dom('div', { class: 'flex, flex-1 justify-center items-center' }, [loading('normal')]);
+            parent.appendChild(load);
+
+            function _render<T extends FileType>(content: LocalContent<T>): void
+            {
+                const el = handlers[content.type].render(content);
+                el && parent.replaceChild(el, load);
+            }
+
+            Content.getContent(overview.id).then(content => _render(content!));
+        }
+        else
+        {
+            parent.appendChild(dom('h2', { class: 'flex-1 text-center', text: "Impossible d'afficher le contenu demandé" }));
+        }
+
+        return overview;
+    }
+
+    static get files()
+    {
+        return Object.freeze(Content._overview);
+    }
+    static get tree()
+    {
+        const arr: Recursive<Omit<LocalContent, 'content'>>[] = [];
+
+        function addChild(arr: Recursive<Omit<LocalContent, 'content'>>[], overview: Omit<LocalContent, 'content'>): void {
+            const parent = arr.find(f => overview.path.startsWith(f.path));
+            
+            if(parent)
+            {
+                if(!parent.children)
+                    parent.children = [];
+                
+                (overview as Recursive<typeof overview>).parent = parent;
+                addChild(parent.children, overview);
+            }
+            else
+            {
+                arr.push({ ...overview });
+                arr.sort((a, b) => {
+                    if(a.order !== b.order)
+                        return a.order - b.order;
+                    return a.title.localeCompare(b.title);
+                });
+            }
+        }
+
+        for(const element of Object.values(Content._overview))
+        {
+            addChild(arr, {...element});
+        }
+
+        return arr;
+    }
+    static get ready(): Promise<boolean>
+    {
+        return Content._ready ? Promise.resolve(true) : Content.initPromise ?? Promise.resolve(false);
+    }
+}
+
+type ContentTypeHandler<T extends FileType> = {
+    toString: (content: ContentMap[T]) => string;
+    fromString: (str: string) => ContentMap[T];
+    render: (content: LocalContent<T>) => Node;
+    renderEditor: (content: LocalContent<T>) => Node;
+};
+
+function reshapeLinks(content: string | null, all: ProjectContent[])
+{
+    return content?.replace(/\[\[(.*?)?(#.*?)?(\|.*?)?\]\]/g, (str, link, header, title) => {
+        return `[[${link ? parsePath(all.find(e => e.path.endsWith(parsePath(link)))?.path ?? parsePath(link)) : ''}${header ?? ''}${title ?? ''}]]`;
+    });
+}
+
+const handlers: { [K in FileType]: ContentTypeHandler<K> } = {
+    canvas: {
+        toString: (content) => {
+            const mapping: Record<string, string> = {
+                'red': '1',
+                'orange': '2',
+                'yellow': '3',
+                'green': '4',
+                'cyan': '5',
+                'purple': '6',
+            };
+            content.edges?.forEach(e => e.color = e.color ? e.color.hex ?? (e.color.class ? mapping[e.color.class]! : undefined) : undefined);
+            content.nodes?.forEach(e => e.color = e.color ? e.color.hex ?? (e.color.class ? mapping[e.color.class]! : undefined) : undefined);
+
+            return JSON.stringify(content);
+        },
+        fromString: (str) => JSON.parse(str),
+        render: (content) => {
+            const c = new Canvas(content.content);
+            queueMicrotask(() => c.mount());
+            return c.container;
+        },
+        renderEditor: (content) => {
+            let element: HTMLElement;
+            if(content.hasOwnProperty('content'))
+            {
+                const c = new CanvasEditor(content.content);
+                queueMicrotask(() => c.mount());
+                element = c.container;
+            }
+            else
+            {
+                element = loading("large");
+                Content.getContent(content.id).then(e => {
+                    if(!e)
+                        return element.parentElement?.replaceChild(dom('div', { class: '', text: 'Une erreur est survenue.' }), element);
+
+                    content.content = e.content as CanvasContent;
+                    const c = new CanvasEditor(content.content);
+                    queueMicrotask(() => c.mount());
+                    element.parentElement?.replaceChild(c.container, element);
+                });
+            }
+            return element;
+        },
+    },
+    markdown: {
+        toString: (content) => content,
+        fromString: (str) => str,
+        render: (content) => {
+            return dom('div', { class: 'flex flex-1 justify-start items-start flex-col lg:px-16 xl:px-32 2xl:px-64 py-6' }, [
+                dom('div', { class: 'flex flex-1 flex-row justify-between items-center' }, [
+                    prose('h1', h1, [text(content.title)]),
+                    dom('div', { class: 'flex gap-4' }, [
+                        //TODO: Edition link
+                    ]),
+                ]),
+                render(content.content),
+            ])
+        },
+        renderEditor: (content) => {
+            let element: HTMLElement;
+            if(content.hasOwnProperty('content'))
+            {
+                MarkdownEditor.singleton.content = content.content;
+                element = MarkdownEditor.singleton.dom;
+            }
+            else
+            {
+                element = loading("large");
+                Content.getContent(content.id).then(e => {
+                    if(!e)
+                        return element.parentElement?.replaceChild(dom('div', { class: '', text: 'Une erreur est survenue.' }), element);
+
+                    MarkdownEditor.singleton.content = content.content = (e as typeof content).content;
+                    element.parentElement?.replaceChild(MarkdownEditor.singleton.dom, element);
+                });
+            }
+            MarkdownEditor.singleton.onChange = (value) => { content.content = value; };
+            return dom('div', { class: 'flex flex-1 justify-start items-start flex-col lg:px-16 xl:px-32 2xl:px-64 py-6' }, [
+                dom('div', { class: 'flex flex-row justify-between items-center' }, [ prose('h1', h1, [text(content.title)]) ]),
+                dom('div', { class: 'flex flex-1 w-full justify-stretch items-stretch py-2 px-1.5 font-sans text-base' }, [element]),
+            ])
+        },
+    },
+    file: {
+        toString: (content) => content,
+        fromString: (str) => str,
+        render: (content) => prose('h2', h2, [text('En cours de développement')], { class: 'flex-1 text-center' }),
+        renderEditor: (content) => prose('h2', h2, [text('En cours de développement')], { class: 'flex-1 text-center' }),
+    },
+    map: {
+        toString: (content) => content,
+        fromString: (str) => str,
+        render: (content) => prose('h2', h2, [text('En cours de développement')], { class: 'flex-1 text-center' }),
+        renderEditor: (content) => prose('h2', h2, [text('En cours de développement')], { class: 'flex-1 text-center' }),
+    },
+    folder: {
+        toString: (_) => '',
+        fromString: (_) => null,
+        render: (content) => prose('h2', h2, [text('En cours de développement')], { class: 'flex-1 text-center' }),
+        renderEditor: (content) => prose('h2', h2, [text('En cours de développement')], { class: 'flex-1 text-center' }),
+    }
+};
+
+export const iconByType: Record<FileType, string> = {
+    'folder': 'lucide:folder',
+    'canvas': 'ph:graph-light',
+    'file': 'radix-icons:file',
+    'markdown': 'radix-icons:file-text',
+    'map': 'lucide:map',
+};
+
+export class Editor
+{
+    tree: TreeDOM;
+    container: HTMLDivElement;
+
+    selected?: Recursive<LocalContent & { element?: HTMLElement }>;
+
+    private instruction: HTMLDivElement;
+    private cleanup: CleanupFn;
+
+    private history: History;
+
+    constructor()
+    {
+        this.history = new History();
+        this.history.register('overview', {
+            move: {
+                undo: (action) => {
+                    this.tree.tree.remove(action.element.id);
+                    action.element.parent = action.from.parent;
+                    action.element.order = action.from.order;
+                    const path = getPath(action.element), depth = path.split("/").filter(e => !!e).length;
+                    
+                    this.tree.tree.insertAt(action.element, action.to.order as number);
+                    action.element.element = this.tree.render(action.element, depth);
+                    action.element?.cleanup();
+                    this.dragndrop(action.element, depth, action.element.parent);
+                    this.tree.update();
+
+                    action.element.path = path;
+                },
+                redo: (action) => {
+                    this.tree.tree.remove(action.element.id);
+                    action.element.parent = action.to.parent;
+                    action.element.order = action.to.order;
+                    const path = getPath(action.element), depth = path.split("/").filter(e => !!e).length;
+                    
+                    this.tree.tree.insertAt(action.element, action.to.order as number);
+
+                    action.element.element = this.tree.render(action.element, depth);
+                    action.element?.cleanup();
+                    this.dragndrop(action.element, depth, action.element.parent);
+                    this.tree.update();
+
+                    action.element.path = path;
+                },
+            },
+            add: {
+                undo: (action) => {
+                    this.tree.tree.remove(action.element.id);
+                    if(this.selected === action.element) this.select();
+                    action.element.cleanup();
+                    action.element.element?.remove();
+
+                },
+                redo: (action) => {
+                    if(!action.element)
+                    {
+                        const depth = getPath(action.element as LocalContent).split('/').length;
+                        action.element.element = this.tree.render(action.element as LocalContent, depth) as HTMLElement;
+                        this.dragndrop(action.element as LocalContent, depth, (action.element as Recursive<LocalContent>).parent);
+                    }
+                    this.tree.tree.insertAt(action.element as Recursive<LocalContent>, action.to as number);
+                    this.tree.update();
+                },
+            },
+            remove: {
+                undo: (action) => {
+                    this.tree.tree.insertAt(action.element, action.from as number);
+                    this.tree.update();
+                },
+                redo: (action) => {
+                    this.tree.tree.remove(action.element.id);
+                    if(this.selected === action.element) this.select();
+                    action.element.cleanup();
+                    action.element.element?.remove();
+                },
+            },
+            rename: {
+                undo: (action) => {
+                    action.element.title = action.from;
+                    action.element.element!.children[0].children[1].textContent = action.from;
+                    action.element.element!.children[0].children[1].setAttribute('title', action.from);
+
+                    const path = getPath(action.element), depth = path.split("/").filter(e => !!e).length;
+                    action.element?.cleanup();
+                    this.dragndrop(action.element, depth, action.element.parent);
+                    action.element.path = path;
+                },
+                redo: (action) => {
+                    action.element.title = action.to;
+                    action.element.element!.children[0].children[1].textContent = action.to;
+                    action.element.element!.children[0].children[1].setAttribute('title', action.to);
+
+                    const path = getPath(action.element), depth = path.split("/").filter(e => !!e).length;
+                    action.element?.cleanup();
+                    this.dragndrop(action.element, depth, action.element.parent);
+                    action.element.path = path;
+                },
+            },
+            navigable: {
+                undo: (action) => {
+                    action.element.navigable = action.from;
+                    action.element.element!.children[0].children[2].children[0].replaceWith(icon(action.element.navigable ? 'radix-icons:eye-open' : 'radix-icons:eye-none', { class: ['mx-1', { 'opacity-50': !action.element.navigable }] }));
+                },
+                redo: (action) => {
+                    action.element.navigable = action.to;
+                    action.element.element!.children[0].children[2].children[0].replaceWith(icon(action.element.navigable ? 'radix-icons:eye-open' : 'radix-icons:eye-none', { class: ['mx-1', { 'opacity-50': !action.element.navigable }] }));
+                },
+            },
+            private: {
+                undo: (action) => {
+                    action.element.private = action.from;
+                    action.element.element!.children[0].children[3].children[0].replaceWith(icon(action.element.private ? 'radix-icons:lock-closed' : 'radix-icons:lock-open-2', { class: ['mx-1', { 'opacity-50': !action.element.private }] }));
+                },
+                redo: (action) => {
+                    action.element.private = action.to;
+                    action.element.element!.children[0].children[3].children[0].replaceWith(icon(action.element.private ? 'radix-icons:lock-closed' : 'radix-icons:lock-open-2', { class: ['mx-1', { 'opacity-50': !action.element.private }] }));
+                },
+            },
+        }, () => { this.tree.tree.each(e => Content.set(e.id, e)); Content.save(); });
+
+        this.tree = new TreeDOM((item, depth) => {
+            return dom('div', { class: 'group flex items-center ps-2 outline-none relative cursor-pointer', style: { 'padding-left': `${depth / 2 - 0.5}em` } }, [dom('div', { class: ['flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full cursor-pointer font-medium'], attributes: { 'data-private': item.private }, listeners: { contextmenu: (e) => this.contextmenu(e, item as LocalContent)} }, [
+                icon('radix-icons:chevron-right', { class: 'h-4 w-4 transition-transform absolute group-data-[state=open]:rotate-90', style: { 'left': `${depth / 2 - 1.5}em` } }),
+                dom('div', { class: 'pl-1.5 py-1.5 flex-1 truncate', text: item.title, attributes: { title: item.title } }),
+                popper(dom('span', { class: 'flex', listeners: { click: e => this.toggleNavigable(e, item as LocalContent) } }, [icon(item.navigable ? 'radix-icons:eye-open' : 'radix-icons:eye-none', { class: ['mx-1', { 'opacity-50': !item.navigable }] })]), { delay: 150, offset: 8, placement: 'left', arrow: true, content: [text('Navigable')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }),
+                popper(dom('span', { class: 'flex', listeners: { click: e => this.togglePrivate(e, item as LocalContent) }  }, [icon(item.private ? 'radix-icons:lock-closed' : 'radix-icons:lock-open-2', { class: ['mx-1', { 'opacity-50': !item.private }] })]), { delay: 150, offset: 8, placement: 'right', arrow: true, content: [text('Privé')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }),
+            ])]);
+        }, (item, depth) => {
+            return dom('div', { class: 'group flex items-center ps-2 outline-none relative cursor-pointer', style: { 'padding-left': `${depth / 2 - 0.5}em` } }, [dom('div', { class: ['flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full'], attributes: { 'data-private': item.private }, listeners: { contextmenu: (e) => this.contextmenu(e, item as LocalContent), click: () => this.select(item as LocalContent) } }, [
+                icon(iconByType[item.type], { class: 'w-5 h-5', width: 20, height: 20 }),
+                dom('div', { class: 'pl-1.5 py-1.5 flex-1 truncate', text: item.title, attributes: { title: item.title } }),
+                popper(dom('span', { class: 'flex', listeners: { click: e => this.toggleNavigable(e, item as LocalContent) } }, [icon(item.navigable ? 'radix-icons:eye-open' : 'radix-icons:eye-none', { class: ['mx-1', { 'opacity-50': !item.navigable }] })]), { delay: 150, offset: 8, placement: 'left', arrow: true, content: [text('Navigable')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }),
+                popper(dom('span', { class: 'flex', listeners: { click: e => this.togglePrivate(e, item as LocalContent) }  }, [icon(item.private ? 'radix-icons:lock-closed' : 'radix-icons:lock-open-2', { class: ['mx-1', { 'opacity-50': !item.private }] })]), { delay: 150, offset: 8, placement: 'right', arrow: true, content: [text('Privé')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }),
+            ])]);
+        });
+
+        this.instruction = dom('div', { class: 'absolute h-full w-full top-0 right-0 border-light-50 dark:border-dark-50' });
+
+        this.cleanup = this.setupDnD();
+
+        this.container = dom('div', { class: 'flex flex-1 flex-col items-start justify-start max-h-full relative' }, [dom('div', { class: 'py-4 flex-1 w-full max-h-full flex overflow-auto xl:px-12 lg:px-8 px-6 relative' })]);
+    
+        this.select(this.tree.tree.find(useRouter().currentRoute.value.hash.substring(1)) as Recursive<LocalContent & { element?: HTMLElement }> | undefined);
+    }
+    private contextmenu(e: MouseEvent, item: Recursive<LocalContent>)
+    {
+        e.preventDefault();
+
+        const close = contextmenu(e.clientX, e.clientY, [
+            dom('div', { class: 'hover:bg-light-35 dark:hover:bg-dark-35 px-2 gap-2 flex py-1 items-center cursor-pointer text-light-100 dark:text-dark-100', listeners: { click: (e) => { this.add("markdown", item); close() }} }, [icon('radix-icons:plus'), text('Ajouter')]),
+            dom('div', { class: 'hover:bg-light-35 dark:hover:bg-dark-35 px-2 gap-2 flex py-1 items-center cursor-pointer text-light-100 dark:text-dark-100', listeners: { click: (e) => { this.rename(item); close() }} }, [icon('radix-icons:input'), text('Renommer')]),
+            dom('div', { class: 'hover:bg-light-35 dark:hover:bg-dark-35 px-2 gap-2 flex py-1 items-center cursor-pointer text-light-red dark:text-dark-red', listeners: { click: (e) => { close(); confirm(`Confirmer la suppression de ${item.title}${item.children ? ' et de ses enfants' : ''} ?`).then(e => { if(e) this.remove(item)}) }} }, [icon('radix-icons:trash'), text('Supprimer')]),
+        ], { placement: 'right-start', offset: 8 });
+    }
+    private add(type: FileType, nextTo: Recursive<LocalContent>)
+    {
+        const count = Object.values(Content.files).filter(e => e.title.match(/^Nouveau( \(\d+\))?$/)).length;
+        const item: Recursive<Omit<LocalContent, 'path' | 'content'> & { element?: HTMLElement }> = { id: getID(ID_SIZE), navigable: true, private: false, owner: 0, order: nextTo.order + 1, timestamp: new Date(), title: count === 0 ? 'Nouveau' : `Nouveau (${count})`, type: type, parent: nextTo.parent };
+        this.history.add('overview', 'add', [{ element: item, from: undefined, to: nextTo.order + 1 }]);
+    }
+    private remove(item: LocalContent & { element?: HTMLElement })
+    {
+        this.history.add('overview', 'remove', [{ element: item, from: item.order, to: undefined }], true);
+    }
+    private rename(item: LocalContent & { element?: HTMLElement })
+    {
+        let exists = true;
+        const change = () =>
+        {
+            const value = input.value || item.title;
+
+            if(exists)
+            {
+                exists = false;
+
+                input.parentElement?.replaceChild(text!, input);
+                input.remove();
+                if(value !== item.title) this.history.add('overview', 'rename', [{ element: item, from: item.title, to: value }], true);
+            }
+        }
+        const text = item.element!.children[0]?.children[1];
+        const input = dom('input', { attributes: { type: 'text', value: item.title }, class: 'bg-light-20 dark:bg-dark-20 outline outline-light-35 dark:outline-dark-35 outline-offset-0 pl-1.5 py-1.5 flex-1', listeners: { mousedown: cancelPropagation, click: cancelPropagation, blur: change, change: change } });
+
+        text?.parentElement?.replaceChild(input, text);
+        input.focus();
+    }
+    private toggleNavigable(e: Event, item: LocalContent & { element?: HTMLElement })
+    {
+        cancelPropagation(e);
+
+        this.history.add('overview', 'navigable', [{ element: item, from: item.navigable, to: !item.navigable }], true);
+    }
+    private togglePrivate(e: Event, item: LocalContent & { element?: HTMLElement })
+    {
+        cancelPropagation(e);
+
+        this.history.add('overview', 'private', [{ element: item, from: item.private, to: !item.private }], true);
+    }
+    private setupDnD(): CleanupFn
+    {
+        return combine(...this.tree.tree.accumulate(this.dragndrop.bind(this)), monitorForElements({
+            onDrop: ({ location }) => {
+                if (location.initial.dropTargets.length === 0)
+                    return;
+                if (location.current.dropTargets.length === 0)
+                    return;
+
+                const target = location.current.dropTargets[0];
+                const instruction = extractInstruction(target.data);
+
+                if (instruction !== null)
+                    this.updateTree(instruction, location.initial.dropTargets[0].data.id as string, target.data.id as string);
+            },
+        }), autoScrollForElements({
+            element: this.tree.container,
+        }));
+    }
+    private dragndrop(item: Omit<LocalContent & { element?: HTMLElement, cleanup?: () => void }, "content">, depth: number, parent?: Omit<LocalContent & { element?: HTMLElement }, "content">): CleanupFn
+    {
+        item.cleanup && item.cleanup();
+
+        let opened = false, draggedOpened = false;
+        const element = item.element!;
+        item.cleanup = combine(draggable({
+            element,
+            onDragStart: () => {
+                element.classList.toggle('opacity-50', true);
+                opened = this.tree.opened(item)!;
+                this.tree.toggle(item, false);
+            },
+            onDrop: () => {
+                element.classList.toggle('opacity-50', false);
+                this.tree.toggle(item, opened);
+            },
+            canDrag: ({ element }) => {
+                return !element.querySelector('input[type="text"]');
+            }
+        }),
+
+        dropTargetForElements({
+            element,
+            getData: ({ input }) => {
+                const data = { id: item.id };
+
+                return attachInstruction(data, {
+                    input,
+                    element,
+                    indentPerLevel: 16,
+                    currentLevel: depth,
+                    mode: !!(item as Recursive<typeof item>).children ? 'expanded' : parent ? ((parent as Recursive<typeof item>).children!.length === item.order + 1 ? 'last-in-group' : 'standard') : this.tree.tree.flatten.slice(-1)[0] === item ? 'last-in-group' : 'standard',
+                    block: [],
+                })
+            },
+            canDrop: ({ source }) => {
+                return source.data.id !== getPath(item);
+            },
+            onDrag: ({ self }) => {
+                const instruction = extractInstruction(self.data) as Instruction;
+
+                if(instruction)
+                {
+                    if('currentLevel' in instruction) this.instruction.style.width = `calc(100% - ${instruction.currentLevel / 2 - 1.5}em)`;
+
+                    this.instruction.classList.toggle('!border-b-4', instruction?.type === 'reorder-below');
+                    this.instruction.classList.toggle('!border-t-4', instruction?.type === 'reorder-above');
+                    this.instruction.classList.toggle('!border-4', instruction?.type === 'make-child' || instruction?.type === 'reparent');
+
+                    if(this.instruction.parentElement === null) element.appendChild(this.instruction);
+                }
+            },
+            onDragEnter: () => {
+                draggedOpened = this.tree.opened(item)!;
+                this.tree.toggle(item, true);
+            },
+            onDragLeave: () => {
+                this.tree.toggle(item, draggedOpened);
+                this.instruction.remove();
+            },
+            onDrop: () => {
+                this.tree.toggle(item, true);
+                this.instruction.remove();
+            },
+            getIsSticky: () => true,
+        }));
+
+        return item.cleanup;
+    }
+    private updateTree(instruction: Instruction, source: string, target: string)
+    {
+        const sourceItem = this.tree.tree.find(source);
+        const targetItem = this.tree.tree.find(target);
+
+        if(!sourceItem || !targetItem || instruction.type === 'instruction-blocked')
+            return;
+
+        const from = { parent: (sourceItem as Recursive<typeof targetItem>).parent, order: sourceItem.order };
+
+        if (source === target)
+            return;
+
+        if (instruction.type === 'reorder-above')
+            this.history.add('overview', 'move', [{ element: sourceItem, from: from, to: { parent: (targetItem as Recursive<typeof targetItem>).parent, order: targetItem!.order }}], true);
+
+        if (instruction.type === 'reorder-below')
+            this.history.add('overview', 'move', [{ element: sourceItem, from: from, to: { parent: (targetItem as Recursive<typeof targetItem>).parent, order: targetItem!.order + 1 }}], true);
+
+        if (instruction.type === 'make-child' && targetItem.type === 'folder')
+            this.history.add('overview', 'move', [{ element: sourceItem, from: from, to: { parent: targetItem, order: 0 }}], true);
+    }
+    private render<T extends FileType>(item: LocalContent<T>): Node
+    {
+        return handlers[item.type].renderEditor(item);
+    }
+    private select(item?: LocalContent & { element?: HTMLElement })
+    {
+        if(this.selected && item)
+        {
+            Content.save(this.selected);
+        }
+        if(this.selected === item)
+        {
+            item?.element!.classList.remove('text-accent-blue');
+            this.selected = undefined;
+        }
+        else
+        {
+            this.selected?.element!.classList.remove('text-accent-blue');
+            item?.element!.classList.add('text-accent-blue');
+            this.selected = item;
+        }
+
+        useRouter().push({ hash: this.selected ? '#' + this.selected.id : '' })
+
+        this.container.firstElementChild!.replaceChildren();
+        this.selected && this.container.firstElementChild!.appendChild(this.render(this.selected) as HTMLElement);
+    }
+    unmount()
+    {
+        this.cleanup();
+    }
+}
+
+export function getPath(item: Recursive<Omit<LocalContent, 'content'>>): string
+export function getPath(item: Omit<LocalContent, 'content'>): string
+export function getPath(item: any): string
+{
+    if(item.hasOwnProperty('parent') && item.parent !== undefined)
+        return [getPath(item.parent), parsePath(item.title)].filter(e => !!e).join('/');
+    else if(item.hasOwnProperty('parent'))
+        return parsePath(item.title);
+    else
+        return parsePath(item.title) ?? item.path;
+}

shared/dom.util.ts

@@ -0,0 +1,175 @@
+import { iconExists, loadIcon } from 'iconify-icon';
+
+export type Node = HTMLElement | SVGElement | Text | undefined;
+export type NodeChildren = Array<Node>;
+
+export type Class = string | Array<Class> | Record<string, boolean> | undefined;
+type Listener<K extends keyof HTMLElementEventMap> = | ((ev: HTMLElementEventMap[K]) => any) | {
+    options?: boolean | AddEventListenerOptions;
+    listener: (ev: HTMLElementEventMap[K]) => any;
+} | undefined;
+
+export interface NodeProperties
+{
+    attributes?: Record<string, string | undefined | boolean>;
+    text?: string;
+    class?: Class;
+    style?: Record<string, string | undefined | boolean | number> | string;
+    listeners?: { 
+        [K in keyof HTMLElementEventMap]?: Listener<K>
+    };
+}
+
+export const cancelPropagation = (e: Event) => e.stopImmediatePropagation();
+export function dom<K extends keyof HTMLElementTagNameMap>(tag: K, properties?: NodeProperties, children?: NodeChildren): HTMLElementTagNameMap[K]
+{
+    const element = document.createElement(tag);
+
+    if(children && children.length > 0)
+        for(const c of children) if(c !== undefined) element.appendChild(c);
+
+    if(properties?.attributes)
+        for(const [k, v] of Object.entries(properties.attributes))
+            if(typeof v === 'string') element.setAttribute(k, v);
+            else if(typeof v === 'boolean') element.toggleAttribute(k, v);
+
+    if(properties?.text)
+        element.textContent = properties.text;
+
+    if(properties?.listeners)
+    {
+        for(let [k, v] of Object.entries(properties.listeners)) 
+        {
+            const key = k as keyof HTMLElementEventMap, value = v as Listener<typeof key>;
+            if(typeof value === 'function') 
+                element.addEventListener(key, value);
+            else if(value)
+                element.addEventListener(key, value.listener, value.options);
+        }
+    }
+
+    styling(element, properties ?? {});
+
+    return element;
+}
+export function div(cls?: Class, children?: NodeChildren): HTMLDivElement
+{
+    return dom("div", { class: cls }, children);
+}
+export function svg<K extends keyof SVGElementTagNameMap>(tag: K, properties?: NodeProperties, children?: Omit<NodeChildren, 'HTMLElement' | 'Text'>): SVGElementTagNameMap[K]
+{
+    const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
+
+    if(children && children.length > 0)
+        for(const c of children) if(c !== undefined) element.appendChild(c);
+
+    if(properties?.attributes)
+        for(const [k, v] of Object.entries(properties.attributes))
+            if(typeof v === 'string') element.setAttribute(k, v);
+            else if(typeof v === 'boolean') element.toggleAttribute(k, v);
+
+    if(properties?.text)
+        element.textContent = properties.text;
+
+    styling(element, properties ?? {});
+
+    return element;
+}
+export function text(data: string): Text
+{
+    return document.createTextNode(data);
+}
+export function styling(element: SVGElement | HTMLElement, properties: { 
+    class?: Class;
+    style?: Record<string, string | undefined | boolean | number> | string; 
+}): SVGElement | HTMLElement
+{
+    if(properties?.class)
+    {
+        element.setAttribute('class', mergeClasses(properties.class));
+    }
+
+    if(properties?.style)
+    {
+        if(typeof properties.style === 'string')
+        {
+            element.setAttribute('style', properties.style);
+        }
+        else
+            for(const [k, v] of Object.entries(properties.style)) if(v !== undefined && v !== false) element.attributeStyleMap.set(k, v);
+    }
+
+    return element;
+}
+export interface IconProperties
+{
+    mode?: string;
+    inline?: boolean;
+    noobserver?: boolean;
+    width?: string|number;
+    height?: string|number;
+    flip?: string;
+    rotate?: number|string;
+    style?: Record<string, string | undefined> | string;
+    class?: Class;
+}
+const iconCache: Map<IconProperties & { name: string }, HTMLElement> = new Map();
+export function icon(name: string, properties?: IconProperties): HTMLElement
+{
+    const key = { ...properties, name };
+
+    if(iconCache.has(key))
+        return iconCache.get(key)!.cloneNode() as HTMLElement;
+
+    const el = document.createElement('iconify-icon');
+
+    if(!iconExists(name))
+        loadIcon(name);
+    
+    el.setAttribute('icon', name);
+
+    properties?.mode && el.setAttribute('mode', properties?.mode.toString());
+    properties?.inline && el.toggleAttribute('inline', properties?.inline);
+    properties?.noobserver && el.toggleAttribute('noobserver', properties?.noobserver);
+    properties?.width && el.setAttribute('width', properties?.width.toString());
+    properties?.height && el.setAttribute('height', properties?.height.toString());
+    properties?.flip && el.setAttribute('flip', properties?.flip.toString());
+    properties?.rotate && el.setAttribute('rotate', properties?.rotate.toString());
+
+    if(properties?.class)
+    {
+        el.setAttribute('class', mergeClasses(properties.class));
+    }
+    if(properties?.style)
+    {
+        if(typeof properties.style === 'string')
+        {
+            el.setAttribute('style', properties.style);
+        }
+        else
+            for(const [k, v] of Object.entries(properties.style)) if(v !== undefined) el.attributeStyleMap.set(k, v);
+    }
+
+    iconCache.set(key, el.cloneNode() as HTMLElement);
+    return el;
+}
+
+export function mergeClasses(classes: Class): string
+{
+    if(typeof classes === 'string')
+    {
+        return classes.trim();
+    }
+    else if(Array.isArray(classes))
+    {
+        return classes.map(e => mergeClasses(e)).join(' ');
+    }
+    else if(classes)
+    {
+        return Object.entries(classes).filter(e => e[1]).map(e => e[0].trim()).join(' ');
+    }
+    else
+    {
+        return '';
+    }
+}

shared/editor.util.ts

@@ -0,0 +1,251 @@
+import { crosshairCursor, Decoration, dropCursor, EditorView, keymap, ViewPlugin, ViewUpdate, type DecorationSet } from '@codemirror/view';
+import { Annotation, EditorState, SelectionRange, type Range } from '@codemirror/state';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { bracketMatching, 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';
+import { dom } from './dom.util';
+const External = Annotation.define<boolean>();
+const Hidden = Decoration.mark({ class: 'hidden' });
+const Bullet = Decoration.mark({ class: '*:hidden before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4' });
+const Blockquote = Decoration.line({ class: '*:hidden before:block !ps-4 relative before:absolute before:top-0 before:bottom-0 before:left-0 before:w-1 before:bg-none before:bg-light-30 dark:before:bg-dark-30' });
+
+const TagTag = tags.special(tags.content);
+
+const intersects = (a: {
+    from: number;
+    to: number;
+}, b: {
+    from: number;
+    to: number;
+}) => !(a.to < b.from || b.to < a.from);
+
+const highlight = HighlightStyle.define([
+    { tag: tags.heading1, class: 'text-5xl pt-4 pb-2 after:hidden' },
+    { tag: tags.heading2, class: 'text-4xl pt-4 pb-2 ps-1 leading-loose after:hidden' },
+    { tag: tags.heading3, class: 'text-2xl font-bold pt-1 after:hidden' },
+    { tag: tags.heading4, class: 'text-xl font-semibold pt-1 after:hidden variant-cap' },
+    { tag: tags.meta, color: "#404740" },
+    { tag: tags.link, textDecoration: "underline" },
+    { tag: tags.heading, textDecoration: "underline", fontWeight: "bold" },
+    { tag: tags.emphasis, fontStyle: "italic" },
+    { tag: tags.strong, fontWeight: "bold" },
+    { tag: tags.strikethrough, textDecoration: "line-through" },
+    { tag: tags.keyword, color: "#708" },
+    { tag: TagTag, class: 'cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30' }
+]);
+
+class Decorator
+{
+    static hiddenNodes: string[] = [
+        'HardBreak',
+        'LinkMark',
+        'EmphasisMark',
+        'CodeMark',
+        'CodeInfo',
+        'URL',
+    ]
+    decorations: DecorationSet;
+    constructor(view: EditorView)
+    {
+        this.decorations = Decoration.set(this.iterate(syntaxTree(view.state), view.visibleRanges, []), true);
+    }
+    update(update: ViewUpdate)
+    {
+        if(!update.docChanged && !update.viewportChanged && !update.selectionSet)
+            return;
+
+        this.decorations = this.decorations.update({
+            filter: (f, t, v) => false,
+            add: this.iterate(syntaxTree(update.state), update.view.visibleRanges, update.state.selection.ranges),
+            sort: true,
+        });
+    }
+    iterate(tree: Tree, visible: readonly {
+        from: number;
+        to: number;
+    }[], selection: readonly SelectionRange[]): Range<Decoration>[]
+    {
+        const decorations: Range<Decoration>[] = [];
+        
+        for (let { from, to } of visible) {
+            tree.iterate({
+                from, to, mode: IterMode.IgnoreMounts,
+                enter: node => {
+                    if(node.node.parent && selection.some(e => intersects(e, node.node.parent!)))
+                        return true;
+
+                    else if(node.name === 'HeaderMark')
+                        decorations.push(Hidden.range(node.from, node.to + 1));
+
+                    else if(Decorator.hiddenNodes.includes(node.name))
+                        decorations.push(Hidden.range(node.from, node.to));
+
+                    else if(node.matchContext(['BulletList', 'ListItem']) && node.name === 'ListMark')
+                        decorations.push(Bullet.range(node.from, node.to + 1));
+
+                    else if(node.matchContext(['Blockquote']))
+                        decorations.push(Blockquote.range(node.from, node.from));
+
+                    return true;
+                },
+            });
+        }
+
+        return decorations;
+    }
+}
+
+export class MarkdownEditor
+{
+    private static _singleton: MarkdownEditor;
+
+    private view: EditorView;
+    onChange?: (content: string) => void;
+    constructor()
+    {
+        this.view = new EditorView({
+            extensions: [
+                markdown({
+                    base: markdownLanguage,
+                    extensions: {
+                        defineNodes: [
+                            { name: "Tag", style: TagTag },
+                            { name: "TagMark", style: tags.processingInstruction }
+                        ],
+                        parseInline: [{
+                            name: "Tag",
+                            parse(cx, next, pos) {
+                                if (next != 35 || cx.char(pos + 1) == 35) return -1;
+                                let elts = [cx.elt("TagMark", pos, pos + 1)];
+                                for (let i = pos + 1; i < cx.end; i++) {
+                                    let next = cx.char(i);
+                                    if (next == 35)
+                                        return cx.addElement(cx.elt("Tag", pos, i + 1, elts.concat(cx.elt("TagMark", i, i + 1))));
+                                    if (next == 92)
+                                        elts.push(cx.elt("Escape", i, i++ + 2));
+                                    if (next == 32 || next == 9 || next == 10 || next == 13) break;
+                                }
+                                return -1
+                            }
+                        }],
+                    }
+                }),
+                history(),
+                search(),
+                dropCursor(),
+                EditorState.allowMultipleSelections.of(true),
+                indentOnInput(),
+                syntaxHighlighting(highlight),
+                bracketMatching(),
+                closeBrackets(),
+                crosshairCursor(),
+                EditorView.lineWrapping,
+                keymap.of([
+                    ...closeBracketsKeymap,
+                    ...defaultKeymap,
+                    ...searchKeymap,
+                    ...historyKeymap,
+                    ...foldKeymap,
+                    ...completionKeymap,
+                    ...lintKeymap
+                ]),
+                EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
+                    if (viewUpdate.docChanged && !viewUpdate.transactions.some(tr => tr.annotation(External)))
+                        this.onChange && this.onChange(viewUpdate.state.doc.toString());
+                }),
+                EditorView.contentAttributes.of({spellcheck: "true"}),
+                ViewPlugin.fromClass(Decorator, {
+                    decorations: e => e.decorations,
+                })
+            ]
+        });
+    }
+    focus()
+    {
+        this.view.focus();
+    }
+
+    set content(value: string)
+    {
+        if (value === undefined)
+            return;
+        
+        const currentValue = this.view ? this.view.state.doc.toString() : "";
+        if (this.view && value !== currentValue)
+        {
+            this.view.dispatch({
+                changes: { from: 0, to: currentValue.length, insert: value || "" },
+                annotations: [External.of(true)],
+            });
+        }
+    }
+    get content(): string
+    {
+        return this.view.state.doc.toString();
+    }
+
+    get dom()
+    {
+        return this.view.dom;
+    }
+
+    static get singleton(): MarkdownEditor
+    {
+        if(!MarkdownEditor._singleton)
+            MarkdownEditor._singleton = new MarkdownEditor();
+        return MarkdownEditor._singleton;
+    }
+}
+
+export class FramedEditor
+{
+    editor: MarkdownEditor;
+    dom: HTMLIFrameElement;
+
+    private static _singleton: FramedEditor;
+    static get singleton()
+    {
+        if(!FramedEditor._singleton)
+            FramedEditor._singleton = new FramedEditor();
+
+        return FramedEditor._singleton;
+    }
+    private constructor()
+    {
+        this.editor = MarkdownEditor.singleton;
+        this.dom = dom('iframe');
+        this.dom.addEventListener('load', () => {
+            if(!this.dom.contentDocument)
+                return;
+
+            this.dom.contentDocument.documentElement.setAttribute('class', document.documentElement.getAttribute('class') ?? '');
+            this.dom.contentDocument.documentElement.setAttribute('style', document.documentElement.getAttribute('style') ?? '');
+
+            const base = this.dom.contentDocument.head.appendChild(this.dom.contentDocument.createElement('base'));
+            base.setAttribute('href', window.location.href);
+
+            for(let element of document.getElementsByTagName('link'))
+            {
+                if(element.getAttribute('rel') === 'stylesheet')
+                    this.dom.contentDocument.head.appendChild(element.cloneNode(true));
+            }
+
+            for(let element of document.getElementsByTagName('style'))
+            {
+                this.dom.contentDocument.head.appendChild(element.cloneNode(true));
+            }
+
+            this.dom.contentDocument.body.setAttribute('class', document.body.getAttribute('class') ?? '');
+            this.dom.contentDocument.body.setAttribute('style', document.body.getAttribute('style') ?? '');
+
+            this.dom.contentDocument.body.appendChild(this.editor.dom);
+
+            this.editor.focus();
+        })
+    }
+}

shared/floating.util.ts

@@ -0,0 +1,271 @@
+import * as FloatingUI from "@floating-ui/dom";
+import { cancelPropagation, dom, svg, text, type Class, type NodeChildren } from "./dom.util";
+import { button } from "./proses";
+
+export interface ContextProperties
+{
+    placement?: FloatingUI.Placement;
+    offset?: number;
+    arrow?: boolean;
+    class?: Class;
+}
+export interface PopperProperties extends ContextProperties
+{
+    content?: NodeChildren;
+    delay?: number;
+    viewport?: HTMLElement;
+
+    onShow?: (element: HTMLDivElement) => boolean | void;
+    onHide?: (element: HTMLDivElement) => boolean | void;
+}
+
+export interface ModalProperties
+{
+    priority?: boolean;
+    closeWhenOutside?: boolean;
+}
+
+let teleport: HTMLDivElement;
+export function init()
+{
+    teleport = dom('div', { attributes: { id: 'popper-container' }, class: 'absolute top-0 left-0' });
+    document.body.appendChild(teleport);
+}
+
+export function popper(container: HTMLElement, properties?: PopperProperties): HTMLElement
+{
+    let shown = false, timeout: Timer;
+    const arrow = svg('svg', { class: 'absolute fill-light-35 dark:fill-dark-35', attributes: { width: "10", height: "7", viewBox: "0 0 30 10" } }, [svg('polygon', { attributes: { points: "0,0 30,0 15,10" } })]);
+    const content = dom('div', { class: ['fixed hidden', properties?.class], attributes: { 'data-state': 'closed' } }, [...(properties?.content ?? []), arrow]);
+    const rect = properties?.viewport?.getBoundingClientRect() ?? 'viewport';
+
+    function update()
+    {
+        FloatingUI.computePosition(container, content, {
+            placement: properties?.placement,
+            strategy: 'fixed',
+            middleware: [
+                properties?.offset ? FloatingUI.offset(properties?.offset) : undefined,
+                FloatingUI.autoPlacement({ rootBoundary: rect }),
+                properties?.offset ? FloatingUI.shift({ padding: properties?.offset, rootBoundary: rect }) : undefined,
+                properties?.offset && properties?.arrow ? FloatingUI.arrow({ element: arrow, padding: 8 }) : undefined,
+                FloatingUI.hide({ rootBoundary: rect }),
+            ]
+        }).then(({ x, y, placement, middlewareData }) => {
+            Object.assign(content.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            
+            const side = placement.split('-')[0] as FloatingUI.Side;
+            
+            content.setAttribute('data-side', side);
+            
+            if(properties?.offset && properties?.arrow)
+            {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow!;
+        
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                  }[side]!;
+
+                  const rotation = {
+                    top: "0",
+                    bottom: "180",
+                    left: "270",
+                    right: "90"
+                  }[side]!;
+                 
+                  Object.assign(arrow.style, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    right: '',
+                    bottom: '',
+                    [staticSide]: `-6px`,
+                    transform: `rotate(${rotation}deg)`,
+                  });
+            }
+        });
+    }
+
+    let stop: () => void | undefined;
+    function show()
+    {
+        if(shown || !properties?.onShow || properties?.onShow(content) !== false)
+        {
+            clearTimeout(timeout);
+    
+            timeout = setTimeout(() => {
+                if(!shown)
+                {
+                    teleport!.appendChild(content);
+                    
+                    content.setAttribute('data-state', 'open');
+                    content.classList.toggle('hidden', false);
+
+                    update();
+                    stop = FloatingUI.autoUpdate(container, content, update, {
+                        animationFrame: true,
+                        layoutShift: false,
+                        elementResize: false,
+                        ancestorScroll: false,
+                        ancestorResize: false,
+                    });
+                }
+                shown = true;
+            }, properties?.delay ?? 0);
+        }
+    }
+    
+    function hide()
+    {
+        if(!properties?.onHide || properties?.onHide(content) !== false)
+        {
+            clearTimeout(timeout);
+
+            timeout = setTimeout(() => {
+                content.remove();
+                stop && stop();
+
+                shown = false;
+            }, shown ? properties?.delay ?? 0 : 0);
+        }
+    }
+    
+    function link(element: HTMLElement) {
+        Object.entries({
+            'mouseenter': show,
+            'mouseleave': hide,
+            'focus': show,
+            'blur': hide,
+        } as Record<keyof HTMLElementEventMap, () => void>).forEach(([event, listener]) => {
+            element.addEventListener(event, listener);
+        });
+    }
+
+    link(container);
+    link(content);
+
+    return container;
+}
+export function contextmenu(x: number, y: number, content: NodeChildren, properties?: ContextProperties): () => void
+{
+    const virtual = {
+        getBoundingClientRect() {
+            return {
+                x: x,
+                y: y,
+                top: y,
+                left: x,
+                bottom: y,
+                right: x,
+                width: 0,
+                height: 0,
+            };
+        },
+    };
+
+    const arrow = svg('svg', { class: 'absolute fill-light-35 dark:fill-dark-35', attributes: { width: "10", height: "7", viewBox: "0 0 30 10" } }, [svg('polygon', { attributes: { points: "0,0 30,0 15,10" } })]);
+    const container = dom('div', { class: ['fixed bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 z-50', properties?.class] }, content);
+
+    function update()
+    {
+        FloatingUI.computePosition(virtual, container, {
+            placement: properties?.placement,
+            strategy: 'fixed',
+            middleware: [
+                properties?.offset ? FloatingUI.offset(properties?.offset) : undefined,
+                FloatingUI.flip(),
+                properties?.offset ? FloatingUI.shift({ padding: properties?.offset }) : undefined,
+                properties?.offset && properties?.arrow ? FloatingUI.arrow({ element: arrow, padding: 8 }) : undefined,
+            ]
+        }).then(({ x, y, placement, middlewareData }) => {
+            Object.assign(container.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+
+            const side = placement.split('-')[0] as FloatingUI.Side;
+            
+            container.setAttribute('data-side', side);
+            
+            if(properties?.offset && properties?.arrow)
+            {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow!;
+        
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                  }[side]!;
+
+                  const rotation = {
+                    top: "0",
+                    bottom: "180",
+                    left: "270",
+                    right: "90"
+                  }[side]!;
+                 
+                  Object.assign(arrow.style, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    right: '',
+                    bottom: '',
+                    [staticSide]: `-6px`,
+                    transform: `rotate(${rotation}deg)`,
+                  });
+            }
+        });
+    }
+    update();
+
+    document.addEventListener('mousedown', close);
+    container.addEventListener('mousedown', cancelPropagation);
+
+    const stop = FloatingUI.autoUpdate(virtual, container, update, {
+        animationFrame: true,
+        layoutShift: false,
+        elementResize: false,
+        ancestorScroll: false,
+        ancestorResize: false,
+    });
+    teleport!.appendChild(container);
+
+    function close()
+    {
+        document.removeEventListener('mousedown', close);
+        container.removeEventListener('mousedown', cancelPropagation);
+
+        container.remove();
+        stop();
+    }
+
+    return close;
+}
+
+export function modal(content: NodeChildren, properties?: ModalProperties)
+{
+    const _modalBlocker = dom('div', { class: [' absolute top-0 left-0 bottom-0 right-0 z-0', { 'bg-light-0 dark:bg-dark-0 opacity-70': properties?.priority ?? false }], listeners: { click: properties?.closeWhenOutside ? (() => _modal.remove()) : undefined } });
+    const _closer = properties?.priority ? undefined : dom('span', { class: 'absolute top-4 right-4', text: '×', listeners: { click: () => _modal.remove() } });
+    const _modal = dom('div', { class: 'fixed flex justify-center items-center top-0 left-0 bottom-0 right-0 inset-0 z-40' }, [ _modalBlocker, dom('div', { class: 'max-h-[85vh] max-w-[450px] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 text-light-100 dark:text-dark-100 z-10 relative' }, content)])
+
+    teleport.appendChild(_modal);
+
+    return {
+        close: () => _modal.remove(),
+    }
+}
+
+export function confirm(title: string): Promise<boolean>
+{
+    return new Promise(res => {
+        const mod = modal([ dom('div', { class: 'flex flex-col justify-start gap-4' }, [ dom('div', { class: 'text-xl' }, [ text(title) ]), dom('div', { class: 'flex flex-row gap-2' }, [ button(text("Non"), () => (mod.close(), res(false)), 'h-[35px] px-[15px]'), button(text("Oui"), () => (mod.close(), res(true)), 'h-[35px] px-[15px] !border-light-red dark:!border-dark-red text-light:red dark:text-dark-red') ]) ]) ], {
+            priority: true,
+            closeWhenOutside: false,
+        });
+    })
+}

shared/general.util.ts

@@ -1,17 +1,15 @@
-import type { CanvasContent } from '~/types/canvas';
-import type { ContentMap, FileType } from '~/types/content';
+export const ID_SIZE = 32;
 
-export const DEFAULT_CONTENT: Record<FileType, ContentMap[FileType]['content']> = {
-    map: {},
-    canvas: { nodes: [], edges: []},
-    markdown: '',
-    file: '',
-    folder: null,
-}
 export function unifySlug(slug: string | string[]): string
 {
     return (Array.isArray(slug) ? slug.join('/') : slug);
 }
+export function getID(length: number)
+{
+    for (var id = [], i = 0; i < length; i++)
+        id.push((16 * Math.random() | 0).toString(16));
+    return id.join("");
+}
 export function group<
   T,
   K extends keyof T,
@@ -29,12 +27,12 @@ export function group<
 }
 export function parsePath(path: string): string
 {
-    return path.toLowerCase().trim().replaceAll(" ", "-").normalize("NFD").replaceAll(/[\u0300-\u036f]/g, "").replaceAll('(', '').replaceAll(')', '');
+    return path.replace(/(\d+?)\. ?/g, '').toLowerCase().replaceAll(" ", "-").normalize("NFD").replaceAll(/[\u0300-\u036f]/g, "").replaceAll('(', '').replaceAll(')', '').replace(/\-+/g, '-');
 }
 export function parseId(id: string | undefined): string | undefined
 {
     return id;
-    return id?.normalize('NFD')?.replace(/[\u0300-\u036f]/g, '')?.replace(/^\d\. */g, '')?.replace(/\s/g, "-")?.replace(/%/g, "-percent")?.replace(/\?/g, "-q")?.toLowerCase();
+    //return id?.normalize('NFD')?.replace(/[\u0300-\u036f]/g, '')?.replace(/^\d\. */g, '')?.replace(/\s/g, "-")?.replace(/%/g, "-percent")?.replace(/\?/g, "-q")?.toLowerCase();
 }
 export function padLeft(text: string, pad: string, length: number): string
 {
@@ -71,39 +69,3 @@ export function lerp(x: number, a: number, b: number): number
 {
     return (1-x)*a+x*b;
 }
-export function convertContentFromText(type: FileType, content: string): CanvasContent | string {
-    switch(type)
-    {
-        case 'canvas':
-            return JSON.parse(content) as CanvasContent;
-        case 'map':
-        case 'file':
-        case 'folder':
-        case 'markdown':
-            return content;
-        default:
-            return content;
-    }
-}
-export function convertContentToText(type: FileType, content: any): string {
-    switch(type)
-    {
-        case 'canvas':
-            return JSON.stringify(content);
-        case 'map':
-        case 'file':
-        case 'folder':
-        case 'markdown':
-            return content;
-        default:
-            return content;
-    }
-}
-
-export const iconByType: Record<FileType, string> = {
-    'folder': 'lucide:folder',
-    'canvas': 'ph:graph-light',
-    'file': 'radix-icons:file',
-    'markdown': 'radix-icons:file-text',
-    'map': 'lucide:map',
-}

shared/history.util.ts

@@ -0,0 +1,94 @@
+export type HistoryHandler = {
+    undo: (action: HistoryAction) => void;
+    redo: (action: HistoryAction) => void;
+}
+
+interface HistoryEvent
+{
+    source: string;
+    event: string;
+    actions: HistoryAction[];
+}
+interface HistoryAction
+{
+    element: any;
+    from?: any;
+    to?: any;
+}
+
+export class History
+{
+    private handlers: Record<string, { handlers: Record<string, HistoryHandler>, any?: (action: HistoryAction) => any }>;
+    private history: HistoryEvent[];
+    private position: number;
+
+    constructor()
+    {
+        this.handlers = {};
+        this.history = [];
+        this.position = -1;
+    }
+    get last()
+    {
+        return this.history.length > 0 && this.position > -1 ? this.history[this.position] : undefined;
+    }
+    get undoable()
+    {
+        return this.history && this.position !== -1;
+    }
+    get redoable()
+    {
+        return this.history && this.position < this.history.length - 1;
+    }
+    undo()
+    {
+        const last = this.last;
+        if(!last)
+            return;
+
+        last.actions.forEach(e => {
+            this.handlers[last.source] && this.handlers[last.source].handlers[last.event]?.undo(e)
+            this.handlers[last.source] && this.handlers[last.source].any && this.handlers[last.source].any!(e);
+        });
+        
+        this.position--;
+    }
+    redo()
+    {
+        if(!this.history || this.history.length - 1 <= this.position)
+            return;
+
+        this.position++;
+
+        const last = this.last;
+        if(!last)
+        {
+            this.position--;
+            return;
+        }
+
+        last.actions.forEach(e => {
+            this.handlers[last.source] && this.handlers[last.source].handlers[last.event]?.redo(e)
+            this.handlers[last.source] && this.handlers[last.source].any && this.handlers[last.source].any!(e);
+        });
+    }
+    add(source: string, event: string, actions: HistoryAction[], apply: boolean = false)
+    {
+        this.position++;
+        this.history.splice(this.position, history.length - this.position, { source, event, actions });
+
+        if(apply)
+            actions.forEach(e => {
+                this.handlers[source] && this.handlers[source].handlers[event]?.redo(e);
+                this.handlers[source] && this.handlers[source].any && this.handlers[source].any(e);
+            });
+    }
+    register(source: string, handlers: Record<string, HistoryHandler>, any?: (action: HistoryAction) => any)
+    {
+        this.handlers[source] = { handlers, any };
+    }
+    unregister(source: string)
+    {
+        delete this.handlers[source];
+    }
+}

shared/hypermd.extend.ts

@@ -1,670 +0,0 @@
-import { defineMode, type Mode, getMode, StringStream, startState } from "codemirror";
-import type { MarkdownState } from "hypermd/mode/hypermd";
-
-const EN = /^(?:[*\-+]|^[0-9]+([.)]))\s+/, SN = /^(?:(?:(?:aaas?|about|acap|adiumxtra|af[ps]|aim|apt|attachment|aw|beshare|bitcoin|bolo|callto|cap|chrome(?:-extension)?|cid|coap|com-eventbrite-attendee|content|crid|cvs|data|dav|dict|dlna-(?:playcontainer|playsingle)|dns|doi|dtn|dvb|ed2k|facetime|feed|file|finger|fish|ftp|geo|gg|git|gizmoproject|go|gopher|gtalk|h323|hcp|https?|iax|icap|icon|im|imap|info|ipn|ipp|irc[6s]?|iris(?:\.beep|\.lwz|\.xpc|\.xpcs)?|itms|jar|javascript|jms|keyparc|lastfm|ldaps?|magnet|mailto|maps|market|message|mid|mms|ms-help|msnim|msrps?|mtqp|mumble|mupdate|mvn|news|nfs|nih?|nntp|notes|oid|opaquelocktoken|palm|paparazzi|platform|pop|pres|proxy|psyc|query|res(?:ource)?|rmi|rsync|rtmp|rtsp|secondlife|service|session|sftp|sgn|shttp|sieve|sips?|skype|sm[bs]|snmp|soap\.beeps?|soldat|spotify|ssh|steam|svn|tag|teamspeak|tel(?:net)?|tftp|things|thismessage|tip|tn3270|tv|udp|unreal|urn|ut2004|vemmi|ventrilo|view-source|webcal|wss?|wtai|wyciwyg|xcon(?:-userid)?|xfire|xmlrpc\.beeps?|xmpp|xri|ymsgr|z39\.50[rs]?):(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]|\([^\s()<>]*\))+(?:\([^\s()<>]*\)|[^\s`*!()\[\]{};:'".,<>?«»“”‘’]))/i, xN = /^(?:(?:[^<>()[\]\\.,;:\s@\"`]+(?:\.[^<>()[\]\\.,;:\s@\"]+)*)|(?:\".+\"))@(?:(?:\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(?:(?:[a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))\b/, TN = /^(?:[^\u2000-\u206F\u2E00-\u2E7F'!"#$%&()*+,.:;<=>?@^`{|}~\[\]\\\s])+/;
-const PN = /^\s*[^\|].*?\|.*[^|]\s*$/, IN = /^\s*[^\|].*\|/, FN = /^\|(?:[^|]+\|)+?\s*$/, ON = /^\|/, BN = /^\s*-+\s*:\s*$/, NN = /^\s*:\s*-+\s*$/, RN = /^\s*:\s*-+\s*:\s*$/, HN = /^\s*-+\s*$/;
-const readSideRegex = /(?:([\u200F\p{sc=Arabic}\p{sc=Hebrew}\p{sc=Syriac}\p{sc=Thaana}])|([\u200E\p{sc=Armenian}\p{sc=Bengali}\p{sc=Bopomofo}\p{sc=Braille}\p{sc=Buhid}\p{sc=Canadian_Aboriginal}\p{sc=Cherokee}\p{sc=Cyrillic}\p{sc=Devanagari}\p{sc=Ethiopic}\p{sc=Georgian}\p{sc=Greek}\p{sc=Gujarati}\p{sc=Gurmukhi}\p{sc=Han}\p{sc=Hangul}\p{sc=Hanunoo}\p{sc=Hiragana}\p{sc=Kannada}\p{sc=Katakana}\p{sc=Khmer}\p{sc=Lao}\p{sc=Latin}\p{sc=Limbu}\p{sc=Malayalam}\p{sc=Mongolian}\p{sc=Myanmar}\p{sc=Ogham}\p{sc=Oriya}\p{sc=Runic}\p{sc=Sinhala}\p{sc=Tagalog}\p{sc=Tagbanwa}\p{sc=Tamil}\p{sc=Telugu}\p{sc=Thai}\p{sc=Tibetan}\p{sc=Yi}]))/u;
-const readSide = function(e: string) {
-    var t = e.match(readSideRegex);
-    if (t) {
-        if (t[1])
-            return "rtl";
-        if (t[2])
-            return "ltr"
-    }
-    return "auto"
-}
-const isLetter = (e: string) => /[a-z]/i.test(e);
-const clearSubstringWords = (str: string, substring: string) => str.replace(new RegExp("\\s?[^\\s]*".concat(substring, "[^\\s]*","g")), "");
-const enum HashtagType {
-    NONE = 0,
-    NORMAL = 1,
-    WITH_SPACE = 2
-}
-const enum TableType {
-    NONE = 0,
-    SIMPLE = 1,
-    NORMAL = 2
-}
-const enum NextMaybe {
-    NONE = 0,
-    FRONT_MATTER = 1,
-    FRONT_MATTER_END = 2
-}
-const enum LinkType {
-    NONE = 0,
-    BARELINK = 1,
-    FOOTREF = 2,
-    NORMAL = 3,
-    FOOTNOTE = 4,
-    MAYBE_FOOTNOTE_URL = 5,
-    MAYBE_FOOTNOTE_URL_TITLE = 6,
-    BARELINK2 = 7,
-    FOOTREF2 = 8,
-    INTERNAL_LINK = 9,
-    EMBED = 10,
-}
-const CLASSES: Record<number, string> = {
-    1: "hmd-barelink",
-    7: "hmd-barelink2",
-    2: "hmd-barelink footref",
-    4: "hmd-barelink hmd-footnote line-HyperMD-footnote",
-    8: "hmd-footref2",
-    9: "hmd-internal-link",
-    10: "hmd-internal-link hmd-embed",
-}
-
-export declare type TokenFunc = (stream: CodeMirror.StringStream, state: HyperMDState) => string;
-export declare type InnerModeExitChecker = (stream: CodeMirror.StringStream, state: HyperMDState) => {
-    endPos?: number;
-    skipInnerMode?: boolean;
-    style?: string;
-} | null;
-interface HyperMDState extends MarkdownState {
-    hmdTableRTL: boolean;
-    highlight: boolean;
-    hasAlias: boolean;
-    isAlias: boolean;
-    comment: boolean;
-    mathed: boolean;
-    internalEmbed: any;
-    internalLink: any;
-    inFootnote: boolean;
-    inlineFootnote: boolean;
-    wasHeading: boolean;
-    isHeading: boolean;
-    hmdTable: TableType;
-    hmdTableID: string | null;
-    hmdTableColumns: string[];
-    hmdTableCol: number;
-    hmdTableRow: number;
-    hmdOverride: TokenFunc | null;
-    hmdHashtag: HashtagType | boolean;
-    hmdInnerStyle: string;
-    hmdInnerExitChecker: InnerModeExitChecker | null;
-    hmdInnerMode: CodeMirror.Mode<any> | null;
-    hmdInnerState: any;
-    hmdLinkType: LinkType;
-    hmdNextMaybe: NextMaybe;
-    hmdNextState: HyperMDState | null;
-    hmdNextStyle: string | null;
-    hmdNextPos: number | null;
-}
-
-function resetTable(state: HyperMDState)
-{
-    state.hmdTable = TableType.NONE,
-    state.hmdTableRTL = !1,
-    state.hmdTableColumns = [],
-    state.hmdTableID = null,
-    state.hmdTableCol = state.hmdTableRow = 0
-}
-defineMode('d-any', function(cm, config) {
-    const markdownMode: Mode<MarkdownState> = getMode(cm, { ...config, name: 'markdown' }) as any;
-    const mode: Mode<HyperMDState> = getMode(cm, { ...config, name: 'hypermd' }) as any;
-
-    config = Object.assign({}, {
-        front_matter: !0,
-        math: !0,
-        table: !0,
-        toc: !0,
-        orgModeMarkup: !0,
-        hashtag: !0,
-        fencedCodeBlockHighlighting: !0,
-        highlightFormatting: !0,
-        taskLists: !0,
-        strikethrough: !0,
-        emoji: !1,
-        highlight: !0,
-        headers: !0,
-        blockquotes: !0,
-        indentedCode: !0,
-        lists: !0,
-        hr: !0,
-        blockId: !0
-    }, config)
-
-    function modeOverride(stream: CodeMirror.StringStream, state: HyperMDState): string {
-        const exit = state.hmdInnerExitChecker!(stream, state);
-        const extraStyle = state.hmdInnerStyle;
-
-        let ans = (!exit || !exit.skipInnerMode) && state.hmdInnerMode!.token(stream, state.hmdInnerState) || "";
-
-        if (extraStyle) ans += " " + extraStyle;
-        if (exit) {
-            if (exit.style) ans += " " + exit.style;
-            if (exit.endPos) stream.pos = exit.endPos;
-
-            state.hmdInnerExitChecker = null;
-            state.hmdInnerMode = null;
-            state.hmdInnerState = null;
-            state.hmdOverride = null;
-        }
-
-        return ans.trim();
-    }
-
-    function advanceMarkdown(stream: CodeMirror.StringStream, state: HyperMDState) {
-        if (stream.eol() || state.hmdNextState) return false;
-
-        let oldStart = stream.start;
-        let oldPos = stream.pos;
-
-        stream.start = oldPos;
-        let newState = { ...state };
-        let newStyle = mode.token(stream, newState);
-
-        state.hmdNextPos = stream.pos;
-        state.hmdNextState = newState;
-        state.hmdNextStyle = newStyle;
-
-        stream.start = oldStart;
-        stream.pos = oldPos;
-
-        return true;
-    }
-
-    function createDummyMode(endTag: string): CodeMirror.Mode<void> {
-        return {
-            token(stream) {
-                let endTagSince = stream.string.indexOf(endTag, stream.start);
-                if (endTagSince === -1) stream.skipToEnd(); // endTag not in this line
-                else if (endTagSince === 0) stream.pos += endTag.length; // current token is endTag
-                else {
-                    stream.pos = endTagSince;
-                    if (stream.string.charAt(endTagSince - 1) === "\\") stream.pos++;
-                }
-
-                return null;
-            }
-        }
-    }
-
-    function createSimpleInnerModeExitChecker(endTag: string, retInfo?: ReturnType<InnerModeExitChecker>): InnerModeExitChecker {
-        if (!retInfo) retInfo = {};
-
-        return function (stream, state) {
-            if (stream.string.substring(stream.start, stream.start + endTag.length) === endTag) {
-                retInfo.endPos = stream.start + endTag.length;
-                return retInfo;
-            }
-            return null;
-        }
-    }
-
-    interface BasicInnerModeOptions {
-        skipFirstToken?: boolean
-        style?: string
-    }
-
-    interface InnerModeOptions1 extends BasicInnerModeOptions {
-        fallbackMode: () => CodeMirror.Mode<any>
-        exitChecker: InnerModeExitChecker
-    }
-
-    interface InnerModeOptions2 extends BasicInnerModeOptions {
-        endTag: string
-    }
-
-    type InnerModeOptions = InnerModeOptions1 | InnerModeOptions2
-
-    /**
-     * switch to another mode
-     *
-     * After entering a mode, you can then set `hmdInnerExitStyle` and `hmdInnerState` of `state`
-     *
-     * @returns if `skipFirstToken` not set, returns `innerMode.token(stream, innerState)`, meanwhile, stream advances
-     */
-    function enterMode(stream: StringStream, state: HyperMDState, mode: string | CodeMirror.Mode<any> | null, opt: InnerModeOptions): string {
-        if (typeof mode === "string") mode = getMode(cm, mode);
-
-        if (!mode || mode["name"] === "null") {
-            if ('endTag' in opt) mode = createDummyMode(opt.endTag);
-            else if(typeof opt.fallbackMode === 'function') mode = opt.fallbackMode();
-
-            if (!mode) throw new Error("no mode");
-        }
-
-        state.hmdInnerExitChecker = ('endTag' in opt) ? createSimpleInnerModeExitChecker(opt.endTag) : opt.exitChecker;
-        state.hmdInnerStyle = opt.style ?? '';
-        state.hmdInnerMode = mode;
-        state.hmdOverride = modeOverride;
-        state.hmdInnerState = startState(mode);
-
-        let ans = opt.style || "";
-        if (!opt.skipFirstToken)
-            ans += " " + mode.token(stream, state.hmdInnerState);
-
-        return ans.trim();
-    }
-
-    const i: Record<string, any> = {
-        htmlBlock: null,
-        block: null
-    };
-
-    return {
-        name: 'd-any',
-        ...mode,
-        token(stream, _state) {
-            const state = _state as HyperMDState;
-            stream.tabSize = 4;
-            if (state.hmdOverride)
-                return state.hmdOverride(stream, state);
-
-            if (state.hmdTable && " " === stream.peek())
-            {
-                if ("|" === stream.string[stream.pos - 1] && "\\" !== stream.string[stream.pos - 2])
-                    return stream.match(/^ +/), "";
-                if (stream.match(/^ +\|/))
-                    return stream.backUp(1), "";
-            }
-            if (state.hmdNextMaybe === NextMaybe.FRONT_MATTER)
-            {
-                if ("---" === stream.string)
-                    return state.hmdNextMaybe = NextMaybe.FRONT_MATTER_END, enterMode(stream, state, "yaml", {
-                        style: "hmd-frontmatter",
-                        fallbackMode: function() {
-                            return createDummyMode("---");
-                        },
-                        exitChecker: function(e, stream) {
-                            return e.string.startsWith("---") && "" === e.string.substring(3).trim() ? (stream.hmdNextMaybe = NextMaybe.NONE,
-                            {
-                                endPos: e.string.length
-                            }) : null;
-                        }
-                    });
-                state.hmdNextMaybe = NextMaybe.NONE;
-            }
-            let a = state.f === i.htmlBlock, c = -1 === state.code, u = state.quote, h = 0 === stream.start;
-            h && (state.inFootnote && state.hmdLinkType === LinkType.MAYBE_FOOTNOTE_URL || (state.hmdLinkType = LinkType.NONE),
-            state.inlineFootnote = !1,
-            state.wasHeading = state.isHeading,
-            state.isHeading = !1,
-            !state.code || 1 !== state.code && 2 !== state.code || (state.code = 0));
-            let d, p, f = state.linkText, m = state.linkHref, v = !(c || a), g = v && !(state.code || state.indentedCode || state.linkHref), y = "", b = !1, w = -1, k = !1;
-            if (v)
-            {
-                if (g && "\\" === stream.peek() && (k = !0), state.list && !state.header && "#" === stream.peek() && /^\s*[*\-+]\s$/.test(stream.string.substring(0, stream.pos)))
-                {
-                    const C = stream.match(/^(#+)(?: |$)/, !0);
-                    if (C)
-                    {
-                        const M = C[1].length;
-                        return state.header = M, "formatting formatting-header formatting-header-" + M + " header header-" + M;
-                    }
-                }
-                if (config.math && g && "$" === stream.peek() && (state.hmdLinkType === LinkType.NONE || state.hmdLinkType === LinkType.MAYBE_FOOTNOTE_URL) && !state.internalLink && !state.internalEmbed)
-                {
-                    let E: string[] | null = stream.match(/^(\$)[^\s$]/, !1), S = stream.match(/^(\${2})/, !1), x = E ? "$" : "$$";
-                    if (E)
-                    {
-                        let I = stream.string.slice(stream.pos + 1).match(/[^\\]\$(.|$)/)
-                        if(!I || !I[0].match(/^[^\s\\]\$([^0-9]|$)/))
-                            E = null;
-                    }
-                    let T = !1;
-                    if (E || S)
-                    {
-                        if (0 !== stream.pos || state.mathed)
-                        {
-                            let D = "math";
-                            state.quote && (D += " line-HyperMD-quote line-HyperMD-quote-" + state.quote + " line-HyperMD-quote-lazy");
-                            const A = getMode(cm, {
-                                name: "stex"
-                            }), L = "stex" !== A.name;
-                            return y += enterMode(stream, state, A, {
-                                style: D,
-                                skipFirstToken: L,
-                                fallbackMode: function() {
-                                    return createDummyMode(x);
-                                },
-                                exitChecker: function(e, stream) {
-                                    let n = e.start, i = e.string, r = "formatting formatting-math formatting-math-end math-";
-                                    return stream.hmdTable && "|" === i[n] ? {
-                                        endPos: n,
-                                        style: r
-                                    } : i.substring(n, n + x.length) === x ? {
-                                        endPos: n + x.length,
-                                        style: r
-                                    } : null;
-                                }
-                            }),
-                            E ? (L && (stream.pos += E[1].length),
-                            y += " formatting formatting-math formatting-math-begin") : (L && (stream.pos += S[1].length),
-                            y += " formatting formatting-math formatting-math-begin math-block")
-                        }
-                        T = !0, w = 0;
-                    }
-                    state.mathed = T;
-                }
-                if (g) {
-                    state.internalLink ? (state.hmdLinkType = LinkType.INTERNAL_LINK,
-                    state.internalLink = !1) : state.internalEmbed && (state.hmdLinkType = LinkType.EMBED,
-                    state.internalEmbed = !1);
-                    let P = state.hmdLinkType === LinkType.INTERNAL_LINK || state.hmdLinkType === LinkType.EMBED;
-                    if (P)
-                        if ("|" === stream.peek())
-                            state.isAlias = !0,
-                            w = stream.pos + 1,
-                            y += " link-alias-pipe";
-                        else if ("]" === stream.peek() && stream.match("]]", !1))
-                            state.hmdLinkType = LinkType.NONE,
-                            state.linkText = !1,
-                            state.isAlias = !1,
-                            state.hasAlias = !1,
-                            w = stream.pos + 2,
-                            y += " formatting-link formatting-link-end";
-                        else {
-                            b = !0,
-                            state.isAlias && (y += " link-alias"),
-                            state.hasAlias && !state.isAlias && (y += " link-has-alias");
-                            let I = stream.match(/^([^|\]]*?)/, !1);
-                            w = stream.pos + Math.max(1, I[0].length)
-                        }
-                    else if("!" === stream.peek() || "[" === stream.peek())
-                    {
-                        const I = stream.match(/^(!?\[\[)(.*?)]]/, !1)
-                        if(I)
-                            "!" === I[1].charAt(0) ? (y += " formatting-link formatting-link-start formatting-embed", state.internalEmbed = !0) : (y += " formatting-link formatting-link-start", state.internalLink = !0), w = stream.pos + I[1].length, state.hasAlias = I[2].includes("|");
-                    }
-                    if (state.hmdLinkType === LinkType.FOOTREF)
-                        if (b = !0,
-                        "]" === stream.peek())
-                            state.hmdLinkType = LinkType.NONE,
-                            w = stream.pos + 1,
-                            y += " formatting formatting-link formatting-link-end " + CLASSES[LinkType.FOOTREF];
-                        else {
-                            let I = stream.match(/^([^\]]*?)/, !1);
-                            w = stream.pos + Math.max(1, I[0].length)
-                        }
-                    else
-                    {
-                        const I = stream.peek() === "[" && stream.match(/^\[\^([^\]\s]*?)\](:?)/, false);
-                        if(I && (h || I[2]))
-                        {
-                            stream.match("[^"),
-                            y += " formatting formatting-link formatting-link-start",
-                            state.hmdLinkType = LinkType.FOOTREF,
-                            w = stream.pos;
-                        }
-                    }
-                    if (config.blockId && "^" === stream.peek() && stream.match(/^\^([a-zA-Z0-9\-]+)$/))
-                        return y += " blockid";
-                    !state.inlineFootnote && "^" === stream.peek() && stream.match("^[", !1) ? (state.inlineFootnote = !0,
-                    y += " inline-footnote-start formatting-inline-footnote",
-                    w = stream.pos + 2) : state.inlineFootnote && !P && state.hmdLinkType === LinkType.NONE && !state.image && stream.match("]") && (state.inlineFootnote = !1,
-                    y += " footref inline-footnote inline-footnote-end formatting-inline-footnote",
-                    w = stream.pos),
-                    "%" === stream.peek() && stream.match("%%", !1) ? (state.comment ? (y += " comment formatting comment-end",
-                    state.comment = !1) : (y += " comment formatting comment-start",
-                    state.comment = !0),
-                    w = stream.pos + 2) : state.comment && (y += " comment")
-                }
-                if (g && (state.hmdLinkType || state.image || state.linkText || (isLetter(stream.peek()!) && stream.match(SN) || (p = stream.peek(),
-                !/[\s<>()[\]\\.,;:\s@\"`]/.test(p!) && stream.match(xN))) && (y += " url",
-                w = stream.pos)),
-                h && state.inFootnote) {
-                    let F = stream.match(/^\s*/, !1)[0].replace(/\stream/g, "    ").length;
-                    F && F % stream.tabSize == 0 ? y += " line-HyperMD-footnote" : state.inFootnote = !1
-                }
-                let O = h && "[" === stream.peek() && stream.match(/^\[((?:[^\]\\]|\\.)*)\]:/, !1);
-                if (O) {
-                    let B = O[1];
-                    if ("^" !== B[0] || !/\s/.test(B))
-                        return stream.match(/\[\^?/),
-                        state.hmdLinkType = LinkType.FOOTNOTE,
-                        state.formatting = "link",
-                        state.linkText = !0,
-                        y += "formatting formatting-link link " + CLASSES[LinkType.FOOTNOTE]
-                } else if (state.hmdLinkType === LinkType.FOOTNOTE) {
-                    if ("]" === stream.peek() && stream.match("]:"))
-                        return y += " formatting formatting-link link " + CLASSES[LinkType.FOOTNOTE],
-                        state.linkText = !1,
-                        state.inFootnote = !0,
-                        state.hmdLinkType = LinkType.MAYBE_FOOTNOTE_URL,
-                        //@ts-ignore
-                        state.f = state.inline = markdownMode.startState().inline,
-                        y;
-                    y += " link " + CLASSES[LinkType.FOOTNOTE]
-                } else if (state.hmdLinkType === LinkType.MAYBE_FOOTNOTE_URL) {
-                    if (stream.eatSpace())
-                        return y;
-                    if (isLetter(stream.peek()!) && stream.match(SN))
-                        return y += " url hmd-footnote-url",
-                        state.hmdLinkType = LinkType.MAYBE_FOOTNOTE_URL_TITLE,
-                        y;
-                    state.hmdLinkType = LinkType.NONE
-                } else if (state.hmdLinkType === LinkType.MAYBE_FOOTNOTE_URL_TITLE) {
-                    if (stream.eatSpace())
-                        return y;
-                    if (state.hmdLinkType = LinkType.NONE,
-                    stream.match(/^(["']).*?\1/) || stream.match(/^\([^)]*?\)/))
-                        return y += " hmd-footnote-url-title"
-                }
-            }
-            if (state.hmdTable && "|" === stream.peek() && "\\" !== stream.string[stream.pos - 1] && function(e)
-            {
-                e.code = !1,
-                e.comment = !1,
-                e.em = !1,
-                e.formatting = !1,
-                e.highlight = !1,
-                e.hmdHashtag = !1,
-                e.hmdLinkType = LinkType.NONE,
-                e.isAlias = !1,
-                e.internalEmbed = !1,
-                e.internalLink = !1,
-                e.linkHref = !1,
-                e.linkText = !1,
-                e.linkTitle = !1,
-                e.strikethrough = !1,
-                e.strong = !1
-            }(state),
-            state.hmdNextState)
-                stream.pos = state.hmdNextPos!,
-                y += " " + (state.hmdNextStyle || ""),
-                Object.assign(state, state.hmdNextState),
-                state.hmdNextState = null,
-                state.hmdNextStyle = null,
-                state.hmdNextPos = null;
-            else {
-                let N = h && 0 !== stream.pos;
-                if (b) {
-                    //@ts-ignore
-                    let R = markdownMode.copyState(state), H = stream.pos;
-                    y += " " + (markdownMode.token(stream, R) || ""),
-                    stream.pos = H
-                } else
-                    y += " " + (markdownMode.token(stream, state) || "");
-                //@ts-ignore
-                N && state.f === state.block && (state.f = state.inline = markdownMode.startState().inline),
-                state.inFootnote && (state.indentationDiff = 0)
-            }
-            y = function(e, text) {
-                return text ? (!config.hr && e.hr && (text = clearSubstringWords(text, "hr"),
-                e.hr = !1),
-                !config.headers && e.header && (text = clearSubstringWords(text, "header"),
-                e.header = 0),
-                !config.indentedCode && e.indentedCode && (text = clearSubstringWords(text, "inline-code"),
-                e.indentedCode = !1),
-                !config.blockquotes && e.quote && (text = clearSubstringWords(text, "quote"),
-                e.quote = 0),
-                !config.lists && e.list && (text = clearSubstringWords(text, "list"),
-                e.list = !1),
-                text) : text
-            }(state, y),
-            y.includes("formatting-task") && (y += " line-HyperMD-task-line"),
-            state.hmdHashtag && (y += " " + config.tokenTypeOverrides.hashtag),
-            -1 !== w && (stream.pos = w),
-            state.header && (state.isHeading = !0),
-            !i.htmlBlock && state.htmlState && (i.htmlBlock = state.f);
-            let V = state.f === i.htmlBlock
-                , z = -1 === state.code;
-            if (v = v && !(V || z),
-            g = g && v && !(state.code || state.indentedCode || state.linkHref),
-            state.hmdTable && V) {
-                let q = stream.current();
-                /(?:^|[^\\])\|/.test(q) && ("" === y.trim() || /string|attribute/.test(y)) && (V = !1,
-                a = !1,
-                state.htmlState = null,
-                state.block = i.block,
-                //@ts-ignore
-                state.f = state.inline = markdownMode.startState().inline,
-                stream.pos = "|" === q ? stream.start : stream.start + 1)
-            }
-            let U = stream.current();
-            if (V !== a && (V ? (y += " hmd-html-begin",
-            i.htmlBlock = state.f) : y += " hmd-html-end"),
-            (c || z) && (state.localMode && c || (y = y.replace("inline-code", "")),
-            y += " line-HyperMD-codeblock line-background-HyperMD-codeblock-bg hmd-codeblock",
-            z !== c && (z ? c || (y += " line-HyperMD-codeblock-begin line-background-HyperMD-codeblock-begin-bg") : y += " line-HyperMD-codeblock-end line-background-HyperMD-codeblock-end-bg")),
-            v) {
-                let _ = state.hmdTable;
-                if (h && _)
-                    (_ == TableType.SIMPLE ? IN : ON).test(stream.string) ? (state.hmdTableCol = 0,
-                    state.hmdTableRow++) : resetTable(state);
-                if (h && state.header && (/^(?:---+|===+)\s*$/.test(stream.string) && state.prevLine && state.prevLine.header ? y += " line-HyperMD-header-line line-HyperMD-header-line-" + state.header : y += " line-HyperMD-header line-HyperMD-header-" + state.header),
-                state.indentedCode && (y += " hmd-indented-code"),
-                state.quote) {
-                    if (stream.match(/^\s*>/, !1) && !stream.eol() || (y += " line-HyperMD-quote line-HyperMD-quote-" + state.quote,
-                    /^ {0,3}\>/.test(stream.string) || (y += " line-HyperMD-quote-lazy")),
-                    h && (d = U.match(/^\s+/)))
-                        return stream.pos = d![0].length,
-                        (y += " hmd-indent-in-quote").trim();
-                    if (state.quote > u)
-                    {
-                        const I = "[" === stream.peek() && stream.match(/^\[!([^\]]+)\]([+\-]?)(?:\s|$)/);
-                        if(I)
-                            y += " line-HyperMD-callout hmd-callout line-HyperMD-quote line-HyperMD-quote-" + state.quote
-                    }
-                }
-                let W = (state.listStack[state.listStack.length - 1] || 0) + 3
-                    , j = h && /^\s+$/.test(U) && (!1 !== state.list || stream.indentation() <= W)
-                    , G = state.list && y.includes("formatting-list");
-                if (G || j && (!1 !== state.list || stream.match(EN, !1))) {
-                    let K = state.listStack && state.listStack.length || 0;
-                    if (j) {
-                        if (stream.match(EN, !1))
-                            !1 === state.list && K++;
-                        else {
-                            for (; K > 0 && stream.pos < state.listStack[K - 1]; )
-                                K--;
-                            if (!K)
-                                return y.trim() || null;
-                            y += " line-HyperMD-list-line-nobullet line-HyperMD-list-line line-HyperMD-list-line-".concat(K.toString())
-                        }
-                        y += " hmd-list-indent hmd-list-indent-".concat(K.toString())
-                    } else
-                        G && (y += " line-HyperMD-list-line line-HyperMD-list-line-".concat(K.toString()))
-                }
-                if (f !== state.linkText && (f || state.internalLink || state.internalEmbed ? state.hmdLinkType !== LinkType.FOOTNOTE && (state.hmdLinkType in CLASSES && (y += " " + CLASSES[state.hmdLinkType]),
-                state.hmdLinkType = LinkType.NONE) : (d = stream.match(/^([^\]]+)\](\(| ?\[|\:)?/, !1)) ? d[2] ? "[" !== d[2] && " [" !== d[2] || "]" !== stream.string.charAt(stream.pos + d[0].length) ? state.hmdLinkType = LinkType.NORMAL : state.hmdLinkType = LinkType.BARELINK2 : "^" !== d[1][0] || /\s/.test(d[1]) ? state.hmdLinkType = LinkType.BARELINK : state.hmdLinkType = LinkType.FOOTREF : state.hmdLinkType = LinkType.BARELINK),
-                m !== state.linkHref && (m ? state.hmdLinkType && (y += " " + CLASSES[state.hmdLinkType],
-                state.hmdLinkType = LinkType.NONE) : "[" === U && "]" !== stream.peek() && (state.hmdLinkType = LinkType.FOOTREF2)),
-                state.hmdLinkType !== LinkType.NONE && state.hmdLinkType in CLASSES && (y += " " + CLASSES[state.hmdLinkType]),
-                state.inlineFootnote && (y += " footref inline-footnote"),
-                k && U.length > 1) {
-                    let Y = U.length - 1
-                        , Z = y.replace("formatting-escape", "escape") + " hmd-escape-char";
-                    return state.hmdOverride = function(e, stream) {
-                        return e.pos += Y,
-                        stream.hmdOverride = null,
-                        Z.trim()
-                    }
-                    ,
-                    y += " hmd-escape-backslash",
-                    stream.pos -= Y,
-                    y
-                }
-                if (!y.trim() && config.table) {
-                    let X = !1;
-                    if ("|" === U.charAt(0) && (stream.pos = stream.start + 1,
-                    U = "|",
-                    X = !0),
-                    !_ && state.prevLine && state.prevLine.stream && state.prevLine.stream.string.trim() && !state.wasHeading && (X = !1),
-                    X) {
-                        if (!_) {
-                            PN.test(stream.string) ? _ = TableType.SIMPLE : FN.test(stream.string) && (_ = TableType.NORMAL);
-                            let $: string[] | undefined = void 0;
-                            if (_) {
-                                let Q = stream.lookAhead(1);
-                                if (_ === TableType.NORMAL ? FN.test(Q) ? Q = Q.replace(/^\s*\|/, "").replace(/\|\s*$/, "") : _ = TableType.NONE : _ === TableType.SIMPLE && (PN.test(Q) || (_ = TableType.NONE)),
-                                _) {
-                                    $ = Q.split("|");
-                                    for (let J = 0; J < $.length; J++) {
-                                        let ee = $[J];
-                                        if (BN.test(ee))
-                                            ee = "right";
-                                        else if (NN.test(ee))
-                                            ee = "left";
-                                        else if (RN.test(ee))
-                                            ee = "center";
-                                        else {
-                                            if (!HN.test(ee)) {
-                                                _ = TableType.NONE;
-                                                break
-                                            }
-                                            ee = "default"
-                                        }
-                                        $[J] = ee
-                                    }
-                                }
-                            }
-                            _ && (state.hmdTable = _,
-                            state.hmdTableColumns = $!,
-                            "rtl" === readSide(stream.string) && (state.hmdTableRTL = !0),
-                            state.hmdTableRow = state.hmdTableCol = 0)
-                        }
-                        if (_) {
-                            let te = state.hmdTableColumns.length - 1
-                                , ne = state.hmdTableCol
-                                , ee = state.hmdTableRow;
-                            0 == ne && (y += " line-HyperMD-table-".concat(_.toString(), " line-HyperMD-table-row line-HyperMD-table-row-").concat(ee.toString()),
-                            state.hmdTableRTL && (y += " line-HyperMD-table-rtl")),
-                            _ === TableType.NORMAL && (0 === state.hmdTableCol && /^\s*\|$/.test(stream.string.slice(0, stream.pos)) || stream.match(/^\s*$/, !1)) ? y += " hmd-table-sep hmd-table-sep-dummy" : state.hmdTableCol < te && (y += " hmd-table-sep hmd-table-sep-".concat(ne.toString()),
-                            state.hmdTableCol += 1)
-                        }
-                    }
-                }
-                if (_ && 1 === state.hmdTableRow && y.includes("emoji") && (y = ""),
-                g && "<" === U) {
-                    let ie = null;
-                    if ("!" === stream.peek() && stream.match(/^\![A-Z]+/) ? ie = ">" : "!" === stream.peek() && stream.match("![CDATA[") ? ie = "]]>" : "?" === stream.peek() && (ie = "?>"),
-                    null != ie)
-                        return enterMode(stream, state, null, {
-                            endTag: ie,
-                            style: (y + " comment hmd-cdata-html").trim()
-                        })
-                }
-                if (config.hashtag && g)
-                    if (state.hmdHashtag) {
-                        let re = !1;
-                        if (!(y = y.replace(/((formatting )?formatting-em|em) /g, "")).includes("formatting") && !/^\s*$/.test(U)) {
-                            d = U.match(TN);
-                            let oe = U.length - (d ? d[0].length : 0);
-                            oe > 0 && (stream.backUp(oe),
-                            re = !0)
-                        }
-                        if (re || (re = stream.eol()),
-                        re || (re = !TN.test(stream.peek()!)),
-                        re)
-                        {
-                            let le = stream.current();
-                            y += " hashtag-end " + (le = "tag-" + le.replace(/[^_a-zA-Z0-9\-]/g, "")),
-                            state.hmdHashtag = !1
-                        }
-                    } else if ("#" === U && !state.linkText && !state.image && (h || /^\s*$/.test(stream.string.charAt(stream.start - 1)))) {
-                        let ae = stream.string.slice(stream.pos).replace(/\\./g, "")
-                            , se = TN.exec(ae);
-                        if (se && /[^0-9]/.test(se[0])) {
-                            let le = "tag-" + se[0].replace(/[^_a-zA-Z0-9\-]/g, "");
-                            state.hmdHashtag = !0,
-                            y += " formatting formatting-hashtag hashtag-begin " + config.tokenTypeOverrides.hashtag + " " + le
-                        }
-                    }
-            }
-            return y.trim() || null;
-        },
-    }
-}, 'd-any');

shared/markdown.util.ts

@@ -0,0 +1,75 @@
+import type { Root, RootContent } from "hast";
+import { dom, styling, text, type Class, type Node } from "./dom.util";
+import prose, { a, blockquote, tag, h1, h2, h3, h4, h5, hr, li, small, table, td, th, callout, type Prose } from "./proses";
+import { heading } from "hast-util-heading";
+import { headingRank } from "hast-util-heading-rank";
+import { parseId } from "./general.util";
+import { loading } from "#shared/proses";
+
+export function renderMarkdown(markdown: Root, proses: Record<string, Prose>): HTMLDivElement
+{
+    return dom('div', {}, markdown.children.map(e => renderContent(e, proses)));
+}
+
+function renderContent(node: RootContent, proses: Record<string, Prose>): Node
+{
+    if(node.type === 'text' && node.value.length > 0 && node.value !== '\n')
+    {
+        return text(node.value);
+    }
+    else if(node.type === 'comment' && node.value.length > 0 && node.value !== '\n')
+    {
+        return undefined;
+    }
+    else if(node.type === 'element')
+    {
+        const children = node.children.map(e => renderContent(e, proses)), properties = { ...node.properties, class: node.properties.className as string | string[] };
+        if(node.tagName in proses)
+			return prose(node.tagName, proses[node.tagName], children, properties);
+		else
+			return dom(node.tagName as keyof HTMLElementTagNameMap, properties, children);
+    }
+
+    return undefined;
+}
+
+export interface MDProperties
+{
+	class?: Class;
+	style?: string | Record<string, string>;
+	tags?: Record<string, Prose>;
+}
+export default function(content: string, filter?: string, properties?: MDProperties): HTMLElement
+{
+	const load = loading('normal');
+
+	queueMicrotask(() => {
+		useMarkdown().parse(content).then(data => {
+			if(filter)
+			{
+				const start = data?.children.findIndex(e => heading(e) && parseId(e.properties.id as string | undefined) === filter) ?? -1;
+		
+				if(start !== -1)
+				{
+					let end = start;
+					const rank = headingRank(data.children[start])!;
+					while(end < data.children.length)
+					{
+						end++;
+						if(heading(data.children[end]) && headingRank(data.children[end])! <= rank)
+							break;
+					}
+					data = { ...data, children: data.children.slice(start, end) };
+				}
+			}
+		
+			const el = renderMarkdown(data, { a, blockquote, tag, callout, h1, h2, h3, h4, h5, hr, li, small, table, td, th, ...properties?.tags });
+		
+			if(properties) styling(el, properties);
+	
+			load.parentElement?.replaceChild(el, load);
+		});
+	})
+
+	return load;
+}

shared/physics.util.ts

@@ -1,6 +1,6 @@
 import type { CanvasNode } from "~/types/canvas";
 import type { CanvasPreferences } from "~/types/general";
-import type { Position, Box, Direction } from "./canvas.util";
+import type { Position, Box, Direction, CanvasEditor } from "./canvas.util";
 
 interface SnapPoint {
     pos: Position;
@@ -26,8 +26,20 @@ const enum TYPE {
     EDGE,
 }
 
-class SpatialGrid {
-    private cells: Map<number, Map<number, Set<string>>> = new Map();
+export function overlapsBoxes(a: Box, b: Box): boolean
+{
+    return overlaps(a.x, a.y, a.width, a.height, b.x, b.y, b.width, b.height);
+}
+export function overlaps(ax: number, ay: number, aw: number, ah: number, bx: number, by: number, bw: number, bh: number): boolean
+{
+    return !(bx > (ax + aw)
+        || (bx + bw) < ax
+        || by > (ay + ah)
+        || (by + bh) < ay);
+}
+
+export class SpatialGrid<T extends Box> {
+    private cells: Map<number, Map<number, Set<T>>> = new Map();
     private cellSize: number;
 
     private minx: number = Infinity;
@@ -35,20 +47,23 @@ class SpatialGrid {
     private maxx: number = -Infinity;
     private maxy: number = -Infinity;
 
-    private cacheSet: Set<string> = new Set<string>();
+    private cacheSet: Set<T> = new Set<T>();
 
-    constructor(cellSize: number) {
+    constructor(cellSize: number)
+    {
         this.cellSize = cellSize;
     }
 
-    private updateBorders(startX: number, startY: number, endX: number, endY: number) {
+    private updateBorders(startX: number, startY: number, endX: number, endY: number)
+    {
         this.minx = Math.min(this.minx, startX);
         this.miny = Math.min(this.miny, startY);
         this.maxx = Math.max(this.maxx, endX);
         this.maxy = Math.max(this.maxy, endY);
     }
 
-    insert(node: CanvasNode): void {
+    insert(node: T): void
+    {
         const startX = Math.floor(node.x / this.cellSize);
         const startY = Math.floor(node.y / this.cellSize);
         const endX = Math.ceil((node.x + node.width) / this.cellSize);
@@ -59,22 +74,22 @@ class SpatialGrid {
         for (let i = startX; i <= endX; i++) {
             let gridX = this.cells.get(i);
             if (!gridX) {
-                gridX = new Map<number, Set<string>>();
+                gridX = new Map<number, Set<T>>();
                 this.cells.set(i, gridX);
             }
 
             for (let j = startY; j <= endY; j++) {
                 let gridY = gridX.get(j);
                 if (!gridY) {
-                    gridY = new Set<string>();
+                    gridY = new Set<T>();
                     gridX.set(j, gridY);
                 }
-                gridY.add(node.id);
+                gridY.add(node);
             }
         }
     }
 
-    remove(node: CanvasNode): void {
+    remove(node: T): void {
         const startX = Math.floor(node.x / this.cellSize);
         const startY = Math.floor(node.y / this.cellSize);
         const endX = Math.ceil((node.x + node.width) / this.cellSize);
@@ -84,17 +99,17 @@ class SpatialGrid {
             const gridX = this.cells.get(i);
             if (gridX) {
                 for (let j = startY; j <= endY; j++) {
-                    gridX.get(j)?.delete(node.id);
+                    gridX.get(j)?.delete(node);
                 }
             }
         }
     }
 
-    fetch(x: number, y: number): Set<string> | undefined {
+    fetch(x: number, y: number): Set<T> | undefined {
         return this.query(x, y, x, y);
     }
 
-    query(x1: number, y1: number, x2: number, y2: number): Set<string> {
+    query(x1: number, y1: number, x2: number, y2: number): Set<T> {
         this.cacheSet.clear();
 
         const startX = Math.floor(x1 / this.cellSize);
@@ -108,7 +123,7 @@ class SpatialGrid {
                 for (let dy = startY; dy <= endY; dy++) {
                     const cellNodes = gridX.get(dy);
                     if (cellNodes) {
-                        cellNodes.forEach(neighbor => this.cacheSet.add(neighbor));
+                        cellNodes.forEach(neighbor => !this.cacheSet.has(neighbor) && (overlaps(x1, y1, x2 - x1, y2 - y1, neighbor.x, neighbor.y, neighbor.width, neighbor.height)) && this.cacheSet.add(neighbor));
                     }
                 }
             }
@@ -117,7 +132,7 @@ class SpatialGrid {
         return this.cacheSet;
     }
 
-    getViewportNeighbors(node: CanvasNode, viewport?: Box): Set<string> {
+    getViewportNeighbors(node: T, viewport?: Box): Set<T> {
         this.cacheSet.clear();
 
         const startX = Math.floor(node.x / this.cellSize);
@@ -127,8 +142,8 @@ class SpatialGrid {
 
         const minX = Math.max(viewport ? Math.max(this.minx, Math.floor(viewport.x / this.cellSize)) : this.minx, startX - 8);
         const minY = Math.max(viewport ? Math.max(this.miny, Math.floor(viewport.y / this.cellSize)) : this.miny, startY - 8);
-        const maxX = Math.min(viewport ? Math.min(this.maxx, Math.ceil((viewport.x + viewport.w) / this.cellSize)) : this.maxx, endX + 8);
-        const maxY = Math.min(viewport ? Math.min(this.maxy, Math.ceil((viewport.y + viewport.h) / this.cellSize)) : this.maxy, endY + 8);
+        const maxX = Math.min(viewport ? Math.min(this.maxx, Math.ceil((viewport.x + viewport.width) / this.cellSize)) : this.maxx, endX + 8);
+        const maxY = Math.min(viewport ? Math.min(this.maxy, Math.ceil((viewport.y + viewport.height) / this.cellSize)) : this.maxy, endY + 8);
 
         for (let dx = minX; dx <= maxX; dx++) {
             const gridX = this.cells.get(dx);
@@ -137,7 +152,7 @@ class SpatialGrid {
                     const cellNodes = gridX.get(dy);
                     if (cellNodes) {
                         cellNodes.forEach(neighbor => {
-                            if (neighbor !== node.id) this.cacheSet.add(neighbor);
+                            if (neighbor !== node) this.cacheSet.add(neighbor);
                         });
                     }
                 }
@@ -150,7 +165,7 @@ class SpatialGrid {
                     const cellNodes = gridX.get(dy);
                     if (cellNodes) {
                         cellNodes.forEach(neighbor => {
-                            if (neighbor !== node.id) this.cacheSet.add(neighbor);
+                            if (neighbor !== node) this.cacheSet.add(neighbor);
                         });
                     }
                 }
@@ -200,34 +215,33 @@ class SnapPointCache {
 }
 
 export class SnapFinder {
-    private spatialGrid: SpatialGrid;
+    private spatialGrid: SpatialGrid<CanvasNode>;
     private snapPointCache: SnapPointCache;
-    config: SnapConfig;
+    private config: SnapConfig;
 
-    hints: Ref<SnapHint[]>;
-    viewport: Ref<Box>;
+    private canvas: CanvasEditor;
+    private hints: SnapHint[] = [];
 
-    constructor(hints: Ref<SnapHint[]>, viewport: Ref<Box>, config: SnapConfig) {
+    constructor(canvas: CanvasEditor, config: SnapConfig) {
         this.spatialGrid = new SpatialGrid(config.cellSize);
         this.snapPointCache = new SnapPointCache();
         this.config = config;
 
-        this.hints = hints;
-        this.viewport = viewport;
+        this.canvas = canvas;
     }
 
     add(node: CanvasNode): void
     {
         this.spatialGrid.insert(node);
         this.snapPointCache.insert(node);
-        this.hints.value.length = 0;
+        this.hints.length = 0;
     }
 
     remove(node: CanvasNode): void
     {
         this.spatialGrid.remove(node);
         this.snapPointCache.invalidate(node);
-        this.hints.value.length = 0;
+        this.hints.length = 0;
     }
 
     update(node: CanvasNode): void
@@ -257,26 +271,26 @@ export class SnapFinder {
         const result: Partial<Box> = {
             x: undefined,
             y: undefined,
-            w: undefined,
-            h: undefined,
+            width: undefined,
+            height: undefined,
         };
 
         if(!this.config.preferences.neighborSnap)
         {
             result.x = this.snapToGrid(node.x);
-            result.w = this.snapToGrid(node.width);
+            result.width = this.snapToGrid(node.width);
             result.y = this.snapToGrid(node.y);
-            result.h = this.snapToGrid(node.height);
+            result.height = this.snapToGrid(node.height);
 
             return result;
         }
         
-        this.hints.value.length = 0;
+        this.hints.length = 0;
 
         this.snapPointCache.invalidate(node);
         this.snapPointCache.insert(node);
 
-        const neighbors = [...this.spatialGrid.getViewportNeighbors(node, this.viewport.value)].flatMap(e => this.snapPointCache.getSnapPoints(e)).filter(e => !!e);
+        const neighbors = [...this.spatialGrid.getViewportNeighbors(node, this.canvas.viewport)].flatMap(e => this.snapPointCache.getSnapPoints(e)).filter(e => !!e);
         const bestSnap = this.findBestSnap(this.snapPointCache.getSnapPoints(node.id)!, neighbors, this.config.threshold, resizeHandle);
 
         return this.applySnap(node, bestSnap.x, bestSnap.y, resizeHandle);
@@ -323,7 +337,7 @@ export class SnapFinder {
 			yHints.forEach(e => e.start.x += bestSnap.x!);
 		}
 
-		this.hints.value = [...xHints, ...yHints];
+		this.hints = [...xHints, ...yHints];
 
         return bestSnap;
     }
@@ -335,14 +349,14 @@ export class SnapFinder {
 
     private applySnap(node: CanvasNode, offsetx?: number, offsety?: number, resizeHandle?: Box): Partial<Box>
     {
-        const result: Partial<Box> = { x: undefined, y: undefined, w: undefined, h: undefined };
+        const result: Partial<Box> = { x: undefined, y: undefined, width: undefined, height: undefined };
 
         if (resizeHandle)
         {
             result.x = offsetx ? node.x + offsetx * resizeHandle.x : this.snapToGrid(node.x);
-            result.w = offsetx ? node.width + offsetx * resizeHandle.w : this.snapToGrid(node.width);
+            result.w = offsetx ? node.width + offsetx * resizeHandle.width : this.snapToGrid(node.width);
             result.y = offsety ? node.y + offsety * resizeHandle.y : this.snapToGrid(node.y);
-            result.h = offsety ? node.height - offsety * resizeHandle.h : this.snapToGrid(node.height);
+            result.h = offsety ? node.height - offsety * resizeHandle.height : this.snapToGrid(node.height);
         }
         else
         {

shared/proses.ts

@@ -0,0 +1,233 @@
+import { dom, icon, type NodeChildren, type Node, type NodeProperties, type Class, mergeClasses } from "#shared/dom.util";
+import { parseURL } from 'ufo';
+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 type { RouteLocationAsRelativeTyped, RouteMapGeneric } from "vue-router";
+import { unifySlug } from "#shared/general.util";
+
+export type CustomProse = (properties: any, children: NodeChildren) => Node;
+export type Prose = { class: string } | { custom: CustomProse };
+export const a: Prose = {
+    custom(properties, children) {
+        const href = decodeURIComponent(properties.href) as string;
+        const { hash, pathname } = parseURL(href);
+        const router = useRouter();
+
+        const overview = Content.getFromPath(pathname === '' && hash.length > 0 ?  unifySlug(router.currentRoute.value.params.path ?? '') : pathname);
+
+        const link = overview ? { name: 'explore-path', params: { path: overview.path }, hash: hash } : href, nav = router.resolve(link);
+        
+        let rendered = false;
+
+        const el = dom('a', { class: 'text-accent-blue inline-flex items-center', attributes: { href: nav.href }, listeners: {
+                'click': (e) => {
+                e.preventDefault();
+                router.push(link);
+            }
+        }}, [
+            dom('span', {}, [
+                ...(children ?? []),
+                overview && overview.type !== 'markdown' ? icon(iconByType[overview.type], { class: 'w-4 h-4 inline-block', inline: true }) : undefined
+            ])
+        ]);
+
+        if(!!overview)
+        {
+            popper(el, {
+                arrow: true,
+                delay: 150,
+                offset: 12,
+                placement: 'bottom-start',
+                class: 'data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 data-[state=open]:transition-transform text-light-100 dark:text-dark-100 min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full z-[45]',
+                content: [loading("large")],
+                viewport: document.getElementById('mainContainer') ?? undefined,
+                onShow(content: HTMLDivElement) {
+                    if(!rendered)
+                    {
+                        Content.getContent(overview.id).then((_content) => {
+                            if(_content?.type === 'markdown')
+                            {
+                                content.replaceChild(render((_content as LocalContent<'markdown'>).content ?? '', hash.length > 0 ? hash.substring(1) : undefined, { class: 'min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto py-4 px-6' }), content.children[0]!);
+                            }
+                            if(_content?.type === 'canvas')
+                            {
+                                const canvas = new Canvas((_content as LocalContent<'canvas'>).content);
+                                content.replaceChild(dom('div', { class: 'w-[600px] h-[600px] relative' }, [canvas.container]), content.children[0]!);
+                                canvas.mount();
+                            }
+                        });
+                        rendered = true;
+                    }
+                },
+            });
+        }
+
+        return el;
+    }
+}
+export const fakeA: Prose = {
+    custom(properties, children) {
+        const href = properties.href as string;
+        const { hash, pathname } = parseURL(href);
+        const router = useRouter();
+
+        const overview = Content.getFromPath(pathname === '' && hash.length > 0 ?  unifySlug(router.currentRoute.value.params.path ?? '') : pathname);
+        
+        const el = dom('span', { class: 'cursor-pointer text-accent-blue inline-flex items-center' }, [
+            dom('span', {}, [
+                ...(children ?? []),
+                overview && overview.type !== 'markdown' ? icon(iconByType[overview.type], { class: 'w-4 h-4 inline-block', inline: true }) : undefined
+            ])
+        ]);
+
+        if(!!overview)
+        {
+            const magicKeys = useMagicKeys();
+            popper(el, {
+                arrow: true,
+                delay: 150,
+                offset: 12,
+                placement: 'bottom-start',
+                class: 'data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 data-[state=open]:transition-transform text-light-100 dark:text-dark-100 min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full z-[45]',
+                content: [loading("large")],
+                onShow(content: HTMLDivElement) {
+                    if(!magicKeys.current.has('control') || magicKeys.current.has('meta'))
+                        return false;
+
+                    content.replaceChild(loading("large"), content.children[0]!);
+                    Content.getContent(overview.id).then((_content) => {
+                        if(_content?.type === 'markdown')
+                        {
+                            content.replaceChild(render((_content as LocalContent<'markdown'>).content ?? '', hash.length > 0 ? hash.substring(1) : undefined, { class: 'min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto py-4 px-6' }), content.children[0]!);
+                        }
+                        if(_content?.type === 'canvas')
+                        {
+                            const canvas = new Canvas((_content as LocalContent<'canvas'>).content);
+                            content.replaceChild(dom('div', { class: 'w-[600px] h-[600px] relative' }, [canvas.container]), content.children[0]!);
+                            canvas.mount();
+                        }
+                    });
+                },
+            });
+        }
+
+        return el;
+    }
+}
+export const callout: Prose = {
+    custom(properties, children) {
+        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';
+
+        const {	type, title, fold }: {
+            type: string;
+            title?: string;
+            fold?: boolean;
+        } = properties;
+
+        let open = fold;
+        const container = dom('div', { 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', attributes: { 'data-state': fold !== false ? 'closed' : 'open', 'data-type': type } }, [
+            dom('div', { class: [{'cursor-pointer': fold !== undefined}, 'flex flex-row items-center justify-start ps-2'], listeners: { click: e => {
+                container.setAttribute('data-state', open ? 'open' : 'closed');
+                open = !open;
+            }}}, 
+                [icon(calloutIconByType[type] ?? defaultCalloutIcon, { inline: true, width: 24, height: 24, class: 'w-6 h-6 stroke-2 float-start me-2 flex-shrink-0' }), !!title ? dom('span', { class: 'block font-bold text-start', text: title }) : undefined, fold !== undefined ? icon('radix-icons:caret-right', { height: 24, width: 24, class: 'transition-transform group-data-[state=open]:rotate-90 w-6 h-6 mx-6' }) : undefined
+            ]),
+            dom('div', { class: {'overflow-hidden': true, 'group-data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] group-data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out] group-data-[state=closed]:h-0': fold !== undefined } }, [
+                dom('div', { class: 'px-2' }, children),
+            ])
+        ]);
+
+        return container;
+    },
+}
+export const tag: Prose = {
+    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",
+}
+export const blockquote: Prose = {
+    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',
+}
+export const h1: Prose = {
+    class: 'text-5xl font-thin mt-3 mb-8 first:pt-0 pt-2',
+}
+export const h2: Prose = {
+    class: 'text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2',
+}
+export const h3: Prose = {
+    class: 'text-2xl font-bold  mt-2 mb-4',
+}
+export const h4: Prose = {
+    class: 'text-xl font-semibold my-2',
+}
+export const h5: Prose = {
+    class: 'text-lg font-semibold my-1',
+}
+export const hr: Prose = {
+    class: 'border-b border-light-35 dark:border-dark-35 m-4',
+}
+export const li: Prose = {
+    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',
+}
+export const small: Prose = {
+    class: 'text-light-60 dark:text-dark-60 text-sm italic',
+}
+export const table: Prose = {
+    class: 'mx-4 my-8 border-collapse border border-light-35 dark:border-dark-35',
+}
+export const td: Prose = {
+    class: 'border border-light-35 dark:border-dark-35 py-1 px-2',
+}
+export const th: Prose = {
+    class: 'border border-light-35 dark:border-dark-35 px-4 first:pt-0',
+}
+
+export default function(tag: string, prose: Prose, children?: NodeChildren, properties?: any): Node
+{
+    if('class' in prose)
+    {
+        return dom(tag as keyof HTMLElementTagNameMap, { class: [properties?.class, prose.class] }, children ?? []);
+    }
+    else
+    {
+        return prose.custom(properties, children ?? []);
+    }
+}
+
+export function link(properties?: NodeProperties & { active?: Class }, link?: RouteLocationAsRelativeTyped<RouteMapGeneric, string>, children?: NodeChildren)
+{
+    const router = useRouter();
+    const nav = link ? router.resolve(link) : undefined;
+    return dom('a', { ...properties, class: [properties?.class, properties?.active && router.currentRoute.value.fullPath === nav?.fullPath ? properties.active : undefined], attributes: { href: nav?.href, 'data-active': properties?.active ? mergeClasses(properties?.active) : undefined }, listeners: link ? {
+        click: function(e)
+        {
+            e.preventDefault();
+            router.push(link);
+        }
+    } : undefined }, children);
+}
+export function loading(size: 'small' | 'normal' | 'large' = 'normal'): HTMLElement
+{
+    return dom('span', { class: ["after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin", {'w-6 h-6 border-4 border-transparent after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}] })
+}
+export function button(content: Node, onClick?: () => void, cls?: Class)
+{
+    return dom('button', { class: [`text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex items-center justify-center bg-light-25 dark:bg-dark-25 leading-none outline-none
+    border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+    disabled:bg-light-10 dark:disabled:bg-dark-10 disabled:border-none disabled:text-light-50 dark:disabled:text-dark-50`, cls], listeners: { click: onClick } }, [ content ]);
+}

shared/tree.ts

@@ -0,0 +1,193 @@
+import { Content, type LocalContent } from "./content.util";
+import { dom } from "./dom.util";
+import { clamp } from "./general.util";
+
+export type Recursive<T> = T & {
+    children?: T[];
+    parent?: T;
+};
+export class Tree<T extends Omit<LocalContent, 'content'>>
+{
+    private _data:  Recursive<T>[];
+    private _flatten: T[];
+
+    constructor(data: T[])
+    {
+        this._data = data;
+        this._flatten = this.accumulate(e => e);
+    }
+
+    remove(id: string)
+    {
+        const recursive = (data?: Recursive<T>[], parent?: T) => data?.filter(e => e.id !== id)?.map((e, i) => {
+            e.order = i;
+            e.children = recursive(e.children as T[], e);
+            return e;
+        });
+
+        this._data = recursive(this._data)!;
+        this._flatten = this.accumulate(e => e);
+    }
+    insertAt(item: Recursive<T>, pos: number)
+    {
+        const parent = item.parent ? item.parent.id : undefined;
+        const recursive = (data?: Recursive<T>[]) => data?.flatMap(e => {
+            if(e.id === parent)
+            {
+                e.children = e.children ?? [];
+                e.children.splice(clamp(pos, 0, e.children.length), 0, item);
+            }
+            else if(e.type === 'folder')
+                e.children = recursive(e.children as T[]);
+
+            return e;
+        }).map((e, i) => { e.order = i; return e; });
+
+        if(!parent || parent === '')
+        {
+            this._data.splice(pos, 0, item);
+            this._data.forEach((e, i) => e.order = i);
+        }
+        else
+            this._data = recursive(this._data)!;
+
+        this._flatten = this.accumulate(e => e);
+    }
+    find(id: string): T | undefined 
+    {
+        const recursive = (data?: Recursive<T>[]): T | undefined => {
+            if(!data)
+                return;
+
+            for(const e of data)
+            {
+                if(e.id === id)
+                    return e;
+
+                const result = recursive(e.children as T[]);
+
+                if(result)
+                    return result;
+            }
+        };
+        
+        return recursive(this._data);
+    }
+    search(prop: keyof T, value: string): T[] 
+    {
+        const recursive = (data?: Recursive<T>[]): T[] => {
+            if(!data)
+                return [];
+
+            const arr = [];
+
+            for(const e of data)
+            {
+                if(e[prop] === value)
+                    arr.push(e);
+                else
+                    arr.push(...recursive(e.children as T[]));
+            }
+
+            return arr;
+        };
+        
+        return recursive(this._data);
+    }
+    subset(id: string): Tree<T> | undefined
+    {
+        const subset = this.find(id);
+        return subset ? new Tree([subset]) : undefined;
+    }
+    each(callback: (item: T, depth: number, parent?: T) => void)
+    {
+        const recursive = (depth: number, data?: Recursive<T>[], parent?: T) => data?.forEach(e => { callback(e, depth, parent); recursive(depth + 1, e.children as T[], e) });
+
+        recursive(1, this._data);
+    }
+    accumulate(callback: (item: T, depth: number, parent?: T) => any): any[]
+    {
+        const recursive = (depth: number, data?: Recursive<T>[], parent?: T): any[] => data?.flatMap(e => [callback(e, depth, parent), ...recursive(depth + 1, e.children as T[], e)]) ?? [];
+
+        return recursive(1, this._data);
+    }
+    get data()
+    {
+        return this._data;
+    }
+    get flatten()
+    {
+        return this._flatten;
+    }
+}
+export class TreeDOM
+{
+    container: HTMLElement;
+    tree: Tree<Omit<LocalContent & { element?: HTMLElement }, "content">>;
+
+    private filter?: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => boolean | undefined;
+    private folder: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => HTMLElement;
+    private leaf: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => HTMLElement;
+
+    constructor(folder: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => HTMLElement, leaf: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => HTMLElement, filter?: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => boolean | undefined)
+    {
+        this.tree = new Tree(Content.tree);
+
+        this.filter = filter;
+        this.folder = folder;
+        this.leaf = leaf;
+
+        const elements = this.tree.accumulate(this.render.bind(this));
+        this.container = dom('div', { class: 'list-none select-none text-light-100 dark:text-dark-100 text-sm ps-2' }, elements);
+    }
+    render(item: Recursive<Omit<LocalContent & { element?: HTMLElement }, "content">>, depth: number): HTMLElement | undefined
+    {
+        if(this.filter && !(this.filter(item, depth) ?? true))
+            return;
+
+        if(item.type === 'folder')
+        {
+            let folded = false;
+            if(item.element)
+                folded = item.element.getAttribute('data-state') === 'open';
+            item.element = this.folder(item, depth);
+
+            if(!!item.parent) item.element.classList.toggle('hidden', item.parent.element!.getAttribute('data-state') === 'closed' || item.parent.element!.classList.contains('hidden'));
+            item.element.setAttribute('data-state', folded ? 'open' : 'closed');
+            item.element.addEventListener('click', () => this.toggle(item));
+
+            return item.element;
+        }
+        else
+        {
+            item.element = this.leaf(item, depth);
+
+            if(!!item.parent) item.element.classList.toggle('hidden', item.parent.element!.getAttribute('data-state') === 'closed' || item.parent.element!.classList.contains('hidden'));
+
+            return item.element;
+        }
+    }
+    update()
+    {
+        this.container.replaceChildren(...this.tree.flatten.map(e => e.element!));
+    }
+    toggle(item?: Omit<LocalContent & { element?: HTMLElement }, 'content'>, state?: boolean)
+    {
+        if(item && item.type === 'folder')
+        {
+            const open = state ?? item.element!.getAttribute('data-state') !== 'open';
+            item.element!.setAttribute('data-state', open ? 'open' : 'closed');
+
+            new Tree([item]).each((e, _, parent) => {
+                if(!parent)
+                    return;
+    
+                e.element!.classList.toggle('hidden', !this.opened(parent) || parent.element!.classList.contains('hidden'));
+            });
+        }
+    }
+    opened(item?: Omit<LocalContent & { element?: HTMLElement }, 'content'>): boolean | undefined
+    {
+        return item ? item.element!.getAttribute('data-state') === 'open' : undefined;
+    }
+}

types/auth.d.ts

@@ -1,4 +1,5 @@
-import type { ComputedRef, Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue';
+import type { SessionConfig } from 'h3'
 
 import 'vue-router';
 declare module 'vue-router'
@@ -13,8 +14,8 @@ declare module 'vue-router'
     }
 }
 
-import 'nuxt';
-declare module 'nuxt'
+import '@nuxt/schema';
+declare module '@nuxt/schema'
 {
     interface RuntimeConfig
     {
@@ -30,9 +31,8 @@ export interface UserRawData {
 }
 
 export interface UserExtendedData {
-  signin: string;
-  lastTimestamp: string;
-  logCount: number;
+  signin: Date;
+  lastTimestamp: Date;
 }
 
 export type Permissions = { permissions: string[] };

types/canvas.d.ts

@@ -7,7 +7,7 @@ export type CanvasColor = {
     class?: string;
 } & {
     hex?: string;
-}
+};
 export interface CanvasNode {
     type: 'group' | 'text';
     id: string;
@@ -17,7 +17,7 @@ export interface CanvasNode {
     height: number;
     color?: CanvasColor;
     label?: string;
-    text?: any;
+    text?: string;
 };
 export interface CanvasEdge {
     id: string;

types/character.d.ts

@@ -1,4 +1,4 @@
-import type { MAIN_STATS, ABILITIES, LEVELS, TRAINING_LEVELS, SPELL_TYPES, CATEGORIES, SPELL_ELEMENTS } from "~/shared/character";
+import type { MAIN_STATS, ABILITIES, LEVELS, TRAINING_LEVELS, SPELL_TYPES, CATEGORIES, SPELL_ELEMENTS } from "#shared/character.util";
 
 export type MainStat = typeof MAIN_STATS[number];
 export type Ability = typeof ABILITIES[number];

types/content.d.ts

@@ -1,62 +0,0 @@
-import type { CanvasContent as Canvas } from "./canvas";
-import type { MapContent as Map } from "./map";
-
-
-export type FileType = keyof ContentMap;
-export interface Overview {
-    path: string;
-    owner: number;
-    title: string;
-    timestamp: Date;
-    navigable: boolean;
-    private: boolean;
-    order: number;
-    visit: number;
-}
-export interface CanvasContent extends Overview {
-    type: 'canvas';
-    content?: Canvas;
-}
-export interface MapContent extends Overview {
-    type: 'map';
-    content?: string;
-}
-export interface MarkdownContent extends Overview {
-    type: 'markdown';
-    content?: string;
-}
-export interface FileContent extends Overview {
-    type: 'file';
-    content?: string;
-}
-export interface FolderContent extends Overview {
-    type: 'folder';
-    content?: null;
-}
-export interface ContentMap
-{
-    markdown: MarkdownContent;
-    file: FileContent;
-    canvas: CanvasContent;
-    map: MapContent;
-    folder: FolderContent;
-}
-
-export type ExploreContent = ContentMap[FileType];
-
-export type TreeItem = ExploreContent & {
-    children?: TreeItem[];
-}
-
-export interface ContentComposable {
-    content: Ref<ExploreContent[]>
-    tree: ComputedRef<TreeItem[]>
-    /**
-     * Fetch the overview of every content from the server.
-     */
-    fetch: (force: boolean) => Promise<void>
-    /**
-     * Get the given content from the server.
-     */
-    get: (path: string) => Promise<void>
-}