bookish-press 0.9.4 → 0.10.0

package/dist/components/editor/Permissions.svelte

@@ -1,39 +1,31 @@
-<script lang="ts">import { createUser } from "../../models/CRUD";
-import Button from "../app/Button.svelte";
+<script lang="ts">import Button from "../app/Button.svelte";
 import TextInput from "../app/TextInput.svelte";
 import { getEditors } from "../page/Contexts";
 import Note from "./Note.svelte";
-let {
-  uids,
-  inheriteduids,
-  writable,
-  atleastone,
-  change
-} = $props();
+let { uids, inheriteduids, writable, atleastone, change } = $props();
 let emails = getEditors();
 let newEditor = $state("");
 let newEditorError = $state(null);
-let loading = $state(void 0);
+let loading = $state(undefined);
 async function addEditor() {
-  const email = newEditor;
-  newEditor = "";
-  loading = email;
-  try {
-    const uid = await createUser(email);
-    if (uid === null) newEditorError = "couldn't add editor";
-    else change([...uids, uid]);
-  } finally {
-    loading = void 0;
-  }
+	const email = newEditor;
+	newEditor = "";
+	loading = email;
+	try {
+		const { createUser } = await import("../../models/CRUD");
+		const uid = await createUser(email);
+		if (uid === null) newEditorError = "couldn't add editor";
+		else change([...uids, uid]);
+	} finally {
+		loading = undefined;
+	}
 }
 function hasEditor(email) {
-  if (email.length === 0) return false;
-  const match = Array.from($emails.entries()).find(
-    ([, e]) => e === email
-  );
-  if (match === void 0) return false;
-  const uid = match[0];
-  return uids.includes(uid) || inheriteduids.includes(uid);
+	if (email.length === 0) return false;
+	const match = Array.from($emails.entries()).find(([, e]) => e === email);
+	if (match === undefined) return false;
+	const uid = match[0];
+	return uids.includes(uid) || inheriteduids.includes(uid);
 }
 </script>
 
