bookish-press 0.7.4 → 0.9.2

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}

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

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

package/dist/components/chapter/Label.svelte

@@ -1,17 +1,11 @@
-<svelte:options immutable={true} />
-
-<script>import Atom from './Atom.svelte';
-import { getChapter, getRoot, isChapterEditable } from '../page/Contexts';
-import Problem from './Problem.svelte';
-export let node;
+<script lang="ts">import Atom from "./Atom.svelte";
+import { getChapter, getRoot, isChapterEditable } from "../page/Contexts";
+import Problem from "./Problem.svelte";
+let { node } = $props();
 let editable = isChapterEditable();
 let chapter = getChapter();
 let root = getRoot();
-$: duplicate =
-    $root === undefined
-        ? false
-        : $root.getLabels().filter((l) => l.getMeta() === node.getMeta())
-            .length > 1;
+let duplicate = $derived($root === void 0 ? false : $root.getLabels().filter((l) => l.getMeta() === node.getMeta()).length > 1);
 </script>
 
 <Atom {node}>

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

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

package/dist/components/chapter/LineBreak.svelte

@@ -1,6 +1,4 @@
-<svelte:options immutable={true} />
-
-<script>export let node;
+<script lang="ts">let { node } = $props();
 </script>
 
 <br data-nodeid={node.nodeID} />

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

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

package/dist/components/chapter/Link.svelte

@@ -1,31 +1,25 @@
-<svelte:options immutable={true} />
-
-<script>import { getBase, getEdition, isChapterEditable } from '../page/Contexts';
-import Text from './Text.svelte';
-import Problem from './Problem.svelte';
-export let node;
+<script lang="ts">import { getBase, getEdition, isChapterEditable } from "../page/Contexts";
+import Text from "./Text.svelte";
+import Problem from "./Problem.svelte";
+let { node } = $props();
 let base = getBase();
 let editable = isChapterEditable();
 let edition = getEdition();
