@thomasfosterau/components 0.0.0-stage → 0.1.0

package/dist/citations/citation.js

@@ -0,0 +1,121 @@
+/**
+ * The citation vocabulary and its formatter.
+ *
+ * The shape a `Citation` carries is deliberately not any particular app's
+ * publication model: this package is app-agnostic and presentational, and a
+ * component that imported a models package would put the whole model layer
+ * into every consumer's bundle for the sake of a title and a year. The app
+ * maps its resource onto this shape at its own seam, which is also what lets
+ * a Storybook story or a test render one from a literal.
+ *
+ * ## Why the formatter is a pure function here
+ *
+ * Formatting inside the component recomputes on every re-render and cannot
+ * be tested without mounting a component. Pulling it out fixes both — the
+ * caller can memoise, the list derives once — and a citation style is a pile
+ * of conditional punctuation, which is exactly the kind of code that is
+ * wrong in the fourth branch and never noticed by eye.
+ *
+ * The style is a compact author–date one. It is not CSL: a full CSL
+ * implementation is a dependency and a style-file pipeline, and most
+ * consumers need one readable rendering rather than eleven switchable ones.
+ *
+ * @module
+ */
+// Absence is the empty string throughout the helpers below, not `T | undefined`.
+// Every one of them feeds a join whose contract is already "skip the empty
+// parts", so a missing clause genuinely IS "print nothing here".
+/**
+ * The author phrase a compact style prints: one name, two joined by `&`, or
+ * the first followed by `et al.` A four-author paper printed in full is what
+ * makes a reference list unreadable, and the full byline is on the
+ * publication's own page.
+ */
+const authorPhrase = (authors) => {
+    const [first, second] = authors;
+    if (first === undefined)
+        return '';
+    if (authors.length === 1)
+        return first;
+    if (authors.length === 2)
+        return `${first} & ${second}`;
+    return `${first} et al.`;
+};
+/** Join the non-empty parts of a clause with `separator`. */
+const joinPresent = (parts, separator) => parts.filter((part) => part !== '').join(separator);
+// The detail clause is the one part of a citation that differs by kind, and
+// the eleven kinds collapse into FIVE shapes. Each shape is its own function
+// below rather than an arm of one switch: the arms do not share a line of
+// logic, and a single switch over eleven labels with a nested ternary in
+// three of them is the shape that is wrong in the fourth branch and never
+// noticed by eye.
+/** A serial's clause: container, volume(issue), pages. Articles, journals, conference papers. */
+const serialClause = (citation) => {
+    if (citation.container === undefined)
+        return '';
+    const volume = citation.volume === undefined
+        ? ''
+        : citation.issue === undefined
+            ? `, ${citation.volume}`
+            : `, ${citation.volume}(${citation.issue})`;
+    const pages = citation.pages === undefined ? '' : `, ${citation.pages}`;
+    return `${citation.container}${volume}${pages}`;
+};
+/** A chapter's clause: the volume it is in, and where in it. */
+const chapterClause = (citation) => joinPresent([
+    citation.container === undefined ? '' : `In: ${citation.container}`,
+    citation.pages === undefined ? '' : `pp. ${citation.pages}`,
+], ', ');
+/**
+ * An imprint clause: `place: publisher` when both are known, whichever one is
+ * known alone otherwise — the shape every compact style prints for a book, a
+ * thesis or a report.
+ */
+const imprintClause = (citation) => joinPresent([citation.place ?? '', citation.publisher ?? ''], ': ');
+/**
+ * A web source's clause. The access date is the whole point of citing one: it
+ * says which version of a mutable page the claim rests on.
+ */
+const webClause = (citation) => {
+    if (citation.url === undefined)
+        return '';
+    const accessed = citation.accessed === undefined
+        ? ''
+        : ` (accessed ${citation.accessed.toISOString().slice(0, 10)})`;
+    return `Available at: ${citation.url}${accessed}`;
+};
+/** A hosted artefact's clause: whichever of publisher / repository is known. */
+const hostClause = (citation) => citation.publisher ?? citation.container ?? '';
+/** Kind → the shape its detail clause takes. Exhaustive over {@link CitationKind}. */
+const DETAIL_CLAUSES = {
+    article: serialClause,
+    periodical: serialClause,
+    conference: serialClause,
+    chapter: chapterClause,
+    book: imprintClause,
+    thesis: imprintClause,
+    report: imprintClause,
+    web: webClause,
+    dataset: hostClause,
+    software: hostClause,
+    media: hostClause,
+};
+/** The publication-detail clause for a citation's kind. */
+const detailClause = (citation) => DETAIL_CLAUSES[citation.kind](citation);
+/**
+ * Render a citation as one formatted string.
+ *
+ * Pure and total: every branch is reachable from real data and none throws on
+ * a citation carrying nothing but a title, which is a state the corpus can
+ * genuinely be in (an ingested reference awaiting enrichment).
+ */
+export const formatCitation = (citation) => {
+    const parts = joinPresent([
+        citation.authors === undefined ? '' : authorPhrase(citation.authors),
+        citation.year === undefined ? '' : `(${citation.year})`,
+        `“${citation.title}”`,
+        detailClause(citation),
+        citation.doi === undefined ? '' : `DOI: ${citation.doi}`,
+    ], '. ');
+    return `${parts}.`;
+};

