svelte-docsmith 0.7.0 → 0.9.0

package/dist/components/changelog/changelog-entry.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { ChangelogRelease } from '../../core/changelog.js';
+
+	const { release }: { release: ChangelogRelease } = $props();
+
+	const formatted = $derived(
+		release.date
+			? new Date(release.date).toLocaleDateString('en-US', {
+					year: 'numeric',
+					month: 'long',
+					day: 'numeric'
+				})
+			: undefined
+	);
+</script>
+
+<!-- The version is the anchor the feed links to, so it carries the id. -->
+<section id={release.version} class="scroll-mt-24">
+	<div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+		<h2 class="text-2xl font-semibold tracking-tight">
+			{#if release.path}
+				<a href={release.path} class="hover:text-primary transition-colors">{release.version}</a>
+			{:else}
+				{release.version}
+			{/if}
+		</h2>
+		{#if formatted}
+			<time datetime={release.date} class="text-muted-foreground text-sm">{formatted}</time>
+		{/if}
+	</div>
+
+	{#each release.groups as group (group.kind)}
+		<h3 class="text-muted-foreground mt-6 text-xs font-semibold tracking-wide uppercase">
+			{group.kind}
+		</h3>
+		<ul class="mt-3 space-y-4">
+			{#each group.items as item (item)}
+				<li class="border-border/70 border-l-2 pl-4">
+					<!-- Rendered at build time from your own repository's changelog. -->
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					<div class="changelog-prose">{@html item}</div>
+				</li>
+			{/each}
+		</ul>
+	{/each}
+</section>
+
+<style>
+	/* The entries arrive as HTML fragments rather than flowing through the
+	   markdown layout's prose styles, so they need their own small set. */
+	.changelog-prose :global(p) {
+		margin: 0 0 0.75rem;
+		line-height: 1.65;
+	}
+	.changelog-prose :global(p:last-child) {
+		margin-bottom: 0;
+	}
+	.changelog-prose :global(code) {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.85em;
+		padding: 0.05em 0.3em;
+		border-radius: 0.3rem;
+		background: color-mix(in oklch, var(--muted) 60%, transparent);
+	}
+	.changelog-prose :global(a) {
+		color: var(--primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.changelog-prose :global(ul) {
+		margin: 0.5rem 0 0.75rem;
+		padding-left: 1.1rem;
+		list-style: disc;
+	}
+	.changelog-prose :global(li) {
+		margin: 0.25rem 0;
+	}
+	.changelog-prose :global(pre) {
+		margin: 0.75rem 0;
+		padding: 0.75rem 1rem;
+		border-radius: var(--radius, 0.5rem);
+		background: var(--muted);
+		overflow-x: auto;
+		font-size: 0.85em;
+	}
+	.changelog-prose :global(pre code) {
+		background: none;
+		padding: 0;
+	}
+</style>

package/dist/components/changelog/changelog-entry.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ChangelogRelease } from '../../core/changelog.js';
+type $$ComponentProps = {
+    release: ChangelogRelease;
+};
+declare const ChangelogEntry: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChangelogEntry = ReturnType<typeof ChangelogEntry>;
+export default ChangelogEntry;

package/dist/components/changelog/changelog.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { ChangelogRelease } from '../../core/changelog.js';
+	import ChangelogEntry from './changelog-entry.svelte';
+
+	const {
+		releases,
+		title = 'Changelog',
+		description,
+		feed = '/changelog.xml'
+	}: {
+		/** Releases from the generated `svelte-docsmith/changelog` index. */
+		releases: ChangelogRelease[];
+		/** Page heading. */
+		title?: string;
+		/** Line below the heading. */
+		description?: string;
+		/** Path to the Atom feed, or `false` to hide the subscribe link. */
+		feed?: string | false;
+	} = $props();
+</script>
+
+<div class="mx-auto max-w-3xl px-4 py-16 md:px-6 lg:py-20">
+	<header class="mb-12">
+		<h1 class="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{title}</h1>
+		{#if description}
+			<p class="text-muted-foreground mt-4 text-lg leading-relaxed text-pretty">{description}</p>
+		{/if}
+		{#if feed}
+			<a
+				href={feed}
+				class="text-muted-foreground hover:text-foreground mt-4 inline-flex items-center gap-2 text-sm transition-colors"
+			>
+				<svg viewBox="0 0 24 24" fill="currentColor" class="size-3.5" aria-hidden="true">
+					<path
+						d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16M6 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					/>
+				</svg>
+				Subscribe via Atom
+			</a>
+		{/if}
+	</header>
+
+	{#if releases.length === 0}
+		<p class="text-muted-foreground">No releases yet.</p>
+	{:else}
+		<div class="space-y-14">
+			{#each releases as release (release.version)}
+				<ChangelogEntry {release} />
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { ChangelogRelease } from '../../core/changelog.js';
+type $$ComponentProps = {
+    /** Releases from the generated `svelte-docsmith/changelog` index. */
+    releases: ChangelogRelease[];
+    /** Page heading. */
+    title?: string;
+    /** Line below the heading. */
+    description?: string;
+    /** Path to the Atom feed, or `false` to hide the subscribe link. */
+    feed?: string | false;
+};
+declare const Changelog: import("svelte").Component<$$ComponentProps, {}, "">;
+type Changelog = ReturnType<typeof Changelog>;
+export default Changelog;

package/dist/components/chrome/announcement-bar.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import X from '@lucide/svelte/icons/x';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import type { DocsmithAnnouncement } from '../../core/index.js';
+
+	const { announcement }: { announcement: DocsmithAnnouncement } = $props();
+
+	const dismissible = $derived(announcement.dismissible ?? true);
+	const storageKey = $derived('docsmith-announcement:' + (announcement.id ?? announcement.text));
+
+	// Rendered visible on the server; the dismissal is read after mount so the
+	// first client render matches the server and there's no hydration mismatch.
+	// The blocking <head> script below is what actually prevents the flash on a
+	// reload — this effect just removes the (already-hidden) element from the DOM.
+	let dismissed = $state(false);
+	$effect(() => {
+		if (!dismissible) return;
+		try {
+			dismissed = localStorage.getItem(storageKey) === '1';
+		} catch {
+			// storage unavailable; treat as not dismissed
+		}
+	});
+
+	function dismiss() {
+		dismissed = true;
+		if (BROWSER) {
+			try {
+				localStorage.setItem(storageKey, '1');
+			} catch {
+				// storage unavailable; dismissal holds for this session only
+			}
+		}
+	}
+
+	// A blocking snippet run in <head> before first paint: if this bar was
+	// already dismissed, hide it via an injected style so it is never painted
+	// and can't shift the layout when hydration removes it. Targets a stable
+	// class (not the scoped one) so it also works in dev, where component CSS is
+	// injected after paint. localStorage is read here because it isn't available
+	// during SSR.
+	const preventFlashScript = $derived(
+		`(function(){try{if(localStorage.getItem(${JSON.stringify(storageKey)})==="1"){` +
+			`var s=document.createElement("style");` +
+			`s.textContent=".docsmith-announcement{display:none!important}";` +
+			`document.head.appendChild(s)}}catch(e){}})()`
+	);
+</script>
+
+<svelte:head>
+	{#if dismissible}
+		<!-- The `<\/script>` escape keeps the Svelte parser from ending the tag early. -->
+		<!-- eslint-disable-next-line svelte/no-at-html-tags, no-useless-escape -->
+		{@html `<script>${preventFlashScript}<\/script>`}
+	{/if}
+</svelte:head>
+
+{#if !dismissed}
+	<div class="announcement docsmith-announcement" role="region" aria-label="Announcement">
+		{#if announcement.href}
+			<a
+				class="announcement-body announcement-link"
+				href={announcement.href}
+				target={announcement.external ? '_blank' : undefined}
+				rel={announcement.external ? 'noopener noreferrer' : undefined}
+			>
+				{#if announcement.tag}<span class="announcement-tag">{announcement.tag}</span>{/if}
+				<span class="announcement-text">{announcement.text}</span>
+				<ArrowRight class="announcement-arrow size-3.5" aria-hidden="true" />
+			</a>
+		{:else}
+			<div class="announcement-body">
+				{#if announcement.tag}<span class="announcement-tag">{announcement.tag}</span>{/if}
+				<span class="announcement-text">{announcement.text}</span>
+			</div>
+		{/if}
+
+		{#if dismissible}
+			<button
+				type="button"
+				class="announcement-dismiss"
+				onclick={dismiss}
+				aria-label="Dismiss announcement"
+			>
+				<X class="size-3.5" aria-hidden="true" />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	/* A thin bar above the header. The warm accent is spent on a solid tag, not
+	   a full-width wash, so it reads as a deliberate mark; text stays on
+	   --foreground for AA contrast. */
+	.announcement {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 2.5rem;
+		padding: 0.4rem 2.75rem;
+		background: color-mix(in oklch, var(--primary) 6%, var(--background));
+		border-bottom: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border));
+		color: var(--foreground);
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		text-align: center;
+	}
+
+	.announcement-body {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: 0.3rem 0.55rem;
+		min-width: 0;
+		color: var(--foreground);
+		text-decoration: none;
+	}
+
+	/* Solid brand pill — the sanctioned primary-foreground-on-primary pairing, so
+	   it stays legible in both themes and matches the props-table "required" pill. */
+	.announcement-tag {
+		flex-shrink: 0;
+		background: var(--primary);
+		color: var(--primary-foreground);
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.625rem;
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		padding: 0.15rem 0.5rem;
+		border-radius: 9999px;
+		line-height: 1.5;
+	}
+
+	.announcement-text {
+		color: var(--foreground);
+	}
+
+	.announcement-link :global(.announcement-arrow) {
+		flex-shrink: 0;
+		color: var(--primary);
+		transition: transform 0.2s ease-out;
+	}
+	.announcement-link:hover :global(.announcement-arrow) {
+		transform: translateX(2px);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.announcement-link :global(.announcement-arrow) {
+			transition: none;
+		}
+	}
+
+	/* Dismiss sits at the trailing edge, inside the bar's padding. */
+	.announcement-dismiss {
+		position: absolute;
+		top: 50%;
+		right: 0.5rem;
+		transform: translateY(-50%);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.35rem;
+		border: 0;
+		background: transparent;
+		border-radius: 0.375rem;
+		color: var(--muted-foreground);
+		cursor: pointer;
+		transition:
+			color 0.15s ease-out,
+			background-color 0.15s ease-out;
+	}
+	.announcement-dismiss:hover {
+		color: var(--foreground);
+		background: color-mix(in oklch, var(--foreground) 8%, transparent);
+	}
+	.announcement-dismiss:focus-visible {
+		outline: 2px solid var(--primary);
+		outline-offset: 1px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.announcement-dismiss {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/chrome/announcement-bar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DocsmithAnnouncement } from '../../core/index.js';
+type $$ComponentProps = {
+    announcement: DocsmithAnnouncement;
+};
+declare const AnnouncementBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnnouncementBar = ReturnType<typeof AnnouncementBar>;
+export default AnnouncementBar;

package/dist/components/docs/mermaid.svelte

@@ -0,0 +1,213 @@
+<script module lang="ts">
+	type Mermaid = (typeof import('mermaid'))['default'];
+
+	// One shared import; the bundler dedupes the chunk, this dedupes the promise.
+	let loaded: Promise<Mermaid> | undefined;
+	const loadMermaid = () => (loaded ??= import('mermaid').then((m) => m.default));
+
+	// `mermaid.initialize()` writes global config and `render()` is async, so two
+	// diagrams rendering concurrently can apply each other's theme — most visibly
+	// when one falls back to a built-in theme and reconfigures for everyone. Every
+	// initialize/render pair runs through this queue so they never interleave.
+	let chain: Promise<unknown> = Promise.resolve();
+
+	function serialize<T>(job: () => Promise<T>): Promise<T> {
+		const result = chain.then(job, job);
+		// Swallow rejections on the chain itself so one bad diagram doesn't stall
+		// the queue for the rest of the page.
+		chain = result.catch(() => {});
+		return result;
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	// Rendered from a ```mermaid code fence: the preprocessor emits a lazy
+	// `import('svelte-docsmith/mermaid')` so `mermaid` (an optional peer dep) is
+	// only pulled into pages that actually contain a diagram. Rendering is
+	// client-side — mermaid needs a DOM — with a `<pre>` source fallback.
+	const { code }: { code: string } = $props();
+
+	// Graph ids must be unique among elements currently in the document: mermaid
+	// clears whatever already carries the id it's given, so a shared id silently
+	// wipes another diagram that's already on the page. `$props.id()` is unique per
+	// instance and stays unique even if two copies of this module end up loaded.
+	const uid = $props.id();
+	// Bumped per render, because the theme toggle re-renders while this instance's
+	// previous SVG is still mounted — reusing the id would delete it mid-swap.
+	let renders = 0;
+
+	let svg = $state('');
+	let failed = $state(false);
+	// Whether the last render targeted dark mode, so we only re-render when the
+	// site theme actually flips (not on every unrelated <html> class change).
+	let lastDark: boolean | undefined;
+
+	// Reused canvas for normalizing color tokens (see resolveColor); `null` once
+	// we've determined this browser gives us no 2d context to work with.
+	let colorCanvas: CanvasRenderingContext2D | null | undefined;
+
+	// Assigning an unparseable colour to `fillStyle` is silently ignored rather
+	// than throwing, so we set this first and check whether it survived. Any
+	// colour works as long as it's an unlikely design token, since an unchanged
+	// `fillStyle` is what tells us the assignment was rejected.
+	const SENTINEL = '#010203';
+
+	// Resolve a CSS color to a concrete `#rrggbb` string mermaid's color math
+	// (khroma) can parse. Our design tokens are `oklch(...)`, which khroma can't
+	// read. Reading `fillStyle` back is not enough to convert them: a browser
+	// serializes a wide-gamut colour unchanged, so Chrome hands back the same
+	// `oklch(...)` string it was given. Painting a pixel and reading its bytes
+	// forces the conversion to sRGB. Returns null when the value can't be
+	// resolved, which also covers an engine that doesn't understand oklch at all.
+	function resolveColor(value: string): string | null {
+		colorCanvas ??= document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+		const ctx = colorCanvas;
+		const input = value.trim();
+		if (!ctx || !input) return null;
+		ctx.fillStyle = SENTINEL;
+		ctx.fillStyle = input;
+		if (ctx.fillStyle === SENTINEL && input.toLowerCase() !== SENTINEL) return null;
+		ctx.clearRect(0, 0, 1, 1);
+		ctx.fillRect(0, 0, 1, 1);
+		const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+		return `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+	}
+
+	// Map the site's design tokens onto mermaid's documented theme variables, so a
+	// diagram reads as part of the site (its palette, borders, text) instead of
+	// mermaid's stock look. Read fresh each render so it follows the light/dark
+	// toggle. Returns null when the tokens can't be resolved — the caller then
+	// falls back to a built-in theme rather than shipping broken colors.
+	function themeVariables(dark: boolean): Record<string, string | boolean> | null {
+		const root = getComputedStyle(document.documentElement);
+		const background = resolveColor(root.getPropertyValue('--background'));
+		const foreground = resolveColor(root.getPropertyValue('--foreground'));
+		const muted = resolveColor(root.getPropertyValue('--muted'));
+		const mutedForeground = resolveColor(root.getPropertyValue('--muted-foreground'));
+		const border = resolveColor(root.getPropertyValue('--border'));
+		const accent = resolveColor(root.getPropertyValue('--accent'));
+		const card = resolveColor(root.getPropertyValue('--card'));
+		if (!background || !foreground || !muted || !mutedForeground || !border || !accent || !card) {
+			return null;
+		}
+		// Only mermaid's documented base variables — it derives node/cluster/edge
+		// colors from these, which keeps us off its more fragile internals.
+		return {
+			darkMode: dark,
+			background,
+			primaryColor: muted, // node fill
+			primaryTextColor: foreground,
+			primaryBorderColor: border,
+			lineColor: mutedForeground, // edges/arrows
+			secondaryColor: accent,
+			tertiaryColor: card
+		};
+	}
+
+	async function render() {
+		let mermaid: Mermaid;
+		try {
+			mermaid = await loadMermaid();
+		} catch {
+			// `mermaid` isn't installed — fall back to the source.
+			failed = true;
+			return;
+		}
+		const dark = document.documentElement.classList.contains('dark');
+		lastDark = dark;
+		const vars = themeVariables(dark);
+		// Try the token-themed `base` render first; if mermaid's color math rejects
+		// anything, retry with a built-in theme so a valid diagram never silently
+		// disappears. Only a genuine syntax error reaches the `<pre>` fallback.
+		const attempts = [
+			vars && { theme: 'base' as const, themeVariables: vars },
+			{ theme: dark ? ('dark' as const) : ('default' as const) }
+		];
+		for (const attempt of attempts) {
+			if (!attempt) continue;
+			try {
+				// Configure and render as one unit so a concurrent diagram can't
+				// re-initialize mermaid between the two calls.
+				const result = await serialize(() => {
+					mermaid.initialize({
+						startOnLoad: false,
+						securityLevel: 'strict',
+						fontFamily: 'inherit',
+						...attempt
+					});
+					return mermaid.render(`${uid}-${(renders += 1)}`, code);
+				});
+				svg = result.svg;
+				failed = false;
+				return;
+			} catch {
+				// Try the next (safer) config.
+			}
+		}
+		// Bad diagram syntax — fall back to source.
+		failed = true;
+	}
+
+	onMount(() => {
+		render();
+		// Re-render when the theme toggles so the diagram follows light/dark.
+		const observer = new MutationObserver(() => {
+			if (document.documentElement.classList.contains('dark') !== lastDark) render();
+		});
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+		return () => observer.disconnect();
+	});
+</script>
+
+{#if failed}
+	<pre class="docsmith-mermaid-fallback not-prose"><code>{code}</code></pre>
+{:else if svg}
+	<!-- mermaid sanitizes its own output (securityLevel: strict) -->
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	<figure class="docsmith-mermaid not-prose">{@html svg}</figure>
+{:else}
+	<!-- Shares the global .docsmith-mermaid-skeleton with the server-rendered
+	     placeholder, so swapping to the diagram doesn't change the height. -->
+	<div class="docsmith-mermaid-skeleton not-prose" role="status" aria-label="Loading diagram"></div>
+{/if}
+
+<style>
+	/* The loading skeleton is global (theme.css), shared with the server-rendered
+	   placeholder. Here we only style the resolved diagram and the fallback. */
+	.docsmith-mermaid {
+		margin: 1.5rem 0;
+		display: flex;
+		justify-content: center;
+		animation: docsmith-mermaid-in 0.25s ease-out;
+	}
+	.docsmith-mermaid :global(svg) {
+		max-width: 100%;
+		height: auto;
+	}
+	@keyframes docsmith-mermaid-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.docsmith-mermaid {
+			animation: none;
+		}
+	}
+
+	.docsmith-mermaid-fallback {
+		margin: 1.5rem 0;
+		padding: 1rem;
+		border-radius: var(--radius, 0.75rem);
+		border: 1px solid var(--border);
+		background: var(--muted);
+		overflow-x: auto;
+		font-size: 0.85rem;
+		line-height: 1.5;
+	}
+</style>

package/dist/components/docs/mermaid.svelte.d.ts

@@ -0,0 +1,6 @@
+type Mermaid = (typeof import('mermaid'))['default'];
+type $$ComponentProps = {
+    code: string;
+};
+declare const Mermaid: import("svelte").Component<$$ComponentProps, {}, "">;
+export default Mermaid;

package/dist/components/docs/tabs-sync.svelte.d.ts

@@ -0,0 +1,10 @@
+/** The current selection for a sync key, or `undefined` if none is stored. */
+export declare function syncedValue(key: string): string | undefined;
+/** Record a selection for a sync key and persist it. Client-only. */
+export declare function setSyncedValue(key: string, value: string): void;
+/**
+ * Load a key's persisted selection into the reactive store, once, on the
+ * client. Called from an effect (after hydration) so the first client render
+ * still matches the server's default and there is no hydration mismatch.
+ */
+export declare function hydrateSyncedValue(key: string): void;

package/dist/components/docs/tabs-sync.svelte.js

@@ -0,0 +1,59 @@
+import { BROWSER } from 'esm-env';
+// Cross-instance tab sync. Every <Tabs syncKey="x"> reads and writes the same
+// entry here, so choosing "pnpm" in one code block selects it in every block
+// with that key, and the choice survives reloads and navigation.
+//
+// The store is a module singleton. It is only ever written on the client (all
+// writers below are BROWSER-guarded), so on the server it stays empty and each
+// request falls back to the default tab — no cross-request state leakage.
+const PREFIX = 'docsmith-tabs:';
+const selections = $state({});
+let listening = false;
+function listenForOtherWindows() {
+    if (listening || !BROWSER)
+        return;
+    listening = true;
+    // Mirror choices made in other tabs/windows of the same site.
+    window.addEventListener('storage', (event) => {
+        if (event.key?.startsWith(PREFIX) && event.newValue !== null) {
+            selections[event.key.slice(PREFIX.length)] = event.newValue;
+        }
+    });
+}
+/** The current selection for a sync key, or `undefined` if none is stored. */
+export function syncedValue(key) {
+    return selections[key];
+}
+/** Record a selection for a sync key and persist it. Client-only. */
+export function setSyncedValue(key, value) {
+    if (!BROWSER || selections[key] === value)
+        return;
+    selections[key] = value;
+    try {
+        localStorage.setItem(PREFIX + key, value);
+    }
+    catch {
+        // Storage can be unavailable (private mode, quota); sync stays in-memory
+        // for this session rather than throwing.
+    }
+}
+/**
+ * Load a key's persisted selection into the reactive store, once, on the
+ * client. Called from an effect (after hydration) so the first client render
+ * still matches the server's default and there is no hydration mismatch.
+ */
+export function hydrateSyncedValue(key) {
+    if (!BROWSER)
+        return;
+    listenForOtherWindows();
+    if (key in selections)
+        return;
+    try {
+        const stored = localStorage.getItem(PREFIX + key);
+        if (stored !== null)
+            selections[key] = stored;
+    }
+    catch {
+        // ignore unreadable storage
+    }
+}