@mvarble/mesearch-ui 0.0.0-stage → 0.1.0

package/dist/components/Shell.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { onMount, type Snippet } from 'svelte';
+    import { reading } from '../reading.svelte.js';
+    import { theme } from '../theme.svelte.js';
+    import type { RailLink, SearchEntry } from '../types.js';
+    import Palette from './Palette.svelte';
+    import Rail from './Rail.svelte';
+
+    // What every page sits in: the rail (a dock on phones), the search
+    // palette, a skip link, and the theme kept applied. Wrap a root layout's
+    // children in it.
+    let {
+        title,
+        home,
+        links = [],
+        search,
+        navigate,
+        logo,
+        children,
+    }: {
+        title: string;
+        home: string;
+        links?: RailLink[];
+        // Where the palette's entries come from; without it there is no search.
+        search?: string | (() => Promise<SearchEntry[]>);
+        navigate?: (url: string) => unknown;
+        // The rail's mark, instead of the title's initials.
+        logo?: Snippet;
+        children: Snippet;
+    } = $props();
+
+    let searching = $state(false);
+
+    onMount(() => theme.start());
+</script>
+
+<a class="skip" href="#main">Skip to content</a>
+<Rail
+    {title}
+    {home}
+    {links}
+    onsearch={search ? () => (searching = true) : undefined}
+    progress={reading.progress}
+    {logo}
+/>
+{#if search}
+    <Palette index={search} {navigate} bind:open={searching} />
+{/if}
+
+<div class="shell">
+    {@render children()}
+</div>
+
+<style>
+    .shell {
+        min-height: 100vh;
+        padding-bottom: 6rem;
+    }
+
+    @media (min-width: 960px) {
+        .shell {
+            margin-left: var(--rail-width);
+            padding-bottom: 0;
+        }
+    }
+
+    .skip {
+        position: absolute;
+        left: 1rem;
+        top: -3rem;
+        z-index: 50;
+        padding: 0.5rem 0.9rem;
+        background: var(--accent);
+        color: var(--accent-ink);
+        border-radius: var(--radius);
+        font: 500 var(--font-size-ui) var(--font-ui);
+    }
+
+    .skip:focus {
+        top: 1rem;
+    }
+</style>

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

@@ -0,0 +1,14 @@
+import { type Snippet } from 'svelte';
+import type { RailLink, SearchEntry } from '../types.js';
+type $$ComponentProps = {
+    title: string;
+    home: string;
+    links?: RailLink[];
+    search?: string | (() => Promise<SearchEntry[]>);
+    navigate?: (url: string) => unknown;
+    logo?: Snippet;
+    children: Snippet;
+};
+declare const Shell: import("svelte").Component<$$ComponentProps, {}, "">;
+type Shell = ReturnType<typeof Shell>;
+export default Shell;

package/dist/components/Statement.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+    import type { Component } from 'svelte';
+    import type { StatementInfo } from '../types.js';
+
+    // A theorem, a definition, a remark: a document of its own, spread in as
+    // `<Statement {...theorem} />`. Its heading runs into its first line, and
+    // claims --- theorems, lemmas and their kin --- are set in italics, as in
+    // a textbook; definitions, remarks and examples stay upright.
+    let {
+        default: Body,
+        cms,
+        noLabel = false,
+        noBlock = false,
+    }: {
+        default: Component;
+        cms: StatementInfo;
+        // Leave out the "Theorem 2." heading.
+        noLabel?: boolean;
+        // Render it without its frame, as part of the surrounding text.
+        noBlock?: boolean;
+    } = $props();
+
+    const UPRIGHT = /^(definition|remark|example|notation|note|exercise|assumption|problem)s?$/i;
+
+    let upright = $derived(UPRIGHT.test(cms.kind.trim()));
+    let name = $derived(
+        cms.kind
+            .split(' ')
+            .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
+            .join(' '),
+    );
+</script>
+
+<div class="statement" class:upright class:bare={noBlock} id={cms.id ?? cms.slug}>
+    {#if !noLabel}
+        <span class="heading"
+            >{name}&nbsp;{cms.label}{#if cms.title}<span class="title">({cms.title})</span
+                >{/if}.</span
+        >
+    {/if}<Body />
+</div>
+
+<style>
+    .statement {
+        margin: 1.75em 0;
+        padding: 0.1em 0 0.1em 1.1em;
+        border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+        font-style: italic;
+        scroll-margin-top: 2rem;
+    }
+
+    /* Equation numbers stay upright, as they are everywhere else. */
+    .statement :global(.math-tag) {
+        font-style: normal;
+    }
+
+    .statement.upright {
+        border-left-color: var(--rule-strong);
+        font-style: normal;
+    }
+
+    .statement.bare {
+        margin: 0;
+        padding: 0;
+        border: none;
+    }
+
+    /* A block of its own within the line, so justification leaves its
+     * spaces alone. */
+    .heading {
+        display: inline-block;
+        margin-right: 0.3em;
+        font-style: normal;
+        font-weight: 650;
+        color: var(--ink);
+    }
+
+    .title {
+        margin-left: 0.3em;
+        font-weight: 400;
+    }
+
+    /* A first paragraph runs on from the heading, as in a textbook. */
+    .heading + :global(p) {
+        display: inline;
+    }
+
+    .statement > :global(:first-child:not(.heading)) {
+        margin-top: 0;
+    }
+
+    .statement > :global(:last-child) {
+        margin-bottom: 0;
+    }
+
+    .statement:target {
+        animation: arrive 2.4s ease-out;
+    }
+
+    @keyframes arrive {
+        from {
+            background: var(--accent-soft);
+        }
+    }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+import type { StatementInfo } from '../types.js';
+type $$ComponentProps = {
+    default: Component;
+    cms: StatementInfo;
+    noLabel?: boolean;
+    noBlock?: boolean;
+};
+declare const Statement: Component<$$ComponentProps, {}, "">;
+type Statement = ReturnType<typeof Statement>;
+export default Statement;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { theme } from '../theme.svelte.js';
+    import Icon from './Icon.svelte';
+
+    // Shows the theme in use; a click switches to the other one.
+    let label = $derived(
+        theme.resolved == 'dark' ? 'Dark theme: switch to light' : 'Light theme: switch to dark',
+    );
+</script>
+
+<button
+    class="rail-button needs-js"
+    type="button"
+    onclick={() => theme.toggle()}
+    aria-label={label}
+    title={label}
+>
+    <Icon name={theme.resolved == 'dark' ? 'moon' : 'sun'} />
+</button>

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

@@ -0,0 +1,3 @@
+declare const ThemeToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/Toc.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import type { TocEntry } from '../types.js';
+
+    // The document's headings, with the one being read marked. Without
+    // JavaScript it is a plain list of anchors.
+    let { entries, label = 'On this page' }: { entries: TocEntry[]; label?: string } = $props();
+
+    let active = $state<string | null>(null);
+    // How far down the list the marker sits, for the line beside it.
+    let list: HTMLElement | undefined = $state();
+    let marker = $state<{ top: number; height: number } | null>(null);
+
+    const flatten = (items: TocEntry[]): TocEntry[] =>
+        items.flatMap((item) => [item, ...flatten(item.children)]);
+
+    onMount(() => {
+        const slugs = flatten(entries).map((entry) => entry.slug);
+        const headings = slugs
+            .map((slug) => document.getElementById(slug))
+            .filter((heading): heading is HTMLElement => !!heading);
+        if (!headings.length) return;
+
+        // The current section is the last heading to have passed a line a
+        // little below the top of the screen; before the first, none is.
+        let frame = 0;
+        const update = () => {
+            frame = 0;
+            const line = Math.min(140, innerHeight * 0.25);
+            let current: string | null = null;
+            for (const heading of headings) {
+                if (heading.getBoundingClientRect().top - line > 0) break;
+                current = heading.id;
+            }
+            const atEnd = innerHeight + scrollY >= document.documentElement.scrollHeight - 4;
+            active = atEnd ? headings.at(-1)!.id : current;
+        };
+        const schedule = () => (frame ||= requestAnimationFrame(update));
+        update();
+        addEventListener('scroll', schedule, { passive: true });
+        addEventListener('resize', schedule);
+        return () => {
+            removeEventListener('scroll', schedule);
+            removeEventListener('resize', schedule);
+            cancelAnimationFrame(frame);
+        };
+    });
+
+    $effect(() => {
+        const link = active
+            ? list?.querySelector<HTMLElement>(`a[href="#${CSS.escape(active)}"]`)
+            : null;
+        marker = link && list ? { top: link.offsetTop, height: link.offsetHeight } : null;
+    });
+</script>
+
+{#snippet tree(items: TocEntry[])}
+    <ul>
+        {#each items as item (item.slug)}
+            <li class="depth-{item.depth}">
+                <a
+                    href="#{item.slug}"
+                    class:active={active == item.slug}
+                    aria-current={active == item.slug ? 'location' : undefined}
+                >
+                    {@html item.titleHtml}
+                </a>
+                {#if item.children.length}{@render tree(item.children)}{/if}
+            </li>
+        {/each}
+    </ul>
+{/snippet}
+
+<nav class="toc" aria-label={label}>
+    <p class="eyebrow">{label}</p>
+    <div class="list" bind:this={list}>
+        {#if marker}
+            <span
+                class="marker"
+                style:transform="translateY({marker.top}px)"
+                style:height="{marker.height}px"
+            ></span>
+        {/if}
+        {@render tree(entries)}
+    </div>
+</nav>
+
+<style>
+    .toc {
+        font-family: var(--font-ui);
+    }
+
+    .eyebrow {
+        margin: 0 0 0.8rem;
+    }
+
+    .list {
+        position: relative;
+        border-left: 1px solid var(--rule);
+    }
+
+    .marker {
+        position: absolute;
+        left: -1px;
+        top: 0;
+        width: 2px;
+        background: var(--accent);
+        transition:
+            transform 180ms ease,
+            height 180ms ease;
+    }
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    ul ul {
+        padding-left: 0.8rem;
+    }
+
+    a {
+        display: block;
+        padding: 0.28rem 0 0.28rem 0.9rem;
+        font-size: 0.82rem;
+        line-height: 1.4;
+        color: var(--muted);
+        text-decoration: none;
+        transition: color 120ms;
+    }
+
+    .depth-1 > a {
+        color: var(--ink-soft);
+        font-weight: 500;
+    }
+
+    a:hover {
+        color: var(--ink);
+    }
+
+    a.active {
+        color: var(--accent);
+    }
+</style>

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

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

package/dist/fonts.d.ts

@@ -0,0 +1,4 @@
+import '@fontsource-variable/source-serif-4/opsz.css';
+import '@fontsource-variable/source-serif-4/opsz-italic.css';
+import '@fontsource-variable/inter/wght.css';
+import '@fontsource/fira-mono/400.css';

package/dist/fonts.js

@@ -0,0 +1,6 @@
+// The typefaces the default variables name. Import this module once, from a
+// root layout, to load them; a site that sets its own fonts can skip it.
+import '@fontsource-variable/source-serif-4/opsz.css';
+import '@fontsource-variable/source-serif-4/opsz-italic.css';
+import '@fontsource-variable/inter/wght.css';
+import '@fontsource/fira-mono/400.css';

package/dist/fuzzy.d.ts

@@ -0,0 +1,12 @@
+export interface Match {
+    score: number;
+    indices: number[];
+}
+export declare function fuzzy(query: string, text: string): Match | null;
+export declare function bestMatch(query: string, fields: Array<[text: string, weight: number]>): (Match & {
+    field: number;
+}) | null;
+export declare function highlight(text: string, indices: number[]): Array<{
+    text: string;
+    hit: boolean;
+}>;

package/dist/fuzzy.js

@@ -0,0 +1,57 @@
+// A small fuzzy matcher for the index and the search palette: every character
+// of the query must appear in order, and a match scores higher the more of it
+// falls at the start of words and in runs.
+const isBoundary = (text, i) => i == 0 || /[\s\-_/.(:,]/.test(text[i - 1]);
+export function fuzzy(query, text) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return { score: 0, indices: [] };
+    const t = text.toLowerCase();
+    // A plain substring is the strongest kind of match.
+    const at = t.indexOf(q);
+    if (at >= 0) {
+        const indices = Array.from({ length: q.length }, (_, i) => at + i);
+        return { score: 100 + q.length * 4 + (isBoundary(t, at) ? 30 : 0) - at * 0.1, indices };
+    }
+    const indices = [];
+    let score = 0;
+    let run = 0;
+    let from = 0;
+    for (const char of q) {
+        if (char == ' ')
+            continue;
+        const i = t.indexOf(char, from);
+        if (i < 0)
+            return null;
+        run = indices.length && i == indices.at(-1) + 1 ? run + 1 : 0;
+        score += 1 + run * 2 + (isBoundary(t, i) ? 4 : 0) - Math.min(i - from, 10) * 0.15;
+        indices.push(i);
+        from = i + 1;
+    }
+    return { score, indices };
+}
+// The best match over several fields, each weighted.
+export function bestMatch(query, fields) {
+    let best = null;
+    fields.forEach(([text, weight], field) => {
+        const match = fuzzy(query, text);
+        if (match && (!best || match.score * weight > best.score)) {
+            best = { score: match.score * weight, indices: match.indices, field };
+        }
+    });
+    return best;
+}
+// `text` cut into runs, marking those that matched.
+export function highlight(text, indices) {
+    const hits = new Set(indices);
+    const parts = [];
+    for (let i = 0; i < text.length; i++) {
+        const hit = hits.has(i);
+        const last = parts.at(-1);
+        if (last && last.hit == hit)
+            last.text += text[i];
+        else
+            parts.push({ text: text[i], hit });
+    }
+    return parts;
+}

package/dist/graph-layout.d.ts

@@ -0,0 +1,35 @@
+import { type Simulation, type SimulationLinkDatum, type SimulationNodeDatum } from 'd3-force';
+export interface GraphTuning {
+    charge: number;
+    linkDistance: number;
+    gravity: number;
+}
+export declare const DEFAULT_TUNING: GraphTuning;
+export interface LayoutNode extends SimulationNodeDatum {
+    id: string;
+    width: number;
+    height: number;
+    depth: number;
+}
+export interface LayoutEdge extends SimulationLinkDatum<LayoutNode> {
+    source: string | LayoutNode;
+    target: string | LayoutNode;
+    style: 'solid' | 'dashed';
+}
+export declare const BAND = 92;
+export declare const NODE_HEIGHT = 30;
+export declare const estimateWidth: (label: string) => number;
+export declare function depths(ids: string[], edges: Array<{
+    from: string;
+    to: string;
+    style: string;
+}>): Map<string, number>;
+export declare function createSimulation(nodes: LayoutNode[], edges: LayoutEdge[], tuning: GraphTuning): Simulation<LayoutNode, LayoutEdge>;
+export declare function layout(nodes: LayoutNode[], edges: LayoutEdge[], tuning: GraphTuning, ticks?: number): Map<string, {
+    x: number;
+    y: number;
+}>;
+export declare function boxExit(cx: number, cy: number, width: number, height: number, x: number, y: number, margin?: number): {
+    x: number;
+    y: number;
+};

package/dist/graph-layout.js

@@ -0,0 +1,98 @@
+import { forceLink, forceManyBody, forceSimulation, forceX, forceY, } from 'd3-force';
+export const DEFAULT_TUNING = { charge: -900, linkDistance: 80, gravity: 0.02 };
+// Vertical distance between dependency bands.
+export const BAND = 92;
+export const NODE_HEIGHT = 30;
+// A label's width before the browser can measure it: an average glyph width
+// for the interface font at the graph's size, plus padding.
+export const estimateWidth = (label) => Math.round(Math.min(label.length, 42) * 6.9 + 28);
+// How deep each node sits: the longest chain of solid edges leading into it.
+// A cycle --- which the content should not have, but might --- is cut where
+// the walk first comes back on itself.
+export function depths(ids, edges) {
+    const into = new Map(ids.map((id) => [id, []]));
+    for (const edge of edges)
+        if (edge.style == 'solid')
+            into.get(edge.to)?.push(edge.from);
+    const depth = new Map();
+    const visiting = new Set();
+    const visit = (id) => {
+        const known = depth.get(id);
+        if (known !== undefined)
+            return known;
+        if (visiting.has(id))
+            return 0;
+        visiting.add(id);
+        const parents = into.get(id) ?? [];
+        const value = parents.length ? 1 + Math.max(...parents.map(visit)) : 0;
+        visiting.delete(id);
+        depth.set(id, value);
+        return value;
+    };
+    ids.forEach(visit);
+    return depth;
+}
+// Keeps labels from overlapping: any two boxes that would touch are pushed
+// apart along whichever axis they overlap least.
+function forceBoxes(padding = 10) {
+    let nodes = [];
+    const force = (alpha) => {
+        for (let i = 0; i < nodes.length; i++) {
+            const a = nodes[i];
+            for (let j = i + 1; j < nodes.length; j++) {
+                const b = nodes[j];
+                const dx = (b.x ?? 0) - (a.x ?? 0);
+                const dy = (b.y ?? 0) - (a.y ?? 0);
+                const overlapX = (a.width + b.width) / 2 + padding - Math.abs(dx);
+                const overlapY = (a.height + b.height) / 2 + padding - Math.abs(dy);
+                if (overlapX <= 0 || overlapY <= 0)
+                    continue;
+                const strength = Math.min(1, alpha * 4);
+                if (overlapX < overlapY) {
+                    const shift = (overlapX / 2) * strength * (dx < 0 ? -1 : 1);
+                    a.x = (a.x ?? 0) - shift;
+                    b.x = (b.x ?? 0) + shift;
+                }
+                else {
+                    const shift = (overlapY / 2) * strength * (dy < 0 ? -1 : 1);
+                    a.y = (a.y ?? 0) - shift;
+                    b.y = (b.y ?? 0) + shift;
+                }
+            }
+        }
+    };
+    force.initialize = (given) => (nodes = given);
+    return force;
+}
+export function createSimulation(nodes, edges, tuning) {
+    const deepest = Math.max(0, ...nodes.map((node) => node.depth));
+    const bandOf = (node) => (node.depth - deepest / 2) * BAND;
+    return forceSimulation(nodes)
+        .force('links', forceLink(edges)
+        .id((node) => node.id)
+        .distance((edge) => edge.style == 'solid' ? tuning.linkDistance : tuning.linkDistance * 2.2)
+        .strength((edge) => (edge.style == 'solid' ? 0.6 : 0.06)))
+        .force('charge', forceManyBody().strength(tuning.charge).distanceMax(700))
+        .force('bands', forceY(bandOf).strength(0.5))
+        .force('gravity', forceX(0).strength(tuning.gravity))
+        .force('gravityY', forceY(0).strength(tuning.gravity / 4))
+        .force('boxes', forceBoxes());
+}
+// Runs the simulation to rest and returns where everything ended up.
+export function layout(nodes, edges, tuning, ticks = 400) {
+    const simulation = createSimulation(nodes, edges, tuning).stop();
+    simulation.tick(ticks);
+    return new Map(nodes.map((node) => [node.id, { x: node.x ?? 0, y: node.y ?? 0 }]));
+}
+// The point where the segment from a box's centre towards (x, y) leaves the
+// box, so that an edge starts and ends at a label's border.
+export function boxExit(cx, cy, width, height, x, y, margin = 3) {
+    const dx = x - cx;
+    const dy = y - cy;
+    if (dx == 0 && dy == 0)
+        return { x: cx, y: cy };
+    const sx = (width / 2 + margin) / Math.abs(dx || 1e-9);
+    const sy = (height / 2 + margin) / Math.abs(dy || 1e-9);
+    const s = Math.min(sx, sy, 1);
+    return { x: cx + dx * s, y: cy + dy * s };
+}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { default as Article } from './components/Article.svelte';
+export { default as ArticleHeader } from './components/ArticleHeader.svelte';
+export { default as Chips } from './components/Chips.svelte';
+export { default as Graph, MESEARCH_LEGEND } from './components/Graph.svelte';
+export { default as GraphPanel } from './components/GraphPanel.svelte';
+export { default as Icon } from './components/Icon.svelte';
+export { default as Index } from './components/Index.svelte';
+export { default as Pager } from './components/Pager.svelte';
+export { default as Proof } from './components/Proof.svelte';
+export { default as References } from './components/References.svelte';
+export { default as Palette } from './components/Palette.svelte';
+export { default as Parts } from './components/Parts.svelte';
+export { default as Rail } from './components/Rail.svelte';
+export { default as SequenceTrack } from './components/SequenceTrack.svelte';
+export { default as Shell } from './components/Shell.svelte';
+export { default as Statement } from './components/Statement.svelte';
+export { default as ThemeToggle } from './components/ThemeToggle.svelte';
+export { default as Toc } from './components/Toc.svelte';
+export { configure, formatDate, isoDate, kindLabel, plain, settings } from './settings.js';
+export { theme, THEME_SCRIPT, type ThemeChoice } from './theme.svelte.js';
+export { reading } from './reading.svelte.js';
+export { bestMatch, fuzzy, highlight } from './fuzzy.js';
+export { DEFAULT_TUNING, type GraphTuning } from './graph-layout.js';
+export type * from './types.js';

package/dist/index.js

@@ -0,0 +1,30 @@
+// The pieces mesearch sites are made of, for any Svelte site to use. Data and
+// URLs are always passed in, so nothing here knows how a site stores its
+// content or lays out its pages.
+//
+// Styles: import '@mvarble/mesearch-ui/styles/index.css' once, from a root
+// layout, along with KaTeX's stylesheet and, for the default typefaces,
+// '@mvarble/mesearch-ui/fonts'.
+export { default as Article } from './components/Article.svelte';
+export { default as ArticleHeader } from './components/ArticleHeader.svelte';
+export { default as Chips } from './components/Chips.svelte';
+export { default as Graph, MESEARCH_LEGEND } from './components/Graph.svelte';
+export { default as GraphPanel } from './components/GraphPanel.svelte';
+export { default as Icon } from './components/Icon.svelte';
+export { default as Index } from './components/Index.svelte';
+export { default as Pager } from './components/Pager.svelte';
+export { default as Proof } from './components/Proof.svelte';
+export { default as References } from './components/References.svelte';
+export { default as Palette } from './components/Palette.svelte';
+export { default as Parts } from './components/Parts.svelte';
+export { default as Rail } from './components/Rail.svelte';
+export { default as SequenceTrack } from './components/SequenceTrack.svelte';
+export { default as Shell } from './components/Shell.svelte';
+export { default as Statement } from './components/Statement.svelte';
+export { default as ThemeToggle } from './components/ThemeToggle.svelte';
+export { default as Toc } from './components/Toc.svelte';
+export { configure, formatDate, isoDate, kindLabel, plain, settings } from './settings.js';
+export { theme, THEME_SCRIPT } from './theme.svelte.js';
+export { reading } from './reading.svelte.js';
+export { bestMatch, fuzzy, highlight } from './fuzzy.js';
+export { DEFAULT_TUNING } from './graph-layout.js';

package/dist/reading.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare const reading: {
+    progress: number | null;
+};