bookish-press 0.7.1 → 0.8.2

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

@@ -1,22 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        url: string;
-        alt: string;
-        chapterID: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type MediaPreviewProps = typeof __propDef.props;
-export type MediaPreviewEvents = typeof __propDef.events;
-export type MediaPreviewSlots = typeof __propDef.slots;
-export default class MediaPreview extends SvelteComponent<MediaPreviewProps, MediaPreviewEvents, MediaPreviewSlots> {
+interface Props {
+    url: string;
+    alt: string;
+    chapterID: string | undefined;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const MediaPreview: import("svelte").Component<Props, {}, "">;
+type MediaPreview = ReturnType<typeof MediaPreview>;
+export default MediaPreview;

package/dist/components/page/Muted.svelte

@@ -1,4 +1,7 @@
-<span class="muted"><slot /></span>
+<script lang="ts">let { children } = $props();
+</script>
+
+<span class="muted">{@render children?.()}</span>
 
 <style>
     /* TYPOGRAPHY */

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

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  MutedProps */
-/** @typedef {typeof __propDef.events}  MutedEvents */
-/** @typedef {typeof __propDef.slots}  MutedSlots */
-export default class Muted extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export type MutedProps = typeof __propDef.props;
-export type MutedEvents = typeof __propDef.events;
-export type MutedSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Muted: import("svelte").Component<Props, {}, "">;
+type Muted = ReturnType<typeof Muted>;
+export default Muted;

package/dist/components/page/Outline.svelte

@@ -1,118 +1,96 @@
-<script>import { isMobile } from '../../util/isMobile';
-import { onMount } from 'svelte';
-import Link from '../Link.svelte';
-import { getBase, getDarkMode } from './Contexts';
-import DarkToggle from '../controls/DarkToggle.svelte';
-export let previous;
-export let next;
-export let collapse = false;
-export let listener = undefined;
+<script lang="ts">import { isMobile } from "../../util/isMobile";
+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 headerString = null;
-let headerIndex = -1;
-let expanded = false;
+let headerIndex = $state(-1);
+let expanded = $state(false);
 let dark = getDarkMode();
 let base = getBase();
-let outline = null;
-let headers = [];
+let outline = $state(null);
+let headers = $state([]);
 function toggleExpanded() {
-    // Don't toggle when in margin mode.
-    if (!isMobile())
-        return;
-    const newExpanded = !expanded;
-    // Toggle expanded state
-    expanded = newExpanded;
-    if (listener)
-        listener(newExpanded, layout);
+  if (!isMobile()) return;
+  const newExpanded = !expanded;
+  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() {
-    // 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;
+  headers = Array.from(document.getElementsByClassName("page-header"));
+  let newHeaderString = headers.reduce(
+    (sum, el) => sum + el.outerHTML,
+    ""
+  );
+  if (headerString !== newHeaderString) headerString = newHeaderString;
 }
 function getHighlightThreshold() {
-    return window.innerHeight / 3;
+  return window.innerHeight / 3;
 }
 function position() {
-    // 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');
-        }
-        // If not, set the position of the outline.
-        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');
-            }
-            // Otherwise, anchor it to the title position.
-            else {
-                outline.classList.remove('outline-fixed-left');
-                outline.classList.add('outline-title-left');
-            }
-            // Tell any listeners about the repositioning.
-            if (listener)
-                listener(false, layout);
-        }
+  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);
     }
+  }
 }
 function highlight() {
-    const top = window.scrollY;
-    const threshold = getHighlightThreshold();
-    // Find the header that we're past so we can update the outline.
-    let indexOfNearestHeaderAbove = -1; // -1 represents the title
-    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;
+  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;
 }
 onMount(() => {
-    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);
-    };
+  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);
+  };
 });
-let previousLabel = '\u25C0\uFE0E';
-let nextLabel = '\u25B6\uFE0E';
-let expandLabel = '\u2630';
+let previousLabel = "\u25C0\uFE0E";
+let nextLabel = "\u25B6\uFE0E";
+let expandLabel = "\u2630";
 </script>
 
 <nav
@@ -130,8 +108,8 @@ let expandLabel = '\u2630';
                 ? 'Collapse navigation menu'
                 : 'Expand navigation menu'}
             tabindex="0"
