bookish-press 0.4.1 → 0.4.3

package/components/app/Lead.svelte

@@ -0,0 +1,12 @@
+<h1><slot /></h1>
+
+<style>
+    h1 {
+        font-family: var(--app-font);
+        font-weight: 300;
+        font-size: 24pt;
+        margin-top: 5rem;
+        margin-left: -1rem;
+        margin-bottom: var(--app-text-spacing);
+    }
+</style>

package/components/app/Lead.svelte.d.ts

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

package/components/app/Link.svelte

@@ -0,0 +1,24 @@
+<script>export let to;
+export let before = undefined;
+export let title = undefined;
+</script>
+
+<a
+    href={to}
+    {title}
+    on:click={() => (before ? before() : undefined)}
+    target={to.startsWith('http') ? '_blank' : null}><slot /></a
+>
+
+<style>
+    a {
+        color: var(--app-interactive-color);
+        font-family: var(--app-font);
+        font-weight: 400;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        to: string;
+        before?: Function | undefined;
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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/components/app/Options.svelte

@@ -0,0 +1,24 @@
+<script>export let options;
+export let changed;
+export let value;
+export let label;
+</script>
+
+<select bind:value on:change={() => changed(value)} aria-label={label}>
+    <option value="" selected={value === ''} />
+    {#each options as option}
+        <option value={option[1]} selected={value === option[1]}
+            >{option[0]}</option
+        >
+    {/each}
+</select>
+
+<style>
+    select {
+        border: none;
+        background-color: var(--app-chrome-background);
+        padding: var(--app-chrome-padding);
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
+    }
+</style>

package/components/app/Options.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        options: [string, string][];
+        changed: (value: string) => void;
+        value: string;
+        label: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OptionsProps = typeof __propDef.props;
+export type OptionsEvents = typeof __propDef.events;
+export type OptionsSlots = typeof __propDef.slots;
+export default class Options extends SvelteComponentTyped<OptionsProps, OptionsEvents, OptionsSlots> {
+}
+export {};

package/components/app/Paragraph.svelte

@@ -0,0 +1,20 @@
+<script>export let aside = false;
+</script>
+
+<p class={aside ? 'aside' : ''}><slot /></p>
+
+<style>
+    p {
+        font-family: var(--app-font);
+        font-size: var(--app-font-size);
+        font-weight: 300;
+        line-height: var(--app-line-height);
+        margin-top: 0;
+        margin-bottom: var(--app-text-spacing);
+    }
+
+    .aside {
+        font-style: italic;
+        font-size: 90%;
+    }
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        aside?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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/components/app/Section.svelte

@@ -0,0 +1,12 @@
+<section>
+    <slot />
+</section>
+
+<style>
+    section {
+        margin: auto;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        max-width: 40rem;
+    }
+</style>

package/components/app/Section.svelte.d.ts

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

package/components/app/Table.svelte

@@ -0,0 +1,32 @@
+<section>
+    <table>
+        <slot />
+    </table>
+</section>
+
+<style>
+    section {
+        width: 100%;
+        overflow-x: auto;
+        margin-top: var(--app-text-spacing);
+        margin-bottom: var(--app-text-spacing);
+        border-top: var(--app-chrome-border-size) solid var(--app-border-color);
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-border-color);
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        clear: both;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    table :global(td:not(:first-of-type)) {
+        padding: var(--app-chrome-padding);
+        vertical-align: top;
+        font-family: var(--app-font);
+        font-weight: 300;
+    }
+</style>

package/components/app/Table.svelte.d.ts

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

package/components/app/TextInput.svelte

@@ -0,0 +1,38 @@
+<script>export let text = '';
+export let autocomplete = null;
+export let type;
+export let placeholder;
+export let disabled;
+let input;
+export function value() {
+    return text;
+}
+</script>
+
+<input
+    {autocomplete}
+    {type}
+    {placeholder}
+    {disabled}
+    value={text}
+    bind:this={input}
+    on:input={() => (text = input.value)}
+/>
+
+<style>
+    input {
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
+        color: var(--app-font-color);
+        padding: var(--app-chrome-padding);
+        font-size: var(--app-chrome-font-size);
+        border: none;
+        border-bottom: var(--app-chrome-border-size) solid
+            var(--app-border-color);
+    }
+
+    input:focus {
+        border-bottom-color: var(--app-interactive-color);
+        outline: none;
+    }
+</style>

package/components/app/TextInput.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        text?: string | undefined;
+        autocomplete?: string | null | undefined;
+        type: string;
+        placeholder: string;
+        disabled: boolean;
+        value?: (() => string) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextInputProps = typeof __propDef.props;
+export type TextInputEvents = typeof __propDef.events;
+export type TextInputSlots = typeof __propDef.slots;
+export default class TextInput extends SvelteComponentTyped<TextInputProps, TextInputEvents, TextInputSlots> {
+    get value(): () => string;
+}
+export {};

package/components/chapter/Atom.svelte

@@ -1,3 +1,5 @@
+<svelte:options immutable={true} />
+
 <script>import { getCaret } from '../page/Contexts';
 export let node;
 let caret = getCaret();
@@ -5,12 +7,20 @@ let caret = getCaret();
 $: selected = $caret && $caret.range && $caret.range.start.node === node;
 function handleMouseDown() {
     // Select this so that the view stays focused.
-    $caret?.setCaret({ start: { node: node, index: 0 }, end: { node: node, index: 0 } });
+    $caret?.setCaret({
+        start: { node: node, index: 0 },
+        end: { node: node, index: 0 },
+    });
 }
 </script>
 
 <!-- Prevent the editor from receiving the click. -->
-<span class={`bookish-editor-atom ${selected ? "bookish-editor-atom-selected" : ""} ${$caret?.focused ? "bookish-editor-atom-selected-focused" : ""}`} on:mousedown|stopPropagation|preventDefault={handleMouseDown}><slot></slot></span>
+<span
+    class={`bookish-editor-atom ${
+        selected ? 'bookish-editor-atom-selected' : ''
+    } ${$caret?.focused ? 'bookish-editor-atom-selected-focused' : ''}`}
+    on:mousedown|stopPropagation|preventDefault={handleMouseDown}><slot /></span
+>
 
 <style>
     .bookish-editor-atom {
@@ -29,8 +39,12 @@ function handleMouseDown() {
     }
 
     @keyframes atom-selected {
-        from, to { outline-width: 2px; }
-        50% { outline-width: 4px; }
+        from,
+        to {
+            outline-width: 2px;
+        }
+        50% {
+            outline-width: 4px;
+        }
     }
-
-</style>
+</style>

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

@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type AtomProps = typeof __propDef.props;
-export declare type AtomEvents = typeof __propDef.events;
-export declare type AtomSlots = typeof __propDef.slots;
+export type AtomProps = typeof __propDef.props;
+export type AtomEvents = typeof __propDef.events;
+export type AtomSlots = typeof __propDef.slots;
 export default class Atom extends SvelteComponentTyped<AtomProps, AtomEvents, AtomSlots> {
 }
 export {};

package/components/chapter/Block.svelte

@@ -1,32 +1,37 @@
-<script>import CalloutNode from "../../models/chapter/CalloutNode";
-import CodeNode from "../../models/chapter/CodeNode";
-import EmbedNode from "../../models/chapter/EmbedNode";
-import ErrorNode from "../../models/chapter/ErrorNode";
-import ListNode from "../../models/chapter/ListNode";
-import ParagraphNode from "../../models/chapter/ParagraphNode";
-import QuoteNode from "../../models/chapter/QuoteNode";
-import RuleNode from "../../models/chapter/RuleNode";
-import TableNode from "../../models/chapter/TableNode";
-import Callout from "./Callout.svelte";
-import CaptionedCode from "./CaptionedCode.svelte";
-import Embed from "./Embed.svelte";
-import ErrorMessage from "./ErrorMessage.svelte";
-import List from "./List.svelte";
-import Paragraph from "./Paragraph.svelte";
-import Quote from "./Quote.svelte";
-import Rule from "./Rule.svelte";
-import Table from "./Table.svelte";
+<svelte:options immutable={true} />
+
+<script>import CalloutNode from '../../models/chapter/CalloutNode';
+import CodeNode from '../../models/chapter/CodeNode';
+import EmbedNode from '../../models/chapter/EmbedNode';
+import ErrorNode from '../../models/chapter/ErrorNode';
+import ListNode from '../../models/chapter/ListNode';
+import ParagraphNode from '../../models/chapter/ParagraphNode';
+import QuoteNode from '../../models/chapter/QuoteNode';
+import RuleNode from '../../models/chapter/RuleNode';
+import TableNode from '../../models/chapter/TableNode';
+import Callout from './Callout.svelte';
+import CaptionedCode from './CaptionedCode.svelte';
+import Embed from './Embed.svelte';
+import ErrorMessage from './ErrorMessage.svelte';
+import List from './List.svelte';
+import Paragraph from './Paragraph.svelte';
+import Quote from './Quote.svelte';
+import Rule from './Rule.svelte';
+import Table from './Table.svelte';
+import Problem from './Problem.svelte';
+import { isChapterEditable } from '../page/Contexts';
 export let node;
+let editable = isChapterEditable();
 </script>
 
 {#if node instanceof ParagraphNode}<Paragraph {node} />
 {:else if node instanceof ListNode}<List {node} />
-{:else if node instanceof EmbedNode}<Embed {node} />
+{:else if node instanceof EmbedNode}<Embed {node} {editable} />
 {:else if node instanceof CalloutNode}<Callout {node} />
 {:else if node instanceof QuoteNode}<Quote {node} />
 {:else if node instanceof CodeNode}<CaptionedCode {node} />
 {:else if node instanceof ErrorNode}<ErrorMessage {node} />
 {:else if node instanceof RuleNode}<Rule {node} />
 {:else if node instanceof TableNode}<Table {node} />
-{:else}<p class="bookish-error">Unknown node type</p>
-{/if}
+{:else}<p><Problem>Unknown node type</Problem></p>
+{/if}

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type BlockNode from "../../models/chapter/BlockNode";
+import type BlockNode from '../../models/chapter/BlockNode';
 declare const __propDef: {
     props: {
         node: BlockNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type BlockProps = typeof __propDef.props;
-export declare type BlockEvents = typeof __propDef.events;
-export declare type BlockSlots = typeof __propDef.slots;
+export type BlockProps = typeof __propDef.props;
+export type BlockEvents = typeof __propDef.events;
+export type BlockSlots = typeof __propDef.slots;
 export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
 }
 export {};

package/components/chapter/Callout.svelte

@@ -1,10 +1,41 @@
-<script>import Block from "./Block.svelte";
-import renderPosition from "./renderPosition";
+<svelte:options immutable={true} />
+
+<script>import Block from './Block.svelte';
+import Positioned from './Positioned.svelte';
 export let node;
 </script>
 
-<div class={"bookish-callout " + renderPosition(node.getPosition())} data-nodeid={node.nodeID}>
-    {#each node.getBlocks() as element }
-        <Block node={element} />
-    {/each}
-</div>
+<Positioned position={node.getPosition()}>
+    <section class={'bookish-callout'} data-nodeid={node.nodeID}>
+        {#each node.getBlocks() as element (element.nodeID)}
+            <Block node={element} />
+        {/each}
+    </section>
+</Positioned>
+
+<style>
+    .bookish-callout {
+        border: none;
+        border-top: 2px solid var(--bookish-border-color-bold);
+        border-bottom: 2px solid var(--bookish-border-color-bold);
+        margin: var(--bookish-paragraph-spacing);
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: var(--bookish-paragraph-spacing);
+        padding-bottom: var(--bookish-paragraph-spacing);
+        line-height: var(--bookish-paragraph-line-height-tight);
+        clear: both;
+        position: relative;
+    }
+
+    .bookish-callout :global(h2),
+    .bookish-callout :global(h3),
+    .bookish-callout :global(h4) {
+        margin-top: 0;
+    }
+
+    .bookish-callout :global(ol),
+    .bookish-callout :global(ul) {
+        padding-left: 1rem;
+    }
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type CalloutNode from "../../models/chapter/CalloutNode";
+import type CalloutNode from '../../models/chapter/CalloutNode';
 declare const __propDef: {
     props: {
         node: CalloutNode;
@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CalloutProps = typeof __propDef.props;
-export declare type CalloutEvents = typeof __propDef.events;
-export declare type CalloutSlots = typeof __propDef.slots;
+export type CalloutProps = typeof __propDef.props;
+export type CalloutEvents = typeof __propDef.events;
+export type CalloutSlots = typeof __propDef.slots;
 export default class Callout extends SvelteComponentTyped<CalloutProps, CalloutEvents, CalloutSlots> {
 }
 export {};

package/components/chapter/CaptionedCode.svelte

@@ -1,34 +1,77 @@
+<svelte:options immutable={true} />
+
 <script>import Code from './Code.svelte';
 import Python from './Python.svelte';
-import Format from './Format.svelte';
 import Text from './Text.svelte';
-import renderPosition from './renderPosition';
-import { isEditable } from "../page/Contexts";
+import { isChapterEditable } from '../page/Contexts';
+import Figure from './Figure.svelte';
+import { getCaret } from '../page/Contexts';
 export let node;
-$: caption = node.getCaption();
 $: language = node.getLanguage();
-let editable = isEditable();
+let editable = isChapterEditable();
 // const languages = [ "C", "C++", "CSS", "Go", "HTML", "Java", "JavaScript", "Markdown", "Plaintext", "Python", "TypeScript" ];
+let caret = getCaret();
+$: inside =
+    $caret?.range?.start.node === node.getCodeNode() ||
+        $caret?.range?.end.node === node.getCodeNode();
 </script>
 
-<div class={"bookish-figure " + renderPosition(node.getPosition())} data-nodeid={node.nodeID}>
-    {#if editable }
-        <code 
-            class={`bookish-code bookish-code-block language-${language}`}
-        >
-            <Text node={node.getCodeNode()}/>
-        </code>
-    {:else}
-        {#if node.getLanguage() === "python" && node.isExecutable() }
-            <Python node={node} startCode={node.getCode()}></Python>
-        {:else}
-            <div>
-                <Code editable={false} inline={false} language={node.getLanguage()} nodeID={node.getCodeNode().nodeID}>{node.getCode()}</Code>
-                {#if node.getLanguage() !== "plaintext"}<div class="bookish-code-language">{node.getLanguage()}</div>{/if}
+<Figure {node} caption={node.getCaption()}>
+    {#if editable}
+        <div class="container">
+            <code
+                class={`bookish-code bookish-code-block language-${language} ${
+                    !inside ? 'hidden' : ''
+                }`}
+            >
+                <Text node={node.getCodeNode()} />
+            </code>
+            <div class="code" class:inside>
+                <Code
+                    editable={false}
+                    inline={false}
+                    language={node.getLanguage()}
+                    nodeID={node.getCodeNode().nodeID}>{node.getCode()}</Code
+                >
             </div>
-        {/if}
-    {/if}
-    {#if caption }
-        <div class="bookish-figure-caption"><Format node={caption} placeholder="caption"/></div>
+        </div>
+    {:else if node.getLanguage() === 'python' && node.isExecutable()}
+        <Python {node} startCode={node.getCode()} />
+    {:else}
+        <Code
+            editable={false}
+            inline={false}
+            language={node.getLanguage()}
+            nodeID={node.getCodeNode().nodeID}>{node.getCode()}</Code
+        >
     {/if}
-</div>
+    {#if node.getLanguage() !== 'plaintext'}<aside class="language"
+            >{node.getLanguage()}</aside
+        >{/if}
+</Figure>
+
+<style>
+    .language {
+        float: right;
+        margin-top: 0;
+        font-size: small;
+        color: gray;
+        margin-right: 0.5em;
+    }
+
+    .bookish-code.hidden {
+        opacity: 0;
+    }
+
+    .container {
+        position: relative;
+    }
+    .code {
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+    .code.inside {
+        display: none;
+    }
+</style>