@poodle64/librarian 2026.10.4 → 2026.10.6

package/dist/components/visual-block/timeline.svelte

@@ -0,0 +1,99 @@
+<!--
+  A run of dated events, as a vertical line with a mark at each.
+-->
+<script lang="ts">
+	import type { TimelineValue } from '../../visuals';
+
+	interface Props {
+		value: unknown;
+		source: string;
+	}
+
+	let { value }: Props = $props();
+	const timeline = $derived(value as TimelineValue);
+</script>
+
+<figure class="ds-lib-timeline">
+	{#if timeline.title}<figcaption class="ds-lib-timeline-title">{timeline.title}</figcaption>{/if}
+	<ol class="ds-lib-timeline-events">
+		{#each timeline.events as event, i (i)}
+			<li class="ds-lib-timeline-event">
+				{#if event.date}<time class="ds-lib-timeline-date">{event.date}</time>{/if}
+				<span class="ds-lib-timeline-name">{event.title}</span>
+				{#if event.detail}<span class="ds-lib-timeline-detail">{event.detail}</span>{/if}
+			</li>
+		{/each}
+	</ol>
+</figure>
+
+<style>
+	.ds-lib-timeline {
+		margin: 0.75em 0;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-lg);
+		background: var(--ds-color-surface-1);
+		padding: 0.75rem 1rem;
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+
+	.ds-lib-timeline-title {
+		margin-bottom: 0.5rem;
+		color: var(--ds-color-foreground);
+		font-weight: 600;
+	}
+
+	.ds-lib-timeline-events {
+		position: relative;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.ds-lib-timeline-events::before {
+		content: '';
+		position: absolute;
+		inset-block: 0.5rem;
+		inset-inline-start: 0.28125rem;
+		width: 1px;
+		background: var(--ds-color-border-strong, var(--ds-color-border));
+	}
+
+	.ds-lib-timeline-event {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		padding: 0 0 0.75rem 1.5rem;
+	}
+
+	.ds-lib-timeline-event:last-child {
+		padding-bottom: 0;
+	}
+
+	.ds-lib-timeline-event::before {
+		content: '';
+		position: absolute;
+		inset-block-start: 0.4rem;
+		inset-inline-start: 0;
+		width: 0.5625rem;
+		height: 0.5625rem;
+		border-radius: var(--ds-radius-full);
+		background: var(--chart-1, var(--ds-color-primary));
+	}
+
+	.ds-lib-timeline-date {
+		color: var(--ds-color-muted-foreground);
+		font-family: var(--ds-font-code);
+		font-size: var(--ds-text-2xs);
+	}
+
+	.ds-lib-timeline-name {
+		color: var(--ds-color-foreground);
+		font-weight: 600;
+	}
+
+	.ds-lib-timeline-detail {
+		color: var(--ds-color-muted-foreground);
+	}
+</style>

package/dist/components/visual-block/timeline.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: unknown;
+    source: string;
+}
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/visual-block/visual-block.svelte

@@ -0,0 +1,53 @@
+<!--
+  One fenced block of a language the host has a renderer for.
+
+  While its closing fence has not arrived the block is a placeholder: half a
+  JSON document is not a chart. A closed block is parsed by its renderer, and
+  one that will not parse is shown as the code it was, never a blank.
+-->
+<script lang="ts">
+	import type { ChatCopy } from '../../copy';
+	import type { Visual } from '../../visuals';
+
+	interface Props {
+		lang: string;
+		visual: Visual;
+		source: string;
+		closed: boolean;
+		streaming: boolean;
+		words: ChatCopy;
+	}
+
+	let { lang, visual, source, closed, streaming, words }: Props = $props();
+
+	const drawn = $derived.by(() => {
+		if (!closed) return null;
+		try {
+			return { value: visual.parse(source) };
+		} catch {
+			return null;
+		}
+	});
+	const Drawing = $derived(visual.component);
+</script>
+
+{#if !closed && streaming}
+	<p class="ds-lib-drawing" role="status">{words.drawing}</p>
+{:else if drawn}
+	<Drawing value={drawn.value} {source} />
+{:else}
+	<!-- Marked, so the highlighter that follows the prose leaves what this owns. -->
+	<pre data-highlighted="true"><code class="language-{lang}">{source}</code></pre>
+{/if}
+
+<style>
+	.ds-lib-drawing {
+		margin: 0.75em 0;
+		border: 1px dashed var(--ds-color-border);
+		border-radius: var(--ds-radius-lg);
+		padding: 1.25rem 1rem;
+		color: var(--ds-color-muted-foreground);
+		font-size: 0.875rem;
+		text-align: center;
+	}
+</style>

package/dist/components/visual-block/visual-block.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ChatCopy } from '../../copy';
+import type { Visual } from '../../visuals';
+interface Props {
+    lang: string;
+    visual: Visual;
+    source: string;
+    closed: boolean;
+    streaming: boolean;
+    words: ChatCopy;
+}
+declare const VisualBlock: import("svelte").Component<Props, {}, "">;
+type VisualBlock = ReturnType<typeof VisualBlock>;
+export default VisualBlock;

package/dist/components/written-card/written-card.svelte

@@ -1,12 +1,14 @@
 <!--
-  A document the persona wrote, as a card in the turn: its name and version,
-  Open (the reading column shows that version) and a download link for the
-  source and for each format the app renders it as.
+  A document the persona wrote, as a card in the turn: a page icon, its title,
+  "Minute · 1 page · v1" and Open (the reading column shows that version),
+  with a chip under it that downloads it: Word where the app renders one, else
+  the source as written.
 -->
 <script lang="ts">
+	import DownloadIcon from '@lucide/svelte/icons/download';
 	import FileTextIcon from '@lucide/svelte/icons/file-text';
 	import { fill, resolveCopy, type ChatCopy } from '../../copy';
-	import { downloads, type Written, type WrittenUrl } from '../../written';
+	import { chipFor, writtenMeta, type Written, type WrittenUrl } from '../../written';
 
 	interface Props {
 		written: Written;
@@ -14,7 +16,7 @@
 		open?: boolean;
 		/** Omit and the card lists and links but does not open. */
 		onopen?: () => void;
-		/** Omit and no download links render. */
+		/** Omit and no download chip renders. */
 		url?: WrittenUrl;
 		copy?: Partial<ChatCopy>;
 	}
@@ -22,54 +24,75 @@
 	let { written, open = false, onopen, url, copy }: Props = $props();
 
 	const words = $derived(resolveCopy(copy));
+	const chip = $derived(chipFor(written, words));
 </script>
 
-<div class="ds-lib-written" class:is-open={open}>
-	<span class="ds-lib-written-icon" aria-hidden="true"><FileTextIcon size={16} /></span>
-	<span class="ds-lib-written-text">
-		<span class="ds-lib-written-name">{written.name}</span>
-		<span class="ds-lib-written-version">{fill(words.writtenVersion, { n: written.version })}</span>
-	</span>
-	{#if onopen}
-		<button type="button" class="ds-lib-written-open" onclick={onopen}>
-			{open ? words.showingArtefact : words.openArtefact}
-		</button>
-	{/if}
+<div class="ds-lib-written">
+	<div class="ds-lib-written-card" class:is-open={open}>
+		<span class="ds-lib-written-icon" aria-hidden="true"><FileTextIcon size={20} /></span>
+		<span class="ds-lib-written-text">
+			<span class="ds-lib-written-name">{written.title}</span>
+			<span class="ds-lib-written-meta">{writtenMeta(written, words)}</span>
+		</span>
+		{#if onopen}
+			<button type="button" class="ds-lib-written-open" onclick={onopen}>
+				{open ? words.showingArtefact : words.openArtefact}
+			</button>
+		{/if}
+	</div>
 	{#if url}
-		<ul class="ds-lib-written-links" aria-label={words.download}>
-			{#each downloads(written, words) as link (link.format)}
-				<li><a href={url(written.name, written.version, link.format)}>{link.label}</a></li>
-			{/each}
-		</ul>
+		<a
+			class="ds-lib-written-chip"
+			href={url(written.name, written.version, chip.format)}
+			download={chip.file}
+		>
+			<FileTextIcon size={14} aria-hidden="true" />
+			<span class="ds-lib-written-file">{chip.file}</span>
+			<span class="ds-lib-written-format">
+				{chip.label} · {fill(words.writtenVersion, { n: written.version })}
+			</span>
+			<span class="ds-lib-written-download">
+				<DownloadIcon size={14} aria-hidden="true" />{words.download}
+			</span>
+		</a>
 	{/if}
 </div>
 
 <style>
 	.ds-lib-written {
 		display: flex;
-		flex-wrap: wrap;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+
+	.ds-lib-written-card {
+		display: flex;
+		width: 100%;
+		max-width: 36rem;
 		align-items: center;
-		gap: 0.5rem 0.75rem;
+		gap: 0.75rem;
 		border: 1px solid var(--ds-color-border);
 		border-radius: var(--ds-radius-lg);
 		background: var(--ds-color-surface-1);
 		padding: 0.625rem 0.75rem;
 	}
 
-	.ds-lib-written.is-open {
+	.ds-lib-written-card.is-open {
 		border-color: var(--ds-color-primary);
 	}
 
+	/* A sheet of paper: light in either theme, as the document is. */
 	.ds-lib-written-icon {
 		display: flex;
-		width: 2rem;
-		height: 2rem;
+		width: 2.5rem;
+		height: 2.75rem;
 		flex: none;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid var(--ds-color-border);
-		border-radius: var(--ds-radius-md);
-		color: var(--ds-color-muted-foreground);
+		border-radius: var(--ds-radius-sm);
+		background: var(--ds-paper, #f1f1ef);
+		color: var(--ds-paper-ink, #1c1c1c);
 	}
 
 	.ds-lib-written-text {
@@ -80,51 +103,76 @@
 	}
 
 	.ds-lib-written-name {
-		font-size: 0.875rem;
-		font-weight: 500;
+		font-size: 0.9375rem;
+		font-weight: 600;
 		line-height: 1.25rem;
 		overflow-wrap: anywhere;
 	}
 
-	.ds-lib-written-version {
+	.ds-lib-written-meta {
 		color: var(--ds-color-muted-foreground);
 		font-size: var(--ds-text-2xs);
 	}
 
 	.ds-lib-written-open {
-		border: 1px solid var(--ds-color-border);
+		flex: none;
+		border: 0;
 		border-radius: var(--ds-radius-md);
 		background: none;
-		padding: 0.25rem 0.625rem;
-		color: inherit;
+		padding: 0.5rem 0.625rem;
+		color: var(--ds-color-muted-foreground);
 		font: inherit;
 		font-size: 0.8125rem;
 		cursor: pointer;
 	}
 
+	.ds-lib-written-open:hover {
+		color: var(--ds-color-foreground);
+	}
+
 	.ds-lib-written-open:focus-visible,
-	.ds-lib-written-links a:focus-visible {
+	.ds-lib-written-chip:focus-visible {
 		outline: 2px solid var(--ds-color-ring);
 		outline-offset: 2px;
 	}
 
-	.ds-lib-written-links {
-		display: flex;
-		flex-basis: 100%;
-		flex-wrap: wrap;
-		gap: 0.75rem;
-		margin: 0;
-		padding: 0;
-		font-size: var(--ds-text-2xs);
-		list-style: none;
+	.ds-lib-written-chip {
+		display: inline-flex;
+		max-width: 100%;
+		min-height: 2.25rem;
+		align-items: center;
+		gap: 0.5rem;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-full);
+		padding: 0.25rem 0.75rem;
+		color: var(--ds-color-foreground);
+		font-size: 0.8125rem;
+		text-decoration: none;
+	}
+
+	.ds-lib-written-chip:hover {
+		background: var(--ds-color-surface-2);
 	}
 
-	.ds-lib-written-links a {
+	.ds-lib-written-file {
+		min-width: 0;
+		font-weight: 600;
+		overflow-wrap: anywhere;
+	}
+
+	.ds-lib-written-format {
 		color: var(--ds-color-muted-foreground);
-		text-decoration: underline;
+		font-size: var(--ds-text-2xs);
+		white-space: nowrap;
 	}
 
-	.ds-lib-written-links a:hover {
-		color: var(--ds-color-foreground);
+	.ds-lib-written-download {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		border-inline-start: 1px solid var(--ds-color-border);
+		padding-inline-start: 0.5rem;
+		font-size: var(--ds-text-2xs);
+		white-space: nowrap;
 	}
 </style>

package/dist/components/written-card/written-card.svelte.d.ts

@@ -6,7 +6,7 @@ interface Props {
     open?: boolean;
     /** Omit and the card lists and links but does not open. */
     onopen?: () => void;
-    /** Omit and no download links render. */
+    /** Omit and no download chip renders. */
     url?: WrittenUrl;
     copy?: Partial<ChatCopy>;
 }

package/dist/copy.d.ts

@@ -78,6 +78,60 @@ export interface ChatCopy {
     editQuestion: string;
     editSend: string;
     editFilesNote: string;
+    /** The fold over a turn's steps: its sentence is composed from the steps,
+     *  each phrase lower-case and joined by `stepsAnd` ("Read your attachment,
+     *  searched the library and the web, and wrote a minute"). `{kind}` is the
+     *  document's own kind, or `documentKind`. */
+    stepsRead: string;
+    stepsSearchedLibrary: string;
+    stepsSearchedWeb: string;
+    stepsSearchedBoth: string;
+    stepsOpened: string;
+    stepsWrote: string;
+    stepsEdited: string;
+    stepsThought: string;
+    stepsOther: string;
+    stepsAnd: string;
+    /** What is happening now, while the turn runs. */
+    nowRead: string;
+    nowLibrary: string;
+    nowWeb: string;
+    nowOpen: string;
+    nowWrite: string;
+    nowEdit: string;
+    nowThought: string;
+    nowOther: string;
+    stepCount: string;
+    stepCountOne: string;
+    /** The right-hand count of a step's row. */
+    stepFound: string;
+    stepPagesRead: string;
+    stepPageRead: string;
+    /** A thinking row: while it streams, once done, and with its duration. */
+    thinking: string;
+    thought: string;
+    thoughtFor: string;
+    /** The kind of a document that names none. */
+    documentKind: string;
+    pagesCount: string;
+    pageCount: string;
+    /** The pane: when a version was written, what changed, and copying it. */
+    paneWritten: string;
+    paneEdited: string;
+    justNow: string;
+    changedSince: string;
+    copyDocument: string;
+    copiedDocument: string;
+    /** The sources fold: its summary and its two groups. */
+    sourcesCount: string;
+    sourcesCountOne: string;
+    sourcesLibrary: string;
+    sourcesWeb: string;
+    fromTheLibrary: string;
+    readToday: string;
+    readOn: string;
+    /** A fenced block still being written. */
+    drawing: string;
     /** Web pages an answer drew on, listed apart from its numbered sources. */
     fromTheWeb: string;
     /** A document the persona wrote: its version (`{n}`), the version switcher's

package/dist/copy.js

@@ -86,8 +86,51 @@ export function copyFor(name = DEFAULT_PERSONA) {
         editQuestion: 'Edit',
         editSend: 'Send',
         editFilesNote: 'Files attached to the original question are not sent again.',
+        stepsRead: 'read your attachment',
+        stepsSearchedLibrary: 'searched the library',
+        stepsSearchedWeb: 'searched the web',
+        stepsSearchedBoth: 'searched the library and the web',
+        stepsOpened: 'opened a document',
+        stepsWrote: 'wrote a {kind}',
+        stepsEdited: 'edited the {kind}',
+        stepsThought: 'thought',
+        stepsOther: 'looked into it',
+        stepsAnd: 'and',
+        nowRead: 'Reading your attachment…',
+        nowLibrary: 'Searching the library…',
+        nowWeb: 'Searching the web…',
+        nowOpen: 'Opening a document…',
+        nowWrite: 'Writing a {kind}…',
+        nowEdit: 'Editing the {kind}…',
+        nowThought: 'Thinking…',
+        nowOther: 'Working on it…',
+        stepCount: '{n} steps',
+        stepCountOne: '1 step',
+        stepFound: '{n} found',
+        stepPagesRead: '{n} pages read',
+        stepPageRead: '1 page read',
+        thinking: 'Thinking…',
+        thought: 'Thought',
+        thoughtFor: 'Thought for {n}s',
+        documentKind: 'document',
+        pagesCount: '{n} pages',
+        pageCount: '1 page',
+        paneWritten: 'written {when}',
+        paneEdited: 'edited {when}',
+        justNow: 'just now',
+        changedSince: 'Changed since v{n}: {changes}',
+        copyDocument: 'Copy',
+        copiedDocument: 'Copied',
+        sourcesCount: '{n} sources',
+        sourcesCountOne: '1 source',
+        sourcesLibrary: '{n} library',
+        sourcesWeb: '{n} web',
+        fromTheLibrary: 'From the library',
+        readToday: 'read today',
+        readOn: 'read {date}',
+        drawing: 'Drawing…',
         fromTheWeb: 'From the web',
-        writtenVersion: 'Version {n}',
+        writtenVersion: 'v{n}',
         writtenVersions: 'Version',
         formatMarkdown: 'Markdown',
         formatHtml: 'HTML',

package/dist/diff.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What a version changed, read off the rendered document: each block of the
+ * new one that the old one has no block of the same text for is marked
+ * `data-changed`, for a bar beside it. A block is a top-level paragraph,
+ * heading, quote or code block, a list item, or a table row.
+ */
+/** Mark each block of `now` that `before` has no block of the same text for, on the DOM `render` sanitised. */
+export declare function markChanges(now: Element, before: Element): void;

package/dist/diff.js

@@ -0,0 +1,37 @@
+/**
+ * What a version changed, read off the rendered document: each block of the
+ * new one that the old one has no block of the same text for is marked
+ * `data-changed`, for a bar beside it. A block is a top-level paragraph,
+ * heading, quote or code block, a list item, or a table row.
+ */
+function blocksOf(body) {
+    const blocks = [];
+    for (const el of body.children) {
+        if (el.tagName === 'UL' || el.tagName === 'OL')
+            blocks.push(...el.querySelectorAll(':scope > li'));
+        else if (el.tagName === 'TABLE')
+            blocks.push(...el.querySelectorAll('tr'));
+        else
+            blocks.push(el);
+    }
+    return blocks;
+}
+const textOf = (el) => (el.textContent ?? '').replace(/\s+/g, ' ').trim();
+/** Mark each block of `now` that `before` has no block of the same text for, on the DOM `render` sanitised. */
+export function markChanges(now, before) {
+    const held = new Map();
+    for (const block of blocksOf(before)) {
+        const text = textOf(block);
+        held.set(text, (held.get(text) ?? 0) + 1);
+    }
+    for (const block of blocksOf(now)) {
+        const text = textOf(block);
+        if (!text)
+            continue;
+        const left = held.get(text) ?? 0;
+        if (left > 0)
+            held.set(text, left - 1);
+        else
+            block.setAttribute('data-changed', '');
+    }
+}

package/dist/steps.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A turn's steps, said in one sentence.
+ *
+ * The turn folds its steps behind one line composed from them ("Read your
+ * attachment, searched the library and the web, and wrote a minute"), the way
+ * Claude.ai folds its own. Composed here from what each step IS (its tool and,
+ * for a document, the document's own kind), never from the persona's words.
+ */
+import { type ChatCopy } from './copy';
+import type { ActivityStep, Block } from './transcript.svelte';
+import type { Written } from './written';
+export type StepKind = 'attachment' | 'library' | 'web' | 'open' | 'write' | 'edit' | 'thought' | 'other';
+/** What sort of step a block is. */
+export declare function stepKind(block: Block): StepKind;
+/**
+ * The fold's line: the sentence, and what trails it ("6 steps", or the
+ * version a lone edit made).
+ */
+export declare function stepsSummary(steps: ActivityStep[], written: Written[], words: ChatCopy): {
+    sentence: string;
+    trail: string;
+};
+/** What is happening now: the step still running, or the latest one. */
+export declare function stepsNow(steps: ActivityStep[], written: Written[], words: ChatCopy): string;
+/** The count at a step's right hand, where its result shows one. */
+export declare function stepMeta(block: Block, words: ChatCopy): string;
+/** How long a thinking block ran, in whole seconds, where it was timed. */
+export declare function thoughtSeconds(block: Block): number | undefined;