bookish-press 0.9.4 → 0.10.0

package/dist/components/page/Index.svelte

@@ -2,7 +2,7 @@
 import Outline from "./Outline.svelte";
 import Page from "./Page.svelte";
 import Instructions from "./Instructions.svelte";
-import ChapterIDs from "../../models/book/ChapterID";
+import ChapterIDs from "../../models/book/ChapterID.js";
 import Link from "../Link.svelte";
 import { getBase, getEdition, isEditionEditable } from "./Contexts";
 import { page } from "$app/state";
@@ -14,28 +14,27 @@ import Rows from "./Rows.svelte";
 let editable = isEditionEditable();
 let edition = getEdition();
 let base = getBase();
+// What letter are we matching?
 let letter = $derived(page.params.letter);
 let bookIndex = $derived($edition?.getBookIndex() ?? {});
+// Figure out what letters have words
 let letters = $derived.by(() => {
-  const map = {};
-  for (const word of Object.keys(bookIndex).sort(
-    (a, b) => a.localeCompare(b)
-  ))
-    map[word.charAt(0).toLocaleLowerCase()] = true;
-  return map;
+	const map = {};
+	for (const word of Object.keys(bookIndex).sort((a, b) => a.localeCompare(b))) map[word.charAt(0).toLocaleLowerCase()] = true;
+	return map;
 });
 let words = $derived.by(() => {
-  const list = [];
-  let count = 0;
-  Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)).forEach((word) => {
-    const firstLetter = word.charAt(0).toLowerCase();
-    if (letter === firstLetter) {
-      count++;
-      if (count % 20 === 0) list.push(true);
-      list.push(word);
-    }
-  });
-  return list;
+	const list = [];
+	let count = 0;
+	Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)).forEach((word) => {
+		const firstLetter = word.charAt(0).toLowerCase();
+		if (letter === firstLetter) {
+			count++;
+			if (count % 20 === 0) list.push(true);
+			list.push(word);
+		}
+	});
+	return list;
 });
 </script>
 

package/dist/components/page/License.svelte

@@ -1,14 +1,8 @@
-<script lang="ts">import Parser from "../../models/chapter/Parser";
+<script lang="ts">import Parser from "../../models/chapter/Parser.js";
 import BookishEditor from "../editor/BookishEditor.svelte";
 import Instructions from "./Instructions.svelte";
 import Format from "../chapter/Format.svelte";
-import {
-  getUser,
-  getEdition,
-  getLeasee,
-  isEditionEditable,
-  lease
-} from "./Contexts";
+import { getUser, getEdition, getLeasee, isEditionEditable, lease } from "./Contexts";
 import EditableHeader from "./EditableHeader.svelte";
 let auth = getUser();
 let edition = getEdition();

package/dist/components/page/Media.svelte

@@ -2,17 +2,11 @@
 import Outline from "./Outline.svelte";
 import Page from "./Page.svelte";
 import Instructions from "./Instructions.svelte";
-import ChapterIDs from "../../models/book/ChapterID";
+import ChapterIDs from "../../models/book/ChapterID.js";
 import Format from "../chapter/Format.svelte";
 import MediaPreview from "./MediaPreview.svelte";
 import { onMount } from "svelte";
-import {
-  getBase,
-  getBook,
-  getEdition,
-  isBookEditable,
-  isEditionEditable
-} from "./Contexts";
+import { getBase, getBook, getEdition, isBookEditable, isEditionEditable } from "./Contexts";
 import PageHeader from "./PageHeader.svelte";
 import ConfirmButton from "../editor/ConfirmButton.svelte";
 let book = getBook();
@@ -23,15 +17,14 @@ let images = $state([]);
 let embeds = $derived($edition?.getEmbeds() ?? []);
 let media = $derived($book?.getMedia());
 function updateImages(newImages) {
-  images = newImages;
+	images = newImages;
 }
 onMount(() => {
-  media?.notify(updateImages);
-  return () => media?.stopNotifying(updateImages);
+	// Listen to image changes.
+	media?.notify(updateImages);
+	return () => media?.stopNotifying(updateImages);
 });
