bookish-press 0.9.4 → 0.10.0

package/dist/components/page/DownloadEPUB.svelte

@@ -1,59 +1,80 @@
 <script lang="ts">import { onDestroy } from "svelte";
 import { getBase, getEdition } from "./Contexts";
-import { buildEPUB } from "../../epub/build";
-import { DEFAULT_SIZE, SIZES } from "../../epub/images";
+import { buildEPUB } from "../../epub/build.js";
+import { DEFAULT_SIZE, SIZES } from "../../epub/images.js";
 let edition = getEdition();
 let base = getBase();
 let sizeID = $state(DEFAULT_SIZE.id);
+let grayscale = $state(false);
 let building = $state(false);
-let progress = $state(void 0);
-let error = $state(void 0);
+let progress = $state(undefined);
+let error = $state(undefined);
 let warnings = $state([]);
-let url = $state(void 0);
+let url = $state(undefined);
 let filename = $state("book.epub");
+/** Release the previous blob before replacing or discarding it. */
 function release() {
-  if (url !== void 0) {
-    URL.revokeObjectURL(url);
-    url = void 0;
-  }
+	if (url !== undefined) {
+		URL.revokeObjectURL(url);
+		url = undefined;
+	}
+}
+/**
+* Any change to the controls makes an already-built file stale: without
+* this the reader could flip a setting and download something that doesn't
+* match what the controls say.
+*/
+function invalidate() {
+	release();
+	warnings = [];
+	error = undefined;
 }
 function chooseSize(id) {
-  sizeID = id;
-  release();
-  warnings = [];
-  error = void 0;
+	sizeID = id;
+	invalidate();
+}
+function chooseGrayscale(on) {
+	grayscale = on;
+	invalidate();
 }
 async function build() {
-  if ($edition === void 0 || building) return;
-  building = true;
-  release();
-  error = void 0;
-  warnings = [];
-  progress = { phase: "images", done: 0, total: 0 };
-  try {
-    const result = await buildEPUB($edition, {
-      base: $base ?? "",
-      size: SIZES[sizeID] ?? DEFAULT_SIZE,
-      onProgress: (update) => progress = update
-    });
-    url = URL.createObjectURL(result.blob);
-    filename = result.filename;
-    warnings = result.warnings;
-  } catch (problem) {
-    console.error(problem);
-    error = "Something went wrong building the e-book.";
-  } finally {
-    building = false;
-    progress = void 0;
-  }
+	if ($edition === undefined || building) return;
+	building = true;
+	release();
+	error = undefined;
+	warnings = [];
+	progress = {
+		phase: "images",
+		done: 0,
+		total: 0
+	};
+	try {
+		// Everything below runs only on a click, so the browser-only APIs
+		// it reaches are never touched while server rendering.
+		const result = await buildEPUB($edition, {
+			base: $base ?? "",
+			size: SIZES[sizeID] ?? DEFAULT_SIZE,
+			grayscale,
+			onProgress: (update) => progress = update
+		});
+		url = URL.createObjectURL(result.blob);
+		filename = result.filename;
+		warnings = result.warnings;
+	} catch (problem) {
+		console.error(problem);
+		error = "Something went wrong building the e-book.";
+	} finally {
+		building = false;
+		progress = undefined;
+	}
 }
+// $derived.by rather than $derived: svelte2tsx mis-narrows the type of a
+// value read inside a multiline $derived expression.
 let status = $derived.by(() => {
-  if (progress === void 0) return void 0;
-  if (progress.phase === "images")
-    return progress.total === 0 ? "Gathering images\u2026" : `Shrinking image ${progress.done} of ${progress.total}\u2026`;
-  if (progress.phase === "chapters")
-    return `Preparing chapter ${progress.done} of ${progress.total}\u2026`;
-  return "Packaging the book\u2026";
+	if (progress === undefined) return undefined;
+	if (progress.phase === "images") return progress.total === 0 ? "Gathering images…" : `Shrinking image ${progress.done} of ${progress.total}…`;
+	if (progress.phase === "chapters") return `Preparing chapter ${progress.done} of ${progress.total}…`;
+	return "Packaging the book…";
 });
 onDestroy(release);
 </script>
