bookish-press 0.7.4 → 0.8.2

package/dist/components/page/Index.svelte

@@ -1,44 +1,42 @@
-<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 Link from '../Link.svelte';
-import { getBase, getEdition, isEditionEditable } from './Contexts';
-import { page } from '$app/stores';
-import Muted from './Muted.svelte';
-import ChapterTitle from './ChapterTitle.svelte';
-import ChapterNumber from './ChapterNumber.svelte';
-import PageHeader from './PageHeader.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 Instructions from "./Instructions.svelte";
+import ChapterIDs from "../../models/book/ChapterID";
+import Link from "../Link.svelte";
+import { getBase, getEdition, isEditionEditable } from "./Contexts";
+import { page } from "$app/state";
+import Muted from "./Muted.svelte";
+import ChapterTitle from "./ChapterTitle.svelte";
+import ChapterNumber from "./ChapterNumber.svelte";
+import PageHeader from "./PageHeader.svelte";
+import Rows from "./Rows.svelte";
 let editable = isEditionEditable();
 let edition = getEdition();
 let base = getBase();
-// What letter are we matching?
-$: letter = $page.params.letter;
-$: bookIndex = $edition?.getBookIndex() ?? {};
-let letters = {};
-// Figure out what letters have words
-$: {
-    for (const word of Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)))
-        letters[word.charAt(0).toLocaleLowerCase()] = true;
-}
-let words = [];
-$: {
-    words = [];
-    let count = 0;
-    Object.keys(bookIndex)
-        .sort((a, b) => a.localeCompare(b))
-        .forEach((word) => {
-        const firstLetter = word.charAt(0).toLowerCase();
-        if (letter === firstLetter) {
-            count++;
-            if (count % 20 === 0)
-                words.push(true);
-            words.push(word);
-        }
-    });
-}
+let letter = $derived(page.params.letter);
+let bookIndex = $derived($edition?.getBookIndex() ?? {});
+let letters = $derived.by(() => {
+  const map = {};
+  for (const word of Object.keys(bookIndex).sort(
+    (a, b) => a.localeCompare(b)
+  ))
+    map[word.charAt(0).toLocaleLowerCase()] = true;
+  return map;
+});
+let words = $derived.by(() => {
+  const list = [];
+  let count = 0;
+  Object.keys(bookIndex).sort((a, b) => a.localeCompare(b)).forEach((word) => {
+    const firstLetter = word.charAt(0).toLowerCase();
+    if (letter === firstLetter) {
+      count++;
+      if (count % 20 === 0) list.push(true);
+      list.push(word);
+    }
+  });
+  return list;
+});
 </script>
 
 {#if $edition}
@@ -59,14 +57,16 @@ $: {
                     ? edition.set($edition.withHeader(ChapterIDs.IndexID, text))
                     : undefined}
         >
-            <Outline
-                slot="outline"
-                previous={$edition.getPreviousChapterID(
-                    ChapterIDs.IndexID,
-                    editable,
-                )}
-                next={$edition.getNextChapterID(ChapterIDs.IndexID, editable)}
-            />
+            {#snippet outline()}
+                        <Outline
+                    
+                    previous={$edition.getPreviousChapterID(
+                        ChapterIDs.IndexID,
+                        editable,
+                    )}
+                    next={$edition.getNextChapterID(ChapterIDs.IndexID, editable)}
+                />
+                    {/snippet}
         </Header>
 
         <Instructions {editable}>

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

package/dist/components/page/Instructions.svelte

@@ -1,8 +1,8 @@
-<script>export let editable;
+<script lang="ts">let { editable, children } = $props();
 </script>
 
 {#if editable}
-    <aside class="instructions"><slot /></aside>
+    <aside class="instructions">{@render children?.()}</aside>
 {/if}
 
 <style>

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

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

package/dist/components/page/License.svelte

@@ -1,9 +1,15 @@
-<script>import Parser from '../../models/chapter/Parser';
-import BookishEditor from '../editor/BookishEditor.svelte';
-import Instructions from './Instructions.svelte';
-import Format from '../chapter/Format.svelte';
-import { getUser, getEdition, getLeasee, isEditionEditable, lease, } from './Contexts';
-import EditableHeader from './EditableHeader.svelte';
+<script lang="ts">import Parser from "../../models/chapter/Parser";
+import BookishEditor from "../editor/BookishEditor.svelte";
+import Instructions from "./Instructions.svelte";
+import Format from "../chapter/Format.svelte";
+import {
+  getUser,
+  getEdition,
+  getLeasee,
+  isEditionEditable,
+  lease
+} from "./Contexts";
+import EditableHeader from "./EditableHeader.svelte";
 let auth = getUser();
 let edition = getEdition();
 let editable = isEditionEditable();
@@ -19,7 +25,7 @@ let editable = isEditionEditable();
 {#if $edition}
     <!-- If editable, show acknowledgements even if they're empty, otherwise hide -->
     {#if editable}
-        <!-- svelte-ignore missing-declaration -->
+        <!-- svelte-ignore missing_declaration -->
         <BookishEditor
             text={$edition.getLicense()}
             parser={(text) =>

package/dist/components/page/License.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 LicenseProps = typeof __propDef.props;
-export type LicenseEvents = typeof __propDef.events;
-export type LicenseSlots = typeof __propDef.slots;
-export default class License extends SvelteComponent<LicenseProps, LicenseEvents, LicenseSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const License: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type License = InstanceType<typeof License>;
+export default License;

package/dist/components/page/Loading.svelte

@@ -7,15 +7,15 @@
             : '')}
 >
     <div class="bookish-loading-animation">
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
     </div>
 </div>
 

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

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  LoadingProps */
-/** @typedef {typeof __propDef.events}  LoadingEvents */
-/** @typedef {typeof __propDef.slots}  LoadingSlots */
-export default class Loading extends SvelteComponent<{
+export default Loading;
+type Loading = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LoadingProps = typeof __propDef.props;
-export type LoadingEvents = typeof __propDef.events;
-export type LoadingSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Loading: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/page/Media.svelte

@@ -1,30 +1,37 @@
-<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 Format from '../chapter/Format.svelte';
-import MediaPreview from './MediaPreview.svelte';
-import { onMount } from 'svelte';
-import { getBase, getBook, getEdition, isBookEditable, isEditionEditable, } from './Contexts';
-import PageHeader from './PageHeader.svelte';
-import ConfirmButton from '../editor/ConfirmButton.svelte';
+<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 Format from "../chapter/Format.svelte";
+import MediaPreview from "./MediaPreview.svelte";
+import { onMount } from "svelte";
+import {
+  getBase,
+  getBook,
+  getEdition,
+  isBookEditable,
+  isEditionEditable
+} from "./Contexts";
+import PageHeader from "./PageHeader.svelte";
+import ConfirmButton from "../editor/ConfirmButton.svelte";
 let book = getBook();
 let edition = getEdition();
 let editable = isBookEditable();
 let base = getBase();
-let images = [];
-$: embeds = $edition?.getEmbeds() ?? [];
-$: media = $book?.getMedia();
+let images = $state([]);
+let embeds = $derived($edition?.getEmbeds() ?? []);
+let media = $derived($book?.getMedia());
 function updateImages(newImages) {
-    images = newImages;
+  images = newImages;
 }
 onMount(() => {
-    // Listen to image changes.
-    media?.notify(updateImages);
-    return () => media?.stopNotifying(updateImages);
+  media?.notify(updateImages);
+  return () => media?.stopNotifying(updateImages);
 });
-$: unused = images?.filter((image) => !embeds.some((embed) => image.url.includes(embed.embed.getURL())));
+let unused = $derived(images?.filter(
+  (image) => !embeds.some((embed) => image.url.includes(embed.embed.getURL()))
+));
 </script>
 
 {#if $edition}
@@ -45,14 +52,16 @@ $: unused = images?.filter((image) => !embeds.some((embed) => image.url.includes
                     ? edition.set($edition.withHeader(ChapterIDs.MediaID, text))
                     : undefined}
         >
-            <Outline
-                slot="outline"
-                previous={$edition.getPreviousChapterID(
-                    ChapterIDs.MediaID,
-                    editable,
-                )}
-                next={$edition.getNextChapterID(ChapterIDs.MediaID, editable)}
-            />
+            {#snippet outline()}
+                        <Outline
+                    
+                    previous={$edition.getPreviousChapterID(
+                        ChapterIDs.MediaID,
+                        editable,
+                    )}
+                    next={$edition.getNextChapterID(ChapterIDs.MediaID, editable)}
+                />
+                    {/snippet}
         </Header>
         <Instructions {editable}>
             These are the images in the book, in order of appearance. You can

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

package/dist/components/page/MediaPreview.svelte

@@ -1,23 +1,26 @@
-<script>import Link from '../Link.svelte';
-import { getBase } from './Contexts';
-export let url;
-export let alt;
-export let chapterID;
+<script lang="ts">import Link from "../Link.svelte";
+import { getBase } from "./Contexts";
+let {
+  url,
+  alt,
+  chapterID,
+  children
+} = $props();
 let base = getBase();
-let loaded;
-let urlChecked;
-$: {
-    if (urlChecked !== url && typeof Image !== 'undefined') {
-        urlChecked = url;
-        let image = new Image();
-        image.src = url;
-        loaded = image.complete;
-        if (!loaded) {
-            image.onload = () => (loaded = true);
-            image.onerror = () => (loaded = null);
-        }
+let loaded = $state();
+let urlChecked = void 0;
+$effect.pre(() => {
+  if (urlChecked !== url && typeof Image !== "undefined") {
+    urlChecked = url;
+    let image = new Image();
+    image.src = url;
+    loaded = image.complete;
+    if (!loaded) {
+      image.onload = () => loaded = true;
+      image.onerror = () => loaded = null;
     }
-}
+  }
+});
 </script>
 
 <figure class={'media-preview'}>
@@ -28,7 +31,7 @@ $: {
     {:else if loaded === null}
         <div class="missing">missing image</div>
     {/if}
-    <figcaption class="credit"><slot /></figcaption>
+    <figcaption class="credit">{@render children?.()}</figcaption>
 </figure>
 
 <style>

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;