bookish-press 0.4.1 → 0.4.3

package/components/page/BulkReferenceEditor.svelte

@@ -1,32 +1,63 @@
-<script>import Instructions from "./Instructions.svelte";
-import { getUniqueReferenceID, mineReference } from "../../util/mineReference";
-import ReferenceNode from "../../models/chapter/ReferenceNode";
-import { getEdition } from "./Contexts";
+<script>import Instructions from './Instructions.svelte';
+import { getUniqueReferenceID, mineReference, } from '../../util/mineReference';
+import Reference from '../../models/book/Reference';
+import { getEdition, isEditionEditable, isEditionPartiallyEditable, } from './Contexts';
+import Button from '../app/Button.svelte';
 let edition = getEdition();
-let text = "";
+let text = '';
+let editable = isEditionEditable() || isEditionPartiallyEditable();
 function handleBulkAdd() {
     // Split by lines, skipping empty lines.
-    const references = text.split(/\n+/).map(line => mineReference(Object.keys($edition.getReferences()), line));
-    $edition.addReferences(references)
-        .catch(() => {
-        alert("Failed to save references.");
-    });
+    const references = text
+        .split(/\n+/)
+        .map((line) => mineReference(Object.keys($edition?.getReferences() ?? []), line));
+    if ($edition) {
+        edition.set($edition.withNewReferences(references));
+        text = '';
+    }
 }
 function handleEmptyAdd() {
-    $edition.addReferences([new ReferenceNode(getUniqueReferenceID(Object.keys($edition.getReferences())))])
-        .catch(() => {
-        alert("Failed to save empty reference.");
-    });
+    if ($edition) {
+        edition.set($edition.withNewReferences([
+            new Reference(getUniqueReferenceID(Object.keys($edition.getReferences()))),
+        ]));
+    }
 }
 </script>
 
-<Instructions>
-    To cite references in a chapter, add them here.
-    You can add one at a time, or try pasting them in bulk, and we'll do our best to pull out the relevant parts, looking for things that look like author lists, years, sources, and URLs.
-    Be sure to verify it though &mdash; it's likely to get some things wrong!
+<Instructions {editable}>
+    To add references to a chapter, add them here first. You can add one at a
+    time, or try pasting them in bulk, and this page will try to pull out author
+    lists, years, sources, and URLs. Be sure to verify it though &mdash; it's
+    likely to get some things wrong.
 </Instructions>
-<div>
-    <textarea rows={5} bind:value={text} style="width: 100%"></textarea>
-    <button disabled={text.length === 0} on:click={handleBulkAdd}>Add bulk references</button>
-    <button on:click={handleEmptyAdd}>Add empty reference</button>
-</div>
+
+<textarea rows={5} bind:value={text} style="width: 100%" />
+<Button
+    tooltip="convert to references"
+    disabled={text.length === 0}
+    command={handleBulkAdd}>+ bulk references</Button
+>
+<Button tooltip="add empty reference" command={handleEmptyAdd}
+    >+ reference</Button
+>
+
+<style>
+    textarea {
+        width: 100%;
+        padding: var(--app-chrome-padding);
+        font-family: var(--app-font);
+        font-size: var(--app-font-size);
+        border: none;
+        border-top: var(--app-chrome-border-size) solid var(--app-border-color);
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-border-color);
+        margin-bottom: var(--app-chrome-padding);
+    }
+
+    textarea:focus {
+        border-bottom-color: var(--app-interactive-color);
+        border-top-color: var(--app-interactive-color);
+        outline: none;
+    }
+</style>

package/components/page/BulkReferenceEditor.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type BulkReferenceEditorProps = typeof __propDef.props;
-export declare type BulkReferenceEditorEvents = typeof __propDef.events;
-export declare type BulkReferenceEditorSlots = typeof __propDef.slots;
+export type BulkReferenceEditorProps = typeof __propDef.props;
+export type BulkReferenceEditorEvents = typeof __propDef.events;
+export type BulkReferenceEditorSlots = typeof __propDef.slots;
 export default class BulkReferenceEditor extends SvelteComponentTyped<BulkReferenceEditorProps, BulkReferenceEditorEvents, BulkReferenceEditorSlots> {
 }
 export {};

package/components/page/Chapter.svelte

@@ -1,6 +1,6 @@
-<script>import Parser from "../../models/chapter/Parser";
+<script>import Parser from '../../models/chapter/Parser';
 import Header from './Header.svelte';
