bookish-press 0.4.45 → 0.4.47

package/{components → src/lib/components}/page/TableOfContentsRow.svelte

@@ -1,27 +1,37 @@
-<script>import TableOfContentsImage from './TableOfContentsImage.svelte';
-import Toggle from '../editor/Toggle.svelte';
-import ConfirmButton from '../editor/ConfirmButton.svelte';
-import { getBase, getEdition, isEditionEditable, setChapter, } from './Contexts';
-import Muted from './Muted.svelte';
-import ChapterNumber from './ChapterNumber.svelte';
-import Button from '../app/Button.svelte';
-import ChapterTitle from './ChapterTitle.svelte';
-export let chapterID;
-export let chapter = undefined;
-export let title;
-export let number = undefined;
-export let forthcoming = false;
-let edition = getEdition();
-let base = getBase();
-let editable = isEditionEditable();
-function moveUp() {
-    if ($edition && chapter)
-        edition.set($edition.withMovedChapter(chapter.getID(), -1));
-}
-function moveDown() {
-    if ($edition && chapter)
-        edition.set($edition.withMovedChapter(chapter.getID(), 1));
-}
+<script lang="ts">
+    import TableOfContentsImage from './TableOfContentsImage.svelte';
+    import type Chapter from '$lib/models/book/Chapter';
+    import Toggle from '$lib/components/editor/Toggle.svelte';
+    import ConfirmButton from '$lib/components/editor/ConfirmButton.svelte';
+    import {
+        getBase,
+        getEdition,
+        isEditionEditable,
+        setChapter,
+    } from './Contexts';
+    import Muted from './Muted.svelte';
+    import ChapterNumber from './ChapterNumber.svelte';
+    import Button from '../app/Button.svelte';
+    import ChapterTitle from './ChapterTitle.svelte';
+
+    export let chapterID: string;
+    export let chapter: Chapter | undefined = undefined;
+    export let title: string;
+    export let number: number | undefined = undefined;
+    export let forthcoming: boolean = false;
+
+    let edition = getEdition();
+    let base = getBase();
+    let editable = isEditionEditable();
+
+    function moveUp() {
+        if ($edition && chapter)
+            edition.set($edition.withMovedChapter(chapter.getID(), -1));
+    }
+    function moveDown() {
+        if ($edition && chapter)
+            edition.set($edition.withMovedChapter(chapter.getID(), 1));
+    }
 </script>
 
 <tr class="toc-row" class:forthcoming>

package/{components → src/lib/components}/page/ThemeEditor.svelte

