@poodle64/librarian 2026.10.5 → 2026.10.6

package/README.md

@@ -179,7 +179,7 @@ on it fires once and never again.
 | Asking again             | `onregenerate`: re-send the last question as a NEW turn; the package exposes the action and never re-asks by itself                                                                         |
 | Choosing a collection    | `Composer`'s `collections` (`{ name, title?, description? }[]`, the ones the person may read) and `collection` (the chosen name; undefined is all of them), with `oncollection(name \| undefined)`. From two collections up it is ONE control naming the choice, opening a listbox (searchable from eight) where each shows by its title (the name made readable where there is none) over its description, never a retrieval summary |
 | The empty state          | `welcome` and up to three `examples`. With a composer, the opening and the composer sit together in the middle of the panel, the examples, the folded scope and `lead` under it; the first turn docks the composer at the foot |
-| Conversation controls    | `toolbar`: a snippet at the measure's trailing edge above the transcript, outside its scroll (the room page's Past questions and New question)                                               |
+| Conversation controls    | `toolbar`: a snippet at the measure's trailing edge above the transcript, outside its scroll (the chat page's Past questions and New question)                                               |
 | What this surface covers | `scope`: one statement per persona, in the host's own words. Rendered above the first turn and folded to a line once the conversation starts                                                   |
 | The words themselves     | `copy`: a partial of `ChatCopy`. Every component resolves it itself, so overriding one line does not mean restating the rest                                                           |
 | An answer its own way    | `turn`: a snippet given each turn's `AgentTranscriptProps` in place of `AgentTranscript`. Render your own from the parts, or `AgentTranscript` inside your own to add to it               |
@@ -405,7 +405,7 @@ end that way.
 | Documents it wrote     | `artefact` frames and a stored turn's `artefacts` (each with `title`, `kind`, `changes`, `pages`) become `turn.written`: the newest version of each is a card with Open and a download chip (Word where `formats` has it, else the source). The pane marks what a version changed since the one before: a "Changed since vN" line from `changes`, and a bar beside each changed block. `loadWritten(name, version)` and `writtenUrl(name, version, format)` (`Chat.loadArtefact` / `Chat.artefactUrl` over the transport) let the pane show a version: Markdown sanitised, HTML only in a `sandbox=""` frame |
 | The turn's steps       | One fold, "Read your attachment, searched the library and the web, and wrote a minute · 6 steps", composed from the steps (`stepsSummary`); it says what is happening now while the turn runs, and opens on one row per step (a search row counts what it found, a web search opens on the pages it found) |
 | Web sources            | Pages from the turn's supacrawl calls and the answer's Markdown links fold with the library's sources ("6 sources · 4 library · 2 web"), numbered on from the library's, and a link to one in the answer reads as that number's chip |
