Merge branch 'dev' into HEAD

This reverts commit 685bd47fc4.

.gitignore

@@ -5,7 +5,6 @@
 .nitro
 .cache
 dist
-content
 
 # Node dependencies
 node_modules
@@ -24,4 +23,7 @@ logs
 .env.*
 !.env.example
 
-db.sqlite-*
+bun.lockb
+db.sqlite
+db.sqlite-wal
+db.sqlite-shm

.vscode/launch.json

@@ -1,31 +0,0 @@
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "client: chrome",
-            "url": "http://localhost:3000",
-            "webRoot": "${workspaceFolder}"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "server: nuxt",
-            "outputCapture": "std",
-            "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
-            "args": [
-                "dev"
-            ],
-        }
-    ],
-    "compounds": [
-        {
-            "name": "fullstack: nuxt",
-            "configurations": [
-                "server: nuxt",
-                "client: chrome"
-            ]
-        }
-    ]
-}

app.vue

@@ -1,4 +1,52 @@
+<template>
+	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
+		<NuxtRouteAnnouncer/>
+		<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" id="mainContainer">
+				<NuxtPage />
+			</div>
+		</NuxtLayout>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Content } from '#shared/content.util';
+import * as Floating from '#shared/floating.util';
+import { Toaster } from '#shared/components.util';
+
+onBeforeMount(() => {
+	Content.init();
+	Floating.init();
+	Toaster.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();
+	})
+});
+</script>
+
 <style>
