Fixed monaco importing all language workers

Added a way to use the source vue files from timeline
Fixed devTimeline providing items in the wrong format

packages/darkroom/package.json

@@ -28,26 +28,26 @@
         "test": "vitest"
     },
     "dependencies": {
-        "@endo/static-module-record": "^1.1.0",
+        "@endo/static-module-record": "^1.1.1",
         "esbuild-wasm": "^0.20.2",
         "path-browserify": "^1.0.1",
         "rxjs": "^7.8.1",
-        "ses": "^1.4.0"
+        "ses": "^1.4.1"
     },
     "devDependencies": {
         "@types/path-browserify": "^1.0.2",
         "@vitest/browser": "^1.4.0",
         "@vitest/ui": "^1.4.0",
         "rimraf": "^5.0.5",
-        "typescript": "^5.4.3",
+        "typescript": "^5.4.5",
         "vite": "^5.2.8",
         "vite-plugin-dts": "^3.8.1",
         "vitest": "^1.4.0",
         "webdriverio": "^8.35.1"
     },
     "optionalDependencies": {
         "@codemirror/lang-javascript": "^6.2.2",
-        "@types/node": "^20.12.3",
+        "@types/node": "^20.12.7",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/tsconfig": "^0.5.1",
         "@vueuse/core": "^10.9.0",

packages/safelight/package.json

@@ -19,7 +19,7 @@
         "lint": "eslint . ./src/**/*[.ts,.js,.scss,.vue] --fix"
     },
     "dependencies": {
-        "@phosphor-icons/vue": "^2.1.6",
+        "@phosphor-icons/vue": "^2.2.1",
         "@quantco/pnpm-licenses": "^2.0.0",
         "@safelight/shared": "workspace:*",
         "@safelight/timeline": "workspace:*",
@@ -28,35 +28,33 @@
         "@vueuse/integrations": "^10.9.0",
         "@vueuse/math": "^10.9.0",
         "@vueuse/rxjs": "^10.9.0",
-        "change-case": "^5.4.3",
+        "change-case": "^5.4.4",
         "dexie": "^3.2.7",
-        "ffprobe-wasm": "^0.3.1",
         "fuzzysearch": "^1.0.3",
         "hash-wasm": "^4.11.0",
         "lodash": "^4.17.21",
         "luxon": "^3.4.4",
         "mime-matcher": "^1.0.5",
         "monaco-editor": "^0.46.0",
         "pinia": "^2.1.7",
-        "primevue": "^3.50.0",
+        "primevue": "^3.51.0",
         "rxjs": "^7.8.1",
         "uuid": "^9.0.1",
         "vue": "^3.4.21",
-        "vue-draggable-resizable": "^3.0.0",
         "vue-markdown-render": "^2.1.1",
         "vue-router": "^4.3.0"
     },
     "devDependencies": {
         "@babel/types": "^7.24.0",
-        "@iconify-json/ph": "^1.1.11",
+        "@iconify-json/ph": "^1.1.12",
         "@tsconfig/node20": "^20.1.4",
         "@types/dom-webcodecs": "^0.1.11",
         "@types/fuzzysearch": "^1.0.2",
         "@types/luxon": "^3.4.2",
-        "@types/node": "^20.12.3",
+        "@types/node": "^20.12.7",
         "@types/uuid": "^9.0.8",
-        "@typescript-eslint/eslint-plugin": "^7.5.0",
-        "@typescript-eslint/parser": "^7.5.0",
+        "@typescript-eslint/eslint-plugin": "^7.6.0",
+        "@typescript-eslint/parser": "^7.6.0",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.19",
@@ -65,25 +63,25 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-tailwindcss": "^3.15.1",
-        "eslint-plugin-vue": "^9.24.0",
+        "eslint-plugin-vue": "^9.24.1",
         "lightningcss": "^1.24.1",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
         "prettier-plugin-tailwindcss": "^0.5.13",
         "rollup-plugin-visualizer": "^5.12.0",
-        "sass": "^1.72.0",
+        "sass": "^1.74.1",
         "strip-ansi": "^7.1.0",
         "tailwindcss": "^3.4.3",
         "ts-node-dev": "^2.0.0",
-        "tsx": "^4.7.1",
-        "typescript": "^5.4.3",
-        "typescript-eslint": "^7.5.0",
+        "tsx": "^4.7.2",
+        "typescript": "^5.4.5",
+        "typescript-eslint": "^7.6.0",
         "unplugin-auto-import": "^0.17.5",
-        "unplugin-turbo-console": "^1.5.1",
+        "unplugin-turbo-console": "^1.6.1",
         "unplugin-vue-components": "^0.26.0",
         "unplugin-vue-router": "^0.8.5",
         "vite": "^5.2.8",
         "vite-plugin-mkcert": "^1.17.5",
-        "vue-tsc": "^2.0.7"
+        "vue-tsc": "^2.0.12"
     }
 }

packages/safelight/src/components/Editor/CodeEditor/Monaco.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-const monaco = await import('monaco-editor');
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import OneMonokai from './themes/OneMonokai-Monaco.json';
 import type { editor } from 'monaco-editor';
 

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

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { Timeline as SLTimeline, type TimelineItem } from '@safelight/timeline';
+import { Timeline as SLTimeline, type TimelineItem } from '@safelight/timeline/source';
 import { v4 as uuidv4 } from 'uuid';
 import { reactive } from 'vue';
 

