bookish-press 0.9.5 → 0.11.0

package/dist/components/chapter/Figure.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">import Format from "./Format.svelte";
 import Positioned from "./Positioned.svelte";
 import { getCaret, isChapterEditable } from "../page/Contexts";
-let {
-  node,
-  caption,
-  credit = void 0,
-  focusable = true,
-  children
-} = $props();
+let { node, caption, credit = undefined, focusable = true, children } = $props();
 let editable = isChapterEditable();
 let caret = getCaret();
 let selected = $derived($caret?.range?.start.node === node);
 function focusFigure() {
-  if (!editable || $caret === void 0) return;
-  const firstCaret = node.getFirstCaret();
-  if (firstCaret)
-    $caret.setCaret({
-      start: firstCaret,
-      end: firstCaret
-    });
+	if (!editable || $caret === undefined) return;
+	// if (node instanceof EmbedNode) {
+	//     return $caret.setCaret({
+	//         start: { node, index: 0 },
+	//         end: { node, index: 0 },
+	//     });
+	// } else {
+	const firstCaret = node.getFirstCaret();
+	if (firstCaret) $caret.setCaret({
+		start: firstCaret,
+		end: firstCaret
+	});
+	// }
 }
 </script>
 

package/dist/components/chapter/Figure.svelte.d.ts

