bookish-press 0.4.47 → 0.4.49

package/{src/lib/components → components}/chapter/Label.svelte

@@ -1,28 +1,19 @@
 <svelte:options immutable={true} />
 
-<script lang="ts">
-    import type LabelNode from '$lib/models/chapter/LabelNode';
-    import Atom from '$lib/components/chapter/Atom.svelte';
-    import {
-        getChapter,
-        getEdition,
-        isChapterEditable,
-    } from '../page/Contexts';
-    import Problem from './Problem.svelte';
-
-    export let node: LabelNode;
-
-    let editable = isChapterEditable();
-    let chapter = getChapter();
-    let edition = getEdition();
-
-    $: ast =
-        $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
-    $: duplicate =
-        ast === undefined
-            ? false
-            : ast.getLabels().filter((l) => l.getMeta() === node.getMeta())
-                  .length > 1;
+<script>import Atom from './Atom.svelte';
+import { getChapter, getEdition, isChapterEditable, } from '../page/Contexts';
+import Problem from './Problem.svelte';
+export let node;
+let editable = isChapterEditable();
+let chapter = getChapter();
+let edition = getEdition();
+$: ast =
+    $edition && $chapter ? $chapter.chapter.getAST($edition) : undefined;
+$: duplicate =
+    ast === undefined
+        ? false
+        : ast.getLabels().filter((l) => l.getMeta() === node.getMeta())
+            .length > 1;
 </script>
 
 <Atom {node}>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type LabelNode from '../../models/chapter/LabelNode';
+declare const __propDef: {
+    props: {
+        node: LabelNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LabelProps = typeof __propDef.props;
+export type LabelEvents = typeof __propDef.events;
+export type LabelSlots = typeof __propDef.slots;
+export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
+}
+export {};

package/{src/lib/components → components}/chapter/Link.svelte

@@ -1,34 +1,28 @@
 <svelte:options immutable={true} />
 
-<script lang="ts">
-    import type LinkNode from '$lib/models/chapter/LinkNode';
-    import { getBase, getEdition, isChapterEditable } from '../page/Contexts';
-    import Text from './Text.svelte';
-    import Problem from './Problem.svelte';
-
-    export let node: LinkNode;
-
-    let base = getBase();
-    let editable = isChapterEditable();
-    let edition = getEdition();
-
-    $: url = node.getMeta();
-    $: content = 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];
-            }
-
-            if (chapter !== '' && !$edition?.hasChapter(chapter)) return true;
+<script>import { getBase, getEdition, isChapterEditable } from '../page/Contexts';
+import Text from './Text.svelte';
+import Problem from './Problem.svelte';
+export let node;
+let base = getBase();
+let editable = isChapterEditable();
+let edition = getEdition();
+$: url = node.getMeta();
+$: content = 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];
         }
-        return false;
+        if (chapter !== '' && !$edition?.hasChapter(chapter))
+            return true;
     }
