@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/charts/index.js

@@ -0,0 +1,10 @@
+/**
+ * `@thomasfosterau/components/charts` — one component, over a declarative
+ * series spec, drawn as plain SVG.
+ *
+ * A separate entry point so it never sits on the always-loaded path of a
+ * consumer that does not use it.
+ *
+ * @module
+ */
+export { default as Chart } from './Chart.svelte';

package/dist/charts/types.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The shapes `Chart` renders.
+ *
+ * @module @thomasfosterau/components/charts/types
+ */
+/** One observation: a category (or ordered period) and its magnitude. */
+export interface ChartPoint {
+    /** The x-axis tick, already localised by the caller. */
+    readonly label: string;
+    readonly value: number;
+}
+/**
+ * One series. `key` is stable identity, and identity is what picks the colour —
+ * so a filter that removes a series never repaints the survivors.
+ */
+export interface ChartSeries {
+    readonly key: string;
+    /** The legend entry and the direct label, already localised. */
+    readonly label: string;
+    /**
+     * The points, in x order, one per category. Every series shares the first
+     * series' categories: a chart whose series disagree about the x axis is two
+     * charts.
+     */
+    readonly points: readonly ChartPoint[];
+}
+/** How a `Chart` draws its values: as a line, a filled area, or bars. */
+export type ChartKind = 'line' | 'area' | 'bar';

package/dist/charts/types.js

@@ -0,0 +1,6 @@
+/**
+ * The shapes `Chart` renders.
+ *
+ * @module @thomasfosterau/components/charts/types
+ */
+export {};

package/dist/citations/BookCitation.svelte

