@mvarble/mesearch-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,16 @@
+import type { GraphLegend as Legend } from '../types.js';
+export declare const MESEARCH_LEGEND: Legend;
+import { type Component } from 'svelte';
+import { type GraphTuning } from '../graph-layout.js';
+import type { GraphLegend, GraphLink, GraphNode, IndexEntry } from '../types.js';
+type $$ComponentProps = {
+    nodes: GraphNode[];
+    links: GraphLink[];
+    entries: Record<string, IndexEntry>;
+    descriptions?: Record<string, Component>;
+    tuning?: GraphTuning;
+    legend?: GraphLegend;
+};
+declare const Graph: Component<$$ComponentProps, {}, "">;
+type Graph = ReturnType<typeof Graph>;
+export default Graph;

package/dist/components/GraphPanel.svelte

@@ -0,0 +1,328 @@
+<script lang="ts">
+    import type { Component } from 'svelte';
+    import { formatDate, isoDate, kindLabel } from '../settings.js';
+    import type { GraphLink, IndexEntry } from '../types.js';
+    import Icon from './Icon.svelte';
+
+    // A selected node's preview. Beside a wide graph it is a drawer that slides
+    // out of the graph's right edge, leaving the graph usable; under a narrow
+    // one it is a sheet that rises from the bottom of the screen, which a thumb
+    // can reach and dismiss with a downward swipe. Either way the reader stays
+    // on the map, can hop to neighbouring nodes, and opens the document only
+    // when they choose to.
+    let {
+        entry,
+        Description,
+        links,
+        entries,
+        onselect,
+        headings = { from: 'Builds on', to: 'Leads to', related: 'Related' },
+    }: {
+        entry: IndexEntry | undefined;
+        Description: Component | undefined;
+        links: GraphLink[];
+        entries: Record<string, IndexEntry>;
+        onselect: (key: string | null) => void;
+        headings?: { from: string; to: string; related: string };
+    } = $props();
+
+    let panel: HTMLElement | undefined = $state();
+    let dragFrom: number | null = null;
+    let dragBy = $state(0);
+
+    const neighbours = (pick: (link: GraphLink) => string | undefined) =>
+        links
+            .map(pick)
+            .filter((key): key is string => !!key && !!entries[key])
+            .map((key) => entries[key]!);
+
+    let buildsOn = $derived(
+        entry
+            ? neighbours((l) => (l.style == 'solid' && l.to == entry!.key ? l.from : undefined))
+            : [],
+    );
+    let leadsTo = $derived(
+        entry
+            ? neighbours((l) => (l.style == 'solid' && l.from == entry!.key ? l.to : undefined))
+            : [],
+    );
+    let related = $derived(
+        entry
+            ? neighbours((l) =>
+                  l.style == 'dashed'
+                      ? l.from == entry!.key
+                          ? l.to
+                          : l.to == entry!.key
+                            ? l.from
+                            : undefined
+                      : undefined,
+              )
+            : [],
+    );
+
+    $effect(() => {
+        if (entry) panel?.focus({ preventScroll: true });
+    });
+
+    function onkeydown(event: KeyboardEvent) {
+        if (event.key == 'Escape') {
+            onselect(null);
+            event.stopPropagation();
+        }
+    }
+
+    // Swiping the sheet's handle down far enough dismisses it.
+    function onhandledown(event: PointerEvent) {
+        dragFrom = event.clientY;
+        (event.currentTarget as Element).setPointerCapture(event.pointerId);
+    }
+    function onhandlemove(event: PointerEvent) {
+        if (dragFrom !== null) dragBy = Math.max(0, event.clientY - dragFrom);
+    }
+    function onhandleup() {
+        if (dragBy > 90) onselect(null);
+        dragFrom = null;
+        dragBy = 0;
+    }
+</script>
+
+{#if entry}
+    <button
+        class="backdrop"
+        type="button"
+        aria-label="Close the preview"
+        onclick={() => onselect(null)}
+    ></button>
+{/if}
+
+<aside
+    bind:this={panel}
+    class="panel kind-{entry?.kind ?? 'concept'}"
+    class:open={entry}
+    style:--drag="{dragBy}px"
+    aria-label={entry ? `${kindLabel(entry.kind)}: ${entry.title}` : undefined}
+    aria-hidden={!entry}
+    tabindex="-1"
+    {onkeydown}
+    inert={!entry}
+>
+    {#if entry}
+        <div
+            class="handle"
+            onpointerdown={onhandledown}
+            onpointermove={onhandlemove}
+            onpointerup={onhandleup}
+            onpointercancel={onhandleup}
+            aria-hidden="true"
+        ></div>
+        <header>
+            <p class="eyebrow kind">{kindLabel(entry.kind)}</p>
+            <button class="close" type="button" onclick={() => onselect(null)} aria-label="Close">
+                <Icon name="close" size={18} />
+            </button>
+        </header>
+        <h3 class="title">{@html entry.titleHtml}</h3>
+        <p class="meta">
+            Updated <time datetime={isoDate(entry.updated)}>{formatDate(entry.updated)}</time>
+            {#if entry.readingMinutes}· {entry.readingMinutes} min read{/if}
+        </p>
+        <div class="body prose">
+            {#if Description}
+                <Description />
+            {:else if entry.summaryHtml}
+                <p>{@html entry.summaryHtml}</p>
+            {/if}
+        </div>
+
+        {#each [[headings.from, buildsOn], [headings.to, leadsTo], [headings.related, related]] as const as [heading, list] (heading)}
+            {#if list.length}
+                <section>
+                    <h4 class="eyebrow">{heading}</h4>
+                    <ul class="chips">
+                        {#each list as other (other.key)}
+                            <li>
+                                <button
+                                    type="button"
+                                    class="chip kind-{other.kind}"
+                                    onclick={() => onselect(other.key)}
+                                >
+                                    {other.title}
+                                </button>
+                            </li>
+                        {/each}
+                    </ul>
+                </section>
+            {/if}
+        {/each}
+
+        <a class="read" href={entry.url}>
+            Read the {kindLabel(entry.kind).toLowerCase()}
+            <Icon name="arrow-right" size={18} />
+        </a>
+    {/if}
+</aside>
+
+<style>
+    .panel {
+        position: absolute;
+        z-index: 5;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: min(23rem, 45%);
+        display: flex;
+        flex-direction: column;
+        gap: 0.9rem;
+        padding: 1.1rem 1.25rem 1.25rem;
+        background: var(--paper-raised);
+        border-left: 1px solid var(--rule);
+        box-shadow: var(--shadow);
+        overflow-y: auto;
+        outline: none;
+        transform: translateX(105%);
+        transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+        font-family: var(--font-ui);
+    }
+
+    .panel.open {
+        transform: none;
+    }
+
+    .backdrop,
+    .handle {
+        display: none;
+    }
+
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top: 3px solid var(--kind);
+        margin: -1.1rem -1.25rem 0;
+        padding: 0.8rem 1.25rem 0;
+    }
+
+    .kind {
+        color: var(--kind);
+        margin: 0;
+    }
+
+    .close {
+        display: grid;
+        place-items: center;
+        width: 2rem;
+        height: 2rem;
+        border: none;
+        border-radius: 8px;
+        background: transparent;
+        color: var(--muted);
+        cursor: pointer;
+    }
+
+    .close:hover {
+        background: var(--accent-soft);
+        color: var(--ink);
+    }
+
+    .title {
+        margin: 0;
+        font: 600 1.45rem / 1.2 var(--font-serif);
+        color: var(--ink);
+        text-wrap: balance;
+    }
+
+    .meta {
+        margin: -0.4rem 0 0;
+        font-size: 0.8rem;
+        color: var(--muted);
+    }
+
+    .body {
+        font: 400 0.98rem / 1.65 var(--font-serif);
+        color: var(--ink-soft);
+    }
+
+    .body :global(p:last-child) {
+        margin-bottom: 0;
+    }
+
+    section h4 {
+        margin: 0 0 0.45rem;
+    }
+
+    .chip {
+        font-size: 0.8rem;
+    }
+
+    .read {
+        margin-top: auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.7rem 1rem;
+        border-radius: 10px;
+        background: var(--kind);
+        color: var(--paper-raised);
+        font: 600 0.9rem / 1 var(--font-ui);
+        text-decoration: none;
+        transition: filter 120ms;
+    }
+
+    .read:hover {
+        filter: brightness(1.08);
+    }
+
+    /* A narrow screen: a sheet over the bottom of it. */
+    @media (max-width: 759px) {
+        .panel {
+            position: fixed;
+            z-index: 60;
+            top: auto;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: auto;
+            max-height: 75vh;
+            border-left: none;
+            border-top: 1px solid var(--rule);
+            border-radius: 18px 18px 0 0;
+            box-shadow: var(--shadow-strong);
+            padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
+            transform: translateY(105%);
+        }
+
+        .panel.open {
+            transform: translateY(var(--drag));
+            transition: transform 200ms ease;
+        }
+
+        header {
+            border-top: none;
+        }
+
+        .handle {
+            display: block;
+            align-self: center;
+            width: 2.75rem;
+            height: 5px;
+            margin: -0.35rem 0 -0.4rem;
+            padding: 0;
+            border-radius: 3px;
+            background: var(--rule-strong);
+            cursor: grab;
+            touch-action: none;
+            flex: none;
+        }
+
+        .backdrop {
+            display: block;
+            position: fixed;
+            z-index: 55;
+            inset: 0;
+            border: none;
+            background: rgba(20, 16, 10, 0.3);
+            cursor: default;
+        }
+    }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+import type { GraphLink, IndexEntry } from '../types.js';
+type $$ComponentProps = {
+    entry: IndexEntry | undefined;
+    Description: Component | undefined;
+    links: GraphLink[];
+    entries: Record<string, IndexEntry>;
+    onselect: (key: string | null) => void;
+    headings?: {
+        from: string;
+        to: string;
+        related: string;
+    };
+};
+declare const GraphPanel: Component<$$ComponentProps, {}, "">;
+type GraphPanel = ReturnType<typeof GraphPanel>;
+export default GraphPanel;

package/dist/components/Icon.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    // A handful of line icons, drawn on a 24-unit grid in the current colour.
+    import type { IconName } from '../types.js';
+
+    let { name, size = 20 }: { name: IconName; size?: number } = $props();
+</script>
+
+<svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.6"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+>
+    {#if name == 'search'}
+        <circle cx="11" cy="11" r="6.5" /><path d="m20 20-4.3-4.3" />
+    {:else if name == 'graph'}
+        <circle cx="6" cy="6" r="2.4" /><circle cx="18" cy="8" r="2.4" /><circle
+            cx="11"
+            cy="18"
+            r="2.4"
+        /><path d="M8.2 7 15.7 7.7M7.2 8.1l2.6 7.7M16.8 10l-4.4 6.2" />
+    {:else if name == 'list'}
+        <path d="M9 6h11M9 12h11M9 18h11" /><circle cx="4.5" cy="6" r="1" /><circle
+            cx="4.5"
+            cy="12"
+            r="1"
+        /><circle cx="4.5" cy="18" r="1" />
+    {:else if name == 'sun'}
+        <circle cx="12" cy="12" r="4" /><path
+            d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"
+        />
+    {:else if name == 'moon'}
+        <path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z" />
+    {:else if name == 'auto'}
+        <circle cx="12" cy="12" r="8.5" /><path
+            d="M12 3.5v17A8.5 8.5 0 0 0 12 3.5Z"
+            fill="currentColor"
+        />
+    {:else if name == 'plus'}
+        <path d="M12 5v14M5 12h14" />
+    {:else if name == 'minus'}
+        <path d="M5 12h14" />
+    {:else if name == 'reset'}
+        <path d="M4 4v5h5" /><path d="M5.5 15a7.5 7.5 0 1 0 1.3-8.3L4 9" />
+    {:else if name == 'close'}
+        <path d="M6 6l12 12M18 6 6 18" />
+    {:else if name == 'arrow-right'}
+        <path d="M5 12h14M13 6l6 6-6 6" />
+    {:else if name == 'arrow-left'}
+        <path d="M19 12H5M11 6l-6 6 6 6" />
+    {:else if name == 'home'}
+        <path d="M4 11 12 4l8 7M6 9.5V20h12V9.5" />
+    {:else if name == 'pen'}
+        <path d="M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3Z" /><path d="m14.5 7.5 3 3" />
+    {:else if name == 'book'}
+        <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5Z" /><path
+            d="M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5"
+        />
+    {:else if name == 'quote'}
+        <path d="M5 11h4v6H4v-5c0-3 1.5-5 4-6M15 11h4v6h-5v-5c0-3 1.5-5 4-6" />
+    {/if}
+</svg>

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

@@ -0,0 +1,8 @@
+import type { IconName } from '../types.js';
+type $$ComponentProps = {
+    name: IconName;
+    size?: number;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;