@@ -76,6 +97,19 @@ onDestroy(release);
                 </select>
             </span>
         </label>
+        <label class="greyscale">
+            <input
+                type="checkbox"
+                checked={grayscale}
+                disabled={building}
+                onchange={(event) =>
+                    chooseGrayscale(event.currentTarget.checked)}
+            />
+            Greyscale
+            <span class="note"
+                >(a little smaller; e-readers convert anyway)</span
+            >
+        </label>
         <!-- A plain button rather than the app's, whose --app-* variables are
              only defined in the (app) layout, so it renders unstyled here and
              in books compiled by bookish-reader. -->
@@ -226,6 +260,14 @@ onDestroy(release);
         text-decoration: underline;
     }
 
+    .greyscale {
+        gap: 0.35em;
+    }
+
+    .greyscale .note {
+        color: var(--bookish-muted-color);
+    }
+
     .warnings {
         font-size: var(--bookish-small-font-size);
         font-style: italic;

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

@@ -1,4 +1,4 @@
-import type { TOCHeaderKey } from '../../models/book/ChapterID';
+import type { TOCHeaderKey } from '../../models/book/ChapterID.js';
 interface Props {
     id: TOCHeaderKey;
     /** ARIA label */

package/dist/components/page/Edition.svelte

@@ -2,47 +2,61 @@
 import { goto } from "$app/navigation";
 import { onMount, setContext, untrack } from "svelte";
 import { writable } from "svelte/store";
-import {
-  BASE,
-  DARK_MODE,
-  getBook
-} from "./Contexts";
-import { BookishTheme } from "../../models/book/Theme";
+import { BASE, DARK_MODE, getBook } from "./Contexts";
+import { BookishTheme } from "../../models/book/Theme.js";
 import { isDark, setDark } from "../../util/dark";
 import { page } from "$app/state";
 import Title from "./Title.svelte";
 import Page from "./Page.svelte";
-import Parser from "../../models/chapter/Parser";
-import EmbedNode from "../../models/chapter/EmbedNode";
+import Parser from "../../models/chapter/Parser.js";
+import EmbedNode from "../../models/chapter/EmbedNode.js";
+// Poly fill smooth scrolling for Safari.
 onMount(() => smoothscroll.polyfill());
 let { edition, base = "", children } = $props();
+/** The cover image's URL for social previews. The cover is stored as
+*  Bookish embed markup, so it must be parsed; emitting the raw markup
+*  would produce a nonsense og:image (and stray pages, when a static
+*  site generator crawls it as a link). */
 let coverURL = $derived.by(() => {
-  const cover = edition?.getImage("cover");
-  if (!cover) return void 0;
-  const node = Parser.parseEmbed(edition, cover);
-  const url = node instanceof EmbedNode ? node.getURL() : void 0;
-  if (!url || url.length === 0) return void 0;
-  return url.startsWith("http") ? url : `${base}/images/${url}`;
+	const cover = edition?.getImage("cover");
+	if (!cover) return undefined;
+	const node = Parser.parseEmbed(edition, cover);
+	const url = node instanceof EmbedNode ? node.getURL() : undefined;
+	if (!url || url.length === 0) return undefined;
+	// Resolve local images the same way Embed.svelte does.
+	return url.startsWith("http") ? url : `${base}/images/${url}`;
 });
 let book = getBook();
+// Expose the base path to descendants, keeping it up to date when it changes.
+// Deliberately seeded with the initial base (untracked); the effect
+// below keeps it in sync when the prop changes.
 let baseStore = writable(untrack(() => base));
 setContext(BASE, baseStore);
 $effect.pre(() => {
-  baseStore.set(base);
+	baseStore.set(base);
 });
+// Default dark mode to whatever's stored in local storage, if anything.
+// respect user choice on the website despite the system theme
 let darkMode = writable(isDark());
+// Expose dark mode to descendants
 setContext(DARK_MODE, darkMode);
-let themeCSS = $derived(
-  themeToCSS(edition?.getTheme() ?? BookishTheme)
-);
+// The CSS to set on the edition, kept up to date with the edition's theme.
+let themeCSS = $derived(themeToCSS(edition?.getTheme() ?? BookishTheme));
+// When dark mode changes, update the body's class list.
 $effect.pre(() => {
-  setDark($darkMode);
+	setDark($darkMode);
 });
-if (typeof window !== "undefined" && window.location.hash.startsWith("#/"))
-  goto(location.hash.replace("#", ""));
+// Redirect old hash routes by simply replacing their hash before routing.
+// SvelteKit 3's goto rejects paths that match no route, where SvelteKit 2
+// fell back to a full page load; keep that fallback.
+if (typeof window !== "undefined" && window.location.hash.startsWith("#/")) {
+	const path = location.hash.replace("#", "");
+	goto(path).catch(() => window.location.href = path);
+}
+/** Given a theme, compute the CSS rules that apply the theme. */
 function themeToCSS(theme) {
-  if (theme === null) theme = BookishTheme;
-  return `
+	if (theme === null) theme = BookishTheme;
+	return `
             ${(theme.imports ?? []).map((url) => `@import url(${url});`).join("\n")}
             .bookish {
                 ${theme.light ? toRules(theme.light) : ""}
@@ -57,13 +71,13 @@ function themeToCSS(theme) {
         `;
 }
 function toRules(set) {
-  return Object.keys(set).map((name) => {
-    const value = set[name];
-    if (value.length > 0) {
-      const cssVariable = "--bookish-" + name.replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((s) => s.toLowerCase()).join("-").replace(/([0-9])/g, "-$1-");
-      return `${cssVariable}: ${value};`;
-    }
-  }).join("\n		");
+	return Object.keys(set).map((name) => {
+		const value = set[name];
+		if (value.length > 0) {
+			const cssVariable = "--bookish-" + name.replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((s) => s.toLowerCase()).join("-").replace(/([0-9])/g, "-$1-");
+			return `${cssVariable}: ${value};`;
+		}
+	}).join("\n		");
 }
 </script>
 

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

@@ -1,4 +1,4 @@
-import type EditionModel from '../../models/book/Edition';
+import type EditionModel from '../../models/book/Edition.js';
 interface Props {
     edition: EditionModel | undefined;
     base?: string;

package/dist/components/page/EditionLoader.svelte

@@ -1,14 +1,8 @@
 <script lang="ts">import Loading from "./Loading.svelte";
 import Edition from "./Edition.svelte";
 import Feedback from "../app/Feedback.svelte";
-import {
-  getBook,
-  getEdition,
-  getStatus,
-  getUser,
-  getChapterText
-} from "./Contexts";
-import BookSaveStatus from "../../models/book/BookSaveStatus";
+import { getBook, getEdition, getStatus, getUser, getChapterText } from "./Contexts.js";
+import BookSaveStatus from "../../models/book/BookSaveStatus.js";
 import { get } from "svelte/store";
 import { onDestroy, untrack } from "svelte";
 import { page } from "$app/state";
@@ -19,117 +13,124 @@ let auth = getUser();
 let book = getBook();
 let edition = getEdition();
 let status = getStatus();
+/** Whether the edition store has been set by something other than this
+*  loader's own snapshot application (i.e., a local edit) since the last
+*  completed save. While true, incoming snapshots are by definition older
+*  than local state and applying them would lose the newer edits, so they
+*  are skipped; the pending save's own confirmation snapshot arrives
+*  after the save completes and is applied then. (Reader routes never
+*  edit, so this stays false there.) */
 let locallyEdited = false;
 let applyingSnapshot = false;
 const localEditWatch = edition.subscribe(() => {
-  if (!applyingSnapshot) locallyEdited = true;
+	if (!applyingSnapshot) locallyEdited = true;
 });
+// When a save completes, local state and server state agree again.
 const statusWatch = status?.subscribe((current) => {
-  if (current === BookSaveStatus.Saved) locallyEdited = false;
+	if (current === BookSaveStatus.Saved) locallyEdited = false;
 });
 function skipStaleSnapshot() {
-  const current = status ? get(status) : void 0;
-  return locallyEdited && (current === BookSaveStatus.Changed || current === BookSaveStatus.Saving);
+	const current = status ? get(status) : undefined;
+	return locallyEdited && (current === BookSaveStatus.Changed || current === BookSaveStatus.Saving);
 }
 function applySnapshot(apply) {
-  applyingSnapshot = true;
-  try {
-    apply();
-  } finally {
-    applyingSnapshot = false;
-  }
+	applyingSnapshot = true;
+	try {
+		apply();
+	} finally {
+		applyingSnapshot = false;
+	}
 }
-let chapterText = /* @__PURE__ */ new Map();
-let editionUnsub = void 0;
-let chaptersUnsub = void 0;
-let error = $state(void 0);
+/** Mapping from Firestore docuemnt IDs to chapter text */
+let chapterText = new Map();
+let editionUnsub = undefined;
+let chaptersUnsub = undefined;
+let error = $state(undefined);
 function unsub() {
-  if (editionUnsub) editionUnsub();
-  if (chaptersUnsub) chaptersUnsub();
+	// Unsubscribe to the old edition document if we were listening to one.
+	if (editionUnsub) editionUnsub();
+	if (chaptersUnsub) chaptersUnsub();
 }
 function listen() {
-  unsub();
-  error = void 0;
-  if ($book === void 0) {
-    edition.set(void 0);
-    error = "Unknown book.";
-    return;
-  } else {
-    currentEditionID = page.params.editionid;
-    const latestPublished = !write;
-    let editionID;
-    if (currentEditionID === void 0) {
-      if (latestPublished) {
-        editionID = $book.getLatestPublishedEditionID();
-        if (editionID === void 0)
-          error = "There is no published edition of this book.";
-      } else {
-        editionID = $book.getLatestEditionID();
-      }
-    } else {
-      editionID = $book.getEditionNumberID(
-        parseFloat(currentEditionID)
-      );
-      if (editionID === void 0)
-        error = `There is no ${currentEditionID} edition of this book`;
-    }
-    if (editionID !== void 0) {
-      editionUnsub = listenToEdition(
-        $book.getID(),
-        editionID,
-        (ed) => {
-          if (skipStaleSnapshot()) return;
-          if (ed) {
-            applySnapshot(
-              () => edition.set(ed.withChapterText(chapterText))
-            );
-          } else {
-            applySnapshot(() => edition.set(void 0));
-            error = "Unable to load edition";
-          }
-        }
-      );
-      chaptersUnsub = listenToChapters(
-        $book.getID(),
-        editionID,
-        (chapters) => {
-          const stale = skipStaleSnapshot();
-          for (const [ref, text] of chapters)
-            if (!stale || !chapterText.has(ref.id))
-              chapterText.set(ref.id, text);
-          if ($edition) {
-            applySnapshot(
-              () => edition.set(
-                $edition.withChapterText(chapterText)
-              )
-            );
-          }
-        }
-      );
-    }
-  }
+	unsub();
+	error = undefined;
+	// If we no longer have a book, we can't get an edition.
+	if ($book === undefined) {
+		edition.set(undefined);
+		error = "Unknown book.";
+		return;
+	} else {
+		currentEditionID = page.params.editionid;
+		const latestPublished = !write;
+		// Figure out which edition to load.
+		let editionID;
+		if (currentEditionID === undefined) {
+			if (latestPublished) {
+				editionID = $book.getLatestPublishedEditionID();
+				if (editionID === undefined) error = "There is no published edition of this book.";
+			} else {
+				editionID = $book.getLatestEditionID();
+			}
+		} else {
+			editionID = $book.getEditionNumberID(parseFloat(currentEditionID));
+			if (editionID === undefined) error = `There is no ${currentEditionID} edition of this book`;
+		}
+		// Listen to the doc for changes and listen to all of its chapters.
+		if (editionID !== undefined) {
+			editionUnsub = listenToEdition($book.getID(), editionID, (ed) => {
+				if (skipStaleSnapshot()) return;
+				if (ed) {
+					// Before setting the new edition, augmented it with the chapter text.
+					applySnapshot(() => edition.set(ed.withChapterText(chapterText)));
+				} else {
+					applySnapshot(() => edition.set(undefined));
+					error = "Unable to load edition";
+				}
+			});
+			chaptersUnsub = listenToChapters($book.getID(), editionID, (chapters) => {
+				// Cache the text of the chapters we received — except
+				// text we already have while local edits await a save,
+				// which may be a stale echo of what the user since
+				// revised. Text for a chapter not yet cached is load
+				// data, not an echo; it must always be kept, since
+				// nothing will re-deliver it. (The effect below keeps
+				// this cache current with local edits, so applying it
+				// to the edition never loses anything.)
+				const stale = skipStaleSnapshot();
+				for (const [ref, text] of chapters) if (!stale || !chapterText.has(ref.id)) chapterText.set(ref.id, text);
+				// Update the chapter text in the current edition.
+				if ($edition) {
+					applySnapshot(() => edition.set($edition.withChapterText(chapterText)));
+				}
+			});
+		}
+	}
 }
+// Remember the chapter text whenever the edition changes, so we don't overwrite stale text.
+// when other things change.
 $effect.pre(() => {
-  if ($edition) {
-    for (const chapter of $edition.chapters) {
-      if (chapter.ref && chapter.text !== null)
-        chapterText.set(chapter.ref.id, chapter.text);
-    }
-  }
+	if ($edition) {
+		for (const chapter of $edition.chapters) {
+			if (chapter.ref && chapter.text !== null) chapterText.set(chapter.ref.id, chapter.text);
+		}
+	}
 });
+// Whenever the requested edition or the user changes, change the listener.
+// currentEditionID is read untracked because listen() writes it; tracking
+// it would make this effect invalidate itself.
 $effect(() => {
-  const requestedEditionID = page.params.editionid;
-  const user = $auth?.user;
-  untrack(() => {
-    if ((currentEditionID === void 0 || requestedEditionID !== currentEditionID) && user !== null && user !== void 0)
-      listen();
-  });
+	const requestedEditionID = page.params.editionid;
+	const user = $auth?.user;
+	untrack(() => {
+		if ((currentEditionID === undefined || requestedEditionID !== currentEditionID) && user !== null && user !== undefined) listen();
+	});
 });
+// When unmounted, unset the stores — no longer viewing a book.
 onDestroy(() => {
-  localEditWatch();
-  statusWatch?.();
-  edition.set(void 0);
-  unsub();
+	localEditWatch();
+	statusWatch?.();
+	edition.set(undefined);
+	unsub();
 });
 </script>
 

package/dist/components/page/Editions.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { createNewEdition } from "../../models/CRUD";
-import Instructions from "./Instructions.svelte";
+<script lang="ts">import Instructions from "./Instructions.svelte";
 import Note from "../editor/Note.svelte";
 import { getBook, getUser, isBookEditable } from "./Contexts";
 import Button from "../app/Button.svelte";
@@ -13,23 +12,24 @@ let editable = isBookEditable();
 let user = getUser();
 let publisher = $state(false);
 async function updateUserClaims() {
-  if ($user === void 0 || $user.user === null) return;
-  const token = await $user.user.getIdTokenResult();
-  publisher = "publisher" in token.claims && token.claims.publisher === true;
+	if ($user === undefined || $user.user === null) return;
+	const token = await $user.user.getIdTokenResult();
+	publisher = "publisher" in token.claims && token.claims.publisher === true;
 }
 async function createEdition() {
-  if ($book === void 0) return;
-  try {
-    const revisedBook = await createNewEdition($book);
-    book.set(revisedBook);
-  } catch (err) {
-    console.error("Error creating new edition:", err);
-  }
+	if ($book === undefined) return;
+	try {
+		const { createNewEdition } = await import("../../models/CRUD");
+		const revisedBook = await createNewEdition($book);
+		book.set(revisedBook);
+	} catch (err) {
+		console.error("Error creating new edition:", err);
+	}
 }
 let editions = $derived($book?.getEditions());
 let latestPublishedID = $derived($book?.getLatestPublishedEditionID());
 $effect(() => {
-  if ($user && $user.user) updateUserClaims();
+	if ($user && $user.user) updateUserClaims();
 });
 </script>
 

package/dist/components/page/Glossary.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 DefinitionView from "./DefinitionView.svelte";
 import { getUser, getEdition, isEditionEditable } from "./Contexts";
 import Instructions from "./Instructions.svelte";
@@ -10,16 +10,15 @@ let auth = getUser();
 let edition = getEdition();
 let editable = isEditionEditable();
 let glossary = $derived($edition?.getGlossary() ?? {});
-let keys = $derived($edition === void 0 ? [] : glossary === void 0 || Object.keys(glossary).length === 0 ? null : Object.keys(glossary).sort(
-  (a, b) => glossary[a].phrase.localeCompare(glossary[b].phrase)
-));
+// Sort by canonical phrases
+let keys = $derived($edition === undefined ? [] : glossary === undefined || Object.keys(glossary).length === 0 ? null : Object.keys(glossary).sort((a, b) => glossary[a].phrase.localeCompare(glossary[b].phrase)));
 function addEmptyDefinition() {
-  if ($edition === void 0) return;
-  const letters = "abcdefghijklmnopqrstuvwxyz".split("");
-  let id = "";
-  while (id.length < 4 || $edition.hasDefinition(id))
-    id = id + letters[Math.round(Math.random() * 26)];
-  edition.set($edition.withDefinition(id, "", "", []));
+	if ($edition === undefined) return;
+	// Generate an ID.
+	const letters = "abcdefghijklmnopqrstuvwxyz".split("");
+	let id = "";
+	while (id.length < 4 || $edition.hasDefinition(id)) id = id + letters[Math.round(Math.random() * 26)];
+	edition.set($edition.withDefinition(id, "", "", []));
 }
 </script>
 

package/dist/components/page/Header.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import Parser from "../../models/chapter/Parser";
+<script lang="ts">import Parser from "../../models/chapter/Parser.js";
 import Embed from "../chapter/Embed.svelte";
 import BookishEditor from "../editor/BookishEditor.svelte";
 import Title from "./Title.svelte";
@@ -7,45 +7,32 @@ import TextEditor from "../editor/TextEditor.svelte";
 import { getUser, getEdition, getLeasee, lease } from "./Contexts";
 import Button from "../app/Button.svelte";
 import ConfirmButton from "../editor/ConfirmButton.svelte";
-let {
-  editable,
-  label,
-  header,
-  id,
-  subtitle = void 0,
-  print = false,
-  tags = void 0,
-  getImage = void 0,
-  setImage = void 0,
-  save = null,
-  outline,
-  before,
-  after
-} = $props();
+let { editable, label, header, id, subtitle = undefined, print = false, tags = undefined, getImage = undefined, setImage = undefined, save = null, outline, before, after } = $props();
 let title = $state(null);
 let showReminder = $state(true);
 let auth = getUser();
 let edition = getEdition();
 function updateScrollReminder() {
-  if (title)
-    showReminder = window.scrollY + window.innerHeight <= title.getBoundingClientRect().top + window.scrollY;
+	// If the bottom of the window is below the top of the title, hide the reminder.
+	if (title) showReminder = window.scrollY + window.innerHeight <= title.getBoundingClientRect().top + window.scrollY;
 }
 function addCover() {
-  if (setImage) setImage("|||||");
+	if (setImage) setImage("|||||");
 }
 function removeCover() {
-  if (setImage) setImage(null);
+	if (setImage) setImage(null);
 }
+// When the title becomes visible or hidden, update the scroll reminder.
 onMount(() => {
-  const intersectionObserver = new IntersectionObserver(
-    () => updateScrollReminder()
-  );
-  if (title) intersectionObserver.observe(title);
-  updateScrollReminder();
-  return () => {
-    if (title) intersectionObserver.unobserve(title);
-  };
+	const intersectionObserver = new IntersectionObserver(() => updateScrollReminder());
+	if (title) intersectionObserver.observe(title);
+	updateScrollReminder();
+	// Stop observing when unmounted.
+	return () => {
+		if (title) intersectionObserver.unobserve(title);
+	};
 });
+// Get the embed, update when getImage function prop changes.
 let embed = $derived(getImage ? getImage() : null);
 </script>