bookish-press 0.7.4 → 0.8.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/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;

package/dist/components/page/Edition.svelte

@@ -1,83 +1,69 @@
-<script>import smoothscroll from 'smoothscroll-polyfill';
-import { goto } from '$app/navigation';
-import { onMount, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { BASE, DARK_MODE, getBook, } from './Contexts';
-import { BookishTheme } from '../../models/book/Theme';
-import { isDark, setDark } from '../../util/dark';
-import { page } from '$app/stores';
-import Title from './Title.svelte';
-import Page from './Page.svelte';
-// Poly fill smooth scrolling for Safari.
+<script lang="ts">import smoothscroll from "smoothscroll-polyfill";
+import { goto } from "$app/navigation";
+import { onMount, setContext, untrack } from "svelte";
+import { writable } from "svelte/store";
+import {
+  BASE,
+  DARK_MODE,
+  getBook
+} from "./Contexts";
+import { BookishTheme } from "../../models/book/Theme";
+import { isDark, setDark } from "../../util/dark";
+import { page } from "$app/state";
+import Title from "./Title.svelte";
+import Page from "./Page.svelte";
+import Parser from "../../models/chapter/Parser";
+import EmbedNode from "../../models/chapter/EmbedNode";
 onMount(() => smoothscroll.polyfill());
-// The book and edition to render
-export let edition;
-// The base path allows links to adjust to different routing contexts in which a book is placed.
-// For example, when the book is hosted alone, all routes might start with the bare root "/",
-// but when the book is being viewed or edited in the Bookish app, it needs a prefix for the
-// route in the app.
-export let base = '';
+let { edition, base = "", children } = $props();
+let coverURL = $derived.by(() => {
+  const cover = edition?.getImage("cover");
+  if (!cover) return void 0;
+  const node = Parser.parseEmbed(edition, cover);
+  const url = node instanceof EmbedNode ? node.getURL() : void 0;
+  if (!url || url.length === 0) return void 0;
+  return url.startsWith("http") ? url : `${base}/images/${url}`;
+});
 let book = getBook();
-// When the base changes, update the context.
-let baseStore = writable(base);
-$: setContext(BASE, baseStore);
-$: baseStore.set(base);
-// Default dark mode to whatever's stored in local storage, if anything.
-// respect user choice on the website despite the system theme
+let baseStore = writable(untrack(() => base));
+setContext(BASE, baseStore);
+$effect.pre(() => {
+  baseStore.set(base);
+});
 let darkMode = writable(isDark());
-// Expose dark mode to descendants
 setContext(DARK_MODE, darkMode);
-// When dark mode changes, update the body's class list.
-$: {
-    setDark($darkMode);
-    // Set the theme, whatever it is, and change it when the edition changes
-    setTheme(edition?.getTheme() ?? BookishTheme);
-}
-// The CSS to set on the edition.
-let themeCSS;
-// Set the theme on mount.
-onMount(() => {
-    setTheme(edition?.getTheme() ?? BookishTheme);
+let themeCSS = $derived(
+  themeToCSS(edition?.getTheme() ?? BookishTheme)
+);
+$effect.pre(() => {
+  setDark($darkMode);
 });
-// Redirect old hash routes by simply replacing their hash before routing.
-if (typeof window !== 'undefined' && window.location.hash.startsWith('#/'))
-    goto(location.hash.replace('#', ''));
-/** Given a theme, sets the appropriate CSS rules in the browser to apply the theme. */
-function setTheme(theme) {
-    if (theme === null)
-        theme = BookishTheme;
-    themeCSS = `
-            ${(theme.imports ?? [])
-        .map((url) => `@import url(${url});`)
-        .join('\n')}
+if (typeof window !== "undefined" && window.location.hash.startsWith("#/"))
+  goto(location.hash.replace("#", ""));
+function themeToCSS(theme) {
+  if (theme === null) theme = BookishTheme;
+  return `
+            ${(theme.imports ?? []).map((url) => `@import url(${url});`).join("\n")}
             .bookish {
-                ${theme.light ? toRules(theme.light) : ''}
-                ${theme.fonts ? toRules(theme.fonts) : ''}
-                ${theme.sizes ? toRules(theme.sizes) : ''}
-                ${theme.weights ? toRules(theme.weights) : ''}
-                ${theme.spacing ? toRules(theme.spacing) : ''}
+                ${theme.light ? toRules(theme.light) : ""}
+                ${theme.fonts ? toRules(theme.fonts) : ""}
+                ${theme.sizes ? toRules(theme.sizes) : ""}
+                ${theme.weights ? toRules(theme.weights) : ""}
+                ${theme.spacing ? toRules(theme.spacing) : ""}
             }
             .dark {
-                ${theme.dark ? toRules(theme.dark) : ''}
+                ${theme.dark ? toRules(theme.dark) : ""}
             }
         `;
 }
 function toRules(set) {
-    return Object.keys(set)
-        .map((name) => {
-        const value = set[name];
-        if (value.length > 0) {
-            const cssVariable = '--bookish-' +
-                name
-                    .replace(/([a-z])([A-Z])/g, '$1 $2')
-                    .split(' ')
-                    .map((s) => s.toLowerCase())
-                    .join('-')
-                    .replace(/([0-9])/g, '-$1-');
-            return `${cssVariable}: ${value};`;
-        }
-    })
-        .join('\n\t\t');
+  return Object.keys(set).map((name) => {
+    const value = set[name];
+    if (value.length > 0) {
+      const cssVariable = "--bookish-" + name.replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map((s) => s.toLowerCase()).join("-").replace(/([0-9])/g, "-$1-");
+      return `${cssVariable}: ${value};`;
+    }
+  }).join("\n		");
 }
 </script>
 
@@ -87,7 +73,7 @@ function toRules(set) {
 
     {#if edition}
         <meta property="og:title" content={edition.getTitle()} />
-        <meta property="og:image" content={edition.getImage('cover')} />
+        {#if coverURL}<meta property="og:image" content={coverURL} />{/if}
         <meta property="og:description" content={edition.getDescription()} />
         <meta property="og:type" content="book" />
         <meta property="og:author" content={edition.getAuthorsText()} />
@@ -95,7 +81,7 @@ function toRules(set) {
             property="og:url"
             content={edition.base ??
                 `https://bookish.press/${
-                    $book && $book.domain ? $book.domain : $page.params.bookid
+                    $book && $book.domain ? $book.domain : page.params.bookid
                 }`}
         />
     {/if}
@@ -103,7 +89,7 @@ function toRules(set) {
 
 <main class="bookish {$darkMode ? ' dark' : ''}">
     {#if edition}
-        <slot />
+        {@render children?.()}
         <!-- No edition to render? Coming soon. -->
     {:else if $book}
         <Page title={$book.title}>

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

@@ -1,22 +1,9 @@
-import { SvelteComponent } from "svelte";
 import type EditionModel from '../../models/book/Edition';
-declare const __propDef: {
-    props: {
-        edition: EditionModel | undefined;
-        base?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EditionProps = typeof __propDef.props;
-export type EditionEvents = typeof __propDef.events;
-export type EditionSlots = typeof __propDef.slots;
-export default class Edition extends SvelteComponent<EditionProps, EditionEvents, EditionSlots> {
+interface Props {
+    edition: EditionModel | undefined;
+    base?: string;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Edition: import("svelte").Component<Props, {}, "">;
+type Edition = ReturnType<typeof Edition>;
+export default Edition;