@@ -0,0 +1,53 @@
+<!-- @component
+One book as a compact author–date reference with Schema.org `Book` microdata.
+-->
+<!--
+  BookCitation — one book as a compact author–date reference with Schema.org
+  microdata: "Le Guin, <cite>The Left Hand of Darkness</cite> (3rd edition:
+  1969) Hainish Cycle New York: Ace Books pp 304".
+
+  Every arm is optional and independently absent: a record that carries only
+  a title renders only a title (and "no date"). Contributors are RESOLVED
+  credits in credit order (`CreditList`), never re-sorted. The record type is
+  local — see `./csl.ts` for why and what it will align with.
+
+  Every string is a prop with an English default.
+-->
+<script lang="ts">import Year from "../formatting/Year.svelte";
+import CreditList from "./CreditList.svelte";
+import ISBNLink from "./ISBNLink.svelte";
+import Publisher from "./Publisher.svelte";
+let { book, itemprop, untitledLabel = "Untitled book", noDateLabel = "no date", editionLabel = (edition) => `${edition} edition`, pageCountLabel = "pp", availableOnlineLabel = "available online at", locales } = $props();
+const authors = $derived(book.authors ?? []);
+</script>
+
+<span {itemprop} itemscope itemtype="https://schema.org/Book">
+  {#if authors.length > 0}
+    <CreditList credits={authors} role="author" {locales} />,
+  {/if}
+  <cite itemprop="name">{book.title ?? untitledLabel}</cite>
+  <CreditList credits={book.editors ?? []} role="editor" {locales} />
+  <CreditList credits={book.translators ?? []} role="translator" {locales} />
+  ({#if book.edition !== undefined}{editionLabel(book.edition)}:{' '}{/if}{#if book.datePublished !== undefined}<Year
+      value={book.datePublished}
+      itemprop="datePublished"
+      {locales}
+    />{:else}{noDateLabel}{/if})
+  {#if book.series !== undefined}
+    <span itemprop="isPartOf" itemscope itemtype="https://schema.org/BookSeries">
+      <cite class="italic" itemprop="name">{book.series.name}</cite>
+    </span>
+  {/if}
+  {#if book.publisher !== undefined}
+    <Publisher publisher={book.publisher} />
+  {/if}
+  {#if book.numberOfPages !== undefined}
+    {pageCountLabel} <span itemprop="numberOfPages">{book.numberOfPages}</span>
+  {/if}
+  {#if book.url !== undefined}
+    {availableOnlineLabel} <a itemprop="url" href={book.url}>{book.url}</a>
+  {/if}
+  {#if book.isbn !== undefined}
+    <ISBNLink isbn={book.isbn} itemprop="isbn" />
+  {/if}
+</span>

package/dist/citations/BookCitation.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { BookRecord } from './csl.ts';
+interface Props {
+    /** The book record; absent fields are left out of the rendering. */
+    book: BookRecord;
+    /** Microdata `itemprop` on the root, when this book is itself a property (a chapter's `isPartOf`). */
+    itemprop?: string | undefined;
+    /**
+     * Rendered in place of a missing title.
+     * @defaultValue `'Untitled book'`
+     */
+    untitledLabel?: string | undefined;
+    /**
+     * Rendered in place of a missing date.
+     * @defaultValue `'no date'`
+     */
+    noDateLabel?: string | undefined;
+    /**
+     * How an edition is named.
+     * @defaultValue `"<edition> edition"`
+     */
+    editionLabel?: ((edition: string) => string) | undefined;
+    /**
+     * Abbreviation after a page count.
+     * @defaultValue `'pp'`
+     */
+    pageCountLabel?: string | undefined;
+    /**
+     * Lead-in before the record’s URL.
+     * @defaultValue `'available online at'`
+     */
+    availableOnlineLabel?: string | undefined;
+    /**
+     * Locale(s) for the joined name lists.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+}
+/** One book as a compact author–date reference with Schema.org `Book` microdata. */
+declare const BookCitation: import("svelte").Component<Props, {}, "">;
+type BookCitation = ReturnType<typeof BookCitation>;
+export default BookCitation;

package/dist/citations/ChapterCitation.svelte

@@ -0,0 +1,38 @@
+<!-- @component
+A chapter as "Author, ‘Chapter title’, in <book> ch 4 (pp 101–130)", with Schema.org `Chapter` microdata.
+-->
+<!--
+  ChapterCitation — a chapter as "Author, 'Chapter title', in <BookCitation>
+  ch 4 (pp 101–130)", with Schema.org Chapter microdata. When the record
+  carries its containing `book`, that book is cited in full, nested under
+  `isPartOf`; a chapter cited on its own renders without it.
+
+  The record type is local — see `./csl.ts`. Every string is a prop with an
+  English default; the book's own labels are forwarded to the nested citation.
+-->
+<script lang="ts">import BookCitation from "./BookCitation.svelte";
+import CreditList from "./CreditList.svelte";
+let { chapter, untitledLabel = "Untitled chapter", inLabel = "in", chapterLabel = "ch", pageLabel = "p", pagesLabel = "pp", locales, bookLabels = {} } = $props();
+const authors = $derived(chapter.authors ?? []);
+</script>
+
+<span itemscope itemtype="https://schema.org/Chapter">
+  {#if authors.length > 0}
+    <CreditList credits={authors} role="author" {locales} />,
+  {/if}
+  '<cite class="not-italic" itemprop="name">{chapter.title ?? untitledLabel}</cite>',
+  {#if chapter.book !== undefined}
+    {inLabel}
+    <BookCitation book={chapter.book} itemprop="isPartOf" {locales} {...bookLabels} />
+  {/if}
+  {#if chapter.chapterNumber !== undefined}
+    {chapterLabel} {chapter.chapterNumber}
+  {/if}
+  {#if chapter.pageStart !== undefined && chapter.pageEnd !== undefined}
+    ({pagesLabel} <span itemprop="pageStart">{chapter.pageStart}</span>–<span itemprop="pageEnd"
+      >{chapter.pageEnd}</span
+    >)
+  {:else if chapter.pageStart !== undefined}
+    ({pageLabel} <span itemprop="pageStart">{chapter.pageStart}</span>)
+  {/if}
+</span>

package/dist/citations/ChapterCitation.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { ChapterRecord } from './csl.ts';
+interface Props {
+    /** The chapter to cite; its `book`, when present, is cited in full. */
+    chapter: ChapterRecord;
+    /**
+     * Rendered in place of a missing title.
+     * @defaultValue `'Untitled chapter'`
+     */
+    untitledLabel?: string | undefined;
+    /**
+     * The word before the containing book.
+     * @defaultValue `'in'`
+     */
+    inLabel?: string | undefined;
+    /**
+     * Abbreviation before a chapter number.
+     * @defaultValue `'ch'`
+     */
+    chapterLabel?: string | undefined;
+    /**
+     * Abbreviation before a single page.
+     * @defaultValue `'p'`
+     */
+    pageLabel?: string | undefined;
+    /**
+     * Abbreviation before a page range.
+     * @defaultValue `'pp'`
+     */
+    pagesLabel?: string | undefined;
+    /**
+     * Locale(s) for the joined name lists.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+    /**
+     * Forwarded to the nested `BookCitation`.
+     * @defaultValue `{}`
+     */
+    bookLabels?: {
+        untitledLabel?: string | undefined;
+        noDateLabel?: string | undefined;
+        editionLabel?: ((edition: string) => string) | undefined;
+        pageCountLabel?: string | undefined;
+        availableOnlineLabel?: string | undefined;
+    } | undefined;
+}
+/** A chapter as "Author, ‘Chapter title’, in <book> ch 4 (pp 101–130)", with Schema.org `Chapter` microdata. */
+declare const ChapterCitation: import("svelte").Component<Props, {}, "">;
+type ChapterCitation = ReturnType<typeof ChapterCitation>;
+export default ChapterCitation;

package/dist/citations/Citation.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+An inline reference marker that registers its source with the surrounding bibliography and renders the number it was given.
+-->
+<!--
+  Citation — an inline reference marker that registers its source with the
+  surrounding bibliography and renders the number it was given.
+
+  Registration happens at component INITIALISATION and again in an `$effect`,
+  never in a `$derived`: Svelte 5 refuses a reactive write from a derived
+  expression (`state_unsafe_mutation`), and rendering the number IS what
+  registers the source, so the write cannot simply move there. The init call
+  is what makes the FIRST paint carry the right number; the effect is what
+  keeps it right if the `citation` prop is swapped in place.
+
+  `link link-hover` rather than a fixed colour: a hard-coded blue is invisible
+  in a dark theme and ignores whatever palette the consumer's `theme.css`
+  declares.
+-->
+<script lang="ts">import { untrack } from "svelte";
+import { getBibliographyContext } from "./bibliography.svelte.js";
+let { citation, format = "superscript", linkToReference = true, referenceLabel = (n, title) => `Reference ${n}: ${title}` } = $props();
+const manager = getBibliographyContext();
+// `untrack` says what the init call means: read the prop ONCE, for the first
+// paint, and leave staying-in-sync to the effect below. Without it Svelte
+// warns that the reference captures only the initial value — which is
+// exactly the intent, but worth stating rather than suppressing.
+let number = $state(untrack(() => manager.addCitation(citation)));
+$effect(() => {
+	number = manager.addCitation(citation);
+});
+const href = $derived(`#ref-${citation.id}`);
+const label = $derived(referenceLabel(number, citation.title));
+</script>
+
+{#if format === 'superscript'}
+  <sup>
+    {#if linkToReference}
+      <a {href} class="link link-hover no-underline" aria-label={label}>[{number}]</a>
+    {:else}
+      <span class="text-base-content/70" aria-label={label}>[{number}]</span>
+    {/if}
+  </sup>
+{:else if linkToReference}
+  <a {href} class="link link-hover" aria-label={label}>({number})</a>
+{:else}
+  <span class="text-base-content/70" aria-label={label}>({number})</span>
+{/if}

package/dist/citations/Citation.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Citation } from './citation.ts';
+interface Props {
+    /** The source being cited. */
+    citation: Citation;
+    /**
+     * `superscript` renders `[1]` raised; `inline` renders `(1)` on the line.
+     * @defaultValue `'superscript'`
+     */
+    format?: 'inline' | 'superscript' | undefined;
+    /**
+     * Link to the `<ReferenceList>` entry. Off when there is no list on the page.
+     * @defaultValue `true`
+     */
+    linkToReference?: boolean | undefined;
+    /**
+     * The marker's accessible name — a bare "1" announces nothing on its own.
+     * @defaultValue `"Reference <n>: <title>"`
+     */
+    referenceLabel?: ((n: number, title: string) => string) | undefined;
+}
+/** An inline reference marker that registers its source with the surrounding bibliography and renders the number it was given. */
+declare const Citation: import("svelte").Component<Props, {}, "">;
+type Citation = ReturnType<typeof Citation>;
+export default Citation;

package/dist/citations/CreditList.svelte

@@ -0,0 +1,69 @@
+<!-- @component
+A locale-joined byline for one credited role (authors, editors, translators), each name in Schema.org microdata.
+-->
+<!--
+  CreditList — a locale-joined byline for one role: the authors, the editors,
+  the translators, or any other credited role a citation carries. Generalises `Authors` / `Editors` / `Translators`, which were the same
+  component three times over (a `FormatList` of names, each wrapped in
+  Schema.org microdata, plus one role's own punctuation) into one.
+
+  Each credit renders as a `Person` or `Organization` microdata item when it
+  carries an `itemtype` — a name with a known Agent behind it — and as plain
+  (`itemprop`-only) text otherwise.
+
+  `roleLabel` / `roleLabelPosition` generalise the label each of the three
+  source components hard-coded: `Editors` printed "(ed)"/"(eds)" AFTER the
+  names, `Translators` printed "trans." BEFORE them. The defaults below
+  reproduce both; a caller naming a role of its own supplies its own label.
+
+  List punctuation comes from `./list-format.ts`, not the `formatting/`
+  family's `FormatList` — see that module's header for why.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { formatListParts } from "./list-format.js";
+let { credits, role = "author", roleLabel, roleLabelPosition, itemprop, locales, style = "long", type = "conjunction", class: className } = $props();
+const ctx = getComponentsContext();
+/** Reproduces `Editors.svelte` (after) and `Translators.svelte` (before). */
+const defaultRoleLabel = (count) => {
+	if (role === "editor") return count > 1 ? "(eds)" : "(ed)";
+	if (role === "translator") return "trans.";
+	return "";
+};
+const resolvedRoleLabel = $derived(roleLabel ?? defaultRoleLabel);
+const resolvedPosition = $derived(roleLabelPosition ?? (role === "translator" ? "before" : "after"));
+const labelText = $derived(credits.length > 0 ? resolvedRoleLabel(credits.length) : "");
+const creditItemprop = $derived(itemprop ?? role);
+const parts = $derived(formatListParts(credits, {
+	locales: locales ?? ctx.locale(),
+	style,
+	type
+}));
+</script>
+
+{#if credits.length > 0}
+  <span class={['inline', className]}>
+    {#if labelText !== '' && resolvedPosition === 'before'}
+      {labelText}
+    {/if}
+    {#each parts as part, index (index)}
+      {#if part.kind === 'item'}
+        {@const credit = part.value}
+        {#if credit.itemtype !== undefined}
+          <span itemprop={creditItemprop} itemscope itemtype={`https://schema.org/${credit.itemtype}`}>
+            {#if credit.href !== undefined}
+              <a itemprop="name" href={ctx.href(credit.href)}>{credit.name}</a>
+            {:else}
+              <span itemprop="name">{credit.name}</span>
+            {/if}
+          </span>
+        {:else if credit.href !== undefined}
+          <a itemprop={creditItemprop} href={ctx.href(credit.href)}>{credit.name}</a>
+        {:else}
+          <span itemprop={creditItemprop}>{credit.name}</span>
+        {/if}
+      {:else}
+        {part.value}
+      {/if}
+    {/each}{#if labelText !== '' && resolvedPosition === 'after'}{' '}{labelText}{/if}</span
+  >
+{/if}

package/dist/citations/CreditList.svelte.d.ts

@@ -0,0 +1,47 @@
+/** One credited name. */
+export interface Credit {
+    readonly name: string;
+    /** Link to the credited party's own page, if it has one. */
+    readonly href?: string | undefined;
+    /** Present exactly when the credit resolved to a real Agent. */
+    readonly itemtype?: 'Person' | 'Organization' | undefined;
+}
+interface Props {
+    /** The people or organisations credited, in order. */
+    credits: readonly Credit[];
+    /**
+     * The role this list credits — also the default Schema.org `itemprop`.
+     * @defaultValue `'author'`
+     */
+    role?: string | undefined;
+    /** Count → the role's punctuation, e.g. `(n) => (n > 1 ? '(eds)' : '(ed)')`. */
+    roleLabel?: ((count: number) => string) | undefined;
+    /**
+     * Whether `roleLabel` goes before or after the names.
+     * @defaultValue `'before'` for `role="translator"`, otherwise `'after'`
+     */
+    roleLabelPosition?: 'before' | 'after' | undefined;
+    /** Overrides `role` as the Schema.org property each credit carries. */
+    itemprop?: string | undefined;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+    /**
+     * `Intl.ListFormat` style.
+     * @defaultValue `'long'`
+     */
+    style?: Intl.ListFormatOptions['style'] | undefined;
+    /**
+     * `Intl.ListFormat` type.
+     * @defaultValue `'conjunction'`
+     */
+    type?: Intl.ListFormatOptions['type'] | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A locale-joined byline for one credited role (authors, editors, translators), each name in Schema.org microdata. */
+declare const CreditList: import("svelte").Component<Props, {}, "">;
+type CreditList = ReturnType<typeof CreditList>;
+export default CreditList;

package/dist/citations/DOILink.svelte

@@ -0,0 +1,28 @@
+<!-- @component
+A DOI rendered as a `https://doi.org/<doi>` link that opens in a new tab.
+-->
+<!--
+  DOILink — a DOI rendered as a resolvable `https://doi.org/<doi>` link.
+
+  Consistent with `ISBNLink` / `ISSNLink`: `https://` (not the old copy's
+  `http://` WorldCat links the other two carried), `target="_blank" rel=
+  "noreferrer"`, an optional Schema.org `itemprop`, native attribute spread on
+  the `<a>` itself, and a `children` snippet for a caller that wants to
+  render the identifier differently (defaults to the bare DOI).
+-->
+<script lang="ts">let { doi, itemprop, children, class: className, ...rest } = $props();
+const href = $derived(`https://doi.org/${doi}`);
+export {};
+</script>
+
+<span class="whitespace-nowrap">
+  doi:<a
+    {...rest}
+    {href}
+    {itemprop}
+    target="_blank"
+    rel="noreferrer"
+    class={['link link-primary link-hover', className]}
+    >{#if children}{@render children()}{:else}{doi}{/if}</a
+  >
+</span>

package/dist/citations/DOILink.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAnchorAttributes, 'children'> {
+    /** The DOI, without a prefix. */
+    doi: string;
+    /**
+     * Schema.org `itemprop` on the link, when the identifier is a property of an enclosing item.
+     */
+    itemprop?: string | undefined;
+    /**
+     * Replaces the link text.
+     * @defaultValue the bare DOI
+     */
+    children?: Snippet<[]> | undefined;
+}
+/** A DOI rendered as a `https://doi.org/<doi>` link that opens in a new tab. */
+declare const DOILink: import("svelte").Component<Props, {}, "">;
+type DOILink = ReturnType<typeof DOILink>;
+export default DOILink;

package/dist/citations/Footnote.svelte

@@ -0,0 +1,39 @@
+<!-- @component
+An inline note marker that registers its note with the surrounding footnote list, tracked separately from citations.
+-->
+<!--
+  Footnote — an inline note marker, tracked separately from citations.
+
+  The number is assigned AT REGISTRATION, not derived from the map's size
+  after the fact — a page's first note reads `1` because registration handed
+  it that ordinal, not by the accident of an effect having already run by the
+  time something reads `manager.footnotes().length`. Registration happens at
+  component initialisation (the first paint is already correct); an `$effect`
+  re-registers afterwards, so a note whose text is edited in place stays
+  current. It cannot move into a `$derived` either — Svelte 5 refuses a
+  reactive write from one.
+-->
+<script lang="ts">import { getBibliographyContext } from "./bibliography.svelte.js";
+let { id, content, symbol, footnoteLabel = (marker, text) => `Footnote ${marker}: ${text}` } = $props();
+const manager = getBibliographyContext();
+/** Register, then read back the position registration gave this note. */
+const register = () => {
+	manager.addFootnote(id, symbol === undefined ? { content } : {
+		content,
+		symbol
+	});
+	if (symbol !== undefined) return symbol;
+	return String(manager.footnotes().findIndex(([key]) => key === id) + 1);
+};
+let marker = $state(register());
+$effect(() => {
+	marker = register();
+});
+const label = $derived(footnoteLabel(marker, content));
+</script>
+
+<sup>
+  <a href="#footnote-{id}" class="link link-hover no-underline" aria-label={label}>
+    {marker}
+  </a>
+</sup>

package/dist/citations/Footnote.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Stable key for this note — also the `#footnote-<id>` anchor. */
+    id: string;
+    /** The note's text. */
+    content: string;
+    /** A custom marker (`*`, `†`) instead of the auto-assigned number. */
+    symbol?: string | undefined;
+    /**
+     * The marker's accessible name — a bare number or symbol announces nothing on its own.
+     * @defaultValue `"Footnote <marker>: <content>"`
+     */
+    footnoteLabel?: ((marker: string, content: string) => string) | undefined;
+}
+/** An inline note marker that registers its note with the surrounding footnote list, tracked separately from citations. */
+declare const Footnote: import("svelte").Component<Props, {}, "">;
+type Footnote = ReturnType<typeof Footnote>;
+export default Footnote;

package/dist/citations/FootnoteList.svelte

@@ -0,0 +1,36 @@
+<!-- @component
+The notes a page’s `<Footnote>` markers registered, in registration order.
+-->
+<!--
+  FootnoteList — the notes a page's `<Footnote>` markers registered, in
+  registration order.
+
+  Keyed by the note's own id, so a re-render does not re-create every `<li>`.
+-->
+<script lang="ts">import { getBibliographyContext } from "./bibliography.svelte.js";
+let { title = "Notes", showTitle = true, headingLevel = 2 } = $props();
+const manager = getBibliographyContext();
+const notes = $derived(manager.footnotes().map(([id, note], index) => ({
+	id,
+	marker: note.symbol ?? String(index + 1),
+	content: note.content
+})));
+const Heading = $derived(`h${headingLevel}`);
+</script>
+
+{#if notes.length > 0}
+  <section class="border-base-300 mt-8 space-y-3 border-t pt-4">
+    {#if showTitle}
+      <svelte:element this={Heading} class="text-lg font-semibold">{title}</svelte:element>
+    {/if}
+
+    <ol class="space-y-1 text-sm">
+      {#each notes as note (note.id)}
+        <li id="footnote-{note.id}" class="text-base-content/80 flex gap-2">
+          <span class="text-base-content/60 shrink-0 font-medium">{note.marker}.</span>
+          <span>{note.content}</span>
+        </li>
+      {/each}
+    </ol>
+  </section>
+{/if}

package/dist/citations/FootnoteList.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    /**
+     * Heading text.
+     * @defaultValue `'Notes'`
+     */
+    title?: string | undefined;
+    /**
+     * Render the heading. Off when the page supplies its own.
+     * @defaultValue `true`
+     */
+    showTitle?: boolean | undefined;
+    /**
+     * Heading level, for a page whose outline this list sits deeper in.
+     * @defaultValue `2`
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+}
+/** The notes a page’s `<Footnote>` markers registered, in registration order. */
+declare const FootnoteList: import("svelte").Component<Props, {}, "">;
+type FootnoteList = ReturnType<typeof FootnoteList>;
+export default FootnoteList;

package/dist/citations/ISBNLink.svelte

@@ -0,0 +1,29 @@
+<!-- @component
+An ISBN rendered as a WorldCat lookup link that opens in a new tab.
+-->
+<!--
+  ISBNLink — an ISBN rendered as a resolvable WorldCat lookup link.
+
+  Consistent with `DOILink` / `ISSNLink`: `https://` (the old copy's
+  `http://` WorldCat URL), `target="_blank" rel="noreferrer"`, an optional
+  Schema.org `itemprop`, native attribute spread on the `<a>` itself, and a
+  `children` snippet for a caller that wants to render the identifier
+  differently (defaults to the bare ISBN).
+-->
+<script lang="ts">let { isbn, itemprop, children, class: className, ...rest } = $props();
+const href = $derived(`https://www.worldcat.org/isbn/${isbn}`);
+export {};
+</script>
+
+<span class="whitespace-nowrap">
+  ISBN
+  <a
+    {...rest}
+    {href}
+    {itemprop}
+    target="_blank"
+    rel="noreferrer"
+    class={['link link-primary link-hover', className]}
+    >{#if children}{@render children()}{:else}{isbn}{/if}</a
+  >
+</span>

package/dist/citations/ISBNLink.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAnchorAttributes, 'children'> {
+    /** The ISBN, without a prefix. */
+    isbn: string;
+    /**
+     * Schema.org `itemprop` on the link, when the identifier is a property of an enclosing item.
+     */
+    itemprop?: string | undefined;
+    /**
+     * Replaces the link text.
+     * @defaultValue the bare ISBN
+     */
+    children?: Snippet<[]> | undefined;
+}
+/** An ISBN rendered as a WorldCat lookup link that opens in a new tab. */
+declare const ISBNLink: import("svelte").Component<Props, {}, "">;
+type ISBNLink = ReturnType<typeof ISBNLink>;
+export default ISBNLink;