-$: url = node.getMeta();
-$: content = node.getText();
+let url = $derived(node.getMeta());
+let content = $derived(node.getText());
 function isInvalidChapterLink() {
-    // If it's internal, validate it.
-    if (!url.startsWith('http')) {
-        // Pull out any labels and just get the chapter name.
-        let chapter = url;
-        if (url.indexOf(':') >= 0) {
-            let parts = chapter.split(':');
-            chapter = parts[0];
-        }
-        else if (url.indexOf('#') >= 0) {
-            let parts = chapter.split('#');
-            chapter = parts[0];
-        }
-        if (chapter !== '' && !$edition?.hasChapter(chapter))
-            return true;
+  if (!url.startsWith("http")) {
+    let chapter = url;
+    if (url.indexOf(":") >= 0) {
+      let parts = chapter.split(":");
+      chapter = parts[0];
+    } else if (url.indexOf("#") >= 0) {
+      let parts = chapter.split("#");
+      chapter = parts[0];
     }
-    return false;
+    if (chapter !== "" && !$edition?.hasChapter(chapter)) return true;
+  }
+  return false;
 }
 </script>
 

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

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

package/dist/components/chapter/List.svelte

@@ -1,8 +1,7 @@
-<svelte:options immutable={true} />
-
-<script>import ListNode from '../../models/chapter/ListNode';
-import Format from './Format.svelte';
-export let node;
+<script lang="ts">import List from "./List.svelte";
+import ListNode from "../../models/chapter/ListNode";
+import Format from "./Format.svelte";
+let { node } = $props();
 </script>
 
 <svelte:element
@@ -11,7 +10,7 @@ export let node;
 >
     {#each node.getItems() as item (item.nodeID)}
         {#if item instanceof ListNode}
-            <svelte:self node={item} />
+            <List node={item} />
         {:else}
             <li><Format node={item} /></li>
         {/if}
@@ -39,13 +38,14 @@ export let node;
         list-style-type: decimal;
     }
 
-    /* Second level is lowercase alpha */
-    ol ol li {
+    /* Second level is lowercase alpha. Nested lists render as child List
+       components, so the inner elements need :global to match. */
+    ol :global(ol li) {
         list-style-type: lower-alpha;
     }
 
     /* Third level is uppercase alpha */
-    ol ol ol li {
+    ol :global(ol ol li) {
         list-style-type: upper-alpha;
     }
 

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

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

package/dist/components/chapter/Marginal.svelte

@@ -1,61 +1,60 @@
-<svelte:options immutable={true} />
-
-<script>import { isMobile, watchMobile } from '../../util/isMobile';
-import { onMount } from 'svelte';
-import { getCaret, getChapter, isChapterEditable, } from '../page/Contexts';
-import AtomNode from '../../models/chapter/AtomNode';
-export let node;
-export let id;
-export let label;
-let hovered = false;
+<script lang="ts">import { isMobile, watchMobile } from "../../util/isMobile";
+import { onMount } from "svelte";
+import {
+  getCaret,
+  getChapter,
+  isChapterEditable
+} from "../page/Contexts";
+import AtomNode from "../../models/chapter/AtomNode";
+let { node, id, label, interactor, content } = $props();
+let hovered = $state(false);
 let chapter = getChapter();
-$: editable = isChapterEditable();
+let editable = isChapterEditable();
 let caret = getCaret();
-// If there's no marginal selected or this is different from the current selection, this is hidden.
-$: selectedMarginal = $chapter?.marginal;
-$: isHidden = editable
-    ? // If editable, it's hidden if the caret is not inside the marginal content.
-        !($caret?.range?.start.node === node ||
-            $caret?.range?.start.node
-                .getAncestors($caret.root)
-                .some((ancestor) => ancestor === node))
-    : // If not editable, it's hidden if it's not selected.
-        $selectedMarginal !== id;
-function toggle(event, interactor) {
-    if (editable) {
-        if (interactor) {
-            if (editable && $caret && node instanceof AtomNode) {
-                // Select this so that the view stays focused.
-                $caret.setCaret({
-                    start: { node, index: 0 },
-                    end: { node, index: 0 },
-                });
-                if (event) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                }
-            }
-            return;
+let selectedMarginal = $derived($chapter?.marginal);
+let isHidden = $derived(
+  editable ? (
+    // If editable, it's hidden if the caret is not inside the marginal content.
+    !($caret?.range?.start.node === node || $caret?.range?.start.node.getAncestors($caret.root).some((ancestor) => ancestor === node))
+  ) : (
+    // If not editable, it's hidden if it's not selected.
+    $selectedMarginal !== id
+  )
+);
+function toggle(event, interacted) {
+  if (editable) {
+    if (interacted) {
+      if (editable && $caret && node instanceof AtomNode) {
+        $caret.setCaret({
+          start: { node, index: 0 },
+          end: { node, index: 0 }
+        });
+        if (event) {
+          event.stopPropagation();
+          event.preventDefault();
         }
+      }
+      return;
     }
-    if ($chapter) {
-        if (isMobile() && isHidden)
-            $chapter.marginal.set(id);
-        // Otherwise, deselect.
-        else
-            $chapter.marginal.set(undefined);
-    }
+  }
+  if ($chapter) {
+    if (isMobile() && isHidden) $chapter.marginal.set(id);
+    else $chapter.marginal.set(void 0);
+  }
 }
 function handleEnter() {
-    hovered = true;
+  hovered = true;
 }
 function handleExit() {
-    hovered = false;
+  hovered = false;
 }
 onMount(() => {
-    const mediaWatch = watchMobile();
-    mediaWatch.addEventListener('change', () => toggle(undefined, false));
-    return () => mediaWatch.removeEventListener('change', () => toggle(undefined, false));
+  const mediaWatch = watchMobile();
+  mediaWatch.addEventListener("change", () => toggle(void 0, false));
+  return () => mediaWatch.removeEventListener(
+    "change",
+    () => toggle(void 0, false)
+  );
 });
 </script>
 
@@ -68,26 +67,26 @@ onMount(() => {
     aria-label={label}
     role="button"
     tabindex="0"
-    on:mousedown={(event) => toggle(event, true)}
-    on:keydown={(event) =>
+    onmousedown={(event) => toggle(event, true)}
+    onkeydown={(event) =>
         event.key === 'Enter' || event.key === ' '
             ? toggle(undefined, true)
             : undefined}
-    on:mouseenter={handleEnter}
-    on:mouseleave={handleExit}><slot name="interactor" /></span
+    onmouseenter={handleEnter}
+    onmouseleave={handleExit}>{@render interactor?.()}</span
 ><span
     class={'bookish-marginal' +
         (isHidden ? ' bookish-marginal-hidden' : '') +
         (hovered ? ' bookish-marginal-hovered' : '')}
     role="button"
     tabindex={editable ? null : 0}
-    on:mousedown={() => toggle(undefined, false)}
-    on:keydown={(event) =>
+    onmousedown={() => toggle(undefined, false)}
+    onkeydown={(event) =>
         event.key === 'Enter' || event.key === ' '
             ? toggle(undefined, false)
             : undefined}
-    on:mouseenter={handleEnter}
-    on:mouseleave={handleExit}><slot name="content" /></span
+    onmouseenter={handleEnter}
+    onmouseleave={handleExit}>{@render content?.()}</span
 >
 
 <style>
@@ -155,10 +154,10 @@ onMount(() => {
         }
 
         :global(
-                .bookish-definition
-                    .bookish-marginal.bookish-marginal-hovered
-                    .bookish-definition-entry
-            ) {
+            .bookish-definition
+                .bookish-marginal.bookish-marginal-hovered
+                .bookish-definition-entry
+        ) {
             background: linear-gradient(
                     to right,
                     var(--bookish-link-color) 0px,

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

@@ -1,24 +1,12 @@
-import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
 import type Node from '../../models/chapter/Node';
-declare const __propDef: {
-    props: {
-        node: Node;
-        id: string;
-        label: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        interactor: {};
-        content: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type MarginalProps = typeof __propDef.props;
-export type MarginalEvents = typeof __propDef.events;
-export type MarginalSlots = typeof __propDef.slots;
-export default class Marginal extends SvelteComponent<MarginalProps, MarginalEvents, MarginalSlots> {
+interface Props {
+    node: Node;
+    id: string;
+    label: string;
+    interactor?: Snippet;
+    content?: Snippet;
 }
-export {};
+declare const Marginal: import("svelte").Component<Props, {}, "">;
+type Marginal = ReturnType<typeof Marginal>;
+export default Marginal;

package/dist/components/chapter/Paragraph.svelte

@@ -1,29 +1,14 @@
-<svelte:options immutable={true} />
-
-<script>import Format from './Format.svelte';
-import { getChapter, getEdition, getRoot } from '../page/Contexts';
-export let node;
-export let placeholder = undefined;
-$: level = node.getLevel();
+<script lang="ts">import Format from "./Format.svelte";
+import { getChapter, getEdition, getRoot } from "../page/Contexts";
+let { node, placeholder = void 0 } = $props();
+let level = $derived(node.getLevel());
 let chapter = getChapter();
 let edition = getEdition();
 let root = getRoot();
-$: id =
-    node.getLevel() === 0 || $edition === undefined
-        ? undefined
-        : 'header-' + ($root.getHeaders().indexOf(node) ?? '');
-$: classes =
-    node.getLevel() === 0
-        ? undefined
-        : 'page-header' +
-            ($chapter && $chapter.highlightedID === id
-                ? ' bookish-content-highlight'
-                : '');
-$: firstParagraph = $root.getFirstParagraph();
-$: dropcap =
-    placeholder === undefined &&
-        node === firstParagraph &&
-        /^[a-zA-Z]/.test(firstParagraph.getFirstTextNode().getText());
+let id = $derived(node.getLevel() === 0 || $edition === void 0 ? void 0 : "header-" + ($root.getHeaders().indexOf(node) ?? ""));
+let classes = $derived(node.getLevel() === 0 ? void 0 : "page-header" + ($chapter && $chapter.highlightedID === id ? " bookish-content-highlight" : ""));
+let firstParagraph = $derived($root.getFirstParagraph());
+let dropcap = $derived(placeholder === void 0 && node === firstParagraph && /^[a-zA-Z]/.test(firstParagraph.getFirstTextNode().getText()));
 </script>
 
 {#if level === 0}

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

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