+.ToastRoot[data-type='error'] {
+	@apply border-light-red;
+	@apply dark:border-dark-red;
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply !bg-opacity-50;
+}
+.ToastRoot[data-type='success'] {
+	@apply border-light-green;
+	@apply dark:border-dark-green;
+	@apply bg-light-green;
+	@apply dark:bg-dark-green;
+	@apply !bg-opacity-50;
+}
 ::-webkit-scrollbar {
 	width: 12px; 
 	height: 12px;
@@ -18,32 +66,125 @@
 	@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;
 
-.loading {
-	@apply w-full;
-	@apply h-full;
-	@apply flex;
-	@apply items-center;
-	@apply justify-center;
-	@apply before:border-4;
-	@apply before:border-accent-purple;
-	@apply before:border-t-transparent;
-	@apply before:rounded-full;
-	@apply before:w-8;
-	@apply before:h-8;
-	@apply before:animate-spin;
+    @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;
 }
 </style>
-
-<script setup lang="ts">
-const page = ref();
-</script>
-
-<template>
-	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
-		<NuxtRouteAnnouncer></NuxtRouteAnnouncer>
-		<NuxtLayout>
-			<NuxtPage ref="page"></NuxtPage>
-		</NuxtLayout>
-	</div>
-</template>

assets/third-party.md

@@ -1,7 +0,0 @@
-### Librairies, framework et outils libres utilisés: 
-- [Vuejs](https://vuejs.org/) - MIT License - Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors
-- [vue-router](https://router.vuejs.org/) - MIT License - Copyright (c) 2019-present Eduardo San Martin Morote
-- [Nuxt](https://nuxt.com/) - MIT License - Copyright (c) 2016-present - Nuxt Team
-- [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils) - MIT License - Copyright (c) 2023 Sébastien Chopin
-
-Le logo a été créé grace aux icones de [Game Icons](https://game-icons.net).

components/EditableMarkdown.vue

@@ -1,130 +0,0 @@
-<style>
-.editor
-{
-    white-space: pre-line;
-    overflow: auto;
-    outline: none;
-    box-shadow: none !important;
-}
-</style>
-
-<template>
-  <div class="editor">
-    <template
-      v-if="model && model.length > 0">
-      <MarkdownRenderer
-        v-if="node"
-        :key="key"
-        :node="node"
-        :proses="{
-          'a': LiveA,
-          'h1': LiveH1,
-          'h2': LiveH2,
-          'h3': LiveH3,
-          'h4': LiveH4,
-          'h5': LiveH5,
-          'h6': LiveH6,
-          'blockquote': LiveBlockquote,
-        }"
-      ></MarkdownRenderer>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import LiveA from "~/components/prose/live/LiveA.vue";
-import LiveH1 from "~/components/prose/live/LiveH1.vue";
-import LiveH2 from "~/components/prose/live/LiveH2.vue";
-import LiveH3 from "~/components/prose/live/LiveH3.vue";
-import LiveH4 from "~/components/prose/live/LiveH4.vue";
-import LiveH5 from "~/components/prose/live/LiveH5.vue";
-import LiveH6 from "~/components/prose/live/LiveH6.vue";
-import LiveBlockquote from "~/components/prose/ProseBlockquote.vue";
-
-import { hash } from 'ohash'
-import { watch, computed } from 'vue'
-import type { Root, Node } from 'hast';
-/* import { diffLines as diff } from 'diff'; */
-
-const model = defineModel<string>();
-
-const parser = useMarkdown();
-const key = computed(() => hash(model.value));
-
-const node = ref<Root>(), changes = ref();
-
-watch(model, update);
-update(model.value, "");
-
-async function update(value: string | undefined, old: string | undefined) {
-  if(value && old)
-  {
-    if(node.value)
-    {
-      /* const differences = diff(old, value, {
-        newlineIsToken: true,
-      });
-
-      let removeStart = 0, removeEnd = 0; //Character count
-      let addStart = 0, addEnd = 0; //Character count
-
-      const needAdd = differences.find(e => e.added) !== undefined;
-      const needRemove = differences.find(e => e.removed) !== undefined;
-
-      for(const difference of differences)
-      {
-        if(!difference.added && !difference.removed)
-        {
-          removeStart += difference.value.length;
-          addStart += difference.value.length;
-        }
-        else if(difference.added)
-        {
-          addEnd = addStart + difference.value.length;
-        }
-        else if(difference.removed)
-        {
-          removeEnd = removeStart + difference.value.length;
-        }
-
-        if((!needAdd || addEnd !== 0) && (!needRemove || removeEnd !== 0))
-          break;
-      }
-
-      const oldNodes = getNodes(node.value.children, removeStart - 1, removeEnd + 1);
-      let newNodes;
-
-      if(oldNodes.length === 0)
-      {
-        node.value = parser(value);
-      }
-      else
-      {
-        const newStart = oldNodes[0].position?.start.offset;
-        const newEnd = oldNodes[oldNodes.length - 1].position?.end.offset;
-
-        const lengthDiff = value.length - old.length;
-
-        newNodes = parser(value.substring(newStart ?? 0, (newEnd ?? 0) + lengthDiff));
-
-        const root = node.value;
-
-        node.value = parser(value);
-      } */
-      node.value = parser(value);
-    }
-    else
-    {
-      node.value = parser(value);
-    }
-  }
-  else if(value)
-  {
-    node.value = parser(value);
-  }
-}
-function getNodes(nodes: Node[], start: number, end: number)
-{
-  return nodes.filter(e => (e.position?.start.offset ?? 0) <= end && (e.position?.end.offset ?? 0) >= start);
-}
-</script>

components/MarkdownRenderer.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import render, { type MDProperties } from '#shared/markdown.util'
+const { content, filter, properties } = defineProps<{
+    content?: string,
+    filter?: string,
+    properties?: MDProperties
+}>();
+
+const container = useTemplateRef('container');
+
+content && onMounted(() => {
+    queueMicrotask(() => {
+        container.value && content && container.value.replaceChildren(render(content, filter, properties));
+    })
+})
+</script>
+
+<template>
+    <div ref="container"></div>
+</template>

components/ThemeSwitch.client.vue

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

components/base/Avatar.vue

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

components/base/Button.vue

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

components/base/Collapsible.vue

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

components/base/Combobox.vue

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

components/base/Dialog.vue

@@ -0,0 +1,39 @@
+<template>
+    <DialogRoot v-if="!priority" v-model="model">
+        <DialogTrigger asChild><Button v-if="!!label">{{ label }}</Button><slot name="trigger" /></DialogTrigger>
+        <DialogPortal v-if="!disabled">
+            <DialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
+            <DialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
+                <DialogTitle v-if="!!title" class="text-3xl font-light relative -top-2">{{ title }}</DialogTitle>
+                <DialogDescription v-if="!!description" class="text-base pb-2">{{ description }}</DialogDescription>
+                <slot />
+                <DialogClose v-if="iconClose" class="text-light-100 dark:text-dark-100 absolute top-2 right-2 inline-flex h-6 w-6 appearance-none items-center justify-center outline-none text-xl" aria-label="Close">
+                    <span aria-hidden>×</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogPortal>
+    </DialogRoot>
+    <AlertDialogRoot v-else v-model="model">
+        <AlertDialogTrigger asChild><Button v-if="!!label">{{ label }}</Button><slot name="trigger" /></AlertDialogTrigger>
+        <AlertDialogPortal v-if="!disabled">
+            <AlertDialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
+            <AlertDialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
+                <AlertDialogTitle v-if="!!title" class="text-3xl font-light relative -top-2">{{ title }}</AlertDialogTitle>
+                <AlertDialogDescription v-if="!!description" class="text-base pb-2">{{ description }}</AlertDialogDescription>
+                <slot />
+            </AlertDialogContent>
+        </AlertDialogPortal>
+    </AlertDialogRoot>
+</template>
+
+<script setup lang="ts">
+const { label, title, description, priority = false, disabled = false, iconClose = true } = defineProps<{
+    label?: string
+    title?: string
+    description?: string
+    priority?: boolean
+    disabled?: boolean
+    iconClose?: boolean
+}>();
+const model = defineModel();
+</script>

components/base/DraggableTree.vue

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

components/base/DraggableTreeItem.vue

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

components/base/DropdownContentRender.vue

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

components/base/DropdownMenu.vue

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

components/base/HoverCard.vue

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

components/base/Kbd.vue

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

components/base/Loading.vue

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

components/base/NumberPicker.vue

@@ -0,0 +1,23 @@
+<template>
+    <Label class="my-2 flex">{{ label }}
+        <NumberFieldRoot :min="min" :max="max" v-model="model" :disabled="disabled" :step="step" class="ms-4 flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+            data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+            <NumberFieldDecrement class="data-[disabled]:opacity-50 px-1"><Icon icon="radix-icons:minus" :inline="true" class="w-6 text-light-100 dark:text-dark-100 opacity-100" /></NumberFieldDecrement>
+            <NumberFieldInput class="text-sm tabular-nums w-20 appearance-none bg-transparent px-2 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+            <NumberFieldIncrement class="data-[disabled]:opacity-50 px-1"><Icon icon="radix-icons:plus" :inline="true" class="w-6 text-light-100 dark:text-dark-100 opacity-100" /></NumberFieldIncrement>
+        </NumberFieldRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+const { min = 0, max = 100, disabled = false, step = 1, label } = defineProps<{
+    min?: number
+    max?: number
+    disabled?: boolean
+    step?: number
+    label?: string
+}>();
+const model = defineModel<number>();
+</script>

components/base/PinPicker.vue

@@ -0,0 +1,20 @@
+<template>
+    <Label class="my-2">{{ label }}
+        <PinInputRoot :disabled="disabled" :default-value="model?.split('')" @update:model-value="(v) => model = v.join('')" @complete="() => emit('complete')" class="flex gap-2 items-center mt-1">
+            <PinInputInput :type="hidden ? 'password' : undefined" v-for="(id, index) in amount" :key="id" :index="index" class="border border-light-35 dark:border-dark-35 w-10 h-10 outline-none 
+            bg-light-20 dark:bg-dark-20 text-center text-light-100 dark:text-dark-100 placeholder:text-light-60 dark:placeholder:text-dark-60 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+            data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 caret-light-50 dark:caret-dark-50" />
+        </PinInputRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+const { hidden = false, amount, label, disabled = false } = defineProps<{
+    hidden?: boolean
+    label?: string
+    amount: number
+    disabled?: boolean
+}>();
+const model = defineModel<string>();
+const emit = defineEmits(['complete']);
+</script>

components/base/Progress.vue

@@ -0,0 +1,13 @@
+<template>
+    <ProgressRoot :max="max" v-model="model" class="my-2 relative overflow-hidden bg-light-25 dark:bg-dark-25 w-48 h-3 data-[shape=thin]:h-1 data-[shape=large]:h-6" :data-shape="shape" style="transform: translateZ(0)" >
+        <ProgressIndicator class="bg-light-50 dark:bg-dark-50 h-full transition-[width] duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]" :style="`width: ${((model ?? 0) / max) * 100}%`" />
+    </ProgressRoot>
+</template>
+
+<script setup lang="ts">
+const { max = 100, shape = 'normal' } = defineProps<{
+    max?: number
+    shape?: 'thin' | 'normal' | 'large'
+}>();
+const model = defineModel<number>();
+</script>

components/base/RadioInput.vue

@@ -0,0 +1,30 @@
+<template>
+    <RadioGroupRoot :disabled="disabled" v-model="model" class="flex flex-col gap-2 p-2">
+        <Label v-for="option in options" class="flex items-center gap-2">
+            <RadioGroupItem :disabled="(option as RadioOption).disabled ?? false"
+                :value="(option as RadioOption).value ?? option"
+                class="border border-light-60 dark:border-dark-35 bg-light-20 dark:bg-dark-25 w-5 h-5 outline-none cursor-default hover:border-light-70 dark:hover:border-dark-40 
+                focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
+                <RadioGroupIndicator>
+                    <Icon icon="radix-icons:check" class="relative w-5 h-5 -top-px -left-px" />
+                </RadioGroupIndicator>
+            </RadioGroupItem>
+            {{ (option as RadioOption).label ?? option }}
+        </Label>
+    </RadioGroupRoot>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+export interface RadioOption { 
+    label: string
+    value: string
+    disabled?: boolean
+}
+
+const { disabled = false, options } = defineProps<{
+    disabled?: boolean
+    options: string[] | RadioOption[]
+}>();
+const model = defineModel<string>();
+</script>

components/base/Select.vue

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

components/base/SelectGroup.vue

@@ -0,0 +1,14 @@
+<template>
+    <SelectGroup :disabled="disabled" class="">
+        <SelectLabel class="">{{ label }}</SelectLabel>
+        <slot />
+    </SelectGroup>
+</template>
+
+<script setup lang="ts">
+import { SelectGroup } from 'radix-vue';
+const { label, disabled = false } = defineProps<{
+	label: string
+    disabled?: boolean
+}>();
+</script>

components/base/SelectItem.vue

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

components/base/SelectSeparator.vue

@@ -0,0 +1,7 @@
+<template>
+    <SelectSeparator class="" />
+</template>
+
+<script setup lang="ts">
+import { SelectSeparator } from 'radix-vue';
+</script>

components/base/SliderInput.vue

@@ -0,0 +1,25 @@
+<template>
+    <Label class="flex justify-center items-center my-2">{{ label }}
+        <SliderRoot class="mx-4 relative flex items-center select-none touch-none w-[160px] h-5"
+            :default-value="model ? [model] : undefined" :v-model="[model]" :disabled="disabled"
+            @update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
+            <SliderTrack class="bg-light-30 dark:bg-dark-30 relative h-1 w-full data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10">
+                <SliderRange class="absolute bg-light-40 dark:bg-dark-40 h-full data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30" />
+            </SliderTrack>
+            <SliderThumb
+                class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60 border border-light-50 dark:border-dark-50 
+                hover:border-light-60 dark:hover:border-dark-60 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20" />
+        </SliderRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+const { min = 0, max = 100, step = 1, label, disabled = false } = defineProps<{
+    min?: number
+    max?: number
+    step?: number
+    label?: string
+    disabled?: boolean
+}>();
+const model = defineModel<number>()
+</script>

components/base/Switch.vue

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

components/base/TagsInput.vue

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

components/base/TextInput.vue

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

components/base/Tooltip.vue

@@ -0,0 +1,85 @@
+<template>
+    <TooltipRoot :delay-duration="delay" :disabled="disabled">
+        <TooltipTrigger asChild>
+            <span tabindex="0"><slot></slot></span>
+        </TooltipTrigger>
+        <TooltipPortal>
+            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50" :class="$attrs.class" :side="side" :align="align" :align-offset="-16" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
+                {{ message }}
+                <TooltipArrow class="fill-light-30 dark:fill-dark-30"></TooltipArrow>
+            </TooltipContent>
+        </TooltipPortal>
+    </TooltipRoot>
+</template>
+
+<script setup lang="ts">
+const { message, delay = 300, side } = defineProps<{
+    message: string
+    delay?: number
+    disabled?: boolean
+    side?: 'left' | 'right' | 'top' | 'bottom'
+    align?: 'start' | 'center' | 'end'
+}>();
+</script>
+
+<style>
+.TooltipContent {
+  animation-duration: .3s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.TooltipContent[data-side="top"] {
+  animation-name: slideUp;
+}
+.TooltipContent[data-side="bottom"] {
+  animation-name: slideDown;
+}
+.TooltipContent[data-side="left"] {
+  animation-name: slideLeft;
+}
+.TooltipContent[data-side="right"] {
+  animation-name: slideRight;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>

components/base/Tree.vue

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

components/canvas/CanvasEdge.vue

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

components/canvas/CanvasNode.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import type { CanvasNode } from '~/types/canvas';
-
-interface Props {
-    node: CanvasNode;
-    zoom: number;
-}
-
-const props = defineProps<Props>();
-
-const size = Math.max(props.node.width, props.node.height);
-const colors = computed(() => {
-    if(props.node.color)
-    {
-        const color = props.node.color;
-        return color?.class ? { bg: `bg-light-${color?.class} dark:bg-dark-${color?.class}`, border: `border-light-${color?.class} dark:border-dark-${color?.class}`} : { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` };
-    }
-    else
-    {
-        return { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` };
-    }
-})
-</script>
-
-<style>
-.bg-colored
-{
-    --tw-bg-opacity: 1;
-    background-color: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
-}
-</style>
-
-<template>
-    <div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
-        <div :class="[colors.border]" class="border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex">
-            <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="colors.bg">
-                <template v-if="node.type === 'group' || zoom > Math.min(0.4, 1000 / size)">
-                    <div v-if="node.text?.length > 0" class="flex items-center">
-                        <Markdown :content="node.text" />
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="flex flex-1 justify-center items-center bg-light-30 dark:bg-dark-30">
-                        <div class="">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                                class="svg-icon lucide-align-left">
-                                <line x1="21" y1="6" x2="3" y2="6"></line>
-                                <line x1="15" y1="12" x2="3" y2="12"></line>
-                                <line x1="17" y1="18" x2="3" y2="18"></line>
-                            </svg>
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-        <div v-if="node.type === 'group' && node.label !== undefined" :class="[colors.border]" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
-    </div>
-</template>

components/canvas/CanvasRenderer.vue

@@ -1,244 +0,0 @@
-<script setup lang="ts">
-import { useDrag, usePinch, useWheel } from '@vueuse/gesture';
-import type { CanvasContent, CanvasNode } from '~/types/canvas';
-import { clamp } from '#imports';
-
-interface Props
-{
-    canvas: CanvasContent;
-}
-const props = defineProps<Props>();
-
-const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
-const canvas = useTemplateRef('canvas');
-
-const reset = (_: MouseEvent) => {
-    zoom.value = minZoom.value; 
-
-    dispX.value = 0; 
-    dispY.value = 0;
-}
-function edgePos(side: 'bottom' | 'top' | 'left' | 'right', pos: { x: number, y: number }, offset: number): { x: number, y: number } {
-    switch (side) {
-        case "left":
-            return {
-                x: pos.x - offset,
-                y: pos.y
-            };
-        case "right":
-            return {
-                x: pos.x + offset,
-                y: pos.y
-            };
-        case "top":
-            return {
-                x: pos.x,
-                y: pos.y - offset
-            };
-        case "bottom":
-            return {
-                x: pos.x,
-                y: pos.y + offset
-            }
-    }
-}
-function getNode(id: string): CanvasNode | undefined
-{
-    return props.canvas.nodes.find(e => e.id === id);
-}
-function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number }, t: 'bottom' | 'top' | 'left' | 'right'): { x: number, y: number } {
-    switch (t) {
-        case "top":
-            return { x: (e.minX + e.maxX) / 2, y: e.minY };
-        case "right":
-            return { x: e.maxX, y: (e.minY + e.maxY) / 2 };
-        case "bottom":
-            return { x: (e.minX + e.maxX) / 2, y: e.maxY };
-        case "left":
-            return { x: e.minX, y: (e.minY + e.maxY) / 2 };
-    }
-}
-function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
-    return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
-}
-function path(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
-    if(from === undefined || to === undefined)
-    {
-        return {
-            path: '',
-            from: {},
-            to: {},
-            toSide: '',
-        }
-    }
-    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
-    return bezier(start, fromSide, end, toSide);
-}
-function bezier(from: { x: number, y: number }, fromSide: 'bottom' | 'top' | 'left' | 'right', to: { x: number, y: number }, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
-    const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
-    return {
-        path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
-        from: from,
-        to: to,
-        side: toSide,
-    };
-}
-function labelCenter(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): string {
-    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
-    const len = Math.hypot(start.x - end.x, start.y - end.y), offset = clamp(len / 2, 70, 150), b = edgePos(fromSide, start, offset), s = edgePos(toSide, end, offset);
-    const center = getCenter(start, end, b, s, 0.5);
-    return `translate(${center.x}px, ${center.y}px)`;
-}
-function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r: { x: number, y: number }, o: { x: number, y: number }, e: number): { x: number, y: number } {
-    const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
-    return {
-        x: s * n.x + l * r.x + c * o.x + u * i.x,
-        y: s * n.y + l * r.y + c * o.y + u * i.y
-    };
-}
-/*
-
-stroke-light-red
-stroke-light-orange
-stroke-light-yellow
-stroke-light-green
-stroke-light-cyan
-stroke-light-purple
-dark:stroke-dark-red
-dark:stroke-dark-orange
-dark:stroke-dark-yellow
-dark:stroke-dark-green
-dark:stroke-dark-cyan
-dark:stroke-dark-purple
-fill-light-red
-fill-light-orange
-fill-light-yellow
-fill-light-green
-fill-light-cyan
-fill-light-purple
-dark:fill-dark-red
-dark:fill-dark-orange
-dark:fill-dark-yellow
-dark:fill-dark-green
-dark:fill-dark-cyan
-dark:fill-dark-purple
-bg-light-red
-bg-light-orange
-bg-light-yellow
-bg-light-green
-bg-light-cyan
-bg-light-purple
-dark:bg-dark-red
-dark:bg-dark-orange
-dark:bg-dark-yellow
-dark:bg-dark-green
-dark:bg-dark-cyan
-dark:bg-dark-purple
-border-light-red
-border-light-orange
-border-light-yellow
-border-light-green
-border-light-cyan
-border-light-purple
-dark:border-dark-red
-dark:border-dark-orange
-dark:border-dark-yellow
-dark:border-dark-green
-dark:border-dark-cyan
-dark:border-dark-purple
-
-*/
-
-const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    event?.preventDefault();
-    dispX.value += x / zoom.value;
-    dispY.value += y / zoom.value;
-}, {
-    domTarget: canvas,
-    eventOptions: { passive: false, }
-})
-const pinchHandler = usePinch(({ event: Event, offset: [z] }: { event: Event, offset: number[] }) => { 
-    event?.preventDefault();
-    console.log(z);
-    zoom.value = clamp(z / 2048, minZoom.value, 3);
-}, {
-    domTarget: canvas,
-    eventOptions: { passive: false, }
-})
-const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    event?.preventDefault();
-    zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
-}, {
-    domTarget: canvas,
-    eventOptions: { passive: false, }
-})
-</script>
-
-<template>
-    <Suspense>
-        <template #default>
-            <div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
-                :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
-                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">
-                    <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
-                        aria-label="Zoom in" data-tooltip-position="left">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path d="M5 12h14"></path>
-                            <path d="M12 5v14"></path>
-                        </svg>
-                    </div>
-                    <div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" aria-label="Reset zoom"
-                        data-tooltip-position="left">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
-                            <path d="M21 3v5h-5"></path>
-                        </svg>
-                    </div>
-                    <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" aria-label="Zoom to fit"
-                        data-tooltip-position="left">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
-                            <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
-                            <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
-                            <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
-                        </svg>
-                    </div>
-                    <div @click="zoom  = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
-                        aria-label="Zoom out" data-tooltip-position="left">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path d="M5 12h14"></path>
-                        </svg>
-                    </div>
-                </div>
-                <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none"
-                    :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
-                    <div>
-                        <CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
-                    </div>
-                    <template v-for="edge of props.canvas.edges">
-                        <div :key="edge.id" v-if="edge.label" class="absolute z-10"
-                            :style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
-                            <div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
-                        </div>
-                    </template>
-                    <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
-                        <CanvasEdge v-for="edge of props.canvas.edges" :key="edge.id"
-                            :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
-                            :color="edge.color" :label="edge.label" />
-                    </svg>
-                </div>
-            </div>
-        </template>
-        <template #fallback>
-            <div class="loading"></div>
-        </template>
-    </Suspense>
-</template>

