@poodle64/librarian 2026.10.1 → 2026.10.3

package/dist/components/conversation/conversation.svelte

@@ -2,6 +2,12 @@
   The whole reading surface: every turn, the scroll that follows the stream,
   and the source pane beside it.
 
+  Before the first question it reads as ChatGPT's and Claude's empty chat: the
+  opening and the composer together in the middle of the panel, with nothing
+  else competing. The first question docks the composer at the foot and the
+  transcript scrolls above it. The composer is one element in both places, so
+  a draft or an attachment survives the move.
+
   This owns the SCROLL CONTAINER, which is the reason it exists rather than the
   host composing `AgentTranscript` in a div of its own. Follow-scroll, the
   jump-to-latest pill and a document pane that narrows the transcript instead
@@ -60,6 +66,10 @@
 		/** When the last answer began, epoch ms, where this page did not see it
 		 *  start (`Chat.answering`): it reads as still being written. */
 		answering?: number | null;
+		/** A conversation is being read back and has no turns yet: the surface
+		 *  waits docked and says nothing, rather than centring a new
+		 *  conversation's opening for a moment and snapping away from it. */
+		reopening?: boolean;
 		/** Overrides for the package's own words. */
 		copy?: Partial<ChatCopy>;
 		/** Enables the source pane. Without it, chips render but do not open. */
@@ -91,10 +101,16 @@
 		 *  prose, its citation marks, its links) renders its own, and one that
 		 *  only adds to it renders `AgentTranscript` inside it. */
 		turn?: Snippet<[AgentTranscriptProps]>;
-		/** Before the first turn, inside the scroll and under the opening and
-		 *  the scope: what the host shows ahead of a question, which scrolls
-		 *  with the conversation rather than taking its height. */
+		/** What leads the conversation: inside the scroll, under the opening and
+		 *  the scope, so a tall one scrolls rather than taking the panel's
+		 *  height; before the first question, under the centred composer, its
+		 *  examples and the scope. */
 		lead?: Snippet;
+		/** The host's controls for the conversation as a whole (its past
+		 *  questions, a new one), at the measure's trailing edge above the
+		 *  transcript. It stays put while the transcript scrolls and narrows
+		 *  with it when a pane opens. */
+		toolbar?: Snippet;
 	}
 
 	let {
@@ -110,6 +126,7 @@
 		onmark,
 		onshare,
 		answering = null,
+		reopening = false,
 		copy,
 		loadDocument,
 		oncite,
@@ -120,6 +137,7 @@
 		composer,
 		turn: presentTurn,
 		lead,
+		toolbar,
 		formatCost
 	}: Props = $props();
 
@@ -129,6 +147,10 @@
 	const words = $derived(resolveCopy(copy, name));
 	const who = $derived(personaName(name));
 	const opening = $derived(welcome ?? words.welcome);
