@vit-foundation/ui 0.1.0

package/dist/components/ui/Field.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FieldConstraint } from '../../content/types.js';
+
+	/** Attributes the control must spread (`{...attrs}`) to stay wired. */
+	interface ControlAttrs {
+		id: string;
+		'aria-describedby': string | undefined;
+		maxlength: number | undefined;
+		minlength: number | undefined;
+	}
+
+	/**
+	 * The message comes from the validation that failed, not from the caller.
+	 * Every call site used to hand Field the sentence as a prop while issues()
+	 * was read as a boolean, so the constraint and the sentence describing it
+	 * lived in different files and could never disagree loudly. The host app's schemas own
+	 * both now (the foundation site: `boundedText` in its schema layer).
+	 *
+	 * The numbers travel the same way for the same reason. They used to be
+	 * imported by each form and spelled out as a `maxlength` beside the input,
+	 * which is how the password and email bounds came to be enforced on the
+	 * server and stated nowhere in the markup: forgetting an attribute breaks
+	 * nothing visible and no test. A field that declares its constraint here
+	 * cannot render a control without it.
+	 *
+	 * `constraint` is required and explicitly nullable rather than optional,
+	 * because optional is what let the hole reopen. The round that moved the
+	 * numbers here counted eleven bounded fields and shipped the twelfth — the
+	 * magic-link email — with no bound stated in the browser, and nothing could
+	 * fail: an omitted prop and a control that genuinely has no length were the
+	 * same value. They are different values now. A control with no length says
+	 * `null` and says so on purpose; a bounded field that says nothing does not
+	 * compile.
+	 */
+	interface Props {
+		/** Control id; the error paragraph gets `${id}-error`. */
+		id: string;
+		label: string;
+		/** The remote form field; its first issue is what gets rendered. */
+		field: { issues(): Array<{ message: string }> | undefined };
+		/**
+		 * The schema's bounds for this field, become the control's length
+		 * attributes. `null` for controls with no length: checkboxes, selects.
+		 */
+		constraint: FieldConstraint | null;
+		/** Render the label visually hidden (surrounding context already labels it). */
+		hideLabel?: boolean;
+		/** The input/textarea/select, spreading the given attrs. */
+		children: Snippet<[ControlAttrs]>;
+	}
+
+	let { id, label, field, constraint, hideLabel = false, children }: Props = $props();
+
+	const errorMessage = $derived(field.issues()?.[0]?.message);
+	const showError = $derived(errorMessage !== undefined);
+</script>
+
+<div class="field">
+	<label class:visually-hidden={hideLabel} for={id}>{label}</label>
+	{@render children({
+		id,
+		'aria-describedby': showError ? `${id}-error` : undefined,
+		maxlength: constraint?.max,
+		minlength: constraint?.min
+	})}
+	{#if showError}
+		<p class="field-error" id="{id}-error">{errorMessage}</p>
+	{/if}
+</div>
+
+<style>
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+	}
+
+	label {
+		font-weight: 600;
+		font-size: var(--text-sm);
+	}
+
+	.field-error {
+		color: var(--series-8);
+		font-size: var(--text-sm);
+		margin: 0;
+	}
+</style>

