@poodle64/librarian 2026.10.4 → 2026.10.5

package/dist/components/markdown/markdown.js

@@ -17,7 +17,8 @@
  */
 import DOMPurify from 'isomorphic-dompurify';
 import { marked } from 'marked';
-import { mount, unmount } from 'svelte';
+import { markChanges } from '../../diff';
+import { webKey } from '../../web-sources';
 marked.setOptions({ gfm: true, breaks: false });
 /** Close anything the stream has opened but not yet finished. */
 export function balance(markdown) {
@@ -71,17 +72,25 @@ function dropFetchers(root) {
             el.remove();
     }
 }
-export function render(markdown, { streaming = false } = {}) {
-    const source = streaming ? balance(markdown) : markdown;
-    const html = marked.parse(source, { async: false });
-    const body = DOMPurify.sanitize(html, {
+/**
+ * `markdown` as sanitised HTML. With `previous`, the version before it, each
+ * block it changed is marked on the sanitised DOM, before its one serialisation.
+ */
+export function render(markdown, { streaming = false, previous } = {}) {
+    const body = sanitised(streaming ? balance(markdown) : markdown);
+    if (previous !== undefined && !streaming)
+        markChanges(body, sanitised(previous));
+    return body.innerHTML;
+}
+function sanitised(source) {
+    const body = DOMPurify.sanitize(marked.parse(source, { async: false }), {
         ADD_ATTR: ['target', 'rel', 'data-cite', 'tabindex', 'role'],
         FORBID_TAGS: ['style', 'form', 'input', 'button'],
         FORBID_ATTR: ['style', 'srcset', 'onerror', 'onload'],
         RETURN_DOM: true
     });
     dropFetchers(body);
-    return body.innerHTML;
+    return body;
 }
 let highlighterPromise = null;
 /** Loaded once, lazily — shiki's engine and grammars are not small. */
@@ -176,26 +185,94 @@ export function markCitations(root, valid) {
         text.replaceWith(fragment);
     }
 }
+const OPEN = /^ {0,3}(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/;
+const CLOSE = /^ {0,3}(`{3,}|~{3,})[ \t]*$/;
+/**
+ * Cut `markdown` at each fenced block whose language `has` a renderer for.
+ * A fence of another language (or none) is ordinary code and stays in the
+ * prose, and so does anything inside one: an example of a visual's fence in a
+ * code block is text. A block still open at the end is `closed: false`.
+ */
+export function splitVisuals(markdown, has) {
+    const parts = [];
+    let prose = [];
+    let code = null;
+    const flush = () => {
+        if (prose.join('').trim())
+            parts.push({ kind: 'md', text: prose.join('\n') });
+        prose = [];
+    };
+    for (const line of markdown.split('\n')) {
+        if (code) {
+            const close = CLOSE.exec(line);
+            if (close && close[1][0] === code.fence[0] && close[1].length >= code.fence.length) {
+                if (code.visual) {
+                    parts.push({
+                        kind: 'visual',
+                        lang: code.visual.lang,
+                        source: code.visual.lines.join('\n'),
+                        closed: true
+                    });
+                }
+                else
+                    prose.push(line);
+                code = null;
+            }
+            else if (code.visual)
+                code.visual.lines.push(line);
+            else
+                prose.push(line);
+            continue;
+        }
+        const open = OPEN.exec(line);
+        if (open) {
+            const lang = open[2];
+            if (lang && has(lang)) {
+                flush();
+                code = { fence: open[1], visual: { lang, lines: [] } };
+            }
+            else {
+                code = { fence: open[1] };
+                prose.push(line);
+            }
+            continue;
+        }
+        prose.push(line);
+    }
+    if (code?.visual)
+        parts.push({
+            kind: 'visual',
+            lang: code.visual.lang,
+            source: code.visual.lines.join('\n'),
+            closed: false
+        });
+    else
+        flush();
+    return parts;
+}
 /**
- * Draw every fenced block whose language the host registered with the host's
- * component, in place of the code block. The source is the block's text, never
- * HTML. Returns what unmounts them.
+ * Turn each link to a numbered web page into its citation chip: the link's
+ * text stays, unlinked, and the chip after it carries the page's number and
+ * opens the page. Against the rendered DOM, for the reason `markCitations` is.
  */
-export function mountFences(root, fences) {
-    const drawn = [];
-    for (const code of root.querySelectorAll('pre > code')) {
-        const lang = [...code.classList].find((c) => c.startsWith('language-'))?.slice(9);
-        const pre = code.parentElement;
-        if (!lang || !pre || !Object.hasOwn(fences, lang))
+export function markWebLinks(root, numbers) {
+    if (numbers.size === 0)
+        return;
+    for (const link of root.querySelectorAll('a[href]')) {
+        const href = link.getAttribute('href') ?? '';
+        const n = numbers.get(webKey(href));
+        if (n === undefined)
             continue;
-        const target = document.createElement('div');
-        pre.replaceWith(target);
-        drawn.push(mount(fences[lang], { target, props: { source: code.textContent ?? '' } }));
+        const chip = document.createElement('sup');
+        chip.className = 'ds-cite';
+        chip.dataset.cite = String(n);
+        chip.dataset.web = href;
+        chip.setAttribute('role', 'button');
+        chip.setAttribute('tabindex', '0');
+        chip.setAttribute('aria-label', `Web page ${n}`);
+        chip.textContent = String(n);
+        link.replaceWith(...link.childNodes, chip);
     }
-    return () => {
-        for (const one of drawn)
-            void unmount(one);
-    };
 }
 /**
  * Replace every `<pre><code>` in a rendered fragment with a highlighted one.

package/dist/components/markdown/markdown.svelte

@@ -7,13 +7,16 @@
   consuming app.
 -->
 <script lang="ts">
+	import { resolveCopy, type ChatCopy } from '../../copy';
+	import type { Visual } from '../../visuals';
+	import VisualBlock from '../visual-block/visual-block.svelte';
 	import {
 		highlight,
 		markCitations,
 		markCollections,
-		mountFences,
+		markWebLinks,
 		render,
-		type Fences
+		splitVisuals
 	} from './markdown';
 
 	interface Props {
@@ -23,13 +26,20 @@
 		collectionNames?: Set<string>;
 		/** `[n]` markers to turn into chips; omit and the markers stay as text. */
 		citationNumbers?: Set<number>;
+		/** Web pages by `webKey`, numbered after the library's: a link to one
+		 *  renders as its chip. */
+		webNumbers?: Map<string, number>;
 		oncite?: (n: number) => void;
 		/** A step down, for prose that is reference material beside an answer
 		 *  rather than the answer itself — the source pane's sections. */
 		dense?: boolean;
-		/** A language to draw with the host's own component instead of as code.
-		 *  Absent, every fence renders as code. */
-		fences?: Fences;
+		/** Renderers by a fence's language: a block of one is drawn by its
+		 *  component in place of the code. Absent, every fence is code. */
+		visuals?: Record<string, Visual>;
+		/** The same document's earlier version, as Markdown: what differs here
+		 *  is marked with a bar. */
+		previous?: string;
+		copy?: Partial<ChatCopy>;
 	}
 
 	let {
@@ -37,53 +47,68 @@
 		streaming = false,
 		collectionNames = new Set(),
 		citationNumbers = new Set(),
+		webNumbers = new Map(),
 		oncite,
 		dense = false,
-		fences
+		visuals,
+		previous,
+		copy
 	}: Props = $props();
 	let host = $state<HTMLElement | null>(null);
 
-	const html = $derived(render(content, { streaming }));
+	const words = $derived(resolveCopy(copy));
 
-	// Once settled (a half-written fence is not a chart), and before the
-	// highlight below, which would otherwise take the block first. Its own
-	// effect, so a change to the chips never unmounts what it drew.
-	$effect(() => {
-		void html;
-		if (!host || streaming || !fences) return;
-		return mountFences(host, fences);
-	});
+	// A visual is its own component between chunks of prose, so a token that
+	// grows the last chunk leaves the charts above it standing.
+	const parts = $derived(
+		visuals
+			? splitVisuals(content, (lang) => Object.hasOwn(visuals, lang))
+			: [{ kind: 'md' as const, text: content }]
+	);
+	const chunked = $derived(parts.some((part) => part.kind === 'visual'));
+	const lastPart = $derived(parts.length - 1);
+
+	const prose = (text: string, last: boolean): string => render(text, { streaming: streaming && last, previous });
 
 	// Highlight only once the text has settled. Re-running per token would
 	// re-parse grammars for a block that changes again milliseconds later.
 	$effect(() => {
-		if (!host || !html) return;
+		void parts;
+		if (!host) return;
 		// Chips are cheap and wanted DURING streaming; highlighting is not.
 		markCollections(host, collectionNames);
 		markCitations(host, citationNumbers);
+		markWebLinks(host, webNumbers);
 		if (streaming) return;
 		void highlight(host);
 	});
 
 	// Delegated, because the chips are created by the sanitiser's output rather
 	// than by this template — there is no element here to put a handler on.
-	function citeFrom(target: EventTarget | null): number | null {
-		const chip = (target as HTMLElement | null)?.closest?.('[data-cite]');
-		const n = Number((chip as HTMLElement | undefined)?.dataset.cite);
-		return Number.isFinite(n) && n > 0 ? n : null;
+	function chipOf(target: EventTarget | null): HTMLElement | null {
+		return ((target as HTMLElement | null)?.closest?.('[data-cite]') as HTMLElement | null) ?? null;
+	}
+
+	function press(chip: HTMLElement) {
+		if (chip.dataset.web) {
+			window.open(chip.dataset.web, '_blank', 'noopener,noreferrer');
+			return;
+		}
+		const n = Number(chip.dataset.cite);
+		if (Number.isFinite(n) && n > 0) oncite?.(n);
 	}
 
 	function click(event: MouseEvent) {
-		const n = citeFrom(event.target);
-		if (n !== null) oncite?.(n);
+		const chip = chipOf(event.target);
+		if (chip) press(chip);
 	}
 
 	function keydown(event: KeyboardEvent) {
 		if (event.key !== 'Enter' && event.key !== ' ') return;
-		const n = citeFrom(event.target);
-		if (n === null) return;
+		const chip = chipOf(event.target);
+		if (!chip) return;
 		event.preventDefault();
-		oncite?.(n);
+		press(chip);
 	}
 </script>
 
@@ -97,9 +122,30 @@
 	class="agent-prose"
 	class:is-dense={dense}
 	class:is-streaming={streaming}
+	class:is-chunked={chunked}
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in render() -->
-	{@html html}
+	{#if !chunked}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in render() -->
+		{@html prose(content, true)}
+	{:else}
+		{#each parts as part, i (i)}
+			{#if part.kind === 'md'}
+				<div class="ds-lib-chunk">
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in render() -->
+					{@html prose(part.text, i === lastPart)}
+				</div>
+			{:else if visuals}
+				<VisualBlock
+					lang={part.lang}
+					visual={visuals[part.lang]}
+					source={part.source}
+					closed={part.closed}
+					{streaming}
+					{words}
+				/>
+			{/if}
+		{/each}
+	{/if}
 </div>
 
 <style>
@@ -131,6 +177,31 @@
 		animation: ds-lib-caret 1.1s steps(1, end) infinite;
 	}
 
+	/* Chunked, the caret rides the last prose chunk's last block, not the chunk. */
+	.agent-prose.is-chunked.is-streaming :global(> .ds-lib-chunk:last-child::after) {
+		content: none;
+	}
+
+	.agent-prose.is-chunked.is-streaming :global(> .ds-lib-chunk:last-child > *:last-child::after) {
+		content: '';
+		display: inline-block;
+		width: 0.45em;
+		height: 1.05em;
+		margin-inline-start: 0.12em;
+		border-radius: 1px;
+		background: var(--ds-color-primary);
+		vertical-align: -0.15em;
+		animation: ds-lib-caret 1.1s steps(1, end) infinite;
+	}
+
+	.agent-prose :global(.ds-lib-chunk > *:first-child) {
+		margin-top: 0;
+	}
+
+	.agent-prose :global(.ds-lib-chunk > *:last-child) {
+		margin-bottom: 0;
+	}
+
 	@keyframes ds-lib-caret {
 		50% {
 			opacity: 0;
@@ -138,7 +209,8 @@
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.agent-prose.is-streaming :global(> *:last-child::after) {
+		.agent-prose.is-streaming :global(> *:last-child::after),
+		.agent-prose.is-chunked.is-streaming :global(> .ds-lib-chunk:last-child > *:last-child::after) {
 			animation: none;
 		}
 	}
@@ -374,6 +446,28 @@
 		outline-offset: 2px;
 	}
 
+	/* What this version changed: a bar in the margin beside the block. */
+	.agent-prose :global([data-changed]) {
+		position: relative;
+	}
+
+	.agent-prose :global([data-changed]::before) {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: -0.75rem;
+		width: 2px;
+		background: var(--ds-color-foreground);
+	}
+
+	.agent-prose :global(tr[data-changed]::before) {
+		content: none;
+	}
+
+	.agent-prose :global(tr[data-changed] > td:first-child) {
+		box-shadow: inset 2px 0 0 var(--ds-color-foreground);
+	}
+
 	.agent-prose :global(hr) {
 		border: 0;
 		border-top: 1px solid var(--ds-color-border);

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

@@ -1,4 +1,5 @@
-import { type Fences } from './markdown';
+import { type ChatCopy } from '../../copy';
+import type { Visual } from '../../visuals';
 interface Props {
     content: string;
     streaming?: boolean;
@@ -6,13 +7,20 @@ interface Props {
     collectionNames?: Set<string>;
     /** `[n]` markers to turn into chips; omit and the markers stay as text. */
     citationNumbers?: Set<number>;
+    /** Web pages by `webKey`, numbered after the library's: a link to one
+     *  renders as its chip. */
+    webNumbers?: Map<string, number>;
     oncite?: (n: number) => void;
     /** A step down, for prose that is reference material beside an answer
      *  rather than the answer itself — the source pane's sections. */
     dense?: boolean;
-    /** A language to draw with the host's own component instead of as code.
-     *  Absent, every fence renders as code. */
-    fences?: Fences;
+    /** Renderers by a fence's language: a block of one is drawn by its
+     *  component in place of the code. Absent, every fence is code. */
+    visuals?: Record<string, Visual>;
+    /** The same document's earlier version, as Markdown: what differs here
+     *  is marked with a bar. */
+    previous?: string;
+    copy?: Partial<ChatCopy>;
 }
 declare const Markdown: import("svelte").Component<Props, {}, "">;
 type Markdown = ReturnType<typeof Markdown>;

package/dist/components/source-fold/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './source-fold.svelte';
+export { default as SourceFold } from './source-fold.svelte';

package/dist/components/source-fold/index.js

@@ -0,0 +1,2 @@
+export { default } from './source-fold.svelte';
+export { default as SourceFold } from './source-fold.svelte';

package/dist/components/source-fold/source-fold.svelte

@@ -0,0 +1,225 @@
+<!--
+  What an answer drew on, folded behind one line: "6 sources · 4 library · 2 web".
+
+  It opens on the library's numbered sources and then the web pages, numbered
+  on from them: the persona cites a page by its link, and the page numbers the
+  link with the same chip a library source gets.
+-->
+<script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import GlobeIcon from '@lucide/svelte/icons/globe';
+	import LibraryIcon from '@lucide/svelte/icons/library';
+	import type { Citation } from '../../citations';
+	import { fill, type ChatCopy } from '../../copy';
+	import type { WebSource } from '../../web-sources';
+	import SourceList from '../source-list/source-list.svelte';
+
+	interface Props {
+		library: Citation[];
+		/** Pages, each with the number the answer's chip for it carries. */
+		web: Array<WebSource & { n: number }>;
+		words: ChatCopy;
+		oncite?: (citation: Citation) => void;
+		/** When the pages were read, in words ("read today"), for a page the turn read. */
+		readWhen?: string;
+	}
+
+	let { library, web, words, oncite, readWhen = '' }: Props = $props();
+	let open = $state(false);
+
+	const total = $derived(library.length + web.length);
+
+	function when(page: WebSource): string {
+		if (page.date) {
+			const date = new Date(page.date);
+			return date.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+		}
+		return page.read ? readWhen : '';
+	}
+</script>
+
+<section class="ds-lib-fold">
+	<button
+		type="button"
+		class="ds-lib-fold-head"
+		onclick={() => (open = !open)}
+		aria-expanded={open}
+	>
+		<span class="ds-lib-fold-icons" aria-hidden="true">
+			{#if library.length > 0}<span><LibraryIcon size={11} /></span>{/if}
+			{#if web.length > 0}<span><GlobeIcon size={11} /></span>{/if}
+		</span>
+		<span class="ds-lib-fold-count">
+			{total === 1 ? words.sourcesCountOne : fill(words.sourcesCount, { n: total })}
+		</span>
+		{#if library.length > 0 && web.length > 0}
+			<span class="ds-lib-fold-split">
+				{fill(words.sourcesLibrary, { n: library.length })} · {fill(words.sourcesWeb, { n: web.length })}
+			</span>
+		{/if}
+		<span class="ds-lib-fold-chevron" aria-hidden="true">
+			{#if open}<ChevronUpIcon size={15} />{:else}<ChevronDownIcon size={15} />{/if}
+		</span>
+	</button>
+
+	{#if open}
+		<div class="ds-lib-fold-body">
+			{#if library.length > 0}
+				<SourceList sources={library} {words} {oncite} heading={words.fromTheLibrary} />
+			{/if}
+			{#if web.length > 0}
+				<section>
+					<h2 class="ds-lib-fold-heading">{words.fromTheWeb}</h2>
+					<ol class="ds-lib-fold-pages">
+						{#each web as page (page.url)}
+							<li>
+								<a class="ds-lib-fold-page" href={page.url} target="_blank" rel="noopener noreferrer">
+									<span class="ds-lib-fold-n">{page.n}</span>
+									<span class="ds-lib-fold-page-text">
+										<span class="ds-lib-fold-page-title">{page.title}</span>
+										<span class="ds-lib-fold-page-meta">
+											{[page.host, when(page)].filter(Boolean).join(' · ')}
+										</span>
+									</span>
+								</a>
+							</li>
+						{/each}
+					</ol>
+				</section>
+			{/if}
+		</div>
+	{/if}
+</section>
+
+<style>
+	.ds-lib-fold-head {
+		display: flex;
+		min-height: 2.5rem;
+		align-items: center;
+		gap: 0.625rem;
+		border: 0;
+		background: none;
+		padding: 0;
+		color: var(--ds-color-muted-foreground);
+		font: inherit;
+		font-size: 0.875rem;
+		cursor: pointer;
+	}
+
+	.ds-lib-fold-head:hover {
+		color: var(--ds-color-foreground);
+	}
+
+	.ds-lib-fold-head:focus-visible {
+		outline: 2px solid var(--ds-color-ring);
+		outline-offset: 2px;
+	}
+
+	.ds-lib-fold-icons {
+		display: flex;
+	}
+
+	.ds-lib-fold-icons span {
+		display: flex;
+		width: 1.375rem;
+		height: 1.375rem;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-full);
+		background: var(--ds-color-surface-2);
+	}
+
+	.ds-lib-fold-icons span + span {
+		margin-inline-start: -0.375rem;
+	}
+
+	.ds-lib-fold-count {
+		color: var(--ds-color-foreground);
+		font-weight: 500;
+	}
+
+	.ds-lib-fold-split {
+		font-size: var(--ds-text-2xs);
+	}
+
+	.ds-lib-fold-chevron {
+		display: flex;
+	}
+
+	.ds-lib-fold-body {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		margin-top: 0.5rem;
+	}
+
+	.ds-lib-fold-heading {
+		margin: 0 0 0.375rem;
+		color: var(--ds-color-muted-foreground);
+		font-family: inherit;
+		font-size: var(--ds-text-2xs);
+		font-weight: 500;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+	}
+
+	.ds-lib-fold-pages {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		margin: 0;
+		border-top: 1px solid var(--ds-color-border);
+		padding: 0.375rem 0 0;
+		list-style: none;
+	}
+
+	.ds-lib-fold-page {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		border-radius: var(--ds-radius-md);
+		padding: 0.375rem 0.625rem;
+		color: inherit;
+		font-size: 0.875rem;
+		text-decoration: none;
+	}
+
+	.ds-lib-fold-page:hover {
+		background: var(--ds-color-surface-2);
+	}
+
+	.ds-lib-fold-page:focus-visible {
+		outline: 2px solid var(--ds-color-ring);
+		outline-offset: 2px;
+	}
+
+	.ds-lib-fold-n {
+		flex: none;
+		border-radius: var(--ds-radius-sm);
+		background: color-mix(in oklab, var(--ds-color-primary) 15%, transparent);
+		padding-inline: 0.375rem;
+		color: var(--ds-color-foreground);
+		font-family: var(--ds-font-code);
+		font-size: var(--ds-text-2xs);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.ds-lib-fold-page-text {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+	}
+
+	.ds-lib-fold-page-title {
+		color: var(--ds-color-foreground);
+		font-weight: 500;
+		overflow-wrap: anywhere;
+	}
+
+	.ds-lib-fold-page-meta {
+		color: var(--ds-color-muted-foreground);
+		font-size: var(--ds-text-2xs);
+	}
+</style>

package/dist/components/source-fold/source-fold.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Citation } from '../../citations';
+import { type ChatCopy } from '../../copy';
+import type { WebSource } from '../../web-sources';
+interface Props {
+    library: Citation[];
+    /** Pages, each with the number the answer's chip for it carries. */
+    web: Array<WebSource & {
+        n: number;
+    }>;
+    words: ChatCopy;
+    oncite?: (citation: Citation) => void;
+    /** When the pages were read, in words ("read today"), for a page the turn read. */
+    readWhen?: string;
+}
+declare const SourceFold: import("svelte").Component<Props, {}, "">;
+type SourceFold = ReturnType<typeof SourceFold>;
+export default SourceFold;