@@ -1,7 +1,7 @@
-import type TableNode from '../../models/chapter/TableNode';
-import type EmbedNode from '../../models/chapter/EmbedNode';
-import type CodeNode from '../../models/chapter/CodeNode';
-import type FormatNode from '../../models/chapter/FormatNode';
+import type TableNode from '../../models/chapter/TableNode.js';
+import type EmbedNode from '../../models/chapter/EmbedNode.js';
+import type CodeNode from '../../models/chapter/CodeNode.js';
+import type FormatNode from '../../models/chapter/FormatNode.js';
 interface Props {
     node: TableNode | EmbedNode | CodeNode;
     caption: FormatNode | undefined;

package/dist/components/chapter/Footnote.svelte

@@ -1,31 +1,25 @@
 <script lang="ts">import Atom from "./Atom.svelte";
 import Marginal from "./Marginal.svelte";
 import Format from "./Format.svelte";
-import {
-  getChapter,
-  getEdition,
-  getCaret,
-  getRoot
-} from "../page/Contexts";
+import { getChapter, getEdition, getCaret, getRoot } from "../page/Contexts.js";
 let { node } = $props();
 let meta = $derived(node.getMeta());
 let caret = getCaret();
 let chapter = getChapter();
 let edition = getEdition();
 let root = getRoot();
+// What footnote number is this?
 let number = $derived($root.getFootnotes().indexOf(node));
-let letter = $derived(
-  number === void 0 ? void 0 : $edition?.getFootnoteSymbol(number)
-);
-let focused = $derived(
-  $caret && $caret.range && $caret.range.start.node.hasAncestor($root, node)
-);
+let letter = $derived(number === undefined ? undefined : $edition?.getFootnoteSymbol(number));
+let focused = $derived($caret && $caret.range && $caret.range.start.node.hasAncestor($root, node));
+// Whenever anything that affects this footnote's rendered size or
+// position changes, request a chapter-wide marginal layout pass.
 $effect(() => {
-  void meta;
-  void number;
-  void letter;
-  void focused;
-  $chapter?.requestLayout();
+	void meta;
+	void number;
+	void letter;
+	void focused;
+	$chapter?.requestLayout();
 });
 </script>
 

package/dist/components/chapter/Footnote.svelte.d.ts

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

package/dist/components/chapter/Format.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">import FormatNode from "../../models/chapter/FormatNode";
-import CitationsNode from "../../models/chapter/CitationsNode";
-import CommentNode from "../../models/chapter/CommentNode";
-import DefinitionNode from "../../models/chapter/DefinitionNode";
-import FootnoteNode from "../../models/chapter/FootnoteNode";
-import InlineCodeNode from "../../models/chapter/InlineCodeNode";
-import LabelNode from "../../models/chapter/LabelNode";
-import LinkNode from "../../models/chapter/LinkNode";
-import TextNode from "../../models/chapter/TextNode";
+<script lang="ts">import FormatNode from "../../models/chapter/FormatNode.js";
+import CitationsNode from "../../models/chapter/CitationsNode.js";
+import CommentNode from "../../models/chapter/CommentNode.js";
+import DefinitionNode from "../../models/chapter/DefinitionNode.js";
+import FootnoteNode from "../../models/chapter/FootnoteNode.js";
+import InlineCodeNode from "../../models/chapter/InlineCodeNode.js";
+import LabelNode from "../../models/chapter/LabelNode.js";
+import LinkNode from "../../models/chapter/LinkNode.js";
+import TextNode from "../../models/chapter/TextNode.js";
 import Problem from "./Problem.svelte";
 import Citations from "./Citations.svelte";
 import Definition from "./Definition.svelte";
@@ -20,10 +20,10 @@ import Format from "./Format.svelte";
 import { isChapterEditable, isEditionEditable } from "../page/Contexts";
 import LineBreakNode from "../../models/chapter/LineBreakNode";
 import LineBreak from "./LineBreak.svelte";
-let { node, placeholder = void 0 } = $props();
+let { node, placeholder = undefined } = $props();
 let format = $derived(node.getFormat());
 let tag = $derived(format === "*" ? "strong" : format === "_" ? "em" : format === "^" ? "sup" : format === "v" ? "sub" : "span");
-let showPlaceholder = $derived(node.isEmptyText() && placeholder !== void 0 && (isChapterEditable() || isEditionEditable()));
+let showPlaceholder = $derived(node.isEmptyText() && placeholder !== undefined && (isChapterEditable() || isEditionEditable()));
 </script>
 
 <svelte:element

package/dist/components/chapter/Format.svelte.d.ts

@@ -1,4 +1,4 @@
-import FormatNode from '../../models/chapter/FormatNode';
+import FormatNode from '../../models/chapter/FormatNode.js';
 import Format from './Format.svelte';
 interface Props {
     node: FormatNode;

package/dist/components/chapter/InlineCode.svelte.d.ts

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

package/dist/components/chapter/Label.svelte

@@ -5,7 +5,7 @@ let { node } = $props();
 let editable = isChapterEditable();
 let chapter = getChapter();
 let root = getRoot();
-let duplicate = $derived($root === void 0 ? false : $root.getLabels().filter((l) => l.getMeta() === node.getMeta()).length > 1);
+let duplicate = $derived($root === undefined ? false : $root.getLabels().filter((l) => l.getMeta() === node.getMeta()).length > 1);
 </script>
 
 <Atom {node}>

package/dist/components/chapter/Label.svelte.d.ts

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

package/dist/components/chapter/LineBreak.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">let { node } = $props();
+export {};
 </script>
 
 <br data-nodeid={node.nodeID} />

package/dist/components/chapter/LineBreak.svelte.d.ts

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

package/dist/components/chapter/Link.svelte

@@ -8,18 +8,20 @@ let edition = getEdition();
 let url = $derived(node.getMeta());
 let content = $derived(node.getText());
 function isInvalidChapterLink() {
-  if (!url.startsWith("http")) {
-    let chapter = url;
-    if (url.indexOf(":") >= 0) {
-      let parts = chapter.split(":");
-      chapter = parts[0];
-    } else if (url.indexOf("#") >= 0) {
-      let parts = chapter.split("#");
-      chapter = parts[0];
-    }
-    if (chapter !== "" && !$edition?.hasChapter(chapter)) return true;
-  }
-  return false;
+	// If it's internal, validate it.
+	if (!url.startsWith("http")) {
+		// Pull out any labels and just get the chapter name.
+		let chapter = url;
+		if (url.indexOf(":") >= 0) {
+			let parts = chapter.split(":");
+			chapter = parts[0];
+		} else if (url.indexOf("#") >= 0) {
+			let parts = chapter.split("#");
+			chapter = parts[0];
+		}
+		if (chapter !== "" && !$edition?.hasChapter(chapter)) return true;
+	}
+	return false;
 }
 </script>
 

package/dist/components/chapter/Link.svelte.d.ts

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

package/dist/components/chapter/List.svelte

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

package/dist/components/chapter/List.svelte.d.ts

@@ -1,5 +1,5 @@
 import List from './List.svelte';
-import ListNode from '../../models/chapter/ListNode';
+import ListNode from '../../models/chapter/ListNode.js';
 interface Props {
     node: ListNode;
 }

package/dist/components/chapter/Marginal.svelte

@@ -1,60 +1,54 @@
-<script lang="ts">import { isMobile, watchMobile } from "../../util/isMobile";
+<script lang="ts">import { isMobile, watchMobile } from "../../util/isMobile.js";
 import { onMount } from "svelte";
-import {
-  getCaret,
-  getChapter,
-  isChapterEditable
-} from "../page/Contexts";
+import { getCaret, getChapter, isChapterEditable } from "../page/Contexts.js";
 import AtomNode from "../../models/chapter/AtomNode";
 let { node, id, label, interactor, content } = $props();
 let hovered = $state(false);
 let chapter = getChapter();
 let editable = isChapterEditable();
 let caret = getCaret();
+// If there's no marginal selected or this is different from the current selection, this is hidden.
 let selectedMarginal = $derived($chapter?.marginal);
-let isHidden = $derived(
-  editable ? (
-    // If editable, it's hidden if the caret is not inside the marginal content.
-    !($caret?.range?.start.node === node || $caret?.range?.start.node.getAncestors($caret.root).some((ancestor) => ancestor === node))
-  ) : (
-    // If not editable, it's hidden if it's not selected.
-    $selectedMarginal !== id
-  )
-);
+let isHidden = $derived(editable ? !($caret?.range?.start.node === node || $caret?.range?.start.node.getAncestors($caret.root).some((ancestor) => ancestor === node)) : // If not editable, it's hidden if it's not selected.
+$selectedMarginal !== id);
 function toggle(event, interacted) {
-  if (editable) {
-    if (interacted) {
-      if (editable && $caret && node instanceof AtomNode) {
-        $caret.setCaret({
-          start: { node, index: 0 },
-          end: { node, index: 0 }
-        });
-        if (event) {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      }
-      return;
-    }
-  }
-  if ($chapter) {
-    if (isMobile() && isHidden) $chapter.marginal.set(id);
-    else $chapter.marginal.set(void 0);
-  }
+	if (editable) {
+		if (interacted) {
+			if (editable && $caret && node instanceof AtomNode) {
+				// Select this so that the view stays focused.
+				$caret.setCaret({
+					start: {
+						node,
+						index: 0
+					},
+					end: {
+						node,
+						index: 0
+					}
+				});
+				if (event) {
+					event.stopPropagation();
+					event.preventDefault();
+				}
+			}
+			return;
+		}
+	}
+	if ($chapter) {
+		if (isMobile() && isHidden) $chapter.marginal.set(id);
+		else $chapter.marginal.set(undefined);
+	}
 }
 function handleEnter() {
-  hovered = true;
+	hovered = true;
 }
 function handleExit() {
-  hovered = false;
+	hovered = false;
 }
 onMount(() => {
-  const mediaWatch = watchMobile();
-  mediaWatch.addEventListener("change", () => toggle(void 0, false));
-  return () => mediaWatch.removeEventListener(
-    "change",
-    () => toggle(void 0, false)
-  );
+	const mediaWatch = watchMobile();
+	mediaWatch.addEventListener("change", () => toggle(undefined, false));
+	return () => mediaWatch.removeEventListener("change", () => toggle(undefined, false));
 });
 </script>
 

package/dist/components/chapter/Paragraph.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">import Format from "./Format.svelte";
 import { getChapter, getEdition, getRoot } from "../page/Contexts";
-let { node, placeholder = void 0 } = $props();
+let { node, placeholder = undefined } = $props();
 let level = $derived(node.getLevel());
 let chapter = getChapter();
 let edition = getEdition();
 let root = getRoot();
-let id = $derived(node.getLevel() === 0 || $edition === void 0 ? void 0 : "header-" + ($root.getHeaders().indexOf(node) ?? ""));
-let classes = $derived(node.getLevel() === 0 ? void 0 : "page-header" + ($chapter && $chapter.highlightedID === id ? " bookish-content-highlight" : ""));
+let id = $derived(node.getLevel() === 0 || $edition === undefined ? undefined : "header-" + ($root.getHeaders().indexOf(node) ?? ""));
+let classes = $derived(node.getLevel() === 0 ? undefined : "page-header" + ($chapter && $chapter.highlightedID === id ? " bookish-content-highlight" : ""));
 let firstParagraph = $derived($root.getFirstParagraph());
-let dropcap = $derived(placeholder === void 0 && node === firstParagraph && /^[a-zA-Z]/.test(firstParagraph.getFirstTextNode().getText()));
+let dropcap = $derived(placeholder === undefined && node === firstParagraph && /^[a-zA-Z]/.test(firstParagraph.getFirstTextNode().getText()));
 </script>
 
 {#if level === 0}

package/dist/components/chapter/Paragraph.svelte.d.ts

@@ -1,4 +1,4 @@
-import type ParagraphNode from '../../models/chapter/ParagraphNode';
+import type ParagraphNode from '../../models/chapter/ParagraphNode.js';
 interface Props {
     node: ParagraphNode;
     placeholder?: string | undefined;

package/dist/components/chapter/Positioned.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">let { position, children } = $props();
+export {};
 </script>
 
 <div

package/dist/components/chapter/Positioned.svelte.d.ts

@@ -1,4 +1,4 @@
-import type Position from '../../models/chapter/Position';
+import type Position from '../../models/chapter/Position.js';
 interface Props {
     position: Position;
     children?: import('svelte').Snippet;

package/dist/components/chapter/Python.svelte

@@ -3,56 +3,67 @@
 <script lang="ts">import { onMount, untrack } from "svelte";
 import Code from "./Code.svelte";
 let { node, startCode } = $props();
+// Start with whatever code was passed in.
+// Deliberately captures the initial code (untracked): it's the
+// baseline that the reset button restores.
 let code = $state(untrack(() => startCode));
+// What is currently rendered to the console (not always program output).
 let output = $state("");
+// Whether the runtime is loaded. Initialized based on presence of global.
 let loaded = $state(skulptLoaded());
 let ref = $state(null);
 onMount(() => {
-  if (document.getElementById("skulpt") === null) {
-    let script = document.createElement("script");
-    script.type = "text/javascript";
-    script.async = true;
-    script.id = "skulpt";
-    script.onload = () => loaded = true;
-    script.src = "https://cdn.jsdelivr.net/combine/npm/skulpt@1.2.0/dist/skulpt.min.js,npm/skulpt@1.2.0/dist/skulpt-stdlib.min.js";
-    document.getElementsByTagName("head")[0].appendChild(script);
-  }
+	// Dynamically load the script to minimize payload and reduce index complexity.
+	if (document.getElementById("skulpt") === null) {
+		let script = document.createElement("script");
+		script.type = "text/javascript";
+		script.async = true;
+		script.id = "skulpt";
+		script.onload = () => loaded = true;
+		script.src = "https://cdn.jsdelivr.net/combine/npm/skulpt@1.2.0/dist/skulpt.min.js,npm/skulpt@1.2.0/dist/skulpt-stdlib.min.js";
+		document.getElementsByTagName("head")[0].appendChild(script);
+	}
 });
+// Always scroll to the bottom of the output when it changes.
 $effect(() => {
-  void output;
-  if (ref) {
-    let outputView = ref.querySelector(".bookish-python-output");
-    if (outputView) outputView.scrollTop = outputView.scrollHeight;
-  }
+	void output;
+	if (ref) {
+		let outputView = ref.querySelector(".bookish-python-output");
+		if (outputView) outputView.scrollTop = outputView.scrollHeight;
+	}
 });
 function skulptLoaded() {
-  return typeof window !== "undefined" && window.hasOwnProperty("Sk");
+	return typeof window !== "undefined" && window.hasOwnProperty("Sk");
 }
 function reset() {
-  code = startCode;
+	code = startCode;
 }
 function handleEdit(newCode) {
-  code = newCode;
+	code = newCode;
 }
 function handleOutput(out) {
-  output += out;
+	// Update the state to re-render.
+	output += out;
 }
 function start() {
-  if (skulptLoaded()) {
-    output = "Executing...";
-    setTimeout(() => execute(), 500);
-  }
+	if (skulptLoaded()) {
+		// Communicate that executing is starting, wait a second, then execute the program.
+		// This is important in case the user wants to run it again; it provides confirmation that it was run again.
+		output = "Executing...";
+		setTimeout(() => execute(), 500);
+	}
 }
 function execute() {
-  output = "";
-  if (Sk) {
-    Sk.configure({ output: handleOutput });
-    try {
-      if (Sk) Sk.importMainWithBody("<stdin>", false, code, true);
-    } catch (error) {
-      handleOutput(error);
-    }
-  }
+	// Reset the output, run the code, and update it's output.
+	output = "";
+	if (Sk) {
+		Sk.configure({ output: handleOutput });
+		try {
+			if (Sk) Sk.importMainWithBody("<stdin>", false, code, true);
+		} catch (error) {
+			handleOutput(error);
+		}
+	}
 }
 let lines = $derived(output.split("\n"));
 </script>

package/dist/components/chapter/Python.svelte.d.ts

@@ -1,4 +1,4 @@
-import type CodeNode from '../../models/chapter/CodeNode';
+import type CodeNode from '../../models/chapter/CodeNode.js';
 interface Props {
     node: CodeNode;
     startCode: string;

package/dist/components/chapter/Quote.svelte.d.ts

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

package/dist/components/chapter/Rule.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">let { node } = $props();
+export {};
 </script>
 
 <hr data-nodeid={node.nodeID} />

package/dist/components/chapter/Rule.svelte.d.ts

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

package/dist/components/chapter/Table.svelte.d.ts

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

package/dist/components/chapter/Text.svelte

@@ -1,61 +1,52 @@
 <script lang="ts">import { getChapter, isChapterEditable } from "../page/Contexts";
-let { node, placeholder = void 0 } = $props();
+let { node, placeholder = undefined } = $props();
 let context = getChapter();
 let editable = isChapterEditable();
 function replaceMultipleSpacesWithNonBreakingSpaces(original) {
-  let revisedText = "";
-  for (let i = 0; i < original.length; i++) {
-    let c = original.charAt(i);
-    if (c === " " && (i === 0 || i === original.length - 1 || original.charAt(i - 1) === " "))
-      revisedText += "\xA0";
-    else revisedText += c;
-  }
-  return revisedText;
+	let revisedText = "";
+	for (let i = 0; i < original.length; i++) {
+		// If its a space and its at the beginning, the end, or the previous character was a space, make it a non-breaking space.
+		let c = original.charAt(i);
+		if (c === " " && (i === 0 || i === original.length - 1 || original.charAt(i - 1) === " ")) revisedText += "\xA0";
+		else revisedText += c;
+	}
+	return revisedText;
 }
+// Manipulate text for rendering.
 let text = $derived.by(() => {
-  let revised = replaceMultipleSpacesWithNonBreakingSpaces(
-    node.getText()
-  );
-  if (revised.length > 0 && revised.charAt(revised.length - 1) === "\n")
-    revised = revised + "\uFEFF";
-  if (revised.length === 0) revised = placeholder ?? "\uFEFF";
-  return revised;
+	// Replace any spaces at the beginning or end of the string with explicit non-breaking spaces to ensure that they render.
+	let revised = replaceMultipleSpacesWithNonBreakingSpaces(node.getText());
+	// If the text ends with a newline, render a non-breaking space at the end.
+	if (revised.length > 0 && revised.charAt(revised.length - 1) === "\n") revised = revised + "";
+	// If there's no text, render a non-breaking space, or a placeholder if provided.
+	if (revised.length === 0) revised = placeholder ?? "";
+	return revised;
 });
+// Compute highlights, if highlighted
 let segments = $derived.by(() => {
-  if (editable) return void 0;
-  if (!$context || !$context.highlightedWord) return void 0;
-  const query = $context.highlightedWord;
-  const lowerText = text.toLowerCase();
-  if (lowerText.indexOf(query) < 0) return void 0;
-  const indices = [];
-  for (let i = 0; i < text.length; ++i) {
-    if (lowerText.substring(i, i + query.length) === query) {
-      indices.push(i);
-    }
-  }
-  const list = [];
-  for (let i = 0; i < indices.length; i++) {
-    list.push([
-      text.substring(
-        i === 0 ? 0 : indices[i - 1] + query.length,
-        indices[i]
-      ),
-      false
-    ]);
-    list.push([
-      text.substring(indices[i], indices[i] + query.length),
-      true
-    ]);
-  }
-  if (indices[indices.length - 1] < text.length - 1)
-    list.push([
-      text.substring(
-        indices[indices.length - 1] + query.length,
-        text.length
-      ),
-      false
-    ]);
-  return list;
+	if (editable) return undefined;
+	// Is there a query we're supposed to highlight? If so, highlight it.
+	if (!$context || !$context.highlightedWord) return undefined;
+	const query = $context.highlightedWord;
+	const lowerText = text.toLowerCase();
+	// Does this text contain the query? Highlight it.
+	if (lowerText.indexOf(query) < 0) return undefined;
+	// Find all the matches
+	const indices = [];
+	for (let i = 0; i < text.length; ++i) {
+		if (lowerText.substring(i, i + query.length) === query) {
+			indices.push(i);
+		}
+	}
+	// Go through each one and construct contents for the span to return.
+	const list = [];
+	for (let i = 0; i < indices.length; i++) {
+		// Push the text from the end of the last match or the start of the string.
+		list.push([text.substring(i === 0 ? 0 : indices[i - 1] + query.length, indices[i]), false]);
+		list.push([text.substring(indices[i], indices[i] + query.length), true]);
+	}
+	if (indices[indices.length - 1] < text.length - 1) list.push([text.substring(indices[indices.length - 1] + query.length, text.length), false]);
+	return list;
 });
 </script>
 

package/dist/components/chapter/Text.svelte.d.ts

@@ -1,4 +1,4 @@
-import type TextNode from '../../models/chapter/TextNode';
+import type TextNode from '../../models/chapter/TextNode.js';
 interface Props {
     node: TextNode;
     placeholder?: string | undefined;