packages/safelight/src/views/dev/UI.vue

@@ -14,7 +14,6 @@
             <Button @click="timeline1.resizeToFitAll()">Fit</Button>
         </template>
     </Card>
-    <!-- <SLTimeline/> -->
 
     <Card title="Lists">
         <template #content>
@@ -36,7 +35,6 @@
 </template>
 
 <script setup lang="ts">
-// import SLTimeline from '@safelight/timeline';
 import Button from 'primevue/button';
 import Listbox from 'primevue/listbox';
 import { v4 as uuidv4 } from 'uuid';

packages/safelight/src/views/dev/devTimeline.vue

@@ -10,7 +10,7 @@
             </RouterLink>
         </template>
         <template #content>
-            <div style="min-height: 250px; resize: both; overflow: auto">
+            <div style="min-height: 250px; height: 250px; resize: both; overflow: auto">
                 <Timeline :items="items" :invert-scroll-axes="invertScrollAxes" />
             </div>
             <input v-model="invertScrollAxes" type="checkbox" />
@@ -20,70 +20,79 @@
 </template>
 
 <script lang="ts" setup>
-import type { TimelineItem } from '@safelight/timeline';
-import { Timeline } from '@safelight/timeline';
+import type { TimelineItem } from '@safelight/timeline/source';
+import { Timeline } from '@safelight/timeline/source';
 import { v4 as uuidv4 } from 'uuid';
 
 const invertScrollAxes = ref(true);
 
-const items = reactive<TimelineItem[]>([
-    {
-        id: uuidv4(),
+const ids = new Array(17).fill('').map(() => uuidv4());
+
+const items = reactive<{ [key: string]: TimelineItem }>({
+    [ids[0]]: {
+        id: ids[0],
         name: '100 start',
         start: 100,
         duration: 500,
         layer: 0
     },
-    {
-        id: uuidv4(),
+    [ids[1]]: {
+        id: ids[1],
+        name: '100 start',
+        start: 100,
+        duration: 500,
+        layer: 0
+    },
+    [ids[2]]: {
+        id: ids[2],
         name: '588 start',
         start: 588,
         duration: 515,
         layer: 5
     },
-    {
-        id: uuidv4(),
+    [ids[3]]: {
+        id: ids[3],
         name: '314 start',
         start: 314,
         duration: 749,
         layer: 2
     },
-    {
-        id: uuidv4(),
+    [ids[4]]: {
+        id: ids[4],
         name: '300 start',
         start: 300,
         duration: 263,
         layer: 3
     },
-    {
-        id: uuidv4(),
+    [ids[5]]: {
+        id: ids[5],
         name: '30 start',
         start: 30,
         duration: 770,
         layer: 17
     },
-    {
-        id: uuidv4(),
+    [ids[6]]: {
+        id: ids[6],
         name: '664 start',
         start: 664,
         duration: 266,
         layer: 4
     },
-    {
-        id: uuidv4(),
+    [ids[7]]: {
+        id: ids[7],
         name: '366 start',
         start: 366,
         duration: 135,
         layer: 6
     },
-    {
-        id: uuidv4(),
+    [ids[8]]: {
+        id: ids[8],
         name: '380 start',
         start: 380,
         duration: 451,
         layer: 1
     }
-]);
+});
 </script>
 
 <style>
@@ -93,6 +102,12 @@ body {
 }
 </style>
 
+<style scoped>
+:deep(#horizontalContainer) {
+    height: 100%;
+}
+</style>
+
 <route lang="json">
 { "path": "/dev/timeline" }
 </route>

packages/safelight/vite.config.ts

@@ -43,18 +43,14 @@ export default defineConfig({
             vueTemplate: true
         }),
         TurboConsole(),
-        mkcert()
+        mkcert(),
+        visualizer()
     ],
     resolve: {
         alias: {
             '@': fileURLToPath(new URL('./src', import.meta.url))
         }
     },
-    build: {
-        rollupOptions: {
-            plugins: [visualizer()]
-        }
-    },
     server: {
         headers: {
             'Cross-Origin-Embedder-Policy': 'require-corp',

packages/timeline/package.json

@@ -16,6 +16,9 @@
             "import": "./dist/index.mjs",
             "require": "./dist/index.cjs",
             "types": "./dist/index.d.ts"
+        },
+        "./source": {
+            "import": "./src/index.ts"
         }
     },
     "types": "./dist/index.d.ts",
@@ -31,18 +34,18 @@
         "@vueuse/core": "^10.9.0",
         "@vueuse/gesture": "^2.0.0",
         "@vueuse/math": "^10.9.0",
-        "primevue": "^3.50.0",
+        "primevue": "^3.51.0",
         "vue": "3.4.21"
     },
     "devDependencies": {
-        "@types/node": "^20.12.3",
+        "@types/node": "^20.12.7",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/test-utils": "^2.4.5",
         "@vue/tsconfig": "^0.5.1",
         "jsdom": "^24.0.0",
-        "typescript": "^5.4.3",
+        "typescript": "^5.4.5",
         "vite": "^5.2.8",
         "vitest": "^1.4.0",
-        "vue-tsc": "^2.0.7"
+        "vue-tsc": "^2.0.12"
     }
-}
+}