Made basic layout for editor

Removed controllers from safelight
Fixed exports

packages/safelight/src/components/Editor/Library/Library.vue

@@ -79,9 +79,11 @@
 </template>
 
 <script setup lang="ts">
-import type Media from '@/controllers/Media/Media';
+import type BaseProject from '@safelight/shared/base/Project';
+import type Media from '@safelight/shared/Media/Media';
 import { PhMagnifyingGlass, PhSortDescending } from '@phosphor-icons/vue';
 import fuzzysearch from 'fuzzysearch';
+import MimeMatcher from 'mime-matcher';
 import InputGroup from 'primevue/inputgroup';
 import InputGroupAddon from 'primevue/inputgroupaddon';
 import type { UnwrapRef } from 'vue';
@@ -94,6 +96,44 @@ const emit = defineEmits<{
     'update:modelValue': any[];
 }>();
 
+const dropZone = useDropZone(document.body, {
+    onDrop(files) {
+        files?.forEach(project);
+    },
+    dataTypes(types) {
+        return !types.some((val) => {
+            return !new MimeMatcher('image/*', 'video/*').match(val);
+        });
+    }
+});
+
+function loadFile(file: File) {
+    return new Promise<void>((resolve) => {
+        const storingProcessing = useObservable(IdbMediaManager.storeMedia(file));
+        watch(storingProcessing, (s) => {
+            console.log(s?.type, s?.hashProgress);
+        });
+
+        watch(storingProcessing, () => {
+            if (storingProcessing.value && storingProcessing.value.type == 'done') {
+                const existingMedia = project.media.some(
+                    (m) => m.id.value == storingProcessing.value!.id
+                );
+
+                if (!existingMedia) {
+                    const media = new Media(storingProcessing.value.id!);
+
+                    project.media.push(media);
+                    project.activeTimeline.createTimelineItem(media);
+                }
+
+                resolve();
+            }
+        });
+    });
+}
+
+const project = inject<BaseProject>('currentProject');
 const media = useVModel(props, 'media', emit);
 
 const search = ref('');

packages/safelight/src/components/Editor/Monitor/Monitor.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="flex items-center justify-center">
+        <p>Monitor</p>
+    </div>
+</template>
+
+<script setup lang="ts"></script>

packages/safelight/src/components/Editor/Properties/ItemProperties.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex items-center justify-center">
+        <p>Item properties</p>
+    </div>
+</template>

packages/safelight/src/components/Editor/Timeline/Timeline.vue

@@ -0,0 +1,68 @@
+<template>
+    <SLTimeline :items="items" />
+</template>
+
+<script setup lang="ts">
+import { Timeline as SLTimeline, type TimelineItem } from '@safelight/timeline';
+import { v4 as uuidv4 } from 'uuid';
+import { reactive } from 'vue';
+
+const items = reactive<TimelineItem[]>([
+    {
+        id: uuidv4(),
+        name: '100 start',
+        start: 100,
+        duration: 500,
+        layer: 0
+    },
+    {
+        id: uuidv4(),
+        name: '588 start',
+        start: 588,
+        duration: 515,
+        layer: 5
+    },
+    {
+        id: uuidv4(),
+        name: '314 start',
+        start: 314,
+        duration: 749,
+        layer: 2
+    },
+    {
+        id: uuidv4(),
+        name: '300 start',
+        start: 300,
+        duration: 263,
+        layer: 3
+    },
+    {
+        id: uuidv4(),
+        name: '30 start',
+        start: 30,
+        duration: 770,
+        layer: 17
+    },
+    {
+        id: uuidv4(),
+        name: '664 start',
+        start: 664,
+        duration: 266,
+        layer: 4
+    },
+    {
+        id: uuidv4(),
+        name: '366 start',
+        start: 366,
+        duration: 135,
+        layer: 6
+    },
+    {
+        id: uuidv4(),
+        name: '380 start',
+        start: 380,
+        duration: 451,
+        layer: 1
+    }
+]);
+</script>