+    return false;
+}
 </script>
 
 {#if editable}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type LinkNode from '../../models/chapter/LinkNode';
+declare const __propDef: {
+    props: {
+        node: LinkNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+export default class Link extends SvelteComponentTyped<LinkProps, LinkEvents, LinkSlots> {
+}
+export {};

package/{src/lib/components → components}/chapter/List.svelte

@@ -1,10 +1,8 @@
 <svelte:options immutable={true} />
 
-<script lang="ts">
-    import ListNode from '$lib/models/chapter/ListNode';
-    import Format from './Format.svelte';
-
-    export let node: ListNode;
+<script>import ListNode from '../../models/chapter/ListNode';
+import Format from './Format.svelte';
+export let node;
 </script>
 
 <svelte:element

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import ListNode from '../../models/chapter/ListNode';
+declare const __propDef: {
+    props: {
+        node: ListNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/{src/lib/components → components}/chapter/Marginal.svelte

@@ -1,60 +1,47 @@
 <svelte:options immutable={true} />
 
-<script lang="ts">
-    import { isMobile, watchMobile } from '$lib/util/isMobile';
-    import { onMount } from 'svelte';
-    import type Node from '../../models/chapter/Node';
-    import {
-        getCaret,
-        getChapter,
-        isChapterEditable,
-    } from '$lib/components/page/Contexts';
-
-    export let node: Node;
-    export let id: string;
-    export let label: string;
-
-    let hovered = false;
-    let chapter = getChapter();
-    $: 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() {
-        if (editable) return;
-
-        if ($chapter) {
-            if (isMobile() && isHidden) $chapter.marginal.set(id);
-            // Otherwise, deselect.
-            else $chapter.marginal.set(undefined);
-        }
+<script>import { isMobile, watchMobile } from '../../util/isMobile';
+import { onMount } from 'svelte';
+import { getCaret, getChapter, isChapterEditable, } from '../page/Contexts';
+export let node;
+export let id;
+export let label;
+let hovered = false;
+let chapter = getChapter();
+$: 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() {
+    if (editable)
+        return;
+    if ($chapter) {
+        if (isMobile() && isHidden)
+            $chapter.marginal.set(id);
+        // Otherwise, deselect.
+        else
+            $chapter.marginal.set(undefined);
     }
-
-    function handleEnter() {
-        hovered = true;
-    }
-    function handleExit() {
-        hovered = false;
-    }
-
-    onMount(() => {
-        const mediaWatch = watchMobile();
-        mediaWatch.addEventListener('change', toggle);
-
-        return () => mediaWatch.removeEventListener('change', toggle);
-    });
+}
+function handleEnter() {
+    hovered = true;
+}
+function handleExit() {
+    hovered = false;
+}
+onMount(() => {
+    const mediaWatch = watchMobile();
+    mediaWatch.addEventListener('change', toggle);
+    return () => mediaWatch.removeEventListener('change', toggle);
+});
 </script>
 
 <span

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } 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: {};
+    };
+};
+export type MarginalProps = typeof __propDef.props;
+export type MarginalEvents = typeof __propDef.events;
+export type MarginalSlots = typeof __propDef.slots;
+export default class Marginal extends SvelteComponentTyped<MarginalProps, MarginalEvents, MarginalSlots> {
+}
+export {};

package/{src/lib/components → components}/chapter/Paragraph.svelte

@@ -1,32 +1,27 @@
 <svelte:options immutable={true} />
 
-<script lang="ts">
-    import type ParagraphNode from '$lib/models/chapter/ParagraphNode';
-    import Format from './Format.svelte';
-    import { getChapter, getEdition } from '../page/Contexts';
-
-    export let node: ParagraphNode;
-    export let placeholder: string | undefined = undefined;
-
-    $: level = node.getLevel();
-    $: chapter = getChapter();
-    $: edition = getEdition();
-
-    $: id =
-        node.getLevel() === 0 ||
+<script>import Format from './Format.svelte';
+import { getChapter, getEdition } from '../page/Contexts';
+export let node;
+export let placeholder = undefined;
+$: level = node.getLevel();
+$: chapter = getChapter();
+$: edition = getEdition();
+$: id =
+    node.getLevel() === 0 ||
         $chapter === undefined ||
         $edition === undefined
-            ? undefined
-            : 'header-' +
-              ($chapter.chapter.getAST($edition)?.getHeaders().indexOf(node) ??
-                  '');
-    $: classes =
-        node.getLevel() === 0
-            ? undefined
-            : 'page-header' +
-              ($chapter && $chapter.highlightedID === id
-                  ? ' bookish-content-highlight'
-                  : '');
+        ? undefined
+        : 'header-' +
+            ($chapter.chapter.getAST($edition)?.getHeaders().indexOf(node) ??
+                '');
+$: classes =
+    node.getLevel() === 0
+        ? undefined
+        : 'page-header' +
+            ($chapter && $chapter.highlightedID === id
+                ? ' bookish-content-highlight'
+                : '');
 </script>
 
 {#if level === 0}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type ParagraphNode from '../../models/chapter/ParagraphNode';
+declare const __propDef: {
+    props: {
+        node: ParagraphNode;
+        placeholder?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ParagraphProps = typeof __propDef.props;
+export type ParagraphEvents = typeof __propDef.events;
+export type ParagraphSlots = typeof __propDef.slots;
+export default class Paragraph extends SvelteComponentTyped<ParagraphProps, ParagraphEvents, ParagraphSlots> {
+}
+export {};

package/{src/lib/components → components}/chapter/Positioned.svelte

@@ -1,9 +1,6 @@
 <svelte:options immutable={true} />
 
-<script lang="ts">
-    import type Position from '$lib/models/chapter/Position';
-
-    export let position: Position;
+<script>export let position;
 </script>
 
 <div

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type Position from '../../models/chapter/Position';
+declare const __propDef: {
+    props: {
+        position: Position;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PositionedProps = typeof __propDef.props;
+export type PositionedEvents = typeof __propDef.events;
+export type PositionedSlots = typeof __propDef.slots;
+export default class Positioned extends SvelteComponentTyped<PositionedProps, PositionedEvents, PositionedSlots> {
+}
+export {};

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ProblemProps */
+/** @typedef {typeof __propDef.events}  ProblemEvents */
+/** @typedef {typeof __propDef.slots}  ProblemSlots */
+export default class Problem extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ProblemProps = typeof __propDef.props;
+export type ProblemEvents = typeof __propDef.events;
+export type ProblemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/chapter/Python.svelte

@@ -0,0 +1,128 @@
+<script context="module">"use strict";
+</script>
+
+<script>import { afterUpdate, onMount } from 'svelte';
+import Code from './Code.svelte';
+export let node;
+export let startCode;
+// Start with whatever code was passed in.
+let code = startCode;
+// What is currently rendered to the console (not always program output).
+let output = '';
+// Whether the runtime is loaded. Initialized based on presence of global.
+let loaded = skulptLoaded();
+let ref = null;
+onMount(() => {
+    // Dynamically load the script to minimize payload and reduce index complexity.
+    if (document.getElementById('skulpt') === null) {
+        let script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.async = true;
+        script.id = 'skulpt';
+        script.onload = () => (loaded = true);
+        script.src =
+            'https://cdn.jsdelivr.net/combine/npm/skulpt@1.2.0/dist/skulpt.min.js,npm/skulpt@1.2.0/dist/skulpt-stdlib.min.js';
+        document.getElementsByTagName('head')[0].appendChild(script);
+    }
+});
+// Always scroll to the bottom of the output.
+afterUpdate(() => {
+    if (ref) {
+        let outputView = ref.querySelector('.bookish-python-output');
+        if (outputView)
+            outputView.scrollTop = outputView.scrollHeight;
+    }
+});
+function skulptLoaded() {
+    return window.hasOwnProperty('Sk');
+}
+function reset() {
+    code = startCode;
+}
+function handleEdit(newCode) {
+    code = newCode;
+}
+function handleOutput(out) {
+    // Update the state to re-render.
+    output += out;
+}
+function start() {
+    if (skulptLoaded()) {
+        // Communicate that executing is starting, wait a second, then execute the program.
+        // This is important in case the user wants to run it again; it provides confirmation that it was run again.
+        output = 'Executing...';
+        setTimeout(() => execute(), 500);
+    }
+}
+function execute() {
+    // Reset the output, run the code, and update it's output.
+    output = '';
+    if (Sk) {
+        Sk.configure({ output: handleOutput });
+        try {
+            if (Sk)
+                Sk.importMainWithBody('<stdin>', false, code, true);
+        }
+        catch (error) {
+            handleOutput(error);
+        }
+    }
+}
+$: lines = output.split('\n');
+</script>
+
+<div class="bookish-python" bind:this={ref}>
+    <Code
+        inline={false}
+        language={'python'}
+        editable
+        edited={handleEdit}
+        nodeID={node.nodeID}>{code}</Code
+    >
+    <div class="bookish-python-controls">
+        <button disabled={startCode === code} on:click={reset}
+            >{'\u21BB'}</button
+        >
+        <button disabled={!loaded} on:click={start}>{'\u25B6\uFE0E'}</button>
+        <div class="bookish-python-output">
+            {#each lines as line, index}
+                <span class="python-output-line"
+                    >{line}{#if index < lines.length - 1}<br />{/if}</span
+                >
+            {/each}
+        </div>
+    </div>
+</div>
+
+<style>
+    .bookish-python-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .bookish-python button {
+        background: var(--bookish-block-background-color);
+        border: 1px solid var(--bookish-border-color-light);
+        width: 3em;
+        height: 3rem;
+        padding: 0;
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .bookish-python .bookish-python-output {
+        flex: 1;
+        border: 1px solid lightGray;
+        padding: 0.5rem;
+        height: 3rem;
+        overflow-y: scroll;
+        display: inline-block;
+        vertical-align: top;
+        color: var(--bookish-paragraph-color);
+        font-family: var(--bookish-code-font-family);
+        font-weight: var(--bookish-code-font-weight);
+        font-size: var(--bookish-block-font-size);
+    }
+</style>

package/components/chapter/Python.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type CodeNode from '../../models/chapter/CodeNode';
+declare const __propDef: {
+    props: {
+        node: CodeNode;
+        startCode: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PythonProps = typeof __propDef.props;
+export type PythonEvents = typeof __propDef.events;
+export type PythonSlots = typeof __propDef.slots;
+export default class Python extends SvelteComponentTyped<PythonProps, PythonEvents, PythonSlots> {
+}
+export {};

package/{src/lib/components → components}/chapter/Quote.svelte

@@ -1,19 +1,15 @@
 <svelte:options immutable={true} />
 
-<script lang="ts">
-    import type QuoteNode from '$lib/models/chapter/QuoteNode';
-    import Block from './Block.svelte';
-    import Format from './Format.svelte';
-    import Positioned from './Positioned.svelte';
-
-    export let node: QuoteNode;
-
-    $: credit = node.getCredit();
+<script>import Block from './Block.svelte';
+import Format from './Format.svelte';
+import Positioned from './Positioned.svelte';
+export let node;
+$: credit = node.getCredit();
 </script>
 
 <Positioned position={node.getPosition()}>
     <figure>
-        <blockquote class={'quote'} data-nodeid={node.nodeID}>
+        <blockquote class="quote" data-nodeid={node.nodeID}>
             {#each node.getBlocks() as element (element.nodeID)}
                 <Block node={element} />
             {/each}
@@ -27,6 +23,14 @@
 </Positioned>
 
 <style>
+    figure {
+        margin: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+    }
+
     .quote {
         clear: both;
         border: none;
@@ -57,13 +61,15 @@
     .quote:before {
         content: '\201C';
         position: relative;
-        top: 80pt;
-        left: -40pt;
-        font-family: 'Modum Extra';
+        top: 0;
+        left: -0.5em em;
+        height: 0.3em;
+        font-family: var(--bookish-header-font-family);
         font-size: 120pt;
         font-weight: bold;
         color: var(--bookish-highlight-color);
         z-index: -1;
+        display: block;
     }
 
     .caption:not(.empty):before {

package/components/chapter/Quote.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type QuoteNode from '../../models/chapter/QuoteNode';
+declare const __propDef: {
+    props: {
+        node: QuoteNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QuoteProps = typeof __propDef.props;
+export type QuoteEvents = typeof __propDef.events;
+export type QuoteSlots = typeof __propDef.slots;
+export default class Quote extends SvelteComponentTyped<QuoteProps, QuoteEvents, QuoteSlots> {
+}
+export {};