components/explorer/CommentSide.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-    comments: {
-        type: [Object],
-        required: true,
-    }
-})
-</script>
-
-<template>
-    <div v-if="comments !== undefined && comments !== null" class="site-body-right-column">
-        <div class="site-body-right-column-inner">
-            <div>
-                {{ comments.length }} commentaire{{ comments.length === 1 ? '' : 's' }}
-            </div>
-        </div>
-    </div>
-</template>

components/explorer/ExplorerNavigation.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const route = useRoute();
-const project = computed(() => parseInt(route.params.projectId as string));
-
-const { data: navigation, refresh } = await useFetch(() => `/api/project/${project.value}/navigation`, { immediate: false });
-if(!isNaN(project.value))
-{
-    await refresh();
-}
-
-const emit = defineEmits(['navigate']);
-</script>
-
-<template>
-    <div class="relative flex-auto">
-        <div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto xl:px-4 px-2">
-            <NavigationLink @navigate="e => emit('navigate')" class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
-        </div>
-    </div>
-</template>

components/explorer/NavigationLink.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { Navigation } from '~/types/api';
-
-interface Props {
-    link: Navigation;
-    project?: number;
-}
-
-const props = defineProps<Props>();
-const hasChildren = computed(() => {
-    return props.link && props.link.children && props.link.children.length > 0 || false;
-});
-
-const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.path));
-
-const emit = defineEmits(['navigate']);
-</script>
-
-<template>
-    <div class="py-1" v-if="project && !isNaN(project)">
-        <Accordion v-if="hasChildren" v-model="collapsed" class="data-[type]:after:content-[attr(data-type)] data-[type]:after:border data-[type]:after:border-light-35 data-[type]:dark:after:border-dark-35
-        data-[type]:after:text-sm data-[type]:after:px-1 data-[type]:after:bg-light-20 data-[type]:dark:after:bg-dark-20  data-[type]:after:[font-variant:all-petite-caps]">
-            <template #header>{{ link.title }}</template>
-            <template #content >
-                <NavigationLink @navigate="e => emit('navigate')" class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
-            </template>
-        </Accordion>
-        <NuxtLink v-else @click="e => emit('navigate')" class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75 xl:text-base text-sm flex justify-between items-center
-            data-[type]:after:content-[attr(data-type)] data-[type]:after:border data-[type]:after:border-light-35 data-[type]:dark:after:border-dark-35
-            data-[type]:after:text-sm data-[type]:after:px-1 data-[type]:after:bg-light-20 data-[type]:dark:after:bg-dark-20  data-[type]:after:[font-variant:all-petite-caps]" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
-            active-class="!text-accent-blue relative before:border-l-2 before:border-accent-blue before:absolute before:-top-1 before:-bottom-1 before:-left-4 before:-mx-px" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
-            <div>{{ link.title }}</div>
-        </NuxtLink>
-    </div>
-</template>

