@mvarble/mesearch-ui 0.0.0-stage → 0.1.0

package/dist/components/Palette.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SearchEntry } from '../types.js';
+type $$ComponentProps = {
+    index: string | (() => Promise<SearchEntry[]>);
+    navigate?: (url: string) => unknown;
+    open?: boolean;
+};
+declare const Palette: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Palette = ReturnType<typeof Palette>;
+export default Palette;

package/dist/components/Parts.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import type { DocumentRef } from '../types.js';
+
+    // The parts of a sequence on its own page: numbered, titled, summarised.
+    type Part = DocumentRef & { summaryHtml?: string; label?: string };
+    let { parts }: { parts: Part[] } = $props();
+</script>
+
+{#if parts.length}
+    <ol class="parts">
+        {#each parts as part, i (part.key)}
+            <li class="kind-{part.kind}">
+                <span class="number">{part.label ?? i + 1}</span>
+                <div>
+                    <a href={part.url}>{@html part.titleHtml}</a>
+                    {#if part.summaryHtml}<p>{@html part.summaryHtml}</p>{/if}
+                </div>
+            </li>
+        {/each}
+    </ol>
+{/if}
+
+<style>
+    .parts {
+        list-style: none;
+        margin: 2.5rem 0 0;
+        padding: 0;
+        border-top: 1px solid var(--rule);
+    }
+
+    li {
+        display: grid;
+        grid-template-columns: 2.5rem 1fr;
+        gap: 0.75rem;
+        padding: 1.1rem 0;
+        border-bottom: 1px solid var(--rule);
+    }
+
+    .number {
+        font: 600 1.6rem / 1.1 var(--font-serif);
+        color: var(--kind);
+        font-variant-numeric: oldstyle-nums;
+    }
+
+    a {
+        font: 600 1.15rem / 1.3 var(--font-serif);
+        color: var(--ink);
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: var(--kind);
+    }
+
+    p {
+        margin: 0.3rem 0 0;
+        color: var(--ink-soft);
+        font-size: 0.97rem;
+        line-height: 1.6;
+        text-align: left;
+    }
+</style>

package/dist/components/Parts.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentRef } from '../types.js';
+type Part = DocumentRef & {
+    summaryHtml?: string;
+    label?: string;
+};
+type $$ComponentProps = {
+    parts: Part[];
+};
+declare const Parts: import("svelte").Component<$$ComponentProps, {}, "">;
+type Parts = ReturnType<typeof Parts>;
+export default Parts;

package/dist/components/Proof.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    // A proof: "Proof." running into its first line, and a square at its end.
+    let { title = 'Proof', children }: { title?: string; children: Snippet } = $props();
+</script>
+
+<div class="proof">
+    <span class="heading">{title}.</span>{@render children()}
+</div>
+
+<style>
+    .proof {
+        margin: 1.25em 0 1.75em;
+    }
+
+    .heading {
+        margin-right: 0.3em;
+        font-style: italic;
+        color: var(--ink);
+    }
+
+    /* The first paragraph runs on from "Proof." */
+    .heading + :global(p) {
+        display: inline;
+    }
+
+    .proof > :global(:last-child) {
+        margin-bottom: 0;
+    }
+
+    .proof::after {
+        content: '∎';
+        display: block;
+        margin-top: -1.72em;
+        text-align: right;
+        color: var(--muted);
+    }
+</style>

package/dist/components/Proof.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title?: string;
+    children: Snippet;
+};
+declare const Proof: import("svelte").Component<$$ComponentProps, {}, "">;
+type Proof = ReturnType<typeof Proof>;
+export default Proof;

package/dist/components/Rail.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import type { RailLink } from '../types.js';
+    import Icon from './Icon.svelte';
+    import ThemeToggle from './ThemeToggle.svelte';
+
+    // Instead of a header across the top every page has this: a slim spine
+    // down the left edge on wide screens, and a floating dock at the bottom on
+    // narrow ones. The site's monogram, search, a few links, and the theme ---
+    // and on a document, how far along the reader is.
+    let {
+        title,
+        home,
+        links = [],
+        onsearch,
+        progress = null,
+        logo,
+    }: {
+        // The site's name; its initials make the monogram.
+        title: string;
+        home: string;
+        links?: RailLink[];
+        // Left out, there is no search button.
+        onsearch?: () => void;
+        progress?: number | null;
+        // Drawn in place of the initials.
+        logo?: Snippet;
+    } = $props();
+
+    let monogram = $derived(
+        title
+            .split(/\s+/)
+            .filter(Boolean)
+            .slice(0, 2)
+            .map((word) => word[0]!.toUpperCase())
+            .join(''),
+    );
+</script>
+
+<nav class="rail" aria-label="Site">
+    <a class="monogram" href={home} {title} aria-label={`${title}, home`}>
+        {#if logo}{@render logo()}{:else}{monogram}{/if}
+    </a>
+    <div class="actions">
+        {#if onsearch}
+            <button
+                class="rail-button needs-js"
+                type="button"
+                onclick={onsearch}
+                aria-label="Search"
+                title="Search  ( / )"
+            >
+                <Icon name="search" />
+            </button>
+        {/if}
+        {#each links as link (link.url)}
+            <a class="rail-button" href={link.url} aria-label={link.label} title={link.label}
+                ><Icon name={link.icon} /></a
+            >
+        {/each}
+    </div>
+    <div class="end">
+        <ThemeToggle />
+    </div>
+    {#if progress !== null}
+        <div class="progress" aria-hidden="true">
+            <div class="progress-fill" style:transform="scaleY({progress})"></div>
+        </div>
+    {/if}
+</nav>
+
+<style>
+    .rail {
+        position: fixed;
+        z-index: 40;
+        display: flex;
+        align-items: center;
+        background: color-mix(in srgb, var(--paper-sunken) 88%, transparent);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        font-family: var(--font-ui);
+    }
+
+    .monogram {
+        display: grid;
+        place-items: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 10px;
+        background: var(--accent);
+        color: var(--accent-ink);
+        font: 600 1.05rem / 1 var(--font-serif);
+        letter-spacing: 0.02em;
+        text-decoration: none;
+        flex: none;
+    }
+
+    .actions,
+    .end {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .rail :global(.rail-button) {
+        display: grid;
+        place-items: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        border: none;
+        border-radius: 10px;
+        background: transparent;
+        color: var(--muted);
+        cursor: pointer;
+        text-decoration: none;
+        transition:
+            background 120ms,
+            color 120ms;
+    }
+
+    .rail :global(.rail-button:hover) {
+        background: var(--accent-soft);
+        color: var(--ink);
+    }
+
+    /* Narrow screens: a floating dock, centred at the bottom. */
+    .rail {
+        left: 50%;
+        bottom: max(0.9rem, env(safe-area-inset-bottom));
+        transform: translateX(-50%);
+        flex-direction: row;
+        gap: 0.35rem;
+        padding: 0.35rem;
+        border: 1px solid var(--rule);
+        border-radius: 16px;
+        box-shadow: var(--shadow);
+    }
+
+    .progress {
+        display: none;
+    }
+
+    /* Wide screens: a spine down the left edge. */
+    @media (min-width: 960px) {
+        .rail {
+            left: 0;
+            top: 0;
+            bottom: 0;
+            transform: none;
+            width: var(--rail-width);
+            flex-direction: column;
+            gap: 0;
+            padding: 0.9rem 0;
+            border: none;
+            border-right: 1px solid var(--rule);
+            border-radius: 0;
+            box-shadow: none;
+        }
+
+        .actions {
+            flex-direction: column;
+            margin-top: 1.5rem;
+        }
+
+        .end {
+            margin-top: auto;
+            flex-direction: column;
+        }
+
+        .progress {
+            display: block;
+            position: absolute;
+            top: 0;
+            right: -1px;
+            bottom: 0;
+            width: 2px;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: var(--accent);
+            transform-origin: top;
+            transition: transform 80ms linear;
+        }
+    }
+</style>

package/dist/components/Rail.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { RailLink } from '../types.js';
+type $$ComponentProps = {
+    title: string;
+    home: string;
+    links?: RailLink[];
+    onsearch?: () => void;
+    progress?: number | null;
+    logo?: Snippet;
+};
+declare const Rail: import("svelte").Component<$$ComponentProps, {}, "">;
+type Rail = ReturnType<typeof Rail>;
+export default Rail;

package/dist/components/References.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import type { Reference } from '../types.js';
+
+    // What a page cites, at its end: small, in label order, each entry the
+    // target of the citations to it. Following one highlights it; the
+    // browser's back button returns to the text.
+    let { entries, heading = 'References' }: { entries: Reference[]; heading?: string } = $props();
+</script>
+
+{#if entries.length}
+    <section class="references" aria-label={heading}>
+        <p class="eyebrow">{heading}</p>
+        <ol>
+            {#each entries as entry (entry.id)}
+                <li id={entry.id}>
+                    <span class="label">[{entry.label}]</span>
+                    <span class="entry">{@html entry.html}</span>
+                </li>
+            {/each}
+        </ol>
+    </section>
+{/if}
+
+<style>
+    .references {
+        margin-top: 3rem;
+        padding-top: 1.1rem;
+        border-top: 1px solid var(--rule);
+    }
+
+    .eyebrow {
+        margin: 0 0 0.8rem;
+        color: var(--muted);
+    }
+
+    ol {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        gap: 0.45rem 0.9rem;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    li {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        scroll-margin-top: 30vh;
+        border-radius: var(--radius);
+    }
+
+    .label {
+        padding-top: 0.12em;
+        font: 500 0.75rem / 1.5 var(--font-ui);
+        font-variant-numeric: tabular-nums;
+        color: var(--muted);
+    }
+
+    .entry {
+        font: 400 0.86rem / 1.55 var(--font-body);
+        color: var(--ink-soft);
+        text-wrap: pretty;
+    }
+
+    .entry :global(a) {
+        color: var(--muted);
+        text-decoration-color: var(--rule-strong);
+        text-underline-offset: 0.15em;
+        overflow-wrap: anywhere;
+    }
+
+    .entry :global(a:hover) {
+        color: var(--accent);
+    }
+
+    li:target {
+        animation: arrive 2.4s ease-out;
+    }
+
+    li:target .entry {
+        color: var(--ink);
+    }
+
+    li:target .label {
+        color: var(--accent);
+    }
+
+    @keyframes arrive {
+        from {
+            background: var(--accent-soft);
+        }
+    }
+</style>

package/dist/components/References.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Reference } from '../types.js';
+type $$ComponentProps = {
+    entries: Reference[];
+    heading?: string;
+};
+declare const References: import("svelte").Component<$$ComponentProps, {}, "">;
+type References = ReturnType<typeof References>;
+export default References;

package/dist/components/SequenceTrack.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+    import type { TrackItem } from '../types.js';
+
+    // A sequence drawn as a line of stations: the ones behind the reader are
+    // filled in, the current one is marked, the ones ahead are open circles.
+    // A station's sections hang beneath it as smaller stops.
+    let {
+        title,
+        url,
+        items,
+        current,
+        eyebrow,
+    }: {
+        // The sequence itself, as HTML, and where its own page is.
+        title: string;
+        url: string;
+        items: TrackItem[];
+        // The key of the stop the reader is on, if any.
+        current?: string;
+        // Above the sequence's name; `Sequence · 2 of 3` by default.
+        eyebrow?: string;
+    } = $props();
+
+    const flatten = (stops: TrackItem[]): TrackItem[] =>
+        stops.flatMap((stop) => [stop, ...flatten(stop.children ?? [])]);
+    let order = $derived(flatten(items).map((stop) => stop.key));
+    let position = $derived(current ? order.indexOf(current) : -1);
+    const state = (stop: TrackItem) => {
+        const at = order.indexOf(stop.key);
+        return { done: position >= 0 && at < position, here: at == position };
+    };
+    let top = $derived(items.findIndex((stop) => flatten([stop]).some((s) => s.key == current)));
+</script>
+
+{#snippet stops(list: TrackItem[], nested: boolean)}
+    <ol class:nested>
+        {#each list as stop, i (stop.key)}
+            {@const { done, here } = state(stop)}
+            <li class:done class:current={here}>
+                <span class="station" aria-hidden="true">{stop.label ?? i + 1}</span>
+                {#if here}
+                    <span class="title" aria-current="page">{@html stop.titleHtml}</span>
+                {:else}
+                    <a class="title" href={stop.url}>{@html stop.titleHtml}</a>
+                {/if}
+                {#if stop.children?.length}{@render stops(stop.children, true)}{/if}
+            </li>
+        {/each}
+    </ol>
+{/snippet}
+
+<nav class="track kind-sequence" aria-label="Sequence">
+    <p class="eyebrow">
+        {eyebrow ?? (top >= 0 ? `Sequence · ${top + 1} of ${items.length}` : 'Sequence')}
+    </p>
+    <a class="name" href={url} aria-current={position < 0 && current ? 'page' : undefined}
+        >{@html title}</a
+    >
+    {@render stops(items, false)}
+</nav>
+
+<style>
+    .track {
+        font-family: var(--font-ui);
+    }
+
+    .eyebrow {
+        margin: 0 0 0.35rem;
+        color: var(--kind);
+    }
+
+    .name {
+        display: block;
+        margin-bottom: 1rem;
+        font: 600 1rem / 1.3 var(--font-serif);
+        color: var(--ink);
+        text-decoration: none;
+    }
+
+    .name:hover {
+        color: var(--kind);
+    }
+
+    ol {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    ol.nested {
+        grid-column: 2;
+        margin-top: 0.6rem;
+    }
+
+    ol.nested li {
+        grid-template-columns: 1.1rem 1fr;
+        padding-bottom: 0.5rem;
+    }
+
+    ol.nested .station {
+        width: 1.1rem;
+        height: 1.1rem;
+        border-width: 1.5px;
+        font-size: 0;
+    }
+
+    ol.nested li:not(:last-child)::before {
+        left: calc(0.55rem - 1px);
+        top: 1.1rem;
+    }
+
+    ol.nested .title {
+        padding-top: 0;
+        font-size: 0.8rem;
+    }
+
+    li {
+        position: relative;
+        display: grid;
+        grid-template-columns: 1.6rem 1fr;
+        gap: 0.6rem;
+        padding-bottom: 0.9rem;
+    }
+
+    /* The line joining one station to the next. */
+    li:not(:last-child)::before {
+        content: '';
+        position: absolute;
+        left: calc(0.8rem - 1px);
+        top: 1.6rem;
+        bottom: 0;
+        width: 2px;
+        background: var(--rule-strong);
+    }
+
+    /* Filled once the stop it leads to is reached, so a chapter the reader is
+     * partway through does not look finished. */
+    li:has(+ li.done)::before,
+    li:has(+ li.current)::before {
+        background: var(--kind);
+    }
+
+    .station {
+        display: grid;
+        place-items: center;
+        width: 1.6rem;
+        height: 1.6rem;
+        border: 2px solid var(--rule-strong);
+        border-radius: 50%;
+        background: var(--paper);
+        font: 600 0.68rem / 1 var(--font-ui);
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* A stop's own station and title only: its sections are stops of their
+     * own, behind or ahead of the reader independently. */
+    li.done > .station {
+        border-color: var(--kind);
+        background: var(--kind);
+        color: var(--paper);
+    }
+
+    li.current > .station {
+        border-color: var(--kind);
+        color: var(--kind);
+        box-shadow: 0 0 0 4px var(--kind-soft);
+    }
+
+    .title {
+        font-size: 0.84rem;
+        line-height: 1.4;
+        padding-top: 0.2rem;
+        color: var(--muted);
+        text-decoration: none;
+    }
+
+    a.title:hover {
+        color: var(--ink);
+    }
+
+    li.current > .title {
+        color: var(--ink);
+        font-weight: 600;
+    }
+</style>

package/dist/components/SequenceTrack.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { TrackItem } from '../types.js';
+type $$ComponentProps = {
+    title: string;
+    url: string;
+    items: TrackItem[];
+    current?: string;
+    eyebrow?: string;
+};
+declare const SequenceTrack: import("svelte").Component<$$ComponentProps, {}, "">;
+type SequenceTrack = ReturnType<typeof SequenceTrack>;
+export default SequenceTrack;