package/dist/citations/csl.d.ts

@@ -0,0 +1,102 @@
+/**
+ * The record shapes the CSL-type citation renderers (`BookCitation`,
+ * `ChapterCitation`, `ScholarlyArticleCitation`, `ThesisCitation`,
+ * `ReportCitation`, `Publisher`) take.
+ *
+ * Defined HERE, locally, because the bibliographic model they will align with
+ * — `@thomasfosterau/biblio`. When it is, these types are
+ * expected to become structural subsets of its records (or re-exports of
+ * them), so an app maps once, at the seam, from its resource to these shapes.
+ * Until then they are deliberately plain: every contributor arm is already
+ * RESOLVED (a `Credit` with a name, not a linkage ref), every member is
+ * optional except what a reference cannot be written without, and nothing
+ * here knows about JSON:API, Effect or any app's resource vocabulary.
+ *
+ * Names follow Schema.org (`datePublished`, `numberOfPages`, `pageStart`),
+ * which is what the renderers emit as microdata.
+ *
+ * @module
+ */
+import type { Credit } from './CreditList.svelte';
+/** A year, or an instant whose UTC year is the one cited. See `formatting/Year`. */
+export type CitationDate = Date | number | string;
+/** A publisher (or awarding institution): a Person for a self-published work, usually an Organization. */
+export interface PublisherRecord {
+    readonly name: string;
+    /** The Schema.org type. Default `Organization`. */
+    readonly itemtype?: 'Person' | 'Organization' | undefined;
+    /** Rendered as a PostalAddress before the name ("Oxford, UK: …"); only present parts. */
+    readonly address?: {
+        readonly locality?: string | undefined;
+        readonly region?: string | undefined;
+        readonly country?: string | undefined;
+    } | undefined;
+}
+/** The credited contributors a record carries, in credit order. Order is meaning; the renderers never re-sort. */
+export interface CreditedRecord {
+    readonly authors?: readonly Credit[] | undefined;
+    readonly editors?: readonly Credit[] | undefined;
+    readonly translators?: readonly Credit[] | undefined;
+}
+/** A book (CSL `book`). */
+export interface BookRecord extends CreditedRecord {
+    readonly title?: string | undefined;
+    readonly datePublished?: CitationDate | undefined;
+    /** The edition as written: `3rd`, `Revised`. */
+    readonly edition?: string | undefined;
+    readonly numberOfPages?: number | undefined;
+    readonly isbn?: string | undefined;
+    readonly url?: string | undefined;
+    readonly publisher?: PublisherRecord | undefined;
+    /** The series it is part of — rendered as a Schema.org BookSeries. */
+    readonly series?: {
+        readonly name: string;
+    } | undefined;
+}
+/** A chapter in a book (CSL `chapter`). */
+export interface ChapterRecord {
+    readonly title?: string | undefined;
+    readonly authors?: readonly Credit[] | undefined;
+    readonly chapterNumber?: string | number | undefined;
+    readonly pageStart?: string | number | undefined;
+    readonly pageEnd?: string | number | undefined;
+    /** The containing book, when resolved — rendered as a nested `BookCitation`. */
+    readonly book?: BookRecord | undefined;
+}
+/** A journal article (CSL `article-journal`). */
+export interface ScholarlyArticleRecord {
+    readonly title?: string | undefined;
+    readonly authors?: readonly Credit[] | undefined;
+    /** Usually the issue's publication year. */
+    readonly datePublished?: CitationDate | undefined;
+    readonly periodical?: {
+        readonly title?: string | undefined;
+        readonly issn?: string | undefined;
+    } | undefined;
+    readonly volumeNumber?: string | number | undefined;
+    readonly issueNumber?: string | number | undefined;
+    readonly pageStart?: string | number | undefined;
+    readonly pageEnd?: string | number | undefined;
+    readonly doi?: string | undefined;
+    readonly url?: string | undefined;
+}
+/** A thesis (CSL `thesis`). */
+export interface ThesisRecord {
+    readonly title?: string | undefined;
+    readonly authors?: readonly Credit[] | undefined;
+    readonly datePublished?: CitationDate | undefined;
+    /** The degree, as written: `PhD`, `MSc`. */
+    readonly degree?: string | undefined;
+    /** The awarding institution. */
+    readonly institution?: PublisherRecord | undefined;
+    readonly url?: string | undefined;
+}
+/** A report (CSL `report`). */
+export interface ReportRecord extends CreditedRecord {
+    readonly title?: string | undefined;
+    readonly datePublished?: CitationDate | undefined;
+    readonly numberOfPages?: number | undefined;
+    readonly url?: string | undefined;
+    /** Usually the issuing Organization. */
+    readonly publisher?: PublisherRecord | undefined;
+}