components/explorer/PreviewContent.vue

@@ -1,65 +0,0 @@
-<template>
-    <HoverPopup @before-show="fetch">
-        <template #content>
-            <Suspense suspensible>
-                <div :class="[{'is-loaded': fetched}, file?.type === 'Markdown' ? 'overflow-auto' : 'overflow-hidden']">
-                    <div v-if="pending" class="loading w-[550px] h-[450px]"></div>
-                    <template v-else-if="!!file">
-                        <div v-if="file.type === 'Markdown'" class="p-6 ms-6">
-                            <ProseH1>{{ file.title }}</ProseH1>
-                            <Markdown :content="file.content"></Markdown>
-                        </div>
-                        <div v-else-if="file.type === 'Canvas'" class="w-[550px] h-[450px] overflow-hidden">
-                            <CanvasRenderer :canvas="JSON.parse(file.content) " />
-                        </div>
-                        <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
-                            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
-                            <div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
-                        </div>
-                    </template>
-                    <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
-                        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
-                        <div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
-                    </div>
-                </div>
-                <template #fallback><div class="loading w-[550px] h-[450px]"></div></template>
-            </Suspense>
-        </template>
-        <template #default><slot name="default"></slot></template>
-    </HoverPopup>
-</template>
-
-<script setup lang="ts">
-import type { CommentedFile } from '~/types/api';
-
-const props = defineProps({
-    project: {
-        type: Number,
-        required: true,
-    },
-    path: {
-        type: String,
-        required: true,
-    },
-    anchor: {
-        type: String,
-        required: false,
-    }
-})
-const file = ref<CommentedFile | null>();
-const pending = ref(false), fetched = ref(false);
-
-async function fetch()
-{
-    if(fetched.value)
-        return;
-    
-    fetched.value = true;
-    pending.value = true;
-
-    const data = await $fetch(`/api/project/${props.project}/file/${encodeURIComponent(props.path)}`);
-
-    pending.value = false;
-    file.value = data;
-}
-</script>

