bookish-press 0.7.4 → 0.8.2

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;

package/dist/components/chapter/Positioned.svelte

@@ -1,6 +1,4 @@
-<svelte:options immutable={true} />
-
-<script>export let position;
+<script lang="ts">let { position, children } = $props();
 </script>
 
 <div
@@ -8,7 +6,7 @@
         ? 'inset-left'
         : position === '>'
         ? 'inset-right'
-        : ''}><slot /></div
+        : ''}>{@render children?.()}</div
 >
 
 <style>

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

@@ -1,21 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type Position from '../../models/chapter/Position';
-declare const __propDef: {
-    props: {
-        position: Position;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PositionedProps = typeof __propDef.props;
-export type PositionedEvents = typeof __propDef.events;
-export type PositionedSlots = typeof __propDef.slots;
-export default class Positioned extends SvelteComponent<PositionedProps, PositionedEvents, PositionedSlots> {
+interface Props {
+    position: Position;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Positioned: import("svelte").Component<Props, {}, "">;
+type Positioned = ReturnType<typeof Positioned>;
+export default Positioned;

package/dist/components/chapter/Problem.svelte

@@ -1,6 +1,7 @@
-<svelte:options immutable={true} />
+<script lang="ts">let { children } = $props();
+</script>
 
-<span><slot /></span>
+<span>{@render children?.()}</span>
 
 <style>
     span {

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

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  ProblemProps */
-/** @typedef {typeof __propDef.events}  ProblemEvents */
-/** @typedef {typeof __propDef.slots}  ProblemSlots */
-export default class Problem extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export type ProblemProps = typeof __propDef.props;
-export type ProblemEvents = typeof __propDef.events;
-export type ProblemSlots = 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 Problem: import("svelte").Component<Props, {}, "">;
+type Problem = ReturnType<typeof Problem>;
+export default Problem;