package/dist/components/ui/Field.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { FieldConstraint } from '../../content/types.js';
+/** Attributes the control must spread (`{...attrs}`) to stay wired. */
+interface ControlAttrs {
+    id: string;
+    'aria-describedby': string | undefined;
+    maxlength: number | undefined;
+    minlength: number | undefined;
+}
+/**
+ * The message comes from the validation that failed, not from the caller.
+ * Every call site used to hand Field the sentence as a prop while issues()
+ * was read as a boolean, so the constraint and the sentence describing it
+ * lived in different files and could never disagree loudly. The host app's schemas own
+ * both now (the foundation site: `boundedText` in its schema layer).
+ *
+ * The numbers travel the same way for the same reason. They used to be
+ * imported by each form and spelled out as a `maxlength` beside the input,
+ * which is how the password and email bounds came to be enforced on the
+ * server and stated nowhere in the markup: forgetting an attribute breaks
+ * nothing visible and no test. A field that declares its constraint here
+ * cannot render a control without it.
+ *
+ * `constraint` is required and explicitly nullable rather than optional,
+ * because optional is what let the hole reopen. The round that moved the
+ * numbers here counted eleven bounded fields and shipped the twelfth — the
+ * magic-link email — with no bound stated in the browser, and nothing could
+ * fail: an omitted prop and a control that genuinely has no length were the
+ * same value. They are different values now. A control with no length says
+ * `null` and says so on purpose; a bounded field that says nothing does not
+ * compile.
+ */
+interface Props {
+    /** Control id; the error paragraph gets `${id}-error`. */
+    id: string;
+    label: string;
+    /** The remote form field; its first issue is what gets rendered. */
+    field: {
+        issues(): Array<{
+            message: string;
+        }> | undefined;
+    };
+    /**
+     * The schema's bounds for this field, become the control's length
+     * attributes. `null` for controls with no length: checkboxes, selects.
+     */
+    constraint: FieldConstraint | null;
+    /** Render the label visually hidden (surrounding context already labels it). */
+    hideLabel?: boolean;
+    /** The input/textarea/select, spreading the given attrs. */
+    children: Snippet<[ControlAttrs]>;
+}
+declare const Field: import("svelte").Component<Props, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/ui/FilterChips.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import GhostButton from './GhostButton.svelte';
+
+	interface Chip {
+		value: string;
+		label: string;
+	}
+
+	interface Props {
+		chips: Chip[];
+		/** Currently selected chip value; null = none selected. */
+		selected: string | null;
+		label: string;
+		/** Called with the toggled value, or null when the active chip is unselected. */
+		onchange: (value: string | null) => void;
+	}
+
+	let { chips, selected, label, onchange }: Props = $props();
+
+	function toggle(value: string): void {
+		onchange(selected === value ? null : value);
+	}
+</script>
+
+<div class="chips" role="group" aria-label={label}>
+	{#each chips as chip (chip.value)}
+		<GhostButton
+			variant="chip"
+			aria-pressed={selected === chip.value}
+			onclick={() => toggle(chip.value)}
+		>
+			{chip.label}
+		</GhostButton>
+	{/each}
+</div>
+
+<style>
+	.chips {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-2);
+	}
+</style>

package/dist/components/ui/FilterChips.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Chip {
+    value: string;
+    label: string;
+}
+interface Props {
+    chips: Chip[];
+    /** Currently selected chip value; null = none selected. */
+    selected: string | null;
+    label: string;
+    /** Called with the toggled value, or null when the active chip is unselected. */
+    onchange: (value: string | null) => void;
+}
+declare const FilterChips: import("svelte").Component<Props, {}, "">;
+type FilterChips = ReturnType<typeof FilterChips>;
+export default FilterChips;