components/prose/ProseA.vue

@@ -1,50 +0,0 @@
-<template>
-    <Suspense suspensible>
-        <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
-        :to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
-            <PreviewContent :project="project" :path="data[0].path" :anchor="hash">
-                <template #default>
-                    <slot v-bind="$attrs"></slot>
-                    <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
-                        :icon="`icons/link-${data[0].type.toLowerCase()}`" />
-                </template>
-            </PreviewContent>
-        </NuxtLink>
-        <NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
-            <slot v-bind="$attrs"></slot>
-            <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
-                :icon="`icons/link-${data[0].type.toLowerCase()}`" />
-        </NuxtLink>
-        <slot :class="class" v-else v-bind="$attrs"></slot>
-    </Suspense>
-</template>
-
-<script setup lang="ts">
-import { parseURL } from 'ufo';
-
-const props = defineProps({
-    href: {
-        type: String,
-        required: false,
-    },
-    class: {
-        type: String,
-        required: false,
-    }
-});
-
-const route = useRoute();
-const { hash, pathname, protocol } = parseURL(props.href);
-const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
-const data = ref();
-
-if(!!pathname && !protocol)
-{
-    data.value = await $fetch(`/api/project/${project.value}/file`, {
-        query: {
-            search: `%${pathname}`
-        },
-        ignoreResponseError: true,
-    });
-}
-</script>

components/prose/ProseBlockquote.vue

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

components/prose/ProseCode.vue

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

components/prose/ProseEm.vue

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

components/prose/ProseH1.vue

@@ -1,9 +0,0 @@
-<template>
-  <h1 :id="parseId(id)" class="text-5xl font-thin mt-3 mb-8 first:pt-0 pt-2 relative sm:right-8 right-4">
-    <slot />
-  </h1>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-</script>

components/prose/ProseH2.vue

@@ -1,11 +0,0 @@
-<template>
-  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2 relative sm:right-8 right-4">
-    <slot />
-  </h2>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>

components/prose/ProseH3.vue

@@ -1,11 +0,0 @@
-<template>
-  <h3 :id="parseId(id)" class="text-2xl font-bold  mt-2 mb-4">
-    <slot />
-  </h3>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>

components/prose/ProseH4.vue

@@ -1,9 +0,0 @@
-<template>
-  <h4 :id="parseId(id)" class="text-xl font-semibold my-2" style="font-variant: small-caps;">
-    <slot />
-  </h4>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-</script>

components/prose/ProseH5.vue

@@ -1,11 +0,0 @@
-<template>
-  <h5 :id="parseId(id)" class="text-lg font-semibold my-1">
-    <slot />
-  </h5>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>

components/prose/ProseH6.vue

@@ -1,11 +0,0 @@
-<template>
-  <h6 :id="parseId(id)">
-    <slot />
-  </h6>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>

components/prose/ProseHr.vue

@@ -1,3 +0,0 @@
-<template>
-  <hr class="border-light-35 dark:border-dark-35 m-4">
-</template>

components/prose/ProseImg.vue

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

components/prose/ProseLi.vue

@@ -1,3 +0,0 @@
-<template>
-  <li class="before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4"><slot /></li>
-</template>

components/prose/ProseOl.vue

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

components/prose/ProseP.vue

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

components/prose/ProsePre.vue

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

components/prose/ProseScript.vue

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

components/prose/ProseStrong.vue

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

components/prose/ProseTable.vue

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

components/prose/ProseTag.vue

@@ -1,54 +0,0 @@
-<template>
-    <HoverPopup @before-show="fetch">
-        <template #content>
-            <Suspense suspensible>
-                <div class="mw-[400px]">
-                    <div v-if="fetched === false" class="loading w-[400px] h-[150px]"></div>
-                    <template v-else-if="!!data">
-                        <div v-if="data.description" class="pb-4 pt-3 px-8">
-                            <span class="text-2xl font-semibold">#{{ data.tag }}</span>
-                            <Markdown :content="data.description"></Markdown>
-                        </div>
-                        <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
-                            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
-                            <div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
-                        </div>
-                    </template>
-                    <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
-                        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
-                        <div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
-                    </div>
-                </div>
-                <template #fallback><div class="loading w-[400px] h-[150px]"></div></template>
-            </Suspense>
-        </template>
-        <template #default>
-            <span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
-                <slot></slot>
-            </span>
-        </template>
-    </HoverPopup>
-</template>
-
-<script setup lang="ts">
-import type { Tag } from '~/types/api';
-
-const { tag } = defineProps({
-    tag: {
-        type: String,
-        required: true,
-    }
-});
-
-const data = ref<Tag>(), fetched = ref(false);
-const route = useRoute();
-const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
-async function fetch()
-{
-    if(fetched.value)
-        return;
-
-    data.value = await $fetch(`/api/project/${project.value}/tags/${encodeURIComponent(tag)}`);
-    fetched.value = true;
-}
-</script>

components/prose/ProseTbody.vue

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

components/prose/ProseTd.vue

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

components/prose/ProseTh.vue

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

components/prose/ProseThead.vue

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

components/prose/ProseTr.vue

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

components/prose/ProseUl.vue

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

components/prose/live/LiveA.vue

@@ -1,5 +0,0 @@
-<template>
-    <span class="text-accent-blue inline-flex items-center cursor-pointer">
-        <slot></slot>
-    </span>
-</template>

components/prose/live/LiveBlockquote.vue

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

components/prose/live/LiveH1.vue

@@ -1,9 +0,0 @@
-<template>
-  <h1 :id="parseId(id)" class="text-5xl font-thin mt-3 mb-8 first:pt-0 pt-2">
-    <slot />
-  </h1>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-</script>

components/prose/live/LiveH2.vue

@@ -1,11 +0,0 @@
-<template>
-  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2">
-    <slot />
-  </h2>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>

components/prose/live/LiveH3.vue

@@ -1,11 +0,0 @@
-<template>
-  <h3 :id="parseId(id)" class="text-2xl font-bold  mt-2 mb-4">
-    <slot />
-  </h3>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>

components/prose/live/LiveH4.vue

@@ -1,9 +0,0 @@
-<template>
-  <h4 :id="parseId(id)" class="text-xl font-semibold my-2" style="font-variant: small-caps;">
-    <slot />
-  </h4>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-</script>

components/prose/live/LiveH5.vue

@@ -1,11 +0,0 @@
-<template>
-  <h5 :id="parseId(id)" class="text-lg font-semibold my-1">
-    <slot />
-  </h5>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>

components/prose/live/LiveH6.vue

@@ -1,11 +0,0 @@
-<template>
-  <h6 :id="parseId(id)">
-    <slot />
-  </h6>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>

components/prose/live/LiveTag.vue

@@ -1,5 +0,0 @@
-<template>
-    <span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
-        <slot></slot>
-    </span>
-</template>

components/standard/Accordion.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const collapsed = defineModel<boolean>({
-    default: true,
-});
-</script>
-<template>
-    <div @click="collapsed = !collapsed" class="flex gap-2 items-center cursor-pointer hover:text-opacity-75 text-light-100 dark:text-dark-100" :class="$attrs.class">
-        <div class="w-4 h-4 transition-transform" :class="{'-rotate-90': collapsed}">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M3 8L12 17L21 8"></path>
-            </svg>
-        </div>
-        <div class="font-semibold xl:text-base text-sm flex-1"><slot name="header"></slot></div>
-    </div>
-    <div v-if="!collapsed">
-        <slot name="content"></slot>
-    </div>
-</template>

