bookish-press 0.7.4 → 0.9.2

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

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

package/dist/components/page/Contexts.js

@@ -4,7 +4,7 @@
 // as the resulting value is coerced to Type even if it's not that value.
 import { getContext } from 'svelte';
 import { get } from 'svelte/store';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { updateLock } from '../../models/CRUD';
 export const DARK_MODE = Symbol('dark');
 export function getDarkMode() {
@@ -47,7 +47,7 @@ export function setChapter(store, previous, revised) {
         store.set(edition.withRevisedChapter(previous, revised));
 }
 function isRouteWrite() {
-    return get(page).route.id?.startsWith('/(app)/write') ?? false;
+    return page.route.id?.startsWith('/(app)/write') ?? false;
 }
 export function isChapterEditable() {
     if (!isRouteWrite())

package/dist/components/page/DefinitionView.svelte

@@ -1,59 +1,66 @@
-<script>import Parser from '../../models/chapter/Parser';
-import ConfirmButton from '../editor/ConfirmButton.svelte';
-import TextEditor from '../editor/TextEditor.svelte';
-import BookishEditor from '../editor/BookishEditor.svelte';
-import Format from '../chapter/Format.svelte';
-import Note from '../editor/Note.svelte';
-import { afterUpdate } from 'svelte';
-import { getUser, getEdition, getLeasee, isChapterEditable, lease, isEditionEditable, } from './Contexts';
-import Button from '../app/Button.svelte';
-export let id;
-export let definition;
+<script lang="ts">import Parser from "../../models/chapter/Parser";
+import ConfirmButton from "../editor/ConfirmButton.svelte";
+import TextEditor from "../editor/TextEditor.svelte";
+import BookishEditor from "../editor/BookishEditor.svelte";
+import Format from "../chapter/Format.svelte";
+import Note from "../editor/Note.svelte";
+import {
+  getUser,
+  getEdition,
+  getLeasee,
+  isChapterEditable,
+  lease,
+  isEditionEditable
+} from "./Contexts";
+import Button from "../app/Button.svelte";
+let { id, definition } = $props();
 let auth = getUser();
 let edition = getEdition();
 let editable = isEditionEditable();
-// Focus after adding a new synonym.
 let newSynonym = false;
-let synonymsEditor = null;
-afterUpdate(() => {
-    if (newSynonym && synonymsEditor) {
-        const editors = synonymsEditor.querySelectorAll('input');
-        if (editors.length > 0) {
-            const last = editors[editors.length - 1];
-            if (last instanceof HTMLElement)
-                last.focus();
-        }
-        newSynonym = false;
+let synonymsEditor = $state(null);
+$effect(() => {
+  void definition;
+  if (newSynonym && synonymsEditor) {
+    const editors = synonymsEditor.querySelectorAll("input");
+    if (editors.length > 0) {
+      const last = editors[editors.length - 1];
+      if (last instanceof HTMLElement)
+        setTimeout(() => last.focus(), 0);
     }
+    newSynonym = false;
+  }
 });
 function addSynonym() {
-    if ($edition) {
-        edition.set($edition.withEditedDefinition(id, {
-            phrase: definition.phrase,
-            definition: definition.definition,
-            synonyms: [...(definition.synonyms ?? []), ''],
-        }));
-    }
-    newSynonym = true;
+  if ($edition) {
+    edition.set(
+      $edition.withEditedDefinition(id, {
+        phrase: definition.phrase,
+        definition: definition.definition,
+        synonyms: [...definition.synonyms ?? [], ""]
+      })
+    );
+  }
+  newSynonym = true;
 }
 function removeSynonym(index) {
-    if (definition.synonyms &&
-        index >= 0 &&
-        index < definition.synonyms.length)
-        updateSynonyms([
-            ...definition.synonyms.slice(0, index),
-            ...definition.synonyms.slice(index + 1),
-        ]);
+  if (definition.synonyms && index >= 0 && index < definition.synonyms.length)
+    updateSynonyms([
+      ...definition.synonyms.slice(0, index),
+      ...definition.synonyms.slice(index + 1)
+    ]);
 }
 function updateSynonyms(synonyms) {
-    if ($edition)
-        edition.set($edition.withEditedDefinition(id, {
-            phrase: definition.phrase,
-            definition: definition.definition,
-            synonyms: synonyms,
-        }));
+  if ($edition)
+    edition.set(
+      $edition.withEditedDefinition(id, {
+        phrase: definition.phrase,
+        definition: definition.definition,
+        synonyms
+      })
+    );
 }
-$: syns = definition.synonyms || [];
+let syns = $derived(definition.synonyms || []);
 </script>
 
 {#if $edition}

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type Definition from '../../models/book/Definition';
-declare const __propDef: {
-    props: {
-        id: string;
-        definition: Definition;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DefinitionViewProps = typeof __propDef.props;
-export type DefinitionViewEvents = typeof __propDef.events;
-export type DefinitionViewSlots = typeof __propDef.slots;
-export default class DefinitionView extends SvelteComponent<DefinitionViewProps, DefinitionViewEvents, DefinitionViewSlots> {
+interface Props {
+    id: string;
+    definition: Definition;
 }
-export {};
+declare const DefinitionView: import("svelte").Component<Props, {}, "">;
+type DefinitionView = ReturnType<typeof DefinitionView>;
+export default DefinitionView;

package/dist/components/page/Description.svelte

@@ -1,7 +1,13 @@
-<script>import Parser from '../../models/chapter/Parser';
-import ChapterBody from '../chapter/ChapterBody.svelte';
-import BookishEditor from '../editor/BookishEditor.svelte';
-import { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
+<script lang="ts">import Parser from "../../models/chapter/Parser";
+import ChapterBody from "../chapter/ChapterBody.svelte";
+import BookishEditor from "../editor/BookishEditor.svelte";
+import {
+  getUser,
+  getEdition,
+  getLeasee,
+  isEditionEditable,
+  lease
+} from "./Contexts";
 let auth = getUser();
 let editable = isEditionEditable();
 let edition = getEdition();

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

@@ -1,16 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DescriptionProps = typeof __propDef.props;
-export type DescriptionEvents = typeof __propDef.events;
-export type DescriptionSlots = typeof __propDef.slots;
-export default class Description extends SvelteComponent<DescriptionProps, DescriptionEvents, DescriptionSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Description: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Description = InstanceType<typeof Description>;
+export default Description;

package/dist/components/page/DownloadEPUB.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">import { onDestroy } from "svelte";
+import { getBase, getEdition } from "./Contexts";
+import { buildEPUB } from "../../epub/build";
+import { DEFAULT_SIZE, SIZES } from "../../epub/images";
+let edition = getEdition();
+let base = getBase();
+let sizeID = $state(DEFAULT_SIZE.id);
+let building = $state(false);
+let progress = $state(void 0);
+let error = $state(void 0);
+let warnings = $state([]);
+let url = $state(void 0);
+let filename = $state("book.epub");
+function release() {
+  if (url !== void 0) {
+    URL.revokeObjectURL(url);
+    url = void 0;
+  }
+}
+function chooseSize(id) {
+  sizeID = id;
+  release();
+  warnings = [];
+  error = void 0;
+}
+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;
+  }
+}
+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";
+});
+onDestroy(release);
+</script>
+
+{#if $edition}
+    <div class="epub">
+        <label>
+            Image size
+            <!-- The wrapper carries the disclosure arrow: turning off native
+                 appearance to get the book's font also removes the browser's. -->
+            <span class="select">
+                <select
+                    value={sizeID}
+                    disabled={building}
+                    onchange={(event) => chooseSize(event.currentTarget.value)}
+                >
+                    {#each Object.values(SIZES) as size}
+                        <option value={size.id}>{size.label}</option>
+                    {/each}
+                </select>
+            </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. -->
+        <button
+            type="button"
+            title="Build an EPUB of this book to read on an e-reader"
+            aria-label="Build an EPUB of this book to read on an e-reader"
+            disabled={building}
+            onclick={build}>↓ EPUB</button
+        >
+    </div>
+
+    {#if error}
+        <p class="message error" role="alert">{error}</p>
+    {:else if status}
+        <p class="message" role="status" aria-live="polite">{status}</p>
+    {:else if url}
+        <!-- Rendered only once the blob exists, so this link is never present
+             in prerendered HTML for SvelteKit's crawler to follow. -->
+        <p class="ready">
+            <a href={url} download={filename}>Download {filename}</a>
+        </p>
+        {#if warnings.length > 0}
+            <p class="warnings">
+                {warnings.length}
+                {warnings.length === 1 ? 'image' : 'images'} couldn't be included,
+                usually because they're hosted somewhere that doesn't allow downloads.
+                Their captions are still in the book.
+            </p>
+        {/if}
+    {/if}
+{/if}
+
+<style>
+    /* Everything here is drawn with the book's own --bookish-* variables, which
+       are defined on the .bookish ancestor in Edition.svelte and so are in
+       scope in both the app and in books compiled by bookish-reader. The
+       --app-* chrome variables are not: they exist only in the (app) layout. */
+
+    .epub {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.5em;
+        margin-block: var(--bookish-paragraph-spacing);
+    }
+
+    label {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5em;
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-small-font-size);
+        color: var(--bookish-muted-color);
+    }
+
+    .select {
+        position: relative;
+        display: inline-block;
+    }
+
+    /* The disclosure arrow, in place of the native one. It inherits the text
+       color, so it follows the theme into dark mode. */
+    .select::after {
+        content: '▾';
+        position: absolute;
+        right: 0.6em;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        font-size: 0.9em;
+        color: var(--bookish-paragraph-color);
+    }
+
+    /* A <select> is a native menulist, and WebKit renders its face in the
+       system font whatever the cascade says until appearance is turned off. */
+    select {
+        appearance: none;
+        -webkit-appearance: none;
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-small-font-size);
+        font-weight: var(--bookish-paragraph-font-weight);
+        color: var(--bookish-paragraph-color);
+        background: var(--bookish-block-background-color);
+        border: 1px solid var(--bookish-border-color-light);
+        border-radius: var(--bookish-roundedness);
+        padding: var(--bookish-inline-padding);
+        padding-right: 2em;
+        max-width: 18em;
+    }
+
+    button {
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-small-font-size);
+        font-weight: var(--bookish-bold-font-weight);
+        color: var(--bookish-link-color);
+        background: var(--bookish-block-background-color);
+        border: 1px solid var(--bookish-border-color-light);
+        border-radius: var(--bookish-roundedness);
+        padding: var(--bookish-inline-padding)
+            calc(var(--bookish-inline-padding) * 3);
+        cursor: pointer;
+    }
+
+    button:hover:not(:disabled) {
+        border-color: var(--bookish-highlight-color);
+    }
+
+    /* focus-visible, so a mouse click doesn't leave the ring behind while
+       keyboard users still get one. */
+    select:focus-visible,
+    button:focus-visible {
+        outline: none;
+        border-color: var(--bookish-highlight-color);
+        box-shadow: 0 0 0 2px var(--bookish-highlight-color);
+    }
+
+    select:disabled,
+    button:disabled {
+        opacity: 0.5;
+        cursor: auto;
+    }
+
+    .message,
+    .ready,
+    .warnings {
+        font-family: var(--bookish-paragraph-font-family);
+        line-height: var(--bookish-paragraph-line-height);
+    }
+
+    .message {
+        color: var(--bookish-muted-color);
+    }
+
+    .error {
+        color: var(--bookish-error-color);
+    }
+
+    /* Matches a book link, from components/Link.svelte. */
+    .ready a {
+        color: var(--bookish-link-color);
+        font-weight: var(--bookish-link-font-weight);
+        text-decoration: none;
+    }
+
+    .ready a:hover {
+        text-decoration: underline;
+    }
+
+    .warnings {
+        font-size: var(--bookish-small-font-size);
+        font-style: italic;
+        color: var(--bookish-muted-color);
+    }
+</style>

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

@@ -0,0 +1,3 @@
+declare const DownloadEPUB: import("svelte").Component<Record<string, never>, {}, "">;
+type DownloadEPUB = ReturnType<typeof DownloadEPUB>;
+export default DownloadEPUB;

package/dist/components/page/EditableHeader.svelte

@@ -1,9 +1,7 @@
-<script>import TextEditor from '../editor/TextEditor.svelte';
-import { getEdition, isEditionEditable } from './Contexts';
-import PageHeader from './PageHeader.svelte';
-export let id;
-/** ARIA label */
-export let label;
+<script lang="ts">import TextEditor from "../editor/TextEditor.svelte";
+import { getEdition, isEditionEditable } from "./Contexts";
+import PageHeader from "./PageHeader.svelte";
+let { id, label } = $props();
 let edition = getEdition();
 let editable = isEditionEditable();
 </script>

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

@@ -1,20 +1,9 @@
-import { SvelteComponent } from "svelte";
 import type { TOCHeaderKey } from '../../models/book/ChapterID';
-declare const __propDef: {
-    props: {
-        id: TOCHeaderKey;
-        /** ARIA label */ label: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EditableHeaderProps = typeof __propDef.props;
-export type EditableHeaderEvents = typeof __propDef.events;
-export type EditableHeaderSlots = typeof __propDef.slots;
-export default class EditableHeader extends SvelteComponent<EditableHeaderProps, EditableHeaderEvents, EditableHeaderSlots> {
+interface Props {
+    id: TOCHeaderKey;
+    /** ARIA label */
+    label: string;
 }
-export {};
+declare const EditableHeader: import("svelte").Component<Props, {}, "">;
+type EditableHeader = ReturnType<typeof EditableHeader>;
+export default EditableHeader;