-import Authors from "./Authors.svelte";
+import Authors from './Authors.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
 import TextEditor from '../editor/TextEditor.svelte';
@@ -8,25 +8,36 @@ import BookishEditor from '../editor/BookishEditor.svelte';
 import Toggle from '../editor/Toggle.svelte';
 import Instructions from './Instructions.svelte';
 import ChapterBody from '../chapter/ChapterBody.svelte';
-import PossibleReference from "./PossibleReference.svelte";
-import { CHAPTER, getEdition, isEditable } from "./Contexts";
-import { writable } from "svelte/store";
-import { onMount, setContext } from "svelte";
-import { hideOutlineIfObscured, layoutMarginals } from "./margins";
-import scrollToEyeLevel from "../../util/scrollToEyeLevel";
-import { goto } from "$app/navigation";
-import ChapterNode from "../../models/chapter/ChapterNode";
+import PossibleReference from './PossibleReference.svelte';
+import ChapterNumber from './ChapterNumber.svelte';
+import Problem from '../chapter/Problem.svelte';
+import { CHAPTER, getUser, getBook, getEdition, isBookEditable, isChapterEditable, isEditionPartiallyEditable, getLeasee, lease, setChapter, isEditionEditable, } from './Contexts';
+import { writable } from 'svelte/store';
+import { onMount, setContext } from 'svelte';
+import { hideOutlineIfObscured, layoutMarginals } from './margins';
+import scrollToEyeLevel from '../../util/scrollToEyeLevel';
+import { goto } from '$app/navigation';
+import ChapterNode from '../../models/chapter/ChapterNode';
+import Muted from './Muted.svelte';
+import Title from './Title.svelte';
+import PageHeader from './PageHeader.svelte';
+import Permissions from '../editor/Permissions.svelte';
 export let chapter;
 export let print = false;
+let book = getBook();
 let edition = getEdition();
-let editable = isEditable();
+let auth = getUser();
 // Keep track of the scroll position to facilitate reading during reloads.
-function rememberPosition() { localStorage.setItem('scrollposition', "" + window.scrollY); }
+function rememberPosition() {
+    localStorage.setItem('scrollposition', '' + window.scrollY);
+}
 // When the window resizes, the responsive layout might cause the marginals to move to the footer.
 // when this happens, we want to immediately remove all of the explicit positioning.
-function handleResize() { layoutMarginals(); }
+function handleResize() {
+    layoutMarginals();
+}
 // The currently selected marginal; we only do one at a time.
-let marginal = undefined;
+let marginal = writable(undefined);
 // Keep track of which hash mark is scrolled to
 let highlightedID = undefined;
 // When this component is mounted...