components/standard/Dialog.vue

@@ -1,41 +0,0 @@
-<template>
-    <Teleport to="#teleports" v-if="visible">
-        <div @click.self="() => !focused && hide()" class="z-[100] absolute top-0 bottom-0 left-0 right-0 bg-light-0 dark:bg-dark-0 !bg-opacity-80 flex justify-center items-center">
-            <div class="relative border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 min-h-40 min-w-72">
-                <span v-if="closeIcon" class="cursor-pointer absolute top-1 right-1 flex hover:opacity-75" @click="() => hide()"><Icon :width="20" :height="20" icon="icons/close" /></span>
-                <div class="p-6" :class="$attrs.class">
-                    <slot></slot>
-                </div>
-            </div>
-        </div>
-    </Teleport>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-    focused: {
-        type: Boolean,
-        defualt: false,
-    },
-    closeIcon: {
-        type: Boolean,
-        default: true,
-    }
-})
-
-const emit = defineEmits(['show', 'hide']);
-const visible = ref(false);
-
-function show()
-{
-    visible.value = true;
-    emit('show');
-}
-function hide()
-{
-    visible.value = false;
-    emit('hide');
-}
-
-defineExpose({hide, show});
-</script>

components/standard/Highlight.vue

@@ -1,27 +0,0 @@
-<template>
-    <div>
-        {{beforeText}}<span class="font-bold">{{matchedText}}</span>{{afterText}}
-    </div>
-</template>
-
-<script setup lang="ts">
-interface Prop
-{
-    text: string;
-    matched: string;
-}
-const props = defineProps<Prop>();
-
-const beforeText = computed(() => {
-    const pos = props.text.toLowerCase().indexOf(props.matched.toLowerCase());
-    return props.text.substring(0, pos);
-})
-const matchedText = computed(() => {
-    const pos = props.text.toLowerCase().indexOf(props.matched.toLowerCase());
-    return props.text.substring(pos, pos + props.matched.length);
-})
-const afterText = computed(() => {
-    const pos = props.text.toLowerCase().indexOf(props.matched.toLowerCase()) + props.matched.length;
-    return props.text.substring(pos);
-})
-</script>

components/standard/HoverPopup.vue

@@ -1,52 +0,0 @@
-<template>
-    <Teleport to="#teleports" v-if="display">
-        <div class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 overflow-hidden" :style="pos"
-            @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
-            <slot name="content"></slot>
-        </div>
-    </Teleport>
-    <span ref="el" :class="$attrs.class" @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
-        <slot name="default"></slot>
-    </span>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue';
-
-const display = ref(false), fetched = ref(false);
-const el = useTemplateRef('el'), pos = ref<Record<string, string>>();
-const emit = defineEmits(['beforeShow', 'beforeHide']);
-
-async function show()
-{
-    if(display.value)
-        return;
-
-    emit('beforeShow');
-
-    const rect = (el.value as HTMLDivElement)?.getBoundingClientRect();
-
-    if(!rect)
-        return;
-
-    const r: Record<string, string> = {};
-    if (rect.bottom + 450 < window.innerHeight)
-        r.top = (rect.bottom + 4) + "px";
-    else
-        r.bottom = (window.innerHeight - rect.top + 4) + "px";
-    if (rect.right + 550 < window.innerWidth)
-        r.left = rect.left + "px";
-    else
-        r.right = (window.innerWidth - rect.right + 4) + "px";
-
-    pos.value = r;
-    display.value = true;
-}
-let debounceFn: () => void, timeout: NodeJS.Timeout;
-function debounce(fn: () => void, ms: number)
-{
-    debounceFn = fn;
-    clearTimeout(timeout);
-    timeout = setTimeout(debounceFn, ms);
-}
-</script>

components/standard/Icon.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-interface Prop
-{
-    icon: string;
-    width: number;
-    height: number;
-}
-defineProps<Prop>();
-</script>
-
-<template>
-    <span :class="$attrs.class" class="inline-block bg-light-100 dark:bg-dark-100 [mask-size:100%] [mask-repeat:no-repeat] [mask-position:center]"  :style="`width: ${width}px; height: ${height}px; mask-image: url(/${icon}.svg)`"></span>
-</template>

components/standard/Input.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const emit = defineEmits(['input', 'change', 'focus', 'blur']);
-const model = defineModel();
-</script>
-
-<template>
-    <input v-model="model" v-bind="$attrs" @input="e => emit('input', e)" @change="e => emit('change', e)" @focus="e => emit('focus', e)" @blur="e => emit('blur', e)"
-    class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 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"/>
-</template>

components/standard/InputField.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-interface Prop
-{
-    error?: string | boolean;
-    title: string;
-}
-const props = defineProps<Prop>();
-const model = defineModel<string>();
-
-const err = ref<string | boolean | undefined>(props.error);
-
-watchEffect(() => err.value = props.error);
-</script>
-
-<template>
-    <div class="m-1 flex justify-between items-center gap-8">
-        <label v-if="title" class="pe-4">{{ title }}</label>
-        <Input class="flex-1" @input="err = false" :class="{ 'input-has-error': !!err }" v-model="model" v-bind="$attrs" />
-    </div>
-    <span v-if="err && typeof err === 'string'" class="text-light-red dark:text-dark-red block pb-2">{{ err }}</span>
-</template>

components/standard/Markdown.vue

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

components/standard/MarkdownRenderer.vue