package/dist/citations/csl.js

@@ -0,0 +1,20 @@
+/**
+ * The record shapes the CSL-type citation renderers (`BookCitation`,
+ * `ChapterCitation`, `ScholarlyArticleCitation`, `ThesisCitation`,
+ * `ReportCitation`, `Publisher`) take.
+ *
+ * Defined HERE, locally, because the bibliographic model they will align with
+ * — `@thomasfosterau/biblio`. When it is, these types are
+ * expected to become structural subsets of its records (or re-exports of
+ * them), so an app maps once, at the seam, from its resource to these shapes.
+ * Until then they are deliberately plain: every contributor arm is already
+ * RESOLVED (a `Credit` with a name, not a linkage ref), every member is
+ * optional except what a reference cannot be written without, and nothing
+ * here knows about JSON:API, Effect or any app's resource vocabulary.
+ *
+ * Names follow Schema.org (`datePublished`, `numberOfPages`, `pageStart`),
+ * which is what the renderers emit as microdata.
+ *
+ * @module
+ */
+export {};

package/dist/citations/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `@thomasfosterau/components/citations` — a separate entry point so it never sits on
+ * the always-loaded path of a consumer that does not use it.
+ *
+ * A page's `<Citation>` and `<Footnote>` markers register into a shared
+ * `BibliographyManager` (provided by `setupBibliography`); `<ReferenceList>`
+ * and `<FootnoteList>` render what accumulated. `<CreditList>` renders a
+ * locale-joined byline for one role (authors, editors, translators, or a
+ * caller's own). `formatCitation` is the pure formatter the lists use, and
+ * `DOILink` / `ISBNLink` / `ISSNLink` render the three identifiers a
+ * citation commonly carries as resolvable links.
+ *
+ * @module
+ */
+export { BibliographyManager, getBibliographyContext, setupBibliography, type BibliographyEntry, } from './bibliography.svelte.ts';
+export { formatCitation, type Citation as CitationData, type CitationKind, type Footnote as FootnoteData, } from './citation.ts';
+export { default as Citation } from './Citation.svelte';
+export { default as CreditList, type Credit } from './CreditList.svelte';
+export { default as DOILink } from './DOILink.svelte';
+export { default as Footnote } from './Footnote.svelte';
+export { default as FootnoteList } from './FootnoteList.svelte';
+export { default as ISBNLink } from './ISBNLink.svelte';
+export { default as ISSNLink } from './ISSNLink.svelte';
+export { default as ReferenceList } from './ReferenceList.svelte';
+export { default as BookCitation } from './BookCitation.svelte';
+export { default as ChapterCitation } from './ChapterCitation.svelte';
+export { default as ScholarlyArticleCitation } from './ScholarlyArticleCitation.svelte';
+export { default as ThesisCitation } from './ThesisCitation.svelte';
+export { default as ReportCitation } from './ReportCitation.svelte';
+export { default as Publisher } from './Publisher.svelte';
+export type { BookRecord, ChapterRecord, CitationDate, CreditedRecord, PublisherRecord, ReportRecord, ScholarlyArticleRecord, ThesisRecord, } from './csl.ts';

package/dist/citations/index.js

@@ -0,0 +1,36 @@
+/**
+ * `@thomasfosterau/components/citations` — a separate entry point so it never sits on
+ * the always-loaded path of a consumer that does not use it.
+ *
+ * A page's `<Citation>` and `<Footnote>` markers register into a shared
+ * `BibliographyManager` (provided by `setupBibliography`); `<ReferenceList>`
+ * and `<FootnoteList>` render what accumulated. `<CreditList>` renders a
+ * locale-joined byline for one role (authors, editors, translators, or a
+ * caller's own). `formatCitation` is the pure formatter the lists use, and
+ * `DOILink` / `ISBNLink` / `ISSNLink` render the three identifiers a
+ * citation commonly carries as resolvable links.
+ *
+ * @module
+ */
+export { BibliographyManager, getBibliographyContext, setupBibliography, } from "./bibliography.svelte.js";
+// The two data shapes are re-exported under `*Data` names: `Citation` and
+// `Footnote` are already taken by the components below, and a module cannot
+// export a type and a Svelte component under one identifier (the
+// component's binding is a value in the same declaration space).
+export { formatCitation, } from "./citation.js";
+export { default as Citation } from './Citation.svelte';
+export { default as CreditList } from './CreditList.svelte';
+export { default as DOILink } from './DOILink.svelte';
+export { default as Footnote } from './Footnote.svelte';
+export { default as FootnoteList } from './FootnoteList.svelte';
+export { default as ISBNLink } from './ISBNLink.svelte';
+export { default as ISSNLink } from './ISSNLink.svelte';
+export { default as ReferenceList } from './ReferenceList.svelte';
+// The CSL-type renderers, over the local record shapes in `./csl.ts` (which
+// will align with `@thomasfosterau/biblio` once that is published).
+export { default as BookCitation } from './BookCitation.svelte';
+export { default as ChapterCitation } from './ChapterCitation.svelte';
+export { default as ScholarlyArticleCitation } from './ScholarlyArticleCitation.svelte';
+export { default as ThesisCitation } from './ThesisCitation.svelte';
+export { default as ReportCitation } from './ReportCitation.svelte';
+export { default as Publisher } from './Publisher.svelte';

package/dist/citations/list-format.d.ts

@@ -0,0 +1,34 @@
+/**
+ * A small `Intl.ListFormat` helper for `CreditList`.
+ *
+ * `CreditList` needs to interleave real markup (a name, possibly a link)
+ * between a locale's list separators ("A, B and C") — exactly what
+ * `Intl.ListFormat.formatToParts` is for. This is a deliberately independent
+ * implementation rather than a dependency on the `formatting/` family's
+ * `FormatList`: that family is owned by a different part of this build, and
+ * this is a handful of lines, not a shared abstraction worth a cross-family
+ * edge for.
+ *
+ * @module
+ */
+/** One piece of a formatted list: an item from the input, or literal separator text. */
+export type ListFormatPart<T> = {
+    readonly kind: 'item';
+    readonly value: T;
+} | {
+    readonly kind: 'separator';
+    readonly value: string;
+};
+/** The `Intl.ListFormat` options `formatListParts` takes; omitted fields use the runtime defaults. */
+export interface ListFormatOptions {
+    readonly locales?: string | readonly string[] | undefined;
+    readonly style?: Intl.ListFormatOptions['style'] | undefined;
+    readonly type?: Intl.ListFormatOptions['type'] | undefined;
+}
+/**
+ * Interleave `items` with the given locale's list punctuation, without
+ * losing each item's identity — `formatToParts` only ever hands back
+ * strings, so this maps its "element" parts back to the original items by
+ * the index it was asked to format.
+ */
+export declare const formatListParts: <T>(items: readonly T[], options?: ListFormatOptions) => readonly ListFormatPart<T>[];

package/dist/citations/list-format.js

@@ -0,0 +1,38 @@
+/**
+ * A small `Intl.ListFormat` helper for `CreditList`.
+ *
+ * `CreditList` needs to interleave real markup (a name, possibly a link)
+ * between a locale's list separators ("A, B and C") — exactly what
+ * `Intl.ListFormat.formatToParts` is for. This is a deliberately independent
+ * implementation rather than a dependency on the `formatting/` family's
+ * `FormatList`: that family is owned by a different part of this build, and
+ * this is a handful of lines, not a shared abstraction worth a cross-family
+ * edge for.
+ *
+ * @module
+ */
+/**
+ * Interleave `items` with the given locale's list punctuation, without
+ * losing each item's identity — `formatToParts` only ever hands back
+ * strings, so this maps its "element" parts back to the original items by
+ * the index it was asked to format.
+ */
+export const formatListParts = (items, options = {}) => {
+    const format = new Intl.ListFormat(options.locales, {
+        style: options.style ?? 'long',
+        type: options.type ?? 'conjunction',
+    });
+    const indices = items.map((_, index) => String(index));
+    return format.formatToParts(indices).map((part) => {
+        if (part.type !== 'element')
+            return { kind: 'separator', value: part.value };
+        // `formatToParts` only ever hands back the index strings this function
+        // itself generated one line up, one per `items` entry — the lookup
+        // cannot miss.
+        const index = Number.parseInt(part.value, 10);
+        const value = items[index];
+        if (value === undefined)
+            throw new Error(`formatListParts: no item at index ${index}`);
+        return { kind: 'item', value };
+    });
+};

package/dist/context.svelte.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The app-integration seam.
+ *
+ * A component here must not import `$app/*`: that would tie the package to
+ * SvelteKit and make it untestable outside one. The four things an app has
+ * to supply — how a path becomes an href, how to navigate, which href is the
+ * current page, and which locale `Intl` should format for — are read from
+ * this injected context instead. It carries NO copy: every user-facing
+ * string a component renders is a prop with an English default, so an i18n
+ * app passes its own messages at the call site.
+ *
+ * The app calls {@link setComponentsContext} once in its root layout. When
+ * no provider is mounted — unit tests, Storybook, a plain Svelte app —
+ * {@link defaultComponentsContext} supplies identity hrefs, `window.location`
+ * for navigation and the current-page check, and the runtime's default
+ * locale, so every component works unwired.
+ *
+ * @module
+ */
+/** What an app supplies through `setComponentsContext`: link resolution, navigation, the current-page check and the formatting locale. */
+export interface ComponentsContext {
+    /**
+     * The locale(s) `Intl` formatters use when a component is given none.
+     * `undefined` means the runtime default. A function, not a value, so a
+     * reactive i18n runtime is re-read on every render.
+     */
+    readonly locale: () => string | readonly string[] | undefined;
+    /** Resolve an app-relative path (`/books/1`) to the href to render. */
+    readonly href: (path: string) => string;
+    /** Client-side navigation (SvelteKit's `goto` in an app). */
+    readonly navigate: (url: string) => Promise<void> | void;
+    /** Whether `href` is the page currently shown — drives `aria-current="page"`. */
+    readonly isCurrent: (href: string) => boolean;
+}
+/** The context used when no provider is mounted. */
+export declare const defaultComponentsContext: ComponentsContext;
+/**
+ * Provide the app-integration context. Call once, high in the tree (the root
+ * layout). Omitted members — or members passed as `undefined` — fall back to
+ * {@link defaultComponentsContext} individually.
+ */
+export declare function setComponentsContext(context: {
+    readonly [K in keyof ComponentsContext]?: ComponentsContext[K] | undefined;
+}): void;
+/** Read the app-integration context, falling back to {@link defaultComponentsContext}. */
+export declare function getComponentsContext(): ComponentsContext;

package/dist/context.svelte.js

@@ -0,0 +1,51 @@
+/**
+ * The app-integration seam.
+ *
+ * A component here must not import `$app/*`: that would tie the package to
+ * SvelteKit and make it untestable outside one. The four things an app has
+ * to supply — how a path becomes an href, how to navigate, which href is the
+ * current page, and which locale `Intl` should format for — are read from
+ * this injected context instead. It carries NO copy: every user-facing
+ * string a component renders is a prop with an English default, so an i18n
+ * app passes its own messages at the call site.
+ *
+ * The app calls {@link setComponentsContext} once in its root layout. When
+ * no provider is mounted — unit tests, Storybook, a plain Svelte app —
+ * {@link defaultComponentsContext} supplies identity hrefs, `window.location`
+ * for navigation and the current-page check, and the runtime's default
+ * locale, so every component works unwired.
+ *
+ * @module
+ */
+import { getContext, setContext } from 'svelte';
+const hasWindow = () => typeof globalThis.window !== 'undefined';
+/** The pathname of the document currently shown, or `''` off the client. */
+const currentPathname = () => (hasWindow() ? globalThis.window.location.pathname : '');
+/** The context used when no provider is mounted. */
+export const defaultComponentsContext = {
+    locale: () => undefined,
+    href: (path) => path,
+    navigate: (url) => {
+        if (hasWindow())
+            globalThis.window.location.assign(url);
+    },
+    isCurrent: (href) => href !== '' && href === currentPathname(),
+};
+const CONTEXT_KEY = Symbol('@thomasfosterau/components:context');
+/**
+ * Provide the app-integration context. Call once, high in the tree (the root
+ * layout). Omitted members — or members passed as `undefined` — fall back to
+ * {@link defaultComponentsContext} individually.
+ */
+export function setComponentsContext(context) {
+    setContext(CONTEXT_KEY, {
+        locale: context.locale ?? defaultComponentsContext.locale,
+        href: context.href ?? defaultComponentsContext.href,
+        navigate: context.navigate ?? defaultComponentsContext.navigate,
+        isCurrent: context.isCurrent ?? defaultComponentsContext.isCurrent,
+    });
+}
+/** Read the app-integration context, falling back to {@link defaultComponentsContext}. */
+export function getComponentsContext() {
+    return getContext(CONTEXT_KEY) ?? defaultComponentsContext;
+}

package/dist/data/DataGrid.svelte

@@ -0,0 +1,150 @@
+<!-- @component
+A `Table` with client-side sorting, filtering across every column and paging, for a list that is already entirely in hand.
+-->
+<!--
+  DataGrid — the three controls a reader wants over a list that is already
+  entirely in hand: sort a column, filter across every column, page through
+  the result.
+
+  It draws no table of its own. The rows go through `Table` and the pager
+  through `Pagination`, so the cell markup, the empty state, the sort control
+  and the disabled-arm rule all have exactly one implementation, and this file
+  is the decisions rather than the markup.
+
+  **Client-side, and that is the constraint.** Every derivation below runs
+  over the whole `rows` array on every keystroke, so this is for a bounded set
+  the page already holds — a vocabulary, an account's devices, a taxon's
+  synonyms. A collection the API pages belongs on `Table` + `PaginationFooter`,
+  where the server does the work; pointing this at one would silently sort and
+  filter the current page only, which reads as data loss rather than as a
+  limitation.
+
+  ARIA contract: the `Table`'s and the `Pagination`'s. The filter is a
+  `<input type="search">` with a real label (visually hidden, because the
+  control sits in a toolbar where a visible label would be the only one), and
+  the rows-per-page `<select>` is named by `rowsPerPageLabel`.
+-->
+<script lang="ts" generics="T">import { getComponentsContext } from "../context.svelte.js";
+import Pagination from "./Pagination.svelte";
+import Table from "./Table.svelte";
+let { rows, columns, rowKey, filterable = false, paginated = true, pageSize = 10, pageSizeOptions = [
+	10,
+	25,
+	50,
+	100
+], caption, captionHidden, size, zebra, pinRows, sort = $bindable(undefined), onSelect, emptyMessage, emptyState, filterLabel = "Search", filterPlaceholder = "Search…", rowsPerPageLabel = "Rows per page", showingLabel = (start, end, total) => `Showing ${start} to ${end} of ${total}`, pageOfLabel = (page, pages) => `Page ${page} of ${pages}`, previousLabel = "Previous", nextLabel = "Next", paginationLabel = "Pagination", sortLabel, locales = getComponentsContext().locale(), class: className, ...rest } = $props();
+let filter = $state("");
+// 0 is "the reader has not chosen": the `pageSize` prop stays authoritative
+// until they pick from the menu, so a page that changes the prop is honoured
+// rather than overridden by state seeded once at mount.
+let chosenSize = $state(0);
+let page = $state(0);
+const limit = $derived(chosenSize === 0 ? pageSize : chosenSize);
+const filtered = $derived.by(() => {
+	const needle = filter.trim().toLowerCase();
+	if (needle === "") return rows;
+	// The filter searches the column's VALUE, not its rendered cell: a cell
+	// may be a badge or a link, and a reader typing what they can see is
+	// typing the value either way.
+	return rows.filter((row) => columns.some((column) => String(column.value(row)).toLowerCase().includes(needle)));
+});
+const sorted = $derived.by(() => {
+	const active = sort;
+	if (active === undefined) return filtered;
+	const column = columns.find((candidate) => candidate.key === active.key);
+	if (column === undefined) return filtered;
+	const direction = active.direction === "asc" ? 1 : -1;
+	// `localeCompare` in the active locale, so a Swedish reader gets Swedish
+	// collation rather than code-point order; numbers compare numerically,
+	// because "10" sorts before "9" as a string and that is always wrong.
+	return filtered.toSorted((left, right) => {
+		const a = column.value(left);
+		const b = column.value(right);
+		if (typeof a === "number" && typeof b === "number") return (a - b) * direction;
+		return String(a).localeCompare(String(b), locales) * direction;
+	});
+});
+const total = $derived(sorted.length);
+const pageCount = $derived(paginated ? Math.max(1, Math.ceil(total / limit)) : 1);
+// A filter that shrinks the result out from under the current page would
+// otherwise leave the reader looking at an empty body with rows they cannot
+// reach. Clamping in a derivation rather than in the filter's handler keeps
+// it true however the page count changed — including a `rows` prop that
+// shrank without anyone typing.
+const current = $derived(Math.min(page, pageCount - 1));
+const visible = $derived(paginated ? sorted.slice(current * limit, current * limit + limit) : sorted);
+const from = $derived(total === 0 ? 0 : current * limit + 1);
+const to = $derived(Math.min((current + 1) * limit, total));
+</script>
+
+<div {...rest} class={['space-y-3', className]}>
+  {#if filterable}
+    <label class="input input-sm w-full max-w-xs">
+      <span class="sr-only">{filterLabel}</span>
+      <input
+        type="search"
+        bind:value={filter}
+        oninput={() => {
+          page = 0;
+        }}
+        placeholder={filterPlaceholder}
+        aria-label={filterLabel}
+      />
+    </label>
+  {/if}
+
+  <Table
+    rows={visible}
+    {columns}
+    {rowKey}
+    {caption}
+    {captionHidden}
+    {size}
+    {zebra}
+    {pinRows}
+    {onSelect}
+    {emptyMessage}
+    {emptyState}
+    {sortLabel}
+    bind:sort
+    onSort={() => {
+      // A new sort re-orders the whole result, so the reader's place in the
+      // old order means nothing; page 1 is the only honest answer.
+      page = 0;
+    }}
+  />
+
+  {#if paginated && total > 0}
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <div class="flex items-center gap-2">
+        <p class="text-base-content/70 text-sm tabular-nums">{showingLabel(from, to, total)}</p>
+        <select
+          class="select select-sm w-auto"
+          aria-label={rowsPerPageLabel}
+          value={limit}
+          onchange={(event) => {
+            chosenSize = Number(event.currentTarget.value);
+            page = 0;
+          }}
+        >
+          {#each pageSizeOptions as option (option)}
+            <option value={option}>{option}</option>
+          {/each}
+        </select>
+      </div>
+      <Pagination
+        offset={current * limit}
+        {limit}
+        {total}
+        variant="prevNext"
+        label={paginationLabel}
+        {previousLabel}
+        {nextLabel}
+        statusLabel={pageOfLabel}
+        onPage={(offset) => {
+          page = Math.floor(offset / limit);
+        }}
+      />
+    </div>
+  {/if}
+</div>