diff --git a/src/pages/viewer/ModifyImage.svelte b/src/pages/viewer/ModifyImage.svelte
index f80e1e554..3865136d1 100644
--- a/src/pages/viewer/ModifyImage.svelte
+++ b/src/pages/viewer/ModifyImage.svelte
@@ -1,9 +1,9 @@
-<script>
-  import Image from "@/common/Image.svelte";
-  import { viewer } from "@/viewer/viewer.js";
-  import { pageImageUrl } from "@/api/viewer.js";
-  import { modification } from "@/viewer/modification/modification";
-  import { getDocument } from "@/api/document.js";
+<script lang="ts">
+  import Image from "../../common/Image.svelte";
+  import { viewer } from "../../viewer/viewer.js";
+  import { getDocument } from "../../api/document.js";
+  import { pageImageUrl } from "../../api/viewer.js";
+  import { modification } from "../../viewer/modification/modification";
 
   export let id;
   export let page;
@@ -19,7 +19,7 @@
       ? $viewer.document
       : $viewer.document != null && id == $viewer.document.id
         ? $viewer.document
-        : $modification.documentCache[id];
+        : modification.documentCache[id];
 
   const DEFAULT_PAGE_SIZE = 1;
   $: pageSize =
@@ -33,7 +33,7 @@
 
   $: {
     if ($viewer.document != null && id != $viewer.document.id) {
-      if ($modification.documentCache[id] == null) {
+      if (modification.documentCache[id] == null) {
         modification.documentCache[id] = {};
         // Update the document cache
         getDocument(id, null).then((doc) => {
diff --git a/src/pages/viewer/ThumbnailBody.svelte b/src/pages/viewer/ThumbnailBody.svelte
index 6a3f59828..9c683c4fc 100644
--- a/src/pages/viewer/ThumbnailBody.svelte
+++ b/src/pages/viewer/ThumbnailBody.svelte
@@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
   import { _ } from "svelte-i18n";
 
   import ActionPane from "./pane/ActionPane.svelte";
   import ModifyImage from "./ModifyImage.svelte";
-  import Modification from "@/viewer/modification/Modification.svelte";
-  import { viewer } from "@/viewer/viewer.js";
-  import { layout } from "@/viewer/layout.js";
-  import { restorePosition, changeMode } from "@/viewer/document.js";
-  import { ModificationSpec } from "@/viewer/modification/modifySpec";
-  import { modification } from "@/viewer/modification/modification";
+  import Modification from "../../viewer/modification/Modification.svelte";
+  import { viewer } from "../../viewer/viewer.js";
+  import { layout } from "../../viewer/layout.js";
+  import { restorePosition, changeMode } from "../../viewer/document.js";
+  import { ModificationSpec } from "../../viewer/modification/modifySpec";
+  import { modification } from "../../viewer/modification/modification";
 
   $: modify = $layout.modifying;
 
@@ -38,7 +38,7 @@
   // Page objects
   $: {
     if (
-      $modification.modifySpec == null &&
+      modification.modifySpec == null &&
       $viewer.document != null &&
       $viewer.document.pageCount != null
     ) {
@@ -53,7 +53,7 @@
       ? null
       : Math.min(
           Math.floor(containerScrollTop / itemHeight) * itemsPerRow,
-          $modification.pageCount,
+          modification.pageCount,
         );
   $: endPage =
     itemsPerRow == null || containerHeight == null
@@ -61,12 +61,12 @@
       : Math.min(
           Math.ceil((containerScrollTop + containerHeight) / itemHeight) *
             itemsPerRow,
-          $modification.pageCount,
+          modification.pageCount,
         );
   $: overallHeight =
     itemsPerRow == null
       ? null
-      : Math.ceil($modification.pageCount / itemsPerRow) * itemHeight;
+      : Math.ceil(modification.pageCount / itemsPerRow) * itemHeight;
   $: paddingBottom =
     overallHeight == null || endPage == null || itemsPerRow == null
       ? 0
@@ -75,9 +75,9 @@
     startPage == null ||
     endPage == null ||
     itemsPerRow == null ||
-    $modification.modifySpec == null
+    modification.modifySpec == null
       ? []
-      : $modification.modifySpec
+      : modification.modifySpec
           .slice(startPage, endPage - startPage + 1)
           .toDescriptors()
           .map((descriptor, i) => ({
@@ -88,8 +88,8 @@
               descriptor.id == null ? $viewer.document.id : descriptor.id,
           }));
 
-  $: showInserts = !$modification.modifyHasSelection;
-  $: insertOnly = $modification.hasCopyBuffer;
+  $: showInserts = !modification.modifyHasSelection;
+  $: insertOnly = modification.hasCopyBuffer;
 
   function handleScroll() {
     if (container == null) return;
@@ -105,19 +105,19 @@
       return;
     }
 
-    selectState = selectState || !$modification.modifySelectedMap[page];
+    selectState = selectState || !modification.modifySelectedMap[page];
     if (selectState) {
       if (shift && lastSelected != null) {
         // Shift selection
         if (lastSelected < page) {
           // Forwards selection
           for (let i = lastSelected + 1; i < page; i++) {
-            $modification.modifySelectedMap[i] = true;
+            modification.modifySelectedMap[i] = true;
           }
         } else {
           // Backwards selection
           for (let i = lastSelected - 1; i > page; i--) {
-            $modification.modifySelectedMap[i] = true;
+            modification.modifySelectedMap[i] = true;
           }
         }
       }
@@ -125,8 +125,8 @@
     } else {
       lastSelected = null;
     }
-    $modification.modifySelectedMap = {
-      ...$modification.modifySelectedMap,
+    modification.modifySelectedMap = {
+      ...modification.modifySelectedMap,
       [page]: selectState,
     };
   }
@@ -154,7 +154,7 @@
       <span class="item" style="width: {itemWidth}px; height: {itemHeight}px">
         <span
           class="imgwrap"
-          class:selected={$modification.modifySelectedMap[page.index]}
+          class:selected={modification.modifySelectedMap[page.index]}
         >
           <div class="pgnum" class:left={!modify}>
             {$_("document.pageAbbrev")}
@@ -171,15 +171,15 @@
               <div
                 on:click={() => modification.selectInsert(page.index)}
                 class="insert before"
-                class:emphasized={(insertOnly && !$modification.hasInsert) ||
-                  $modification.insert == page.index}
+                class:emphasized={(insertOnly && !modification.hasInsert) ||
+                  modification.insert == page.index}
               />
-              {#if page.index == $modification.pageCount - 1}
+              {#if page.index == modification.pageCount - 1}
                 <div
                   on:click={() => modification.selectInsert(page.index + 1)}
                   class="insert after"
-                  class:emphasized={(insertOnly && !$modification.hasInsert) ||
-                    $modification.insert == page.index + 1}
+                  class:emphasized={(insertOnly && !modification.hasInsert) ||
+                    modification.insert == page.index + 1}
                 />
               {/if}
             {/if}
diff --git a/src/pages/viewer/pane/ModifyPane.svelte b/src/pages/viewer/pane/ModifyPane.svelte
index 1417d90f8..d0e50b677 100644
--- a/src/pages/viewer/pane/ModifyPane.svelte
+++ b/src/pages/viewer/pane/ModifyPane.svelte
@@ -1,29 +1,28 @@
-<script>
+<script lang="ts">
   import { _ } from "svelte-i18n";
 
-  import Button from "@/common/Button.svelte";
-  import Modification from "@/viewer/modification/Modification.svelte";
+  import Button from "../../../common/Button.svelte";
+  import Modification from "../../../viewer/modification/Modification.svelte";
   import ModifyImage from "../ModifyImage.svelte";
 
-  import { modification } from "@/viewer/modification/modification";
-  import { viewer } from "@/viewer/viewer.js";
-  import { cancelActions } from "@/viewer/document.js";
-  import { showInsertDialog, modify } from "@/viewer/layout.js";
+  import { modification } from "../../../viewer/modification/modification";
+  import { viewer } from "../../../viewer/viewer.js";
+  import { cancelActions } from "../../../viewer/document.js";
+  import { showInsertDialog, modify } from "../../../viewer/layout.js";
 
   const MAX_BUFFER_SIZE = 5;
-
   const MAX_THUMB_WIDTH = 30;
   const MAX_THUMB_HEIGHT = 39;
 </script>
 
-{#if $modification.modifyHasSelection}
+{#if modification.modifyHasSelection}
   <h3>
     {$_("modifyPane.pagesSelected", {
-      values: { n: $modification.modifyNumSelected },
+      values: { n: modification.modifyNumSelected },
     })}
   </h3>
   <div class="buttonpadded">
-    {#if $modification.uncommittedChanges}
+    {#if modification.uncommittedChanges}
       <Button
         tertiary={true}
         on:click={() => {
@@ -36,7 +35,7 @@
     <Button on:click={() => modification.copy()}
       >{$_("modifyPane.duplicate")}</Button
     >
-    {#if $modification.modifyNumSelected < $modification.pageCount}
+    {#if modification.modifyNumSelected < modification.pageCount}
       <Button on:click={() => modification.cut()}
         >{$_("modifyPane.move")}</Button
       >
@@ -47,30 +46,30 @@
     <Button secondary={true} on:click={() => modification.modifyUnselect()}>
       {$_("modifyPane.unselect")}
     </Button>
-    {#if $modification.modifyNumSelected < $modification.pageCount}
+    {#if modification.modifyNumSelected < modification.pageCount}
       <Button danger={true} on:click={() => modification.remove()}>
         {$_("modifyPane.remove")}
       </Button>
     {/if}
   </div>
-{:else if $modification.hasCopyBuffer && $viewer.document != null}
+{:else if modification.hasCopyBuffer && $viewer.document != null}
   <h3>
-    {#if $modification.hasInsert}
+    {#if modification.hasInsert}
       {$_("modifyPane.insertPages", {
-        values: { n: $modification.copyBufferLength },
+        values: { n: modification.copyBufferLength },
       })}
     {:else}
       {$_("modifyPane.pagesPending", {
-        values: { n: $modification.copyBufferLength },
+        values: { n: modification.copyBufferLength },
       })}
     {/if}
     <div class="buffer">
-      {#each $modification.copyBuffer
+      {#each modification.copyBuffer
         .slice(0, MAX_BUFFER_SIZE)
         .toDescriptors() as descriptor, i (JSON.stringify(descriptor.json()))}
         <span
           class="item"
-          class:faded={$modification.copyBufferLength > MAX_BUFFER_SIZE &&
+          class:faded={modification.copyBufferLength > MAX_BUFFER_SIZE &&
             i == MAX_BUFFER_SIZE - 1}
         >
           <Modification {descriptor}>
@@ -90,32 +89,32 @@
   </h3>
 
   <p>
-    {#if $modification.hasInsert}
-      {#if $modification.insert == 0}
+    {#if modification.hasInsert}
+      {#if modification.insert == 0}
         {$_("modifyPane.insertBegin", {
-          values: { n: $modification.copyBufferLength },
+          values: { n: modification.copyBufferLength },
         })}
-      {:else if $modification.insert == $modification.pageCount}
+      {:else if modification.insert == modification.pageCount}
         {$_("modifyPane.insertEnd", {
-          values: { n: $modification.copyBufferLength },
+          values: { n: modification.copyBufferLength },
         })}
       {:else}
         {$_("modifyPane.insertBetween", {
           values: {
-            n: $modification.copyBufferLength,
-            p0: $modification.insert,
-            p1: $modification.insert + 1,
+            n: modification.copyBufferLength,
+            p0: modification.insert,
+            p1: modification.insert + 1,
           },
         })}
       {/if}
     {:else}
       {$_("modifyPange.click", {
-        values: { n: $modification.copyBufferLength },
+        values: { n: modification.copyBufferLength },
       })}
     {/if}
   </p>
   <div class="buttonpadded">
-    {#if $modification.hasInsert}
+    {#if modification.hasInsert}
       <Button on:click={() => modification.pasteAtInsert()}
         >{$_("modifyPane.insert")}</Button
       >
@@ -128,7 +127,7 @@
       {$_("dialog.cancel")}
     </Button>
   </div>
-{:else if $modification.hasInsert}
+{:else if modification.hasInsert}
   <h3>{$_("modifyPane.insertPosition")}</h3>
   <div class="buttonpadded">
     <Button on:click={showInsertDialog}
@@ -145,9 +144,9 @@
   </p>
 {/if}
 
-{#if $modification.hasHistory && !$modification.hasInsert && !$modification.hasCopyBuffer && !$modification.modifyHasSelection}
+{#if modification.hasHistory && !modification.hasInsert && !modification.hasCopyBuffer && !modification.modifyHasSelection}
   <div class="buttonpadded">
-    {#if $modification.uncommittedChanges}
+    {#if modification.uncommittedChanges}
       <Button
         tertiary={true}
         on:click={() => {
@@ -158,12 +157,12 @@
       </Button>
     {/if}
     <Button
-      disabled={!$modification.canUndo}
+      disabled={!modification.canUndo}
       secondary={true}
       on:click={() => modification.undo()}>{$_("modifyPane.undo")}</Button
     >
     <Button
-      disabled={!$modification.canRedo}
+      disabled={!modification.canRedo}
       secondary={true}
       on:click={() => modification.redo()}>{$_("modifyPane.redo")}</Button
     >