@@ -1,111 +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 ProseCode from '~/components/prose/ProseCode.vue';
-import ProsePre from '~/components/prose/ProsePre.vue';
-import ProseEm from '~/components/prose/ProseEm.vue';
-import ProseH1 from '~/components/prose/ProseH1.vue';
-import ProseH2 from '~/components/prose/ProseH2.vue';
-import ProseH3 from '~/components/prose/ProseH3.vue';
-import ProseH4 from '~/components/prose/ProseH4.vue';
-import ProseH5 from '~/components/prose/ProseH5.vue';
-import ProseH6 from '~/components/prose/ProseH6.vue';
-import ProseHr from '~/components/prose/ProseHr.vue';
-import ProseImg from '~/components/prose/ProseImg.vue';
-import ProseUl from '~/components/prose/ProseUl.vue';
-import ProseOl from '~/components/prose/ProseOl.vue';
-import ProseLi from '~/components/prose/ProseLi.vue';
-import ProseStrong from '~/components/prose/ProseStrong.vue';
-import ProseTable from '~/components/prose/ProseTable.vue';
-import ProseTag from '~/components/prose/ProseTag.vue';
-import ProseThead from '~/components/prose/ProseThead.vue';
-import ProseTbody from '~/components/prose/ProseTbody.vue';
-import ProseTd from '~/components/prose/ProseTd.vue';
-import ProseTh from '~/components/prose/ProseTh.vue';
-import ProseTr from '~/components/prose/ProseTr.vue';
-import ProseScript from '~/components/prose/ProseScript.vue';
-
-const proseList = {
-    "p": ProseP,
-    "a": ProseA,
-    "blockquote": ProseBlockquote,
-    "code": ProseCode,
-    "pre": ProsePre,
-    "em": ProseEm,
-    "h1": ProseH1,
-    "h2": ProseH2,
-    "h3": ProseH3,
-    "h4": ProseH4,
-    "h5": ProseH5,
-    "h6": ProseH6,
-    "hr": ProseHr,
-    "img": ProseImg,
-    "ul": ProseUl,
-    "ol": ProseOl,
-    "li": ProseLi,
-    "strong": ProseStrong,
-    "table": ProseTable,
-    "tag": ProseTag,
-    "thead": ProseThead,
-    "tbody": ProseTbody,
-    "td": ProseTd,
-    "th": ProseTh,
-    "tr": ProseTr,
-    "script": ProseScript
-};
-
-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/standard/NavBar.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { useTemplateRef } from 'vue';
-
-const containerRef = useTemplateRef("container");
-const { loggedIn, user } = useUserSession();
-const { direction } = useSwipe(window, { threshold: 150 });
-
-watch(direction, () => {
-    if(direction.value === 'right')
-        toggleNavigation(true);
-    if(direction.value === 'left')
-        toggleNavigation(false);
-});
-
-function toggleNavigation(bool?: boolean)
-{
-	containerRef.value?.setAttribute('aria-expanded', bool === undefined ? (containerRef.value?.getAttribute('aria-expanded') !== 'true').toString() : bool.toString());
-}
-const hideNavigation = () => toggleNavigation(false);
-onMounted(() => {
-    const links = containerRef.value?.getElementsByTagName('a');
-    if(links)
-    {
-        for(const link of links)
-        {
-            link.addEventListener("click", hideNavigation);
-        }
-    }
-})
-onUnmounted(() => {
-    const links = containerRef.value?.getElementsByTagName('a');
-    if(links)
-    {
-        for(const link of links)
-        {
-            link.addEventListener("click", hideNavigation);
-        }
-    }
-})
-</script>
-
-<template>
-	<div ref="container" aria-expanded="false" class="group flex h-screen overflow-hidden">
-        <div class="z-50 sm:hidden block absolute top-0 left-0 p-2 border-e border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25" @click="e => toggleNavigation()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="w-4 h-4 fill-light-100 dark:fill-dark-100">
-                <line x1="21" y1="6" x2="3" y2="6"></line>
-                <line x1="15" y1="12" x2="3" y2="12"></line>
-                <line x1="17" y1="18" x2="3" y2="18"></line>
-            </svg>
-        </div>
-        <div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-0 top-0 z-40 xl:w-96 sm:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-sm:absolute max-sm:-top-0 max-sm:-bottom-0 sm:left-0 max-sm:-left-full max-sm:group-aria-expanded:left-0 max-sm:transition-[left] py-8 max-sm:z-40">
-            <div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
-                <div class="flex justify-between items-center">
-                    <NuxtLink @click="hideNavigation" class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
-                    <div class="flex gap-4 items-center">
-                        <ThemeSwitch />
-                        <NuxtLink @click="hideNavigation" class="" :to="{ path: '/user/profile', force: true }"><div class=" hover:border-opacity-70 flex border p-px border-light-70 dark:border-dark-70">
-                            <Icon v-if="!loggedIn" icon="icons/user-login" :width=28 :height=28 />
-                            <Picture v-else :src="`/users/${user?.id}/small.jpg`" :width=28 :height=28 class="flex" >
-                                <Icon :icon="`icons/unknown`" :width=28 :height=28 ></Icon>
-                            </Picture>
-                        </div></NuxtLink>
-                    </div>
-                </div>
-                <div class="flex"><SearchView @navigate="hideNavigation" /></div>
-                <slot></slot>
-            </div>
-            <div class="text-center xl:text-sm text-xs text-light-70 dark:text-dark-70">
-                <NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
-                <p>Copyright Peaceultime - 2024</p>
-            </div>
-        </div>
-    </div>
-</template>

components/standard/Picture.vue

@@ -1,31 +0,0 @@
-<template>
-    <span>
-        <img v-show="src && !fallback" @load="hideFallback" @error="showFallback" :src="src" :width="width" :height="height" />
-        <span v-show="!src || fallback"><slot></slot></span>
-    </span>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-    src: {
-        type: String,
-    },
-    width: {
-        type: Number,
-    },
-    height: {
-        type: Number,
-    }
-});
-
-const fallback = ref(false);
-
-const showFallback = () => toggleFallback(true);
-const hideFallback = () => toggleFallback(false);
-
-function toggleFallback(toggle: boolean): void
-{
-    console.log("Something happened")
-    fallback.value = toggle;
-}
-</script>

components/standard/SearchView.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import type { Search, File, Project, User } from '~/types/api';
-
-const input = ref(''), results = ref<Search>({ projects: [], files: [], users: [] });
-const pos = ref<DOMRect>(), loading = ref(false);
-
-let timeout: NodeJS.Timeout;
-
-const emit = defineEmits(['navigate']);
-
-function search(e: Event)
-{
-    pos.value = (e.currentTarget as HTMLElement)?.getBoundingClientRect();
-
-    loading.value = true;
-    clearTimeout(timeout);
-    timeout = setTimeout(debounced, 250);
-}
-async function debounced()
-{
-    if(!input.value)
-        return;
-
-    try 
-    {
-        const fetch = await useFetch(`/api/search`, {
-            query: {
-                "search": `%${input.value}%`
-            }
-        });
-
-        results.value = fetch.data.value;
-    }
-    catch (e) {
-        results.value = { projects: [], files: [], users: [] };
-    }
-
-    loading.value = false;
-}
-</script>
-
-<template>
-    <div class="w-full border border-light-30 dark:border-dark-30">
-        <Input class="w-full" type="text" placeholder="Recherche" v-model="input" @input="search" />
-    </div>
-    <Teleport to="#teleports" v-if="input !== '' && !!pos">
-        <div class="absolute z-50 border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100 divide-y divide-light-35 dark:divide-dark-35 max-h-96 overflow-auto
-        scroll"
-            :style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
-            <div class="loading" v-if="loading"></div>
-            <template v-else>
-                <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.projects" :key="result.id"
-                    @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
-                    @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
-                    @mousedown.prevent="navigateTo(`/explorer/${result.id}/${result.home}`); input = ''; emit('navigate');">
-                    <div class="">
-                        <Highlight class="text-lg" :text="result.name" :matched="input" />
-                        <div class="flex justify-between text-sm">
-                            <div class="">{{ result.username }}</div>
-                            <div class="">{{ result.pages }} pages</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.files" :key="result.id"
-                    @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
-                    @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
-                    @mousedown.prevent="navigateTo(`/explorer/${result.project}/${result.path}`); input = ''; emit('navigate');">
-                    <div class="">
-                        <Highlight class="text-lg" :text="result.title" :matched="input" />
-                        <div class="flex justify-between text-sm">
-                            <div class="">{{ result.username }}</div>
-                            <div class="">{{ result.comments }} commentaires</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.users" :key="result.id"
-                    @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
-                    @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
-                    @mousedown.prevent="navigateTo(`/users/${result.id}`); input = ''; emit('navigate');">
-                    <div class="">
-                        <Highlight class="text-lg" :text="result.username" :matched="input" />
-                    </div>
-                </div>
-                <div class=""
-                    v-if="results.projects.length === 0 && results.files.length === 0 && results.users.length === 0">
-                    Aucun résultat
-                </div>
-            </template>
-        </div>
-    </Teleport>
-</template>

components/standard/ThemeIcon.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-interface Prop
-{
-    icon: string;
-    width: number;
-    height: number;
-}
-defineProps<Prop>();
-</script>
-
-<template>
-    <span>
-        <img :src="`/icons/${icon}.light.svg`" class="block dark:hidden" :width="width" :height="height" />
-        <img :src="`/icons/${icon}.dark.svg`" class="dark:block hidden" :width="width" :height="height" />
-    </span>
-</template>

components/standard/ThemeSwitch.client.vue

