From ae1907487e7d1d751fd73eb6e7ef0639039cc3eb Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 22 Nov 2025 18:23:20 +0100
Subject: [PATCH 01/14] chore: tried a bunch of stuff but nothing is working,
 so rewriting state a bit now

---
 app/components/Editor/Categories.vue |  2 +-
 app/composables/useFileState.ts      | 42 ++++++++++++++++++-----
 app/composables/useFiles.ts          | 51 ++++++++++------------------
 app/layouts/default.vue              |  8 ++++-
 app/shared/types.ts                  |  2 +-
 5 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/app/components/Editor/Categories.vue b/app/components/Editor/Categories.vue
index 67980dc..feffa2a 100644
--- a/app/components/Editor/Categories.vue
+++ b/app/components/Editor/Categories.vue
@@ -85,7 +85,7 @@ function updateExtraField(updatedFields: (IPTCFieldWithValue & { type: 'extra' }
   <div v-if="state" class="flex flex-col gap-5">
     <BaseCategory v-for="category in categories" :key="category.title" :title="category.title">
       <div class="flex flex-col gap-2">
-        <div v-for="(row, index) in category.rows" :key="row.join(':')" class="flex flex-col sm:flex-row items-center gap-2 w-full">
+        <div v-for="(row, index) in category.rows" :key="row.join(':')" class="flex flex-col sm:flex-row gap-2 w-full">
           <template v-for="{ key, width } in category.rows[index]" :key="`${index}-${key}`">
             <EditorField
               v-if="fieldsByKey[key]"
diff --git a/app/composables/useFileState.ts b/app/composables/useFileState.ts
index 0c7da94..911c187 100644
--- a/app/composables/useFileState.ts
+++ b/app/composables/useFileState.ts
@@ -1,3 +1,4 @@
+import type { FileWithMetadata } from '~/shared/types'
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval.mjs'
 import { supported } from 'browser-fs-access'
@@ -9,7 +10,7 @@ const fileStates = ref<FileState>({})
 const isLoading = ref(true)
 
 export default function useFileState() {
-  const { loadedFiles, updateMetadata, reloadFiles, markAsDownloaded } = useFiles()
+  const { updateMetadata, markAsDownloaded, fileById } = useFiles()
 
   if (!import.meta.env.SSR) {
     loadFileStatesFromIndexedDB()
@@ -25,8 +26,16 @@ export default function useFileState() {
   }
 
   async function updateIdb() {
-    const { set } = useIDBKeyval<FileState>('file-states', fileStates.value)
-    await set(toRaw(fileStates.value))
+    const { set } = useIDBKeyval<FileState>('file-states', {})
+
+    const rawFileStates = Object.entries(toRaw(fileStates.value)).reduce<FileState>((acc, [fileId, fields]) => {
+      acc[fileId] = toRaw(fields.map(field => toRaw(field)))
+      return acc
+    }, {})
+
+    console.log('Setting value to:', Object.values(rawFileStates)[0]![30]!.original)
+
+    await set(rawFileStates)
   }
 
   function setupState() {
@@ -58,8 +67,15 @@ export default function useFileState() {
 
     fileStates.value[fileId]!.map((field) => {
       if (field.key === key) {
+        if (key === '2:85') {
+          console.log('Updating field 2:85 to ', newValue)
+          console.log('Original field: ', field.original)
+        }
         field.value = newValue ?? ''
         if (!field.original) {
+          if (key === '2:85') {
+            console.log('Setting original field 2:85 to ', field.value)
+          }
           field.original = field.value
         }
       }
@@ -73,7 +89,7 @@ export default function useFileState() {
   }
 
   function fileChanges(fileId: string) {
-    const file = loadedFiles.value.find(file => file.id === fileId)
+    const file = fileById(fileId)
     if (!file) {
       return 0
     }
@@ -114,7 +130,7 @@ export default function useFileState() {
     }))
 
     statesToSave.forEach(async ({ fileId, state }) => {
-      const file = loadedFiles.value.find(file => file.id === fileId)
+      const file = fileById(fileId)
       if (!file) {
         throw new Error('File not found for saving metadata')
       }
@@ -132,14 +148,21 @@ export default function useFileState() {
       color: 'success',
     })
 
-    if (supported) {
-      reloadFiles()
-    }
-    else {
+    if (!supported) {
       markAsDownloaded(statesToSave.map(s => s.fileId))
     }
   }
 
+  function reloadStates(files: FileWithMetadata[]) {
+    files.forEach((file) => {
+      removeFileState(file.id)
+
+      Object.entries(file.metadata).forEach(([key, value]) => {
+        updateFileData(file.id, key, value)
+      })
+    })
+  }
+
   watchDeep(() => fileStates.value, async (updatedStates) => {
     const totalChanges = Object.keys(updatedStates).filter(fileId => fileChanges(fileId) > 0).length
     filesChanged.value = totalChanges
@@ -155,6 +178,7 @@ export default function useFileState() {
     updateFileData,
     hasFieldChanged,
     fileChanges,
+    reloadStates,
     filesChanged,
     saveAll,
     stateIndexByKey,
diff --git a/app/composables/useFiles.ts b/app/composables/useFiles.ts
index 25b0787..82000ae 100644
--- a/app/composables/useFiles.ts
+++ b/app/composables/useFiles.ts
@@ -66,6 +66,7 @@ async function addFiles(files: FileWithHandle[]) {
 
     try {
       const metadata = parseMetadata(new Uint8Array(buffer))
+
       return {
         id: fileId,
         file,
@@ -90,30 +91,6 @@ async function addFiles(files: FileWithHandle[]) {
   updateIdb(dedupedUpdatedFiles)
 }
 
-async function reloadFiles() {
-  const rawLoadedFiles = toRaw(loadedFiles.value)
-
-  const filesWithUpdatedMetadata = await Promise.all(rawLoadedFiles.map(async (file) => {
-    const buffer = await file.file.arrayBuffer()
-    try {
-      const metadata = parseMetadata(new Uint8Array(buffer))
-      return {
-        ...file,
-        metadata,
-      }
-    }
-    catch (e) {
-      console.warn('Failed to reload metadata for file: ', file.file.name, ' - ', e)
-      return {
-        ...file,
-        metadata: {},
-      }
-    }
-  }))
-
-  updateIdb(filesWithUpdatedMetadata)
-}
-
 function markAsDownloaded(fileIds: string[]) {
   loadedFiles.value = loadedFiles.value.map((file) => {
     if (fileIds.includes(file.id)) {
@@ -227,11 +204,7 @@ function handleNormalSelect(fileIndex: number) {
 }
 
 async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: string, value?: string }>) {
-  const mappedMetadata = metadata.reduce<Record<string, any>>((acc, { key, value }) => {
-    if (!value) {
-      return acc
-    }
-
+  const mappedMetadata = metadata.reduce<Record<string, string | undefined>>((acc, { key, value }) => {
     acc[key] = value
     return acc
   }, {})
@@ -246,11 +219,13 @@ async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: str
   const updatedMetadata = {
     ...file.metadata,
     ...mappedMetadata,
-    // Automatically set originating program and version using values from env file
+    // Automatically set originating program and version using values from env file if defined
     ...(originatingProgram ? { '2:65': originatingProgram } : {}),
     ...(programVersion ? { '2:70': programVersion } : {}),
   }
 
+  console.log(updatedMetadata)
+
   try {
     await writeMetadata(file.file, updatedMetadata, undefined, file.handle)
   }
@@ -259,7 +234,7 @@ async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: str
   }
 
   const updatedFiles = loadedFiles.value.map((loadedFile) => {
-    if (loadedFile.file === file.file) {
+    if (loadedFile.id === file.id) {
       return {
         ...toRaw(loadedFile),
         metadata: updatedMetadata,
@@ -269,7 +244,17 @@ async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: str
     return toRaw(loadedFile)
   })
 
-  updateIdb(updatedFiles)
+  console.log(updatedFiles)
+
+  // Update file state after metadata change
+  const { reloadStates } = useFileState()
+  reloadStates(updatedFiles)
+
+  await updateIdb(updatedFiles)
+}
+
+function fileById(fileId: string) {
+  return loadedFiles.value.find(file => file.id === fileId)
 }
 
 const selectedFiles = computed(() => {
@@ -283,5 +268,5 @@ export default function () {
 
   loadAmountFromCookies()
 
-  return { loadedFiles, selectedFiles, isLoading, loadFilesFromIndexedDB, addFiles, removeFile, fileAmount, toggleSelection, updateMetadata, reloadFiles, markAsDownloaded }
+  return { loadedFiles, selectedFiles, isLoading, loadFilesFromIndexedDB, addFiles, removeFile, fileAmount, toggleSelection, updateMetadata, fileById, markAsDownloaded }
 }
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index f5f22a1..ce6d820 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,5 +1,11 @@
+<script setup lang="ts">
+import type { ToasterProps } from '@nuxt/ui'
+
+const toaster: ToasterProps = { position: 'top-center' }
+</script>
+
 <template>
-  <UApp>
+  <UApp :toaster="toaster">
     <LayoutHeader />
     <div class="pt-[var(--u-header-height)]">
       <slot />
diff --git a/app/shared/types.ts b/app/shared/types.ts
index f56867e..86d62b0 100644
--- a/app/shared/types.ts
+++ b/app/shared/types.ts
@@ -3,7 +3,7 @@ export interface FileWithMetadata {
   id: string
   file: File
   handle?: FileSystemFileHandle
-  metadata: Record<string, any>
+  metadata: Record<string, string>
   isDownloaded?: boolean
   isSelected?: boolean
 }

From 3ccee0e145c1206324b927a3fd60edc1b10680b1 Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 22 Nov 2025 19:46:39 +0100
Subject: [PATCH 02/14] refactor: currently refactoring selection and file
 storage

---
 app/components/File/Display.vue     |  24 ----
 app/components/File/List.vue        |   3 +-
 app/components/File/Preview.vue     |   5 +-
 app/composables/helpers.ts          |  50 ++++++++
 app/composables/useFileSelection.ts |  80 +++++++++++++
 app/composables/useFileState.ts     |   9 --
 app/composables/useFiles.ts         | 173 +++++++---------------------
 app/pages/app.vue                   |  88 --------------
 app/pages/index.vue                 |  95 +++++++++++++--
 app/shared/types.ts                 |   1 -
 10 files changed, 258 insertions(+), 270 deletions(-)
 delete mode 100644 app/components/File/Display.vue
 create mode 100644 app/composables/helpers.ts
 create mode 100644 app/composables/useFileSelection.ts
 delete mode 100644 app/pages/app.vue

diff --git a/app/components/File/Display.vue b/app/components/File/Display.vue
deleted file mode 100644
index 2fefc9c..0000000
--- a/app/components/File/Display.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { FileWithHandle } from 'browser-fs-access'
-import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
-
-const props = defineProps<{
-  files: FileWithHandle[]
-}>()
-
-const { data: savedFiles } = useIDBKeyval<FileWithHandle[]>('uploaded-images', [])
-
-const images = computed(() => {
-  const imageFiles = [...props.files, ...savedFiles.value]
-  return imageFiles.map(file => URL.createObjectURL(file))
-})
-</script>
-
-<template>
-  <div>
-    This will be image :)
-    <div v-for="image in images" :key="image">
-      <img :src="image" alt="Uploaded Image" style="max-width: 200px; max-height: 200px; margin: 10px;">
-    </div>
-  </div>
-</template>
diff --git a/app/components/File/List.vue b/app/components/File/List.vue
index 6ac1329..1df9c51 100644
--- a/app/components/File/List.vue
+++ b/app/components/File/List.vue
@@ -13,9 +13,10 @@ const emit = defineEmits<{
 
 <template>
   <div class="flex flex-col gap-2 overflow-y-auto pb-2">
-    <div v-for="file in files" :key="`${file.file.name}-${file.file.size}`">
+    <div v-for="(file, index) in files" :key="`${file.file.name}-${file.file.size}`">
       <FilePreview
         :image="file"
+        :index="index"
         :width="64"
         :height="64"
         show-details
diff --git a/app/components/File/Preview.vue b/app/components/File/Preview.vue
index a10bd50..f7dad58 100644
--- a/app/components/File/Preview.vue
+++ b/app/components/File/Preview.vue
@@ -3,6 +3,7 @@ import type { FileWithMetadata } from '~/shared/types'
 
 const props = withDefaults(defineProps<{
   image: FileWithMetadata
+  index: number
   width?: number
   height?: number
   showDetails?: boolean
@@ -21,10 +22,12 @@ const file = computed(() => props.image.file)
 const fileUrl = URL.createObjectURL(file.value)
 const fileSize = (file.value.size / 1024).toFixed(2)
 const altText = `${file.value.name} - ${fileSize} KB`
+
+const { isSelected } = useFileSelection()
 </script>
 
 <template>
-  <div class="flex relative items-center gap-4 border border-accented rounded-lg p-2 hover:bg-accented/20" :class="{ 'border-primary bg-accented/20': image.isSelected }" @click="emit('select', image)">
+  <div class="flex relative items-center gap-4 border border-accented rounded-lg p-2 hover:bg-accented/20" :class="{ 'border-primary bg-accented/20': isSelected(index) }" @click="emit('select', image)">
     <NuxtImg :src="fileUrl" :alt="altText" :width="width" :height="height" />
     <div v-if="showDetails" class="flex flex-col max-w-[60%]">
       <UTooltip :text="file.name">
diff --git a/app/composables/helpers.ts b/app/composables/helpers.ts
new file mode 100644
index 0000000..5b4ba84
--- /dev/null
+++ b/app/composables/helpers.ts
@@ -0,0 +1,50 @@
+import type { FileWithHandle } from 'browser-fs-access'
+import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
+
+/**
+ * Loads data from IndexedDB for a given key.
+ * @param key The key to load data for.
+ * @param defaultValue The default value to return if no data is found.
+ * @returns The data associated with the key or the default value.
+ */
+export async function loadFromIdb<T>(key: string, defaultValue: T): Promise<T | undefined> {
+  const { data, isFinished } = useIDBKeyval<T>(key, defaultValue)
+
+  await until(isFinished).toBe(true)
+
+  return data.value
+}
+
+/**
+ * Generates a unique ID for a given file.
+ * @param file The file for which to generate an ID.
+ * @returns A unique string ID for the file.
+ */
+export function getFileId(file: FileWithHandle): string {
+  return file.name + file.lastModified + file.size
+}
+
+/**
+ * Deeploy converts a reactive object to its raw form so it can savely be stored in IndexedDB.
+ * @param obj The object to convert. Can be anything.
+ * @returns The raw version of the object.
+ */
+function toRawDeep(obj: any): any {
+  if (Array.isArray(obj) && isReactive(obj)) {
+    return toRaw(obj.map(item => toRawDeep(item)))
+  }
+
+  return isReactive(obj) ? toRaw(obj) : obj
+}
+
+/**
+ * Updates data in IndexedDB for a given key.
+ * @param key The key to update data for.
+ * @param data The data to be stored.
+ */
+export async function updateIdb<T>(key: string, data: T) {
+  const { set } = useIDBKeyval<T>(key, data)
+  const rawData = toRawDeep(data)
+
+  await set(rawData)
+}
diff --git a/app/composables/useFileSelection.ts b/app/composables/useFileSelection.ts
new file mode 100644
index 0000000..7ff1372
--- /dev/null
+++ b/app/composables/useFileSelection.ts
@@ -0,0 +1,80 @@
+import type { FileWithMetadata } from '~/shared/types'
+
+const ALLOW_MULTIPLE_SELECTION = false
+const IDB_KEY_INDEXES = 'selected-indexes'
+
+const selectedIndexes = ref<number[]>([])
+
+export default function useFileSelection() {
+  async function loadIndexesFromIndexedDB() {
+    const indexes = await loadFromIdb<number[]>(IDB_KEY_INDEXES, [])
+    selectedIndexes.value = indexes ?? []
+  }
+
+  async function update(indexes: number[]) {
+    await updateIdb<number[]>(IDB_KEY_INDEXES, indexes)
+    await loadIndexesFromIndexedDB()
+  }
+
+  async function toggleSelection(file: FileWithMetadata, modifier: 'shift' | 'ctrl' | undefined = undefined) {
+    const { loadedFiles, update: updateFiles } = useFiles()
+    const selectedFileIndex = loadedFiles.value.findIndex(f => f.file === file.file)
+
+    if (selectedFileIndex === -1) {
+      return
+    }
+
+    if (ALLOW_MULTIPLE_SELECTION) {
+      if (modifier === 'shift') {
+        if (selectedIndexes.value.length === 0) {
+          handleNormalSelect(selectedFileIndex)
+        }
+        else {
+          const lastSelectedIndex = selectedIndexes.value[selectedIndexes.value.length - 1] ?? 0
+          handleShiftSelect(selectedFileIndex, lastSelectedIndex)
+        }
+      }
+      else if (modifier === 'ctrl') {
+        handleCtrlSelect(selectedFileIndex)
+      }
+    }
+    else {
+      handleNormalSelect(selectedFileIndex)
+    }
+
+    await updateFiles(loadedFiles.value)
+    await update(selectedIndexes.value)
+  }
+
+  function handleShiftSelect(fileIndex: number, lastSelectedIndex: number) {
+    const [start, end] = fileIndex < lastSelectedIndex ? [fileIndex, lastSelectedIndex] : [lastSelectedIndex, fileIndex]
+    selectedIndexes.value.push(...Array.from({ length: end - start + 1 }, (_, i) => start + i))
+  }
+
+  function handleCtrlSelect(fileIndex: number) {
+    if (!isSelected(fileIndex)) {
+      selectedIndexes.value.push(fileIndex)
+    }
+    else {
+      selectedIndexes.value = selectedIndexes.value.filter(i => i !== fileIndex)
+    }
+  }
+
+  function handleNormalSelect(fileIndex: number) {
+    const otherIndexes = selectedIndexes.value.filter(i => i !== fileIndex)
+    const isSelectedBefore = isSelected(fileIndex)
+
+    if (isSelectedBefore && otherIndexes.length > 0) {
+      selectedIndexes.value = [fileIndex]
+    }
+    else {
+      selectedIndexes.value = isSelectedBefore ? [] : [fileIndex]
+    }
+  }
+
+  function isSelected(fileIndex: number): boolean {
+    return selectedIndexes.value.includes(fileIndex)
+  }
+
+  return { toggleSelection, selectedIndexes, update, isSelected }
+}
diff --git a/app/composables/useFileState.ts b/app/composables/useFileState.ts
index 911c187..d3b2f85 100644
--- a/app/composables/useFileState.ts
+++ b/app/composables/useFileState.ts
@@ -33,8 +33,6 @@ export default function useFileState() {
       return acc
     }, {})
 
-    console.log('Setting value to:', Object.values(rawFileStates)[0]![30]!.original)
-
     await set(rawFileStates)
   }
 
@@ -67,15 +65,8 @@ export default function useFileState() {
 
     fileStates.value[fileId]!.map((field) => {
       if (field.key === key) {
-        if (key === '2:85') {
-          console.log('Updating field 2:85 to ', newValue)
-          console.log('Original field: ', field.original)
-        }
         field.value = newValue ?? ''
         if (!field.original) {
-          if (key === '2:85') {
-            console.log('Setting original field 2:85 to ', field.value)
-          }
           field.original = field.value
         }
       }
diff --git a/app/composables/useFiles.ts b/app/composables/useFiles.ts
index 82000ae..b9ab486 100644
--- a/app/composables/useFiles.ts
+++ b/app/composables/useFiles.ts
@@ -1,38 +1,25 @@
 import type { FileWithHandle } from 'browser-fs-access'
 import type { FileWithMetadata } from '~/shared/types'
-import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
 import { parseMetadata, writeMetadata } from 'iptc-parser'
 
 const loadedFiles = ref<FileWithMetadata[]>([])
 const isLoading = ref(true)
 const fileAmount = ref(0)
-const selectedIndexes = ref<number[]>([])
 
-const ALLOW_MULTIPLE_SELECTION = false
+const IDB_KEY_FILES = 'uploaded-images'
+const COOKIE_KEY_FILE_AMOUNT = 'file-amount'
 
-function loadFilesFromIndexedDB() {
-  const { data: files, isFinished } = useIDBKeyval<FileWithMetadata[]>('uploaded-images', [])
-  const { data: indexes, isFinished: areIndexesFinished } = useIDBKeyval<number[]>('selected-indexes', [])
+async function loadFilesFromIndexedDB() {
+  const files = await loadFromIdb<FileWithMetadata[]>(IDB_KEY_FILES, [])
+  loadedFiles.value = files ?? []
+  isLoading.value = false
 
-  watch(() => isFinished.value, (newVal) => {
-    if (newVal) {
-      loadedFiles.value = files.value
-      isLoading.value = false
-
-      const amountCookie = useCookie('file-amount')
-      amountCookie.value = String(loadedFiles.value.length)
-    }
-  })
-
-  watch(() => areIndexesFinished.value, (newVal) => {
-    if (newVal) {
-      selectedIndexes.value = indexes.value
-    }
-  })
+  const amountCookie = useCookie(COOKIE_KEY_FILE_AMOUNT)
+  amountCookie.value = String(loadedFiles.value.length)
 }
 
 function loadAmountFromCookies() {
-  const amountCookie = useCookie('file-amount')
+  const amountCookie = useCookie(COOKIE_KEY_FILE_AMOUNT)
   fileAmount.value = Number.parseInt(amountCookie.value ?? '0')
 }
 
@@ -40,29 +27,24 @@ function deduplicateFiles(files: FileWithMetadata[]) {
   const dedupedIds = new Set()
 
   return files.filter((file) => {
-    const id = file.file.name + file.file.lastModified + file.file.size
-    if (dedupedIds.has(id)) {
+    if (dedupedIds.has(file.id)) {
       return false
     }
-    dedupedIds.add(id)
+    dedupedIds.add(file.id)
     return true
   })
 }
 
-async function updateIdb(updatedFiles: FileWithMetadata[]) {
-  const { set } = useIDBKeyval<FileWithMetadata[]>('uploaded-images', loadedFiles.value)
-  await set(updatedFiles)
-
-  const { set: setIndexes } = useIDBKeyval<number[]>('selected-indexes', selectedIndexes.value)
-  await setIndexes(toRaw(selectedIndexes.value))
+async function update(updatedFiles: FileWithMetadata[]) {
+  await updateIdb<FileWithMetadata[]>(IDB_KEY_FILES, updatedFiles)
 
-  loadFilesFromIndexedDB()
+  await loadFilesFromIndexedDB()
 }
 
 async function addFiles(files: FileWithHandle[]) {
   const metadataMapping: FileWithMetadata[] = await Promise.all(files.map(async (file) => {
     const buffer = await file.arrayBuffer()
-    const fileId = file.name + file.lastModified + file.size
+    const fileId = getFileId(file)
 
     try {
       const metadata = parseMetadata(new Uint8Array(buffer))
@@ -74,8 +56,7 @@ async function addFiles(files: FileWithHandle[]) {
         metadata,
       }
     }
-    catch (e) {
-      console.warn('Failed to find metadata for file: ', file.name, ' - ', e)
+    catch {
       return {
         id: fileId,
         file,
@@ -85,10 +66,8 @@ async function addFiles(files: FileWithHandle[]) {
     }
   }))
 
-  const rawLoadedFiles = toRaw(loadedFiles.value)
-  const dedupedUpdatedFiles = deduplicateFiles([...rawLoadedFiles, ...metadataMapping])
-
-  updateIdb(dedupedUpdatedFiles)
+  const dedupedUpdatedFiles = deduplicateFiles([...loadedFiles.value, ...metadataMapping])
+  update(dedupedUpdatedFiles)
 }
 
 function markAsDownloaded(fileIds: string[]) {
@@ -104,6 +83,8 @@ function markAsDownloaded(fileIds: string[]) {
 }
 
 async function removeFile(fileToRemove: FileWithMetadata) {
+  const { selectedIndexes, update: updateIndexes } = useFileSelection()
+
   if (fileToRemove.isSelected) {
     const indexToRemove = loadedFiles.value.findIndex(file => file.file === fileToRemove.file)
     if (indexToRemove === -1) {
@@ -112,95 +93,10 @@ async function removeFile(fileToRemove: FileWithMetadata) {
     selectedIndexes.value = selectedIndexes.value.filter(index => index !== indexToRemove)
   }
 
-  const updatedFiles = loadedFiles.value.filter(file => file.file !== fileToRemove.file).map(file => toRaw(file))
-  await updateIdb(updatedFiles)
-}
-
-async function toggleSelection(file: FileWithMetadata, modifier: 'shift' | 'ctrl' | undefined = undefined) {
-  const selectedFileIndex = loadedFiles.value.findIndex(f => f.file === file.file)
-
-  if (selectedFileIndex === -1) {
-    return
-  }
+  const updatedFiles = loadedFiles.value.filter(file => file.file !== fileToRemove.file)
 
-  if (ALLOW_MULTIPLE_SELECTION) {
-    if (modifier === 'shift') {
-      if (selectedIndexes.value.length === 0) {
-        handleNormalSelect(selectedFileIndex)
-      }
-      else {
-        const lastSelectedIndex = selectedIndexes.value[selectedIndexes.value.length - 1] ?? 0
-        handleShiftSelect(selectedFileIndex, lastSelectedIndex)
-      }
-    }
-    else if (modifier === 'ctrl') {
-      handleCtrlSelect(selectedFileIndex)
-    }
-  }
-  else {
-    handleNormalSelect(selectedFileIndex)
-  }
-
-  const rawFiles = loadedFiles.value.map(file => toRaw(file))
-  await updateIdb(rawFiles)
-}
-
-function handleShiftSelect(fileIndex: number, lastSelectedIndex: number) {
-  const [start, end] = fileIndex < lastSelectedIndex ? [fileIndex, lastSelectedIndex] : [lastSelectedIndex, fileIndex]
-
-  loadedFiles.value = loadedFiles.value.map((loadedFile, index) => {
-    loadedFile.isSelected = index >= start && index <= end
-    return loadedFile
-  })
-}
-
-function handleCtrlSelect(fileIndex: number) {
-  if (!loadedFiles.value[fileIndex]) {
-    return
-  }
-
-  const isSelected = loadedFiles.value[fileIndex].isSelected
-
-  if (!isSelected) {
-    selectedIndexes.value.push(fileIndex)
-  }
-  else {
-    selectedIndexes.value = selectedIndexes.value.filter(i => i !== fileIndex)
-  }
-
-  loadedFiles.value[fileIndex].isSelected = !isSelected
-}
-
-function handleNormalSelect(fileIndex: number) {
-  if (!loadedFiles.value[fileIndex]) {
-    return
-  }
-
-  const otherIndexes = selectedIndexes.value.filter(i => i !== fileIndex)
-  const isSelectedBefore = !loadedFiles.value[fileIndex].isSelected
-
-  loadedFiles.value = loadedFiles.value.map((loadedFile, index) => {
-    if (index !== fileIndex) {
-      loadedFile.isSelected = false
-      return loadedFile
-    }
-
-    if (otherIndexes.length > 0) {
-      loadedFile.isSelected = true
-    }
-    else {
-      loadedFile.isSelected = !loadedFile.isSelected
-    }
-
-    return loadedFile
-  })
-
-  if (isSelectedBefore || otherIndexes.length > 0) {
-    selectedIndexes.value = [fileIndex]
-  }
-  else {
-    selectedIndexes.value = []
-  }
+  await update(updatedFiles)
+  await updateIndexes(selectedIndexes.value)
 }
 
 async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: string, value?: string }>) {
@@ -224,8 +120,6 @@ async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: str
     ...(programVersion ? { '2:70': programVersion } : {}),
   }
 
-  console.log(updatedMetadata)
-
   try {
     await writeMetadata(file.file, updatedMetadata, undefined, file.handle)
   }
@@ -244,13 +138,11 @@ async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: str
     return toRaw(loadedFile)
   })
 
-  console.log(updatedFiles)
-
   // Update file state after metadata change
   const { reloadStates } = useFileState()
   reloadStates(updatedFiles)
 
-  await updateIdb(updatedFiles)
+  await update(updatedFiles)
 }
 
 function fileById(fileId: string) {
@@ -258,7 +150,8 @@ function fileById(fileId: string) {
 }
 
 const selectedFiles = computed(() => {
-  return loadedFiles.value.filter(file => file.isSelected)
+  const { isSelected } = useFileSelection()
+  return loadedFiles.value.filter((_, index) => isSelected(index))
 })
 
 export default function () {
@@ -268,5 +161,17 @@ export default function () {
 
   loadAmountFromCookies()
 
-  return { loadedFiles, selectedFiles, isLoading, loadFilesFromIndexedDB, addFiles, removeFile, fileAmount, toggleSelection, updateMetadata, fileById, markAsDownloaded }
+  return {
+    loadedFiles,
+    selectedFiles,
+    isLoading,
+    loadFilesFromIndexedDB,
+    addFiles,
+    removeFile,
+    fileAmount,
+    updateMetadata,
+    fileById,
+    markAsDownloaded,
+    update,
+  }
 }
diff --git a/app/pages/app.vue b/app/pages/app.vue
deleted file mode 100644
index e3230c9..0000000
--- a/app/pages/app.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import type { FileWithMetadata } from '~/shared/types'
-
-const { loadedFiles, selectedFiles, isLoading, fileAmount, removeFile, toggleSelection } = useFiles()
-const { removeFileState } = useFileState()
-
-const { shift, ctrl } = useMagicKeys()
-
-function toggleFileSelection(file: FileWithMetadata) {
-  const modifier = shift?.value ? 'shift' : ctrl?.value ? 'ctrl' : undefined
-  toggleSelection(file, modifier)
-}
-
-async function remove(file: FileWithMetadata) {
-  await removeFile(file)
-  removeFileState(file.id)
-}
-</script>
-
-<template>
-  <UDashboardGroup class="Dashboard">
-    <UDashboardSidebar class="Sidebar" :default-size="20">
-      <template #header>
-        <div class="flex flex-col w-full h-[var(--u-header-height)]">
-          <FileLoadButton />
-        </div>
-      </template>
-      <div v-if="isLoading && fileAmount > 0" class="flex flex-col gap-2">
-        <FileSkeleton v-for="i in fileAmount" :key="i" />
-      </div>
-      <FileList
-        v-else-if="!isLoading && loadedFiles.length > 0"
-        :files="loadedFiles"
-        class="FileContainer"
-        :class="{ DisableSelection: shift }"
-        @select="toggleFileSelection"
-        @remove="remove"
-      />
-      <UEmpty
-        v-else
-        title="No Files found"
-        description="Upload some files using the button above to get started!"
-      >
-        <template #title>
-          <div class="flex items-center gap-2">
-            <div class="w-7 h-7 flex items-center justify-center rounded-full bg-accented/50">
-              <UIcon name="i-lucide-file-minus" class="w-4 h-4 bg-neutral-500" />
-            </div>
-            <span>No Files loaded yet</span>
-          </div>
-        </template>
-      </UEmpty>
-    </UDashboardSidebar>
-    <UDashboardPanel>
-      <template #header>
-        <UDashboardNavbar title="Edit Metadata">
-          <template #right>
-            <EditorSaveButton v-if="selectedFiles.length > 0" />
-          </template>
-        </UDashboardNavbar>
-      </template>
-
-      <template #body>
-        <USkeleton v-if="isLoading" class="h-full" />
-        <EditorContainer v-else class="w-full h-full" />
-      </template>
-    </UDashboardPanel>
-  </UDashboardGroup>
-</template>
-
-<style scoped>
-.Dashboard {
-  position: inherit !important;
-  padding-top: var(--u-header-height);
-  max-height: calc(100vh - 6.5vh) !important;
-}
-
-.FileContainer {
-  max-height: calc(100vh - 6.5vh - 64px) !important;
-}
-
-.DisableSelection {
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+/Edge */
-  user-select: none; /* Standard */
-}
-</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 081e332..065f0a1 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,18 +1,89 @@
 <script setup lang="ts">
-import type { FileWithHandle } from 'browser-fs-access'
+import type { FileWithMetadata } from '~/shared/types'
 
-const files = defineModel<FileWithHandle[]>()
+const { loadedFiles, selectedFiles, isLoading, fileAmount, removeFile } = useFiles()
+const { toggleSelection } = useFileSelection()
+const { removeFileState } = useFileState()
+
+const { shift, ctrl } = useMagicKeys()
+
+function toggleFileSelection(file: FileWithMetadata) {
+  const modifier = shift?.value ? 'shift' : ctrl?.value ? 'ctrl' : undefined
+  toggleSelection(file, modifier)
+}
+
+async function remove(file: FileWithMetadata) {
+  await removeFile(file)
+  removeFileState(file.id)
+}
 </script>
 
 <template>
-  <div>
-    Welcome to the IPTC Web Editor!
-
-    <div>
-      <ClientOnly>
-        <FileUpload v-model="files" />
-        <FileDisplay :files="files ?? []" />
-      </ClientOnly>
-    </div>
-  </div>
+  <UDashboardGroup class="Dashboard">
+    <UDashboardSidebar class="Sidebar" :default-size="20">
+      <template #header>
+        <div class="flex flex-col w-full h-[var(--u-header-height)]">
+          <FileLoadButton />
+        </div>
+      </template>
+      <div v-if="isLoading && fileAmount > 0" class="flex flex-col gap-2">
+        <FileSkeleton v-for="i in fileAmount" :key="i" />
+      </div>
+      <FileList
+        v-else-if="!isLoading && loadedFiles.length > 0"
+        :files="loadedFiles"
+        class="FileContainer"
+        :class="{ DisableSelection: shift }"
+        @select="toggleFileSelection"
+        @remove="remove"
+      />
+      <UEmpty
+        v-else
+        title="No Files found"
+        description="Upload some files using the button above to get started!"
+      >
+        <template #title>
+          <div class="flex items-center gap-2">
+            <div class="w-7 h-7 flex items-center justify-center rounded-full bg-accented/50">
+              <UIcon name="i-lucide-file-minus" class="w-4 h-4 bg-neutral-500" />
+            </div>
+            <span>No Files loaded yet</span>
+          </div>
+        </template>
+      </UEmpty>
+    </UDashboardSidebar>
+    <UDashboardPanel>
+      <template #header>
+        <UDashboardNavbar title="Edit Metadata">
+          <template #right>
+            <EditorSaveButton v-if="selectedFiles.length > 0" />
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <USkeleton v-if="isLoading" class="h-full" />
+        <EditorContainer v-else class="w-full h-full" />
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
 </template>
+
+<style scoped>
+.Dashboard {
+  position: inherit !important;
+  padding-top: var(--u-header-height);
+  max-height: calc(100vh - 6.5vh) !important;
+}
+
+.FileContainer {
+  max-height: calc(100vh - 6.5vh - 64px) !important;
+}
+
+.DisableSelection {
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+</style>
diff --git a/app/shared/types.ts b/app/shared/types.ts
index 86d62b0..04be65b 100644
--- a/app/shared/types.ts
+++ b/app/shared/types.ts
@@ -5,5 +5,4 @@ export interface FileWithMetadata {
   handle?: FileSystemFileHandle
   metadata: Record<string, string>
   isDownloaded?: boolean
-  isSelected?: boolean
 }

From 1ddf8b382813836fea84ae8bb895737146980e13 Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 22 Nov 2025 21:30:49 +0100
Subject: [PATCH 03/14] refactor: seperated selection logic into own file

---
 app/components/Base/Collapsible.vue       | 13 ++--
 app/components/Editor/Container.vue       | 25 +++----
 app/components/Editor/FileInformation.vue | 13 ++--
 app/components/File/List.vue              |  3 +-
 app/components/File/Preview.vue           |  3 +-
 app/composables/useFileSelection.ts       | 83 ++++++++++++-----------
 app/composables/useFileState.ts           | 37 ++++------
 app/composables/useFiles.ts               | 22 ++----
 app/pages/index.vue                       |  8 +--
 9 files changed, 96 insertions(+), 111 deletions(-)

diff --git a/app/components/Base/Collapsible.vue b/app/components/Base/Collapsible.vue
index 91b701c..5f73904 100644
--- a/app/components/Base/Collapsible.vue
+++ b/app/components/Base/Collapsible.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-const { selectedFiles } = useFiles()
-const selectedFile = computed(() => selectedFiles.value[0] || null)
-
+const { firstFileId } = useFileSelection()
 const { fileChanges } = useFileState()
+const { fileById } = useFiles()
+
+const firstFile = computed(() => firstFileId.value ? fileById(firstFileId.value) : undefined)
 
 const amountOfChanges = computed(() => {
-  if (!selectedFile.value) {
+  if (!firstFileId.value) {
     return 0
   }
 
-  return fileChanges(selectedFile.value?.id)
+  return fileChanges(firstFileId.value)
 })
 </script>
 
@@ -30,7 +31,7 @@ const amountOfChanges = computed(() => {
         <div>
           <slot name="title" />
         </div>
-        <span v-if="amountOfChanges && selectedFile && !selectedFile.isDownloaded" class="text-sm text-gray-400">
+        <span v-if="amountOfChanges && firstFile && !firstFile.isDownloaded" class="text-sm text-gray-400">
           {{ amountOfChanges }} unsaved change{{ amountOfChanges === 1 ? '' : 's' }}
         </span>
       </div>
diff --git a/app/components/Editor/Container.vue b/app/components/Editor/Container.vue
index 8d5c1ca..26e8541 100644
--- a/app/components/Editor/Container.vue
+++ b/app/components/Editor/Container.vue
@@ -1,26 +1,23 @@
 <script setup lang="ts">
-const { selectedFiles } = useFiles()
-const selectedFile = computed(() => selectedFiles.value[0] || null)
+const { selectedFileIds, firstFileId } = useFileSelection()
+const { fileById } = useFiles()
+const { getFileState, setupFileState } = useFileState()
 
-const { updateFileData, getFileState, setupFileState } = useFileState()
+const firstFile = computed(() => firstFileId.value ? fileById(firstFileId.value) : undefined)
 
-const selectedState = computed(() => getFileState(selectedFile.value?.id || ''))
+const selectedState = computed(() => getFileState(firstFile.value?.id || ''))
 
-watch(selectedFile, (newFile) => {
-  if (newFile) {
-    if (getFileState(newFile.id).length === 0) {
-      setupFileState(newFile.id)
-      return
-    }
-    Object.entries(newFile.metadata).forEach(([key, value]) => updateFileData(newFile.id, key, value))
+watch(firstFile, (newFile) => {
+  if (newFile && getFileState(newFile.id).length === 0) {
+    setupFileState(newFile.id)
   }
 }, { immediate: true })
 </script>
 
 <template>
   <div class="w-full h-full">
-    <template v-if="selectedFiles.length > 0">
-      <EditorFileInformation class="bg-accented/20 rounded-lg" :files="selectedFiles" />
+    <template v-if="firstFileId">
+      <EditorFileInformation class="bg-accented/20 rounded-lg" :file-ids="selectedFileIds" />
       <div class="pt-8 pb-14">
         <BaseCollapsible>
           <template #title>
@@ -29,7 +26,7 @@ watch(selectedFile, (newFile) => {
 
           <template #content>
             <div class="py-4">
-              <UForm v-if="selectedFile" :state="selectedState">
+              <UForm v-if="firstFile" :state="selectedState">
                 <EditorCategories v-model="selectedState" />
               </UForm>
             </div>
diff --git a/app/components/Editor/FileInformation.vue b/app/components/Editor/FileInformation.vue
index 922fecd..19f2cba 100644
--- a/app/components/Editor/FileInformation.vue
+++ b/app/components/Editor/FileInformation.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import type { FileWithMetadata } from '~/shared/types'
-
 const props = defineProps<{
-  files: FileWithMetadata[]
+  fileIds: Set<string>
 }>()
 
+const { fileById } = useFiles()
+
 const fileToShow = computed(() => {
-  return props.files.length > 0 ? props.files[0] : null
+  if (props.fileIds.size === 0) {
+    return null
+  }
+
+  const firstFileId: string = Array.from(props.fileIds)[0]!
+  return fileById(firstFileId)
 })
 
 const file = computed(() => fileToShow.value ? URL.createObjectURL(fileToShow.value?.file) : undefined)
diff --git a/app/components/File/List.vue b/app/components/File/List.vue
index 1df9c51..6ac1329 100644
--- a/app/components/File/List.vue
+++ b/app/components/File/List.vue
@@ -13,10 +13,9 @@ const emit = defineEmits<{
 
 <template>
   <div class="flex flex-col gap-2 overflow-y-auto pb-2">
-    <div v-for="(file, index) in files" :key="`${file.file.name}-${file.file.size}`">
+    <div v-for="file in files" :key="`${file.file.name}-${file.file.size}`">
       <FilePreview
         :image="file"
-        :index="index"
         :width="64"
         :height="64"
         show-details
diff --git a/app/components/File/Preview.vue b/app/components/File/Preview.vue
index f7dad58..a0c159c 100644
--- a/app/components/File/Preview.vue
+++ b/app/components/File/Preview.vue
@@ -3,7 +3,6 @@ import type { FileWithMetadata } from '~/shared/types'
 
 const props = withDefaults(defineProps<{
   image: FileWithMetadata
-  index: number
   width?: number
   height?: number
   showDetails?: boolean
@@ -27,7 +26,7 @@ const { isSelected } = useFileSelection()
 </script>
 
 <template>
-  <div class="flex relative items-center gap-4 border border-accented rounded-lg p-2 hover:bg-accented/20" :class="{ 'border-primary bg-accented/20': isSelected(index) }" @click="emit('select', image)">
+  <div class="flex relative items-center gap-4 border border-accented rounded-lg p-2 hover:bg-accented/20" :class="{ 'border-primary bg-accented/20': isSelected(image.id) }" @click="emit('select', image)">
     <NuxtImg :src="fileUrl" :alt="altText" :width="width" :height="height" />
     <div v-if="showDetails" class="flex flex-col max-w-[60%]">
       <UTooltip :text="file.name">
diff --git a/app/composables/useFileSelection.ts b/app/composables/useFileSelection.ts
index 7ff1372..f90f8d0 100644
--- a/app/composables/useFileSelection.ts
+++ b/app/composables/useFileSelection.ts
@@ -1,80 +1,85 @@
 import type { FileWithMetadata } from '~/shared/types'
 
 const ALLOW_MULTIPLE_SELECTION = false
-const IDB_KEY_INDEXES = 'selected-indexes'
+const IDB_KEY_SELECTED_FILES = 'selected-files'
 
-const selectedIndexes = ref<number[]>([])
+const selectedFileIds = ref<Set<string>>(new Set())
 
 export default function useFileSelection() {
-  async function loadIndexesFromIndexedDB() {
-    const indexes = await loadFromIdb<number[]>(IDB_KEY_INDEXES, [])
-    selectedIndexes.value = indexes ?? []
+  async function loadselectedFileIdsFromIndexedDB() {
+    const files = await loadFromIdb<string[]>(IDB_KEY_SELECTED_FILES, [])
+    selectedFileIds.value = new Set(files ?? [])
   }
 
-  async function update(indexes: number[]) {
-    await updateIdb<number[]>(IDB_KEY_INDEXES, indexes)
-    await loadIndexesFromIndexedDB()
+  async function update(fileIds: Set<string>) {
+    await updateIdb<string[]>(IDB_KEY_SELECTED_FILES, Array.from(fileIds))
+    await loadselectedFileIdsFromIndexedDB()
   }
 
   async function toggleSelection(file: FileWithMetadata, modifier: 'shift' | 'ctrl' | undefined = undefined) {
-    const { loadedFiles, update: updateFiles } = useFiles()
-    const selectedFileIndex = loadedFiles.value.findIndex(f => f.file === file.file)
-
-    if (selectedFileIndex === -1) {
-      return
-    }
-
     if (ALLOW_MULTIPLE_SELECTION) {
       if (modifier === 'shift') {
-        if (selectedIndexes.value.length === 0) {
-          handleNormalSelect(selectedFileIndex)
+        if (selectedFileIds.value.size === 0) {
+          handleNormalSelect(file.id)
         }
         else {
-          const lastSelectedIndex = selectedIndexes.value[selectedIndexes.value.length - 1] ?? 0
-          handleShiftSelect(selectedFileIndex, lastSelectedIndex)
+          // TODO: reimplement shift selection
+          // const lastSelectedIndex = selectedIndexes.value[selectedIndexes.value.length - 1] ?? 0
+          // handleShiftSelect(selectedFileIndex, lastSelectedIndex)
         }
       }
       else if (modifier === 'ctrl') {
-        handleCtrlSelect(selectedFileIndex)
+        handleCtrlSelect(file.id)
       }
     }
     else {
-      handleNormalSelect(selectedFileIndex)
+      handleNormalSelect(file.id)
     }
 
-    await updateFiles(loadedFiles.value)
-    await update(selectedIndexes.value)
+    await update(selectedFileIds.value)
   }
 
+  /* TODO: Reimplement shift selection
   function handleShiftSelect(fileIndex: number, lastSelectedIndex: number) {
     const [start, end] = fileIndex < lastSelectedIndex ? [fileIndex, lastSelectedIndex] : [lastSelectedIndex, fileIndex]
     selectedIndexes.value.push(...Array.from({ length: end - start + 1 }, (_, i) => start + i))
   }
+  */
 
-  function handleCtrlSelect(fileIndex: number) {
-    if (!isSelected(fileIndex)) {
-      selectedIndexes.value.push(fileIndex)
-    }
-    else {
-      selectedIndexes.value = selectedIndexes.value.filter(i => i !== fileIndex)
-    }
+  function handleCtrlSelect(fileId: string) {
+    isSelected(fileId) ? selectedFileIds.value.add(fileId) : selectedFileIds.value.delete(fileId)
   }
 
-  function handleNormalSelect(fileIndex: number) {
-    const otherIndexes = selectedIndexes.value.filter(i => i !== fileIndex)
-    const isSelectedBefore = isSelected(fileIndex)
+  function handleNormalSelect(fileId: string) {
+    const areMoreSelected = selectedFileIds.value.size > 1
+    const isSelectedBefore = isSelected(fileId)
 
-    if (isSelectedBefore && otherIndexes.length > 0) {
-      selectedIndexes.value = [fileIndex]
+    if (isSelectedBefore && areMoreSelected) {
+      selectedFileIds.value.clear()
+      selectedFileIds.value.add(fileId)
     }
     else {
-      selectedIndexes.value = isSelectedBefore ? [] : [fileIndex]
+      if (isSelectedBefore) {
+        selectedFileIds.value.clear()
+      }
+      else {
+        selectedFileIds.value.clear()
+        selectedFileIds.value.add(fileId)
+      }
     }
   }
 
-  function isSelected(fileIndex: number): boolean {
-    return selectedIndexes.value.includes(fileIndex)
+  function isSelected(fileId: string): boolean {
+    return selectedFileIds.value.has(fileId)
   }
 
-  return { toggleSelection, selectedIndexes, update, isSelected }
+  const firstFileId = computed(() => {
+    if (selectedFileIds.value.size === 0) {
+      return null
+    }
+
+    return selectedFileIds.value.values().next().value
+  })
+
+  return { toggleSelection, selectedFileIds, update, isSelected, firstFileId }
 }
diff --git a/app/composables/useFileState.ts b/app/composables/useFileState.ts
index d3b2f85..83c24cf 100644
--- a/app/composables/useFileState.ts
+++ b/app/composables/useFileState.ts
@@ -1,6 +1,5 @@
 import type { FileWithMetadata } from '~/shared/types'
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
-import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval.mjs'
 import { supported } from 'browser-fs-access'
 import { iptcIimFields } from '~/utils/iptc-iim/mapping'
 
@@ -17,37 +16,25 @@ export default function useFileState() {
   }
 
   async function loadFileStatesFromIndexedDB() {
-    const { data: states, isFinished } = useIDBKeyval<FileState>('file-states', {})
-
-    await until(isFinished).toBe(true)
-
-    fileStates.value = states.value
+    const states = await loadFromIdb<FileState>('file-states', {})
+    fileStates.value = states ?? {}
     isLoading.value = false
   }
 
-  async function updateIdb() {
-    const { set } = useIDBKeyval<FileState>('file-states', {})
-
-    const rawFileStates = Object.entries(toRaw(fileStates.value)).reduce<FileState>((acc, [fileId, fields]) => {
-      acc[fileId] = toRaw(fields.map(field => toRaw(field)))
-      return acc
-    }, {})
+  async function setupFileState(fileId: string) {
+    const file = fileById(fileId)
 
-    await set(rawFileStates)
-  }
+    if (!file) {
+      throw new Error('File not found for setting up state')
+    }
 
-  function setupState() {
-    const state = iptcIimFields.map(field => ({
+    fileStates.value[fileId] = iptcIimFields.map(field => ({
       ...field,
-      value: '',
-      original: '',
+      value: file.metadata[field.key] || '',
+      original: file.metadata[field.key] || '',
     }))
 
-    return state
-  }
-
-  function setupFileState(fileId: string) {
-    fileStates.value[fileId] = setupState()
+    return updateIdb<FileState>('file-states', fileStates.value)
   }
 
   function removeFileState(fileId: string) {
@@ -154,12 +141,14 @@ export default function useFileState() {
     })
   }
 
+  /*
   watchDeep(() => fileStates.value, async (updatedStates) => {
     const totalChanges = Object.keys(updatedStates).filter(fileId => fileChanges(fileId) > 0).length
     filesChanged.value = totalChanges
 
     await updateIdb()
   })
+  */
 
   return {
     fileStates,
diff --git a/app/composables/useFiles.ts b/app/composables/useFiles.ts
index b9ab486..b6bce1d 100644
--- a/app/composables/useFiles.ts
+++ b/app/composables/useFiles.ts
@@ -83,20 +83,16 @@ function markAsDownloaded(fileIds: string[]) {
 }
 
 async function removeFile(fileToRemove: FileWithMetadata) {
-  const { selectedIndexes, update: updateIndexes } = useFileSelection()
+  const { selectedFileIds, update: updateIndexes } = useFileSelection()
 
-  if (fileToRemove.isSelected) {
-    const indexToRemove = loadedFiles.value.findIndex(file => file.file === fileToRemove.file)
-    if (indexToRemove === -1) {
-      return
-    }
-    selectedIndexes.value = selectedIndexes.value.filter(index => index !== indexToRemove)
+  if (selectedFileIds.value.has(fileToRemove.id)) {
+    selectedFileIds.value.delete(fileToRemove.id)
   }
 
   const updatedFiles = loadedFiles.value.filter(file => file.file !== fileToRemove.file)
 
   await update(updatedFiles)
-  await updateIndexes(selectedIndexes.value)
+  await updateIndexes(selectedFileIds.value)
 }
 
 async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: string, value?: string }>) {
@@ -130,12 +126,12 @@ async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: str
   const updatedFiles = loadedFiles.value.map((loadedFile) => {
     if (loadedFile.id === file.id) {
       return {
-        ...toRaw(loadedFile),
+        ...loadedFile,
         metadata: updatedMetadata,
       }
     }
 
-    return toRaw(loadedFile)
+    return loadedFile
   })
 
   // Update file state after metadata change
@@ -149,11 +145,6 @@ function fileById(fileId: string) {
   return loadedFiles.value.find(file => file.id === fileId)
 }
 
-const selectedFiles = computed(() => {
-  const { isSelected } = useFileSelection()
-  return loadedFiles.value.filter((_, index) => isSelected(index))
-})
-
 export default function () {
   if (!import.meta.env.SSR) {
     loadFilesFromIndexedDB()
@@ -163,7 +154,6 @@ export default function () {
 
   return {
     loadedFiles,
-    selectedFiles,
     isLoading,
     loadFilesFromIndexedDB,
     addFiles,
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 065f0a1..7834bd6 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FileWithMetadata } from '~/shared/types'
 
-const { loadedFiles, selectedFiles, isLoading, fileAmount, removeFile } = useFiles()
-const { toggleSelection } = useFileSelection()
+const { loadedFiles, isLoading, fileAmount, removeFile } = useFiles()
+const { selectedFileIds, toggleSelection } = useFileSelection()
 const { removeFileState } = useFileState()
 
 const { shift, ctrl } = useMagicKeys()
@@ -56,14 +56,14 @@ async function remove(file: FileWithMetadata) {
       <template #header>
         <UDashboardNavbar title="Edit Metadata">
           <template #right>
-            <EditorSaveButton v-if="selectedFiles.length > 0" />
+            <EditorSaveButton v-if="selectedFileIds.size > 0" />
           </template>
         </UDashboardNavbar>
       </template>
 
       <template #body>
         <USkeleton v-if="isLoading" class="h-full" />
-        <EditorContainer v-else class="w-full h-full" />
+        <EditorContainer v-else />
       </template>
     </UDashboardPanel>
   </UDashboardGroup>

From cfb92a22115a9265e2b0ca20ace226b331370d46 Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 22 Nov 2025 21:44:03 +0100
Subject: [PATCH 04/14] fix: fixed parser field padding

---
 parser/src/jpeg-iim/reader.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/parser/src/jpeg-iim/reader.ts b/parser/src/jpeg-iim/reader.ts
index 5cccdf8..9acb61e 100644
--- a/parser/src/jpeg-iim/reader.ts
+++ b/parser/src/jpeg-iim/reader.ts
@@ -58,7 +58,7 @@ export function parseIIM(buffer: Uint8Array): Record<string, any> {
     const dataset = iimBlock[offset + 2]
     const length = view.getUint16(offset + 3)
 
-    const tag = `${record}:${dataset}`
+    const tag = `${record}:${dataset.toString().padStart(2, '0')}`
 
     const start = offset + 5
     const end = start + length

From 6dbcff0d8b625bba5e9b9ab72c4d6028e6012066 Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sun, 23 Nov 2025 00:30:08 +0100
Subject: [PATCH 05/14] refactor: at a point right now where stuff somewhat
 works again

---
 app/components/Base/Collapsible.vue       |  11 +-
 app/components/Editor/Container.vue       |  55 +++---
 app/components/Editor/FileInformation.vue |  22 ++-
 app/components/File/List.vue              |   6 +-
 app/components/File/Preview.vue           |   4 +-
 app/components/File/Upload.vue            |  27 ---
 app/composables/useFileSelection.ts       |  67 +++----
 app/composables/useFileState.ts           |  69 ++-----
 app/composables/useFiles.ts               | 216 ++++++++++------------
 app/package.json                          |   4 +-
 app/pages/index.vue                       |  80 ++++----
 11 files changed, 238 insertions(+), 323 deletions(-)
 delete mode 100644 app/components/File/Upload.vue

diff --git a/app/components/Base/Collapsible.vue b/app/components/Base/Collapsible.vue
index 5f73904..93f33f2 100644
--- a/app/components/Base/Collapsible.vue
+++ b/app/components/Base/Collapsible.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-const { firstFileId } = useFileSelection()
+const { firstSelectedFile } = useFileSelection()
 const { fileChanges } = useFileState()
-const { fileById } = useFiles()
-
-const firstFile = computed(() => firstFileId.value ? fileById(firstFileId.value) : undefined)
 
 const amountOfChanges = computed(() => {
-  if (!firstFileId.value) {
+  if (!firstSelectedFile.value) {
     return 0
   }
 
-  return fileChanges(firstFileId.value)
+  return fileChanges(firstSelectedFile.value.id)
 })
 </script>
 
@@ -31,7 +28,7 @@ const amountOfChanges = computed(() => {
         <div>
           <slot name="title" />
         </div>
-        <span v-if="amountOfChanges && firstFile && !firstFile.isDownloaded" class="text-sm text-gray-400">
+        <span v-if="amountOfChanges && firstSelectedFile && !firstSelectedFile.isDownloaded" class="text-sm text-gray-400">
           {{ amountOfChanges }} unsaved change{{ amountOfChanges === 1 ? '' : 's' }}
         </span>
       </div>
diff --git a/app/components/Editor/Container.vue b/app/components/Editor/Container.vue
index 26e8541..e6ee5a8 100644
--- a/app/components/Editor/Container.vue
+++ b/app/components/Editor/Container.vue
@@ -1,41 +1,30 @@
 <script setup lang="ts">
-const { selectedFileIds, firstFileId } = useFileSelection()
-const { fileById } = useFiles()
-const { getFileState, setupFileState } = useFileState()
+const { getSelectedIds, firstSelectedFile } = useFileSelection()
+const { getFileState } = useFileState()
 
-const firstFile = computed(() => firstFileId.value ? fileById(firstFileId.value) : undefined)
-
-const selectedState = computed(() => getFileState(firstFile.value?.id || ''))
-
-watch(firstFile, (newFile) => {
-  if (newFile && getFileState(newFile.id).length === 0) {
-    setupFileState(newFile.id)
-  }
-}, { immediate: true })
+const selectedState = computed(() => getFileState(firstSelectedFile.value?.id || ''))
 </script>
 
 <template>
-  <div class="w-full h-full">
-    <template v-if="firstFileId">
-      <EditorFileInformation class="bg-accented/20 rounded-lg" :file-ids="selectedFileIds" />
-      <div class="pt-8 pb-14">
-        <BaseCollapsible>
-          <template #title>
-            <span>IPTC-IIM</span>
-          </template>
+  <div v-if="firstSelectedFile" class="w-full h-full">
+    <EditorFileInformation class="bg-accented/20 rounded-lg" :file-ids="getSelectedIds()" />
+    <div class="pt-8 pb-14">
+      <BaseCollapsible v-if="selectedState.length > 0">
+        <template #title>
+          <span>IPTC-IIM</span>
+        </template>
 
-          <template #content>
-            <div class="py-4">
-              <UForm v-if="firstFile" :state="selectedState">
-                <EditorCategories v-model="selectedState" />
-              </UForm>
-            </div>
-          </template>
-        </BaseCollapsible>
-      </div>
-    </template>
-    <template v-else>
-      <p>No files selected!</p>
-    </template>
+        <template #content>
+          <div class="py-4">
+            <UForm v-if="firstSelectedFile" :state="selectedState">
+              <EditorCategories v-model="selectedState" />
+            </UForm>
+          </div>
+        </template>
+      </BaseCollapsible>
+    </div>
+  </div>
+  <div v-else>
+    <p>No files selected!</p>
   </div>
 </template>
diff --git a/app/components/Editor/FileInformation.vue b/app/components/Editor/FileInformation.vue
index 19f2cba..a0a4c83 100644
--- a/app/components/Editor/FileInformation.vue
+++ b/app/components/Editor/FileInformation.vue
@@ -1,28 +1,30 @@
 <script setup lang="ts">
 const props = defineProps<{
-  fileIds: Set<string>
+  fileIds: string[]
 }>()
 
-const { fileById } = useFiles()
+const { loadedFiles } = useFiles()
 
 const fileToShow = computed(() => {
-  if (props.fileIds.size === 0) {
+  if (props.fileIds.length === 0) {
     return null
   }
 
-  const firstFileId: string = Array.from(props.fileIds)[0]!
-  return fileById(firstFileId)
+  const firstFileId: string = props.fileIds[0]!
+  return loadedFiles.value[firstFileId]
 })
 
 const file = computed(() => fileToShow.value ? URL.createObjectURL(fileToShow.value?.file) : undefined)
 </script>
 
 <template>
-  <div v-if="fileToShow" class="flex gap-4">
-    <div class="max-w-[20rem]">
-      <NuxtImg :src="file" class="rounded-l-lg" />
-    </div>
-    <div class="flex flex-col w-full justify-center">
+  <div v-if="fileToShow" class="flex h-[22rem] gap-4">
+    <NuxtImg
+      :src="file"
+      :alt="fileToShow.file.name"
+      :style="{ height: '22rem' }"
+    />
+    <div class="flex flex-col w-full justify-center py-4">
       <h1 class="text-lg font-bold">
         File Properties
       </h1>
diff --git a/app/components/File/List.vue b/app/components/File/List.vue
index 6ac1329..81d33a3 100644
--- a/app/components/File/List.vue
+++ b/app/components/File/List.vue
@@ -2,18 +2,18 @@
 import type { FileWithMetadata } from '~/shared/types'
 
 defineProps<{
-  files: FileWithMetadata[]
+  files: FilesIdb
 }>()
 
 const emit = defineEmits<{
   (e: 'select', file: FileWithMetadata): void
-  (e: 'remove', file: FileWithMetadata): void
+  (e: 'remove', fileId: string): void
 }>()
 </script>
 
 <template>
   <div class="flex flex-col gap-2 overflow-y-auto pb-2">
-    <div v-for="file in files" :key="`${file.file.name}-${file.file.size}`">
+    <div v-for="file in Object.values(files)" :key="`${file.file.name}-${file.file.size}`">
       <FilePreview
         :image="file"
         :width="64"
diff --git a/app/components/File/Preview.vue b/app/components/File/Preview.vue
index a0c159c..f3cb810 100644
--- a/app/components/File/Preview.vue
+++ b/app/components/File/Preview.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'select', file: FileWithMetadata): void
-  (e: 'remove', file: FileWithMetadata): void
+  (e: 'remove', fileId: string): void
 }>()
 
 const file = computed(() => props.image.file)
@@ -39,6 +39,6 @@ const { isSelected } = useFileSelection()
         <span class="text-default/50 text-sm truncate">{{ formatDate(file.lastModified).value }}</span>
       </UTooltip>
     </div>
-    <UButton color="error" variant="ghost" icon="i-lucide-circle-x" class="absolute top-0 right-0 mt-1 mr-1" @click.stop="emit('remove', image)" />
+    <UButton color="error" variant="ghost" icon="i-lucide-circle-x" class="absolute top-0 right-0 mt-1 mr-1" @click.stop="emit('remove', image.id)" />
   </div>
 </template>
diff --git a/app/components/File/Upload.vue b/app/components/File/Upload.vue
deleted file mode 100644
index 6e0212f..0000000
--- a/app/components/File/Upload.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { FileWithHandle } from 'browser-fs-access'
-import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
-import { fileOpen } from 'browser-fs-access'
-
-const { data: savedFiles } = useIDBKeyval<FileWithHandle[]>('uploaded-images', [])
-const files = defineModel<FileWithHandle[]>()
-
-async function openFile() {
-  const blob = await fileOpen({
-    mimeTypes: ['image/*'],
-    startIn: 'pictures',
-    multiple: true,
-  })
-
-  files.value = [...files.value ?? [], ...blob]
-  savedFiles.value = [...savedFiles.value ?? [], ...blob]
-}
-</script>
-
-<template>
-  <div>
-    <button type="button" @click="openFile">
-      Upload Files
-    </button>
-  </div>
-</template>
diff --git a/app/composables/useFileSelection.ts b/app/composables/useFileSelection.ts
index f90f8d0..bc3c0a1 100644
--- a/app/composables/useFileSelection.ts
+++ b/app/composables/useFileSelection.ts
@@ -1,25 +1,30 @@
 import type { FileWithMetadata } from '~/shared/types'
 
+type FileSelection = Record<string, boolean>
+
 const ALLOW_MULTIPLE_SELECTION = false
 const IDB_KEY_SELECTED_FILES = 'selected-files'
 
-const selectedFileIds = ref<Set<string>>(new Set())
+const selections = ref<FileSelection>({})
 
 export default function useFileSelection() {
-  async function loadselectedFileIdsFromIndexedDB() {
-    const files = await loadFromIdb<string[]>(IDB_KEY_SELECTED_FILES, [])
-    selectedFileIds.value = new Set(files ?? [])
+  async function loadSelectedFileIdsFromIndexedDB() {
+    if (import.meta.env.SSR) {
+      return
+    }
+
+    const files = await loadFromIdb<FileSelection>(IDB_KEY_SELECTED_FILES, {})
+    selections.value = files ?? {}
   }
 
-  async function update(fileIds: Set<string>) {
-    await updateIdb<string[]>(IDB_KEY_SELECTED_FILES, Array.from(fileIds))
-    await loadselectedFileIdsFromIndexedDB()
+  function getSelectedIds(): string[] {
+    return Object.entries(selections.value).filter(([_, isSelected]) => isSelected).map(([fileId, _]) => fileId)
   }
 
-  async function toggleSelection(file: FileWithMetadata, modifier: 'shift' | 'ctrl' | undefined = undefined) {
+  function toggleSelection(file: FileWithMetadata, modifier: 'shift' | 'ctrl' | undefined = undefined) {
     if (ALLOW_MULTIPLE_SELECTION) {
       if (modifier === 'shift') {
-        if (selectedFileIds.value.size === 0) {
+        if (getSelectedIds().length === 0) {
           handleNormalSelect(file.id)
         }
         else {
@@ -35,8 +40,6 @@ export default function useFileSelection() {
     else {
       handleNormalSelect(file.id)
     }
-
-    await update(selectedFileIds.value)
   }
 
   /* TODO: Reimplement shift selection
@@ -47,39 +50,39 @@ export default function useFileSelection() {
   */
 
   function handleCtrlSelect(fileId: string) {
-    isSelected(fileId) ? selectedFileIds.value.add(fileId) : selectedFileIds.value.delete(fileId)
+    selections.value[fileId] = !selections.value[fileId]
   }
 
   function handleNormalSelect(fileId: string) {
-    const areMoreSelected = selectedFileIds.value.size > 1
+    const areMoreSelected = getSelectedIds().length > 1
     const isSelectedBefore = isSelected(fileId)
 
-    if (isSelectedBefore && areMoreSelected) {
-      selectedFileIds.value.clear()
-      selectedFileIds.value.add(fileId)
-    }
-    else {
-      if (isSelectedBefore) {
-        selectedFileIds.value.clear()
-      }
-      else {
-        selectedFileIds.value.clear()
-        selectedFileIds.value.add(fileId)
-      }
+    deselectAll()
+
+    if ((isSelectedBefore && areMoreSelected) || !isSelectedBefore) {
+      selections.value[fileId] = true
     }
   }
 
+  function deselectAll() {
+    Object.keys(selections.value).forEach((key) => {
+      selections.value[key] = false
+    })
+  }
+
   function isSelected(fileId: string): boolean {
-    return selectedFileIds.value.has(fileId)
+    return selections.value[fileId] ?? false
   }
 
-  const firstFileId = computed(() => {
-    if (selectedFileIds.value.size === 0) {
-      return null
-    }
+  const firstSelectedId = computed(() => {
+    const selectedIds = getSelectedIds()
+    return selectedIds.length > 0 ? selectedIds[0] : null
+  })
 
-    return selectedFileIds.value.values().next().value
+  const firstSelectedFile = computed(() => {
+    const { loadedFiles } = useFiles()
+    return firstSelectedId.value ? loadedFiles.value[firstSelectedId.value] : null
   })
 
-  return { toggleSelection, selectedFileIds, update, isSelected, firstFileId }
+  return { toggleSelection, selections, isSelected, firstSelectedId, firstSelectedFile, loadSelectedFileIdsFromIndexedDB, getSelectedIds }
 }
diff --git a/app/composables/useFileState.ts b/app/composables/useFileState.ts
index 83c24cf..84e1f10 100644
--- a/app/composables/useFileState.ts
+++ b/app/composables/useFileState.ts
@@ -1,4 +1,3 @@
-import type { FileWithMetadata } from '~/shared/types'
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { supported } from 'browser-fs-access'
 import { iptcIimFields } from '~/utils/iptc-iim/mapping'
@@ -7,22 +6,23 @@ type FileState = Record<string, IPTCFieldWithValue[]>
 
 const fileStates = ref<FileState>({})
 const isLoading = ref(true)
+const filesChanged = ref(0)
 
 export default function useFileState() {
-  const { updateMetadata, markAsDownloaded, fileById } = useFiles()
-
-  if (!import.meta.env.SSR) {
-    loadFileStatesFromIndexedDB()
-  }
+  const { loadedFiles, updateMetadata, markAsDownloaded } = useFiles()
 
   async function loadFileStatesFromIndexedDB() {
+    if (import.meta.env.SSR) {
+      return
+    }
+
     const states = await loadFromIdb<FileState>('file-states', {})
     fileStates.value = states ?? {}
     isLoading.value = false
   }
 
-  async function setupFileState(fileId: string) {
-    const file = fileById(fileId)
+  function setupFileState(fileId: string) {
+    const file = loadedFiles.value[fileId]
 
     if (!file) {
       throw new Error('File not found for setting up state')
@@ -33,8 +33,6 @@ export default function useFileState() {
       value: file.metadata[field.key] || '',
       original: file.metadata[field.key] || '',
     }))
-
-    return updateIdb<FileState>('file-states', fileStates.value)
   }
 
   function removeFileState(fileId: string) {
@@ -53,21 +51,13 @@ export default function useFileState() {
     fileStates.value[fileId]!.map((field) => {
       if (field.key === key) {
         field.value = newValue ?? ''
-        if (!field.original) {
-          field.original = field.value
-        }
       }
       return field
     })
   }
 
-  function hasFieldChanged(metadata: Record<string, any>, key: string, currentValue: string) {
-    const originalValue = metadata[key] || ''
-    return originalValue !== currentValue
-  }
-
   function fileChanges(fileId: string) {
-    const file = fileById(fileId)
+    const file = loadedFiles.value[fileId]
     if (!file) {
       return 0
     }
@@ -76,8 +66,7 @@ export default function useFileState() {
     let changes = 0
 
     state.forEach((field) => {
-      const originalValue = file.metadata[field.key] || ''
-      if (originalValue !== field.value) {
+      if (field.original !== field.value) {
         changes++
       }
     })
@@ -85,18 +74,6 @@ export default function useFileState() {
     return changes
   }
 
-  const filesChanged = ref(0)
-
-  function stateIndexByKey(state: IPTCFieldWithValue[], key: string) {
-    const field = state.find(f => f.key === key)
-
-    if (!field) {
-      throw new Error(`Field with key ${key} not found in state`)
-    }
-
-    return state.indexOf(field)
-  }
-
   async function saveAll() {
     if (!filesChanged.value) {
       return
@@ -108,7 +85,7 @@ export default function useFileState() {
     }))
 
     statesToSave.forEach(async ({ fileId, state }) => {
-      const file = fileById(fileId)
+      const file = loadedFiles.value[fileId]
       if (!file) {
         throw new Error('File not found for saving metadata')
       }
@@ -131,36 +108,16 @@ export default function useFileState() {
     }
   }
 
-  function reloadStates(files: FileWithMetadata[]) {
-    files.forEach((file) => {
-      removeFileState(file.id)
-
-      Object.entries(file.metadata).forEach(([key, value]) => {
-        updateFileData(file.id, key, value)
-      })
-    })
-  }
-
-  /*
-  watchDeep(() => fileStates.value, async (updatedStates) => {
-    const totalChanges = Object.keys(updatedStates).filter(fileId => fileChanges(fileId) > 0).length
-    filesChanged.value = totalChanges
-
-    await updateIdb()
-  })
-  */
-
   return {
     fileStates,
     setupFileState,
     removeFileState,
     getFileState,
     updateFileData,
-    hasFieldChanged,
     fileChanges,
-    reloadStates,
     filesChanged,
     saveAll,
-    stateIndexByKey,
+    isLoading,
+    loadFileStatesFromIndexedDB,
   }
 }
diff --git a/app/composables/useFiles.ts b/app/composables/useFiles.ts
index b6bce1d..fc4a173 100644
--- a/app/composables/useFiles.ts
+++ b/app/composables/useFiles.ts
@@ -2,166 +2,146 @@ import type { FileWithHandle } from 'browser-fs-access'
 import type { FileWithMetadata } from '~/shared/types'
 import { parseMetadata, writeMetadata } from 'iptc-parser'
 
-const loadedFiles = ref<FileWithMetadata[]>([])
+export type FilesIdb = Record<string, FileWithMetadata>
+
+const loadedFiles = ref<FilesIdb>({})
 const isLoading = ref(true)
 const fileAmount = ref(0)
 
 const IDB_KEY_FILES = 'uploaded-images'
 const COOKIE_KEY_FILE_AMOUNT = 'file-amount'
 
-async function loadFilesFromIndexedDB() {
-  const files = await loadFromIdb<FileWithMetadata[]>(IDB_KEY_FILES, [])
-  loadedFiles.value = files ?? []
-  isLoading.value = false
-
-  const amountCookie = useCookie(COOKIE_KEY_FILE_AMOUNT)
-  amountCookie.value = String(loadedFiles.value.length)
-}
-
-function loadAmountFromCookies() {
-  const amountCookie = useCookie(COOKIE_KEY_FILE_AMOUNT)
-  fileAmount.value = Number.parseInt(amountCookie.value ?? '0')
-}
-
-function deduplicateFiles(files: FileWithMetadata[]) {
-  const dedupedIds = new Set()
-
-  return files.filter((file) => {
-    if (dedupedIds.has(file.id)) {
-      return false
+export default function useFiles() {
+  async function loadFilesFromIndexedDB() {
+    if (import.meta.env.SSR) {
+      return
     }
-    dedupedIds.add(file.id)
-    return true
-  })
-}
-
-async function update(updatedFiles: FileWithMetadata[]) {
-  await updateIdb<FileWithMetadata[]>(IDB_KEY_FILES, updatedFiles)
 
-  await loadFilesFromIndexedDB()
-}
+    const files = await loadFromIdb<FilesIdb>(IDB_KEY_FILES, {})
+    loadedFiles.value = files ?? {}
+    isLoading.value = false
+  }
 
-async function addFiles(files: FileWithHandle[]) {
-  const metadataMapping: FileWithMetadata[] = await Promise.all(files.map(async (file) => {
-    const buffer = await file.arrayBuffer()
-    const fileId = getFileId(file)
+  function loadAmountFromCookies() {
+    const amountCookie = useCookie(COOKIE_KEY_FILE_AMOUNT)
+    fileAmount.value = Number.parseInt(amountCookie.value ?? '0')
+  }
 
-    try {
-      const metadata = parseMetadata(new Uint8Array(buffer))
+  function deduplicateFiles(files: FileWithMetadata[]) {
+    const dedupedIds = new Set()
 
-      return {
-        id: fileId,
-        file,
-        handle: file.handle,
-        metadata,
+    return files.filter((file) => {
+      if (dedupedIds.has(file.id)) {
+        return false
       }
-    }
-    catch {
-      return {
-        id: fileId,
-        file,
-        handle: file.handle,
-        metadata: {},
-      }
-    }
-  }))
+      dedupedIds.add(file.id)
+      return true
+    })
+  }
 
-  const dedupedUpdatedFiles = deduplicateFiles([...loadedFiles.value, ...metadataMapping])
-  update(dedupedUpdatedFiles)
-}
+  async function addFiles(files: FileWithHandle[]) {
+    const metadataMapping: FileWithMetadata[] = await Promise.all(files.map(async (file) => {
+      const buffer = await file.arrayBuffer()
+      const fileId = getFileId(file)
 
-function markAsDownloaded(fileIds: string[]) {
-  loadedFiles.value = loadedFiles.value.map((file) => {
-    if (fileIds.includes(file.id)) {
-      return {
-        ...file,
-        isDownloaded: true,
+      try {
+        const metadata = parseMetadata(new Uint8Array(buffer))
+
+        return {
+          id: fileId,
+          file,
+          handle: file.handle,
+          metadata,
+        }
       }
-    }
-    return file
-  })
-}
+      catch {
+        return {
+          id: fileId,
+          file,
+          handle: file.handle,
+          metadata: {},
+        }
+      }
+    }))
 
-async function removeFile(fileToRemove: FileWithMetadata) {
-  const { selectedFileIds, update: updateIndexes } = useFileSelection()
+    const dedupedUpdatedFiles = deduplicateFiles([...Object.values(loadedFiles.value), ...metadataMapping])
 
-  if (selectedFileIds.value.has(fileToRemove.id)) {
-    selectedFileIds.value.delete(fileToRemove.id)
-  }
+    const { setupFileState } = useFileState()
 
-  const updatedFiles = loadedFiles.value.filter(file => file.file !== fileToRemove.file)
+    dedupedUpdatedFiles.forEach((file) => {
+      loadedFiles.value[file.id] = file
+      setupFileState(file.id)
+    })
 
-  await update(updatedFiles)
-  await updateIndexes(selectedFileIds.value)
-}
+    fileAmount.value = Object.keys(loadedFiles.value).length
 
-async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: string, value?: string }>) {
-  const mappedMetadata = metadata.reduce<Record<string, string | undefined>>((acc, { key, value }) => {
-    acc[key] = value
-    return acc
-  }, {})
+    const amountCookie = useCookie(COOKIE_KEY_FILE_AMOUNT)
+    amountCookie.value = String(fileAmount.value)
+  }
 
-  const originatingProgram: string | undefined = import.meta.env.VITE_APP_NAME
-  const programVersion: string | undefined = import.meta.env.VITE_APP_VERSION
+  function markAsDownloaded(fileIds: string[]) {
+    fileIds.forEach((fileId) => {
+      if (!loadedFiles.value[fileId]) {
+        return
+      }
 
-  if (!originatingProgram || !programVersion) {
-    console.warn('Could not set originating program and version in metadata update')
+      loadedFiles.value[fileId] = {
+        ...loadedFiles.value[fileId],
+        isDownloaded: true,
+      }
+    })
   }
 
-  const updatedMetadata = {
-    ...file.metadata,
-    ...mappedMetadata,
-    // Automatically set originating program and version using values from env file if defined
-    ...(originatingProgram ? { '2:65': originatingProgram } : {}),
-    ...(programVersion ? { '2:70': programVersion } : {}),
-  }
+  function removeFile(fileToRemoveId: string) {
+    const { selections } = useFileSelection()
 
-  try {
-    await writeMetadata(file.file, updatedMetadata, undefined, file.handle)
-  }
-  catch (e) {
-    console.warn('Failed to save metadata for file: ', file.file.name, ' - ', e)
+    delete selections.value[fileToRemoveId]
+    delete loadedFiles.value[fileToRemoveId]
   }
 
-  const updatedFiles = loadedFiles.value.map((loadedFile) => {
-    if (loadedFile.id === file.id) {
-      return {
-        ...loadedFile,
-        metadata: updatedMetadata,
-      }
-    }
+  async function updateMetadata(file: FileWithMetadata, metadata: Array<{ key: string, value?: string }>) {
+    const mappedMetadata = metadata.reduce<Record<string, string | undefined>>((acc, { key, value }) => {
+      acc[key] = value
+      return acc
+    }, {})
 
-    return loadedFile
-  })
+    const originatingProgram: string | undefined = import.meta.env.VITE_APP_NAME
+    const programVersion: string | undefined = import.meta.env.VITE_APP_VERSION
 
-  // Update file state after metadata change
-  const { reloadStates } = useFileState()
-  reloadStates(updatedFiles)
+    if (!originatingProgram || !programVersion) {
+      console.warn('Could not set originating program and version in metadata update')
+    }
 
-  await update(updatedFiles)
-}
+    const updatedMetadata = {
+      ...file.metadata,
+      ...mappedMetadata,
+      // Automatically set originating program and version using values from env file if defined
+      ...(originatingProgram ? { '2:65': originatingProgram } : {}),
+      ...(programVersion ? { '2:70': programVersion } : {}),
+    }
 
-function fileById(fileId: string) {
-  return loadedFiles.value.find(file => file.id === fileId)
-}
+    try {
+      await writeMetadata(file.file, updatedMetadata, undefined, file.handle)
+    }
+    catch (e) {
+      console.warn('Failed to save metadata for file: ', file.file.name, ' - ', e)
+    }
 
-export default function () {
-  if (!import.meta.env.SSR) {
-    loadFilesFromIndexedDB()
+    loadedFiles.value[file.id] = {
+      ...file,
+      metadata: updatedMetadata,
+    }
   }
 
-  loadAmountFromCookies()
-
   return {
     loadedFiles,
     isLoading,
     loadFilesFromIndexedDB,
+    loadAmountFromCookies,
     addFiles,
     removeFile,
     fileAmount,
     updateMetadata,
-    fileById,
     markAsDownloaded,
-    update,
   }
 }
diff --git a/app/package.json b/app/package.json
index 57104c3..bb7b3be 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,7 +16,7 @@
     "@nuxt/eslint": "1.4.1",
     "@nuxt/fonts": "0.11.4",
     "@nuxt/icon": "1.13.0",
-    "@nuxt/image": "1.11.0",
+    "@nuxt/image": "^2.0.0",
     "@nuxt/ui": "^4.1.0",
     "@vueuse/core": "^13.9.0",
     "@vueuse/integrations": "^13.9.0",
@@ -37,4 +37,4 @@
     "@vueuse/nuxt": "^13.9.0",
     "eslint": "^9.29.0"
   }
-}
+}
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7834bd6..8c30a86 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,9 +1,19 @@
 <script setup lang="ts">
 import type { FileWithMetadata } from '~/shared/types'
 
-const { loadedFiles, isLoading, fileAmount, removeFile } = useFiles()
-const { selectedFileIds, toggleSelection } = useFileSelection()
-const { removeFileState } = useFileState()
+const { loadedFiles, removeFile, fileAmount, loadAmountFromCookies, loadFilesFromIndexedDB } = useFiles()
+const { getSelectedIds, toggleSelection, loadSelectedFileIdsFromIndexedDB } = useFileSelection()
+const { removeFileState, loadFileStatesFromIndexedDB } = useFileState()
+
+const isLoading = ref(true)
+
+Promise.all([
+  loadFilesFromIndexedDB(),
+  loadFileStatesFromIndexedDB(),
+  loadSelectedFileIdsFromIndexedDB(),
+]).then(() => isLoading.value = false)
+
+loadAmountFromCookies()
 
 const { shift, ctrl } = useMagicKeys()
 
@@ -12,9 +22,9 @@ function toggleFileSelection(file: FileWithMetadata) {
   toggleSelection(file, modifier)
 }
 
-async function remove(file: FileWithMetadata) {
-  await removeFile(file)
-  removeFileState(file.id)
+function remove(fileId: string) {
+  removeFile(fileId)
+  removeFileState(fileId)
 }
 </script>
 
@@ -26,44 +36,48 @@ async function remove(file: FileWithMetadata) {
           <FileLoadButton />
         </div>
       </template>
-      <div v-if="isLoading && fileAmount > 0" class="flex flex-col gap-2">
-        <FileSkeleton v-for="i in fileAmount" :key="i" />
-      </div>
-      <FileList
-        v-else-if="!isLoading && loadedFiles.length > 0"
-        :files="loadedFiles"
-        class="FileContainer"
-        :class="{ DisableSelection: shift }"
-        @select="toggleFileSelection"
-        @remove="remove"
-      />
-      <UEmpty
-        v-else
-        title="No Files found"
-        description="Upload some files using the button above to get started!"
-      >
-        <template #title>
-          <div class="flex items-center gap-2">
-            <div class="w-7 h-7 flex items-center justify-center rounded-full bg-accented/50">
-              <UIcon name="i-lucide-file-minus" class="w-4 h-4 bg-neutral-500" />
+
+      <div v-if="!isLoading">
+        <FileList
+          v-if="Object.values(loadedFiles).length > 0"
+          :files="loadedFiles"
+          class="FileContainer"
+          :class="{ DisableSelection: shift }"
+          @select="toggleFileSelection"
+          @remove="remove"
+        />
+
+        <UEmpty
+          v-else
+          title="No Files found"
+          description="Upload some files using the button above to get started!"
+        >
+          <template #title>
+            <div class="flex items-center gap-2">
+              <div class="w-7 h-7 flex items-center justify-center rounded-full bg-accented/50">
+                <UIcon name="i-lucide-file-minus" class="w-4 h-4 bg-neutral-500" />
+              </div>
+              <span>No Files loaded yet</span>
             </div>
-            <span>No Files loaded yet</span>
-          </div>
-        </template>
-      </UEmpty>
+          </template>
+        </UEmpty>
+      </div>
+      <div v-else>
+        <USkeleton v-for="file in fileAmount" :key="file" class="w-full h-20 mb-2 rounded-lg" />
+      </div>
     </UDashboardSidebar>
     <UDashboardPanel>
       <template #header>
         <UDashboardNavbar title="Edit Metadata">
           <template #right>
-            <EditorSaveButton v-if="selectedFileIds.size > 0" />
+            <EditorSaveButton v-if="getSelectedIds().length > 0" />
           </template>
         </UDashboardNavbar>
       </template>
 
       <template #body>
-        <USkeleton v-if="isLoading" class="h-full" />
-        <EditorContainer v-else />
+        <EditorContainer v-if="!isLoading" />
+        <USkeleton v-else class="w-full h-full rounded-lg" />
       </template>
     </UDashboardPanel>
   </UDashboardGroup>

From c47e569bc8965b2913f7a3872aa05b951d01087d Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sun, 23 Nov 2025 00:52:54 +0100
Subject: [PATCH 06/14] chore: updated lock file

---
 pnpm-lock.yaml | 816 +++++++++++++++++++++++--------------------------
 1 file changed, 383 insertions(+), 433 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05bfce9..74bc624 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: 1.13.0
         version: 1.13.0(magicast@0.3.5)(vite@7.1.7(@types/node@24.5.2)(jiti@2.6.0)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.21(typescript@5.9.2))
       '@nuxt/image':
-        specifier: 1.11.0
-        version: 1.11.0(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0)(magicast@0.3.5)
+        specifier: ^2.0.0
+        version: 2.0.0(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0)(magicast@0.3.5)
       '@nuxt/ui':
         specifier: ^4.1.0
         version: 4.1.0(@babel/parser@7.28.4)(async-validator@4.2.5)(change-case@5.4.4)(db0@0.3.2)(embla-carousel@8.6.0)(idb-keyval@6.2.2)(ioredis@5.8.0)(magicast@0.3.5)(typescript@5.9.2)(vite@7.1.7(@types/node@24.5.2)(jiti@2.6.0)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.5.1(vue@3.5.21(typescript@5.9.2)))(vue@3.5.21(typescript@5.9.2))(zod@4.1.12)
@@ -341,6 +341,9 @@ packages:
   '@emnapi/runtime@1.5.0':
     resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
 
+  '@emnapi/runtime@1.7.1':
+    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
+
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
@@ -583,9 +586,8 @@ packages:
     resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@fastify/accept-negotiator@1.1.0':
-    resolution: {integrity: sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==}
-    engines: {node: '>=14'}
+  '@fastify/accept-negotiator@2.0.1':
+    resolution: {integrity: sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==}
 
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
@@ -632,6 +634,143 @@ packages:
     peerDependencies:
       vue: '>=3'
 
+  '@img/colour@1.0.0':
+    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
   '@internationalized/date@3.10.0':
     resolution: {integrity: sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==}
 
@@ -775,8 +914,8 @@ packages:
   '@nuxt/icon@2.0.0':
     resolution: {integrity: sha512-sy8+zkKMYp+H09S0cuTteL3zPTmktqzYPpPXV9ZkLNjrQsaPH08n7s/9wjr+C/K/w2R3u18E3+P1VIQi3xaq1A==}
 
-  '@nuxt/image@1.11.0':
-    resolution: {integrity: sha512-4kzhvb2tJfxMsa/JZeYn1sMiGbx2J/S6BQrQSdXNsHgSvywGVkFhTiQGjoP6O49EsXyAouJrer47hMeBcTcfXQ==}
+  '@nuxt/image@2.0.0':
+    resolution: {integrity: sha512-otHi6gAoYXKLrp8m27ZjX1PjxOPaltQ4OiUs/BhkW995mF/vXf8SWQTw68fww+Uric0v+XgoVrP9icDi+yT6zw==}
     engines: {node: '>=18.20.6'}
 
   '@nuxt/kit@3.19.2':
@@ -787,6 +926,10 @@ packages:
     resolution: {integrity: sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==}
     engines: {node: '>=18.12.0'}
 
+  '@nuxt/kit@4.2.1':
+    resolution: {integrity: sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==}
+    engines: {node: '>=18.12.0'}
+
   '@nuxt/schema@4.1.2':
     resolution: {integrity: sha512-uFr13C6c52OFbF3hZVIV65KvhQRyrwp1GlAm7EVNGjebY8279QEel57T4R9UA1dn2Et6CBynBFhWoFwwo97Pig==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -1543,10 +1686,6 @@ packages:
     peerDependencies:
       vue: ^2.7.0 || ^3.0.0
 
-  '@trysound/sax@0.2.0':
-    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
-    engines: {node: '>=10.13.0'}
-
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -2106,36 +2245,6 @@ packages:
   bare-events@2.7.0:
     resolution: {integrity: sha512-b3N5eTW1g7vXkw+0CXh/HazGTcO5KYuu/RCNaJbDMPI6LHDi+7qe8EmxKUVe1sUbY2KZOVZFyj62x0OEz9qyAA==}
 
-  bare-fs@4.4.4:
-    resolution: {integrity: sha512-Q8yxM1eLhJfuM7KXVP3zjhBvtMJCYRByoTT+wHXjpdMELv0xICFJX+1w4c7csa+WZEOsq4ItJ4RGwvzid6m/dw==}
-    engines: {bare: '>=1.16.0'}
-    peerDependencies:
-      bare-buffer: '*'
-    peerDependenciesMeta:
-      bare-buffer:
-        optional: true
-
-  bare-os@3.6.2:
-    resolution: {integrity: sha512-T+V1+1srU2qYNBmJCXZkUY5vQ0B4FSlL3QDROnKQYOqeiQR8UbjNHlPa+TIbM4cuidiN9GaTaOZgSEgsvPbh5A==}
-    engines: {bare: '>=1.14.0'}
-
-  bare-path@3.0.0:
-    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
-
-  bare-stream@2.7.0:
-    resolution: {integrity: sha512-oyXQNicV1y8nc2aKffH+BUHFRXmx6VrPzlnaEvMhram0nPBrKcEdcyBg5r08D0i8VxngHFAiVyn1QKXpSG0B8A==}
-    peerDependencies:
-      bare-buffer: '*'
-      bare-events: '*'
-    peerDependenciesMeta:
-      bare-buffer:
-        optional: true
-      bare-events:
-        optional: true
-
-  bare-url@2.2.2:
-    resolution: {integrity: sha512-g+ueNGKkrjMazDG3elZO1pNs3HY5+mMmOet1jtKyhOaCnkLzitxf26z7hoAEkDNgdNmnc1KIlt/dw6Po6xZMpA==}
-
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -2149,9 +2258,6 @@ packages:
   birpc@2.6.1:
     resolution: {integrity: sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==}
 
-  bl@4.1.0:
-    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
-
   blob-to-buffer@1.2.9:
     resolution: {integrity: sha512-BF033y5fN6OCofD3vgHmNtwZWRcq9NLyyxyILx9hfMy1sXYy4ojFl765hJ2lP0YaN2fuxPaLO2Vzzoxy0FLFFA==}
 
@@ -2186,9 +2292,6 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  buffer@5.7.1:
-    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
-
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
@@ -2214,6 +2317,14 @@ packages:
       magicast:
         optional: true
 
+  c12@3.3.2:
+    resolution: {integrity: sha512-QkikB2X5voO1okL3QsES0N690Sn/K9WokXqUsDQsWy5SnYb+psYQFGA10iy1bZHj3fjISKsI67Q90gruvWWM3A==}
+    peerDependencies:
+      magicast: '*'
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -2253,9 +2364,6 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
-  chownr@1.1.4:
-    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
-
   chownr@3.0.0:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
@@ -2294,13 +2402,6 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color-string@1.9.1:
-    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
-
-  color@4.2.3:
-    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
-    engines: {node: '>=12.5.0'}
-
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
@@ -2314,10 +2415,6 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  commander@7.2.0:
-    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
-    engines: {node: '>= 10'}
-
   comment-parser@1.4.1:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
@@ -2404,10 +2501,6 @@ packages:
     resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
 
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   css-tree@3.1.0:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -2487,18 +2580,10 @@ packages:
   decode-named-character-reference@1.2.0:
     resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
 
-  decompress-response@6.0.0:
-    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
-    engines: {node: '>=10'}
-
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
 
-  deep-extend@0.6.0:
-    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
-    engines: {node: '>=4.0.0'}
-
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -2549,6 +2634,10 @@ packages:
     resolution: {integrity: sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==}
     engines: {node: '>=8'}
 
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
   devalue@5.3.2:
     resolution: {integrity: sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==}
 
@@ -2587,6 +2676,10 @@ packages:
     resolution: {integrity: sha512-Sf2LSQP+bOlhKWWyhFsn0UsfdK/kCWRv1iuA2gXAwt3dyNabr6QSj00I2V10pidqz69soatm9ZwZvpQMTIOd5Q==}
     engines: {node: '>=12'}
 
+  dotenv@17.2.3:
+    resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
+    engines: {node: '>=12'}
+
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
@@ -2657,9 +2750,6 @@ packages:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
-  end-of-stream@1.4.5:
-    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
-
   enhanced-resolve@5.18.3:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
@@ -2963,10 +3053,6 @@ packages:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
 
-  expand-template@2.0.3:
-    resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
-    engines: {node: '>=6'}
-
   expect-type@1.2.2:
     resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
     engines: {node: '>=12.0.0'}
@@ -2974,6 +3060,9 @@ packages:
   exsolve@1.0.7:
     resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -3073,9 +3162,6 @@ packages:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
 
-  fs-constants@1.0.0:
-    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3116,9 +3202,6 @@ packages:
   git-url-parse@16.1.0:
     resolution: {integrity: sha512-cPLz4HuK86wClEW7iDdeAKcCVlWXmrLpb2L+G9goW0Z1dtpNS6BXXSOckUTlJT/LDQViE1QZKstNORzHsLnobw==}
 
-  github-from-package@0.0.0:
-    resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
-
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
@@ -3224,6 +3307,9 @@ packages:
   image-meta@0.2.1:
     resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
 
+  image-meta@0.2.2:
+    resolution: {integrity: sha512-3MOLanc3sb3LNGWQl1RlQlNWURE5g32aUphrDyFeCsxBTk08iE3VNe4CwsUZ0Qs1X+EfX0+r29Sxdpza4B+yRA==}
+
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -3242,9 +3328,6 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
-  ini@1.3.8:
-    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
-
   ini@4.1.1:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -3253,16 +3336,13 @@ packages:
     resolution: {integrity: sha512-AUXbKn9gvo9hHKvk6LbZJQSKn/qIfkWXrnsyL9Yrf+oeXmla9Nmf6XEumOddyhM8neynpK5oAV6r9r99KBuwzA==}
     engines: {node: '>=12.22.0'}
 
-  ipx@2.1.1:
-    resolution: {integrity: sha512-XuM9FEGOT+/45mfAWZ5ykwkZ/oE7vWpd1iWjRffMWlwAYIRzb/xD6wZhQ4BzmPMX6Ov5dqK0wUyD0OEN9oWT6g==}
+  ipx@3.1.1:
+    resolution: {integrity: sha512-7Xnt54Dco7uYkfdAw0r2vCly3z0rSaVhEXMzPvl3FndsTVm5p26j+PO+gyinkYmcsEUvX2Rh7OGK7KzYWRu6BA==}
     hasBin: true
 
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
-  is-arrayish@0.3.4:
-    resolution: {integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==}
-
   is-builtin-module@5.0.0:
     resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
     engines: {node: '>=18.20'}
@@ -3630,9 +3710,6 @@ packages:
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
@@ -3756,10 +3833,6 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
-  mimic-response@3.1.0:
-    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
-    engines: {node: '>=10'}
-
   minimatch@10.0.3:
     resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
     engines: {node: 20 || >=22}
@@ -3775,9 +3848,6 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -3789,9 +3859,6 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  mkdirp-classic@0.5.3:
-    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
-
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
@@ -3833,9 +3900,6 @@ packages:
   nanotar@0.2.0:
     resolution: {integrity: sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==}
 
-  napi-build-utils@2.0.0:
-    resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
-
   napi-postinstall@0.3.3:
     resolution: {integrity: sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -3858,13 +3922,6 @@ packages:
       xml2js:
         optional: true
 
-  node-abi@3.77.0:
-    resolution: {integrity: sha512-DSmt0OEcLoK4i3NuscSbGjOf3bqiDEutejqENSplMSFA/gmB8mkED9G4pKWnPl7MDU4rSHebKPHeitpDfyH0cQ==}
-    engines: {node: '>=10'}
-
-  node-addon-api@6.1.0:
-    resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
-
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
@@ -3950,9 +4007,6 @@ packages:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
 
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-
   onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
@@ -4283,11 +4337,6 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  prebuild-install@7.1.3:
-    resolution: {integrity: sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4310,9 +4359,6 @@ packages:
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
-  pump@3.0.3:
-    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -4336,17 +4382,9 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
-  rc@1.2.8:
-    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
-    hasBin: true
-
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
-  readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
-    engines: {node: '>= 6'}
-
   readable-stream@4.7.0:
     resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4467,6 +4505,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   send@1.2.0:
     resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
     engines: {node: '>= 18'}
@@ -4484,9 +4527,9 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
-  sharp@0.32.6:
-    resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==}
-    engines: {node: '>=14.15.0'}
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -4507,18 +4550,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  simple-concat@1.0.1:
-    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
-
-  simple-get@4.0.1:
-    resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
-
   simple-git@3.28.0:
     resolution: {integrity: sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==}
 
-  simple-swizzle@0.2.4:
-    resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
-
   sirv@3.0.2:
     resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
     engines: {node: '>=18'}
@@ -4579,6 +4613,9 @@ packages:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
   std-env@3.9.0:
     resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
@@ -4615,10 +4652,6 @@ packages:
     resolution: {integrity: sha512-OA95x+JPmL7kc7zCu+e+TeYxEiaIyndRx0OrBcK2QPPH09oAndr2ALvymxWA+Lx1PYYvFUm4O63pRkdJAaW96w==}
     engines: {node: '>=12'}
 
-  strip-json-comments@2.0.1:
-    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
-    engines: {node: '>=0.10.0'}
-
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -4651,11 +4684,6 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svgo@3.3.2:
-    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   svgo@4.0.0:
     resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
     engines: {node: '>=16'}
@@ -4697,16 +4725,6 @@ packages:
     resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
     engines: {node: '>=6'}
 
-  tar-fs@2.1.4:
-    resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
-
-  tar-fs@3.1.1:
-    resolution: {integrity: sha512-LZA0oaPOc2fVo82Txf3gw+AkEd38szODlptMYejQUhndHMLQ9M059uXR+AfS7DNo0NpINvSqDsvyaCrBVkptWg==}
-
-  tar-stream@2.2.0:
-    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
-    engines: {node: '>=6'}
-
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
@@ -4786,9 +4804,6 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  tunnel-agent@0.6.0:
-    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -5224,9 +5239,6 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-
   ws@8.18.3:
     resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
     engines: {node: '>=10.0.0'}
@@ -5655,6 +5667,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.7.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/wasi-threads@1.1.0':
     dependencies:
       tslib: 2.8.1
@@ -5877,7 +5894,7 @@ snapshots:
       '@eslint/core': 0.15.2
       levn: 0.4.1
 
-  '@fastify/accept-negotiator@1.1.0':
+  '@fastify/accept-negotiator@2.0.1':
     optional: true
 
   '@floating-ui/core@1.7.3':
@@ -5948,6 +5965,103 @@ snapshots:
       '@iconify/types': 2.0.0
       vue: 3.5.21(typescript@5.9.2)
 
+  '@img/colour@1.0.0':
+    optional: true
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.7.1
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
   '@internationalized/date@3.10.0':
     dependencies:
       '@swc/helpers': 0.5.17
@@ -6310,20 +6424,20 @@ snapshots:
       - vite
       - vue
 
-  '@nuxt/image@1.11.0(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0)(magicast@0.3.5)':
+  '@nuxt/image@2.0.0(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0)(magicast@0.3.5)':
     dependencies:
-      '@nuxt/kit': 3.19.2(magicast@0.3.5)
+      '@nuxt/kit': 4.2.1(magicast@0.3.5)
       consola: 3.4.2
       defu: 6.1.4
       h3: 1.15.4
-      image-meta: 0.2.1
+      image-meta: 0.2.2
       knitwork: 1.2.0
       ohash: 2.0.11
       pathe: 2.0.3
-      std-env: 3.9.0
+      std-env: 3.10.0
       ufo: 1.6.1
     optionalDependencies:
-      ipx: 2.1.1(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0)
+      ipx: 3.1.1(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -6340,12 +6454,10 @@ snapshots:
       - '@vercel/functions'
       - '@vercel/kv'
       - aws4fetch
-      - bare-buffer
       - db0
       - idb-keyval
       - ioredis
       - magicast
-      - react-native-b4a
       - uploadthing
 
   '@nuxt/kit@3.19.2(magicast@0.3.5)':
@@ -6403,6 +6515,31 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@nuxt/kit@4.2.1(magicast@0.3.5)':
+    dependencies:
+      c12: 3.3.2(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.7
+      ignore: 7.0.5
+      jiti: 2.6.1
+      klona: 2.0.6
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      unctx: 2.4.1
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxt/schema@4.1.2':
     dependencies:
       '@vue/shared': 3.5.21
@@ -7086,9 +7223,6 @@ snapshots:
       '@tanstack/virtual-core': 3.13.12
       vue: 3.5.21(typescript@5.9.2)
 
-  '@trysound/sax@0.2.0':
-    optional: true
-
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -7790,39 +7924,6 @@ snapshots:
 
   bare-events@2.7.0: {}
 
-  bare-fs@4.4.4:
-    dependencies:
-      bare-events: 2.7.0
-      bare-path: 3.0.0
-      bare-stream: 2.7.0(bare-events@2.7.0)
-      bare-url: 2.2.2
-      fast-fifo: 1.3.2
-    transitivePeerDependencies:
-      - react-native-b4a
-    optional: true
-
-  bare-os@3.6.2:
-    optional: true
-
-  bare-path@3.0.0:
-    dependencies:
-      bare-os: 3.6.2
-    optional: true
-
-  bare-stream@2.7.0(bare-events@2.7.0):
-    dependencies:
-      streamx: 2.23.0
-    optionalDependencies:
-      bare-events: 2.7.0
-    transitivePeerDependencies:
-      - react-native-b4a
-    optional: true
-
-  bare-url@2.2.2:
-    dependencies:
-      bare-path: 3.0.0
-    optional: true
-
   base64-js@1.5.1: {}
 
   baseline-browser-mapping@2.8.6: {}
@@ -7833,13 +7934,6 @@ snapshots:
 
   birpc@2.6.1: {}
 
-  bl@4.1.0:
-    dependencies:
-      buffer: 5.7.1
-      inherits: 2.0.4
-      readable-stream: 3.6.2
-    optional: true
-
   blob-to-buffer@1.2.9: {}
 
   boolbase@1.0.0: {}
@@ -7875,12 +7969,6 @@ snapshots:
 
   buffer-from@1.1.2: {}
 
-  buffer@5.7.1:
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-    optional: true
-
   buffer@6.0.3:
     dependencies:
       base64-js: 1.5.1
@@ -7914,6 +8002,23 @@ snapshots:
     optionalDependencies:
       magicast: 0.3.5
 
+  c12@3.3.2(magicast@0.3.5):
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.2.2
+      defu: 6.1.4
+      dotenv: 17.2.3
+      exsolve: 1.0.8
+      giget: 2.0.0
+      jiti: 2.6.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+    optionalDependencies:
+      magicast: 0.3.5
+
   cac@6.7.14: {}
 
   callsites@3.1.0: {}
@@ -7952,9 +8057,6 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
-  chownr@1.1.4:
-    optional: true
-
   chownr@3.0.0: {}
 
   ci-info@4.3.0: {}
@@ -7989,18 +8091,6 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  color-string@1.9.1:
-    dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.4
-    optional: true
-
-  color@4.2.3:
-    dependencies:
-      color-convert: 2.0.1
-      color-string: 1.9.1
-    optional: true
-
   colord@2.9.3: {}
 
   colortranslator@5.0.0: {}
@@ -8009,9 +8099,6 @@ snapshots:
 
   commander@2.20.3: {}
 
-  commander@7.2.0:
-    optional: true
-
   comment-parser@1.4.1: {}
 
   commondir@1.0.1: {}
@@ -8094,12 +8181,6 @@ snapshots:
       mdn-data: 2.0.28
       source-map-js: 1.2.1
 
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.1
-    optional: true
-
   css-tree@3.1.0:
     dependencies:
       mdn-data: 2.12.2
@@ -8174,16 +8255,8 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
-  decompress-response@6.0.0:
-    dependencies:
-      mimic-response: 3.1.0
-    optional: true
-
   deep-eql@5.0.2: {}
 
-  deep-extend@0.6.0:
-    optional: true
-
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -8213,6 +8286,9 @@ snapshots:
 
   detect-libc@2.1.1: {}
 
+  detect-libc@2.1.2:
+    optional: true
+
   devalue@5.3.2: {}
 
   devlop@1.1.0:
@@ -8249,6 +8325,8 @@ snapshots:
 
   dotenv@17.2.2: {}
 
+  dotenv@17.2.3: {}
+
   duplexer@0.1.2: {}
 
   eastasianwidth@0.2.0: {}
@@ -8302,11 +8380,6 @@ snapshots:
 
   encodeurl@2.0.0: {}
 
-  end-of-stream@1.4.5:
-    dependencies:
-      once: 1.4.0
-    optional: true
-
   enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
@@ -8979,13 +9052,12 @@ snapshots:
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
 
-  expand-template@2.0.3:
-    optional: true
-
   expect-type@1.2.2: {}
 
   exsolve@1.0.7: {}
 
+  exsolve@1.0.8: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-fifo@1.3.2: {}
@@ -9088,9 +9160,6 @@ snapshots:
 
   fresh@2.0.0: {}
 
-  fs-constants@1.0.0:
-    optional: true
-
   fsevents@2.3.3:
     optional: true
 
@@ -9128,9 +9197,6 @@ snapshots:
     dependencies:
       git-up: 8.1.1
 
-  github-from-package@0.0.0:
-    optional: true
-
   github-slugger@2.0.0: {}
 
   glob-parent@5.1.2:
@@ -9234,6 +9300,8 @@ snapshots:
 
   image-meta@0.2.1: {}
 
+  image-meta@0.2.2: {}
+
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
@@ -9253,9 +9321,6 @@ snapshots:
 
   inherits@2.0.4: {}
 
-  ini@1.3.8:
-    optional: true
-
   ini@4.1.1: {}
 
   ioredis@5.8.0:
@@ -9272,21 +9337,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ipx@2.1.1(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0):
+  ipx@3.1.1(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0):
     dependencies:
-      '@fastify/accept-negotiator': 1.1.0
+      '@fastify/accept-negotiator': 2.0.1
       citty: 0.1.6
       consola: 3.4.2
       defu: 6.1.4
       destr: 2.0.5
       etag: 1.8.1
       h3: 1.15.4
-      image-meta: 0.2.1
+      image-meta: 0.2.2
       listhen: 1.9.0
       ofetch: 1.4.1
-      pathe: 1.1.2
-      sharp: 0.32.6
-      svgo: 3.3.2
+      pathe: 2.0.3
+      sharp: 0.34.5
+      svgo: 4.0.0
       ufo: 1.6.1
       unstorage: 1.17.1(db0@0.3.2)(idb-keyval@6.2.2)(ioredis@5.8.0)
       xss: 1.0.15
@@ -9306,19 +9371,14 @@ snapshots:
       - '@vercel/functions'
       - '@vercel/kv'
       - aws4fetch
-      - bare-buffer
       - db0
       - idb-keyval
       - ioredis
-      - react-native-b4a
       - uploadthing
     optional: true
 
   iron-webcrypto@1.2.1: {}
 
-  is-arrayish@0.3.4:
-    optional: true
-
   is-builtin-module@5.0.0:
     dependencies:
       builtin-modules: 5.0.0
@@ -9717,9 +9777,6 @@ snapshots:
 
   mdn-data@2.0.28: {}
 
-  mdn-data@2.0.30:
-    optional: true
-
   mdn-data@2.12.2: {}
 
   merge-stream@2.0.0: {}
@@ -9941,9 +9998,6 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
-  mimic-response@3.1.0:
-    optional: true
-
   minimatch@10.0.3:
     dependencies:
       '@isaacs/brace-expansion': 5.0.0
@@ -9960,9 +10014,6 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
-  minimist@1.2.8:
-    optional: true
-
   minipass@7.1.2: {}
 
   minizlib@3.1.0:
@@ -9971,9 +10022,6 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  mkdirp-classic@0.5.3:
-    optional: true
-
   mlly@1.8.0:
     dependencies:
       acorn: 8.15.0
@@ -10013,9 +10061,6 @@ snapshots:
 
   nanotar@0.2.0: {}
 
-  napi-build-utils@2.0.0:
-    optional: true
-
   napi-postinstall@0.3.3: {}
 
   natural-compare@1.4.0: {}
@@ -10123,14 +10168,6 @@ snapshots:
       - supports-color
       - uploadthing
 
-  node-abi@3.77.0:
-    dependencies:
-      semver: 7.7.2
-    optional: true
-
-  node-addon-api@6.1.0:
-    optional: true
-
   node-addon-api@7.1.1: {}
 
   node-fetch-native@1.6.7: {}
@@ -10314,11 +10351,6 @@ snapshots:
     dependencies:
       ee-first: 1.1.1
 
-  once@1.4.0:
-    dependencies:
-      wrappy: 1.0.2
-    optional: true
-
   onetime@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
@@ -10671,22 +10703,6 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  prebuild-install@7.1.3:
-    dependencies:
-      detect-libc: 2.1.1
-      expand-template: 2.0.3
-      github-from-package: 0.0.0
-      minimist: 1.2.8
-      mkdirp-classic: 0.5.3
-      napi-build-utils: 2.0.0
-      node-abi: 3.77.0
-      pump: 3.0.3
-      rc: 1.2.8
-      simple-get: 4.0.1
-      tar-fs: 2.1.4
-      tunnel-agent: 0.6.0
-    optional: true
-
   prelude-ls@1.2.1: {}
 
   pretty-bytes@7.1.0: {}
@@ -10702,12 +10718,6 @@ snapshots:
 
   protocols@2.0.2: {}
 
-  pump@3.0.3:
-    dependencies:
-      end-of-stream: 1.4.5
-      once: 1.4.0
-    optional: true
-
   punycode@2.3.1: {}
 
   quansync@0.2.11: {}
@@ -10727,14 +10737,6 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.5
 
-  rc@1.2.8:
-    dependencies:
-      deep-extend: 0.6.0
-      ini: 1.3.8
-      minimist: 1.2.8
-      strip-json-comments: 2.0.1
-    optional: true
-
   readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
@@ -10745,13 +10747,6 @@ snapshots:
       string_decoder: 1.1.1
       util-deprecate: 1.0.2
 
-  readable-stream@3.6.2:
-    dependencies:
-      inherits: 2.0.4
-      string_decoder: 1.3.0
-      util-deprecate: 1.0.2
-    optional: true
-
   readable-stream@4.7.0:
     dependencies:
       abort-controller: 3.0.0
@@ -10885,6 +10880,8 @@ snapshots:
 
   semver@7.7.2: {}
 
+  semver@7.7.3: {}
+
   send@1.2.0:
     dependencies:
       debug: 4.4.3
@@ -10920,19 +10917,36 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
-  sharp@0.32.6:
+  sharp@0.34.5:
     dependencies:
-      color: 4.2.3
-      detect-libc: 2.1.1
-      node-addon-api: 6.1.0
-      prebuild-install: 7.1.3
-      semver: 7.7.2
-      simple-get: 4.0.1
-      tar-fs: 3.1.1
-      tunnel-agent: 0.6.0
-    transitivePeerDependencies:
-      - bare-buffer
-      - react-native-b4a
+      '@img/colour': 1.0.0
+      detect-libc: 2.1.2
+      semver: 7.7.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
     optional: true
 
   shebang-command@2.0.0:
@@ -10947,16 +10961,6 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  simple-concat@1.0.1:
-    optional: true
-
-  simple-get@4.0.1:
-    dependencies:
-      decompress-response: 6.0.0
-      once: 1.4.0
-      simple-concat: 1.0.1
-    optional: true
-
   simple-git@3.28.0:
     dependencies:
       '@kwsites/file-exists': 1.1.1
@@ -10965,11 +10969,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  simple-swizzle@0.2.4:
-    dependencies:
-      is-arrayish: 0.3.4
-    optional: true
-
   sirv@3.0.2:
     dependencies:
       '@polka/url': 1.0.0-next.29
@@ -11014,6 +11013,8 @@ snapshots:
 
   statuses@2.0.2: {}
 
+  std-env@3.10.0: {}
+
   std-env@3.9.0: {}
 
   streamx@2.23.0:
@@ -11056,9 +11057,6 @@ snapshots:
 
   strip-indent@4.1.0: {}
 
-  strip-json-comments@2.0.1:
-    optional: true
-
   strip-json-comments@3.1.1: {}
 
   strip-literal@3.0.0:
@@ -11085,17 +11083,6 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svgo@3.3.2:
-    dependencies:
-      '@trysound/sax': 0.2.0
-      commander: 7.2.0
-      css-select: 5.2.2
-      css-tree: 2.3.1
-      css-what: 6.2.2
-      csso: 5.0.5
-      picocolors: 1.1.1
-    optional: true
-
   svgo@4.0.0:
     dependencies:
       commander: 11.1.0
@@ -11130,35 +11117,6 @@ snapshots:
 
   tapable@2.2.3: {}
 
-  tar-fs@2.1.4:
-    dependencies:
-      chownr: 1.1.4
-      mkdirp-classic: 0.5.3
-      pump: 3.0.3
-      tar-stream: 2.2.0
-    optional: true
-
-  tar-fs@3.1.1:
-    dependencies:
-      pump: 3.0.3
-      tar-stream: 3.1.7
-    optionalDependencies:
-      bare-fs: 4.4.4
-      bare-path: 3.0.0
-    transitivePeerDependencies:
-      - bare-buffer
-      - react-native-b4a
-    optional: true
-
-  tar-stream@2.2.0:
-    dependencies:
-      bl: 4.1.0
-      end-of-stream: 1.4.5
-      fs-constants: 1.0.0
-      inherits: 2.0.4
-      readable-stream: 3.6.2
-    optional: true
-
   tar-stream@3.1.7:
     dependencies:
       b4a: 1.7.2
@@ -11234,11 +11192,6 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tunnel-agent@0.6.0:
-    dependencies:
-      safe-buffer: 5.2.1
-    optional: true
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -11799,9 +11752,6 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.2
 
-  wrappy@1.0.2:
-    optional: true
-
   ws@8.18.3: {}
 
   wsl-utils@0.1.0:

From b5ef3f4f4a081e23a614b297bc28269d4858573e Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 29 Nov 2025 17:07:26 +0100
Subject: [PATCH 07/14] refactor: removed original from state, using file
 metadata directly now

---
 app/components/Editor/Categories.vue          |  5 ++
 app/components/Editor/Container.vue           |  2 +-
 app/components/Editor/Field.vue               | 90 ++++++++++++++++---
 app/components/Editor/Field/Date.vue          |  8 +-
 app/components/Editor/Field/Language.vue      |  9 +-
 app/components/Editor/Field/Location.vue      | 10 ++-
 app/components/Editor/Field/Number.vue        |  9 +-
 .../Editor/Field/ObjectTypeOrAttribute.vue    |  9 +-
 app/components/Editor/Field/Reference.vue     | 26 +++++-
 app/components/Editor/Field/Select.vue        |  9 +-
 app/components/Editor/Field/Slider.vue        |  9 +-
 app/components/Editor/Field/Subject.vue       | 22 ++++-
 app/components/Editor/Field/Text.vue          |  8 +-
 app/components/Editor/Field/TextArea.vue      |  9 +-
 app/components/Editor/Field/Time.vue          | 11 ++-
 app/composables/helpers.ts                    |  4 +-
 app/composables/useFileState.ts               |  6 +-
 app/composables/useFiles.ts                   | 10 +++
 app/composables/useHasChanged.ts              |  7 +-
 app/utils/iptc-iim/types.ts                   |  2 +-
 20 files changed, 216 insertions(+), 49 deletions(-)

diff --git a/app/components/Editor/Categories.vue b/app/components/Editor/Categories.vue
index feffa2a..99af714 100644
--- a/app/components/Editor/Categories.vue
+++ b/app/components/Editor/Categories.vue
@@ -2,6 +2,10 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { categories } from '~/utils/iptc-iim/categories'
 
+defineProps<{
+  fileId: string
+}>()
+
 const state = defineModel<IPTCFieldWithValue[]>()
 
 const categoryKeys = new Set(categories.map((category) => {
@@ -92,6 +96,7 @@ function updateExtraField(updatedFields: (IPTCFieldWithValue & { type: 'extra' }
               v-model="fieldsByKey[key]"
               :extra="getExtraFields(key)"
               :style="width ? `width: ${width}%` : ''"
+              :file-id="fileId"
               @update:extra="updateExtraField"
             />
           </template>
diff --git a/app/components/Editor/Container.vue b/app/components/Editor/Container.vue
index e6ee5a8..af5cdff 100644
--- a/app/components/Editor/Container.vue
+++ b/app/components/Editor/Container.vue
@@ -17,7 +17,7 @@ const selectedState = computed(() => getFileState(firstSelectedFile.value?.id ||
         <template #content>
           <div class="py-4">
             <UForm v-if="firstSelectedFile" :state="selectedState">
-              <EditorCategories v-model="selectedState" />
+              <EditorCategories v-model="selectedState" :file-id="firstSelectedFile.id" />
             </UForm>
           </div>
         </template>
diff --git a/app/components/Editor/Field.vue b/app/components/Editor/Field.vue
index f9c86b3..1b94c14 100644
--- a/app/components/Editor/Field.vue
+++ b/app/components/Editor/Field.vue
@@ -1,27 +1,95 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+defineProps<{
+  fileId: string
+}>()
+
+const { getOriginal } = useFiles()
+
 const field = defineModel<IPTCFieldWithValue>({ required: true })
 
 const extra = defineModel<(IPTCFieldWithValue & { type: 'extra' })[]>('extra', { required: true })
 </script>
 
 <template>
-  <EditorFieldDate v-if="isFieldType('date', field)" v-model="field" />
-  <EditorFieldNumber v-else-if="isFieldType('number', field)" v-model="field" />
-  <EditorFieldTime v-else-if="isFieldType('time', field)" v-model="field" />
-  <EditorFieldSelect v-else-if="isFieldType('select', field)" v-model="field" />
-  <EditorFieldObjectTypeOrAttribute v-else-if="isFieldType('object-type', field) || isFieldType('object-attribute', field)" v-model="field" />
-  <EditorFieldSubject v-else-if="isFieldType('subject-reference', field)" v-model="field" />
-  <EditorFieldTextArea v-else-if="isFieldType('textarea', field)" v-model="field" />
-  <EditorFieldText v-else-if="isFieldType('text', field)" v-model="field" />
-  <EditorFieldSlider v-else-if="isFieldType('slider', field)" v-model="field" />
-  <EditorFieldLocation v-else-if="isFieldType('location', field) && extra[0] && isFieldType('extra', extra[0])" v-model:code="field" v-model:name="extra[0]" />
+  <EditorFieldDate
+    v-if="isFieldType('date', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+
+  <EditorFieldNumber
+    v-else-if="isFieldType('number', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldTime
+    v-else-if="isFieldType('time', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldSelect
+    v-else-if="isFieldType('select', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldObjectTypeOrAttribute
+    v-else-if="isFieldType('object-type', field) || isFieldType('object-attribute', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldSubject
+    v-else-if="isFieldType('subject-reference', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldTextArea
+    v-else-if="isFieldType('textarea', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldText
+    v-else-if="isFieldType('text', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldSlider
+    v-else-if="isFieldType('slider', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
+  />
+  <EditorFieldLocation
+    v-else-if="isFieldType('location', field) && extra[0] && isFieldType('extra', extra[0])"
+    v-model:code="field"
+    v-model:name="extra[0]"
+    :file-id="fileId"
+    :original-code="getOriginal(fileId, field.key)"
+    :original-name="getOriginal(fileId, extra[0].key)"
+  />
   <EditorFieldReference
     v-else-if="isFieldType('reference', field) && extra[0] && extra[1] && isFieldType('extra', extra[0]) && isFieldType('extra', extra[1])"
     v-model="field"
     v-model:date="extra[0]"
     v-model:number="extra[1]"
+    :file-id="fileId"
+    :original-service="getOriginal(fileId, field.key)"
+    :original-date="getOriginal(fileId, extra[0].key)"
+    :original-number="getOriginal(fileId, extra[1].key)"
+  />
+  <EditorFieldLanguage
+    v-else-if="isFieldType('language', field)"
+    v-model="field"
+    :file-id="fileId"
+    :original="getOriginal(fileId, field.key)"
   />
-  <EditorFieldLanguage v-else-if="isFieldType('language', field)" v-model="field" />
 </template>
diff --git a/app/components/Editor/Field/Date.vue b/app/components/Editor/Field/Date.vue
index 8e05a7c..25ab48e 100644
--- a/app/components/Editor/Field/Date.vue
+++ b/app/components/Editor/Field/Date.vue
@@ -2,7 +2,9 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { CalendarDate } from '@internationalized/date'
 
-defineProps<{
+const props = defineProps<{
+  fileId: string
+  original?: string
   disabled?: boolean
   required?: boolean
 }>()
@@ -51,11 +53,11 @@ function updateDate(newDate?: CalendarDate) {
   }
 }
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" :required="required" @reset="updateDate(parseDate(field.original))">
+  <BaseField v-model="field" :has-changed="hasChanged" :required="required" @reset="updateDate(parseDate(props.original))">
     <template #default="{ error }">
       <UPopover arrow :content="{ side: 'top' }">
         <UButton :color="error ? 'error' : hasChanged ? 'secondary' : 'neutral'" variant="outline" :icon="field.icon ?? 'i-lucide-calendar'" :disabled="disabled" class="w-full h-8">
diff --git a/app/components/Editor/Field/Language.vue b/app/components/Editor/Field/Language.vue
index 175dcdb..ee3b811 100644
--- a/app/components/Editor/Field/Language.vue
+++ b/app/components/Editor/Field/Language.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'language' }>({ required: true })
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 
 const selectedLanguage = computed({
   get: () => languages.find(lang => lang.value === field.value.value),
@@ -14,7 +19,7 @@ const selectedLanguage = computed({
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = props.original ?? ''">
     <BaseSelect
       v-model="selectedLanguage"
       :options="languages"
diff --git a/app/components/Editor/Field/Location.vue b/app/components/Editor/Field/Location.vue
index 3a8332b..843f443 100644
--- a/app/components/Editor/Field/Location.vue
+++ b/app/components/Editor/Field/Location.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  originalCode?: string
+  originalName?: string
+}>()
+
 const code = defineModel<IPTCFieldWithValue & { type: 'location' }>('code', { required: true })
 const name = defineModel<IPTCFieldWithValue & { type: 'extra' }>('name', { required: true })
 
-const hasChanged = useHasChanged(code)
+const hasChanged = useHasChanged(props.fileId, code)
 
 const selectedCountry = computed({
   get: () => ({
@@ -29,7 +35,7 @@ const formattedTitle = computed(() => {
 </script>
 
 <template>
-  <BaseField v-model="code" class="w-full" :title="formattedTitle" :has-changed="hasChanged" @reset="selectedCountry = { label: code.original, value: name.original }">
+  <BaseField v-model="code" class="w-full" :title="formattedTitle" :has-changed="hasChanged" @reset="selectedCountry = { label: originalCode ?? '', value: originalName ?? '' }">
     <BaseSelect
       v-model="selectedCountry"
       :options="countries"
diff --git a/app/components/Editor/Field/Number.vue b/app/components/Editor/Field/Number.vue
index e85e9da..22d28bf 100644
--- a/app/components/Editor/Field/Number.vue
+++ b/app/components/Editor/Field/Number.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'number' }>({ required: true })
 
 const rawValue = computed<number | undefined>({
@@ -17,11 +22,11 @@ const rawValue = computed<number | undefined>({
   },
 })
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = original ?? ''">
     <UInputNumber
       v-model="rawValue"
       :min="field.minValue"
diff --git a/app/components/Editor/Field/ObjectTypeOrAttribute.vue b/app/components/Editor/Field/ObjectTypeOrAttribute.vue
index b8afafa..9a6f18a 100644
--- a/app/components/Editor/Field/ObjectTypeOrAttribute.vue
+++ b/app/components/Editor/Field/ObjectTypeOrAttribute.vue
@@ -2,6 +2,11 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { objectAttributes, objectTypes } from '~/utils/iptc-iim/mapping'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'object-type' | 'object-attribute' }>({ required: true })
 
 const objectData = computed(() => {
@@ -21,11 +26,11 @@ const rawValue = computed({
   },
 })
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = original ?? ''">
     <BaseSelect
       v-model="rawValue"
       :options="selectOptions"
diff --git a/app/components/Editor/Field/Reference.vue b/app/components/Editor/Field/Reference.vue
index 58214a3..d47a497 100644
--- a/app/components/Editor/Field/Reference.vue
+++ b/app/components/Editor/Field/Reference.vue
@@ -2,6 +2,10 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
 withDefaults(defineProps<{
+  fileId: string
+  originalService?: string
+  originalDate?: string
+  originalNumber?: string
   alignment?: 'vertical' | 'horizontal'
 }>(), {
   alignment: 'horizontal',
@@ -21,8 +25,24 @@ watchEffect(() => {
 
 <template>
   <div class="flex w-full gap-2" :class="alignment === 'vertical' ? 'flex-col' : ''">
-    <EditorFieldText v-model="service" />
-    <EditorFieldDate v-model="date" :disabled="!service.value" :required="Boolean(service.value)" />
-    <EditorFieldText v-model="number" :disabled="!service.value" :required="Boolean(service.value)" />
+    <EditorFieldText
+      v-model="service"
+      :file-id="fileId"
+      :original="originalService"
+    />
+    <EditorFieldDate
+      v-model="date"
+      :file-id="fileId"
+      :original="originalDate"
+      :disabled="!service.value"
+      :required="Boolean(service.value)"
+    />
+    <EditorFieldText
+      v-model="number"
+      :file-id="fileId"
+      :original="originalNumber"
+      :disabled="!service.value"
+      :required="Boolean(service.value)"
+    />
   </div>
 </template>
diff --git a/app/components/Editor/Field/Select.vue b/app/components/Editor/Field/Select.vue
index 53eb7ae..7533027 100644
--- a/app/components/Editor/Field/Select.vue
+++ b/app/components/Editor/Field/Select.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'select' }>({ required: true })
 
 const rawValue = computed({
@@ -10,11 +15,11 @@ const rawValue = computed({
   },
 })
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = original ?? ''">
     <BaseSelect v-model="rawValue" :options="field.options" :placeholder="field.placeholder ?? 'Select an option'" :has-changed="hasChanged" :icon="field.icon">
       <template #label>
         <span>{{ rawValue?.label }}</span>
diff --git a/app/components/Editor/Field/Slider.vue b/app/components/Editor/Field/Slider.vue
index c636a6d..dc00501 100644
--- a/app/components/Editor/Field/Slider.vue
+++ b/app/components/Editor/Field/Slider.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'slider' }>({ required: true })
 
 const rawValue = computed({
@@ -10,11 +15,11 @@ const rawValue = computed({
   },
 })
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = original ?? ''">
     <div class="flex flex-nowrap text-nowrap gap-2 items-center w-full h-[32px] ring ring-inset ring-accented px-2.5 py-1.5 text-sm rounded-md bg-default">
       <span>{{ field.minLabel }}</span>
       <USlider
diff --git a/app/components/Editor/Field/Subject.vue b/app/components/Editor/Field/Subject.vue
index 7e05488..a743ef5 100644
--- a/app/components/Editor/Field/Subject.vue
+++ b/app/components/Editor/Field/Subject.vue
@@ -2,7 +2,9 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 import { subjectDetails, subjectMatters, subjects } from '~/utils/iptc-iim/mapping'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
+  fileId: string
+  original?: string
   alignment?: 'horizontal' | 'vertical'
 }>(), {
   alignment: 'horizontal',
@@ -100,21 +102,33 @@ const selectedSubjectDetail = computed({
 })
 
 const originalSubject = computed(() => {
-  const parts = field.value.original.split(':')
+  if (!props.original) {
+    return undefined
+  }
+
+  const parts = props.original.split(':')
   const original = parts.length === 4 ? parts[1] : ''
 
   return original === '00' ? undefined : original
 })
 
 const originalSubjectMatter = computed(() => {
-  const parts = field.value.original.split(':')
+  if (!props.original) {
+    return undefined
+  }
+
+  const parts = props.original.split(':')
   const original = parts.length === 4 ? parts[2] : ''
 
   return original === '000' ? undefined : original
 })
 
 const originalSubjectDetail = computed(() => {
-  const parts = field.value.original.split(':')
+  if (!props.original) {
+    return undefined
+  }
+
+  const parts = props.original.split(':')
   const original = parts.length === 4 ? parts[3] : ''
 
   return original === '000' ? undefined : original
diff --git a/app/components/Editor/Field/Text.vue b/app/components/Editor/Field/Text.vue
index db903af..3f31891 100644
--- a/app/components/Editor/Field/Text.vue
+++ b/app/components/Editor/Field/Text.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
-defineProps<{
+const props = defineProps<{
+  fileId: string
+  original?: string
   disabled?: boolean
   required?: boolean
 }>()
 
 const field = defineModel<IPTCFieldWithValue & { type: 'text' | 'extra' | 'reference' }>({ required: true })
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 
 const currentValue = computed(() => field.value.value || '')
 const { limits, characterCountWidth, characterCountText } = useCharacterLimit(currentValue, field.value.octets)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" :required="required" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" :required="required" @reset="field.value = original ?? ''">
     <UInput
       v-model="field.value"
       :color="hasChanged ? 'secondary' : undefined"
diff --git a/app/components/Editor/Field/TextArea.vue b/app/components/Editor/Field/TextArea.vue
index 3beaeed..ae88259 100644
--- a/app/components/Editor/Field/TextArea.vue
+++ b/app/components/Editor/Field/TextArea.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'textarea' }>({ required: true })
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 
 const currentValue = computed(() => field.value.value || '')
 const { limits, characterCountWidth, characterCountText } = useCharacterLimit(currentValue, field.value.octets)
 </script>
 
 <template>
-  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = field.original">
+  <BaseField v-model="field" :has-changed="hasChanged" @reset="field.value = original ?? ''">
     <UTextarea
       v-model="field.value"
       class="w-full"
diff --git a/app/components/Editor/Field/Time.vue b/app/components/Editor/Field/Time.vue
index 5c44df9..0d5fffc 100644
--- a/app/components/Editor/Field/Time.vue
+++ b/app/components/Editor/Field/Time.vue
@@ -2,6 +2,11 @@
 import type { SelectMenuItem } from '@nuxt/ui'
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
+const props = defineProps<{
+  fileId: string
+  original?: string
+}>()
+
 const field = defineModel<IPTCFieldWithValue & { type: 'time' }>({ required: true })
 
 const timeValue = ref<{ time: string, offset: string }>({ time: '', offset: '' })
@@ -53,11 +58,11 @@ const offsetSelectValues = computed(() => {
   })
 })
 
-const hasChanged = useHasChanged(field)
+const hasChanged = useHasChanged(props.fileId, field)
 
 function reset() {
-  const originalTime = field.value.original.slice(0, 6)
-  const originalOffset = field.value.original.slice(6)
+  const originalTime = props.original?.slice(0, 6) ?? ''
+  const originalOffset = props.original?.slice(6) ?? ''
 
   updateTime(originalTime)
   updateOffset(originalOffset)
diff --git a/app/composables/helpers.ts b/app/composables/helpers.ts
index 5b4ba84..7c17bcb 100644
--- a/app/composables/helpers.ts
+++ b/app/composables/helpers.ts
@@ -43,8 +43,10 @@ function toRawDeep(obj: any): any {
  * @param data The data to be stored.
  */
 export async function updateIdb<T>(key: string, data: T) {
-  const { set } = useIDBKeyval<T>(key, data)
+  const { set, data: storedData } = useIDBKeyval<T>(key, data)
   const rawData = toRawDeep(data)
 
   await set(rawData)
+
+  return storedData
 }
diff --git a/app/composables/useFileState.ts b/app/composables/useFileState.ts
index 84e1f10..2817f96 100644
--- a/app/composables/useFileState.ts
+++ b/app/composables/useFileState.ts
@@ -6,7 +6,6 @@ type FileState = Record<string, IPTCFieldWithValue[]>
 
 const fileStates = ref<FileState>({})
 const isLoading = ref(true)
-const filesChanged = ref(0)
 
 export default function useFileState() {
   const { loadedFiles, updateMetadata, markAsDownloaded } = useFiles()
@@ -31,7 +30,6 @@ export default function useFileState() {
     fileStates.value[fileId] = iptcIimFields.map(field => ({
       ...field,
       value: file.metadata[field.key] || '',
-      original: file.metadata[field.key] || '',
     }))
   }
 
@@ -66,7 +64,7 @@ export default function useFileState() {
     let changes = 0
 
     state.forEach((field) => {
-      if (field.original !== field.value) {
+      if (file.metadata[field.key] !== field.value) {
         changes++
       }
     })
@@ -74,6 +72,8 @@ export default function useFileState() {
     return changes
   }
 
+  const filesChanged = computed(() => Object.keys(fileStates.value).filter(fileId => fileChanges(fileId) > 0).length)
+
   async function saveAll() {
     if (!filesChanged.value) {
       return
diff --git a/app/composables/useFiles.ts b/app/composables/useFiles.ts
index fc4a173..0bcea5f 100644
--- a/app/composables/useFiles.ts
+++ b/app/composables/useFiles.ts
@@ -133,6 +133,15 @@ export default function useFiles() {
     }
   }
 
+  function getOriginal(fileId: string, key: string): string | undefined {
+    const file = loadedFiles.value[fileId]
+    if (!file) {
+      return undefined
+    }
+
+    return file.metadata[key]
+  }
+
   return {
     loadedFiles,
     isLoading,
@@ -143,5 +152,6 @@ export default function useFiles() {
     fileAmount,
     updateMetadata,
     markAsDownloaded,
+    getOriginal,
   }
 }
diff --git a/app/composables/useHasChanged.ts b/app/composables/useHasChanged.ts
index 6a093fa..5e1d9bc 100644
--- a/app/composables/useHasChanged.ts
+++ b/app/composables/useHasChanged.ts
@@ -1,9 +1,12 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
-export default function useHasChanged(field: Ref<IPTCFieldWithValue>) {
-  const originalValue = computed(() => field.value.original)
+export default function useHasChanged(fileId: string, field: Ref<IPTCFieldWithValue>) {
   const currentValue = computed(() => field.value.value)
 
+  const { getOriginal } = useFiles()
+
+  const originalValue = computed(() => getOriginal(fileId, field.value.key))
+
   return computed(() => {
     if (!originalValue.value && !currentValue.value) {
       return false
diff --git a/app/utils/iptc-iim/types.ts b/app/utils/iptc-iim/types.ts
index 5ade07e..23a82bf 100644
--- a/app/utils/iptc-iim/types.ts
+++ b/app/utils/iptc-iim/types.ts
@@ -60,4 +60,4 @@ interface IPTCFieldOtherTypes extends IPTCFieldBase {
 
 export type IPTCField = IPTCFieldNumber | IPTCFieldSelect | IPTCFieldSlider | IPTCFieldLocation | IPTCFieldReference | IPTCFieldOtherTypes
 
-export type IPTCFieldWithValue = IPTCField & { value: string, original: string }
+export type IPTCFieldWithValue = IPTCField & { value: string }

From 7418e078ec22eaa2a827b0dba009f8a61e07ef23 Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 29 Nov 2025 17:31:12 +0100
Subject: [PATCH 08/14] fix: fixed ERR_UPLOAD_FILE_CHANGED by using a
 memory-backed blob instead of the actual image for preview

---
 app/components/Editor/FileInformation.vue |  7 ++++++-
 app/utils/loadImageForPreview.ts          | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 app/utils/loadImageForPreview.ts

diff --git a/app/components/Editor/FileInformation.vue b/app/components/Editor/FileInformation.vue
index a0a4c83..63b4463 100644
--- a/app/components/Editor/FileInformation.vue
+++ b/app/components/Editor/FileInformation.vue
@@ -14,7 +14,12 @@ const fileToShow = computed(() => {
   return loadedFiles.value[firstFileId]
 })
 
-const file = computed(() => fileToShow.value ? URL.createObjectURL(fileToShow.value?.file) : undefined)
+const file = computedAsync(async () => {
+  if (!fileToShow.value) {
+    return undefined
+  }
+  return await loadImageForPreview(fileToShow.value.file)
+})
 </script>
 
 <template>
diff --git a/app/utils/loadImageForPreview.ts b/app/utils/loadImageForPreview.ts
new file mode 100644
index 0000000..9633c43
--- /dev/null
+++ b/app/utils/loadImageForPreview.ts
@@ -0,0 +1,14 @@
+/**
+ * Load an image from a FileSystemFileHandle, create a blob copy of the file and return a URL for preview.
+ * This is required because once the original file is overwritten or deleted, the URL created from it becomes invalid,
+ * but using a blob copy ensures the preview remains accessible.
+ * @param file The image file to preview
+ * @returns A URL that can be used to preview the image
+ */
+export default async function loadImageForPreview(file: File) {
+  const buffer = await file.arrayBuffer()
+  const blob = new Blob([buffer], { type: file.type })
+  const imageUrl = URL.createObjectURL(blob)
+
+  return imageUrl
+}

From 2bc54c51bc5a97341b9b4d715723c923fd74367f Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 29 Nov 2025 17:38:43 +0100
Subject: [PATCH 09/14] fix: fixed undefined image source

---
 app/components/Editor/FileInformation.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/Editor/FileInformation.vue b/app/components/Editor/FileInformation.vue
index 63b4463..aaaecfd 100644
--- a/app/components/Editor/FileInformation.vue
+++ b/app/components/Editor/FileInformation.vue
@@ -25,10 +25,12 @@ const file = computedAsync(async () => {
 <template>
   <div v-if="fileToShow" class="flex h-[22rem] gap-4">
     <NuxtImg
+      v-if="file"
       :src="file"
       :alt="fileToShow.file.name"
       :style="{ height: '22rem' }"
     />
+    <USkeleton v-else class="h-full w-1/4" />
     <div class="flex flex-col w-full justify-center py-4">
       <h1 class="text-lg font-bold">
         File Properties

From 0731761cb4650199b8cfab16e598aa000bb57417 Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 29 Nov 2025 17:45:19 +0100
Subject: [PATCH 10/14] fix: fixed initial state for images without previous
 metadata

---
 app/composables/useFiles.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/composables/useFiles.ts b/app/composables/useFiles.ts
index 0bcea5f..0fe7e32 100644
--- a/app/composables/useFiles.ts
+++ b/app/composables/useFiles.ts
@@ -59,7 +59,9 @@ export default function useFiles() {
           id: fileId,
           file,
           handle: file.handle,
-          metadata: {},
+          metadata: {
+            '2:00': '\u0000\u0004',
+          },
         }
       }
     }))

From ef95678034f4290e418b546cf57f340f0fc7ad3e Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 29 Nov 2025 18:02:37 +0100
Subject: [PATCH 11/14] fix: fixed fileId reactivity in fields

---
 app/components/Editor/Container.vue                   | 3 ++-
 app/components/Editor/Field/Date.vue                  | 3 ++-
 app/components/Editor/Field/Language.vue              | 3 ++-
 app/components/Editor/Field/Location.vue              | 3 ++-
 app/components/Editor/Field/Number.vue                | 3 ++-
 app/components/Editor/Field/ObjectTypeOrAttribute.vue | 3 ++-
 app/components/Editor/Field/Select.vue                | 3 ++-
 app/components/Editor/Field/Slider.vue                | 3 ++-
 app/components/Editor/Field/Text.vue                  | 4 +++-
 app/components/Editor/Field/TextArea.vue              | 3 ++-
 app/components/Editor/Field/Time.vue                  | 3 ++-
 app/composables/useHasChanged.ts                      | 6 ++----
 12 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/app/components/Editor/Container.vue b/app/components/Editor/Container.vue
index af5cdff..04333e7 100644
--- a/app/components/Editor/Container.vue
+++ b/app/components/Editor/Container.vue
@@ -3,6 +3,7 @@ const { getSelectedIds, firstSelectedFile } = useFileSelection()
 const { getFileState } = useFileState()
 
 const selectedState = computed(() => getFileState(firstSelectedFile.value?.id || ''))
+const fileId = computed(() => firstSelectedFile.value?.id || '')
 </script>
 
 <template>
@@ -17,7 +18,7 @@ const selectedState = computed(() => getFileState(firstSelectedFile.value?.id ||
         <template #content>
           <div class="py-4">
             <UForm v-if="firstSelectedFile" :state="selectedState">
-              <EditorCategories v-model="selectedState" :file-id="firstSelectedFile.id" />
+              <EditorCategories v-model="selectedState" :file-id="fileId" />
             </UForm>
           </div>
         </template>
diff --git a/app/components/Editor/Field/Date.vue b/app/components/Editor/Field/Date.vue
index 25ab48e..7148a2f 100644
--- a/app/components/Editor/Field/Date.vue
+++ b/app/components/Editor/Field/Date.vue
@@ -53,7 +53,8 @@ function updateDate(newDate?: CalendarDate) {
   }
 }
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 </script>
 
 <template>
diff --git a/app/components/Editor/Field/Language.vue b/app/components/Editor/Field/Language.vue
index ee3b811..ec52824 100644
--- a/app/components/Editor/Field/Language.vue
+++ b/app/components/Editor/Field/Language.vue
@@ -8,7 +8,8 @@ const props = defineProps<{
 
 const field = defineModel<IPTCFieldWithValue & { type: 'language' }>({ required: true })
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 
 const selectedLanguage = computed({
   get: () => languages.find(lang => lang.value === field.value.value),
diff --git a/app/components/Editor/Field/Location.vue b/app/components/Editor/Field/Location.vue
index 843f443..be20645 100644
--- a/app/components/Editor/Field/Location.vue
+++ b/app/components/Editor/Field/Location.vue
@@ -10,7 +10,8 @@ const props = defineProps<{
 const code = defineModel<IPTCFieldWithValue & { type: 'location' }>('code', { required: true })
 const name = defineModel<IPTCFieldWithValue & { type: 'extra' }>('name', { required: true })
 
-const hasChanged = useHasChanged(props.fileId, code)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, code)
 
 const selectedCountry = computed({
   get: () => ({
diff --git a/app/components/Editor/Field/Number.vue b/app/components/Editor/Field/Number.vue
index 22d28bf..612b663 100644
--- a/app/components/Editor/Field/Number.vue
+++ b/app/components/Editor/Field/Number.vue
@@ -22,7 +22,8 @@ const rawValue = computed<number | undefined>({
   },
 })
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 </script>
 
 <template>
diff --git a/app/components/Editor/Field/ObjectTypeOrAttribute.vue b/app/components/Editor/Field/ObjectTypeOrAttribute.vue
index 9a6f18a..6fd24fe 100644
--- a/app/components/Editor/Field/ObjectTypeOrAttribute.vue
+++ b/app/components/Editor/Field/ObjectTypeOrAttribute.vue
@@ -26,7 +26,8 @@ const rawValue = computed({
   },
 })
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 </script>
 
 <template>
diff --git a/app/components/Editor/Field/Select.vue b/app/components/Editor/Field/Select.vue
index 7533027..6342b76 100644
--- a/app/components/Editor/Field/Select.vue
+++ b/app/components/Editor/Field/Select.vue
@@ -15,7 +15,8 @@ const rawValue = computed({
   },
 })
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 </script>
 
 <template>
diff --git a/app/components/Editor/Field/Slider.vue b/app/components/Editor/Field/Slider.vue
index dc00501..bf5603b 100644
--- a/app/components/Editor/Field/Slider.vue
+++ b/app/components/Editor/Field/Slider.vue
@@ -15,7 +15,8 @@ const rawValue = computed({
   },
 })
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 </script>
 
 <template>
diff --git a/app/components/Editor/Field/Text.vue b/app/components/Editor/Field/Text.vue
index 3f31891..074a3dc 100644
--- a/app/components/Editor/Field/Text.vue
+++ b/app/components/Editor/Field/Text.vue
@@ -10,7 +10,8 @@ const props = defineProps<{
 
 const field = defineModel<IPTCFieldWithValue & { type: 'text' | 'extra' | 'reference' }>({ required: true })
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 
 const currentValue = computed(() => field.value.value || '')
 const { limits, characterCountWidth, characterCountText } = useCharacterLimit(currentValue, field.value.octets)
@@ -18,6 +19,7 @@ const { limits, characterCountWidth, characterCountText } = useCharacterLimit(cu
 
 <template>
   <BaseField v-model="field" :has-changed="hasChanged" :required="required" @reset="field.value = original ?? ''">
+    {{ original }} {{ fileId }}
     <UInput
       v-model="field.value"
       :color="hasChanged ? 'secondary' : undefined"
diff --git a/app/components/Editor/Field/TextArea.vue b/app/components/Editor/Field/TextArea.vue
index ae88259..5d2f28d 100644
--- a/app/components/Editor/Field/TextArea.vue
+++ b/app/components/Editor/Field/TextArea.vue
@@ -8,7 +8,8 @@ const props = defineProps<{
 
 const field = defineModel<IPTCFieldWithValue & { type: 'textarea' }>({ required: true })
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 
 const currentValue = computed(() => field.value.value || '')
 const { limits, characterCountWidth, characterCountText } = useCharacterLimit(currentValue, field.value.octets)
diff --git a/app/components/Editor/Field/Time.vue b/app/components/Editor/Field/Time.vue
index 0d5fffc..0dfa518 100644
--- a/app/components/Editor/Field/Time.vue
+++ b/app/components/Editor/Field/Time.vue
@@ -58,7 +58,8 @@ const offsetSelectValues = computed(() => {
   })
 })
 
-const hasChanged = useHasChanged(props.fileId, field)
+const fileId = computed(() => props.fileId)
+const hasChanged = useHasChanged(fileId, field)
 
 function reset() {
   const originalTime = props.original?.slice(0, 6) ?? ''
diff --git a/app/composables/useHasChanged.ts b/app/composables/useHasChanged.ts
index 5e1d9bc..c8833a9 100644
--- a/app/composables/useHasChanged.ts
+++ b/app/composables/useHasChanged.ts
@@ -1,11 +1,9 @@
 import type { IPTCFieldWithValue } from '~/utils/iptc-iim/types'
 
-export default function useHasChanged(fileId: string, field: Ref<IPTCFieldWithValue>) {
+export default function useHasChanged(fileId: Ref<string>, field: Ref<IPTCFieldWithValue>) {
   const currentValue = computed(() => field.value.value)
-
   const { getOriginal } = useFiles()
-
-  const originalValue = computed(() => getOriginal(fileId, field.value.key))
+  const originalValue = computed(() => getOriginal(fileId.value, field.value.key))
 
   return computed(() => {
     if (!originalValue.value && !currentValue.value) {

From 122ed4d949c36ebab9938efdab9da9a5593347bc Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 29 Nov 2025 18:03:08 +0100
Subject: [PATCH 12/14] chore: removed debug stuff

---
 app/components/Editor/Field/Text.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Editor/Field/Text.vue b/app/components/Editor/Field/Text.vue
index 074a3dc..04aa01a 100644
--- a/app/components/Editor/Field/Text.vue
+++ b/app/components/Editor/Field/Text.vue
@@ -19,7 +19,6 @@ const { limits, characterCountWidth, characterCountText } = useCharacterLimit(cu
 
 <template>
   <BaseField v-model="field" :has-changed="hasChanged" :required="required" @reset="field.value = original ?? ''">
-    {{ original }} {{ fileId }}
     <UInput
       v-model="field.value"
       :color="hasChanged ? 'secondary' : undefined"

From 57211f0a2eadc64ae3c599ed3be59a4f45ccfe05 Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 29 Nov 2025 18:09:31 +0100
Subject: [PATCH 13/14] fix: app linting

---
 app/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/package.json b/app/package.json
index bb7b3be..c67b4b9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -37,4 +37,4 @@
     "@vueuse/nuxt": "^13.9.0",
     "eslint": "^9.29.0"
   }
-}
\ No newline at end of file
+}

From e931ee0b807a615cf702fd6c0c4d532d7e241592 Mon Sep 17 00:00:00 2001
From: Felix Egbert <fekiegbert@googlemail.com>
Date: Sat, 29 Nov 2025 18:12:07 +0100
Subject: [PATCH 14/14] fix: fixed parser test to account for fixed padding

---
 parser/tests/index.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/parser/tests/index.test.ts b/parser/tests/index.test.ts
index a5c285c..78b5d8b 100644
--- a/parser/tests/index.test.ts
+++ b/parser/tests/index.test.ts
@@ -9,7 +9,7 @@ describe('jPEG IIM Reader', () => {
 
     expect(metaData).toMatchObject({
       '1:90': '\x1B%G',
-      '2:0': '\x00\x04',
+      '2:00': '\x00\x04',
       '2:55': '20110403',
       '2:62': '20110403',
       '2:63': '131634+0200',
@@ -42,7 +42,7 @@ describe('parsing of JPEG IPTC-IIM-Metadata', () => {
 
     expect(metaData).toMatchObject({
       '1:90': '\x1B%G',
-      '2:0': '\x00\x04',
+      '2:00': '\x00\x04',
       '2:55': '20110403',
       '2:62': '20110403',
       '2:63': '131634+0200',