@poodle64/librarian 2026.10.3 → 2026.10.5

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;

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

@@ -17,16 +17,18 @@
 		oncite?: (citation: Citation) => void;
 		/** `h2` in a transcript turn, `h3` under the artefact's own title. */
 		level?: 2 | 3;
+		/** The heading, where it is not "Sources". */
+		heading?: string;
 	}
 
-	let { sources, words, oncite, level = 2 }: Props = $props();
+	let { sources, words, oncite, level = 2, heading = words.sources }: Props = $props();
 </script>
 
 <section class="ds-lib-sources">
 	{#if level === 2}
-		<h2 class="ds-lib-sources-heading">{words.sources}</h2>
+		<h2 class="ds-lib-sources-heading">{heading}</h2>
 	{:else}
-		<h3 class="ds-lib-sources-heading">{words.sources}</h3>
+		<h3 class="ds-lib-sources-heading">{heading}</h3>
 	{/if}
 	<ol class="ds-lib-sources-list">
 		{#each sources as source (source.n)}

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

@@ -7,6 +7,8 @@ interface Props {
     oncite?: (citation: Citation) => void;
     /** `h2` in a transcript turn, `h3` under the artefact's own title. */
     level?: 2 | 3;
+    /** The heading, where it is not "Sources". */
+    heading?: string;
 }
 declare const SourceList: import("svelte").Component<Props, {}, "">;
 type SourceList = ReturnType<typeof SourceList>;

package/dist/components/thinking-row/thinking-row.svelte

@@ -11,15 +11,30 @@
 -->
 <script lang="ts">
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import LightbulbIcon from '@lucide/svelte/icons/lightbulb';
+	import { fill, resolveCopy, type ChatCopy } from '../../copy';
+	import { thoughtSeconds } from '../../steps';
 	import type { TextBlock, ThinkingBlock } from '../../transcript.svelte';
 
 	interface Props {
 		block: ThinkingBlock | TextBlock;
+		/** Still being written: "Thinking…" rather than "Thought". */
 		active: boolean;
+		copy?: Partial<ChatCopy>;
 	}
 
-	let { block, active }: Props = $props();
+	let { block, active, copy }: Props = $props();
 	let open = $state(false);
+
+	const words = $derived(resolveCopy(copy));
+	const seconds = $derived(thoughtSeconds(block));
+	const label = $derived(
+		active
+			? words.thinking
+			: seconds === undefined
+				? words.thought
+				: fill(words.thoughtFor, { n: seconds })
+	);
 </script>
 
 <div class="ds-lib-thinking">
@@ -29,11 +44,10 @@
 		onclick={() => (open = !open)}
 		aria-expanded={open}
 	>
-		<span class="ds-lib-thinking-chevron" class:is-open={open}>
-			<ChevronRightIcon size={12} />
-		</span>
-		<span class="ds-lib-thinking-label" class:is-active={active}>
-			{active ? 'Thinking…' : 'Thought'}
+		<span class="ds-lib-thinking-icon" aria-hidden="true"><LightbulbIcon size={14} /></span>
+		<span class="ds-lib-thinking-label" class:is-active={active}>{label}</span>
+		<span class="ds-lib-thinking-chevron" class:is-open={open} aria-hidden="true">
+			<ChevronRightIcon size={14} />
 		</span>
 	</button>
 	{#if open}
@@ -49,9 +63,10 @@
 
 	.ds-lib-thinking-row {
 		display: flex;
+		width: 100%;
 		align-items: center;
-		gap: 0.5rem;
-		padding-block: 0.125rem;
+		gap: 0.625rem;
+		padding-block: 0.25rem;
 		border: 0;
 		background: none;
 		color: inherit;
@@ -60,18 +75,14 @@
 		cursor: pointer;
 	}
 
-	.ds-lib-thinking-chevron {
+	.ds-lib-thinking-icon {
 		display: flex;
 		flex: none;
 		color: var(--ds-color-muted-foreground);
-		transition: transform 150ms ease;
-	}
-
-	.ds-lib-thinking-chevron.is-open {
-		transform: rotate(90deg);
 	}
 
 	.ds-lib-thinking-label {
+		flex: 1;
 		color: var(--ds-color-muted-foreground);
 	}
 
@@ -80,11 +91,22 @@
 		font-weight: 500;
 	}
 
+	.ds-lib-thinking-chevron {
+		display: flex;
+		flex: none;
+		color: var(--ds-color-muted-foreground);
+		transition: transform 150ms ease;
+	}
+
+	.ds-lib-thinking-chevron.is-open {
+		transform: rotate(90deg);
+	}
+
 	.ds-lib-thinking-text {
 		margin: 0.25rem 0 0;
-		margin-inline-start: 0.3125rem;
+		margin-inline-start: 0.4375rem;
 		border-inline-start: 1px solid var(--ds-color-border);
-		padding-inline-start: 0.75rem;
+		padding-inline-start: 1rem;
 		color: var(--ds-color-muted-foreground);
 		white-space: pre-wrap;
 	}

package/dist/components/thinking-row/thinking-row.svelte.d.ts

@@ -1,7 +1,10 @@
+import { type ChatCopy } from '../../copy';
 import type { TextBlock, ThinkingBlock } from '../../transcript.svelte';
 interface Props {
     block: ThinkingBlock | TextBlock;
+    /** Still being written: "Thinking…" rather than "Thought". */
     active: boolean;
+    copy?: Partial<ChatCopy>;
 }
 declare const ThinkingRow: import("svelte").Component<Props, {}, "">;
 type ThinkingRow = ReturnType<typeof ThinkingRow>;