refactor(webui): switch to SvelteKit | fix image annotation

webui/src/lib/components/display/blobs/ImageViewer.svelte

@@ -7,7 +7,9 @@
 	import Spinner from '../../utils/Spinner.svelte';
 	import UpObject from '../UpObject.svelte';
 	import { ATTR_LABEL } from '@upnd/upend/constants';
-	import { i18n } from '../../../i18n';
+	import { i18n } from '$lib/i18n';
+	import debug from 'debug';
+	const dbg = debug('kestrel:ImageViewer');
 
 	export let address: string;
 	export let detail: boolean;
@@ -100,6 +102,7 @@
 				}
 			]
 		});
+		dbg('Initialized Annotorious.');
 
 		anno.on('createAnnotation', async (annotation) => {
 			const [_, uuid] = await api.putEntry({
@@ -252,9 +255,7 @@
 	</div>
 </div>
 
-<style global lang="scss">
-	@use '@recogito/annotorious/dist/annotorious.min.css';
-
+<style lang="scss">
 	.image-viewer {
 		display: flex;
 		flex-direction: column;
@@ -296,16 +297,4 @@
 			cursor: zoom-out;
 		}
 	}
-
-	.r6o-editor {
-		font-family: inherit;
-	}
-
-	.a8sUpLink {
-		text-align: initial;
-
-		.link {
-			margin: 0.5em 1em;
-		}
-	}
 </style>

webui/src/lib/styles/annotorious.scss

@@ -0,0 +1,13 @@
+@use '@recogito/annotorious/dist/annotorious.min.css';
+
+.r6o-editor {
+	font-family: inherit;
+}
+
+.a8sUpLink {
+	text-align: initial;
+
+	.link {
+		margin: 0.5em 1em;
+	}
+}

webui/src/lib/styles/main.scss

@@ -2,6 +2,7 @@
 @use 'colors-app';
 @use 'fonts';
 @use 'common';
+@use 'annotorious';
 
 body {
 	height: calc(100vh - 2rem);