package/dist/components/ui/FormErrorFeedback.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" generics="ExtraReason extends string = never">
+	import { getUiConfig } from '../../config/context.js';
+	import type { FormFailReason } from '../../content/types.js';
+	import FormFeedback from './FormFeedback.svelte';
+
+	interface Props {
+		/** The remote form's result; renders nothing unless it's a failure. */
+		result: { ok: boolean; reason?: FormFailReason | ExtraReason } | undefined | null;
+		/** Per-reason overrides; unlisted reasons use the shared form_error_* copy. */
+		messages?: Partial<Record<FormFailReason | ExtraReason, string>>;
+	}
+
+	let { result, messages = {} }: Props = $props();
+
+	const config = getUiConfig();
+
+	/**
+	 * Exhaustive over the shared reasons, minus 'error' which is the fallback
+	 * itself. Adding a member to FormFailReason fails the build here instead of
+	 * silently rendering the generic message.
+	 */
+	const GENERIC = $derived<Record<Exclude<FormFailReason, 'error'>, () => string>>({
+		rateLimited: config.messages.form_error_rateLimited,
+		unauthenticated: config.messages.form_error_unauthenticated,
+		forbidden: config.messages.form_error_forbidden,
+		unavailable: config.messages.form_error_unavailable
+	});
+
+	/**
+	 * Own-property lookups on both records, which is what makes the rule this
+	 * module documents — an unlisted reason gets the shared copy — actually
+	 * hold. `messages[reason]` returns a truthy *inherited* member for
+	 * 'constructor', 'toString' and '__proto__', and `reason in GENERIC` is true
+	 * for all three, so each rendered a prototype member where a sentence
+	 * belongs: "function Object() { [native code] }" in place of an error.
+	 *
+	 * Not reachable today — every reason the server produces is a constant from
+	 * a closed set — so this is not a guard against an attacker. It is the
+	 * difference between the fallback being documented and it being true.
+	 */
+	function messageFor(reason: FormFailReason | ExtraReason | undefined): string {
+		if (reason) {
+			const override = Object.hasOwn(messages, reason) ? messages[reason] : undefined;
+			if (override) return override;
+			if (Object.hasOwn(GENERIC, reason)) {
+				return GENERIC[reason as Exclude<FormFailReason, 'error'>]();
+			}
+		}
+		return config.messages.form_error_generic();
+	}
+</script>
+
+{#if result && !result.ok}
+	<FormFeedback kind="error">{messageFor(result.reason)}</FormFeedback>
+{/if}

package/dist/components/ui/FormErrorFeedback.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { FormFailReason } from '../../content/types.js';
+declare function $$render<ExtraReason extends string = never>(): {
+    props: {
+        /** The remote form's result; renders nothing unless it's a failure. */
+        result: {
+            ok: boolean;
+            reason?: FormFailReason | ExtraReason;
+        } | undefined | null;
+        /** Per-reason overrides; unlisted reasons use the shared form_error_* copy. */
+        messages?: Partial<Record<FormFailReason | ExtraReason, string>>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<ExtraReason extends string = never> {
+    props(): ReturnType<typeof $$render<ExtraReason>>['props'];
+    events(): ReturnType<typeof $$render<ExtraReason>>['events'];
+    slots(): ReturnType<typeof $$render<ExtraReason>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <ExtraReason extends string = never>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<ExtraReason>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<ExtraReason>['props']>, ReturnType<__sveltets_Render<ExtraReason>['events']>, ReturnType<__sveltets_Render<ExtraReason>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<ExtraReason>['bindings']>;
+    } & ReturnType<__sveltets_Render<ExtraReason>['exports']>;
+    <ExtraReason extends string = never>(internal: unknown, props: ReturnType<__sveltets_Render<ExtraReason>['props']> & {}): ReturnType<__sveltets_Render<ExtraReason>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FormErrorFeedback: $$IsomorphicComponent;
+type FormErrorFeedback<ExtraReason extends string = never> = InstanceType<typeof FormErrorFeedback<ExtraReason>>;
+export default FormErrorFeedback;

package/dist/components/ui/FormFeedback.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * The outcome of a submission, and the one owner of where focus goes when
+	 * that outcome replaces the form.
+	 *
+	 * Every form that succeeds swaps its whole `<form>` out for this, which
+	 * destroys the submit button the reader had just activated: focus falls back
+	 * to `<body>`, so the next Tab restarts at the top of the document with no
+	 * sign the submission worked. And because this element is *inserted* with
+	 * its text already in place rather than being present and then updated, a
+	 * polite `role="status"` is announced unreliably — the two together can
+	 * leave a screen-reader user with no confirmation at all.
+	 *
+	 * Moving focus here settles both: the message is read on focus, and the
+	 * reader continues from the confirmation instead of from nowhere.
+	 *
+	 * Only on success. An error leaves the form standing — and ContactForm
+	 * renders one straight from live preflight issues — so focusing an error
+	 * would take the cursor out of the field the reader is still typing in.
+	 * `role="alert"` is assertive and is announced on insertion anyway; it is
+	 * the polite `role="status"` that needs the focus move to be heard.
+	 */
+	interface Props {
+		/** success renders role="status"; error renders role="alert". */
+		kind: 'success' | 'error';
+		children: Snippet;
+	}
+
+	let { kind, children }: Props = $props();
+
+	const isSuccess = $derived(kind === 'success');
+
+	let node = $state<HTMLParagraphElement | null>(null);
+
+	$effect(() => {
+		if (isSuccess) node?.focus();
+	});
+</script>
+
+<p bind:this={node} class="feedback {kind}" role={isSuccess ? 'status' : 'alert'} tabindex="-1">
+	{@render children()}
+</p>
+
+<style>
+	.feedback {
+		font-weight: 600;
+		margin: 0;
+	}
+
+	/* Focused programmatically, never by tabbing, so the ring would only ever
+	   confuse: it is a message, not a control. */
+	.feedback:focus {
+		outline: none;
+	}
+
+	.success {
+		color: var(--color-brand);
+	}
+
+	.error {
+		color: var(--series-8);
+	}
+</style>

package/dist/components/ui/FormFeedback.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+/**
+ * The outcome of a submission, and the one owner of where focus goes when
+ * that outcome replaces the form.
+ *
+ * Every form that succeeds swaps its whole `<form>` out for this, which
+ * destroys the submit button the reader had just activated: focus falls back
+ * to `<body>`, so the next Tab restarts at the top of the document with no
+ * sign the submission worked. And because this element is *inserted* with
+ * its text already in place rather than being present and then updated, a
+ * polite `role="status"` is announced unreliably — the two together can
+ * leave a screen-reader user with no confirmation at all.
+ *
+ * Moving focus here settles both: the message is read on focus, and the
+ * reader continues from the confirmation instead of from nowhere.
+ *
+ * Only on success. An error leaves the form standing — and ContactForm
+ * renders one straight from live preflight issues — so focusing an error
+ * would take the cursor out of the field the reader is still typing in.
+ * `role="alert"` is assertive and is announced on insertion anyway; it is
+ * the polite `role="status"` that needs the focus move to be heard.
+ */
+interface Props {
+    /** success renders role="status"; error renders role="alert". */
+    kind: 'success' | 'error';
+    children: Snippet;
+}
+declare const FormFeedback: import("svelte").Component<Props, {}, "">;
+type FormFeedback = ReturnType<typeof FormFeedback>;
+export default FormFeedback;

package/dist/components/ui/FormResultSlot.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import FormErrorFeedback from './FormErrorFeedback.svelte';
+	import FormFeedback from './FormFeedback.svelte';
+
+	/**
+	 * A form's outcome in one slot: the success message announced with
+	 * role="status", any failure rendered by FormErrorFeedback with role="alert".
+	 * Use it wherever a form stays on screen after submitting; forms that
+	 * replace themselves on success (contact, signup, magic link) branch in
+	 * their own markup, because what changes there is the whole form, not the
+	 * message.
+	 *
+	 * No per-reason copy passes through here. It used to take a `messages`
+	 * record and hand it on unread; all three render sites omitted it, and every
+	 * `messages` in the app goes to FormErrorFeedback directly — which is where
+	 * a form needing per-reason copy still reaches, and what the two forms that
+	 * need it already do.
+	 */
+	interface Props {
+		/** The remote form's result; nothing renders until there is one. */
+		result: { ok: boolean; reason?: string } | undefined | null;
+		/** Announced on success. */
+		successMessage: string;
+	}
+
+	let { result, successMessage }: Props = $props();
+</script>
+
+{#if result?.ok}
+	<FormFeedback kind="success">{successMessage}</FormFeedback>
+{:else}
+	<FormErrorFeedback {result} />
+{/if}

package/dist/components/ui/FormResultSlot.svelte.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A form's outcome in one slot: the success message announced with
+ * role="status", any failure rendered by FormErrorFeedback with role="alert".
+ * Use it wherever a form stays on screen after submitting; forms that
+ * replace themselves on success (contact, signup, magic link) branch in
+ * their own markup, because what changes there is the whole form, not the
+ * message.
+ *
+ * No per-reason copy passes through here. It used to take a `messages`
+ * record and hand it on unread; all three render sites omitted it, and every
+ * `messages` in the app goes to FormErrorFeedback directly — which is where
+ * a form needing per-reason copy still reaches, and what the two forms that
+ * need it already do.
+ */
+interface Props {
+    /** The remote form's result; nothing renders until there is one. */
+    result: {
+        ok: boolean;
+        reason?: string;
+    } | undefined | null;
+    /** Announced on success. */
+    successMessage: string;
+}
+declare const FormResultSlot: import("svelte").Component<Props, {}, "">;
+type FormResultSlot = ReturnType<typeof FormResultSlot>;
+export default FormResultSlot;

package/dist/components/ui/GhostButton.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLButtonAttributes {
+		/** 'ghost' = transparent with the app radius; 'chip' = grey pill with an aria-pressed state. */
+		variant?: 'ghost' | 'chip';
+		children: Snippet;
+	}
+
+	let { variant = 'ghost', children, type = 'button', class: className, ...rest }: Props = $props();
+</script>
+
+<button {type} class="{variant} {className ?? ''}" {...rest}>{@render children()}</button>
+
+<style>
+	button {
+		border: 1px solid var(--color-hairline);
+		cursor: pointer;
+		transition:
+			background var(--transition-fast),
+			color var(--transition-fast);
+	}
+
+	button:hover {
+		border-color: var(--color-brand);
+	}
+
+	.ghost {
+		background: none;
+		border-radius: var(--radius);
+		padding: var(--space-1) var(--space-2);
+	}
+
+	.chip {
+		background: var(--color-band-grey);
+		border-radius: 999px;
+		padding: var(--space-1) var(--space-3);
+	}
+
+	.chip[aria-pressed='true'] {
+		background: var(--color-brand);
+		border-color: var(--color-brand);
+		color: var(--color-surface);
+	}
+</style>

package/dist/components/ui/GhostButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    /** 'ghost' = transparent with the app radius; 'chip' = grey pill with an aria-pressed state. */
+    variant?: 'ghost' | 'chip';
+    children: Snippet;
+}
+declare const GhostButton: import("svelte").Component<Props, {}, "">;
+type GhostButton = ReturnType<typeof GhostButton>;
+export default GhostButton;

package/dist/components/ui/Link.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { Locale } from '../../config/types.js';
+	import { getUiConfig } from '../../config/context.js';
+
+	interface Props extends HTMLAnchorAttributes {
+		/**
+		 * Canonical (unlocalized) app path, e.g. "/weeklies" — internal only.
+		 *
+		 * An absolute or protocol-relative URL does not pass through: the
+		 * app's href resolver may splice a locale segment into it, so a foreign
+		 * path can come back mangled, and no `rel` is emitted. A content column that may hold
+		 * either (a milestone's `link_url`) branches at the call site and
+		 * renders a bare anchor for the external case.
+		 */
+		href: string;
+		/** Target locale; defaults to the current request/page locale. */
+		locale?: Locale;
+		children: Snippet;
+	}
+
+	let { href, locale, children, ...rest }: Props = $props();
+
+	const config = getUiConfig();
+
+	const resolvedHref = $derived(config.href(href, { locale }));
+</script>
+
+<a href={resolvedHref} {...rest}>{@render children()}</a>

package/dist/components/ui/Link.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { Locale } from '../../config/types.js';
+interface Props extends HTMLAnchorAttributes {
+    /**
+     * Canonical (unlocalized) app path, e.g. "/weeklies" — internal only.
+     *
+     * An absolute or protocol-relative URL does not pass through: the
+     * app's href resolver may splice a locale segment into it, so a foreign
+     * path can come back mangled, and no `rel` is emitted. A content column that may hold
+     * either (a milestone's `link_url`) branches at the call site and
+     * renders a bare anchor for the external case.
+     */
+    href: string;
+    /** Target locale; defaults to the current request/page locale. */
+    locale?: Locale;
+    children: Snippet;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/ui/Pagination.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import Link from './Link.svelte';
+
+	/**
+	 * Previous/next paging over a result set. Real links, not buttons: paging
+	 * is a navigation, so it works without JavaScript, is crawlable, and each
+	 * page keeps its own URL. The caller builds the hrefs because it owns the
+	 * rest of the query string (the active filters).
+	 */
+	interface Props {
+		/** 1-based current page. */
+		page: number;
+		/** Total items across all pages, not just the ones on screen. */
+		total: number;
+		pageSize: number;
+		/** Href for a given 1-based page number. */
+		href: (page: number) => string;
+	}
+
+	let { page, total, pageSize, href }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	const pages = $derived(Math.max(1, Math.ceil(total / pageSize)));
+	const hasPrevious = $derived(page > 1);
+	const hasNext = $derived(page < pages);
+
+	// A page past the end is reachable through a stale or shared link. It shows
+	// the empty state, so it must still show the way back — otherwise the only
+	// recovery is editing the URL by hand. "Previous" goes to the last page that
+	// has rows, not to page - 1, which would be just as empty.
+	const isOutOfRange = $derived(page > pages);
+	const previousPage = $derived(Math.min(page - 1, pages));
+</script>
+
+{#if pages > 1 || isOutOfRange}
+	<nav class="pagination" aria-label={msg.pagination_label()}>
+		{#if hasPrevious}
+			<Link href={href(previousPage)} rel="prev">{msg.pagination_previous()}</Link>
+		{:else}
+			<span class="disabled">{msg.pagination_previous()}</span>
+		{/if}
+
+		<p class="status" aria-live="polite">
+			{msg.pagination_status({ page, pages })}
+		</p>
+
+		{#if hasNext}
+			<Link href={href(page + 1)} rel="next">{msg.pagination_next()}</Link>
+		{:else}
+			<span class="disabled">{msg.pagination_next()}</span>
+		{/if}
+	</nav>
+{/if}
+
+<style>
+	.pagination {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-4);
+		margin-top: var(--space-5);
+	}
+
+	.status {
+		margin: 0;
+		color: var(--color-ink-secondary);
+		font-size: var(--text-sm);
+	}
+
+	.disabled {
+		color: var(--color-ink-muted);
+		font-size: var(--text-sm);
+	}
+</style>

package/dist/components/ui/Pagination.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Previous/next paging over a result set. Real links, not buttons: paging
+ * is a navigation, so it works without JavaScript, is crawlable, and each
+ * page keeps its own URL. The caller builds the hrefs because it owns the
+ * rest of the query string (the active filters).
+ */
+interface Props {
+    /** 1-based current page. */
+    page: number;
+    /** Total items across all pages, not just the ones on screen. */
+    total: number;
+    pageSize: number;
+    /** Href for a given 1-based page number. */
+    href: (page: number) => string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;