+	// A turn on its way (a reopened conversation, a job's first) is not a new
+	// conversation, so neither waits centred.
+	const empty = $derived(turns.length === 0 && !reopening);
+	const centred = $derived(empty && !running && Boolean(composer));
 
 	/**
 	 * When each turn arrived, for the turns this surface actually watched
@@ -247,105 +269,115 @@
 </script>
 
 <div class="ds-lib-surface">
-	<div class="ds-lib-main">
-		<!-- The pill is positioned against the SCROLL region, not the column: the
-		     composer is in the column too, and a pill over the input is a pill in
-		     the way. -->
-		<div class="ds-lib-scroll-region">
-			<div
-				bind:this={viewport}
-				onscroll={scrolled}
-				role="log"
-				aria-live="polite"
-				aria-busy={running}
-				aria-label={words.conversationLabel}
-				class="ds-lib-scroll"
-			>
-				<!-- The measure, in this package's own stylesheet.
-				     `--ds-lib-measure` is the one knob a host may turn, and it is a
-				     token rather than a class precisely because a class here is a
-				     string a consuming app's Tailwind has to find in `dist` — the
-				     arrangement that silently produced `max-width: none` and a
-				     2302px line in Pebblestone's production build. -->
-				<div class="ds-lib-column">
-					{#if turns.length === 0}
-						<div class="ds-lib-empty">
-							<p class="ds-lib-welcome">{opening}</p>
-							{#if examples.length > 0}
-								<ul class="ds-lib-chips">
-									{#each examples.slice(0, 3) as example (example)}
-										<li>
-											<button type="button" class="ds-lib-chip" onclick={() => onexample?.(example)}>
-												{example}
-											</button>
-										</li>
-									{/each}
-								</ul>
+	<div class="ds-lib-main" class:is-centred={centred}>
+		{#if toolbar}
+			<div class="ds-lib-toolbar">
+				<div class="ds-lib-column ds-lib-column-flush ds-lib-toolbar-row">{@render toolbar()}</div>
+			</div>
+		{/if}
+
+		<div class="ds-lib-stage">
+			<!-- The pill is positioned against the SCROLL region, not the column: the
+			     composer is in the column too, and a pill over the input is a pill in
+			     the way. -->
+			<div class="ds-lib-scroll-region">
+				<div
+					bind:this={viewport}
+					onscroll={scrolled}
+					role="log"
+					aria-live="polite"
+					aria-busy={running}
+					aria-label={words.conversationLabel}
+					class="ds-lib-scroll"
+				>
+					<!-- The measure, in this package's own stylesheet.
+					     `--ds-lib-measure` is the one knob a host may turn, and it is a
+					     token rather than a class precisely because a class here is a
+					     string a consuming app's Tailwind has to find in `dist` — the
+					     arrangement that silently produced `max-width: none` and a
+					     2302px line in Pebblestone's production build. -->
+					<div class="ds-lib-column">
+						{#if empty}
+							<div class="ds-lib-empty">
+								<p class="ds-lib-welcome">{opening}</p>
+								{#if !centred}{@render suggestions()}{/if}
+							</div>
+						{/if}
+
+						<!-- Above the first turn, and in ONE place in the markup: the empty
+						     state carries the welcome, this carries the boundary, and both
+						     sit at the top of the same column so a reader meets them in
+						     the same order whether or not they have asked anything yet.
+						     Centred, both sit under the composer instead. -->
+						{#if !centred}
+							{#if scope}
+								<ScopeStatement statement={scope} expanded={false} copy={words} />
 							{/if}
-						</div>
-					{/if}
-
-					<!-- Above the first turn, and in ONE place in the markup: the empty
-					     state carries the welcome, this carries the boundary, and both
-					     sit at the top of the same column so a reader meets them in
-					     the same order whether or not they have asked anything yet. -->
-					{#if scope}
-						<ScopeStatement statement={scope} expanded={turns.length === 0} copy={words} />
-					{/if}
-
-					{@render lead?.()}
-
-					{#each turns as turn, index (turn.id)}
-						{@const last = index === turns.length - 1}
-						{@const props = {
-							question: turn.question,
-							blocks: turn.blocks,
-							outcome: turn.outcome,
-							running: running && last,
-							answering: last ? (answering ?? undefined) : undefined,
-							citations: turn.citations ?? [],
-							collectionNames,
-							copy: words,
-							name: who,
-							at: turn.at ?? stamps[turn.id],
-							artefact: turn.artefact,
-							artefactOpen: isShowing(turn),
-							onopenartefact: opener(turn),
-							describeTool,
-							formatCost,
-							oncite: oncite || loadDocument ? cite : undefined,
-							onregenerate: last && !running ? onregenerate : undefined,
-							onmark:
-								last && !running && onmark ? (verdict: Verdict) => onmark(turn, verdict) : undefined,
-							shared: turn.shared,
-							onshare:
-								onshare && !(last && running) ? (share: boolean) => onshare(turn, share) : undefined
-						} satisfies AgentTranscriptProps}
-						{#if presentTurn}
-							{@render presentTurn(props)}
-						{:else}
-							<AgentTranscript {...props} />
+							{@render lead?.()}
 						{/if}
-					{/each}
+
+						{#each turns as turn, index (turn.id)}
+							{@const last = index === turns.length - 1}
+							{@const props = {
+								question: turn.question,
+								blocks: turn.blocks,
+								outcome: turn.outcome,
+								running: running && last,
+								answering: last ? (answering ?? undefined) : undefined,
+								citations: turn.citations ?? [],
+								collectionNames,
+								copy: words,
+								name: who,
+								at: turn.at ?? stamps[turn.id],
+								artefact: turn.artefact,
+								artefactOpen: isShowing(turn),
+								onopenartefact: opener(turn),
+								describeTool,
+								formatCost,
+								oncite: oncite || loadDocument ? cite : undefined,
+								onregenerate: last && !running ? onregenerate : undefined,
+								onmark:
+									last && !running && onmark ? (verdict: Verdict) => onmark(turn, verdict) : undefined,
+								shared: turn.shared,
+								onshare:
+									onshare && !(last && running) ? (share: boolean) => onshare(turn, share) : undefined
+							} satisfies AgentTranscriptProps}
+							{#if presentTurn}
+								{@render presentTurn(props)}
+							{:else}
+								<AgentTranscript {...props} />
+							{/if}
+						{/each}
+					</div>
 				</div>
+
+				{#if !follow.following && turns.length > 0}
+					<button type="button" class="ds-lib-jump" onclick={jump}>
+						<ArrowDownIcon size={14} />
+						{words.jumpToLatest}
+					</button>
+				{/if}
 			</div>
 
-			{#if !follow.following && turns.length > 0}
-				<button type="button" class="ds-lib-jump" onclick={jump}>
-					<ArrowDownIcon size={14} />
-					{words.jumpToLatest}
-				</button>
+			{#if composer}
+				<div class="ds-lib-composer">
+					<div class="ds-lib-column ds-lib-column-flush">
+						{@render composer()}
+						{#if centred}
+							<div class="ds-lib-after">
+								{@render suggestions()}
+								{#if scope}
+									<div class="ds-lib-after-scope">
+										<ScopeStatement statement={scope} expanded={false} copy={words} />
+									</div>
+								{/if}
+								{@render lead?.()}
+							</div>
+						{/if}
+					</div>
+				</div>
 			{/if}
 		</div>
-
-		{#if composer}
-			<!-- Lifted off the scroll area, and on the app's own background rather
-			     than the transcript's: prose scrolling up to the exact edge of the
-			     input is the one place a reader loses track of which is which. -->
-			<div class="ds-lib-composer">
-				<div class="ds-lib-column ds-lib-column-flush">{@render composer()}</div>
-			</div>
-		{/if}
 	</div>
 
 	{#if column?.kind === 'document' && loadDocument}
@@ -365,6 +397,20 @@
 	{/if}
 </div>
 
+{#snippet suggestions()}
+	{#if examples.length > 0}
+		<ul class="ds-lib-chips">
+			{#each examples.slice(0, 3) as example (example)}
+				<li>
+					<button type="button" class="ds-lib-chip" onclick={() => onexample?.(example)}>
+						{example}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{/snippet}
+
 <style>
 	/* `min-width: 0` for a host that sets this in a row beside columns of its
 	   own: a flex item's automatic minimum is its widest content, and a table
@@ -384,6 +430,7 @@
 		flex-direction: column;
 	}
 
+	.ds-lib-stage,
 	.ds-lib-scroll-region {
 		position: relative;
 		display: flex;
@@ -392,19 +439,31 @@
 		flex-direction: column;
 	}
 
+	/* The transcript fades at its edges, under the toolbar and into the
+	   composer, rather than stopping at a rule across the panel: the box is
+	   edge enough, and a fade lies over any ground the app paints, a texture
+	   included. Each fade is the column's own padding at either end. */
 	.ds-lib-scroll {
 		min-height: 0;
 		flex: 1;
 		overflow-y: auto;
 		overscroll-behavior: contain;
+		mask-image: linear-gradient(
+			to bottom,
+			transparent,
+			#000 1.25rem,
+			#000 calc(100% - 1.5rem),
+			transparent
+		);
 	}
 
