bookish-press 0.7.4 → 0.8.2

package/dist/components/chapter/Definition.svelte.d.ts

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

package/dist/components/chapter/Embed.svelte

@@ -1,84 +1,87 @@
-<svelte:options immutable={true} />
-
-<script>import { storage } from '../../models/Firebase';
-import { getCaret, getBook, getBase, isEditionEditable, } from '../page/Contexts';
-import Figure from './Figure.svelte';
-import { getContext } from 'svelte';
-export let node;
-export let editable = true;
-export let placeholder = '';
-export let imageOnly = false;
-$: url = node.getURL();
-$: description = node.getDescription();
+<script lang="ts">import { storage } from "../../models/Firebase";
+import {
+  getCaret,
+  getBook,
+  getBase,
+  isEditionEditable
+} from "../page/Contexts";
+import Figure from "./Figure.svelte";
+import { getContext } from "svelte";
+let {
+  node,
+  editable = true,
+  placeholder = "",
+  imageOnly = false
+} = $props();
+let url = $derived(node.getURL());
+let description = $derived(node.getDescription());
 let caret = getCaret();
 let book = getBook();
 let base = getBase();
 let editionEditable = isEditionEditable();
-// Bookish editor should have passed down a way to set the active editor.
-let claimCaret = getContext('claimeditor');
-let dragging = false;
-let dragFeedback = undefined;
-let imageError = false;
-$: if (node)
-    imageError = false;
+let claimCaret = getContext("claimeditor");
+let dragging = $state(false);
+let dragFeedback = $state(void 0);
+let imageError = $state(false);
+$effect.pre(() => {
+  if (node) imageError = false;
+});
 function handleDrop(event) {
-    event.preventDefault();
-    if (event.dataTransfer?.items) {
-        // Get the files and convert them to file opens, then filter by allowed file extensions
-        const imageFiles = [...event.dataTransfer.items]
-            .filter((item) => item.kind === 'file')
-            .map((item) => item.getAsFile())
-            .filter((file) => file !== null && /.*\.(jpg|jpeg|png)/i.test(file.name));
-        if (imageFiles.length === 0)
-            dragFeedback = 'Only JPEG or PNG images are allowed.';
-        else if (imageFiles.length > 1)
-            dragFeedback = 'Only one image at a time please!';
-        else {
-            dragFeedback = 'Uploading…';
-            const file = imageFiles[0];
-            const media = $book?.getMedia();
-            if (file === null)
-                return;
-            if (storage === undefined)
-                return;
-            if (media === undefined)
-                return;
-            media.upload(file, (progress) => (dragFeedback = `${progress}% done`), (error) => {
-                dragFeedback = error;
-                dragging = false;
-            }, (url, thumbnails) => {
-                // Upload completed successfully, now we can get the download URL
-                $caret?.edit(node, node.withURLs(url, thumbnails).withDescription(''));
-                dragging = false;
-                dragFeedback = undefined;
-            });
+  event.preventDefault();
+  if (event.dataTransfer?.items) {
+    const imageFiles = [...event.dataTransfer.items].filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter(
+      (file) => file !== null && /.*\.(jpg|jpeg|png)/i.test(file.name)
+    );
+    if (imageFiles.length === 0)
+      dragFeedback = "Only JPEG or PNG images are allowed.";
+    else if (imageFiles.length > 1)
+      dragFeedback = "Only one image at a time please!";
+    else {
+      dragFeedback = "Uploading\u2026";
+      const file = imageFiles[0];
+      const media = $book?.getMedia();
+      if (file === null) return;
+      if (storage === void 0) return;
+      if (media === void 0) return;
+      media.upload(
+        file,
+        (progress) => dragFeedback = `${progress}% done`,
+        (error) => {
+          dragFeedback = error;
+          dragging = false;
+        },
+        (url2, thumbnails) => {
+          $caret?.edit(
+            node,
+            node.withURLs(url2, thumbnails).withDescription("")
+          );
+          dragging = false;
+          dragFeedback = void 0;
         }
+      );
     }
+  }
 }
 function handleDrag(event) {
-    event?.preventDefault();
-    dragging = true;
-    dragFeedback = 'Drop to upload…';
-    // If we have a way to claim the caret, claim it, since we want to be able to make an edit with the active caret.
-    if (claimCaret)
-        claimCaret();
+  event?.preventDefault();
+  dragging = true;
+  dragFeedback = "Drop to upload\u2026";
+  if (claimCaret) claimCaret();
 }
 function handleDragLeave(event) {
-    if (event.target !== event.currentTarget)
-        return;
-    event?.preventDefault();
-    dragging = false;
-    dragFeedback = undefined;
+  if (event.target !== event.currentTarget) return;
+  event?.preventDefault();
+  dragging = false;
+  dragFeedback = void 0;
 }
 function handleLoad() {
-    imageError = false;
+  imageError = false;
 }
 function handleError() {
-    imageError = true;
+  imageError = true;
 }
 function handleClick() {
-    if (claimCaret)
-        claimCaret();
+  if (claimCaret) claimCaret();
 }
 </script>
 
@@ -101,15 +104,18 @@ function handleClick() {
                     class={`bookish-figure-unspecified ${
                         dragging ? 'bookish-figure-dragging' : ''
                     }`}
-                    on:click|preventDefault={handleClick}
+                    onclick={(event) => {
+                        event.preventDefault();
+                        handleClick();
+                    }}
                     tabindex="0"
-                    on:keydown={(event) =>
+                    onkeydown={(event) =>
                         event.key === ' ' || event.key === 'Enter'
                             ? handleClick()
                             : undefined}
-                    on:drop|preventDefault={handleDrop}
-                    on:dragover={handleDrag}
-                    on:dragleave={handleDragLeave}
+                    ondrop={handleDrop}
+                    ondragover={handleDrag}
+                    ondragleave={handleDragLeave}
                     >{dragFeedback !== undefined
                         ? dragFeedback
                         : placeholder.length > 0
@@ -128,7 +134,7 @@ function handleClick() {
                     frameBorder="0"
                     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                     allowFullScreen
-                />
+></iframe>
             </article>
         {:else}
             <img
@@ -141,8 +147,8 @@ function handleClick() {
                     ? '(min-width: 1024px) 1024px, 320px'
                     : undefined}
                 alt={description}
-                on:load={handleLoad}
-                on:error={handleError}
+                onload={handleLoad}
+                onerror={handleError}
             />
         {/if}
     </Figure>

package/dist/components/chapter/Embed.svelte.d.ts

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
 import type EmbedNode from '../../models/chapter/EmbedNode';
-declare const __propDef: {
-    props: {
-        node: EmbedNode;
-        editable?: boolean;
-        placeholder?: string;
-        imageOnly?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EmbedProps = typeof __propDef.props;
-export type EmbedEvents = typeof __propDef.events;
-export type EmbedSlots = typeof __propDef.slots;
-export default class Embed extends SvelteComponent<EmbedProps, EmbedEvents, EmbedSlots> {
+interface Props {
+    node: EmbedNode;
+    editable?: boolean;
+    placeholder?: string;
+    imageOnly?: boolean;
 }
-export {};
+declare const Embed: import("svelte").Component<Props, {}, "">;
+type Embed = ReturnType<typeof Embed>;
+export default Embed;

package/dist/components/chapter/ErrorMessage.svelte

@@ -1,7 +1,5 @@
-<svelte:options immutable={true} />
-
-<script>import Problem from './Problem.svelte';
-export let node;
+<script lang="ts">import Problem from "./Problem.svelte";
+let { node } = $props();
 </script>
 
 <Problem

package/dist/components/chapter/ErrorMessage.svelte.d.ts

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

package/dist/components/chapter/Figure.svelte

@@ -1,48 +1,41 @@
-<svelte:options immutable={true} />
-
-<script>import Format from './Format.svelte';
-import Positioned from './Positioned.svelte';
-import { getCaret, isChapterEditable } from '../page/Contexts';
-export let node;
-export let caption;
-export let credit = undefined;
-export let focusable = true;
+<script lang="ts">import Format from "./Format.svelte";
+import Positioned from "./Positioned.svelte";
+import { getCaret, isChapterEditable } from "../page/Contexts";
+let {
+  node,
+  caption,
+  credit = void 0,
+  focusable = true,
+  children
+} = $props();
 let editable = isChapterEditable();
 let caret = getCaret();
-$: selected = $caret?.range?.start.node === node;
+let selected = $derived($caret?.range?.start.node === node);
 function focusFigure() {
-    if (!editable || $caret === undefined)
-        return;
-    // if (node instanceof EmbedNode) {
-    //     return $caret.setCaret({
-    //         start: { node, index: 0 },
-    //         end: { node, index: 0 },
-    //     });
-    // } else {
-    const firstCaret = node.getFirstCaret();
-    if (firstCaret)
-        $caret.setCaret({
-            start: firstCaret,
-            end: firstCaret,
-        });
-    // }
+  if (!editable || $caret === void 0) return;
+  const firstCaret = node.getFirstCaret();
+  if (firstCaret)
+    $caret.setCaret({
+      start: firstCaret,
+      end: firstCaret
+    });
 }
 </script>
 
 <Positioned position={node.getPosition()}>
     <figure class="bookish-figure" data-nodeid={node.nodeID}>
-        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <div
             class:selected
             role={focusable ? 'button' : undefined}
             tabindex={focusable ? 0 : undefined}
-            on:mousedown={focusable ? focusFigure : null}
-            on:keydown={(event) =>
+            onmousedown={focusable ? focusFigure : null}
+            onkeydown={(event) =>
                 event.key === ' ' || event.key === 'Enter'
                     ? focusFigure()
                     : null}
         >
-            <slot />
+            {@render children?.()}
         </div>
         {#if caption !== undefined}
             <figcaption class="caption">

package/dist/components/chapter/Figure.svelte.d.ts

@@ -1,27 +1,14 @@
-import { SvelteComponent } from "svelte";
 import type TableNode from '../../models/chapter/TableNode';
 import type EmbedNode from '../../models/chapter/EmbedNode';
 import type CodeNode from '../../models/chapter/CodeNode';
 import type FormatNode from '../../models/chapter/FormatNode';
-declare const __propDef: {
-    props: {
-        node: TableNode | EmbedNode | CodeNode;
-        caption: FormatNode | undefined;
-        credit?: FormatNode | undefined;
-        focusable?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FigureProps = typeof __propDef.props;
-export type FigureEvents = typeof __propDef.events;
-export type FigureSlots = typeof __propDef.slots;
-export default class Figure extends SvelteComponent<FigureProps, FigureEvents, FigureSlots> {
+interface Props {
+    node: TableNode | EmbedNode | CodeNode;
+    caption: FormatNode | undefined;
+    credit?: FormatNode | undefined;
+    focusable?: boolean;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Figure: import("svelte").Component<Props, {}, "">;
+type Figure = ReturnType<typeof Figure>;
+export default Figure;

package/dist/components/chapter/Footnote.svelte

@@ -1,26 +1,32 @@
-<svelte:options immutable={true} />
-
-<script>import Atom from './Atom.svelte';
-import Marginal from './Marginal.svelte';
-import Format from './Format.svelte';
-import { getChapter, getEdition, getCaret, getRoot, } from '../page/Contexts';
-import { afterUpdate } from 'svelte';
-export let node;
-$: content = node.getMeta();
+<script lang="ts">import Atom from "./Atom.svelte";
+import Marginal from "./Marginal.svelte";
+import Format from "./Format.svelte";
+import {
+  getChapter,
+  getEdition,
+  getCaret,
+  getRoot
+} from "../page/Contexts";
+let { node } = $props();
+let meta = $derived(node.getMeta());
 let caret = getCaret();
 let chapter = getChapter();
 let edition = getEdition();
 let root = getRoot();
-// What footnote number is this?
-$: number = $root.getFootnotes().indexOf(node);
-$: letter =
-    number === undefined ? undefined : $edition?.getFootnoteSymbol(number);
-$: focused =
-    $caret &&
-        $caret.range &&
-        $caret.range.start.node.hasAncestor($root, node);
-// Position the marginals on every render.
-afterUpdate(() => $chapter?.layoutMarginals());
+let number = $derived($root.getFootnotes().indexOf(node));
+let letter = $derived(
+  number === void 0 ? void 0 : $edition?.getFootnoteSymbol(number)
+);
+let focused = $derived(
+  $caret && $caret.range && $caret.range.start.node.hasAncestor($root, node)
+);
+$effect(() => {
+  void meta;
+  void number;
+  void letter;
+  void focused;
+  $chapter?.requestLayout();
+});
 </script>
 
 <Atom {node}>
@@ -33,19 +39,21 @@ afterUpdate(() => $chapter?.layoutMarginals());
             <!-- We prevent default on the span to prevent mouse events from bubbling up to the footnote symbol. This is key for two reasons:
                  1) clicks on the footnote select the footnote atom node itself
                  2) we want to be able to click on footnote text and we can't do that if the footnote sets the caret to the atom after clicks. -->
-            <sup slot="interactor" class="bookish-footnote-symbol">{letter}</sup
-            >
-            <span
-                slot="content"
-                class={`bookish-footnote ${
-                    focused ? 'bookish-footnote-focused' : ''
-                }`}
-            >
-                <sup class="bookish-footnote-symbol">{letter}</sup><Format
-                    node={content}
-                    placeholder="footnote"
-                /></span
-            >
+            {#snippet interactor()}
+                <sup class="bookish-footnote-symbol">{letter}</sup>
+            {/snippet}
+            {#snippet content()}
+                <span
+                    class={`bookish-footnote ${
+                        focused ? 'bookish-footnote-focused' : ''
+                    }`}
+                >
+                    <sup class="bookish-footnote-symbol">{letter}</sup><Format
+                        node={meta}
+                        placeholder="footnote"
+                    /></span
+                >
+            {/snippet}
         </Marginal>
     </span>
 </Atom>

package/dist/components/chapter/Footnote.svelte.d.ts

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

package/dist/components/chapter/Format.svelte

@@ -1,44 +1,29 @@
-<svelte:options immutable={true} />
-
-<script>import FormatNode from '../../models/chapter/FormatNode';
-import CitationsNode from '../../models/chapter/CitationsNode';
-import CommentNode from '../../models/chapter/CommentNode';
-import DefinitionNode from '../../models/chapter/DefinitionNode';
-import FootnoteNode from '../../models/chapter/FootnoteNode';
-import InlineCodeNode from '../../models/chapter/InlineCodeNode';
-import LabelNode from '../../models/chapter/LabelNode';
-import LinkNode from '../../models/chapter/LinkNode';
-import TextNode from '../../models/chapter/TextNode';
-import Problem from './Problem.svelte';
-import Citations from './Citations.svelte';
-import Definition from './Definition.svelte';
-import Footnote from './Footnote.svelte';
-import InlineCode from './InlineCode.svelte';
-import Label from './Label.svelte';
-import Link from './Link.svelte';
-import Comment from './Comment.svelte';
-import Text from './Text.svelte';
-import Format from './Format.svelte';
-import { isChapterEditable, isEditionEditable } from '../page/Contexts';
-import LineBreakNode from '../../models/chapter/LineBreakNode';
-import LineBreak from './LineBreak.svelte';
-export let node;
-export let placeholder = undefined;
-$: format = node.getFormat();
-$: tag =
-    format === '*'
-        ? 'strong'
-        : format === '_'
-            ? 'em'
-            : format === '^'
-                ? 'sup'
-                : format === 'v'
-                    ? 'sub'
-                    : 'span';
-$: showPlaceholder =
-    node.isEmptyText() &&
-        placeholder !== undefined &&
-        (isChapterEditable() || isEditionEditable());
+<script lang="ts">import FormatNode from "../../models/chapter/FormatNode";
+import CitationsNode from "../../models/chapter/CitationsNode";
+import CommentNode from "../../models/chapter/CommentNode";
+import DefinitionNode from "../../models/chapter/DefinitionNode";
+import FootnoteNode from "../../models/chapter/FootnoteNode";
+import InlineCodeNode from "../../models/chapter/InlineCodeNode";
+import LabelNode from "../../models/chapter/LabelNode";
+import LinkNode from "../../models/chapter/LinkNode";
+import TextNode from "../../models/chapter/TextNode";
+import Problem from "./Problem.svelte";
+import Citations from "./Citations.svelte";
+import Definition from "./Definition.svelte";
+import Footnote from "./Footnote.svelte";
+import InlineCode from "./InlineCode.svelte";
+import Label from "./Label.svelte";
+import Link from "./Link.svelte";
+import Comment from "./Comment.svelte";
+import Text from "./Text.svelte";
+import Format from "./Format.svelte";
+import { isChapterEditable, isEditionEditable } from "../page/Contexts";
+import LineBreakNode from "../../models/chapter/LineBreakNode";
+import LineBreak from "./LineBreak.svelte";
+let { node, placeholder = void 0 } = $props();
+let format = $derived(node.getFormat());
+let tag = $derived(format === "*" ? "strong" : format === "_" ? "em" : format === "^" ? "sup" : format === "v" ? "sub" : "span");
+let showPlaceholder = $derived(node.isEmptyText() && placeholder !== void 0 && (isChapterEditable() || isEditionEditable()));
 </script>
 
 <svelte:element

package/dist/components/chapter/Format.svelte.d.ts

@@ -1,20 +1,9 @@
-import { SvelteComponent } from "svelte";
 import FormatNode from '../../models/chapter/FormatNode';
-declare const __propDef: {
-    props: {
-        node: FormatNode;
-        placeholder?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FormatProps = typeof __propDef.props;
-export type FormatEvents = typeof __propDef.events;
-export type FormatSlots = typeof __propDef.slots;
-export default class Format extends SvelteComponent<FormatProps, FormatEvents, FormatSlots> {
+import Format from './Format.svelte';
+interface Props {
+    node: FormatNode;
+    placeholder?: string | undefined;
 }
-export {};
+declare const Format: import("svelte").Component<Props, {}, "">;
+type Format = ReturnType<typeof Format>;
+export default Format;

package/dist/components/chapter/InlineCode.svelte

@@ -1,9 +1,7 @@
-<svelte:options immutable={true} />
-
-<script>import { isChapterEditable } from '../page/Contexts';
-import Code from './Code.svelte';
-import Text from './Text.svelte';
-export let node;
+<script lang="ts">import { isChapterEditable } from "../page/Contexts";
+import Code from "./Code.svelte";
+import Text from "./Text.svelte";
+let { node } = $props();
 let editable = isChapterEditable();
 </script>
 
@@ -17,6 +15,7 @@ let editable = isChapterEditable();
         editable={false}
         inline={true}
         language={node.getMeta()}
-        nodeID={node.getText().nodeID}>{node.getText().getText()}</Code
-    >
+        nodeID={node.getText().nodeID}
+        code={node.getText().getText()}
+    />
 {/if}