@thomasfosterau/components 0.0.0 → 0.2.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,40 @@
+/**
+ * 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 = {}) => {
+    // A mutable copy: TS6's `Intl.ListFormat` (svelte-check) takes no readonly array.
+    const { locales } = options;
+    const format = new Intl.ListFormat(typeof locales === 'object' ? [...locales] : 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/ChatBubble.svelte

@@ -0,0 +1,48 @@
+<!-- @component
+One message of a `MessageThread`: author, time, avatar, the body and a status line, as a daisyUI `chat` bubble.
+-->
+<!--
+  ChatBubble — an `<li>` holding an `<article>` named by its header, so a
+  reader moves message to message and hears "Ada Lovelace, 3 minutes ago"
+  before the body. The time is a real `<time datetime>` (`DateTime`, or
+  `RelativeTime` with the absolute instant in `title`). The avatar is
+  decorative (`aria-hidden`): the author's name is already text.
+
+  `side` is visual only: messages from the viewer sit at the end, and the
+  author string ("You") is what says whose they are, never the position or
+  the colour. The `<article>` is the daisyUI `chat` grid itself, so its
+  image / header / bubble / footer are its direct children, as
+  `chat.css` requires.
+-->
+<script lang="ts">import DateTime from "../formatting/DateTime.svelte";
+import RelativeTime from "../formatting/RelativeTime.svelte";
+import { chatBubbleTone } from "../ui/tones.js";
+let { author, sentAt, side = "start", tone, relative = false, locales, avatar, footer, children, class: className, ...rest } = $props();
+const uid = $props.id();
+const headerId = `${uid}-header`;
+const sideClass = {
+	start: "chat-start",
+	end: "chat-end"
+};
+</script>
+
+<li>
+  <article {...rest} aria-labelledby={headerId} class={['chat', sideClass[side], className]}>
+    {#if avatar}
+      <div class="chat-image avatar" aria-hidden="true">{@render avatar()}</div>
+    {/if}
+    <div class="chat-header" id={headerId}>
+      {author}{#if sentAt !== undefined}<span class="sr-only">,</span>
+        {#if relative}
+          <RelativeTime value={sentAt} {locales} class="text-xs opacity-60" />
+        {:else}
+          <DateTime value={sentAt} {locales} dateStyle="medium" timeStyle="short" class="text-xs opacity-60" />
+        {/if}
+      {/if}
+    </div>
+    <div class={['chat-bubble', tone !== undefined && chatBubbleTone[tone]]}>{@render children()}</div>
+    {#if footer}
+      <div class="chat-footer opacity-60">{@render footer()}</div>
+    {/if}
+  </article>
+</li>

package/dist/data/ChatBubble.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Display name of the author; part of the message's accessible name. */
+    author: string;
+    /** When it was sent: a `Date`, epoch milliseconds or an ISO string. */
+    sentAt?: Date | number | string | undefined;
+    /**
+     * `'end'` for the viewer's own messages.
+     * @defaultValue `'start'`
+     */
+    side?: 'start' | 'end' | undefined;
+    /** Bubble colour. Omitted, daisyUI's neutral bubble. */
+    tone?: Tone | undefined;
+    /**
+     * Show `sentAt` relative ("3 minutes ago") rather than absolute.
+     * @defaultValue `false`
+     */
+    relative?: boolean | undefined;
+    /** Locale(s) for the time; falls back to the components context. */
+    locales?: string | readonly string[] | undefined;
+    /** The avatar (an `Avatar` or an image); decorative here. */
+    avatar?: Snippet<[]> | undefined;
+    /** Status line under the bubble ("Delivered", "Edited"). */
+    footer?: Snippet<[]> | undefined;
+    /** The message body. */
+    children: Snippet<[]>;
+}
+/** One message of a `MessageThread`: author, time, avatar, the body and a status line, as a daisyUI `chat` bubble. */
+declare const ChatBubble: import("svelte").Component<Props, {}, "">;
+type ChatBubble = ReturnType<typeof ChatBubble>;
+export default ChatBubble;