@poodle64/librarian 2026.9.14 → 2026.9.16

package/dist/components/artefact-pane/artefact-pane.svelte

@@ -1,17 +1,18 @@
 <!--
   A study artefact, open in the reading column.
 
-  The same shell shape `DocumentPane` uses (a column at `lg`, a bottom sheet
-  below it) because decision 2 of the ask-milton surface is that a colleague
-  never has to learn which of the two things is in the column before they
-  open it — only ever one, in the same place, closing whichever was there.
+  The same shell shape `DocumentPane` uses (a column at 64rem, a bottom sheet
+  below it) because decision 2 of the agent surface is that a colleague never
+  has to learn which of the two things is in the column before they open it —
+  only ever one, in the same place, closing whichever was there.
 -->
 <script lang="ts">
 	import XIcon from '@lucide/svelte/icons/x';
 	import { segment, type TextBlock, type Turn } from '../../transcript.svelte';
-	import { resolveCitations, splitSources, trustMark, type Citation } from '../../citations';
+	import { resolveCitations, splitSources, type Citation } from '../../citations';
 	import { resolveCopy, type LibrarianCopy } from '../../copy';
 	import Markdown from '../markdown/markdown.svelte';
+	import SourceList from '../source-list/source-list.svelte';
 
 	interface Props {
 		turn: Turn;
@@ -52,69 +53,159 @@
 
 <svelte:window onkeydown={keydown} />
 
-<aside
-	aria-label="Study artefact"
-	class="bg-surface-1 border-border fixed inset-x-0 bottom-0 z-40 flex h-[80svh] flex-col rounded-t-2xl border-t shadow-2xl lg:relative lg:h-auto lg:w-[560px] lg:shrink-0 lg:rounded-none lg:border-t-0 lg:border-l lg:shadow-none"
->
-	<!-- The sheet's grabber. Below `lg` this is an overlay a reader has to be
+<aside aria-label="Study artefact" class="ds-lib-pane">
+	<!-- The sheet's grabber. On a phone this is an overlay a reader has to be
 	     able to see the top edge of; on a desktop it is a column, so there is
 	     nothing here to grab. -->
-	<div class="flex justify-center pt-2 pb-1 lg:hidden" aria-hidden="true">
-		<span class="bg-border h-1 w-9 rounded-full"></span>
-	</div>
+	<div class="ds-lib-pane-grabber" aria-hidden="true"><span></span></div>
 
-	<header class="border-border flex items-start gap-2 border-b px-4 py-3 lg:pt-3">
-		<div class="min-w-0 flex-1">
-			<h2 class="text-foreground truncate text-sm font-semibold">{turn.title ?? 'Briefing'}</h2>
-			<p class="text-muted-foreground truncate text-xs">
+	<header class="ds-lib-pane-header">
+		<div class="ds-lib-pane-heading">
+			<h2 class="ds-lib-pane-title">{turn.title ?? 'Briefing'}</h2>
+			<p class="ds-lib-pane-subtitle">
 				Briefing doc · {sources.length} source{sources.length === 1 ? '' : 's'}
 			</p>
 		</div>
 		<button
 			bind:this={closeButton}
 			type="button"
+			class="ds-lib-pane-close"
 			onclick={onclose}
 			aria-label={words.closeSource}
-			class="text-muted-foreground hover:text-foreground hover:bg-surface-2 focus-visible:ring-ring -mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:outline-none"
 		>
-			<XIcon class="size-4" />
+			<XIcon size={16} />
 		</button>
 	</header>
 
-	<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-3">
+	<div class="ds-lib-pane-body">
 		<Markdown content={split.citations.length > 0 ? split.body : rawAnswer} />
 
 		{#if sources.length > 0}
-			<section class="mt-6">
-				<h3 class="text-muted-foreground mb-1.5 text-xs font-medium tracking-wide uppercase">
-					{words.sources}
-				</h3>
-				<ol class="flex flex-col gap-1">
-					{#each sources as source (source.n)}
-						{@const mark = trustMark(source, words)}
-						<li>
-							<button
-								type="button"
-								onclick={() => oncite?.(source)}
-								disabled={!source.document_id || !oncite}
-								class="border-border hover:border-border-strong hover:bg-surface-2 focus-visible:ring-ring flex w-full items-baseline gap-2 rounded-lg border px-2.5 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-default disabled:hover:bg-transparent"
-							>
-								<span
-									class="bg-primary/15 text-foreground shrink-0 rounded px-1.5 font-mono text-xs tabular-nums"
-									>{source.n}</span
-								>
-								<span class="min-w-0">
-									<span class="text-foreground">{source.title}</span>
-									{#if source.section}<span class="text-muted-foreground">
-											· {source.section}</span
-										>{/if}
-									{#if mark}<span class="text-muted-foreground/80"> · {mark}</span>{/if}
-								</span>
-							</button>
-						</li>
-					{/each}
-				</ol>
-			</section>
+			<div class="ds-lib-pane-sources">
+				<SourceList {sources} {words} {oncite} level={3} />
+			</div>
 		{/if}
 	</div>
 </aside>
+
+<style>
+	.ds-lib-pane {
+		position: fixed;
+		inset-inline: 0;
+		bottom: 0;
+		z-index: 40;
+		display: flex;
+		height: 80svh;
+		flex-direction: column;
+		border-top: 1px solid var(--ds-color-border);
+		border-start-start-radius: var(--ds-radius-xl);
+		border-start-end-radius: var(--ds-radius-xl);
+		background: var(--ds-color-surface-1);
+		box-shadow: 0 -12px 40px rgb(0 0 0 / 0.25);
+	}
+
+	.ds-lib-pane-grabber {
+		display: flex;
+		justify-content: center;
+		padding-top: 0.5rem;
+		padding-bottom: 0.25rem;
+	}
+
+	.ds-lib-pane-grabber span {
+		width: 2.25rem;
+		height: 0.25rem;
+		border-radius: var(--ds-radius-full);
+		background: var(--ds-color-border);
+	}
+
+	.ds-lib-pane-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		border-bottom: 1px solid var(--ds-color-border);
+		padding: 0.75rem 1rem;
+	}
+
+	.ds-lib-pane-heading {
+		min-width: 0;
+		flex: 1;
+	}
+
+	.ds-lib-pane-title,
+	.ds-lib-pane-subtitle {
+		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ds-lib-pane-title {
+		color: var(--ds-color-foreground);
+		font-family: inherit;
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.ds-lib-pane-subtitle {
+		color: var(--ds-color-muted-foreground);
+		font-size: var(--ds-text-2xs);
+	}
+
+	.ds-lib-pane-close {
+		display: flex;
+		width: 2rem;
+		height: 2rem;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		margin-top: -0.25rem;
+		border: 0;
+		border-radius: var(--ds-radius-lg);
+		background: none;
+		color: var(--ds-color-muted-foreground);
+		cursor: pointer;
+		transition:
+			color 150ms ease,
+			background-color 150ms ease;
+	}
+
+	.ds-lib-pane-close:hover {
+		background: var(--ds-color-surface-2);
+		color: var(--ds-color-foreground);
+	}
+
+	.ds-lib-pane-close:focus-visible {
+		outline: 2px solid var(--ds-color-ring);
+		outline-offset: 2px;
+	}
+
+	.ds-lib-pane-body {
+		min-height: 0;
+		flex: 1;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 0.75rem 1rem;
+	}
+
+	.ds-lib-pane-sources {
+		margin-top: 1.5rem;
+	}
+
+	@media (min-width: 64rem) {
+		.ds-lib-pane {
+			position: relative;
+			inset: auto;
+			height: auto;
+			width: 35rem;
+			flex: none;
+			border-top: 0;
+			border-inline-start: 1px solid var(--ds-color-border);
+			border-radius: 0;
+			box-shadow: none;
+		}
+
+		.ds-lib-pane-grabber {
+			display: none;
+		}
+	}
+</style>

package/dist/components/composer/composer.svelte

@@ -23,6 +23,7 @@
 		MAX_FILES,
 		rejectionMessage
 	} from '../../attachments';
+	import { DEFAULT_PERSONA, resolveCopy, type LibrarianCopy } from '../../copy';
 
 	export type Scope = 'document' | 'collection' | 'library';
 
@@ -44,8 +45,11 @@
 		 *  control renders — studying is a mode of asking, never a tab, so a
 		 *  host with nothing to build offers none rather than a disabled one. */
 		onbriefing?: () => void;
-		/** The persona's display name; the placeholder in both states takes it. */
+		/** Who is being asked. A slug is fine — `penny` renders as "Penny" — and
+		 *  both placeholders are composed from it. */
 		name?: string;
+		/** Overrides for the package's own words. */
+		copy?: Partial<LibrarianCopy>;
 	}
 
 	let {
@@ -60,9 +64,12 @@
 		onsubmit,
 		onstop,
 		onbriefing,
-		name = 'Milton'
+		name = DEFAULT_PERSONA,
+		copy
 	}: Props = $props();
 
+	const words = $derived(resolveCopy(copy, name));
+
 	// What Milton is being asked about — this document, this collection, or
 	// the whole library. Callers that have no narrower scope pass neither
 	// name, leaving "The whole library" the sole entry — and a sole entry is
@@ -180,30 +187,25 @@
 </script>
 
 <div
+	class="ds-lib-composer-lift"
 	style="transform: translateY(-{lift}px); padding-bottom: {lift
 		? '0px'
 		: 'env(safe-area-inset-bottom, 0px)'}"
-	class="transition-transform duration-150"
 >
-	<div
-		class="border-border bg-surface-1 focus-within:border-primary/60 rounded-xl border transition-colors"
-	>
+	<div class="ds-lib-box">
 		{#if files.length > 0}
-			<ul class="flex flex-wrap gap-1.5 px-3 pt-3">
+			<ul class="ds-lib-files">
 				{#each files as file, index (file.name + file.size)}
-					<li
-						class="border-border bg-surface-2 flex max-w-full items-center gap-1.5 rounded-lg border py-1 pr-1 pl-2 text-xs"
-					>
-						<span class="text-foreground truncate">{file.name}</span>
-						<span class="text-muted-foreground shrink-0 tabular-nums">{formatSize(file.size)}</span
-						>
+					<li class="ds-lib-file">
+						<span class="ds-lib-file-name">{file.name}</span>
+						<span class="ds-lib-file-size">{formatSize(file.size)}</span>
 						<button
 							type="button"
+							class="ds-lib-file-remove"
 							onclick={() => remove(index)}
 							aria-label="Remove {file.name}"
-							class="text-muted-foreground hover:text-foreground hover:bg-surface-3 focus-visible:ring-ring flex size-5 shrink-0 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
 						>
-							<XIcon class="size-3" />
+							<XIcon size={12} />
 						</button>
 					</li>
 				{/each}
@@ -217,11 +219,11 @@
 			onkeydown={keydown}
 			rows="1"
 			disabled={running}
-			placeholder={running ? `${name} is answering…` : `Ask ${name}…`}
-			class="text-foreground placeholder:text-muted-foreground w-full resize-none bg-transparent px-4 pt-3 pb-2 text-base outline-none disabled:opacity-60"
+			placeholder={running ? words.answeringPlaceholder : words.askPlaceholder}
+			class="ds-lib-input"
 		></textarea>
 
-		<div class="flex items-center gap-2 px-3 pb-2.5">
+		<div class="ds-lib-controls">
 			{#if attachments}
 				<input
 					bind:this={picker}
@@ -229,75 +231,287 @@
 					multiple
 					accept={ACCEPT_ATTRIBUTE}
 					onchange={pick}
-					class="hidden"
+					class="ds-lib-picker"
 					tabindex="-1"
 					aria-hidden="true"
 				/>
 				<button
 					type="button"
+					class="ds-lib-icon-button"
 					onclick={() => picker?.click()}
 					disabled={running || files.length >= MAX_FILES}
 					aria-label="Attach a file"
-					class="text-muted-foreground hover:text-foreground hover:bg-surface-2 focus-visible:ring-ring flex size-8 shrink-0 items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30"
 				>
-					<PaperclipIcon class="size-4" />
+					<PaperclipIcon size={16} />
 				</button>
 			{/if}
 
 			{#if onbriefing}
 				<button
 					type="button"
+					class="ds-lib-icon-button"
 					onclick={onbriefing}
 					disabled={running}
 					aria-label="Ask for a briefing"
 					title="Ask for a briefing"
-					class="text-muted-foreground hover:text-foreground hover:bg-surface-2 focus-visible:ring-ring flex size-8 shrink-0 items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30"
 				>
-					<FileTextIcon class="size-4" />
+					<FileTextIcon size={16} />
 				</button>
 			{/if}
 
 			{#if hasChoice}
-				<div class="flex min-w-0 flex-wrap items-center gap-1">
+				<div class="ds-lib-scopes">
 					{#each choices as choice (choice.id)}
 						<button
 							type="button"
+							class="ds-lib-scope-chip"
+							class:is-chosen={scope === choice.id}
 							onclick={() => onscope(choice.id)}
-							class="max-w-full truncate rounded-full px-2 py-0.5 text-xs transition-colors {scope ===
-							choice.id
-								? 'bg-primary/15 text-foreground border-primary/40 border'
-								: 'text-muted-foreground hover:text-foreground border border-transparent'}"
 						>
 							{choice.label}
 						</button>
 					{/each}
 				</div>
 			{/if}
-			<span class="flex-1"></span>
+			<span class="ds-lib-spacer"></span>
 			{#if running}
-				<button
-					type="button"
-					onclick={onstop}
-					aria-label="Stop"
-					class="bg-foreground text-background hover:bg-foreground/90 flex size-8 items-center justify-center rounded-full transition-colors"
-				>
-					<SquareIcon class="size-3.5 fill-current" />
+				<button type="button" class="ds-lib-stop" onclick={onstop} aria-label="Stop">
+					<SquareIcon size={14} fill="currentColor" />
 				</button>
 			{:else}
 				<button
 					type="button"
+					class="ds-lib-send"
 					onclick={submit}
 					disabled={!value.trim()}
 					aria-label="Send"
-					class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:hover:bg-primary flex size-8 items-center justify-center rounded-full transition-all disabled:opacity-30"
 				>
-					<ArrowUpIcon class="size-4" />
+					<ArrowUpIcon size={16} />
 				</button>
 			{/if}
 		</div>
 	</div>
 
 	{#if rejected}
-		<p class="text-status-error px-1 pt-1.5 text-xs" role="status" aria-live="polite">{rejected}</p>
+		<p class="ds-lib-rejected" role="status" aria-live="polite">{rejected}</p>
 	{/if}
 </div>
+
+<style>
+	.ds-lib-composer-lift {
+		transition: transform 150ms ease;
+	}
+
+	.ds-lib-box {
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-xl);
+		background: var(--ds-color-surface-1);
+		transition: border-color 150ms ease;
+	}
+
+	.ds-lib-box:focus-within {
+		border-color: color-mix(in oklab, var(--ds-color-primary) 60%, transparent);
+	}
+
+	.ds-lib-files {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.375rem;
+		margin: 0;
+		padding: 0.75rem 0.75rem 0;
+		list-style: none;
+	}
+
+	.ds-lib-file {
+		display: flex;
+		max-width: 100%;
+		align-items: center;
+		gap: 0.375rem;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-lg);
+		background: var(--ds-color-surface-2);
+		padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+		font-size: var(--ds-text-2xs);
+	}
+
+	.ds-lib-file-name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--ds-color-foreground);
+	}
+
+	.ds-lib-file-size {
+		flex: none;
+		color: var(--ds-color-muted-foreground);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.ds-lib-file-remove {
+		display: flex;
+		width: 1.25rem;
+		height: 1.25rem;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		border-radius: var(--ds-radius-sm);
+		background: none;
+		color: var(--ds-color-muted-foreground);
+		cursor: pointer;
+		transition:
+			color 150ms ease,
+			background-color 150ms ease;
+	}
+
+	.ds-lib-file-remove:hover {
+		background: var(--ds-color-surface-3);
+		color: var(--ds-color-foreground);
+	}
+
+	.ds-lib-input {
+		display: block;
+		width: 100%;
+		resize: none;
+		border: 0;
+		background: transparent;
+		padding: 0.75rem 1rem 0.5rem;
+		color: var(--ds-color-foreground);
+		font: inherit;
+		font-size: 1rem;
+		outline: none;
+	}
+
+	.ds-lib-input::placeholder {
+		color: var(--ds-color-muted-foreground);
+	}
+
+	.ds-lib-input:disabled {
+		opacity: 0.6;
+	}
+
+	.ds-lib-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0 0.75rem 0.625rem;
+	}
+
+	.ds-lib-picker {
+		display: none;
+	}
+
+	.ds-lib-icon-button,
+	.ds-lib-stop,
+	.ds-lib-send {
+		display: flex;
+		width: 2rem;
+		height: 2rem;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		border-radius: var(--ds-radius-full);
+		cursor: pointer;
+		transition:
+			color 150ms ease,
+			background-color 150ms ease,
+			opacity 150ms ease;
+	}
+
+	.ds-lib-icon-button {
+		background: none;
+		color: var(--ds-color-muted-foreground);
+	}
+
+	.ds-lib-icon-button:hover:not(:disabled) {
+		background: var(--ds-color-surface-2);
+		color: var(--ds-color-foreground);
+	}
+
+	.ds-lib-icon-button:disabled,
+	.ds-lib-send:disabled {
+		cursor: default;
+		opacity: 0.3;
+	}
+
+	.ds-lib-icon-button:focus-visible,
+	.ds-lib-stop:focus-visible,
+	.ds-lib-send:focus-visible,
+	.ds-lib-scope-chip:focus-visible,
+	.ds-lib-file-remove:focus-visible {
+		outline: 2px solid var(--ds-color-ring);
+		outline-offset: 2px;
+	}
+
+	.ds-lib-stop {
+		background: var(--ds-color-foreground);
+		color: var(--ds-color-background);
+	}
+
+	.ds-lib-send {
+		background: var(--ds-color-primary);
+		color: var(--ds-color-primary-foreground);
+	}
+
+	.ds-lib-send:hover:not(:disabled),
+	.ds-lib-stop:hover {
+		opacity: 0.9;
+	}
+
+	/* Three chips in a narrow column clipped all three to fragments
+	   ("defence-s…", "All colle…"). Wrapping beats truncating: a chip a reader
+	   cannot finish reading is not a control, it is decoration. */
+	.ds-lib-scopes {
+		display: flex;
+		min-width: 0;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.ds-lib-scope-chip {
+		max-width: 100%;
+		overflow: hidden;
+		border: 1px solid transparent;
+		border-radius: var(--ds-radius-full);
+		background: none;
+		padding: 0.125rem 0.5rem;
+		color: var(--ds-color-muted-foreground);
+		font: inherit;
+		font-size: var(--ds-text-2xs);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		cursor: pointer;
+		transition:
+			color 150ms ease,
+			background-color 150ms ease;
+	}
+
+	.ds-lib-scope-chip:hover {
+		color: var(--ds-color-foreground);
+	}
+
+	.ds-lib-scope-chip.is-chosen {
+		border-color: color-mix(in oklab, var(--ds-color-primary) 40%, transparent);
+		background: color-mix(in oklab, var(--ds-color-primary) 15%, transparent);
+		color: var(--ds-color-foreground);
+	}
+
+	.ds-lib-spacer {
+		flex: 1;
+	}
+
+	.ds-lib-rejected {
+		margin: 0;
+		padding: 0.375rem 0.25rem 0;
+		color: var(--ds-color-status-error);
+		font-size: var(--ds-text-2xs);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ds-lib-composer-lift {
+			transition: none;
+		}
+	}
+</style>

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

@@ -1,3 +1,4 @@
+import { type LibrarianCopy } from '../../copy';
 export type Scope = 'document' | 'collection' | 'library';
 interface Props {
     value: string;
@@ -17,8 +18,11 @@ interface Props {
      *  control renders — studying is a mode of asking, never a tab, so a
      *  host with nothing to build offers none rather than a disabled one. */
     onbriefing?: () => void;
-    /** The persona's display name; the placeholder in both states takes it. */
+    /** Who is being asked. A slug is fine — `penny` renders as "Penny" — and
+     *  both placeholders are composed from it. */
     name?: string;
+    /** Overrides for the package's own words. */
+    copy?: Partial<LibrarianCopy>;
 }
 declare const Composer: import("svelte").Component<Props, {}, "value" | "files">;
 type Composer = ReturnType<typeof Composer>;