bookish-press 0.4.1 → 0.4.3

package/components/page/TableOfContentsRow.svelte

@@ -1,8 +1,11 @@
-<script>import Link from "../Link.svelte";
-import TableOfContentsImage from "./TableOfContentsImage.svelte";
-import Toggle from "../editor/Toggle.svelte";
-import ConfirmButton from "../editor/ConfirmButton.svelte";
-import { getBase, getEdition, isEditable } from "./Contexts";
+<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;
@@ -10,48 +13,108 @@ export let number = undefined;
 export let forthcoming = false;
 let edition = getEdition();
 let base = getBase();
-let editable = isEditable();
-function moveUp() { chapter?.move(-1); }
-function moveDown() { chapter?.move(1); }
+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={forthcoming ? "bookish-forthcoming" : ""}>
-    <td><TableOfContentsImage embed={$edition.getImage(chapterID)} /></td>
+<tr class="toc-row" class:forthcoming>
+    <td
+        ><TableOfContentsImage
+            embed={chapter
+                ? chapter.getImage()
+                : $edition?.getImage(chapterID) ?? null}
+        /></td
+    >
     <td>
         {#if editable && chapter}
-            <Toggle on={number !== undefined} save={ on => chapter && chapter.setNumbered(on) }>
-                <div class="bookish-chapter-number">
+            <Toggle
+                on={number !== undefined}
+                save={(on) =>
+                    chapter
+                        ? setChapter(edition, chapter, chapter.asNumbered(on))
+                        : undefined}
+            >
+                <ChapterNumber>
                     {#if number !== undefined}
                         Chapter {number}
                     {:else}
-                        <span class="bookish-muted">Unnumbered</span>
+                        <Muted>Unnumbered</Muted>
                     {/if}
-                </div>
+                </ChapterNumber>
             </Toggle>
-        {:else if number !== undefined }
-            <div class="bookish-chapter-number">{"Chapter " + number}</div>
+        {:else if number !== undefined}
+            <ChapterNumber>{'Chapter ' + number}</ChapterNumber>
         {/if}
-        {#if forthcoming && !editable}
-            <span>{title}</span>
-        {:else}
-            <Link to={`${base}/${chapterID}`}>{title}</Link>
-        {/if}
-        <small class="bookish-muted"><br/><em><slot name="annotation"></slot></em></small>
+        <ChapterTitle
+            link={forthcoming && !editable ? undefined : `${$base}${chapterID}`}
+            >{title}</ChapterTitle
+        >
+        <p><Muted><em><slot name="annotation" /></em></Muted></p>
     </td>
-    <td><slot name="etc"></slot></td>
-    {#if editable }
-        <td>
-            {#if chapter }
-                <button disabled={chapter.getPosition() === 0} on:click={moveUp}>{"↑"}</button>
-                &nbsp;
-                <button disabled={chapter.getPosition() === chapter.getBook().getChapterCount() - 1} on:click={moveDown}>{"↓"}</button>
-                &nbsp;
+    <td><slot name="etc" /></td>
+    {#if editable && $edition}
+        <td class="controls">
+            {#if chapter}
+                <Button
+                    tooltip="move chapter {title} up"
+                    disabled={$edition.getChapterPosition(chapter.getID()) ===
+                        0}
+                    command={moveUp}>{'↑'}</Button
+                >
+                <Button
+                    tooltip="move chapter {title} down"
+                    disabled={$edition.getChapterPosition(chapter.getID()) ===
+                        $edition.getChapterCount() - 1}
+                    command={moveDown}>{'↓'}</Button
+                >
                 <ConfirmButton
-                    commandLabel="x"
-                    confirmLabel="Confirm"
-                    command={() => chapter && chapter.delete()}
+                    tooltip="delete chapter {title}"
+                    commandLabel="delete"
+                    confirmLabel="confirm"
+                    command={() =>
+                        chapter && $edition
+                            ? edition.set(
+                                  $edition.withoutChapter(chapter.getID())
+                              )
+                            : undefined}
                 />
             {/if}
         </td>
     {/if}
-</tr>
+</tr>
+
+<style>
+    .toc-row p {
+        margin: 0;
+    }
+
+    .forthcoming {
+        color: var(--app-muted-color);
+    }
+
+    .controls {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        gap: var(--app-chrome-padding);
+    }
+
+    td:first-child {
+        padding-left: 0;
+    }
+
+    td:last-child {
+        padding-right: 0;
+    }
+
+    td {
+        vertical-align: top;
+    }
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type Chapter from "../../models/book/Chapter";
+import type Chapter from '../../models/book/Chapter';
 declare const __propDef: {
     props: {
         chapterID: string;
@@ -16,9 +16,9 @@ declare const __propDef: {
         etc: {};
     };
 };
-export declare type TableOfContentsRowProps = typeof __propDef.props;
-export declare type TableOfContentsRowEvents = typeof __propDef.events;
-export declare type TableOfContentsRowSlots = typeof __propDef.slots;
+export type TableOfContentsRowProps = typeof __propDef.props;
+export type TableOfContentsRowEvents = typeof __propDef.events;
+export type TableOfContentsRowSlots = typeof __propDef.slots;
 export default class TableOfContentsRow extends SvelteComponentTyped<TableOfContentsRowProps, TableOfContentsRowEvents, TableOfContentsRowSlots> {
 }
 export {};

package/components/page/ThemeEditor.svelte

@@ -1,52 +1,190 @@
-<script>import Header from "./Header.svelte";
+<script>import Header from './Header.svelte';
 import Outline from './Outline.svelte';
 import Page from './Page.svelte';
-import { defaultTheme } from '../../models/book/Theme';
+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 External from "../External.svelte";
-import { getEdition } from "./Contexts";
+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.getTheme();
+$: 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>
 
-<Page title={`${$edition.getTitle()} - Theme`}>
-    <Header 
-        label="Theme"
-        getImage={() => null}
-        setImage={ () => undefined}
-        header="Theme"
-    >
-        <Outline
-            slot="outline"
-            previous={null}
-            next={null}
-        />
-    </Header>
+{#if theme && $edition}
+    <Page title={`${$edition?.getTitle()} - Theme`}>
+        <Header
+            editable={isEditionEditable()}
+            label="Theme"
+            id="theme"
+            getImage={() => null}
+            setImage={() => undefined}
+            header="Theme"
+        >
+            <Outline slot="outline" previous={null} next={null} />
+        </Header>
 
-    <Instructions>
-        This is the theme editor. 
-        You can use it to choose from existing themes or create a custom theme for your book's appearance.
-        To use it, you'll need to know a bit about how to format CSS <External to="https://developer.mozilla.org/en-US/docs/Web/CSS/color">colors</External>, <External to="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">fonts</External>, and <External to="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">sizes</External>.
-    </Instructions>
+        <Instructions {editable}>
+            This is the theme editor. You can use it to choose from existing
+            themes or create a custom theme for your book's appearance. To use
+            it, you'll need to know a bit about how to format CSS <Link
+                to="https://developer.mozilla.org/en-US/docs/Web/CSS/color"
+                >colors</Link
+            >, <Link
+                to="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"
+                >fonts</Link
+            >, and <Link
+                to="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units"
+                >sizes</Link
+            >.
+        </Instructions>
 
-    {#if theme === null }
-        <button on:click={() => $edition.setTheme(defaultTheme)}>Customize</button>
-    {:else}
-        <ConfirmButton
-            commandLabel="Revert to default"
-            confirmLabel="Delete your theme?"
-            command={() => $edition.setTheme(null)}
+        <Switch
+            options={Object.keys(themes)}
+            edit={(name) =>
+                $edition
+                    ? edition.set($edition.withTheme(themes[name]))
+                    : undefined}
+            value={Object.keys(themes).find((key) => themes[key] === theme) ??
+                ''}
         />
-        <ThemeEditorPreview theme={theme}/>
-        <ThemeSetEditor header={"Light mode colors"} group="light" theme={theme} />
-        <ThemeSetEditor header={"Dark mode colors"} group="dark" theme={theme} />
-        <ThemeSetEditor header={"Fonts"} group="fonts" theme={theme} />
-        <ThemeSetEditor header={"Font sizes"} group="sizes" theme={theme} />
-        <ThemeSetEditor header={"Font weights"} group="weights" theme={theme} />
-        <ThemeSetEditor header={"Spacing"} group="spacing" theme={theme} />
-    {/if}
 
-</Page>
+        <!-- If it's not one of the  -->
+        {#if isDefault}
+            <Button
+                tooltip="customize theme"
+                command={() =>
+                    $edition
+                        ? edition.set(
+                              $edition.withTheme({
+                                  ...(theme === null ? BookishTheme : theme),
+                              })
+                          )
+                        : undefined}>customize</Button
+            >
+        {:else}
+            <ConfirmButton
+                tooltip="change theme to the default"
+                commandLabel="- theme"
+                confirmLabel="delete your theme?"
+                command={() =>
+                    $edition
+                        ? edition.set($edition.withTheme(null))
+                        : undefined}
+            />
+        {/if}
+
+        <ThemeEditorPreview {theme} />
+
+        {#if !isDefault && theme !== null}
+            <ThemeSetEditor
+                header={'Light mode colors'}
+                group="light"
+                properties={theme.light ?? getEmptyGroup(BookishTheme.light)}
+            />
+            <ThemeSetEditor
+                header={'Dark mode colors'}
+                group="dark"
+                properties={theme.dark ?? getEmptyGroup(BookishTheme.dark)}
+            />
+            <ThemeSetEditor
+                header={'Fonts'}
+                group="fonts"
+                properties={theme.fonts ?? getEmptyGroup(BookishTheme.fonts)}
+            />
+            <ThemeSetEditor
+                header={'Font sizes'}
+                group="sizes"
+                properties={theme.sizes ?? getEmptyGroup(BookishTheme.sizes)}
+            />
+            <ThemeSetEditor
+                header={'Font weights'}
+                group="weights"
+                properties={theme.weights ??
+                    getEmptyGroup(BookishTheme.weights)}
+            />
+            <ThemeSetEditor
+                header={'Spacing'}
+                group="spacing"
+                properties={theme.spacing ??
+                    getEmptyGroup(BookishTheme.spacing)}
+            />
+
+            <Rows>
+                <tr>
+                    <td>
+                        <em
+                            >Add URLs to your own CSS to customize fonts and
+                            styles further.</em
+                        >
+                    </td>
+                    <td style="text-align:right;">
+                        <Button
+                            tooltip="add CSS URL import"
+                            command={() => {
+                                if (theme === null) return;
+                                if (theme.imports === undefined)
+                                    theme.imports = [];
+                                theme.imports.push('');
+                                if ($edition)
+                                    edition.set($edition.withTheme(theme));
+                            }}>+</Button
+                        >
+                    </td>
+                </tr>
+                {#each theme.imports ?? [] as url, index}
+                    <tr>
+                        <td>
+                            <TextEditor
+                                text={url}
+                                label={`CSS url`}
+                                placeholder={'CSS url'}
+                                valid={() => undefined}
+                                save={(text) => {
+                                    const newTheme = { ...theme };
+                                    if (newTheme.imports === undefined)
+                                        newTheme.imports = [];
+                                    newTheme.imports[index] = text;
+                                    if ($edition)
+                                        edition.set($edition.withTheme(theme));
+                                }}
+                            />
+                        </td>
+                        <td style="text-align: right">
+                            <Button
+                                tooltip="Remove CSS URL import"
+                                command={() => {
+                                    theme?.imports?.splice(index, 1);
+                                    if ($edition)
+                                        edition.set($edition.withTheme(theme));
+                                }}>–</Button
+                            >
+                        </td>
+                    </tr>
+                {/each}
+            </Rows>
+        {/if}
+    </Page>
+{/if}

package/components/page/ThemeEditor.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 ThemeEditorProps = typeof __propDef.props;
-export declare type ThemeEditorEvents = typeof __propDef.events;
-export declare type ThemeEditorSlots = typeof __propDef.slots;
+export type ThemeEditorProps = typeof __propDef.props;
+export type ThemeEditorEvents = typeof __propDef.events;
+export type ThemeEditorSlots = typeof __propDef.slots;
 export default class ThemeEditor extends SvelteComponentTyped<ThemeEditorProps, ThemeEditorEvents, ThemeEditorSlots> {
 }
 export {};

package/components/page/ThemeEditorPreview.svelte

@@ -1,37 +1,49 @@
-<script>import ChapterBody from "../chapter/ChapterBody.svelte";
-import Parser from "../../models/chapter/Parser";
-import { getDarkMode } from "./Contexts";
+<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();
-$: preview = Parser.parseChapter(undefined, `
-		# Header 1
+$: backgroundColor =
+    theme === null
+        ? null
+        : $darkMode
+            ? theme.dark?.backgroundColor
+            : theme.light?.backgroundColor;
+$: preview = Parser.parseChapter(undefined, `# Header 1
 		## Header 2
 		### Header 3
 		
 		This is how a sentence with _various_ *formatting* ^will^ look.
 
 		* How does it look?
-		* Would you change anything?	
+		* Would you change anything?
 	`);
 </script>
 
-<div class="bookish-theme-preview" style={`background-color: ${$darkMode ? theme.dark.backgroundColor : theme.light.backgroundColor };`}>
-    <ChapterBody node={preview}/>
-</div>
+<aside
+    class={`preview ${position > window.innerHeight / 2 ? 'small' : ''}`}
+    style={`${backgroundColor ? `background-color: ${backgroundColor};` : ''}`}
+>
+    <ChapterBody node={preview} />
+</aside>
 
-<style>
-	.bookish-theme-preview {
-		padding: 1em;
-		border: var(--bookish-app-chrome-border-width) solid black;
-		transform: translate(-25%, -25%) scale(0.5);
-		position: sticky;
-		margin-top: 2em;
-		top: 2em;
-		z-index: 3;
-	}
+<svelte:window bind:scrollY={position} />
 
-	:global(.bookish-dark .bookish-theme-preview) {
-		border-color: white;
-	}
+<style>
+    .preview {
+        padding: 1em;
+        border: var(--app-chrome-border-size) solid black;
+        position: sticky;
+        margin-top: var(--app-text-spacing);
+        margin-bottom: var(--app-text-spacing);
+        top: 2em;
+        z-index: 3;
+        transition: transform 0.5s;
+    }
 
-</style>
+    .preview.small {
+        transform: scale(0.5);
+        transform-origin: left top;
+    }
+</style>

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

@@ -1,17 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type Theme from "../../models/book/Theme";
+import type Theme from '../../models/book/Theme';
 declare const __propDef: {
     props: {
-        theme: Theme;
+        theme: Theme | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type ThemeEditorPreviewProps = typeof __propDef.props;
-export declare type ThemeEditorPreviewEvents = typeof __propDef.events;
-export declare type ThemeEditorPreviewSlots = typeof __propDef.slots;
+export type ThemeEditorPreviewProps = typeof __propDef.props;
+export type ThemeEditorPreviewEvents = typeof __propDef.events;
+export type ThemeEditorPreviewSlots = typeof __propDef.slots;
 export default class ThemeEditorPreview extends SvelteComponentTyped<ThemeEditorPreviewProps, ThemeEditorPreviewEvents, ThemeEditorPreviewSlots> {
 }
 export {};

package/components/page/ThemeSetEditor.svelte

@@ -1,17 +1,19 @@
-<script>import ThemeVariableEditor from "./ThemeVariableEditor.svelte";
+<script>import PageHeader from './PageHeader.svelte';
+import Rows from './Rows.svelte';
+import ThemeVariableEditor from './ThemeVariableEditor.svelte';
 export let header;
 export let group;
-export let theme;
-$: set = theme[group];
+export let properties;
 </script>
 
-<h2>{header}</h2>
-<div class="bookish-table">
-    <table>
-        <tbody>
-        {#each Object.keys(set).sort() as name }
-            <ThemeVariableEditor group={group} name={name} value={set[name]} />
-        {/each}
-        </tbody>
-    </table>
-</div>
+<PageHeader>{header}</PageHeader>
+
+<Rows>
+    {#each Object.keys(properties).sort() as property}
+        <ThemeVariableEditor
+            {group}
+            name={property}
+            value={properties[property]}
+        />
+    {/each}
+</Rows>

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

@@ -3,16 +3,16 @@ declare const __propDef: {
     props: {
         header: string;
         group: string;
-        theme: Record<string, Record<string, string>>;
+        properties: Record<string, string>;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type ThemeSetEditorProps = typeof __propDef.props;
-export declare type ThemeSetEditorEvents = typeof __propDef.events;
-export declare type ThemeSetEditorSlots = typeof __propDef.slots;
+export type ThemeSetEditorProps = typeof __propDef.props;
+export type ThemeSetEditorEvents = typeof __propDef.events;
+export type ThemeSetEditorSlots = typeof __propDef.slots;
 export default class ThemeSetEditor extends SvelteComponentTyped<ThemeSetEditorProps, ThemeSetEditorEvents, ThemeSetEditorSlots> {
 }
 export {};

package/components/page/ThemeVariableEditor.svelte

@@ -1,12 +1,12 @@
-<script>import TextEditor from "../editor/TextEditor.svelte";
-import { getEdition } from "./Contexts";
+<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"
+    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;
@@ -15,14 +15,23 @@ let edition = getEdition();
 </script>
 
 <tr>
-    <td>{name.replace(/([a-z])([A-Z])/g, "$1 $2").split(" ").map(s => s.charAt(0).toUpperCase() + s.substring(1)).join(" ")}</td>
+    <td
+        >{name
+            .replace(/([a-z])([A-Z])/g, '$1 $2')
+            .split(' ')
+            .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
+            .join(' ')}</td
+    >
     <td style="text-align: right">
-        <TextEditor 
-            startText={value} 
+        <TextEditor
+            text={value}
             label={`${name} editor`}
-            placeholder={group in placeholders ? placeholders[group] : "value"}
-            valid={ () => undefined }
-            save={text => $edition.setThemeValue(group, name, text)}
+            placeholder={group in placeholders ? placeholders[group] : 'value'}
+            valid={() => undefined}
+            save={(text) =>
+                $edition
+                    ? edition.set($edition.withThemeValue(group, name, text))
+                    : undefined}
         />
     </td>
-</tr>
+</tr>

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

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ThemeVariableEditorProps = typeof __propDef.props;
-export declare type ThemeVariableEditorEvents = typeof __propDef.events;
-export declare type ThemeVariableEditorSlots = typeof __propDef.slots;
+export type ThemeVariableEditorProps = typeof __propDef.props;
+export type ThemeVariableEditorEvents = typeof __propDef.events;
+export type ThemeVariableEditorSlots = typeof __propDef.slots;
 export default class ThemeVariableEditor extends SvelteComponentTyped<ThemeVariableEditorProps, ThemeVariableEditorEvents, ThemeVariableEditorSlots> {
 }
 export {};

package/components/page/Title.svelte

@@ -0,0 +1,12 @@
+<h1><slot /></h1>
+
+<style>
+    h1 {
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: var(--bookish-title-font-size);
+        font-family: var(--bookish-header-font-family);
+        font-weight: var(--bookish-header-font-weight);
+        line-height: var(--bookish-header-line-height);
+    }
+</style>