bookish-press 0.7.4 → 0.9.2

package/dist/components/page/ThemeEditor.svelte

@@ -1,35 +1,40 @@
-<script>import Header from './Header.svelte';
-import Outline from './Outline.svelte';
-import Page from './Page.svelte';
-import { BookishTheme, CriticalTheme, HumanTheme, SeriousTheme, SketchyTheme, TechTheme, } from '../../models/book/Theme';
-import ConfirmButton from '../editor/ConfirmButton.svelte';
-import Instructions from './Instructions.svelte';
-import ThemeSetEditor from './ThemeSetEditor.svelte';
-import ThemeEditorPreview from './ThemeEditorPreview.svelte';
-import { getEdition, isEditionEditable } from './Contexts';
-import TextEditor from '../editor/TextEditor.svelte';
-import Button from '../app/Button.svelte';
-import Switch from '../editor/Switch.svelte';
-import Link from '../app/Link.svelte';
-import Rows from './Rows.svelte';
+<script lang="ts">import Header from "./Header.svelte";
+import Outline from "./Outline.svelte";
+import Page from "./Page.svelte";
+import {
+  BookishTheme,
+  CriticalTheme,
+  HumanTheme,
+  SeriousTheme,
+  SketchyTheme,
+  TechTheme
+} from "../../models/book/Theme";
+import ConfirmButton from "../editor/ConfirmButton.svelte";
+import Instructions from "./Instructions.svelte";
+import ThemeSetEditor from "./ThemeSetEditor.svelte";
+import ThemeEditorPreview from "./ThemeEditorPreview.svelte";
+import { getEdition, isEditionEditable } from "./Contexts";
+import TextEditor from "../editor/TextEditor.svelte";
+import Button from "../app/Button.svelte";
+import Switch from "../editor/Switch.svelte";
+import Link from "../app/Link.svelte";
+import Rows from "./Rows.svelte";
 const themes = {
-    Bookish: BookishTheme,
-    Serious: SeriousTheme,
-    Tech: TechTheme,
-    Human: HumanTheme,
-    Sketchy: SketchyTheme,
-    Critical: CriticalTheme,
+  Bookish: BookishTheme,
+  Serious: SeriousTheme,
+  Tech: TechTheme,
+  Human: HumanTheme,
+  Sketchy: SketchyTheme,
+  Critical: CriticalTheme
 };
 let editable = isEditionEditable();
 let edition = getEdition();
-$: theme = $edition ? $edition.getTheme() : null;
-$: isDefault =
-    theme === null || Object.values(themes).includes(theme);
+let theme = $derived($edition ? $edition.getTheme() : null);
+let isDefault = $derived(theme === null || Object.values(themes).includes(theme));
 function getEmptyGroup(group) {
-    const empty = {};
-    for (const key in Object.keys(group))
-        empty[key] = '';
-    return empty;
+  const empty = {};
+  for (const key in Object.keys(group)) empty[key] = "";
+  return empty;
 }
 </script>
 