-| Drawing a fence        | `visuals` on `Conversation` is a registry keyed on a fence's language, `{ component, parse }` each; `defaultVisuals` (from `@poodle64/librarian/visuals`) draws `vega-lite` (one Vega-Lite v5 spec, in the app's tokens), `timeline` and `card`. An app passes `{ ...defaultVisuals, openui }`. A block whose closing fence has not arrived is "Drawing…", one that does not parse is its code |
+| Drawing a fence        | `visuals` on `Conversation` is a registry keyed on a fence's language, `{ component, parse }` each; `defaultVisuals` (from `@poodle64/librarian/visuals`) draws `chart` (`{title, type: bar | line | area, x, y: [fields], data}` on LayerChart, in the app's `--chart-1`…`--chart-5` tokens, loaded when an answer carries one), `timeline` and `card`. An app passes `{ ...defaultVisuals, openui }`. A block whose closing fence has not arrived is "Drawing…", one that does not parse is its code |
 | "Answered without a source" | `copy.notHeld: ''` for a persona that answers from no sources                                                                                                     |
 | Saying something mid-run | `Composer`'s `sendWhileRunning`: while the session works the box stays open and Send sits beside Stop. For a route that reads a message while the run works; a chat leaves it off and waits for its answer |
 

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { AreaChart, BarChart, LineChart } from 'layerchart';
+	import type { ChartValue } from '../../visuals';
+
+	let { value }: { value: ChartValue } = $props();
+
+	// `--chart-1` to `--chart-5` are the app's own series colours.
+	const series = $derived(
+		value.y.map((key, index) => ({ key, label: key, color: `var(--chart-${index + 1})` }))
+	);
+	const legend = $derived(series.length > 1);
+	// A line or area over ISO dates is a time axis; anything else is the label it says.
+	const data = $derived(
+		value.type !== 'bar' && value.data.every((row) => /^\d{4}-\d{2}(-\d{2})?$/.test(String(row[value.x])))
+			? value.data.map((row) => ({ ...row, [value.x]: new Date(String(row[value.x])) }))
+			: value.data
+	);
+</script>
+
+{#if value.type === 'bar'}
+	<BarChart {data} x={value.x} {series} {legend} seriesLayout="group" props={{ bars: { strokeWidth: 0, radius: 2 } }} />
+{:else if value.type === 'line'}
+	<LineChart {data} x={value.x} {series} {legend} />
+{:else}
+	<AreaChart {data} x={value.x} {series} {legend} />
+{/if}

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

@@ -0,0 +1,7 @@
+import type { ChartValue } from '../../visuals';
+type $$ComponentProps = {
+    value: ChartValue;
+};
+declare const ChartDraw: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChartDraw = ReturnType<typeof ChartDraw>;
+export default ChartDraw;

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

@@ -0,0 +1,73 @@
+<!--
+  One chart block, drawn with LayerChart in the app's chart tokens. The persona
+  writes the data and the kind; colour, type, axes and size come from here.
+  LayerChart is loaded when an answer carries a chart, never with the page.
+-->
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { ChartValue } from '../../visuals';
+
+	interface Props {
+		value: unknown;
+		source: string;
+	}
+
+	let { value, source }: Props = $props();
+	const chart = $derived(value as ChartValue);
+	let Draw = $state<Component<{ value: ChartValue }> | null>(null);
+	let failed = $state(false);
+
+	$effect(() => {
+		if (Draw || failed) return;
+		import('./chart-draw.svelte').then(
+			(module) => (Draw = module.default),
+			() => (failed = true)
+		);
+	});
+</script>
+
+{#if failed}
+	<pre data-highlighted="true"><code>{source}</code></pre>
+{:else}
+	<figure class="ds-lib-chart">
+		{#if chart.title}<figcaption class="ds-lib-chart-title">{chart.title}</figcaption>{/if}
+		<div class="ds-lib-chart-host">
+			{#if Draw}<Draw value={chart} />{/if}
+		</div>
+	</figure>
+{/if}
+
+<style>
+	.ds-lib-chart {
+		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 0.875rem;
+	}
+
+	.ds-lib-chart-title {
+		margin-bottom: 0.5rem;
+		color: var(--ds-color-foreground);
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.ds-lib-chart-host {
+		width: 100%;
+		height: 16rem;
+	}
+
+	.ds-lib-chart-host :global(text) {
+		fill: var(--ds-color-muted-foreground);
+		stroke: none;
+		font-size: 12px;
+	}
+
+	.ds-lib-chart-host :global(.lc-rule),
+	.ds-lib-chart-host :global(.lc-axis-tick),
+	.ds-lib-chart-host :global(.lc-grid-x-line),
+	.ds-lib-chart-host :global(.lc-grid-y-line) {
+		stroke: var(--ds-color-border-strong);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Component } from 'svelte';
+interface Props {
+    value: unknown;
+    source: string;
+}
+declare const Chart: Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/visuals.d.ts

@@ -17,6 +17,14 @@ export interface Visual {
     /** The block's text as the value its component draws; throws on a block that is invalid. */
     parse: (source: string) => unknown;
 }
+export interface ChartValue {
+    title: string;
+    type: 'bar' | 'line' | 'area';
+    /** The field on the x axis; each y is a field drawn as a series. */
+    x: string;
+    y: string[];
+    data: Array<Record<string, string | number>>;
+}
 export interface TimelineValue {
     title: string;
     events: Array<{
@@ -34,5 +42,5 @@ export interface CardValue {
         value: string;
     }>;
 }
-/** A chart, a timeline and an entity card. An app adds to these or replaces one through `ChatExtensions.visuals`. */
+/** A chart (LayerChart), a timeline and an entity card. An app adds to these or replaces one through `ChatExtensions.visuals`. */
 export declare const defaultVisuals: Record<string, Visual>;

package/dist/visuals.js

@@ -10,7 +10,7 @@
  */
 import EntityCard from './components/visual-block/entity-card.svelte';
 import Timeline from './components/visual-block/timeline.svelte';
-import VegaChart from './components/visual-block/vega-chart.svelte';
+import Chart from './components/visual-block/chart.svelte';
 const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
 const text = (value) => typeof value === 'string' ? value : typeof value === 'number' ? String(value) : '';
 const object = (source) => {
@@ -19,32 +19,34 @@ const object = (source) => {
         throw new Error('not an object');
     return value;
 };
-/** Any string naming an address: a spec that carries one could fetch it, or link to it carrying the conversation out. */
-const ADDRESS = /^[a-z][a-z0-9+.-]*:|\/\//i;
-/**
- * A spec that names an address anywhere, by key or by value, or carries
- * `usermeta`, whose `embedOptions` vega-embed merges over the app's own
- * (`config` or `patch` as a URL is fetched, `actions` turns the export menu back on).
- */
-function addressed(value) {
-    if (typeof value === 'string')
-        return ADDRESS.test(value.trim());
-    if (Array.isArray(value))
-        return value.some(addressed);
-    if (!isRecord(value))
-        return false;
-    return Object.entries(value).some(
-    // `$schema` names the spec's own version and is never drawn or fetched (`vega-chart` drops it).
-    ([key, inner]) => key !== '$schema' && (key === 'url' || key === 'href' || key === 'usermeta' || addressed(inner)));
-}
-const VIEWS = ['mark', 'layer', 'hconcat', 'vconcat', 'concat', 'facet', 'repeat'];
-function parseVega(source) {
-    const spec = object(source);
-    if (!VIEWS.some((key) => key in spec))
-        throw new Error('not a view');
-    if (addressed(spec))
-        throw new Error('names an address');
-    return spec;
+const KINDS = ['bar', 'line', 'area'];
+const MAX_SERIES = 5;
+const MAX_ROWS = 500;
+function parseChart(source) {
+    const value = object(source);
+    const type = KINDS.find((kind) => kind === value.type);
+    if (!type)
+        throw new Error('not a bar, line or area');
+    const x = text(value.x);
+    const y = Array.isArray(value.y) ? value.y.map(text) : [];
+    if (!x || y.length === 0 || y.length > MAX_SERIES || y.some((key) => !key))
+        throw new Error('no x or y');
+    const rows = Array.isArray(value.data) ? value.data : [];
+    if (rows.length === 0 || rows.length > MAX_ROWS)
+        throw new Error('no data');
+    const data = rows.map((row) => {
+        if (!isRecord(row) || !text(row[x]))
+            throw new Error('a row with no x');
+        const point = { [x]: typeof row[x] === 'number' ? row[x] : text(row[x]) };
+        for (const key of y) {
+            const number = row[key];
+            if (typeof number !== 'number' || !Number.isFinite(number))
+                throw new Error('a y that is not a number');
+            point[key] = number;
+        }
+        return point;
+    });
+    return { title: text(value.title), type, x, y, data };
 }
 function parseTimeline(source) {
     const value = object(source);
@@ -74,9 +76,9 @@ function parseCard(source) {
             .filter((fact) => fact.label || fact.value)
     };
 }
-/** A chart, a timeline and an entity card. An app adds to these or replaces one through `ChatExtensions.visuals`. */
+/** A chart (LayerChart), a timeline and an entity card. An app adds to these or replaces one through `ChatExtensions.visuals`. */
 export const defaultVisuals = {
-    'vega-lite': { component: VegaChart, parse: parseVega },
+    chart: { component: Chart, parse: parseChart },
     timeline: { component: Timeline, parse: parseTimeline },
     card: { component: EntityCard, parse: parseCard }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@poodle64/librarian",
-	"version": "2026.10.5",
+	"version": "2026.10.6",
 	"description": "An agent's conversation surface as a consumable Svelte 5 package: the stream client, transcript state and self-styling chat components (transcript, composer, markdown) every household app renders instead of rebuilding, speaking as whichever persona the app names.",
 	"type": "module",
 	"license": "MIT",
@@ -73,9 +73,7 @@
 		"shiki": "^4.4.3"
 	},
 	"dependencies": {
-		"vega": "6.4.0",
-		"vega-embed": "7.3.0",
-		"vega-lite": "6.4.3"
+		"layerchart": "2.6.0"
 	},
 	"devDependencies": {
 		"@lucide/svelte": "^1.7.0",

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

@@ -1,110 +0,0 @@
-<!--
-  One Vega-Lite v5 spec, drawn with the app's own tokens. The persona writes
-  the data and the marks; colour, type, axes and size come from here and
-  override whatever the spec says. Loaded on demand: vega is not small.
--->
-<script lang="ts">
-	import { onMount } from 'svelte';
-
-	interface Props {
-		value: unknown;
-		source: string;
-	}
-
-	let { value, source }: Props = $props();
-	let host = $state<HTMLDivElement | null>(null);
-	let failed = $state(false);
-
-	const css = (name: string): string =>
-		getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-
-	function config() {
-		const ink = css('--ds-color-foreground') || '#231f20';
-		const muted = css('--ds-color-muted-foreground') || '#57595c';
-		const line = css('--ds-color-border-strong') || '#00000038';
-		const font = getComputedStyle(document.body).fontFamily;
-		const series = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => css(`--chart-${i}`)).filter(Boolean);
-		return {
-			background: null,
-			font,
-			...(series.length > 0 ? { range: { category: series } } : {}),
-			mark: { color: series[0] ?? ink },
-			bar: { cornerRadius: 1 },
-			view: { stroke: null },
-			axis: {
-				labelColor: muted,
-				titleColor: muted,
-				domainColor: line,
-				tickColor: line,
-				gridColor: line,
-				gridOpacity: 0.5,
-				labelFont: font,
-				titleFont: font,
-				labelFontSize: 12,
-				titleFontSize: 12,
-				titleFontWeight: 600
-			},
-			legend: { labelColor: ink, titleColor: muted, labelFont: font, titleFont: font },
-			title: { color: ink, font, fontSize: 14, fontWeight: 600, anchor: 'start' }
-		};
-	}
-
-	let latest = 0;
-	// The view drawn last, ended before the next is drawn and when the chart goes.
-	let drawn: { finalize: () => void } | undefined;
-	async function draw() {
-		if (!host) return;
-		const mine = ++latest;
-		try {
-			const { default: embed } = await import('vega-embed');
-			if (mine !== latest) return;
-			const { $schema: _schema, config: _config, usermeta: _usermeta, ...spec } = value as Record<string, unknown>;
-			drawn?.finalize();
-			drawn = await embed(
-				host,
-				{ ...spec, width: 'container', autosize: { type: 'fit', contains: 'padding' } } as never,
-				{ actions: false, renderer: 'svg', config: config() as never }
-			);
-			failed = false;
-		} catch {
-			if (mine === latest) failed = true;
-		}
-	}
-
-	onMount(() => {
-		// The palette follows the theme, and the theme is a class on the root.
-		const watch = new MutationObserver(() => void draw());
-		watch.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-		return () => {
-			watch.disconnect();
-			drawn?.finalize();
-		};
-	});
-
-	$effect(() => {
-		void value;
-		void host;
-		void draw();
-	});
-</script>
-
-{#if failed}
-	<pre data-highlighted="true"><code>{source}</code></pre>
-{:else}
-	<figure class="ds-lib-chart"><div bind:this={host} class="ds-lib-chart-host"></div></figure>
-{/if}
-
-<style>
-	.ds-lib-chart {
-		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 0.875rem;
-	}
-
-	.ds-lib-chart-host {
-		width: 100%;
-		min-height: 6rem;
-	}
-</style>

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

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