@signal9/era-ui 4.7.2 → 4.9.0

package/dist/ai/swarm/swarm-sandbox.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+	import type { SwarmSandbox } from './swarm.js';
+
+	/**
+	 * VM health → tint. The one place it is spelled: the row showed the glyph and
+	 * the card showed glyph + word, and each had its own copy of this mapping —
+	 * which disagreed about `terminated`.
+	 */
+	const SANDBOX_TONE: Record<SwarmSandbox['status'], string> = {
+		running: 'text-success',
+		paused: 'text-warning',
+		terminated: 'text-muted'
+	};
+</script>
+
+<script lang="ts">
+	import Box from '@lucide/svelte/icons/box';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		sandbox,
+		label = false,
+		class: className
+	}: {
+		sandbox: SwarmSandbox;
+		/** Spell the status out beside the glyph — for a card, where there is room. */
+		label?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<!-- Deliberately a signal of its own, never folded into the status dot: an agent
+     can be running with a terminated VM (reaped, or never created), and one
+     indicator for both hides exactly the state you opened a console to find. -->
+<span
+	class={cn(
+		'flex min-w-0 shrink-0 items-center gap-(--era-gap) font-mono',
+		SANDBOX_TONE[sandbox.status],
+		className
+	)}
+	title="sandbox {sandbox.id ?? ''} ({sandbox.status})"
+>
+	<Box class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	{#if label}<span class="truncate">{sandbox.status}</span>{/if}
+</span>

package/dist/ai/swarm/swarm-sandbox.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SwarmSandbox } from './swarm.js';
+type $$ComponentProps = {
+    sandbox: SwarmSandbox;
+    /** Spell the status out beside the glyph — for a card, where there is room. */
+    label?: boolean;
+    class?: string;
+};
+declare const SwarmSandbox: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwarmSandbox = ReturnType<typeof SwarmSandbox>;
+export default SwarmSandbox;

package/dist/ai/swarm/swarm-tree.svelte

@@ -49,7 +49,11 @@
 	const isOpen = (id: string) => !closed[id];
 
 	function setOpen(agent: SwarmAgent, open: boolean) {
-		closed = { ...closed, [agent.id]: !open };
+		// Mutated in place, not replaced: assigning a fresh object changes the
+		// `closed` signal itself, which invalidates EVERY node's props (each reads it
+		// through isOpen) — so collapsing one row rebuilt the whole forest's props.
+		// The deep proxy notifies only this key's readers.
+		closed[agent.id] = !open;
 		onToggle?.(agent, open);
 	}
 
@@ -58,14 +62,23 @@
 	 * order the arrow keys have to move through, so navigation is derived from
 	 * the same walk that renders rather than from the DOM.
 	 */
-	type Row = { id: string; parentId: string | null; expandable: boolean; open: boolean };
+	// Carries the agent, not just its id: every arrow key that opens or closes a
+	// row needs the record, and looking it up again meant an O(n) find plus a
+	// null-guard in each branch of the key handler.
+	type Row = {
+		id: string;
+		agent: SwarmAgent;
+		parentId: string | null;
+		expandable: boolean;
+		open: boolean;
+	};
 	const rows = $derived.by(() => {
 		const out: Row[] = [];
 		const walk = (nodes: SwarmNode[], parentId: string | null) => {
 			for (const node of nodes) {
 				const canExpand = nodeExpandable(node);
 				const open = isOpen(node.agent.id);
-				out.push({ id: node.agent.id, parentId, expandable: canExpand, open });
+				out.push({ id: node.agent.id, agent: node.agent, parentId, expandable: canExpand, open });
 				if (canExpand && open) walk(node.children, node.agent.id);
 			}
 		};
@@ -117,8 +130,7 @@
 				if (!current) break;
 				event.preventDefault();
 				if (current.expandable && !current.open) {
-					const agent = agents.find((a) => a.id === current.id);
-					if (agent) setOpen(agent, true);
+					setOpen(current.agent, true);
 				} else if (rows[index + 1]?.parentId === current.id) {
 					focusRow(rows[index + 1].id);
 				}
@@ -128,8 +140,7 @@
 				if (!current) break;
 				event.preventDefault();
 				if (current.expandable && current.open) {
-					const agent = agents.find((a) => a.id === current.id);
-					if (agent) setOpen(agent, false);
+					setOpen(current.agent, false);
 				} else {
 					focusRow(current.parentId);
 				}
@@ -185,8 +196,11 @@
 		detail,
 		meta,
 		open: isOpen(node.agent.id),
+		// `active` is the whole roving-focus story: the node derives its own
+		// tabindex from it. Passing tabindex separately meant the same fact twice,
+		// and it only worked because the node happened to spread restProps AFTER
+		// its own tabindex — reorder those two lines and Tab access dies silently.
 		active: focusedId === node.agent.id,
-		tabindex: focusedId === node.agent.id ? 0 : -1,
 		onToggle: (open: boolean) => setOpen(node.agent, open)
 	}}
 	{#if node.children.length > 0}

package/dist/ai/swarm/swarm.d.ts

@@ -175,6 +175,14 @@ export declare function summarizeBarrier(barrier: SwarmBarrier, agents: SwarmAge
     total: number;
     status: SwarmBarrierStatus;
 };
+/**
+ * Work that has not landed yet — blocked, queued or running.
+ *
+ * The predicate a cancel affordance is gated on, and the definition of `active`
+ * in `summarizeSwarm`. One function so the two can never disagree about whether
+ * a blocked agent is still cancellable.
+ */
+export declare function isSwarmAgentActive(agent: SwarmAgent): boolean;
 /**
  * How long an agent has been working, in ms — `null` when it never started.
  *

package/dist/ai/swarm/swarm.js

@@ -100,9 +100,8 @@ export function summarizeSwarm(agents) {
     };
     for (const agent of agents) {
         counts[agent.status]++;
-        if (agent.status === 'blocked' || agent.status === 'queued' || agent.status === 'running') {
+        if (isSwarmAgentActive(agent))
             counts.active++;
-        }
         if (agent.sandbox && agent.sandbox.status !== 'terminated')
             counts.sandboxes++;
     }
@@ -145,6 +144,16 @@ export function summarizeBarrier(barrier, agents) {
                 : 'done';
     return { done, failed, total, status: barrier.status ?? (total === 0 ? 'open' : derived) };
 }
+/**
+ * Work that has not landed yet — blocked, queued or running.
+ *
+ * The predicate a cancel affordance is gated on, and the definition of `active`
+ * in `summarizeSwarm`. One function so the two can never disagree about whether
+ * a blocked agent is still cancellable.
+ */
+export function isSwarmAgentActive(agent) {
+    return agent.status === 'blocked' || agent.status === 'queued' || agent.status === 'running';
+}
 /**
  * How long an agent has been working, in ms — `null` when it never started.
  *

package/dist/ai/swarm/swarm.svelte.d.ts

@@ -38,7 +38,6 @@ export declare class SwarmController {
     /** The watermark: the last APPLIED event seq, and the resume point. */
     seq: number;
     constructor(snapshot?: SwarmSnapshot);
-    readonly tree: import("./swarm.js").SwarmNode[];
     readonly counts: import("./swarm.js").SwarmCounts;
     /**
      * Merge a snapshot in.

package/dist/ai/swarm/swarm.svelte.js

@@ -6,7 +6,7 @@
  * the only one a host has to construct). See that module for the model itself
  * and for why the sequence number is the whole resumption contract.
  */
-import { buildSwarmTree, summarizeSwarm } from './swarm.js';
+import { summarizeSwarm } from './swarm.js';
 /**
  * Merge an agent patch over what is already known.
  *
@@ -21,12 +21,18 @@ function mergeAgent(prev, next) {
     const patch = Object.fromEntries(Object.entries(next).filter(([, value]) => value !== undefined));
     return { ...prev, ...patch };
 }
-function upsert(list, item) {
+/**
+ * Replace-or-append by id, immutably. `merge` is how the two kinds of record
+ * differ: barriers and artifacts arrive whole, agents arrive as patches (see
+ * `mergeAgent`), and that is the only difference — so it is a parameter rather
+ * than a second copy of the find-index/clone/splice dance.
+ */
+function upsert(list, item, merge = (prev, next) => ({ ...prev, ...next })) {
     const index = list.findIndex((existing) => existing.id === item.id);
     if (index < 0)
         return [...list, item];
     const next = [...list];
-    next[index] = { ...next[index], ...item };
+    next[index] = merge(next[index], item);
     return next;
 }
 /**
@@ -62,7 +68,6 @@ export class SwarmController {
         if (snapshot)
             this.snapshot(snapshot);
     }
-    tree = $derived(buildSwarmTree(this.agents));
     counts = $derived(summarizeSwarm(this.agents));
     /**
      * Merge a snapshot in.
@@ -113,13 +118,6 @@ export class SwarmController {
         this.seq = -1;
     }
     #mergeAgent(agent) {
-        const index = this.agents.findIndex((existing) => existing.id === agent.id);
-        if (index < 0) {
-            this.agents = [...this.agents, agent];
-            return;
-        }
-        const next = [...this.agents];
-        next[index] = mergeAgent(next[index], agent);
-        this.agents = next;
+        this.agents = upsert(this.agents, agent, mergeAgent);
     }
 }

package/dist/apps/llm-shell/llm-shell.svelte

@@ -27,6 +27,7 @@
 	import Sparkles from '@lucide/svelte/icons/sparkles';
 	import Plus from '@lucide/svelte/icons/plus';
 	import { cn } from '../../utils/index.js';
+	import LlmSwarmBlock from './llm-swarm.svelte';
 	import type { ChatStatus, LlmBlock, LlmConversation, LlmMessage, RunState } from './types.js';
 
 	let {
@@ -277,42 +278,7 @@
 			</AI.Tool.Content>
 		</AI.Tool.Root>
 	{:else if block.kind === 'swarm'}
-		<!-- A delegated run, inline in the turn that started it. The tree keeps the
-		     delegation shape (who asked whom, what is still open); `view="grid"`
-		     turns the same agents into the console layout for a wide pane.
-		     Everything reads off block.swarm, so a live SwarmController streams
-		     straight into it — the app never copies swarm state around. -->
-		{@const swarm = block.swarm}
-		{@const artifactsFor = (agent: AI.Swarm.SwarmAgent) =>
-			(swarm.artifacts ?? []).filter((a) => a.agentId === agent.id)}
-		<AI.Swarm.Root {now} onOpen={onOpenAgent} onCancel={onCancelAgent}>
-			<AI.Swarm.Header title={swarm.plan?.title} status={swarm.plan?.status}>
-				<AI.Swarm.Counts agents={swarm.agents} />
-			</AI.Swarm.Header>
-
-			{#if block.view === 'grid'}
-				<AI.Swarm.Grid agents={swarm.agents} />
-			{:else}
-				<AI.Swarm.Tree agents={swarm.agents} expandable={(agent) => artifactsFor(agent).length > 0}>
-					{#snippet detail(agent)}
-						<AI.Swarm.Artifacts artifacts={artifactsFor(agent)} />
-					{/snippet}
-				</AI.Swarm.Tree>
-			{/if}
-
-			{#if (swarm.barriers ?? []).length > 0}
-				<!-- Fan-in gates last: they are what the branches above are waiting on. -->
-				<div
-					class="flex flex-col gap-(--era-pad-sm) border-t border-divider-faded p-(--era-pad-sm)"
-				>
-					{#each swarm.barriers ?? [] as barrier (barrier.id)}
-						<AI.Swarm.Barrier {barrier} agents={swarm.agents} />
-					{/each}
-				</div>
-			{/if}
-
-			<AI.Swarm.Footer connection={swarm.connection} seq={swarm.seq} />
-		</AI.Swarm.Root>
+		<LlmSwarmBlock swarm={block.swarm} view={block.view} {now} {onOpenAgent} {onCancelAgent} />
 	{:else if block.kind === 'approval'}
 		<AI.Confirmation.Root state={approvalState}>
 			Approve <span class="font-mono text-fg">{block.toolName}</span>? Review the arguments before

package/dist/apps/llm-shell/llm-swarm.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	/**
+	 * The `swarm` block: a delegated run, inline in the turn that started it.
+	 *
+	 * Its own component rather than a branch of llm-shell's blockView, because it
+	 * needs one thing a snippet cannot hold — a $derived index of artifacts by
+	 * agent. Inline, the lookup was a `{@const}` arrow re-created on every render
+	 * and called once per node by the tree's expandable predicate, again by the
+	 * keyboard walk, and again by the detail body: O(agents x artifacts) per event,
+	 * three times over. Here it is one pass per artifact change.
+	 */
+	import * as AI from '../../ai/index.js';
+	import type { LlmSwarm } from './types.js';
+
+	let {
+		swarm,
+		view = 'tree',
+		now = Date.now(),
+		onOpenAgent,
+		onCancelAgent
+	}: {
+		swarm: LlmSwarm;
+		/** `tree` keeps the delegation shape; `grid` is the console layout. */
+		view?: 'tree' | 'grid';
+		now?: number;
+		onOpenAgent?: (agent: AI.Swarm.SwarmAgent) => void;
+		onCancelAgent?: (agent: AI.Swarm.SwarmAgent) => void;
+	} = $props();
+
+	// A plain record, not a Map: it is rebuilt whole by the derived, so it never
+	// needs reactivity of its own (and SvelteMap here would only add proxy cost).
+	// NONE is shared so a miss doesn't allocate a fresh array per lookup per render.
+	const NONE: AI.Swarm.SwarmArtifact[] = [];
+	const byAgent = $derived.by(() => {
+		const index: Record<string, AI.Swarm.SwarmArtifact[]> = {};
+		for (const artifact of swarm.artifacts ?? []) {
+			if (artifact.agentId == null) continue;
+			(index[artifact.agentId] ??= []).push(artifact);
+		}
+		return index;
+	});
+	const artifactsFor = (agent: AI.Swarm.SwarmAgent) => byAgent[agent.id] ?? NONE;
+</script>
+
+<AI.Swarm.Root {now} onOpen={onOpenAgent} onCancel={onCancelAgent}>
+	<AI.Swarm.Header title={swarm.plan?.title} status={swarm.plan?.status}>
+		<AI.Swarm.Counts agents={swarm.agents} />
+	</AI.Swarm.Header>
+
+	{#if view === 'grid'}
+		<AI.Swarm.Grid agents={swarm.agents} />
+	{:else}
+		<AI.Swarm.Tree agents={swarm.agents} expandable={(agent) => artifactsFor(agent).length > 0}>
+			{#snippet detail(agent)}
+				<AI.Swarm.Artifacts artifacts={artifactsFor(agent)} />
+			{/snippet}
+		</AI.Swarm.Tree>
+	{/if}
+
+	<!-- Fan-in gates last: they are what the branches above are waiting on. -->
+	<AI.Swarm.Barriers barriers={swarm.barriers ?? []} agents={swarm.agents} />
+
+	<AI.Swarm.Footer connection={swarm.connection} seq={swarm.seq} error={swarm.error} />
+</AI.Swarm.Root>

package/dist/apps/llm-shell/llm-swarm.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+     * The `swarm` block: a delegated run, inline in the turn that started it.
+     *
+     * Its own component rather than a branch of llm-shell's blockView, because it
+     * needs one thing a snippet cannot hold — a $derived index of artifacts by
+     * agent. Inline, the lookup was a `{@const}` arrow re-created on every render
+     * and called once per node by the tree's expandable predicate, again by the
+     * keyboard walk, and again by the detail body: O(agents x artifacts) per event,
+     * three times over. Here it is one pass per artifact change.
+     */
+import * as AI from '../../ai/index.js';
+import type { LlmSwarm } from './types.js';
+type $$ComponentProps = {
+    swarm: LlmSwarm;
+    /** `tree` keeps the delegation shape; `grid` is the console layout. */
+    view?: 'tree' | 'grid';
+    now?: number;
+    onOpenAgent?: (agent: AI.Swarm.SwarmAgent) => void;
+    onCancelAgent?: (agent: AI.Swarm.SwarmAgent) => void;
+};
+declare const LlmSwarm: import("svelte").Component<$$ComponentProps, {}, "">;
+type LlmSwarm = ReturnType<typeof LlmSwarm>;
+export default LlmSwarm;

package/dist/apps/llm-shell/types.d.ts

@@ -36,6 +36,8 @@ export type LlmSwarm = {
     artifacts?: SwarmArtifact[];
     connection?: SwarmConnection;
     seq?: number;
+    /** Last transport error. A `SwarmController` exposes this under the same name. */
+    error?: string | null;
 };
 /**
  * Everything an assistant turn can contain.

package/dist/apps/notes/editor/bubble-toolbar.svelte

@@ -32,7 +32,8 @@
      it still tracks the surface rather than being a drawn-on line. -->
 <Bar
 	size="md"
-	class="w-max gap-(--era-xxs-inset-md) border border-divider-faded bg-elevated px-(--era-xxs-inset-md) shadow-lg glass-blur"
+	content="xxs"
+	class="w-max border border-divider-faded bg-elevated shadow-lg glass-blur"
 >
 	{#each items as item (item.mark)}
 		{@const Icon = item.icon}

package/dist/apps/notes/notes.svelte

@@ -151,22 +151,24 @@
 >
 	<!-- Sidebar: filter + note list -->
 	<div class="flex w-56 shrink-0 flex-col border-r border-divider-faded">
-		<!-- Default lg bar holding md controls, which is the pairing Bar documents:
-		     (32-24)/2 lands on the bar's own xs-inset-sm padding, so the field sits
-		     concentric. This was md with a chromeless field — compact, but it made
-		     the filter the ONLY input in the library without a field fill. At md a
-		     real field is the same height as the bar and overflows it by the
-		     border. -->
-		<Bar class="shrink-0 rounded-none border-b border-divider-faded">
+		<!-- content="xxs": 24/30/36/48 of chrome around an 18/20/22/26 field and
+		     button, with Bar deriving the two-tier concentric inset. A notes sidebar
+		     is chrome around a list; at the lg/md pairing it was a 32px bar over
+		     24px rows and the chrome outweighed the content. This is the tier pair
+		     term's notes app uses — its hardcoded 3px is what Bar now derives at
+		     dense. The field keeps its fill: xxs is the smallest tier a real field
+		     fits on. -->
+		<Bar size="md" content="xxs" class="shrink-0 rounded-none border-b border-divider-faded">
 			<Input
 				icon={Search}
+				size="xxs"
 				class="min-w-0 flex-1"
 				type="text"
 				placeholder="Filter…"
 				aria-label="Filter notes"
 				bind:value={query}
 			/>
-			<Button icon aria-label="New note" title="New note" onclick={createNote}>
+			<Button icon size="xxs" aria-label="New note" title="New note" onclick={createNote}>
 				<Plus />
 			</Button>
 		</Bar>
@@ -312,9 +314,9 @@
 		{#if selected}
 			<!-- Matches the sidebar's filter bar exactly — the two headers sit side by
 			     side across the top of the app, so they must be the same tier. -->
-			<Bar class="shrink-0 rounded-none border-b border-divider-faded">
+			<Bar size="md" content="xxs" class="shrink-0 rounded-none border-b border-divider-faded">
 				<Popover.Root bind:open={iconPickerOpen}>
-					<Popover.Trigger icon aria-label="Change icon" title="Change icon">
+					<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
 						{#if selected.icon}
 							<span aria-hidden="true">{selected.icon}</span>
 						{:else}
@@ -359,6 +361,7 @@
 
 				<Input
 					reveal
+					size="xxs"
 					class="min-w-0 flex-1"
 					aria-label="Note title"
 					placeholder="Untitled"

package/dist/dev/audit/audits/clipped-glyphs.js

@@ -23,7 +23,7 @@ const INK_RATIO = 1.15;
 export const clippedGlyphs = {
     id: 'typography/clipped-glyphs',
     name: 'Clipping text box is taller than its ink',
-    description: 'An element that clips its overflow must be at least as tall as its font paints (~1.15em), or leading-none slices the ascenders and descenders off its own text.',
+    description: 'An element that clips its overflow must be at least as tall as the ink it holds — ~1.15em under an authored line-height, or its own line box when the height is constrained — or the clip slices the ascenders and descenders off its text.',
     category: 'layout',
     severity: 'error',
     selector: '*',
@@ -36,24 +36,46 @@ export const clippedGlyphs = {
         const s = getComputedStyle(el);
         if (!/hidden|clip|auto|scroll/.test(s.overflowX + s.overflowY))
             return null;
-        // `normal` IS the ink box: the UA sizes the line from the font's own
-        // ascent + descent, so the box cannot be shorter than what the font paints,
-        // whatever ratio that works out to (a serif at 14px lands at 16px = 1.14em,
-        // under the ratio below and perfectly safe). Only an AUTHORED line-height
-        // can starve the box, so only an authored one is measured.
-        if (s.lineHeight === 'normal')
-            return null;
         const fontSize = parseFloat(s.fontSize) || 14;
         const h = el.getBoundingClientRect().height;
         if (h === 0)
             return null;
-        if (h >= fontSize * INK_RATIO)
+        /*
+         * Two ways a clipping box can be too short, and they need different tests.
+         *
+         * An AUTHORED line-height sets the box, so the box is measurable against the
+         * ink: shorter than ~1.15em and the glyphs lose their tails.
+         *
+         * `normal` sets the box from the font's own ascent + descent, so the LINE box
+         * is the ink box by construction and the ratio says nothing (a serif at 14px
+         * lands at 16px = 1.14em, under the ratio and perfectly safe). But the
+         * ELEMENT can still be shorter than that line box — an explicit height, a
+         * flex or grid constraint, a max-height — and then the clip bites exactly as
+         * hard. That case is what scrollHeight reports: content taller than the box
+         * it is being clipped into. An earlier version of this audit bailed on
+         * `normal` outright and so could never fire on era's own `truncate`, which
+         * sets line-height: normal — the exact construct the description names.
+         */
+        const authored = s.lineHeight !== 'normal';
+        const starved = authored ? h < fontSize * INK_RATIO : el.scrollHeight - el.clientHeight > 1;
+        if (!starved)
             return null;
+        const need = authored
+            ? `~${(fontSize * INK_RATIO).toFixed(1)}px`
+            : `${el.scrollHeight}px (its own line box)`;
         const issue = {
             auditId: 'typography/clipped-glyphs',
             element: el,
-            message: `clipping box is ${h.toFixed(1)}px tall for ${fontSize}px text — it needs ~${(fontSize * INK_RATIO).toFixed(1)}px, so the descenders are sliced off ("g" loses its hook). line-height is ${s.lineHeight}; give the clipping element line-height: normal (era's truncate does) or move the clip to a taller row.`,
-            details: { height: h, fontSize, lineHeight: s.lineHeight, text: text.slice(0, 40) }
+            message: `clipping box is ${h.toFixed(1)}px tall for ${fontSize}px text — it needs ${need}, so the ascenders and descenders are sliced off ("g" loses its hook). line-height is ${s.lineHeight}; ${authored
+                ? "give the clipping element line-height: normal (era's truncate does)"
+                : 'the box is constrained shorter than its line box — drop the height'} or move the clip to a taller row.`,
+            details: {
+                height: h,
+                fontSize,
+                lineHeight: s.lineHeight,
+                lineBox: el.scrollHeight,
+                text: text.slice(0, 40)
+            }
         };
         return issue;
     }

package/dist/docs/llms-txt.js

@@ -40,7 +40,7 @@ function orientation(origin) {
         'lg   = 4·sp         bars, top-level containers      32 / 40 / 48 px',
         '```',
         '',
-        'Heights (`--era-h-*`), insets (`--era-inset-*`), radii (`--era-rd-*`), and concentric gaps (`--era-xs-inset-sm`, `--era-xxs-inset-md`, …) are all `calc()` chains off `--era-sp`. Never hard-code pixel values — setting `data-mode` on any ancestor re-derives the whole subtree. Text size is static (14 px) across modes; only the spacing atom moves.',
+        'Heights (`--era-h-*`), insets (`--era-inset-*`), radii (`--era-rd-*`), and concentric gaps (`--era-xs-inset-sm`, `--era-xxs-inset-md`, …) are all `calc()` chains off `--era-sp`. Never hard-code pixel values — setting `data-mode` on any ancestor re-derives the whole subtree. Type is the second density input (12 px at dense, 14 px above); the spacing atom moves with it.',
         '',
         '## Per-component docs',
         '',