+	/* Turns are told apart by space and type, never boxes. */
 	.ds-lib-column {
 		display: flex;
 		width: 100%;
 		max-width: var(--ds-lib-measure, 46rem);
 		flex-direction: column;
-		gap: 1.5rem;
+		gap: 2.5rem;
 		margin-inline: auto;
 		padding: 1.5rem 1rem;
 	}
@@ -414,6 +473,77 @@
 		padding: 0;
 	}
 
+	.ds-lib-toolbar {
+		flex: none;
+		padding: 0.5rem 1rem 0;
+	}
+
+	.ds-lib-toolbar-row {
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: 0.25rem;
+	}
+
+	/* Centred: the stage scrolls as one, and the opening and the composer meet
+	   in its middle. Auto margins centre them while they fit and let them
+	   scroll from the top once a tall lead does not, where
+	   `justify-content: center` would cut the top off. */
+	.is-centred .ds-lib-stage {
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+
+	.is-centred .ds-lib-scroll-region {
+		flex: none;
+		margin-top: auto;
+	}
+
+	.is-centred .ds-lib-scroll {
+		flex: none;
+		overflow: visible;
+		mask-image: none;
+	}
+
+	.is-centred .ds-lib-scroll .ds-lib-column {
+		padding-bottom: 1.25rem;
+	}
+
+	.is-centred .ds-lib-composer {
+		margin-bottom: auto;
+		padding-top: 0;
+	}
+
+	.is-centred .ds-lib-empty {
+		align-items: center;
+		padding-block: 0;
+		text-align: center;
+	}
+
+	.is-centred .ds-lib-welcome {
+		font-family: var(--ds-font-display, inherit);
+		font-size: 1.5rem;
+		line-height: 1.3;
+		text-wrap: balance;
+	}
+
+	.ds-lib-after {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		padding-top: 1rem;
+	}
+
+	.ds-lib-after-scope {
+		display: flex;
+		justify-content: center;
+	}
+
+	.ds-lib-after .ds-lib-chips {
+		flex-flow: row wrap;
+		justify-content: center;
+	}
+
 	.ds-lib-empty {
 		display: flex;
 		flex-direction: column;
@@ -501,8 +631,6 @@
 
 	.ds-lib-composer {
 		flex: none;
-		border-top: 1px solid var(--ds-color-border);
-		background: var(--ds-color-background);
-		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
+		padding: 0.25rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
 	}
 </style>

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

@@ -36,6 +36,10 @@ interface Props {
     /** When the last answer began, epoch ms, where this page did not see it
      *  start (`Chat.answering`): it reads as still being written. */
     answering?: number | null;
+    /** A conversation is being read back and has no turns yet: the surface
+     *  waits docked and says nothing, rather than centring a new
+     *  conversation's opening for a moment and snapping away from it. */
+    reopening?: boolean;
     /** Overrides for the package's own words. */
     copy?: Partial<ChatCopy>;
     /** Enables the source pane. Without it, chips render but do not open. */
@@ -67,10 +71,16 @@ interface Props {
      *  prose, its citation marks, its links) renders its own, and one that
      *  only adds to it renders `AgentTranscript` inside it. */
     turn?: Snippet<[AgentTranscriptProps]>;
-    /** Before the first turn, inside the scroll and under the opening and
-     *  the scope: what the host shows ahead of a question, which scrolls
-     *  with the conversation rather than taking its height. */
+    /** What leads the conversation: inside the scroll, under the opening and
+     *  the scope, so a tall one scrolls rather than taking the panel's
+     *  height; before the first question, under the centred composer, its
+     *  examples and the scope. */
     lead?: Snippet;
+    /** The host's controls for the conversation as a whole (its past
+     *  questions, a new one), at the measure's trailing edge above the
+     *  transcript. It stays put while the transcript scrolls and narrows
+     *  with it when a pane opens. */
+    toolbar?: Snippet;
 }
 declare const Conversation: import("svelte").Component<Props, {}, "">;
 type Conversation = ReturnType<typeof Conversation>;

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

@@ -4,7 +4,8 @@
 
   From cadmus's Past questions (cadmus#114). Presentation only: the host hands
   it the list and the acts (`Chat`'s own), nothing here fetches, and where it
-  sits — a column, a sheet — is the host's.
+  sits — a column, a sheet — is the host's. A host that lays it over the page
+  passes `onclose`, and the header carries the way out beside New question.
 
   Each row's acts open under it rather than in a floating menu, and a delete
   asks under the row too: nothing to position, nothing to trap focus in, and
@@ -17,6 +18,7 @@
 	import PencilIcon from '@lucide/svelte/icons/pencil';
 	import PlusIcon from '@lucide/svelte/icons/plus';
 	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import XIcon from '@lucide/svelte/icons/x';
 	import type { ConversationSummary } from '../../chat.svelte';
 	import { DEFAULT_PERSONA, resolveCopy, type ChatCopy } from '../../copy';
 
@@ -33,6 +35,8 @@
 		/** A row chosen; with `href`, as well as following it. */
 		onopen?: (id: string) => void;
 		onnew: () => void;
+		/** Closes the list, for a host that lays it over the page. */
+		onclose?: () => void;
 		/** Each act offered only when given; each resolves true once done. */
 		onrename?: (id: string, title: string) => Promise<boolean>;
 		ondownload?: (id: string) => Promise<boolean>;
@@ -49,6 +53,7 @@
 		href,
 		onopen,
 		onnew,
+		onclose,
 		onrename,
 		ondownload,
 		ondelete,
@@ -122,6 +127,16 @@
 			<PlusIcon size={14} />
 			<span>{words.newQuestion}</span>
 		</button>
+		{#if onclose}
+			<button
+				type="button"
+				class="ds-lib-list-close"
+				onclick={onclose}
+				aria-label={words.closePastQuestions}
+			>
+				<XIcon size={16} />
+			</button>
+		{/if}
 	</header>
 
 	{#if failed}
@@ -405,7 +420,8 @@
 		animation: ds-lib-list-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 	}
 
-	.ds-lib-list-more {
+	.ds-lib-list-more,
+	.ds-lib-list-close {
 		display: grid;
 		width: 2.75rem;
 		height: 2.75rem;
@@ -419,7 +435,8 @@
 	}
 
 	.ds-lib-list-more:hover,
-	.ds-lib-list-more[aria-expanded='true'] {
+	.ds-lib-list-more[aria-expanded='true'],
+	.ds-lib-list-close:hover {
 		color: var(--ds-color-foreground);
 	}
 
@@ -468,7 +485,8 @@
 	.ds-lib-list-new:focus-visible,
 	.ds-lib-list-act:focus-visible,
 	.ds-lib-list-open:focus-visible,
-	.ds-lib-list-more:focus-visible {
+	.ds-lib-list-more:focus-visible,
+	.ds-lib-list-close:focus-visible {
 		outline: 2px solid var(--ds-color-ring);
 		outline-offset: -2px;
 	}

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

@@ -13,6 +13,8 @@ interface Props {
     /** A row chosen; with `href`, as well as following it. */
     onopen?: (id: string) => void;
     onnew: () => void;
+    /** Closes the list, for a host that lays it over the page. */
+    onclose?: () => void;
     /** Each act offered only when given; each resolves true once done. */
     onrename?: (id: string, title: string) => Promise<boolean>;
     ondownload?: (id: string) => Promise<boolean>;

package/dist/components/fair-use-notice/fair-use-notice.svelte

@@ -79,7 +79,7 @@
 	}
 
 	.ds-lib-fair-use a {
-		color: var(--ds-color-primary);
+		color: var(--ds-color-primary-ink, var(--ds-color-primary));
 		text-decoration: underline;
 		text-underline-offset: 2px;
 	}

package/dist/components/markdown/markdown.svelte

@@ -214,8 +214,9 @@
 		color: var(--ds-color-foreground);
 	}
 
+	/* The accent as text: an app whose accent fails as text sets the ink. */
 	.agent-prose :global(a) {
-		color: var(--ds-color-primary);
+		color: var(--ds-color-primary-ink, var(--ds-color-primary));
 		text-underline-offset: 0.2em;
 		text-decoration-line: underline;
 	}

package/dist/components/scope-statement/scope-statement.svelte

@@ -5,11 +5,13 @@
   whether the answer they are about to read covers their case at all. Saying it
   once, in the persona's own words, is cheaper than every answer hedging.
 
-  It leads while there is nothing else on the surface, and folds to one line as
-  soon as there is: a boundary a reader has already read is a banner in the way
-  of the conversation they came for. Folded is not gone — the same line reopens
-  it, and a reader who opened it stays opened until the surface itself changes
-  state.
+  One quiet line, never a card: the label and a chevron in the muted ink, the
+  statement under it in the same ink when opened (caspo#177). `Conversation`
+  renders it folded, under the empty chat's composer and over the transcript
+  alike: a boundary is a banner in the way of the conversation a reader came
+  for, and one line they can open costs it nothing. Folded is not gone: the
+  same line reopens it, and a reader who opened it stays opened until the
+  surface itself changes state.
 -->
 <script lang="ts">
 	import { untrack } from 'svelte';
@@ -60,33 +62,32 @@
 	</button>
 
 	{#if open}
-		<!-- No measure of its own: the card IS the measure, and a paragraph
-		     capped narrower than the border around it leaves a hand's width of
-		     empty card down the right at 1440. -->
 		<p class="ds-lib-scope-text">{statement}</p>
 	{/if}
 </section>
 
 <style>
 	.ds-lib-scope {
-		border: 1px solid var(--ds-color-border);
-		border-radius: var(--ds-radius-xl);
-		background: color-mix(in oklab, var(--ds-color-surface-2) 60%, transparent);
-		padding: 0.5rem 0.75rem;
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+		align-items: flex-start;
 	}
 
+	/* 44px tall: a thumb's target, with nothing drawn around it. */
 	.ds-lib-scope-toggle {
 		display: flex;
-		width: 100%;
+		max-width: 100%;
+		min-height: 2.75rem;
 		align-items: center;
-		gap: 0.5rem;
+		gap: 0.375rem;
 		border: 0;
 		border-radius: var(--ds-radius-md);
 		background: none;
 		padding: 0;
 		color: var(--ds-color-muted-foreground);
 		font: inherit;
-		font-size: var(--ds-text-2xs);
+		font-size: 0.8125rem;
 		text-align: start;
 		cursor: pointer;
 		transition: color 150ms ease;
@@ -103,13 +104,9 @@
 
 	.ds-lib-scope-label {
 		min-width: 0;
-		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		font-weight: 500;
-		letter-spacing: 0.05em;
-		text-transform: uppercase;
 	}
 
 	.ds-lib-scope-chevron {
@@ -123,7 +120,7 @@
 	}
 
 	.ds-lib-scope-text {
-		margin: 0.375rem 0 0;
+		margin: 0;
 		color: var(--ds-color-muted-foreground);
 		font-size: 0.875rem;
 		line-height: 1.5rem;