-let unused = $derived(images?.filter(
-  (image) => !embeds.some((embed) => image.url.includes(embed.embed.getURL()))
-));
+let unused = $derived(images?.filter((image) => !embeds.some((embed) => image.url.includes(embed.embed.getURL()))));
 </script>
 
 {#if $edition}

package/dist/components/page/MediaPreview.svelte

@@ -1,25 +1,22 @@
 <script lang="ts">import Link from "../Link.svelte";
 import { getBase } from "./Contexts";
-let {
-  url,
-  alt,
-  chapterID,
-  children
-} = $props();
+let { url, alt, chapterID, children } = $props();
 let base = getBase();
 let loaded = $state();
-let urlChecked = void 0;
+// Not $state: it's only a guard against re-checking the same URL, and
+// making it reactive would make this effect re-run on its own write.
+let urlChecked = undefined;
 $effect.pre(() => {
-  if (urlChecked !== url && typeof Image !== "undefined") {
-    urlChecked = url;
-    let image = new Image();
-    image.src = url;
-    loaded = image.complete;
-    if (!loaded) {
-      image.onload = () => loaded = true;
-      image.onerror = () => loaded = null;
-    }
-  }
+	if (urlChecked !== url && typeof Image !== "undefined") {
+		urlChecked = url;
+		let image = new Image();
+		image.src = url;
+		loaded = image.complete;
+		if (!loaded) {
+			image.onload = () => loaded = true;
+			image.onerror = () => loaded = null;
+		}
+	}
 });
 </script>
 

package/dist/components/page/Outline.svelte

@@ -1,14 +1,9 @@
-<script lang="ts">import { isMobile } from "../../util/isMobile";
+<script lang="ts">import { isMobile } from "../../util/isMobile.js";
 import { onMount } from "svelte";
 import Link from "../Link.svelte";
 import { getBase, getDarkMode } from "./Contexts";
 import DarkToggle from "../controls/DarkToggle.svelte";
-let {
-  previous,
-  next,
-  collapse = false,
-  listener = void 0
-} = $props();
+let { previous, next, collapse = false, listener = undefined } = $props();
 let headerString = null;
 let headerIndex = $state(-1);
 let expanded = $state(false);
@@ -17,80 +12,93 @@ let base = getBase();
 let outline = $state(null);
 let headers = $state([]);
 function toggleExpanded() {
-  if (!isMobile()) return;
-  const newExpanded = !expanded;
-  expanded = newExpanded;
-  if (listener) listener(newExpanded, layout);
+	// Don't toggle when in margin mode.
+	if (!isMobile()) return;
+	const newExpanded = !expanded;
+	// Toggle expanded state
+	expanded = newExpanded;
+	if (listener) listener(newExpanded, layout);
 }
 function toggleReadingMode() {
-  dark.set(!$dark);
+	dark.set(!$dark);
 }
 function layout() {
-  position();
-  highlight();
-  updateHeaders();
+	position();
+	highlight();
+	updateHeaders();
 }
 function updateHeaders() {
-  headers = Array.from(document.getElementsByClassName("page-header"));
-  let newHeaderString = headers.reduce(
-    (sum, el) => sum + el.outerHTML,
-    ""
-  );
-  if (headerString !== newHeaderString) headerString = newHeaderString;
+	// When the outline updates (due to the page its on updating), generate a unique string for the current header outline.
+	// If it's different from the last rendered state, refresh.
+	headers = Array.from(document.getElementsByClassName("page-header"));
+	let newHeaderString = headers.reduce((sum, el) => sum + el.outerHTML, "");
+	// If the headers change, update the outline.
+	if (headerString !== newHeaderString) headerString = newHeaderString;
 }
 function getHighlightThreshold() {
-  return window.innerHeight / 3;
+	return window.innerHeight / 3;
 }
 function position() {
-  let title = document.getElementsByClassName(
-    "bookish-chapter-header-text"
-  )[0];
-  if (outline && title) {
-    if (isMobile()) {
-      outline.style.removeProperty("margin-top");
-    } else {
-      let titleY = title.getBoundingClientRect().top + window.scrollY;
-      if (titleY - 50 < window.scrollY) {
-        outline.classList.add("outline-fixed-left");
-        outline.classList.remove("outline-title-left");
-      } else {
-        outline.classList.remove("outline-fixed-left");
-        outline.classList.add("outline-title-left");
-      }
-      if (listener) listener(false, layout);
-    }
-  }
+	// Left align the floating outline with the left margin of the chapter
+	// and the top of the title, unless we're past it.
+	let title = document.getElementsByClassName("bookish-chapter-header-text")[0];
+	// If we found them both...
+	if (outline && title) {
+		// If so, remove the inline position so the footer CSS applies.
+		if (isMobile()) {
+			outline.style.removeProperty("margin-top");
+		} else {
+			let titleY = title.getBoundingClientRect().top + window.scrollY;
+			// If the title is off screen, anchor it to the top of the window. (CSS is set to do this).
+			if (titleY - 50 < window.scrollY) {
+				outline.classList.add("outline-fixed-left");
+				outline.classList.remove("outline-title-left");
+			} else {
+				outline.classList.remove("outline-fixed-left");
+				outline.classList.add("outline-title-left");
+			}
+			// Tell any listeners about the repositioning.
+			if (listener) listener(false, layout);
+		}
+	}
 }
 function highlight() {
-  const top = window.scrollY;
-  const threshold = getHighlightThreshold();
-  let indexOfNearestHeaderAbove = -1;
-  Array.from(document.getElementsByClassName("page-header")).forEach(
-    (header, index) => {
-      if (header.tagName === "H1" || header.tagName === "H2" || header.tagName === "H3") {
-        let rect = header.getBoundingClientRect();
-        let headerTop = rect.y + top - rect.height;
-        if (top > headerTop - threshold)
-          indexOfNearestHeaderAbove = index;
-      }
-    }
-  );
-  headerIndex = indexOfNearestHeaderAbove;
+	const top = window.scrollY;
+	const threshold = getHighlightThreshold();
+	// Find the header that we're past so we can update the outline.
+	let indexOfNearestHeaderAbove = -1;
+	Array.from(document.getElementsByClassName("page-header")).forEach((header, index) => {
+		// Is this a header we care about?
+		if (header.tagName === "H1" || header.tagName === "H2" || header.tagName === "H3") {
+			let rect = header.getBoundingClientRect();
+			let headerTop = rect.y + top - rect.height;
+			// Are we past this header?
+			if (top > headerTop - threshold) indexOfNearestHeaderAbove = index;
+		}
+	});
+	// Update the outline and progress bar.
+	headerIndex = indexOfNearestHeaderAbove;
 }
 onMount(() => {
-  window.addEventListener("resize", layout);
-  window.addEventListener("scroll", layout);
-  document.addEventListener("selectionchange", updateHeaders);
-  layout();
-  return () => {
-    window.removeEventListener("scroll", layout);
-    window.removeEventListener("resize", layout);
-    document.removeEventListener("selectionchange", updateHeaders);
-  };
+	window.addEventListener("resize", layout);
+	window.addEventListener("scroll", layout);
+	// This is a bit hacky: we update the headers on every selection change so we
+	// can detect any header changes during editing. This isn't necessary during
+	// reading, and is only necessary when a header is created, updated, or removed,
+	// but we don't have a precise mechanism to listen to chapter changes, so we do this instead.
+	document.addEventListener("selectionchange", updateHeaders);
+	// Position outline after first render.
+	layout();
+	// Stop listening!
+	return () => {
+		window.removeEventListener("scroll", layout);
+		window.removeEventListener("resize", layout);
+		document.removeEventListener("selectionchange", updateHeaders);
+	};
 });
-let previousLabel = "\u25C0\uFE0E";
-let nextLabel = "\u25B6\uFE0E";
-let expandLabel = "\u2630";
+let previousLabel = "◀︎";
+let nextLabel = "▶︎";
+let expandLabel = "☰";
 </script>
 
 <nav

package/dist/components/page/Page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { onMount } from "svelte";
 import Loading from "./Loading.svelte";
-let { title = void 0, afterLoaded = void 0, children } = $props();
+let { title = undefined, afterLoaded = undefined, children } = $props();
 let fontsLoaded = $state(false);
 let imagesLoaded = $state(false);
 let lastHeight = 0;
@@ -8,28 +8,34 @@ let intervalID = null;
 let mountTime = Date.now();
 let loaded = $derived(fontsLoaded && imagesLoaded);
 function watchLoading() {
-  const bodyHeight = document.body.clientHeight;
-  if (lastHeight === bodyHeight && imagesAreLoaded() || Date.now() - mountTime > 2e3) {
-    stopWatching();
-    imagesLoaded = true;
-    if (afterLoaded) afterLoaded();
-  }
-  lastHeight = bodyHeight;
+	const bodyHeight = document.body.clientHeight;
+	// If the height hasn't changed and images are loaded OR it's been 2 seconds, load.
+	if (lastHeight === bodyHeight && imagesAreLoaded() || Date.now() - mountTime > 2e3) {
+		// Stop watching the images
+		stopWatching();
+		// Set to loaded to hide the overlay and notify callback if there is one.
+		imagesLoaded = true;
+		if (afterLoaded) afterLoaded();
+	}
+	// Remember the last height
+	lastHeight = bodyHeight;
 }
 function stopWatching() {
-  if (intervalID) clearInterval(intervalID);
+	if (intervalID) clearInterval(intervalID);
 }
 onMount(() => {
-  intervalID = setInterval(() => watchLoading(), 50);
-  document.fonts.ready.then(() => fontsLoaded = true);
-  return () => stopWatching();
+	// Watch the height of the document and wait until it's been stable for a while before scrolling
+	// to any targets. We use the data below to monitor the document height over time.
+	intervalID = setInterval(() => watchLoading(), 50);
+	document.fonts.ready.then(() => fontsLoaded = true);
+	return () => stopWatching();
 });
 function imagesAreLoaded() {
-  let done = true;
-  Array.from(document.getElementsByTagName("img")).forEach((el) => {
-    done = done && el.complete;
-  });
-  return done;
+	let done = true;
+	Array.from(document.getElementsByTagName("img")).forEach((el) => {
+		done = done && el.complete;
+	});
+	return done;
 }
 </script>
 

package/dist/components/page/PossibleChapter.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import Chapter from "./Chapter.svelte";
 import { page } from "$app/state";
-import { getEdition } from "./Contexts";
+import { getEdition } from "./Contexts.js";
 import Unknown from "./Unknown.svelte";
 let edition = $derived(getEdition());
 let chapterID = $derived(page.params.chapterid);
-let chapter = $derived(chapterID === void 0 ? void 0 : $edition?.getChapter(chapterID));
+let chapter = $derived(chapterID === undefined ? undefined : $edition?.getChapter(chapterID));
 </script>
 
 {#if chapter}

package/dist/components/page/PossibleReference.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import FormatNode from "../../models/chapter/FormatNode";
+<script lang="ts">import FormatNode from "../../models/chapter/FormatNode.js";
 import Format from "../chapter/Format.svelte";
 import Reference from "./Reference.svelte";
 let { node, edit } = $props();

package/dist/components/page/PossibleReference.svelte.d.ts

@@ -1,5 +1,5 @@
-import FormatNode from '../../models/chapter/FormatNode';
-import type Ref from '../../models/book/Reference';
+import FormatNode from '../../models/chapter/FormatNode.js';
+import type Ref from '../../models/book/Reference.js';
 interface Props {
     node: FormatNode | Ref;
     edit: boolean;

package/dist/components/page/Print.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">import Chapter from "./Chapter.svelte";
 import { getEdition } from "./Contexts";
-import Parser from "../../models/chapter/Parser";
+import Parser from "../../models/chapter/Parser.js";
 let edition = getEdition();
 let title = $derived($edition ? [
-  $edition.getTitle(),
-  `${$edition.getEditionLabel()} Edition`,
-  Parser.parseFormat(
-    $edition,
-    $edition.getAuthors().at(0) ?? ""
-  ).toText() + ($edition.getAuthors().length > 1 ? " et al." : "")
-].filter(Boolean).join(" - ") : void 0);
+	$edition.getTitle(),
+	`${$edition.getEditionLabel()} Edition`,
+	Parser.parseFormat($edition, $edition.getAuthors().at(0) ?? "").toText() + ($edition.getAuthors().length > 1 ? " et al." : "")
+].filter(Boolean).join(" - ") : undefined);
 </script>
 
 <svelte:head>

package/dist/components/page/Publish.svelte

@@ -1,58 +1,52 @@
 <script lang="ts">import Parser from "../../models/chapter/Parser";
 import BookishEditor from "../editor/BookishEditor.svelte";
 import Switch from "../editor/Switch.svelte";
-import {
-  getUser,
-  getEdition,
-  getLeasee,
-  isEditionEditable,
-  lease
-} from "./Contexts";
+import { getUser, getEdition, getLeasee, isEditionEditable, lease } from "./Contexts";
 import Format from "../chapter/Format.svelte";
 import Note from "../editor/Note.svelte";
 import Instructions from "./Instructions.svelte";
 import Link from "../Link.svelte";
 import { PUBLIC_CONTEXT } from "$env/static/public";
 import Button from "../app/Button.svelte";
-import { publish } from "../../models/CRUD";
 import Feedback from "../app/Feedback.svelte";
 let auth = getUser();
 let edition = getEdition();
 let editable = isEditionEditable();
 let publishing = false;
-let feedback = $state(void 0);
-let error = $state(void 0);
-let url = $state(void 0);
+let feedback = $state(undefined);
+let error = $state(undefined);
+let url = $state(undefined);
 async function requestPublish() {
-  if ($edition) {
-    publishing = true;
-    error = void 0;
-    feedback = "Binding the book, this could take a minute...";
-    try {
-      const result = await publish($edition);
-      if (typeof result === "string") {
-        error = result;
-        feedback = void 0;
-      } else {
-        url = result.url;
-      }
-    } catch (err) {
-      console.log(err);
-      feedback = void 0;
-      error = "Unable to bundle the book for download :(";
-    } finally {
-      publishing = false;
-    }
-  }
+	if ($edition) {
+		publishing = true;
+		error = undefined;
+		feedback = "Binding the book, this could take a minute...";
+		try {
+			const { publish } = await import("../../models/CRUD");
+			const result = await publish($edition);
+			if (typeof result === "string") {
+				error = result;
+				feedback = undefined;
+			} else {
+				url = result.url;
+			}
+		} catch (err) {
+			console.log(err);
+			feedback = undefined;
+			error = "Unable to bundle the book for download :(";
+		} finally {
+			publishing = false;
+		}
+	}
 }
-let publisher = $state(void 0);
+let publisher = $state(undefined);
 async function updateUserClaims() {
-  if ($auth === void 0 || $auth.user === null) return;
-  const token = await $auth.user.getIdTokenResult();
-  publisher = "publisher" in token.claims && token.claims.publisher === true;
+	if ($auth === undefined || $auth.user === null) return;
+	const token = await $auth.user.getIdTokenResult();
+	publisher = "publisher" in token.claims && token.claims.publisher === true;
 }
 $effect(() => {
-  if ($auth && $auth.user) updateUserClaims();
+	if ($auth && $auth.user) updateUserClaims();
 });
 </script>
 
@@ -70,7 +64,7 @@ $effect(() => {
                 save={(newSummary) =>
                     $edition
                         ? edition.set(
-                              $edition.withSummary(newSummary.toBookdown())
+                              $edition.withSummary(newSummary.toBookdown()),
                           )
                         : undefined}
                 chapter={false}
@@ -87,7 +81,7 @@ $effect(() => {
             edit={(published) =>
                 $edition
                     ? edition.set(
-                          $edition.asPublished(published === 'published')
+                          $edition.asPublished(published === 'published'),
                       )
                     : undefined}
         />
@@ -108,7 +102,7 @@ $effect(() => {
     <div>
         <Note
             >{#if $edition.published}Last published {new Date(
-                    $edition.published
+                    $edition.published,
                 ).toLocaleDateString('en-us')}{/if}</Note
         >
     </div>

package/dist/components/page/Reference.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import Reference from "../../models/book/Reference";
+<script lang="ts">import Reference from "../../models/book/Reference.js";
 import Button from "../app/Button.svelte";
 import Table from "../app/Table.svelte";
 import ConfirmButton from "../editor/ConfirmButton.svelte";
@@ -11,20 +11,18 @@ let editable = isEditionEditable();
 let edition = getEdition();
 let editing = $state(false);
 function startEditing() {
-  editing = true;
+	editing = true;
 }
 function stopEditing() {
-  editing = false;
+	editing = false;
 }
 function move(field, direction) {
-  let fields = Array.from(
-    document.querySelectorAll('input[type="text"]')
-  );
-  let index = fields.indexOf(field);
-  if (index >= 0) {
-    const newInput = direction < 0 && index > 0 ? fields[index - 1] : direction > 0 && index < fields.length - 1 ? fields[index + 1] : void 0;
-    if (newInput) newInput.focus();
-  }
+	let fields = Array.from(document.querySelectorAll("input[type=\"text\"]"));
+	let index = fields.indexOf(field);
+	if (index >= 0) {
+		const newInput = direction < 0 && index > 0 ? fields[index - 1] : direction > 0 && index < fields.length - 1 ? fields[index + 1] : undefined;
+		if (newInput) newInput.focus();
+	}
 }
 </script>
 

package/dist/components/page/Reference.svelte.d.ts

@@ -1,4 +1,4 @@
-import Reference from '../../models/book/Reference';
+import Reference from '../../models/book/Reference.js';
 interface Props {
     reference: Reference;
     edit?: boolean;

package/dist/components/page/References.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import Header from "./Header.svelte";
 import Outline from "./Outline.svelte";
 import Page from "./Page.svelte";
-import ChapterIDs from "../../models/book/ChapterID";
+import ChapterIDs from "../../models/book/ChapterID.js";
 import BulkReferenceEditor from "./BulkReferenceEditor.svelte";
 import PossibleReference from "./PossibleReference.svelte";
 import { getUser, getEdition, isEditionEditable } from "./Contexts";