bookish-press 0.4.0

package/components/chapter/Comment.svelte

@@ -0,0 +1,46 @@
+<script>import Atom from './Atom.svelte';
+import Marginal from './Marginal.svelte';
+import Format from './Format.svelte';
+import { getChapter, isEditable } from '../page/Contexts';
+import { getCaret } from '../page/Contexts';
+import { afterUpdate } from 'svelte';
+import ToolbarIcon from '../editor/ToolbarIcon.svelte';
+export let node;
+let chapter = getChapter();
+let editable = isEditable();
+let caret = getCaret();
+$: chapterNode = $chapter?.chapter.getAST();
+$: focused = $caret && $caret.range && node.contains($caret.range.start.node);
+// Position the marginals on every render.
+afterUpdate(() => $chapter?.layoutMarginals());
+</script>
+
+<Atom {node}>
+    {#if editable}
+        <Marginal id={"comment-" + (chapterNode === undefined ? "?" : chapterNode.getComments().indexOf(node))}>
+            <span slot="interactor" class="bookish-comment-symbol">
+                <ToolbarIcon name="comment.svg"/>
+            </span>
+            <span slot="content" class={`bookish-app-comment ${focused ? "bookish-app-comment-focused" : ""}`}>
+                <Format node={node.getMeta()} placeholder="comment"/>
+            </span>
+        </Marginal>
+    {/if}
+</Atom>
+
+<style>
+    .bookish-app-comment {
+        background: var(--bookish-app-chrome-background);
+        border: var(--bookish-app-chrome-border-width) solid var(--bookish-app-chrome-border-color);
+        border-radius: 0 var(--bookish-app-chrome-padding) var(--bookish-app-chrome-padding) var(--bookish-app-chrome-padding);
+        padding: var(--bookish-app-chrome-padding);
+        font-size: var(--bookish-app-chrome-font-size);
+        display: inline-block;
+        line-height: 1.5em;
+    }
+
+    .bookish-app-comment-focused, .bookish-footnote-focused {
+        outline: 2px solid var(--bookish-highlight-color);
+    }
+
+</style>

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

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

package/components/chapter/Definition.svelte

@@ -0,0 +1,38 @@
+<script>import Parser from '../../models/chapter/Parser';
+import Text from './Text.svelte';
+import Format from './Format.svelte';
+import Marginal from './Marginal.svelte';
+import { getChapter, getEdition } from '../page/Contexts';
+import { afterUpdate } from 'svelte';
+export let node;
+let edition = getEdition();
+let chapter = getChapter();
+// Find the definition.
+$: glossaryID = node.getMeta();
+$: phrase = node.getText();
+$: glossary = $edition.getGlossary();
+$: entry = glossary[glossaryID];
+// Position the marginals on every render.
+afterUpdate(() => $chapter?.layoutMarginals());
+</script>    
+
+<!-- Error if there's no corresponding entry. -->
+<span class={`bookish-definition ${entry === undefined ? "bookish-error" : ""}`} data-nodeid={node.nodeID}>
+    <Marginal
+        id={"glossary-" + glossaryID}
+    >
+        <slot name="interactor">
+            <Text node={phrase}/>
+        </slot>
+        <slot name="content">
+            <span class="bookish-definition-entry">
+                {#if entry === undefined }
+                    <span class="bookish-error">Unknown glossary entry "{ glossaryID }"</span>
+                {:else}
+                    <strong class="bookish-definition-entry-phrase">{entry.phrase}</strong>: <Format node={Parser.parseFormat($edition, entry.definition)}/>
+                    {#if entry.synonyms && entry.synonyms.length > 0}<span class="bookish-definition-entry-synonyms"><br/><br/>{entry.synonyms.join(", ")}</span>{/if}
+                {/if}
+            </span>
+        </slot>
+    </Marginal>
+</span>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type DefinitionNode from "../../models/chapter/DefinitionNode";
+declare const __propDef: {
+    props: {
+        node: DefinitionNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        interactor: {};
+        content: {};
+    };
+};
+export declare type DefinitionProps = typeof __propDef.props;
+export declare type DefinitionEvents = typeof __propDef.events;
+export declare type DefinitionSlots = typeof __propDef.slots;
+export default class Definition extends SvelteComponentTyped<DefinitionProps, DefinitionEvents, DefinitionSlots> {
+}
+export {};

package/components/chapter/Embed.svelte

@@ -0,0 +1,122 @@
+<script>import renderPosition from './renderPosition';
+import { storage } from '../../models/Firebase';
+import Format from './Format.svelte';
+import { getCaret, getEdition, isEditable } from "../page/Contexts";
+export let node;
+export let placeholder = undefined;
+$: url = node.getURL();
+$: position = node.getPosition();
+$: description = node.getDescription();
+$: credit = node.getCredit();
+$: caption = node.getCaption();
+let caret = getCaret();
+let editable = isEditable();
+let edition = getEdition();
+let dragging = false;
+let dragFeedback = undefined;
+let imageError = false;
+function handleDrop(event) {
+    event.preventDefault();
+    if (event.dataTransfer?.items) {
+        // Get the files and convert them to file opens, then filter by allowed file extensions
+        const imageFiles = [...event.dataTransfer.items]
+            .filter(item => item.kind === 'file')
+            .map(item => item.getAsFile())
+            .filter(file => file !== null && /.*\.(jpg|jpeg|png)/i.test(file.name));
+        if (imageFiles.length === 0)
+            dragFeedback = "Only JPEG or PNG images are allowed.";
+        else if (imageFiles.length > 1)
+            dragFeedback = "Only one image at a time please!";
+        else {
+            dragFeedback = "Uploading…";
+            const file = imageFiles[0];
+            const media = $edition.getBook()?.getMedia();
+            if (file === null)
+                return;
+            if (storage === undefined)
+                return;
+            if (media === undefined)
+                return;
+            media.upload(file, (progress) => dragFeedback = `${progress}% done`, (error) => { dragFeedback = error; dragging = false; }, (url, thumbnails) => {
+                // Upload completed successfully, now we can get the download URL
+                $caret?.edit(node, node.withURLs(url, thumbnails).withDescription(""));
+                dragging = false;
+                dragFeedback = undefined;
+            });
+        }
+    }
+}
+function handleDrag(event) {
+    event?.preventDefault();
+    dragging = true;
+    dragFeedback = "Drop to upload…";
+}
+function handleDragLeave(event) {
+    if (event.target !== event.currentTarget)
+        return;
+    event?.preventDefault();
+    dragging = false;
+    dragFeedback = undefined;
+}
+function handleLoad() {
+    imageError = false;
+}
+function handleError() {
+    imageError = true;
+}
+</script>
+
+<div class={"bookish-figure " + renderPosition(position)} data-nodeid={node.nodeID}>
+    {#if url.trim().length === 0 }
+        {#if editable }
+            <div 
+                class={`bookish-figure-unspecified ${dragging ? "bookish-figure-dragging" : ""}`}
+                on:drop|preventDefault={handleDrop}
+                on:dragover={handleDrag}
+                on:dragleave={handleDragLeave}
+            >{
+                dragFeedback !== undefined ? dragFeedback :
+                placeholder !== undefined ? placeholder :
+                    "Click or drag to choose or upload an image, or enter an image or video URL."
+            }
+            </div>
+        {:else}
+            <div class="bookish-figure-unspecified">No image or video specified</div>
+        {/if}
+    {:else}
+        {#if url.includes("https://www.youtube.com") || 
+            url.includes("https://youtu.be") || 
+            url.includes("https://www.tiktok.com") || 
+            url.includes("vimeo.com") }
+            <div class="bookish-figure-embed">
+                <iframe 
+                    class="bookish-figure-frame"
+                    title="Embedded video content from streaming service"
+                    src={url} 
+                    frameBorder="0" 
+                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
+                    allowFullScreen>
+                </iframe>
+            </div>
+        {:else}
+            <img 
+                class={"bookish-figure-image"}
+                src={url.startsWith("http") ? url : "images/" + url}
+                srcset={node.hasSmallURL() ? `${node.getSmallURL()} 320w, ${url} 1024w` : undefined }
+                sizes={node.hasSmallURL() ? "(min-width: 1024px) 1024px, 320px" : undefined }
+                alt={description}
+                on:load={handleLoad}
+                on:error={handleError}
+            />
+        {/if}
+    {/if}
+    <div class="bookish-figure-caption">
+        <div class="bookish-figure-credit">
+            <Format node={credit} placeholder="credit" />
+        </div>
+        <Format node={caption} placeholder="caption" />
+    </div>
+    {#if imageError }
+        <div class="bookish-figure-unspecified">{ editable ? "Unable to load image. Is the URL correct? Are you offline?" : "Unable to load image" }</div>
+    {/if}
+</div>

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

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

package/components/chapter/ErrorMessage.svelte

@@ -0,0 +1,4 @@
+<script>export let node;
+</script>
+
+<span class="bookish-error" data-nodeid={node.nodeID}>Error: {node.getError()}</span>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type ErrorNode from "../../models/chapter/ErrorNode";
+declare const __propDef: {
+    props: {
+        node: ErrorNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ErrorMessageProps = typeof __propDef.props;
+export declare type ErrorMessageEvents = typeof __propDef.events;
+export declare type ErrorMessageSlots = typeof __propDef.slots;
+export default class ErrorMessage extends SvelteComponentTyped<ErrorMessageProps, ErrorMessageEvents, ErrorMessageSlots> {
+}
+export {};

package/components/chapter/Footnote.svelte

@@ -0,0 +1,37 @@
+<script>import Atom from './Atom.svelte';
+import Marginal from './Marginal.svelte';
+import Format from './Format.svelte';
+import { getCaret, getChapter, getEdition } from "../page/Contexts";
+import { afterUpdate } from "svelte";
+export let node;
+$: content = node.getMeta();
+let caret = getCaret();
+let chapter = getChapter();
+let edition = getEdition();
+// What footnote number is this?
+$: chapterNode = $chapter?.chapter?.getAST();
+$: number = chapterNode?.getFootnotes().indexOf(node);
+$: letter = number === undefined ? undefined : $edition.getFootnoteSymbol(number);
+$: focused = chapterNode && $caret && $caret.range && $caret.range.start.node.hasAncestor(chapterNode, node);
+// Position the marginals on every render.
+afterUpdate(() => $chapter?.layoutMarginals());
+</script>
+
+<Atom node={node}>
+    <span class={`bookish-footnote-link`} data-nodeid={node.nodeID}>
+        <Marginal id={"footnote-" + number}>
+            <sup slot="interactor" class="bookish-footnote-symbol">{letter}</sup>
+            <!-- We prevent default on the span to prevent mouse events from bubbling up to the footnote symbol. This is key for two reasons:
+                 1) clicks on the footnote select the footnote atom node itself
+                 2) we want to be able to click on footnote text and we can't do that if the footnote sets the caret to the atom after clicks. -->
+            <span slot="content" class={`bookish-footnote ${focused ? "bookish-footnote-focused" : ""}`} on:mousedown|preventDefault>
+                <sup class="bookish-footnote-symbol">{letter}</sup><Format node={content} placeholder="footnote"/></span>
+        </Marginal>
+    </span>
+</Atom>
+
+<style>
+    .bookish-footnote-focused {
+        outline: 2px solid var(--bookish-highlight-color);
+    }
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type FootnoteNode from "../../models/chapter/FootnoteNode";
+declare const __propDef: {
+    props: {
+        node: FootnoteNode;
+    };
+    events: {
+        mousedown: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FootnoteProps = typeof __propDef.props;
+export declare type FootnoteEvents = typeof __propDef.events;
+export declare type FootnoteSlots = typeof __propDef.slots;
+export default class Footnote extends SvelteComponentTyped<FootnoteProps, FootnoteEvents, FootnoteSlots> {
+}
+export {};

package/components/chapter/Format.svelte

@@ -0,0 +1,57 @@
+<script>import FormatNode from "../../models/chapter/FormatNode";
+import CitationsNode from "../../models/chapter/CitationsNode";
+import CommentNode from "../../models/chapter/CommentNode";
+import DefinitionNode from "../../models/chapter/DefinitionNode";
+import FootnoteNode from "../../models/chapter/FootnoteNode";
+import InlineCodeNode from "../../models/chapter/InlineCodeNode";
+import LabelNode from "../../models/chapter/LabelNode";
+import LinkNode from "../../models/chapter/LinkNode";
+import TextNode from "../../models/chapter/TextNode";
+import Citations from "./Citations.svelte";
+import Definition from "./Definition.svelte";
+import Footnote from "./Footnote.svelte";
+import InlineCode from "./InlineCode.svelte";
+import Label from "./Label.svelte";
+import Link from "./Link.svelte";
+import Comment from "./Comment.svelte";
+import Text from "./Text.svelte";
+import Format from "./Format.svelte";
+import { isEditable } from "../page/Contexts";
+export let node;
+export let placeholder = undefined;
+let editable = isEditable();
+$: format = node.getFormat();
+$: tag =
+    format === "*" ? "strong" :
+        format === "_" ? "em" :
+            format === "^" ? "sup" :
+                format === "v" ? "sub" :
+                    "span";
+$: showPlaceholder = node.isEmptyText() && placeholder !== undefined && editable;
+</script>
+
+<svelte:element this={tag} data-nodeid={node.nodeID} class={showPlaceholder ? "bookish-editor-placeholder" : ""}>
+    {#each node.getSegments() as segment}
+        {#if segment instanceof TextNode}<Text node={segment} />
+        {:else if segment instanceof InlineCodeNode}<InlineCode node={segment} />
+        {:else if segment instanceof LinkNode}<Link node={segment} />
+        {:else if segment instanceof CitationsNode}<Citations node={segment} />
+        {:else if segment instanceof DefinitionNode}<Definition node={segment} />
+        {:else if segment instanceof FootnoteNode}<Footnote node={segment} />
+        {:else if segment instanceof LabelNode}<Label node={segment} />
+        {:else if segment instanceof CommentNode}<Comment node={segment} />
+        {:else if segment instanceof FormatNode}<Format node={segment} />
+        {:else}<span class="bookish-error">Unknown segment type node={segment}</span>
+        {/if}
+    {/each}
+    {#if showPlaceholder }
+        { placeholder }
+    {/if}
+</svelte:element>
+
+<style>
+    .bookish-editor-placeholder {
+        color: var(--bookish-app-chrome-muted);
+        font-style: italic;
+    }    
+</style>

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

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

package/components/chapter/InlineCode.svelte

@@ -0,0 +1,12 @@
+<script>import { isEditable } from "../page/Contexts";
+import Code from './Code.svelte';
+import Text from './Text.svelte';
+export let node;
+let editable = isEditable();
+</script>
+
+{#if editable }
+    <span class="bookish-code bookish-code-inline hljs" data-nodeid={node.nodeID}><Text node={node.getText()}/></span>
+{:else}
+    <Code editable={false} inline={true} language={node.getMeta()} nodeID={node.getText().nodeID}>{node.getText().getText()}</Code>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type InlineCodeNode from "../../models/chapter/InlineCodeNode";
+declare const __propDef: {
+    props: {
+        node: InlineCodeNode;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InlineCodeProps = typeof __propDef.props;
+export declare type InlineCodeEvents = typeof __propDef.events;
+export declare type InlineCodeSlots = typeof __propDef.slots;
+export default class InlineCode extends SvelteComponentTyped<InlineCodeProps, InlineCodeEvents, InlineCodeSlots> {
+}
+export {};

package/components/chapter/Label.svelte

@@ -0,0 +1,20 @@
+<script>import Atom from './Atom.svelte';
+import { getChapter, isEditable } from "../page/Contexts";
+export let node;
+let editable = isEditable();
+let chapter = getChapter();
+$: ast = $chapter?.chapter.getAST();
+$: duplicate = ast === undefined ? false : ast.getLabels().filter(l => l.getMeta() === node.getMeta()).length > 1;
+</script>
+
+<Atom node={node}>
+    <span 
+        class={"bookish-label" + ($chapter?.highlightedID === node.getMeta() ? " bookish-content-highlight" : "")} 
+        id={node.getMeta()}
+        data-nodeid={node.nodeID}
+    >
+        {#if editable}
+            <span class={`${duplicate ? "bookish-error" : ""}`}>•<code>{node.getMeta()}</code></span>
+        {/if}
+    </span>
+</Atom>

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

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

package/components/chapter/Link.svelte

@@ -0,0 +1,51 @@
+<script>import { getBase, getEdition, isEditable } from "../page/Contexts";
+import Text from './Text.svelte';
+export let node;
+let base = getBase();
+let editable = isEditable();
+let edition = getEdition();
+$: url = node.getMeta();
+$: content = node.getText();
+function isInvalidChapterLink() {
+    // If it's internal, validate it.
+    if (!url.startsWith("http")) {
+        // Pull out any labels and just get the chapter name.
+        let chapter = url;
+        if (url.indexOf(":") >= 0) {
+            let parts = chapter.split(":");
+            chapter = parts[0];
+        }
+        if (chapter !== "" && !$edition.hasChapter(chapter))
+            return true;
+    }
+    return false;
+}
+</script>
+
+{#if editable}
+    <span class="bookish-editor-link"><Text node={content} /></span>
+<!-- If this is an invalid chapter link, say so -->
+{:else if isInvalidChapterLink()}
+    <span class="bookish-error">Unknown chapter name reference '{url}'</span>
+<!-- If this is external link, make an anchor that opens a new window. -->
+{:else if url.startsWith("http")}
+    <a href={url} target="_blank" rel="noreferrer"><Text node={content} /></a>
+<!-- If's a chapter link with a label -->
+{:else if url.indexOf(":") >= 0}
+    <!-- If the chapter isn't specified, set to the current chapter's id. -->
+    {#if url.split(":")[0] === ""}
+        <a href={"#" + url.split(":")[1]}><Text node={content} /></a>
+    {:else}
+        <a href={"/" + url.split(":")[0] + "#" + url.split(":")[1]}><Text node={content} /></a>
+    {/if}
+<!-- If this is internal link, make a route link to the chapter. -->
+{:else}       
+    <a href={base + "/" + url}><Text node={content} /></a>
+{/if}
+
+<style>
+    .bookish-editor-link {
+        color: var(--bookish-link-color);
+        font-weight: var(--bookish-link-font-weight);
+    }
+</style>

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

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

package/components/chapter/List.svelte

@@ -0,0 +1,14 @@
+<script>import ListNode from "../../models/chapter/ListNode";
+import Format from "./Format.svelte";
+export let node;
+</script>
+
+<svelte:element this={node.isNumbered() ? "ol" : "ul"} data-nodeid={node.nodeID}>
+    {#each node.getItems() as item }
+        {#if item instanceof ListNode }
+            <svelte:self node={item}/>
+        {:else}
+            <li><Format node={item}/></li>
+        {/if}
+    {/each}
+</svelte:element>

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

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

package/components/chapter/Marginal.svelte

@@ -0,0 +1,48 @@
+<script>import { isMobile, watchMobile } from '../../util/isMobile';
+import { onMount } from 'svelte';
+import { getChapter } from '../page/Contexts';
+export let id;
+let hovered = false;
+let chapter = getChapter();
+// If there's no marginal selected or this is different from the current selection, this is hidden.
+function isHidden() {
+    return $chapter?.marginalID === null || $chapter?.marginalID !== id;
+}
+function toggle() {
+    if ($chapter) {
+        if (isMobile() && isHidden())
+            $chapter.setMarginal(id);
+        // Otherwise, deselect.
+        else
+            $chapter.setMarginal(undefined);
+    }
+}
+function handleEnter() { hovered = true; }
+function handleExit() { hovered = false; }
+onMount(() => {
+    const mediaWatch = watchMobile();
+    mediaWatch.addEventListener("change", toggle);
+    return () => mediaWatch.removeEventListener("change", toggle);
+});
+</script>
+
+<span 
+    class={"bookish-marginal-interactor" + (hovered ? " bookish-marginal-hovered" : "") + (isHidden() ? "" : " bookish-marginal-selected")} 
+	tabIndex=0
+    on:mousedown={toggle}
+	on:keydown={event => event.key === "Enter" || event.key === " " ? toggle() : undefined }
+    on:mouseenter={handleEnter} 
+    on:mouseleave={handleExit}
+>
+    <slot name="interactor"></slot>
+</span>
+<span 
+    class={"bookish-marginal" + (isHidden() ? " bookish-marginal-hidden" : "") + (hovered ? " bookish-marginal-hovered" : "")} 
+	tabIndex=0
+    on:mousedown|stopPropagation={toggle} 
+	on:keydown={event => event.key === "Enter" || event.key === " " ? toggle() : undefined }
+    on:mouseenter={handleEnter} 
+    on:mouseleave={handleExit}
+>
+    <slot name="content"></slot>
+</span>