bookish-press 0.7.4 → 0.8.2

package/dist/components/editor/BookishEditor.svelte.d.ts

@@ -1,28 +1,16 @@
-import { SvelteComponent } from "svelte";
 import type RootNode from '../../models/chapter/RootNode';
-declare const __propDef: {
-    props: {
-        text: string;
-        parser: (text: string) => RootNode;
-        save: (node: RootNode) => Promise<void> | void;
-        chapter: boolean;
-        autofocus?: boolean;
-        component: ConstructorOfATypedSvelteComponent;
-        placeholder: string;
-        leasee: string | boolean;
-        lease: (lock: boolean) => Promise<boolean> | boolean;
-        inline?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BookishEditorProps = typeof __propDef.props;
-export type BookishEditorEvents = typeof __propDef.events;
-export type BookishEditorSlots = typeof __propDef.slots;
-export default class BookishEditor extends SvelteComponent<BookishEditorProps, BookishEditorEvents, BookishEditorSlots> {
+interface Props {
+    text: string;
+    parser: (text: string) => RootNode;
+    save: (node: RootNode) => Promise<void> | void;
+    chapter: boolean;
+    autofocus?: boolean;
+    component: import('svelte').Component<any>;
+    placeholder: string;
+    leasee: string | boolean;
+    lease: (lock: boolean) => Promise<boolean> | boolean;
+    inline?: boolean;
 }
-export {};
+declare const BookishEditor: import("svelte").Component<Props, {}, "">;
+type BookishEditor = ReturnType<typeof BookishEditor>;
+export default BookishEditor;

package/dist/components/editor/CalloutEditor.svelte

@@ -1,6 +1,6 @@
-<script>import PositionEditor from './PositionEditor.svelte';
-import { getCaret } from '../page/Contexts';
-export let callout;
+<script lang="ts">import PositionEditor from "./PositionEditor.svelte";
+import { getCaret } from "../page/Contexts";
+let { callout } = $props();
 let caret = getCaret();
 </script>
 

package/dist/components/editor/CalloutEditor.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type CalloutNode from '../../models/chapter/CalloutNode';
-declare const __propDef: {
-    props: {
-        callout: CalloutNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CalloutEditorProps = typeof __propDef.props;
-export type CalloutEditorEvents = typeof __propDef.events;
-export type CalloutEditorSlots = typeof __propDef.slots;
-export default class CalloutEditor extends SvelteComponent<CalloutEditorProps, CalloutEditorEvents, CalloutEditorSlots> {
+interface Props {
+    callout: CalloutNode;
 }
-export {};
+declare const CalloutEditor: import("svelte").Component<Props, {}, "">;
+type CalloutEditor = ReturnType<typeof CalloutEditor>;
+export default CalloutEditor;

package/dist/components/editor/CaptionedCodeEditor.svelte

@@ -1,8 +1,8 @@
-<script>import LanguageEditor from './LanguageEditor.svelte';
-import PositionEditor from './PositionEditor.svelte';
-import Switch from './Switch.svelte';
-import { getCaret } from '../page/Contexts';
-export let code;
+<script lang="ts">import LanguageEditor from "./LanguageEditor.svelte";
+import PositionEditor from "./PositionEditor.svelte";
+import Switch from "./Switch.svelte";
+import { getCaret } from "../page/Contexts";
+let { code } = $props();
 let caret = getCaret();
 </script>
 

package/dist/components/editor/CaptionedCodeEditor.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type CodeNode from '../../models/chapter/CodeNode';
-declare const __propDef: {
-    props: {
-        code: CodeNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CaptionedCodeEditorProps = typeof __propDef.props;
-export type CaptionedCodeEditorEvents = typeof __propDef.events;
-export type CaptionedCodeEditorSlots = typeof __propDef.slots;
-export default class CaptionedCodeEditor extends SvelteComponent<CaptionedCodeEditorProps, CaptionedCodeEditorEvents, CaptionedCodeEditorSlots> {
+interface Props {
+    code: CodeNode;
 }
-export {};
+declare const CaptionedCodeEditor: import("svelte").Component<Props, {}, "">;
+type CaptionedCodeEditor = ReturnType<typeof CaptionedCodeEditor>;
+export default CaptionedCodeEditor;

package/dist/components/editor/CaretView.svelte

@@ -1,28 +1,26 @@
-<script>import { afterUpdate, tick } from 'svelte';
-export let left;
-export let top;
-export let height;
-export let linked;
-export let italic;
-export let bold;
-export let disabled;
-export let ignored;
-export let blink;
-export let locked;
-export let accent;
-let element;
-let headerHeight = 0;
-// When the caret updates position, scroll the element into view after the render is complete.
-$: {
-    left;
-    top;
-    tick().then(() => element ? element.scrollIntoView({ block: 'nearest' }) : undefined);
-}
-/** Keep track of the header height, so we can snap to the caret position. */
-afterUpdate(() => {
-    headerHeight =
-        document.querySelector('.bookish-app > .header')
-            ?.offsetHeight ?? 0;
+<script lang="ts">import { tick } from "svelte";
+let {
+  left,
+  top,
+  height,
+  linked,
+  italic,
+  bold,
+  disabled,
+  ignored,
+  blink,
+  locked,
+  accent
+} = $props();
+let element = $state();
+let headerHeight = $state(0);
+$effect(() => {
+  void left;
+  void top;
+  tick().then(
+    () => element ? element.scrollIntoView({ block: "nearest" }) : void 0
+  );
+  headerHeight = document.querySelector(".bookish-app > .header")?.offsetHeight ?? 0;
 });
 </script>
 

package/dist/components/editor/CaretView.svelte.d.ts

@@ -1,29 +1,17 @@
-import { SvelteComponent } from "svelte";
 import type { Accent } from './CaretContext';
-declare const __propDef: {
-    props: {
-        left: number;
-        top: number;
-        height: number;
-        linked: boolean;
-        italic: boolean;
-        bold: boolean;
-        disabled: boolean;
-        ignored: boolean;
-        blink: boolean;
-        locked: boolean;
-        accent: Accent | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CaretViewProps = typeof __propDef.props;
-export type CaretViewEvents = typeof __propDef.events;
-export type CaretViewSlots = typeof __propDef.slots;
-export default class CaretView extends SvelteComponent<CaretViewProps, CaretViewEvents, CaretViewSlots> {
+interface Props {
+    left: number;
+    top: number;
+    height: number;
+    linked: boolean;
+    italic: boolean;
+    bold: boolean;
+    disabled: boolean;
+    ignored: boolean;
+    blink: boolean;
+    locked: boolean;
+    accent: Accent | undefined;
 }
-export {};
+declare const CaretView: import("svelte").Component<Props, {}, "">;
+type CaretView = ReturnType<typeof CaretView>;
+export default CaretView;

package/dist/components/editor/CitationsEditor.svelte

@@ -1,39 +1,36 @@
-<script>import Note from './Note.svelte';
-import Options from '../app/Options.svelte';
-import Button from '../app/Button.svelte';
-import { getCaret, getEdition } from '../page/Contexts';
-export let citations;
+<script lang="ts">import Note from "./Note.svelte";
+import Options from "../app/Options.svelte";
+import Button from "../app/Button.svelte";
+import { getCaret, getEdition } from "../page/Contexts";
+let { citations } = $props();
 let caret = getCaret();
 let edition = getEdition();
-let value = '';
+let value = $state("");
 function handleSelection(selection) {
-    if (selection.length > 0)
-        update(new Set([...citations.getMeta(), selection]));
+  if (selection.length > 0)
+    update(/* @__PURE__ */ new Set([...citations.getMeta(), selection]));
 }
 function removeSelection(citationID) {
-    let ids = new Set(citations.getMeta());
-    ids.delete(citationID);
-    update(ids);
+  let ids = new Set(citations.getMeta());
+  ids.delete(citationID);
+  update(ids);
 }
 function update(set) {
-    $caret?.edit(citations, citations.withMeta(Array.from(set)));
-}
-$: uncited =
-    $edition === undefined
-        ? []
-        : Object.keys($edition.getReferences())
-            .filter((citationID) => !citations.getMeta().includes(citationID))
-            .sort();
-let options = [];
-$: {
-    options = [];
-    options.push([
-        uncited.length > 0 ? 'Choose references' : 'No uncited references',
-        '',
-    ]);
-    for (const citationID of uncited)
-        options.push([citationID, citationID]);
+  $caret?.edit(citations, citations.withMeta(Array.from(set)));
 }
+let uncited = $derived($edition === void 0 ? [] : Object.keys($edition.getReferences()).filter(
+  (citationID) => !citations.getMeta().includes(citationID)
+).sort());
+let options = $derived.by(() => {
+  const list = [
+    [
+      uncited.length > 0 ? "Choose references" : "No uncited references",
+      ""
+    ]
+  ];
+  for (const citationID of uncited) list.push([citationID, citationID]);
+  return list;
+});
 </script>
 
 <Options

package/dist/components/editor/CitationsEditor.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type CitationsNode from '../../models/chapter/CitationsNode';
-declare const __propDef: {
-    props: {
-        citations: CitationsNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CitationsEditorProps = typeof __propDef.props;
-export type CitationsEditorEvents = typeof __propDef.events;
-export type CitationsEditorSlots = typeof __propDef.slots;
-export default class CitationsEditor extends SvelteComponent<CitationsEditorProps, CitationsEditorEvents, CitationsEditorSlots> {
+interface Props {
+    citations: CitationsNode;
 }
-export {};
+declare const CitationsEditor: import("svelte").Component<Props, {}, "">;
+type CitationsEditor = ReturnType<typeof CitationsEditor>;
+export default CitationsEditor;

package/dist/components/editor/ConfirmButton.svelte

@@ -1,13 +1,16 @@
-<script>import Button from '../app/Button.svelte';
-export let tooltip;
-export let confirm;
-export let command;
-let confirming = false;
+<script lang="ts">import Button from "../app/Button.svelte";
+let {
+  tooltip,
+  confirm,
+  command,
+  children
+} = $props();
+let confirming = $state(false);
 </script>
 
 <div class="confirm">
     {#if !confirming}
-        <Button {tooltip} command={() => (confirming = true)}><slot /></Button>
+        <Button {tooltip} command={() => (confirming = true)}>{@render children?.()}</Button>
     {:else}
         <Button tooltip="no" command={() => (confirming = false)}>cancel</Button
         >&nbsp;<Button

package/dist/components/editor/ConfirmButton.svelte.d.ts

@@ -1,22 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        tooltip: string;
-        confirm: string;
-        command: () => Promise<void> | void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ConfirmButtonProps = typeof __propDef.props;
-export type ConfirmButtonEvents = typeof __propDef.events;
-export type ConfirmButtonSlots = typeof __propDef.slots;
-export default class ConfirmButton extends SvelteComponent<ConfirmButtonProps, ConfirmButtonEvents, ConfirmButtonSlots> {
+interface Props {
+    tooltip: string;
+    confirm: string;
+    command: () => Promise<void> | void;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const ConfirmButton: import("svelte").Component<Props, {}, "">;
+type ConfirmButton = ReturnType<typeof ConfirmButton>;
+export default ConfirmButton;

package/dist/components/editor/DefinitionEditor.svelte

@@ -1,22 +1,18 @@
-<script>import Options from '../app/Options.svelte';
-import Note from './Note.svelte';
-import { getCaret, getEdition } from '../page/Contexts';
-export let definition;
+<script lang="ts">import Options from "../app/Options.svelte";
+import Note from "./Note.svelte";
+import { getCaret, getEdition } from "../page/Contexts";
+let { definition } = $props();
 let caret = getCaret();
 let edition = getEdition();
-$: glossary = $edition?.getGlossary();
+let glossary = $derived($edition?.getGlossary());
 function handleChange(glossaryID) {
-    $caret?.edit(definition, definition.withMeta(glossaryID));
+  $caret?.edit(definition, definition.withMeta(glossaryID));
 }
-// Sort the glossary entries by phrase
-$: entries =
-    glossary === undefined
-        ? undefined
-        : Object.entries(glossary)
-            .map(([key, value]) => {
-            return { glossaryID: key, phrase: value.phrase };
-        })
-            .sort((a, b) => a && b ? a.phrase.localeCompare(b.phrase) : 0);
+let entries = $derived(glossary === void 0 ? void 0 : Object.entries(glossary).map(([key, value]) => {
+  return { glossaryID: key, phrase: value.phrase };
+}).sort(
+  (a, b) => a && b ? a.phrase.localeCompare(b.phrase) : 0
+));
 </script>
 
 {#if entries !== undefined && glossary !== undefined}

package/dist/components/editor/DefinitionEditor.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type DefinitionNode from '../../models/chapter/DefinitionNode';
-declare const __propDef: {
-    props: {
-        definition: DefinitionNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DefinitionEditorProps = typeof __propDef.props;
-export type DefinitionEditorEvents = typeof __propDef.events;
-export type DefinitionEditorSlots = typeof __propDef.slots;
-export default class DefinitionEditor extends SvelteComponent<DefinitionEditorProps, DefinitionEditorEvents, DefinitionEditorSlots> {
+interface Props {
+    definition: DefinitionNode;
 }
-export {};
+declare const DefinitionEditor: import("svelte").Component<Props, {}, "">;
+type DefinitionEditor = ReturnType<typeof DefinitionEditor>;
+export default DefinitionEditor;

package/dist/components/editor/EmbedEditor.svelte

@@ -1,53 +1,52 @@
-<script>import PositionEditor from './PositionEditor.svelte';
-import EmbedNode from '../../models/chapter/EmbedNode';
-import TextEditor from './TextEditor.svelte';
-import { storage } from '../../models/Firebase';
-import ToolbarSpacer from './ToolbarSpacer.svelte';
-import ImageChooser from './ImageChooser.svelte';
-import URLEditor from './URLEditor.svelte';
-import Note from './Note.svelte';
-import { getBook, getCaret } from '../page/Contexts';
-export let embed;
+<script lang="ts">import PositionEditor from "./PositionEditor.svelte";
+import EmbedNode from "../../models/chapter/EmbedNode";
+import TextEditor from "./TextEditor.svelte";
+import { storage } from "../../models/Firebase";
+import ToolbarSpacer from "./ToolbarSpacer.svelte";
+import ImageChooser from "./ImageChooser.svelte";
+import URLEditor from "./URLEditor.svelte";
+import Note from "./Note.svelte";
+import { getBook, getCaret } from "../page/Contexts";
+let { embed } = $props();
 let caret = getCaret();
-let upload = undefined;
-$: description = embed.getDescription();
+let upload = $state(void 0);
+let description = $derived(embed.getDescription());
 let book = getBook();
 function isValidURL(url) {
-    // Is it a valid URL?
-    try {
-        let test = new URL(url);
-        if (test.protocol === 'http:' || test.protocol === 'https:')
-            return;
-    }
-    catch (_) { }
-    return "URL doesn't seem valid";
+  try {
+    let test = new URL(url);
+    if (test.protocol === "http:" || test.protocol === "https:") return;
+  } catch (_) {
+  }
+  return "URL doesn't seem valid";
 }
 function handleImageChange(event) {
-    if ($book === undefined)
-        return;
-    if ($caret === undefined)
-        return;
-    const target = event.target;
-    const file = target.files === null ? undefined : target.files[0];
-    const media = $book.getMedia();
-    if (file === undefined)
-        return;
-    if (storage === undefined)
-        return;
-    if (media === undefined)
-        return;
-    media.upload(file, (progress) => (upload = `${progress}% done`), (error) => (upload = error), (url, thumbnail) => {
-        // Upload completed successfully, update the front end.
-        // Preserve the description, in case it's an image revision, to avoid data loss.
-        $caret?.edit(embed, embed.withURLs(url, thumbnail));
-        upload = undefined;
-    });
+  if ($book === void 0) return;
+  if ($caret === void 0) return;
+  const target = event.target;
+  const file = target.files === null ? void 0 : target.files[0];
+  const media = $book.getMedia();
+  if (file === void 0) return;
+  if (storage === void 0) return;
+  if (media === void 0) return;
+  media.upload(
+    file,
+    (progress) => upload = `${progress}% done`,
+    (error) => upload = error,
+    (url, thumbnail) => {
+      $caret?.edit(embed, embed.withURLs(url, thumbnail));
+      upload = void 0;
+    }
+  );
 }
 function handleImageSelection(image) {
-    $caret?.edit(embed, embed.getURL() === image.url
-        ? // Toggle the embed if choosing the same image
-            embed.withURL('').withDescription('')
-        : embed.withURLs(image.url, image.thumb));
+  $caret?.edit(
+    embed,
+    embed.getURL() === image.url ? (
+      // Toggle the embed if choosing the same image
+      embed.withURL("").withDescription("")
+    ) : embed.withURLs(image.url, image.thumb)
+  );
 }
 </script>
 
@@ -62,7 +61,7 @@ function handleImageSelection(image) {
 <label class="file-upload" tabIndex="0">
     <input
         type="file"
-        on:input={handleImageChange}
+        oninput={handleImageChange}
         accept=".jpg,.jpeg,.png,.gif,image/jpeg,image/png,image/gif"
     />
     Upload

package/dist/components/editor/EmbedEditor.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import EmbedNode from '../../models/chapter/EmbedNode';
-declare const __propDef: {
-    props: {
-        embed: EmbedNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EmbedEditorProps = typeof __propDef.props;
-export type EmbedEditorEvents = typeof __propDef.events;
-export type EmbedEditorSlots = typeof __propDef.slots;
-export default class EmbedEditor extends SvelteComponent<EmbedEditorProps, EmbedEditorEvents, EmbedEditorSlots> {
+interface Props {
+    embed: EmbedNode;
 }
-export {};
+declare const EmbedEditor: import("svelte").Component<Props, {}, "">;
+type EmbedEditor = ReturnType<typeof EmbedEditor>;
+export default EmbedEditor;

package/dist/components/editor/Icon.svelte

@@ -1,4 +1,4 @@
-<script>export let icon;
+<script lang="ts">let { icon } = $props();
 </script>
 
 <span>

package/dist/components/editor/Icon.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        icon: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IconProps = typeof __propDef.props;
-export type IconEvents = typeof __propDef.events;
-export type IconSlots = typeof __propDef.slots;
-export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
+interface Props {
+    icon: string;
 }
-export {};
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/editor/ImageChooser.svelte

@@ -1,21 +1,18 @@
-<script>import { onMount } from 'svelte';
-import { getBook } from '../page/Contexts';
-import ImageThumbnail from './ImageThumbnail.svelte';
-export let select;
-export let selection;
+<script lang="ts">import { onMount } from "svelte";
+import { getBook } from "../page/Contexts";
+import ImageThumbnail from "./ImageThumbnail.svelte";
+let { select, selection } = $props();
 let book = getBook();
-let images = undefined;
-let expanded = false;
+let images = $state(void 0);
+let expanded = $state(false);
 function updateImages(newImages) {
-    images = newImages;
+  images = newImages;
 }
-// Load the latest images in the book, and keep them updated as they change.
 onMount(() => {
-    if ($book === undefined)
-        return;
-    const media = $book.getMedia();
-    media.notify(updateImages);
-    return () => media.stopNotifying(updateImages);
+  if ($book === void 0) return;
+  const media = $book.getMedia();
+  media.notify(updateImages);
+  return () => media.stopNotifying(updateImages);
 });
 </script>
 
@@ -23,13 +20,13 @@ onMount(() => {
     class={`bookish-image-chooser ${expanded ? 'expanded' : ''}`}
     tabindex="0"
     role="button"
-    on:click={() => (expanded = !expanded)}
-    on:keydown={(event) =>
+    onclick={() => (expanded = !expanded)}
+    onkeydown={(event) =>
         event.key === 'Enter' || event.key === ' '
             ? (expanded = !expanded)
             : undefined}
-    on:mouseenter={() => (expanded = true)}
-    on:mouseleave={() => (expanded = false)}
+    onmouseenter={() => (expanded = true)}
+    onmouseleave={() => (expanded = false)}
 >
     {#if images === undefined}
         Loading images