Nothing to see here

src/pages/viewer/ThumbnailBody.svelte

@@ -20,16 +20,23 @@
   let containerHeight = null;
   let container = null;
   let containerScrollTop = 0;
+
   const itemWidth = 144;
   const itemHeight = 179;
+
+  const MAX_THUMB_WIDTH = 84;
+  const MAX_THUMB_HEIGHT = 119;
+
   $: itemsPerRow =
     containerWidth == null
       ? null
       : Math.max(Math.floor((containerWidth - 60) / itemWidth), 1);
+
   $: paddingLeft =
     containerWidth == null || itemsPerRow == null
       ? 0
       : (containerWidth - itemsPerRow * itemWidth) / 2 + (modify ? -5 : -15);
+
   $: paddingTop =
     startPage == null || itemsPerRow == null
       ? 0
@@ -48,13 +55,15 @@
       );
     }
   }
+
   $: startPage =
     itemsPerRow == null
       ? null
       : Math.min(
           Math.floor(containerScrollTop / itemHeight) * itemsPerRow,
           $modification.pageCount,
         );
+
   $: endPage =
     itemsPerRow == null || containerHeight == null
       ? null
@@ -63,14 +72,17 @@
             itemsPerRow,
           $modification.pageCount,
         );
+
   $: overallHeight =
     itemsPerRow == null
       ? null
       : Math.ceil($modification.pageCount / itemsPerRow) * itemHeight;
+
   $: paddingBottom =
     overallHeight == null || endPage == null || itemsPerRow == null
       ? 0
       : overallHeight - Math.ceil(endPage / itemsPerRow) * itemHeight;
+
   $: pages =
     startPage == null ||
     endPage == null ||
@@ -130,9 +142,6 @@
       [page]: selectState,
     };
   }
-
-  const MAX_THUMB_WIDTH = 84;
-  const MAX_THUMB_HEIGHT = 119;
 </script>
 
 <ActionPane bind:actionHeight />

src/pages/viewer/stories/ModifyImage.stories.svelte

@@ -0,0 +1,35 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import ModifyImage from "../ModifyImage.svelte";
+
+  import { Document } from "@/structure/document.js";
+  import { viewer } from "@/viewer/viewer.js";
+  import { ModificationDescriptor } from "@/viewer/modification/modifySpec.js";
+
+  import document from "../fixtures/document.json";
+
+  viewer.doc = new Document(document);
+
+  export const meta = {
+    title: "Viewer / Modify Image",
+    component: ModifyImage,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+
+  const MAX_THUMB_WIDTH = 84;
+  const MAX_THUMB_HEIGHT = 119;
+
+  const args = {
+    id: document.id,
+    size: 140,
+    maxThumb: [MAX_THUMB_WIDTH, MAX_THUMB_HEIGHT],
+    descriptor: new ModificationDescriptor(),
+  };
+</script>
+
+<Template let:args>
+  <ModifyImage {...args} />
+</Template>
+
+<Story name="default" {args} />

src/pages/viewer/stories/ThumbnailBody.stories.svelte

@@ -0,0 +1,15 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ThumbnailBody from "../ThumbnailBody.svelte";
+
+  export const meta = {
+    title: "Viewer / Thumbnail Body",
+    component: ThumbnailBody,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <ThumbnailBody />
+</Story>

src/viewer/modification/modifySpec.test.js

@@ -7,7 +7,7 @@ import {
   CLOCKWISE,
   COUNTER_CLOCKWISE,
   HALFWAY,
-} from "./modifySpec";
+} from "./modifySpec.js";
 
 function runspec(pgNumbers) {
   return runify(pgNumbers).spec();