@@ -1,39 +0,0 @@
-<script setup>
-const colorMode = useColorMode()
-
-const isDark = computed({
-    get() {
-        return colorMode.value === 'dark'
-    },
-    set() {
-        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-    }
-})
-</script>
-
-<template>
-    <div class="flex relative">
-        <span class="hidden dark:block absolute top-[3px] left-[2px] z-[1] px-[5px]">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-light-100 dark:stroke-dark-100">
-                <path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
-            </svg>
-        </span>
-        <div class="
-            before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 before:opacity-0 before:block before:z-10
-            after:transition-all after:w-4 after:h-4 after:border after:border-light-30 dark:after:border-dark-30 after:block after:m-[3px] after:top-[-1px] after:pointer-events-none after:absolute after:left-0 after:bg-light-0 after:translate-x-[1px] dark:after:translate-x-[26px]
-            inline-block relative cursor-pointer w-[50px] h-[22px] select-none border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-30 dark:hover:border-dark-35" @click="isDark = !isDark"></div>
-        <span class="block dark:hidden absolute top-[3px] left-[22px] z-[1] px-[5px]">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-light-100 dark:stroke-dark-100 ">
-                <circle cx="12" cy="12" r="4"></circle>
-                <path d="M12 2v2"></path>
-                <path d="M12 20v2"></path>
-                <path d="m4.93 4.93 1.41 1.41"></path>
-                <path d="m17.66 17.66 1.41 1.41"></path>
-                <path d="M2 12h2"></path>
-                <path d="M20 12h2"></path>
-                <path d="m6.34 17.66-1.41 1.41"></path>
-                <path d="m19.07 4.93-1.41 1.41"></path>
-            </svg>
-        </span>
-    </div>
-</template>

components/standard/Upload.vue

@@ -1,27 +0,0 @@
-<template>
-    <label>
-        <slot></slot>
-        <input ref="input" :accept="accept" :multiple="multiple" type="file" class="hidden" @change.self="(e) => files = [...(e.target as HTMLInputElement)?.files ?? []]"/>
-    </label>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-    accept: {
-        type: String,
-    },
-    multiple: {
-        type: Boolean,
-        default: false,
-    }
-});
-
-const input = useTemplateRef('input');
-const files = ref<File[]>([]);
-
-watch([files], () => emit('change', files.value));
-
-const emit = defineEmits(['change']);
-
-defineExpose({ files });
-</script>

composables/useContent.ts

@@ -0,0 +1,64 @@
+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(() => {
+            const arr: TreeItem[] = [];
+            for(const element of contentState.value)
+            {
+                addChild(arr, element);
+            }
+            return arr;
+        }),
+        fetch,
+        get,
+    }
+}
+
+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, force: boolean = false): Promise<ExploreContent | undefined> {
+    const content = useContentState()
+    const value = content.value;
+    const item = value.find(e => e.path === path);
+
+    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 {
+    const parent = arr.find(f => e.path.startsWith(f.path));
+
+    if(parent)
+    {
+        if(!parent.children)
+            parent.children = [];
+
+        addChild(parent.children, e);
+    }
+    else
+    {
+        arr.push({ ...e });
+        arr.sort((a, b) => {
+            if(a.order !== b.order)
+                return a.order - b.order;
+            return a.title.localeCompare(b.title);
+        });
+    }
+}

composables/useDatabase.ts

@@ -1,21 +1,22 @@
 import { Database } from "bun:sqlite";
+import { BunSQLiteDatabase, drizzle } from "drizzle-orm/bun-sqlite";
+import * as schema from '../db/schema';
 
-let instance: Database | undefined;
+let instance: BunSQLiteDatabase<typeof schema> & {
+    $client: Database;
+};
+export default function useDatabase()
+{
+    if(!instance)
+    {
+        const database = useRuntimeConfig().database;
+        const sqlite = new Database(database);
+        instance = drizzle({ client: sqlite, schema, /* logger: true */ });
 
-export default function useDatabase(): Database {
-    if(instance === undefined)
-        instance = getDatabase();
+        instance.run("PRAGMA journal_mode = WAL;");
+        instance.run("PRAGMA foreign_keys = true;");
+        instance.run("PRAGMA optimize=0x10002;");
+    }
 
     return instance;
 }
-
-function getDatabase(): Database
-{
-    const { dbFile } = useRuntimeConfig();
-
-    const db =  new Database(dbFile);
-
-    db.exec("PRAGMA journal_mode = WAL;");
-
-    return db;
-}

composables/useMarkdown.ts

@@ -4,26 +4,55 @@ import RemarkParse from "remark-parse";
 
 import RemarkRehype from 'remark-rehype';
 import RemarkOfm from 'remark-ofm';
-import RemarkBreaks from 'remark-breaks'
 import RemarkGfm from 'remark-gfm';
+import RemarkBreaks from 'remark-breaks';
 import RemarkFrontmatter from 'remark-frontmatter';
-import RehypeRaw from 'rehype-raw';
+import StripMarkdown from 'strip-markdown';
+import RemarkStringify from 'remark-stringify';
 
-export default function useMarkdown(): (md: string) => Root
+interface Parser
 {
-    let processor: Processor;
+    parse: (md: string) => Promise<Root>;
+    parseSync: (md: string) => Root;
+    text: (md: string) => string;
+}
+export default function useMarkdown(): Parser
+{
+    let processor: Processor, processorSync: Processor;
 
     const parse = (markdown: string) => {
         if (!processor) 
         {
             processor = unified().use([RemarkParse, RemarkGfm, RemarkOfm, RemarkBreaks, RemarkFrontmatter]);
-            processor.use(RemarkRehype, { allowDangerousHtml: true });
-            processor.use(RehypeRaw);
+            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;
+    const text = (markdown: string) => {
+        if (!processor) 
+        {
+            processor = unified().use([RemarkParse, RemarkGfm, RemarkOfm, RemarkBreaks, RemarkFrontmatter ]);
+            processor.use(StripMarkdown, { remove: [ 'comment', 'tag', 'callout' ] });
+            processor.use(RemarkStringify);
+        }
+
+        const processed = processor.processSync(markdown);
+        return String(processed);
+    }
+
+    return { parse, parseSync, text };
 }

composables/useProject.ts

@@ -1,50 +0,0 @@
-import type { Project } from "~/types/api";
-
-export default function useProject()
-{
-    const project = useCookie('project');
-
-    const id = useState<number>("projectId", () => parseInt(project.value ?? '0'));
-    const name = useState<string>("projectName", undefined);
-    const owner = useState<number>("projectOwner", undefined);
-    const home = useState<string | null>("projectHomepage", () => null);
-    const summary = useState<string | null>("projectSummary", () => null);
-
-    return {
-        id, name, owner, home, summary, get, set
-    };
-}
-
-async function get(): Promise<boolean> {
-    const id = useState<number>("projectId");
-
-    if (!id.value)
-        return false;
-
-    try {
-        const result = await $fetch(`/api/project/${id.value}`) as Project;
-
-        const name = useState<string>("projectName");
-        const owner = useState<number>("projectOwner");
-        const home = useState<string | null>("projectHomepage");
-        const summary = useState<string | null>("projectSummary");
-
-        name.value = result.name;
-        owner.value = result.owner;
-        home.value = result.home;
-        summary.value = result.summary;
-
-        return true;
-    } catch(e) {
-        return false;
-    }
-}
-async function set(id: number): Promise<boolean> {
-    const _id = useState<number>("projectId");
-
-    _id.value = id;
-    const project = useCookie('project');
-    project.value = id.toString();
-
-    return await get();
-}

composables/useShortcuts.ts

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

composables/useUserSession.ts

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