@@ -40,7 +51,9 @@ onMount(() => {
     const observeHash = () => {
         // Get the ID without the hash and the corresponding element
         const elementID = window.location.hash.substring(1);
-        const element = elementID ? document.getElementById(elementID) : null;
+        const element = elementID
+            ? document.getElementById(elementID)
+            : null;
         // If it's not empty, observe it, and remember what we're observing for highlighting
         if (element) {
             highlightedID = elementID;
@@ -61,75 +74,62 @@ onMount(() => {
     window.addEventListener('resize', handleResize);
     // Remember the scroll position before a refresh.
     // We have to do all of these because browser support varies.
-    window.addEventListener("beforeunload", rememberPosition);
-    window.addEventListener("visibilitychange", rememberPosition);
-    window.addEventListener("pagehide", rememberPosition);
+    window.addEventListener('beforeunload', rememberPosition);
+    window.addEventListener('visibilitychange', rememberPosition);
+    window.addEventListener('pagehide', rememberPosition);
     // Start listening for hash changes, since we want to remove them upon scrolling away from them.
-    window.addEventListener("pushstate", observeHash);
-    window.addEventListener("popstate", observeHash);
-    window.addEventListener("hashchange", observeHash);
+    window.addEventListener('pushstate', observeHash);
+    window.addEventListener('popstate', observeHash);
+    window.addEventListener('hashchange', observeHash);
     // Make an intersection observer to monitor the location of elements selected by the URL hash ID.
-    const observer = new IntersectionObserver((entries => {
+    const observer = new IntersectionObserver((entries) => {
         // Go through all of the monitored elements
-        entries.forEach(entry => {
-            // If the observed element is out of view and in the hash, remove the hash 
-            if (entry.intersectionRatio === 0 && entry.target.id === window.location.hash.substring(1)) {
-                history.pushState("", document.title, window.location.pathname + window.location.search);
+        entries.forEach((entry) => {
+            // If the observed element is out of view and in the hash, remove the hash
+            if (entry.intersectionRatio === 0 &&
+                entry.target.id === window.location.hash.substring(1)) {
+                history.pushState('', document.title, window.location.pathname + window.location.search);
                 observer.unobserve(entry.target);
                 highlightedID = undefined;
             }
         });
-    }));
+    });
     // Do an initial check the hash to see if there's an ID to scroll to
     observeHash();
     // Position the marginals, since there's new content.
     layoutMarginals();
-    // Periodically save the chapter's edits.
-    const chapterSaverID = setInterval(() => {
-        $currentChapter.saveEdits();
-    }, 500);
     // On cleanup, unsubscribe from everything above.
     return () => {
         window.removeEventListener('scroll', handleScroll);
         window.removeEventListener('resize', handleResize);
         // Stop listening to page visibility changes.
-        window.removeEventListener("beforeunload", rememberPosition);
-        window.removeEventListener("visibilitychange", rememberPosition);
-        window.removeEventListener("pagehide", rememberPosition);
+        window.removeEventListener('beforeunload', rememberPosition);
+        window.removeEventListener('visibilitychange', rememberPosition);
+        window.removeEventListener('pagehide', rememberPosition);
         // Delete the remembered position so that the next page scrolls to top.
-        localStorage.removeItem("scrollposition");
+        localStorage.removeItem('scrollposition');
         // Stop listening for hash changes
-        window.removeEventListener("pushstate", observeHash);
-        window.removeEventListener("popstate", observeHash);
-        window.removeEventListener("hashchange", observeHash);
+        window.removeEventListener('pushstate', observeHash);
+        window.removeEventListener('popstate', observeHash);
+        window.removeEventListener('hashchange', observeHash);
         // Stop observing everything on unmount
         observer.disconnect();
-        // Stop saving.
-        clearInterval(chapterSaverID);
     };
 });
 // Position the marginals on mount.
 onMount(() => layoutMarginals());
-// Keep track of the current chapter in a store to manage listeners on the chapter.
-let currentChapter = writable(chapter);
-let chapterChanged = () => currentChapter.set(chapter);
-$: {
-    // Listen to the new edition
-    $currentChapter.removeListener(chapterChanged);
-    // Update the current edition.
-    currentChapter.set(chapter);
-    // Listen to changes on the book and chapter.
-    $currentChapter.addListener(chapterChanged);
-}
 // This gets called after the page is done loading. There are various things we scroll to.
 function scrollToLastLocation() {
     // In case loading changed marginal positions
     layoutMarginals();
     // If there's a word we're trying to highlight in the URL path, scroll to the corresponding match.
     if (location.search) {
-        const highlights = document.getElementsByClassName("bookish-text bookish-content-highlight");
+        const highlights = document.getElementsByClassName('bookish-text bookish-content-highlight');
         const num = getHighlightedNumber();
-        if (num && highlights.length > 0 && num < highlights.length && num >= 0) {
+        if (num &&
+            highlights.length > 0 &&
+            num < highlights.length &&
+            num >= 0) {
             scrollToEyeLevel(highlights[num]);
         }
     }
@@ -142,10 +142,13 @@ function scrollToLastLocation() {
         }
     }
     else {
-        // If we got to this page through a refresh, scroll to 
-        const entries = performance.getEntriesByType("navigation");
+        // If we got to this page through a refresh, scroll to
+        const entries = performance.getEntriesByType('navigation');
         const position = localStorage.getItem('scrollposition');
-        if (position !== null && entries.length > 0 && entries[entries.length - 1].type === "reload") {
+        if (position !== null &&
+            entries.length > 0 &&
+            entries[entries.length - 1]
+                .type === 'reload') {
             // Scroll to the previous position, if there was one, so that refresh preserves position.
             window.scrollTo(0, parseInt(position));
         }
@@ -155,39 +158,58 @@ function scrollToLastLocation() {
         }
     }
 }
-function getHighlightedWord() { return location.search.split("&")[0]?.split("=")[1] ?? undefined; }
+/** Account for static builds, where location isn't defined */
+function getLocation() {
+    return typeof location === 'undefined' ? undefined : location;
+}
+function getHighlightedWord() {
+    return getLocation()?.search.split('&')[0]?.split('=')[1] ?? undefined;
+}
 function getHighlightedNumber() {
-    const number = location.search.split("&")[1]?.split("=")[1];
+    const number = getLocation()?.search.split('&')[1]?.split('=')[1];
     return number === undefined ? undefined : parseInt(number);
 }
 // Prepare to render the chapter by getting some data from the chapter and book.
-$: chapterID = $currentChapter.getChapterID();
-$: chapterNumber = $edition.getChapterNumber(chapterID);
-$: chapterSection = $edition.getChapterSection(chapterID);
-$: chapterAST = $currentChapter.getAST();
+$: chapterID = chapter.getID();
+$: chapterNumber = $edition?.getChapterNumber(chapterID);
+$: chapterSection = $edition?.getChapterSection(chapterID);
+$: chapterAST = $edition ? chapter.getAST($edition) : undefined;
 $: citations = chapterAST ? chapterAST.getCitations() : undefined;
+$: editionNumber = $edition ? $edition.getEditionNumber() : undefined;
 let chapterStore = writable();
 setContext(CHAPTER, chapterStore);
 $: chapterStore.set({
     chapter: chapter,
     highlightedWord: getHighlightedWord(),
     highlightedID: highlightedID,
-    marginalID: marginal,
-    setMarginal: (id) => marginal = id,
-    layoutMarginals: layoutMarginals
+    marginal: marginal,
+    layoutMarginals: layoutMarginals,
 });
+let editable = isBookEditable() ||
+    isEditionEditable() ||
+    isChapterEditable() ||
+    ($auth !== undefined &&
+        $auth.user !== null &&
+        chapter.isEditor($auth.user.uid));
 </script>
 
-<Page afterLoaded={scrollToLastLocation} title={`${$edition.getTitle()} - ${chapter.getTitle()}`}>
-    <div class="bookish-chapter">
-        <Header 
+{#if $edition}
+    <Page
+        afterLoaded={scrollToLastLocation}
+        title={`${$edition.getTitle()} - ${chapter.getTitle()}`}
+    >
+        <Header
+            editable={isChapterEditable()}
+            id={chapter.id}
             header={chapter.getTitle()}
             label="Chapter title"
             tags={$edition.getTags()}
-            save={ text => chapter.setTitle(text) }
+            save={(text) =>
+                setChapter(edition, chapter, chapter.withTitle(text))}
             getImage={() => chapter.getImage()}
-            setImage={embed => chapter.setImage(embed)}
-            print={print}
+            setImage={(embed) =>
+                setChapter(edition, chapter, chapter.withImage(embed))}
+            {print}
         >
             <!-- Collapse the outline if a marginal is selected. -->
             <Outline
@@ -195,10 +217,9 @@ $: chapterStore.set({
                 collapse={marginal !== undefined}
                 previous={$edition.getPreviousChapterID(chapterID)}
                 next={$edition.getNextChapterID(chapterID)}
-                listener={ expanded => {
+                listener={(expanded) => {
                     // If the outline is being expanded, hide the marginal, otherwise leave it alone.
-                    if(expanded)
-                        marginal = undefined;
+                    if (expanded) marginal.set(undefined);
 
                     // Check if we need to hide the outline after positioning.
                     hideOutlineIfObscured();
@@ -206,96 +227,166 @@ $: chapterStore.set({
             />
             <!-- Add an editable chapter ID if in editor mode -->
             <svelte:fragment slot="before">
-                {#if editable }
-                    <span class="bookish-muted">
-                        <TextEditor 
-                            startText={chapter.getChapterID()} 
+                {#if editable && $book}
+                    <Muted>
+                        <TextEditor
+                            text={chapter.getID()}
                             label="Chapter URL ID editor"
-                            save={ 
-                                // After the ID is edited, reload the page with the new URL.
-                                id => chapter.setChapterID(id)?.then(() => {
-                                    const ref = $edition.getRef();
-                                    if(ref?.id)
-                                        goto(`/write/${ref?.id}/chapter/${id}`)
-                                })
-                            }
+                            save={// After the ID is edited, reload the page with the new URL.
+                            (newChapterID) => {
+                                if ($book) {
+                                    chapter.withChapterID(newChapterID);
+                                    // Navigate to the new ID
+                                    goto(
+                                        `/write/${$book.ref.id}/${editionNumber}/${newChapterID}`
+                                    );
+                                }
+                            }}
                             placeholder="chapter ID"
-                            valid={(newChapterID) => 
-                                !/^[a-zA-Z0-9]+$/.test(newChapterID) ? "Chapter IDs must be one or more letters or numbers" :
-                                chapter.getChapterID() !== newChapterID && $edition.hasChapter(newChapterID) ? "There's already a chapter that has this ID." :
-                                undefined
-                            }
+                            valid={(newChapterID) =>
+                                !/^[a-zA-Z0-9]+$/.test(newChapterID)
+                                    ? 'Chapter IDs must be one or more letters or numbers'
+                                    : chapter.getID() !== newChapterID &&
+                                      $edition?.hasChapter(newChapterID)
+                                    ? "There's already a chapter that has this ID."
+                                    : undefined}
                             saveOnExit={true}
                         />
-                        <br/>
-                    </span>
+                    </Muted>
                 {/if}
-                {#if editable }
-                    <Toggle on={chapter.isNumbered()} save={ on => chapter.setNumbered(on) }>
-                        {#if chapterNumber !== undefined }
-                            <span class="bookish-chapter-number">Chapter {chapterNumber}</span>
-                        {:else}
-                            <span class="bookish-muted">Unnumbered</span>
-                        {/if}
+                {#if editable}
+                    <Toggle
+                        on={chapter.isNumbered()}
+                        save={(on) =>
+                            setChapter(
+                                edition,
+                                chapter,
+                                chapter.asNumbered(on)
+                            )}
+                    >
+                        <ChapterNumber
+                            >{#if chapterNumber !== undefined}Chapter {chapterNumber}{:else}<Muted
+                                    >Unnumbered</Muted
+                                >{/if}</ChapterNumber
+                        >
                     </Toggle>
-                {:else if chapterNumber !== undefined }
-                    <span class="bookish-chapter-number">Chapter {chapterNumber}</span> 
+                {:else if chapterNumber !== undefined}
+                    <ChapterNumber>Chapter {chapterNumber}</ChapterNumber>
                 {/if}
-                {#if chapterSection !== undefined }
-                    <span class="bookish-section-name">&nbsp;&nbsp;{chapterSection}</span>
+                {#if chapterSection !== undefined && chapterSection.length > 0}
+                    <span class="section-name">{chapterSection}</span>
                 {/if}
-            </svelte:fragment>						
+            </svelte:fragment>
             <!-- If there are chapter authors, render those, otherwise use the book authors -->
-            <Authors 
+            <Authors
+                editable={isChapterEditable()}
                 slot="after"
-                authors={ chapter.getAuthors() }
-                inheritedAuthors={ $edition.getAuthors() }
-                add={ () => chapter.addAuthor("") }
-                edit={(index, text) => chapter.setAuthor(index, text) }
-                remove={index => chapter.removeAuthor(index)}
+                authors={chapter.getAuthors()}
+                inheritedAuthors={$edition.getAuthors()}
+                add={() => setChapter(edition, chapter, chapter.withAuthor(''))}
+                edit={(index, text) =>
+                    setChapter(
+                        edition,
+                        chapter,
+                        chapter.withRenamedAuthor(index, text)
+                    )}
+                remove={(index) =>
+                    setChapter(edition, chapter, chapter.withoutAuthor(index))}
             />
         </Header>
-        <!-- We load this on the page but hide it; it's used as a filter for highlighing in CSS -->
-        <img src={"/svg/marker.svg"} alt="highlight mark" style="display: none"/>
-        <Instructions>
-            Edit your chapter's title, authors, and cover image above.
-            You can also change the ID of the chapter, which appears in it's URL.
-            Write your chapter text below, using the many formatting options in the toolbar above to format text, add headers, lists, tables, comments, citations, footnotes, and more.
-            It's okay to try things, you can always undo!
-            Saves are automatic, each time you stop typing.
+
+        <Instructions {editable}>
+            Edit your chapter's title, authors, and cover image above. You can
+            also change the ID of the chapter, which is the text that appears in
+            the chapter URL. Write your chapter text below, formatting options
+            in the toolbar above to add headers, lists, tables, comments,
+            citations, footnotes, and more. It's okay to try things, you can
+            always undo. Saves are automatic.
         </Instructions>
 
         <!-- Render the chapter body, passing some context -->
-        {#if chapterAST }
-            {#if editable }
-                <BookishEditor
-                    ast={chapterAST}
-                    save={ node => node instanceof ChapterNode ? chapter.setAST(node) : undefined }
-                    chapter={true}
-                    autofocus
-                    component={ChapterBody}
-                    placeholder="Type here"
-                /> 
+        <section class="chapter-content">
+            {#if chapterAST}
+                {#if editable}
+                    <BookishEditor
+                        text={chapterAST.toBookdown()}
+                        parser={(text) => Parser.parseChapter($edition, text)}
+                        save={(ast) =>
+                            ast instanceof ChapterNode
+                                ? setChapter(
+                                      edition,
+                                      chapter,
+                                      chapter.withAST(ast)
+                                  )
+                                : undefined}
+                        chapter={true}
+                        autofocus
+                        component={ChapterBody}
+                        placeholder="write here"
+                        leasee={getLeasee(auth, edition, chapter.id)}
+                        lease={(lock) => lease(auth, edition, chapter.id, lock)}
+                    />
+                {:else}
+                    <ChapterBody node={chapterAST} />
+                {/if}
             {:else}
-                <ChapterBody node={chapterAST} />
+                <span>Loading...</span>
             {/if}
-        {:else}
-            <span>Loading...</span>
-        {/if}
-        {#if citations && citations.size > 0 }
-            {@const refs = $edition.getReferences() }
-            <h1 id="references" class="bookish-header">References</h1>
+        </section>
+
+        {#if citations && citations.size > 0}
+            {@const refs = $edition.getReferences()}
+            <Title>References</Title>
             <ol>
-                {#each [...citations].sort() as citationID }
-                    {#if citationID in refs }
-                        <li class={"bookish-reference"} id={"ref-" + citationID}>
-                            <PossibleReference node={Parser.parseReference(citationID, refs[citationID], $edition)}/>
+                {#each [...citations].sort() as citationID}
+                    {#if citationID in refs}
+                        <li
+                            class={'bookish-reference'}
+                            id={'ref-' + citationID}
+                        >
+                            <PossibleReference node={refs[citationID]} />
                         </li>
                     {:else}
-                        <li class="bookish-error">Unknown reference: <code>{citationID}</code></li>
+                        <li
+                            ><Problem
+                                >Unknown reference: <code>{citationID}</code
+                                ></Problem
+                            ></li
+                        >
                     {/if}
                 {/each}
             </ol>
         {/if}
-    </div>
-</Page>
+
+        {#if editable || isEditionPartiallyEditable()}
+            <PageHeader>Editors</PageHeader>
+            <Instructions {editable}
+                >These authors can edit this chapter. Add an email here to
+                provide chapter-level edit permissions.</Instructions
+            >
+
+            <Permissions
+                uids={chapter.uids}
+                inheriteduids={Array.from(
+                    new Set([...$edition.uids, ...($book ? $book.uids : [])])
+                )}
+                atleastone={false}
+                writable={isChapterEditable()}
+                change={(uids) =>
+                    setChapter(edition, chapter, chapter.withEditors(uids))}
+            />
+        {/if}
+    </Page>
+{/if}
+
+<style>
+    .section-name {
+        display: inline-block;
+        font-family: var(--bookish-paragraph-font-family);
+        font-size: var(--bookish-small-font-size);
+        font-weight: normal;
+        font-style: normal;
+        color: var(--bookish-muted-color);
+        line-height: 1em;
+    }
+</style>

package/components/page/Chapter.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ChapterProps = typeof __propDef.props;
-export declare type ChapterEvents = typeof __propDef.events;
-export declare type ChapterSlots = typeof __propDef.slots;
+export type ChapterProps = typeof __propDef.props;
+export type ChapterEvents = typeof __propDef.events;
+export type ChapterSlots = typeof __propDef.slots;
 export default class Chapter extends SvelteComponentTyped<ChapterProps, ChapterEvents, ChapterSlots> {
 }
 export {};

package/components/page/ChapterContext.d.ts

@@ -1,10 +1,10 @@
-import type Chapter from "../../models/book/Chapter";
-declare type ChapterContext = {
+import type { Writable } from 'svelte/store';
+import type Chapter from '../../models/book/Chapter';
+type ChapterContext = {
     chapter: Chapter;
     highlightedWord?: string;
     highlightedID?: string;
-    marginalID?: string;
-    setMarginal: (id: string | undefined) => void;
+    marginal: Writable<string | undefined>;
     layoutMarginals: () => void;
 } | undefined;
 export default ChapterContext;