@@ -42,10 +34,12 @@ function hasEditor(email) {
 {:else}
     <section class="emails">
         {#if writable}
-            <form onsubmit={(event) => {
+            <form
+                onsubmit={(event) => {
                     event.preventDefault();
                     addEditor();
-                }}>
+                }}
+            >
                 <TextInput
                     type="email"
                     placeholder="email"

package/dist/components/editor/PositionEditor.svelte

@@ -4,7 +4,7 @@ import MiddleIcon from "./icons/middle.svg?raw";
 import RightIcon from "./icons/right.svg?raw";
 let { value, edit } = $props();
 function editAsString(newValue) {
-  edit(newValue);
+	edit(newValue);
 }
 </script>
 

package/dist/components/editor/PositionEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type Position from '../../models/chapter/Position';
+import type Position from '../../models/chapter/Position.js';
 interface Props {
     value: string;
     edit: (newValue: Position) => void;

package/dist/components/editor/QuoteEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getCaret } from "../page/Contexts";
+<script lang="ts">import { getCaret } from "../page/Contexts.js";
 import PositionEditor from "./PositionEditor.svelte";
 let { quote } = $props();
 let caret = getCaret();

package/dist/components/editor/QuoteEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type QuoteNode from '../../models/chapter/QuoteNode';
+import type QuoteNode from '../../models/chapter/QuoteNode.js';
 interface Props {
     quote: QuoteNode;
 }

package/dist/components/editor/Switch.svelte

@@ -1,16 +1,10 @@
 <script lang="ts">import Icon from "./Icon.svelte";
-let {
-  options,
-  icons = void 0,
-  value,
-  enabled = void 0,
-  edit
-} = $props();
+let { options, icons = undefined, value, enabled = undefined, edit } = $props();
 function handleClick(event) {
-  const newValue = event.currentTarget.dataset.value;
-  if (newValue && options.includes(newValue)) {
-    edit(newValue);
-  }
+	const newValue = event.currentTarget.dataset.value;
+	if (newValue && options.includes(newValue)) {
+		edit(newValue);
+	}
 }
 </script>
 

package/dist/components/editor/TableEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getCaret } from "../page/Contexts";
+<script lang="ts">import { getCaret } from "../page/Contexts.js";
 import PositionEditor from "./PositionEditor.svelte";
 let { table } = $props();
 let caret = getCaret();

package/dist/components/editor/TableEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import type TableNode from '../../models/chapter/TableNode';
+import type TableNode from '../../models/chapter/TableNode.js';
 interface Props {
     table: TableNode;
 }

package/dist/components/editor/TextEditor.svelte

@@ -1,84 +1,87 @@
 <script lang="ts">import { untrack } from "svelte";
-var Status = /* @__PURE__ */ ((Status2) => {
-  Status2[Status2["Viewing"] = 0] = "Viewing";
-  Status2[Status2["Editing"] = 1] = "Editing";
-  return Status2;
-})(Status || {});
-let {
-  text = $bindable(),
-  label,
-  placeholder,
-  valid,
-  save,
-  saveOnExit = false,
-  width = void 0,
-  clip = false,
-  move = void 0
-} = $props();
-let status = $state(0 /* Viewing */);
+// A plain object rather than a TypeScript enum: Vite 8's TS transform
+// inlines enum members in the script and then drops the declaration as
+// unused, though the markup below still reads it.
+const Status = {
+	Viewing: 0,
+	Editing: 1
+};
+let { text = $bindable(), label, placeholder, valid, save, saveOnExit = false, width = undefined, clip = false, move = undefined } = $props();
+let status = $state(Status.Viewing);
 let field = $state(null);
 let sizer = $state(null);
 function showPlaceholder() {
-  return text === "";
+	return text === "";
 }
 function startEditing() {
-  status = 1 /* Editing */;
+	status = Status.Editing;
 }
 function stopEditing() {
-  status = 0 /* Viewing */;
-  if (saveOnExit) saveText(text);
+	status = Status.Viewing;
+	if (saveOnExit) saveText(text);
 }
 function edit() {
-  if (field) {
-    text = field.value;
-    if (saveOnExit === false) saveText(text);
-  }
+	if (field) {
+		text = field.value;
+		if (saveOnExit === false) saveText(text);
+	}
 }
 function saveText(newText) {
-  if (validate(newText) === void 0) {
-    const revisedText = save(newText);
-    if (typeof revisedText === "string") {
-      text = revisedText;
-    }
-    if (revisedText instanceof Promise)
-      revisedText.catch((err) => error = err.message);
-  }
+	if (validate(newText) === undefined) {
+		const revisedText = save(newText);
+		if (typeof revisedText === "string") {
+			text = revisedText;
+		}
+		if (revisedText instanceof Promise) revisedText.catch((err) => error = err.message);
+	}
 }
 function validate(value) {
-  return valid(value);
+	return valid(value);
 }
 function handleKeyPress(event) {
-  if (event.key === "Enter") status = 0 /* Viewing */;
-  else if (event.key === "ArrowUp" && move && field) {
-    event.preventDefault();
-    move(field, -1);
-  } else if (event.key === "ArrowDown" && move && field) {
-    event.preventDefault();
-    move(field, 1);
-  }
+	if (event.key === "Enter") status = Status.Viewing;
+	else if (event.key === "ArrowUp" && move && field) {
+		event.preventDefault();
+		move(field, -1);
+	} else if (event.key === "ArrowDown" && move && field) {
+		event.preventDefault();
+		move(field, 1);
+	}
 }
 let error = $derived(valid(text));
+// Grow the sizer when text or status changes.
 $effect(() => {
-  if (sizer) {
-    const sizedText = showPlaceholder() ? placeholder : text.replace(/\s$/g, "\xA0");
-    const trimmedText = width !== void 0 && (clip === true || status === 1 /* Editing */) ? sizedText.substring(0, width) + "\u2026" : sizedText;
-    sizer.innerHTML = trimmedText;
-  }
+	if (sizer) {
+		// Set the invisible sizer to the text to set the container's width.
+		// The browser strips trailing spaces, causing jitter after a space, so we replace
+		// them with non-breaking spaces.
+		const sizedText = showPlaceholder() ? placeholder : text.replace(/\s$/g, "\xA0");
+		// Clip the text to prevent this editor from getting too long when editing. If it goes past one line,
+		// the measurements and layout are way off.
+		const trimmedText = width !== undefined && (clip === true || status === Status.Editing) ? sizedText.substring(0, width) + "…" : sizedText;
+		sizer.innerHTML = trimmedText;
+	}
 });
+// When status changes, focus or blur.
 $effect(() => {
-  if (field) {
-    if (status === 1 /* Editing */) {
-      field.focus();
-    } else {
-      field.blur();
-    }
-  }
+	if (field) {
+		if (status === Status.Editing) {
+			field.focus();
+		} else {
+			field.blur();
+		}
+	}
 });
+// When text changes, save, unless we only save on exit. Only the text is
+// tracked: the save/valid props are often inline closures recreated on
+// every parent render, and saving usually triggers a parent re-render, so
+// tracking them (as calling saveText inside the effect otherwise would)
+// makes this effect loop forever.
 $effect(() => {
-  void text;
-  untrack(() => {
-    if (!saveOnExit) saveText(text);
-  });
+	void text;
+	untrack(() => {
+		if (!saveOnExit) saveText(text);
+	});
 });
 </script>
 

package/dist/components/editor/Toggle.svelte

@@ -1,19 +1,21 @@
-<script lang="ts">var Status = /* @__PURE__ */ ((Status2) => {
-  Status2[Status2["Viewing"] = 0] = "Viewing";
-  Status2[Status2["Saving"] = 1] = "Saving";
-  Status2[Status2["Error"] = 2] = "Error";
-  return Status2;
-})(Status || {});
+<script lang="ts">// A plain object rather than a TypeScript enum: Vite 8's TS transform
+// inlines enum members in the script and then drops the declaration as
+// unused, though the markup below still reads it.
+const Status = {
+	Viewing: 0,
+	Saving: 1,
+	Error: 2
+};
 let { on, save, children } = $props();
-let saving = $state(0 /* Viewing */);
+let saving = $state(Status.Viewing);
 function toggle() {
-  saving = 1 /* Saving */;
-  const promise = save(!on);
-  if (promise === void 0) {
-    saving = 0 /* Viewing */;
-    return;
-  }
-  promise.then(() => saving = 0 /* Viewing */).catch(() => saving = 2 /* Error */);
+	saving = Status.Saving;
+	const promise = save(!on);
+	if (promise === undefined) {
+		saving = Status.Viewing;
+		return;
+	}
+	promise.then(() => saving = Status.Viewing).catch(() => saving = Status.Error);
 }
 </script>
 

package/dist/components/editor/Toolbar.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">import commands from "./Commands";
-import TextNode from "../../models/chapter/TextNode";
-import AtomNode from "../../models/chapter/AtomNode";
-import LinkNode from "../../models/chapter/LinkNode";
-import LabelNode from "../../models/chapter/LabelNode";
-import InlineCodeNode from "../../models/chapter/InlineCodeNode";
-import CitationsNode from "../../models/chapter/CitationsNode";
-import DefinitionNode from "../../models/chapter/DefinitionNode";
-import CodeNode from "../../models/chapter/CodeNode";
-import CalloutNode from "../../models/chapter/CalloutNode";
-import EmbedNode from "../../models/chapter/EmbedNode";
-import QuoteNode from "../../models/chapter/QuoteNode";
+import TextNode from "../../models/chapter/TextNode.js";
+import AtomNode from "../../models/chapter/AtomNode.js";
+import LinkNode from "../../models/chapter/LinkNode.js";
+import LabelNode from "../../models/chapter/LabelNode.js";
+import InlineCodeNode from "../../models/chapter/InlineCodeNode.js";
+import CitationsNode from "../../models/chapter/CitationsNode.js";
+import DefinitionNode from "../../models/chapter/DefinitionNode.js";
+import CodeNode from "../../models/chapter/CodeNode.js";
+import CalloutNode from "../../models/chapter/CalloutNode.js";
+import EmbedNode from "../../models/chapter/EmbedNode.js";
+import QuoteNode from "../../models/chapter/QuoteNode.js";
 import LabelEditor from "./LabelEditor.svelte";
 import InlineCodeEditor from "./InlineCodeEditor.svelte";
 import CitationsEditor from "./CitationsEditor.svelte";
@@ -43,104 +43,91 @@ import TableNode from "../../models/chapter/TableNode";
 import { slide } from "svelte/transition";
 import Note from "./Note.svelte";
 const keyLabels = {
-  Digit0: "0",
-  Digit1: "1",
-  Digit2: "2",
-  Digit3: "3",
-  ArrowDown: "\u2193",
-  ArrowUp: "\u2191",
-  ArrowLeft: "\u2190",
-  ArrowRight: "\u2192",
-  Backspace: "\u232B"
+	Digit0: "0",
+	Digit1: "1",
+	Digit2: "2",
+	Digit3: "3",
+	ArrowDown: "↓",
+	ArrowUp: "↑",
+	ArrowLeft: "←",
+	ArrowRight: "→",
+	Backspace: "⌫"
 };
 const categoryOrder = {
-  navigation: 1,
-  selection: 2,
-  text: 3,
-  history: 4,
-  clipboard: 5,
-  annotation: 6,
-  level: 8,
-  list: 9,
-  table: 10,
-  block: 11
+	navigation: 1,
+	selection: 2,
+	text: 3,
+	history: 4,
+	clipboard: 5,
+	annotation: 6,
+	level: 8,
+	list: 9,
+	table: 10,
+	block: 11
 };
 const categoryIcons = {
-  text: TextIcon,
-  clipboard: ClipboardIcon,
-  annotation: AnnotateIcon,
-  level: LevelIcon,
-  block: BlockIcon,
-  list: ListIcon,
-  table: TableIcon,
-  history: TimeIcon
+	text: TextIcon,
+	clipboard: ClipboardIcon,
+	annotation: AnnotateIcon,
+	level: LevelIcon,
+	block: BlockIcon,
+	list: ListIcon,
+	table: TableIcon,
+	history: TimeIcon
 };
 let { caret } = $props();
 let context = $derived(caret?.context);
 let root = $derived(context?.root);
 let element = $state(null);
-let categories = $state(void 0);
+let categories = $state(undefined);
 let commandsByCategory = $state({});
-let metaNode = $state(void 0);
-let calloutNode = $state(void 0);
-let quoteNode = $state(void 0);
-let embedNode = $state(void 0);
-let tableNode = $state(void 0);
+let metaNode = $state(undefined);
+let calloutNode = $state(undefined);
+let quoteNode = $state(undefined);
+let embedNode = $state(undefined);
+let tableNode = $state(undefined);
 function getShortcutDescription(command) {
-  const macOS = navigator.userAgent.indexOf("Mac") >= 0;
-  const controlSymbol = macOS ? "\u2318" : "Ctrl+";
-  const altSymbol = macOS ? "\u2325" : "Alt+";
-  const key = command.key ? Array.isArray(command.key) ? command.key.join("/") : command.key : command.code ? command.code : "any";
-  const keyLabel = (typeof key === "string" ? key in keyLabels ? keyLabels[key] : key : "\u2014").toLocaleUpperCase();
-  return `${command.control ? controlSymbol : ""}${command.alt ? altSymbol : ""}${command.shift ? "\u21E7" : ""}${keyLabel}`;
+	const macOS = navigator.userAgent.indexOf("Mac") >= 0;
+	const controlSymbol = macOS ? "⌘" : "Ctrl+";
+	const altSymbol = macOS ? "⌥" : "Alt+";
+	const key = command.key ? Array.isArray(command.key) ? command.key.join("/") : command.key : command.code ? command.code : "any";
+	const keyLabel = (typeof key === "string" ? key in keyLabels ? keyLabels[key] : key : "—").toLocaleUpperCase();
+	return `${command.control ? controlSymbol : ""}${command.alt ? altSymbol : ""}${command.shift ? "⇧" : ""}${keyLabel}`;
 }
+// Update the above when the dependencies below change. Everything is
+// computed into locals and assigned once so the effect never reads
+// the state it writes.
 $effect.pre(() => {
-  if (context !== void 0 && root) {
-    const visible = commands.filter(
-      (command) => command.visible === true || context && command.visible instanceof Function && command.visible(context)
-    );
-    const newCategories = Array.from(
-      new Set(commands.map((command) => command.category))
-    ).sort(
-      (a, b) => a in categoryOrder && b in categoryOrder ? categoryOrder[a] - categoryOrder[b] : 0
-    );
-    const byCategory = {};
-    newCategories.forEach((cat) => {
-      byCategory[cat] = visible.filter(
-        (command) => command.category === cat
-      );
-    });
-    const caretNode = context.start.node;
-    categories = newCategories;
-    commandsByCategory = byCategory;
-    metaNode = caretNode instanceof AtomNode ? caretNode : caretNode instanceof TextNode ? caretNode.getParent(root) : void 0;
-    calloutNode = caretNode.getClosestParentMatching(
-      root,
-      (p) => p instanceof CalloutNode
-    );
-    quoteNode = caretNode.getClosestParentMatching(
-      root,
-      (p) => p instanceof QuoteNode
-    );
-    embedNode = caretNode instanceof EmbedNode ? caretNode : caretNode.getClosestParentMatching(
-      root,
-      (p) => p instanceof EmbedNode
-    );
-    tableNode = caretNode.getClosestParentMatching(
-      root,
-      (p) => p instanceof TableNode
-    );
-  }
+	if (context !== undefined && root) {
+		// Filter the commands by those interactive with a mouse and active.
+		const visible = commands.filter((command) => command.visible === true || context && command.visible instanceof Function && command.visible(context));
+		// Extract the active categories and sort them
+		const newCategories = Array.from(new Set(commands.map((command) => command.category))).sort((a, b) => a in categoryOrder && b in categoryOrder ? categoryOrder[a] - categoryOrder[b] : 0);
+		// Make a list for each category of commands
+		const byCategory = {};
+		newCategories.forEach((cat) => {
+			byCategory[cat] = visible.filter((command) => command.category === cat);
+		});
+		const caretNode = context.start.node;
+		categories = newCategories;
+		commandsByCategory = byCategory;
+		metaNode = caretNode instanceof AtomNode ? caretNode : caretNode instanceof TextNode ? caretNode.getParent(root) : undefined;
+		calloutNode = caretNode.getClosestParentMatching(root, (p) => p instanceof CalloutNode);
+		quoteNode = caretNode.getClosestParentMatching(root, (p) => p instanceof QuoteNode);
+		embedNode = caretNode instanceof EmbedNode ? caretNode : caretNode.getClosestParentMatching(root, (p) => p instanceof EmbedNode);
+		tableNode = caretNode.getClosestParentMatching(root, (p) => p instanceof TableNode);
+	}
 });
 function handleKeyPress(event) {
-  if ((event.key === "Escape" || event.key === "Enter") && element) {
-    const editor = element.closest(".bookish-editor");
-    if (editor instanceof HTMLElement) {
-      event.stopPropagation();
-      editor.focus();
-    }
-    return true;
-  }
+	// Return focus to the editor if someone presses an unhandled enter
+	if ((event.key === "Escape" || event.key === "Enter") && element) {
+		const editor = element.closest(".bookish-editor");
+		if (editor instanceof HTMLElement) {
+			event.stopPropagation();
+			editor.focus();
+		}
+		return true;
+	}
 }
 </script>
 

package/dist/components/editor/UndoState.d.ts

@@ -1,5 +1,5 @@
-import type { IndexRange } from '../../models/chapter/Caret';
-import type Command from './Command';
+import type { IndexRange } from '../../models/chapter/Caret.js';
+import type Command from './Command.js';
 type UndoState = {
     command: Command | undefined;
     bookdown: string;

package/dist/components/page/Acknowledgements.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 ChapterBody from "../chapter/ChapterBody.svelte";
 import BookishEditor from "../editor/BookishEditor.svelte";
 import Instructions from "./Instructions.svelte";
-import {
-  getUser,
-  getEdition,
-  getLeasee,
-  isEditionEditable,
-  lease
-} from "./Contexts";
+import { getUser, getEdition, getLeasee, isEditionEditable, lease } from "./Contexts";
 import PageHeader from "./PageHeader.svelte";
 import EditableHeader from "./EditableHeader.svelte";
 let auth = getUser();

package/dist/components/page/Authors.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 TextEditor from "../editor/TextEditor.svelte";
 import Format from "../chapter/Format.svelte";
 import { getEdition, getLeasee, getUser, lease } from "./Contexts";
@@ -6,30 +6,21 @@ import Note from "../editor/Note.svelte";
 import Button from "../app/Button.svelte";
 import { tick } from "svelte";
 import BookishEditor from "../editor/BookishEditor.svelte";
-import { auth } from "../../models/Firebase";
-let {
-  editable,
-  authors,
-  inheritedAuthors = void 0,
-  add,
-  edit,
-  remove,
-  editors = false
-} = $props();
+let { editable, authors, inheritedAuthors = undefined, add, edit, remove, editors = false } = $props();
 let edition = getEdition();
 let authorList = $state(null);
-let showInherited = $derived(authors.length === 0 && inheritedAuthors !== void 0);
+let showInherited = $derived(authors.length === 0 && inheritedAuthors !== undefined);
 let authorsToShow = $derived(showInherited ? inheritedAuthors : authors);
 async function addAuthor() {
-  add();
-  await tick();
-  if (authors.length > 0 && authorList) {
-    const editors2 = authorList.querySelectorAll("input");
-    if (editors2.length > 0) {
-      const lastAuthor = editors2[editors2.length - 1];
-      if (lastAuthor instanceof HTMLElement) lastAuthor.focus();
-    }
-  }
+	add();
+	await tick();
+	if (authors.length > 0 && authorList) {
+		const editors = authorList.querySelectorAll("input");
+		if (editors.length > 0) {
+			const lastAuthor = editors[editors.length - 1];
+			if (lastAuthor instanceof HTMLElement) lastAuthor.focus();
+		}
+	}
 }
 </script>