@@ -41,7 +46,9 @@ function getEmptyGroup(group) {
             id="theme"
             header="Theme"
         >
-            <Outline slot="outline" previous={null} next={null} />
+            {#snippet outline()}
+                        <Outline  previous={null} next={null} />
+                    {/snippet}
         </Header>
 
         <Instructions {editable}>

package/dist/components/page/ThemeEditor.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 ThemeEditorProps = typeof __propDef.props;
-export type ThemeEditorEvents = typeof __propDef.events;
-export type ThemeEditorSlots = typeof __propDef.slots;
-export default class ThemeEditor extends SvelteComponent<ThemeEditorProps, ThemeEditorEvents, ThemeEditorSlots> {
-}
-export {};
+declare const ThemeEditor: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeEditor = ReturnType<typeof ThemeEditor>;
+export default ThemeEditor;

package/dist/components/page/ThemeEditorPreview.svelte

@@ -1,16 +1,13 @@
-<script>import ChapterBody from '../chapter/ChapterBody.svelte';
-import Parser from '../../models/chapter/Parser';
-import { getDarkMode } from './Contexts';
-export let theme;
-let position;
+<script lang="ts">import ChapterBody from "../chapter/ChapterBody.svelte";
+import Parser from "../../models/chapter/Parser";
+import { getDarkMode } from "./Contexts";
+let { theme } = $props();
+let position = $state(0);
 let darkMode = getDarkMode();
-$: backgroundColor =
-    theme === null
-        ? null
-        : $darkMode
-            ? theme.dark?.backgroundColor
-            : theme.light?.backgroundColor;
-$: preview = Parser.parseChapter(undefined, `# Header 1
+let backgroundColor = $derived(theme === null ? null : $darkMode ? theme.dark?.backgroundColor : theme.light?.backgroundColor);
+let preview = $derived(Parser.parseChapter(
+  void 0,
+  `# Header 1
 		## Header 2
 		### Header 3
 		
@@ -18,7 +15,8 @@ $: preview = Parser.parseChapter(undefined, `# Header 1
 
 		* How does it look?
 		* Would you change anything?
-	`);
+	`
+));
 </script>
 
 <aside

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type Theme from '../../models/book/Theme';
-declare const __propDef: {
-    props: {
-        theme: Theme | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ThemeEditorPreviewProps = typeof __propDef.props;
-export type ThemeEditorPreviewEvents = typeof __propDef.events;
-export type ThemeEditorPreviewSlots = typeof __propDef.slots;
-export default class ThemeEditorPreview extends SvelteComponent<ThemeEditorPreviewProps, ThemeEditorPreviewEvents, ThemeEditorPreviewSlots> {
+interface Props {
+    theme: Theme | null;
 }
-export {};
+declare const ThemeEditorPreview: import("svelte").Component<Props, {}, "">;
+type ThemeEditorPreview = ReturnType<typeof ThemeEditorPreview>;
+export default ThemeEditorPreview;

package/dist/components/page/ThemeSetEditor.svelte

@@ -1,9 +1,7 @@
-<script>import PageHeader from './PageHeader.svelte';
-import Rows from './Rows.svelte';
-import ThemeVariableEditor from './ThemeVariableEditor.svelte';
-export let header;
-export let group;
-export let properties;
+<script lang="ts">import PageHeader from "./PageHeader.svelte";
+import Rows from "./Rows.svelte";
+import ThemeVariableEditor from "./ThemeVariableEditor.svelte";
+let { header, group, properties } = $props();
 </script>
 
 <PageHeader>{header}</PageHeader>

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        header: string;
-        group: string;
-        properties: Record<string, string>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ThemeSetEditorProps = typeof __propDef.props;
-export type ThemeSetEditorEvents = typeof __propDef.events;
-export type ThemeSetEditorSlots = typeof __propDef.slots;
-export default class ThemeSetEditor extends SvelteComponent<ThemeSetEditorProps, ThemeSetEditorEvents, ThemeSetEditorSlots> {
+interface Props {
+    header: string;
+    group: string;
+    properties: Record<string, string>;
 }
-export {};
+declare const ThemeSetEditor: import("svelte").Component<Props, {}, "">;
+type ThemeSetEditor = ReturnType<typeof ThemeSetEditor>;
+export default ThemeSetEditor;

package/dist/components/page/ThemeVariableEditor.svelte

@@ -1,16 +1,14 @@
-<script>import TextEditor from '../editor/TextEditor.svelte';
-import { getEdition } from './Contexts';
+<script lang="ts">import TextEditor from "../editor/TextEditor.svelte";
+import { getEdition } from "./Contexts";
 const placeholders = {
-    light: 'CSS color',
-    dark: 'CSS color',
-    fonts: 'CSS font name',
-    sizes: 'CSS font size',
-    weights: 'CSS font weights',
-    spacing: 'CSS length',
+  light: "CSS color",
+  dark: "CSS color",
+  fonts: "CSS font name",
+  sizes: "CSS font size",
+  weights: "CSS font weights",
+  spacing: "CSS length"
 };
-export let group;
-export let name;
-export let value;
+let { group, name, value } = $props();
 let edition = getEdition();
 </script>
 

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        group: string;
-        name: string;
-        value: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ThemeVariableEditorProps = typeof __propDef.props;
-export type ThemeVariableEditorEvents = typeof __propDef.events;
-export type ThemeVariableEditorSlots = typeof __propDef.slots;
-export default class ThemeVariableEditor extends SvelteComponent<ThemeVariableEditorProps, ThemeVariableEditorEvents, ThemeVariableEditorSlots> {
+interface Props {
+    group: string;
+    name: string;
+    value: string;
 }
-export {};
+declare const ThemeVariableEditor: import("svelte").Component<Props, {}, "">;
+type ThemeVariableEditor = ReturnType<typeof ThemeVariableEditor>;
+export default ThemeVariableEditor;

package/dist/components/page/Title.svelte

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

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

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  TitleProps */
-/** @typedef {typeof __propDef.events}  TitleEvents */
-/** @typedef {typeof __propDef.slots}  TitleSlots */
-export default class Title extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export type TitleProps = typeof __propDef.props;
-export type TitleEvents = typeof __propDef.events;
-export type TitleSlots = 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 Title: import("svelte").Component<Props, {}, "">;
+type Title = ReturnType<typeof Title>;
+export default Title;

package/dist/components/page/Unknown.svelte

@@ -1,9 +1,10 @@
-<script>import Header from './Header.svelte';
-import Outline from './Outline.svelte';
-import Page from './Page.svelte';
-import Instructions from './Instructions.svelte';
-import ChapterIDs from '../../models/book/ChapterID';
-import { getEdition, isEditionEditable } from './Contexts';
+<script lang="ts">import Header from "./Header.svelte";
+import Outline from "./Outline.svelte";
+import Page from "./Page.svelte";
+import Instructions from "./Instructions.svelte";
+import ChapterIDs from "../../models/book/ChapterID";
+import { getEdition, isEditionEditable } from "./Contexts";
+let { children } = $props();
 let editable = isEditionEditable();
 let edition = getEdition();
 </script>
@@ -23,7 +24,9 @@ let edition = getEdition();
                     : undefined}
             header={$edition.getHeader(ChapterIDs.UnknownID)}
         >
-            <Outline slot="outline" previous={null} next={null} />
+            {#snippet outline()}
+                        <Outline  previous={null} next={null} />
+                    {/snippet}
         </Header>
 
         <Instructions {editable}>
@@ -31,6 +34,6 @@ let edition = getEdition();
             doesn't exist. You can customize the image shown.
         </Instructions>
 
-        <slot />
+        {@render children?.()}
     </Page>
 {/if}

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

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type UnknownProps = typeof __propDef.props;
-export type UnknownEvents = typeof __propDef.events;
-export type UnknownSlots = typeof __propDef.slots;
-export default class Unknown extends SvelteComponent<UnknownProps, UnknownEvents, UnknownSlots> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Unknown: import("svelte").Component<Props, {}, "">;
+type Unknown = ReturnType<typeof Unknown>;
+export default Unknown;

package/dist/epub/build.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Builds a complete EPUB from a loaded edition, entirely in the browser.
+ *
+ * No server is involved: the whole book's text is already in memory by the time
+ * the table of contents renders, and images are fetched directly (Firebase's
+ * download URLs allow cross-origin reads, and compiled books serve theirs from
+ * the same origin).
+ */
+import type Edition from '../models/book/Edition';
+import { type ImageSize } from './images';
+import { chapterPath } from './xhtml';
+export type BuildPhase = 'images' | 'chapters' | 'packaging';
+export type BuildProgress = {
+    phase: BuildPhase;
+    done: number;
+    total: number;
+};
+export type BuildResult = {
+    blob: Blob;
+    filename: string;
+    /** Images that couldn't be included, so the reader knows what's missing. */
+    warnings: string[];
+};
+export type BuildOptions = {
+    /** The book's base path, for resolving local image URLs. */
+    base?: string;
+    size?: ImageSize;
+    onProgress?: (progress: BuildProgress) => void;
+    /** Fixed timestamp, so tests can compare output. */
+    modified?: Date;
+};
+/**
+ * A stable, unique identifier for this edition. EPUB requires one, and readers
+ * use it to recognize the same book across downloads.
+ */
+export declare function identifierFor(edition: Edition): string;
+/** Build an EPUB for the given edition. */
+export declare function buildEPUB(edition: Edition, options?: BuildOptions): Promise<BuildResult>;
+export { chapterPath };

package/dist/epub/build.js

@@ -0,0 +1,143 @@
+/**
+ * Builds a complete EPUB from a loaded edition, entirely in the browser.
+ *
+ * No server is involved: the whole book's text is already in memory by the time
+ * the table of contents renders, and images are fetched directly (Firebase's
+ * download URLs allow cross-origin reads, and compiled books serve theirs from
+ * the same origin).
+ */
+import EmbedNode from '../models/chapter/EmbedNode';
+import Parser from '../models/chapter/Parser';
+import Zip from './zip';
+import { DEFAULT_SIZE, mapWithLimit, prepareImage, resolveImageURL, } from './images';
+import { CONTAINER, CONTENT_DIRECTORY, MIMETYPE, STYLESHEET, chapterDocument, coverDocument, glossaryDocument, includedChapters, navigationDocument, ncxDocument, packageDocument, referencesDocument, safeFilename, titleDocument, } from './package';
+import { chapterPath } from './xhtml';
+/** How many images to fetch at once. */
+const IMAGE_CONCURRENCY = 4;
+/**
+ * A stable, unique identifier for this edition. EPUB requires one, and readers
+ * use it to recognize the same book across downloads.
+ */
+export function identifierFor(edition) {
+    const book = edition.getBookRef()?.id;
+    const version = edition.getEditionRef()?.id ?? edition.getEditionNumber();
+    return book === undefined
+        ? `urn:bookish:${safeFilename(edition.getTitle())}:${version}`
+        : `urn:bookish:${book}:${version}`;
+}
+/** Build an EPUB for the given edition. */
+export async function buildEPUB(edition, options = {}) {
+    const { base = '', size = DEFAULT_SIZE, onProgress, modified = new Date(), } = options;
+    const warnings = [];
+    const chapters = includedChapters(edition);
+    // Collect every distinct image the book uses. getEmbeds walks the cover,
+    // each chapter's cover, chapter bodies, and the back matter covers.
+    const coverEmbed = parseCover(edition);
+    const embeds = new Map();
+    if (coverEmbed)
+        embeds.set(coverEmbed.getURL(), coverEmbed);
+    for (const { embed } of edition.getEmbeds())
+        // Videos are links in the package, not files, and an embed with no URL
+        // is an empty placeholder the author hasn't filled in yet.
+        if (!embed.isVideo() && embed.getURL().trim().length > 0)
+            if (!embeds.has(embed.getURL()))
+                embeds.set(embed.getURL(), embed);
+    const urls = [...embeds.keys()];
+    onProgress?.({ phase: 'images', done: 0, total: urls.length });
+    let fetched = 0;
+    const prepared = await mapWithLimit(urls, IMAGE_CONCURRENCY, async (url) => {
+        const image = await prepareImage(resolveImageURL(url, base), size);
+        onProgress?.({
+            phase: 'images',
+            done: ++fetched,
+            total: urls.length,
+        });
+        return { url, image };
+    });
+    // Map each embed URL to its path inside the package.
+    const images = [];
+    const imagePaths = new Map();
+    const coverURL = coverEmbed?.getURL();
+    for (const { url, image } of prepared) {
+        if (image === undefined) {
+            warnings.push(url);
+            continue;
+        }
+        const index = images.length;
+        const path = `images/${index}.${image.extension}`;
+        imagePaths.set(url, path);
+        images.push({
+            path,
+            id: `image-${index}`,
+            mediaType: image.mediaType,
+            bytes: image.bytes,
+            cover: url === coverURL,
+        });
+    }
+    const context = {
+        edition,
+        images: imagePaths,
+        chapters: new Set(chapters.map((chapter) => chapter.getID())),
+    };
+    // Front matter, chapters, then back matter, which is also the reading order.
+    onProgress?.({ phase: 'chapters', done: 0, total: chapters.length });
+    const documents = [];
+    const coverPath = coverURL ? imagePaths.get(coverURL) : undefined;
+    if (coverPath !== undefined)
+        documents.push(coverDocument(coverPath));
+    documents.push(titleDocument(edition, context));
+    let written = 0;
+    for (const chapter of chapters) {
+        const document = chapterDocument(edition, chapter, context);
+        if (document !== undefined)
+            documents.push(document);
+        onProgress?.({
+            phase: 'chapters',
+            done: ++written,
+            total: chapters.length,
+        });
+    }
+    const references = referencesDocument(edition, context);
+    if (references !== undefined)
+        documents.push(references);
+    const glossary = glossaryDocument(edition, context);
+    if (glossary !== undefined)
+        documents.push(glossary);
+    onProgress?.({ phase: 'packaging', done: 0, total: 1 });
+    const navigation = navigationDocument(documents);
+    const identifier = identifierFor(edition);
+    const zip = new Zip(modified);
+    // The mimetype must be first and uncompressed so readers can identify the
+    // file by reading a fixed range of bytes at its head.
+    zip.add('mimetype', MIMETYPE, true);
+    zip.add('META-INF/container.xml', CONTAINER);
+    const content = (path) => `${CONTENT_DIRECTORY}/${path}`;
+    zip.add(content('content.opf'), packageDocument(edition, identifier, documents, images, modified));
+    zip.add(content('toc.ncx'), ncxDocument(identifier, edition.getTitle(), documents));
+    zip.add(content(navigation.path), navigation.content);
+    zip.add(content('style.css'), STYLESHEET);
+    for (const document of documents)
+        zip.add(content(document.path), document.content);
+    // Images are already compressed; deflating them again costs time and saves
+    // nothing, so they are stored.
+    for (const image of images)
+        zip.add(content(image.path), image.bytes, true);
+    const blob = await zip.toBlob(MIMETYPE);
+    onProgress?.({ phase: 'packaging', done: 1, total: 1 });
+    return {
+        blob,
+        filename: `${safeFilename(edition.getTitle())}.epub`,
+        warnings,
+    };
+}
+/** The cover embed, if the edition has one. */
+function parseCover(edition) {
+    const cover = edition.getImage('cover');
+    if (cover === null)
+        return undefined;
+    const node = Parser.parseEmbed(edition, cover);
+    return node instanceof EmbedNode && node.getURL().trim().length > 0
+        ? node
+        : undefined;
+}
+export { chapterPath };

package/dist/epub/build.test.d.ts

@@ -0,0 +1 @@
+export {};