@@ -1,36 +1,47 @@
-<script>import Header from './Header.svelte';
-import Outline from './Outline.svelte';
-import Page from './Page.svelte';
-import { BookishTheme, CriticalTheme, HumanTheme, SeriousTheme, SketchyTheme, TechTheme, } from '../../models/book/Theme';
-import ConfirmButton from '../editor/ConfirmButton.svelte';
-import Instructions from './Instructions.svelte';
-import ThemeSetEditor from './ThemeSetEditor.svelte';
-import ThemeEditorPreview from './ThemeEditorPreview.svelte';
-import { getEdition, isEditionEditable } from './Contexts';
-import TextEditor from '../editor/TextEditor.svelte';
-import Button from '../app/Button.svelte';
-import Switch from '../editor/Switch.svelte';
-import Link from '../app/Link.svelte';
-import Rows from './Rows.svelte';
-const themes = {
-    Bookish: BookishTheme,
-    Serious: SeriousTheme,
-    Tech: TechTheme,
-    Human: HumanTheme,
-    Sketchy: SketchyTheme,
-    Critical: CriticalTheme,
-};
-let editable = isEditionEditable();
-let edition = getEdition();
-$: theme = $edition ? $edition.getTheme() : null;
-$: isDefault =
-    theme === null || Object.values(themes).includes(theme);
-function getEmptyGroup(group) {
-    const empty = {};
-    for (const key in Object.keys(group))
-        empty[key] = '';
-    return empty;
-}
+<script lang="ts">
+    import Header from './Header.svelte';
+    import Outline from './Outline.svelte';
+    import Page from './Page.svelte';
+    import {
+        BookishTheme,
+        CriticalTheme,
+        HumanTheme,
+        SeriousTheme,
+        SketchyTheme,
+        TechTheme,
+    } from '$lib/models/book/Theme';
+    import ConfirmButton from '$lib/components/editor/ConfirmButton.svelte';
+    import Instructions from './Instructions.svelte';
+    import ThemeSetEditor from './ThemeSetEditor.svelte';
+    import ThemeEditorPreview from './ThemeEditorPreview.svelte';
+    import { getEdition, isEditionEditable } from './Contexts';
+    import TextEditor from '../editor/TextEditor.svelte';
+    import type Theme from '$lib/models/book/Theme';
+    import Button from '../app/Button.svelte';
+    import Switch from '../editor/Switch.svelte';
+    import Link from '../app/Link.svelte';
+    import Rows from './Rows.svelte';
+
+    const themes: Record<string, Theme> = {
+        Bookish: BookishTheme,
+        Serious: SeriousTheme,
+        Tech: TechTheme,
+        Human: HumanTheme,
+        Sketchy: SketchyTheme,
+        Critical: CriticalTheme,
+    };
+
+    let editable = isEditionEditable();
+    let edition = getEdition();
+    $: theme = $edition ? $edition.getTheme() : null;
+    $: isDefault =
+        theme === null || Object.values(themes).includes(theme as Theme);
+
+    function getEmptyGroup(group: Record<string, string>) {
+        const empty: Record<string, string> = {};
+        for (const key in Object.keys(group)) empty[key] = '';
+        return empty;
+    }
 </script>
 
 {#if theme && $edition}

package/{components → src/lib/components}/page/ThemeEditorPreview.svelte

@@ -1,16 +1,24 @@
-<script>import ChapterBody from '../chapter/ChapterBody.svelte';
-import Parser from '../../models/chapter/Parser';
-import { getDarkMode } from './Contexts';
-export let theme;
-let position;
-let darkMode = getDarkMode();
-$: backgroundColor =
-    theme === null
-        ? null
-        : $darkMode
+<script lang="ts">
+    import type Theme from '$lib/models/book/Theme';
+    import ChapterBody from '$lib/components/chapter/ChapterBody.svelte';
+    import Parser from '$lib/models/chapter/Parser';
+    import { getDarkMode } from './Contexts';
+
+    export let theme: Theme | null;
+
+    let position: number;
+
+    let darkMode = getDarkMode();
+    $: backgroundColor =
+        theme === null
+            ? null
+            : $darkMode
             ? theme.dark?.backgroundColor
             : theme.light?.backgroundColor;
-$: preview = Parser.parseChapter(undefined, `# Header 1
+
+    $: preview = Parser.parseChapter(
+        undefined,
+        `# Header 1
 		## Header 2
 		### Header 3
 		
@@ -18,7 +26,8 @@ $: preview = Parser.parseChapter(undefined, `# Header 1
 
 		* How does it look?
 		* Would you change anything?
-	`);
+	`
+    );
 </script>
 
 <aside

package/src/lib/components/page/ThemeSetEditor.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import PageHeader from './PageHeader.svelte';
+    import Rows from './Rows.svelte';
+    import ThemeVariableEditor from './ThemeVariableEditor.svelte';
+
+    export let header: string;
+    export let group: string;
+    export let properties: Record<string, string>;
+</script>
+
+<PageHeader>{header}</PageHeader>
+
+<Rows>
+    {#each Object.keys(properties).sort() as property}
+        <ThemeVariableEditor
+            {group}
+            name={property}
+            value={properties[property]}
+        />
+    {/each}
+</Rows>

package/{components → src/lib/components}/page/ThemeVariableEditor.svelte

@@ -1,17 +1,21 @@
-<script>import TextEditor from '../editor/TextEditor.svelte';
-import { getEdition } from './Contexts';
-const placeholders = {
-    light: 'CSS color',
-    dark: 'CSS color',
-    fonts: 'CSS font name',
-    sizes: 'CSS font size',
-    weights: 'CSS font weights',
-    spacing: 'CSS length',
-};
-export let group;
-export let name;
-export let value;
-let edition = getEdition();
+<script lang="ts">
+    import TextEditor from '$lib/components/editor/TextEditor.svelte';
+    import { getEdition } from './Contexts';
+
+    const placeholders: Record<string, string> = {
+        light: 'CSS color',
+        dark: 'CSS color',
+        fonts: 'CSS font name',
+        sizes: 'CSS font size',
+        weights: 'CSS font weights',
+        spacing: 'CSS length',
+    };
+
+    export let group: string;
+    export let name: string;
+    export let value: string;
+
+    let edition = getEdition();
 </script>
 
 <tr>

package/{components → src/lib/components}/page/Unknown.svelte

@@ -1,11 +1,13 @@
-<script>import Header from './Header.svelte';
-import Outline from './Outline.svelte';
-import Page from './Page.svelte';
-import Instructions from './Instructions.svelte';
-import ChapterIDs from '../../models/book/ChapterID';
-import { getEdition, isEditionEditable } from './Contexts';
-let editable = isEditionEditable();
-let edition = getEdition();
+<script lang="ts">
+    import Header from './Header.svelte';
+    import Outline from './Outline.svelte';
+    import Page from './Page.svelte';
+    import Instructions from './Instructions.svelte';
+    import ChapterIDs from '$lib/models/book/ChapterID';
+    import { getEdition, isEditionEditable } from './Contexts';
+
+    let editable = isEditionEditable();
+    let edition = getEdition();
 </script>
 
 {#if $edition}

package/{components/page/margins.js → src/lib/components/page/margins.ts}

@@ -2,46 +2,56 @@
 // This operates on the DOM directly, as scroll position isn't easily managed in React.
 export function hideOutlineIfObscured() {
     // Get the outline's bounds.
-    let outline = document.getElementsByClassName('outline')[0];
+    let outline = document.getElementsByClassName('outline')[0] as HTMLElement;
+
     // If there's no outline, don't bother.
-    if (!outline)
-        return;
+    if (!outline) return;
+
     // Set a threshold for hiding
     let threshold = 100;
+
     // If the outline isn't affixed to the footer
     if (window.getComputedStyle(outline).getPropertyValue('left') !== '0px') {
         let outlineRect = outline.getBoundingClientRect();
-        let overlapRect = undefined;
+        let overlapRect: DOMRect | undefined = undefined;
+
         // Find the bottom-most left inset marginal within threshold of the outline.
-        Array.from(document.getElementsByClassName('inset-left')).forEach((el) => {
-            let insetRect = el.getBoundingClientRect();
-            if (!(outlineRect.bottom < insetRect.top - threshold ||
-                outlineRect.top > insetRect.bottom + threshold))
-                overlapRect = insetRect;
-        });
+        Array.from(document.getElementsByClassName('inset-left')).forEach(
+            (el) => {
+                let insetRect: DOMRect = el.getBoundingClientRect();
+                if (
+                    !(
+                        outlineRect.bottom < insetRect.top - threshold ||
+                        outlineRect.top > insetRect.bottom + threshold
+                    )
+                )
+                    overlapRect = insetRect;
+            }
+        );
+
         // If it overlaps, reduce opacity by the proportion of the vertical distance between two rectangles and the height of the marginal.
         if (overlapRect) {
-            let overlap = overlapRect;
-            let distance = outlineRect.bottom < overlap.top
-                ? threshold
-                : outlineRect.bottom < overlap.top + threshold
+            let overlap: DOMRect = overlapRect;
+            let distance =
+                outlineRect.bottom < overlap.top
+                    ? threshold
+                    : outlineRect.bottom < overlap.top + threshold
                     ? threshold - (outlineRect.bottom - overlap.top)
                     : outlineRect.top > overlap.bottom - threshold
-                        ? threshold - (overlap.bottom - outlineRect.top)
-                        : outlineRect.top > overlap.bottom
-                            ? threshold
-                            : 0;
+                    ? threshold - (overlap.bottom - outlineRect.top)
+                    : outlineRect.top > overlap.bottom
+                    ? threshold
+                    : 0;
             let proportion = distance / threshold;
             outline.style.opacity = '' + proportion * proportion;
         }
         // Otherwise, remove the dimming.
-        else
-            outline.style.removeProperty('opacity');
+        else outline.style.removeProperty('opacity');
     }
     // If it is, it's always visible.
-    else
-        outline.style.removeProperty('opacity');
+    else outline.style.removeProperty('opacity');
 }
+
 // After each render of the chapter, we need to adjust the layout of marginals, which by default are floating from
 // their little spans within the body of the text.
 //
@@ -54,45 +64,60 @@ export function hideOutlineIfObscured() {
 // fixed in a fixed position.
 export function layoutMarginals() {
     // Get the chapter DOM node, so we can calculate margins.
-    let chapter = document.getElementsByClassName('bookish-chapter-body')[0];
+    let chapter = document.getElementsByClassName(
+        'bookish-chapter-body'
+    )[0] as HTMLElement;
+
     // If there's no chapter rendered yet, stop.
-    if (chapter === undefined)
-        return;
-    let book = document.getElementsByClassName('bookish')[0];
+    if (chapter === undefined) return;
+
+    let book = document.getElementsByClassName('bookish')[0] as HTMLElement;
+
     // This is the grid line we'll aline all marginals too horizontally.
     let margin = chapter.getBoundingClientRect().width;
+
     // This will track the current leading bottom edge for laying out marginals.
-    let currentBottom = null;
+    let currentBottom: number | null = null;
+
     // Are there any marginal right inset images that might overlap?
     let rightInsets = document.getElementsByClassName('inset-right');
+
     const marginals = document.getElementsByClassName('bookish-marginal');
+
     // Layout all of the marginals vertically to prevent overlaps.
-    Array.from(marginals).forEach((element) => {
-        const el = element;
-        if (el === null)
-            return;
-        if (window.getComputedStyle(el).getPropertyValue('position') !== 'fixed') {
+    Array.from(marginals).forEach((element: Element) => {
+        const el = element as HTMLElement;
+
+        if (el === null) return;
+
+        if (
+            window.getComputedStyle(el).getPropertyValue('position') !== 'fixed'
+        ) {
             if (el.parentElement) {
-                let containingMarginal = el.parentElement.closest('.bookish-marginal');
+                let containingMarginal =
+                    el.parentElement.closest('.bookish-marginal');
+
                 // Get the bounds of this marginal so we know it's size.
                 let elementBounds = el.getBoundingClientRect();
+
                 // Get the bounds of this marginal's parent so we know it's vertical position.
                 let parentBounds = el.parentElement.getBoundingClientRect();
-                let parentTop = parentBounds.top +
+                let parentTop =
+                    parentBounds.top +
                     window.scrollY -
                     (book.getBoundingClientRect().top + window.scrollY);
+
                 // If it's inside a marginal, position it below the marginal.
                 if (containingMarginal !== null && currentBottom) {
                     el.style.left = '0';
                     el.style.top =
                         '' +
-                            (currentBottom -
-                                (containingMarginal.getBoundingClientRect().top +
-                                    window.scrollY)) +
-                            'px';
+                        (currentBottom -
+                            (containingMarginal.getBoundingClientRect().top +
+                                window.scrollY)) +
+                        'px';
                     currentBottom = currentBottom + elementBounds.height;
-                }
-                else {
+                } else {
                     // If we don't have a bottom yet, or the current above is above the parent's top,
                     // then set the current bottom to the bottom of the parent.
                     if (currentBottom === null || currentBottom < parentTop) {
@@ -104,6 +129,7 @@ export function layoutMarginals() {
                         el.style.top = currentBottom + 'px';
                         currentBottom = currentBottom + elementBounds.height;
                     }
+
                     // If there are any right insets, do any intersect with this marginal?
                     // If so, move the marginal below them.
                     if (rightInsets.length > 0) {
@@ -112,18 +138,24 @@ export function layoutMarginals() {
                             let insetBounds = inset.getBoundingClientRect();
                             let insetTop = insetBounds.top + window.scrollY;
                             let insetBottom = insetTop + insetBounds.height;
-                            let elementTop = el.getBoundingClientRect().top + window.scrollY;
-                            let elementBottom = elementTop + elementBounds.height;
+                            let elementTop =
+                                el.getBoundingClientRect().top + window.scrollY;
+                            let elementBottom =
+                                elementTop + elementBounds.height;
+
                             // If they overlap...
                             if (currentBottom !== null) {
-                                if ((elementTop <= insetTop &&
-                                    elementBottom >= insetTop) ||
+                                if (
+                                    (elementTop <= insetTop &&
+                                        elementBottom >= insetTop) ||
                                     (elementTop <= insetBottom &&
                                         elementBottom >= insetBottom) ||
                                     (elementTop >= insetTop &&
-                                        elementBottom <= insetBottom)) {
+                                        elementBottom <= insetBottom)
+                                ) {
                                     // Calculate the new position based on the preferred position, minus the element's height (which was added above), plus the overlap between the inset and the marginal.
-                                    let newTop = currentBottom -
+                                    let newTop =
+                                        currentBottom -
                                         elementBounds.height +
                                         (insetBottom - elementTop);
                                     // Reposition the marginal.
@@ -135,6 +167,7 @@ export function layoutMarginals() {
                             }
                         });
                     }
+
                     // Reposition the marginal horizontally.
                     el.style.left = 'calc(2rem + ' + margin + 'px)';
                 }