-            on:click={headers.length > 0 ? toggleExpanded : undefined}
-            on:keydown={(event) => {
+            onclick={headers.length > 0 ? toggleExpanded : undefined}
+            onkeydown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ')
                     toggleExpanded();
             }}
@@ -324,6 +302,7 @@ let expandLabel = '\u2630';
     /* Desktop */
     @media screen and (min-width: 1200px) {
         .outline {
+            --outline-width: min(12em, calc((100vw - 740px) / 2 - 3 * var(--outline-padding)));
             width: var(--outline-width);
             z-index: 0; /* Put it below everything when it's in the margin. */
             border-right: 1px solid var(--bookish-border-color-light);

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

@@ -1,21 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        previous: string | null;
-        next: string | null;
-        collapse?: boolean;
-        listener?: ((expanded: boolean, layout: Function) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type OutlineProps = typeof __propDef.props;
-export type OutlineEvents = typeof __propDef.events;
-export type OutlineSlots = typeof __propDef.slots;
-export default class Outline extends SvelteComponent<OutlineProps, OutlineEvents, OutlineSlots> {
+interface Props {
+    previous: string | null;
+    next: string | null;
+    collapse?: boolean;
+    listener?: ((expanded: boolean, layout: Function) => void) | undefined;
 }
-export {};
+declare const Outline: import("svelte").Component<Props, {}, "">;
+type Outline = ReturnType<typeof Outline>;
+export default Outline;

package/dist/components/page/Page.svelte

@@ -1,55 +1,47 @@
-<script>import { onMount } from 'svelte';
-import Loading from './Loading.svelte';
-export let title;
-export let afterLoaded = undefined;
-let fontsLoaded = false;
-let imagesLoaded = false;
+<script lang="ts">import { onMount } from "svelte";
+import Loading from "./Loading.svelte";
+let { title = void 0, afterLoaded = void 0, children } = $props();
+let fontsLoaded = $state(false);
+let imagesLoaded = $state(false);
 let lastHeight = 0;
 let intervalID = null;
 let mountTime = Date.now();
-$: loaded = fontsLoaded && imagesLoaded;
+let loaded = $derived(fontsLoaded && imagesLoaded);
 function watchLoading() {
-    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 > 2000) {
-        // 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;
+  const bodyHeight = document.body.clientHeight;
+  if (lastHeight === bodyHeight && imagesAreLoaded() || Date.now() - mountTime > 2e3) {
+    stopWatching();
+    imagesLoaded = true;
+    if (afterLoaded) afterLoaded();
+  }
+  lastHeight = bodyHeight;
 }
 function stopWatching() {
-    if (intervalID)
-        clearInterval(intervalID);
+  if (intervalID) clearInterval(intervalID);
 }
 onMount(() => {
-    // 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();
+  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>
 
 <svelte:head>
-    <title>{title}</title>
-    <meta name="description" content={title} />
+    {#if title !== undefined}
+        <title>{title}</title>
+        <meta name="description" content={title} />
+    {/if}
 </svelte:head>
 
 <section class={'bookish-page' + (imagesLoaded ? ' loaded' : '')}>
-    <slot />
+    {@render children?.()}
 </section>
 <!-- Overlay loading feedback if loading, but still render the page. -->
 {#if loaded === false}

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

@@ -1,21 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        title: string;
-        afterLoaded?: Function | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PageProps = typeof __propDef.props;
-export type PageEvents = typeof __propDef.events;
-export type PageSlots = typeof __propDef.slots;
-export default class Page extends SvelteComponent<PageProps, PageEvents, PageSlots> {
+interface Props {
+    title?: string | undefined;
+    afterLoaded?: Function | undefined;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Page: import("svelte").Component<Props, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/components/page/PageHeader.svelte

@@ -1,7 +1,7 @@
-<script>export let id = null;
+<script lang="ts">let { id = null, children } = $props();
 </script>
 
-<h2 class="page-header" {id}><slot /></h2>
+<h2 class="page-header" {id}>{@render children?.()}</h2>
 
 <style>
     h2 {

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

@@ -1,20 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PageHeaderProps = typeof __propDef.props;
-export type PageHeaderEvents = typeof __propDef.events;
-export type PageHeaderSlots = typeof __propDef.slots;
-export default class PageHeader extends SvelteComponent<PageHeaderProps, PageHeaderEvents, PageHeaderSlots> {
+interface Props {
+    id?: string | null;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/page/PageParagraph.svelte

@@ -1,4 +1,7 @@
-<p><slot /></p>
+<script lang="ts">let { children } = $props();
+</script>
+
+<p>{@render children?.()}</p>
 
 <style>
     p {

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

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  PageParagraphProps */
-/** @typedef {typeof __propDef.events}  PageParagraphEvents */
-/** @typedef {typeof __propDef.slots}  PageParagraphSlots */
-export default class PageParagraph extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export type PageParagraphProps = typeof __propDef.props;
-export type PageParagraphEvents = typeof __propDef.events;
-export type PageParagraphSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const PageParagraph: import("svelte").Component<Props, {}, "">;
+type PageParagraph = ReturnType<typeof PageParagraph>;
+export default PageParagraph;

package/dist/components/page/PossibleChapter.svelte

@@ -1,10 +1,10 @@
-<script>import Chapter from './Chapter.svelte';
-import { page } from '$app/stores';
-import { getEdition } from './Contexts';
-import Unknown from './Unknown.svelte';
-$: edition = getEdition();
-$: chapterID = $page.params.chapterid;
-$: chapter = $edition?.getChapter(chapterID);
+<script lang="ts">import Chapter from "./Chapter.svelte";
+import { page } from "$app/state";
+import { getEdition } from "./Contexts";
+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));
 </script>
 
 {#if chapter}

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

@@ -1,16 +1,3 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PossibleChapterProps = typeof __propDef.props;
-export type PossibleChapterEvents = typeof __propDef.events;
-export type PossibleChapterSlots = typeof __propDef.slots;
-export default class PossibleChapter extends SvelteComponent<PossibleChapterProps, PossibleChapterEvents, PossibleChapterSlots> {
-}
-export {};
+declare const PossibleChapter: import("svelte").Component<Record<string, never>, {}, "">;
+type PossibleChapter = ReturnType<typeof PossibleChapter>;
+export default PossibleChapter;

package/dist/components/page/PossibleReference.svelte

@@ -1,8 +1,7 @@
-<script>import FormatNode from '../../models/chapter/FormatNode';
-import Format from '../chapter/Format.svelte';
-import Reference from './Reference.svelte';
-export let node;
-export let edit;
+<script lang="ts">import FormatNode from "../../models/chapter/FormatNode";
+import Format from "../chapter/Format.svelte";
+import Reference from "./Reference.svelte";
+let { node, edit } = $props();
 </script>
 
 {#if node instanceof FormatNode}

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

@@ -1,21 +1,9 @@
-import { SvelteComponent } from "svelte";
 import FormatNode from '../../models/chapter/FormatNode';
 import type Ref from '../../models/book/Reference';
-declare const __propDef: {
-    props: {
-        node: FormatNode | Ref;
-        edit: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PossibleReferenceProps = typeof __propDef.props;
-export type PossibleReferenceEvents = typeof __propDef.events;
-export type PossibleReferenceSlots = typeof __propDef.slots;
-export default class PossibleReference extends SvelteComponent<PossibleReferenceProps, PossibleReferenceEvents, PossibleReferenceSlots> {
+interface Props {
+    node: FormatNode | Ref;
+    edit: boolean;
 }
-export {};
+declare const PossibleReference: import("svelte").Component<Props, {}, "">;
+type PossibleReference = ReturnType<typeof PossibleReference>;
+export default PossibleReference;

package/dist/components/page/Print.svelte

@@ -1,8 +1,21 @@
-<script>import Chapter from './Chapter.svelte';
-import { getEdition } from './Contexts';
+<script lang="ts">import Chapter from "./Chapter.svelte";
+import { getEdition } from "./Contexts";
+import Parser from "../../models/chapter/Parser";
 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);
 </script>
 
+<svelte:head>
+    {#if title}<title>{title}</title>{/if}
+</svelte:head>
+
 {#if $edition}
     {#each $edition
         .getChapters()
@@ -16,6 +29,9 @@ let edition = getEdition();
         :global(.bookish-chapter-header) {
             break-before: page;
         }
+        :global(.bookish-page:first-of-type .bookish-chapter-header) {
+            break-before: auto;
+        }
 
         :global(body) {
             font-size: 16pt;