@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Accessible Svelte 5 UI primitives.
+ *
+ * Everything exported here is app-agnostic: it takes props and snippets,
+ * spreads the native attributes of the element it renders, reads no global
+ * state, and gets every user-facing string from a prop with an English
+ * default. Styling is daisyUI semantic classes over the tokens in
+ * `./theme.css`, which ships beside this barrel as the package's
+ * `./theme.css` export. The one injected dependency is
+ * {@link ComponentsContext}: locale, href resolution, navigation and the
+ * current-page check.
+ *
+ * The heavier families — `citations`, `canvas`, `charts`, `tips`, `seo` —
+ * are separate entry points (`@thomasfosterau/components/<family>`), as is
+ * `EntityForm` (`@thomasfosterau/components/entity-form`, which needs the
+ * optional peer `@thomasfosterau/effect-forms-svelte`); none is re-exported
+ * here. `hotkeys` is both: re-exported here and its own
+ * `@thomasfosterau/components/hotkeys` entry, for a lazily loaded help dialog. The maps family lives one package over, in
+ * `@thomasfosterau/components-mapbox`: its behaviour needs a specific
+ * third-party engine (`mapbox-gl`), and a component that needs one lives in
+ * its own package so this one stays free of it.
+ *
+ * @module @thomasfosterau/components
+ */
+export * from './context.svelte.ts';
+export * from './ui/index.ts';
+export * from './feedback/index.ts';
+export * from './layout/index.ts';
+export * from './fields/index.ts';
+export * from './forms/index.ts';
+export * from './data/index.ts';
+export * from './infobox/index.ts';
+export * from './formatting/index.ts';
+export * from './links/index.ts';
+export * from './media/index.ts';
+export * from './hotkeys/index.ts';
+export * from './search/index.ts';

package/dist/index.js

@@ -0,0 +1,37 @@
+/**
+ * Accessible Svelte 5 UI primitives.
+ *
+ * Everything exported here is app-agnostic: it takes props and snippets,
+ * spreads the native attributes of the element it renders, reads no global
+ * state, and gets every user-facing string from a prop with an English
+ * default. Styling is daisyUI semantic classes over the tokens in
+ * `./theme.css`, which ships beside this barrel as the package's
+ * `./theme.css` export. The one injected dependency is
+ * {@link ComponentsContext}: locale, href resolution, navigation and the
+ * current-page check.
+ *
+ * The heavier families — `citations`, `canvas`, `charts`, `tips`, `seo` —
+ * are separate entry points (`@thomasfosterau/components/<family>`), as is
+ * `EntityForm` (`@thomasfosterau/components/entity-form`, which needs the
+ * optional peer `@thomasfosterau/effect-forms-svelte`); none is re-exported
+ * here. `hotkeys` is both: re-exported here and its own
+ * `@thomasfosterau/components/hotkeys` entry, for a lazily loaded help dialog. The maps family lives one package over, in
+ * `@thomasfosterau/components-mapbox`: its behaviour needs a specific
+ * third-party engine (`mapbox-gl`), and a component that needs one lives in
+ * its own package so this one stays free of it.
+ *
+ * @module @thomasfosterau/components
+ */
+export * from "./context.svelte.js";
+export * from "./ui/index.js";
+export * from "./feedback/index.js";
+export * from "./layout/index.js";
+export * from "./fields/index.js";
+export * from "./forms/index.js";
+export * from "./data/index.js";
+export * from "./infobox/index.js";
+export * from "./formatting/index.js";
+export * from "./links/index.js";
+export * from "./media/index.js";
+export * from "./hotkeys/index.js";
+export * from "./search/index.js";

package/dist/infobox/Infobox.svelte

@@ -0,0 +1,79 @@
+<!-- @component
+The summary rail beside an entity page’s prose: an optional header and image above a body of labelled facts.
+-->
+<!--
+  Infobox — the summary rail beside an entity page's prose: an optional
+  header, an optional image, and a body of labelled facts.
+
+  Two ways to fill it, both live at once. The composable path — `children`
+  taking `InfoboxSection`/`InfoboxRow` (or anything else):
+  a page builds bespoke markup, one piece of markup per concern, and a fix
+  to row layout lands once because there is only one row layout. `rows` renders through the SAME `InfoboxSection`/
+  `InfoboxRow`/`InfoboxImage` primitives `children` would use — never a
+  second copy of the markup — so both paths stay in lock step. Both are
+  accepted together: `rows` first, then `children` below them.
+
+  `float`: floats the box to the right of the article's prose; instead give it its own grid column in the
+  page layout and never float it. Off by default, since a grid-column aside
+  is the more common shape here, and opt-in per page with `float`.
+
+  ARIA contract: `aria-label={title ?? label}` names the region — a real
+  `title` is more specific than the generic default, so it wins.
+  `data-testid="infobox"` is kept for e2e parity with the source apps.
+-->
+<script lang="ts">import Link from "../ui/Link.svelte";
+import InfoboxHeader from "./InfoboxHeader.svelte";
+import InfoboxImage from "./InfoboxImage.svelte";
+import InfoboxRow from "./InfoboxRow.svelte";
+import InfoboxSection from "./InfoboxSection.svelte";
+import { infoboxRowIsPresent } from "./types.js";
+let { title, subtitle, headingLevel, label = "Key facts", image, rows, float = false, children, class: className, ...rest } = $props();
+const presentRows = $derived((rows ?? []).filter(infoboxRowIsPresent));
+const imageRows = $derived(presentRows.filter((row) => row.kind === "image"));
+const bodyRows = $derived(presentRows.filter((row) => row.kind !== "image"));
+</script>
+
+<aside
+  {...rest}
+  data-testid="infobox"
+  aria-label={title ?? label}
+  class={[
+    'card card-border bg-base-100 shadow-sm',
+    float && 'float-right mb-4 ml-4 w-full sm:w-80',
+    className,
+  ]}
+>
+  {#if title !== undefined}
+    <InfoboxHeader {title} {subtitle} {headingLevel} />
+  {/if}
+  {#if image !== undefined}
+    <InfoboxImage {...image} />
+  {/if}
+  {#each imageRows as row (row.src)}
+    <InfoboxImage {...row} />
+  {/each}
+  {#if bodyRows.length > 0}
+    <InfoboxSection>
+      {#each bodyRows as row (row.label)}
+        {#if row.kind === 'fact'}
+          <InfoboxRow label={row.label} value={row.value} />
+        {:else if row.kind === 'link'}
+          <InfoboxRow label={row.label} value={row.text} href={row.href} external={row.external} />
+        {:else if row.kind === 'links'}
+          <InfoboxRow label={row.label}>
+            <ul class="flex flex-col gap-1">
+              {#each row.links ?? [] as link (link.href)}
+                <li><Link href={link.href}>{link.label}</Link></li>
+              {/each}
+            </ul>
+          </InfoboxRow>
+        {:else if row.kind === 'custom'}
+          <InfoboxRow label={row.label}>
+            {@render row.content()}
+          </InfoboxRow>
+        {/if}
+      {/each}
+    </InfoboxSection>
+  {/if}
+  {@render children?.()}
+</aside>

package/dist/infobox/Infobox.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../ui/tones.ts';
+import { type InfoboxImageSpec, type InfoboxRowSpec as Row } from './types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> {
+    /** Heading of the rail; also its accessible name. */
+    title?: string | undefined;
+    /** A line under the title. */
+    subtitle?: string | undefined;
+    /**
+     * The title's heading level (`InfoboxHeader`'s). Keep the default beside
+     * prose; raise it when the box is a section of the page in its own right.
+     * @defaultValue `3`
+     */
+    headingLevel?: Exclude<HeadingLevel, 1> | undefined;
+    /**
+     * Accessible name for the region when there is no `title`.
+     * @defaultValue `'Key facts'`
+     */
+    label?: string | undefined;
+    /** Renders an `InfoboxImage` above the body. */
+    image?: InfoboxImageSpec | undefined;
+    /** Rendered through the primitives below, inside one `InfoboxSection`. */
+    rows?: readonly Row[] | undefined;
+    /** float-right rail; off renders in normal flow (a grid column). */
+    float?: boolean | undefined;
+    /** Extra composed markup — `InfoboxSection`/`InfoboxRow`, or anything else. Rendered after `rows`. */
+    children?: Snippet<[]> | undefined;
+}
+/** The summary rail beside an entity page’s prose: an optional header and image above a body of labelled facts. */
+declare const Infobox: import("svelte").Component<Props, {}, "">;
+type Infobox = ReturnType<typeof Infobox>;
+export default Infobox;

package/dist/infobox/InfoboxHeader.svelte

@@ -0,0 +1,35 @@
+<!-- @component
+The title block at the top of an `Infobox`.
+-->
+<!--
+  InfoboxHeader — the title block at the top of an `Infobox`.
+
+  An `h3` by default rather than an `h2`: the box sits beside an article's
+  prose, and its title names the summary, not a section of the document.
+  Promoting it to the level a real section heading would use puts a phantom
+  entry in the page's outline between two real ones — the box is
+  deliberately outside the outline.
+
+  `headingLevel` raises (or lowers) it for a page that uses the box as a
+  section in its own right, where `h3` would skip a level (`h1` → `h3`) or
+  read as a sub-heading of the section before it. Only the tag changes; the
+  classes are the same at every level. `1` is excluded: the box never titles
+  the page.
+-->
+<script lang="ts">let { title, subtitle, headingLevel = 3, class: className, ...rest } = $props();
+export {};
+</script>
+
+<div
+  {...rest}
+  class={["border-base-300 bg-base-300 border-b px-4 py-3", className]}
+>
+  <svelte:element this={`h${headingLevel}`} class="text-center text-lg font-bold select-none">
+    {title}
+  </svelte:element>
+  {#if subtitle !== undefined && subtitle !== ""}
+    <p class="text-base-content/60 mt-1 text-center text-sm select-none">
+      {subtitle}
+    </p>
+  {/if}
+</div>

package/dist/infobox/InfoboxHeader.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { HeadingLevel } from "../ui/tones.ts";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The infobox heading text. */
+    title: string;
+    /** A line under the heading. */
+    subtitle?: string | undefined;
+    /**
+     * The heading's level. Keep the default when the box sits beside prose;
+     * raise it to the page's section level when the box is a section itself.
+     * @defaultValue `3`
+     */
+    headingLevel?: Exclude<HeadingLevel, 1> | undefined;
+}
+/** The title block at the top of an `Infobox`. */
+declare const InfoboxHeader: import("svelte").Component<Props, {}, "">;
+type InfoboxHeader = ReturnType<typeof InfoboxHeader>;
+export default InfoboxHeader;

package/dist/infobox/InfoboxImage.svelte

@@ -0,0 +1,38 @@
+<!-- @component
+The picture at the top of an `Infobox`, with its caption.
+-->
+<!--
+  InfoboxImage — the picture at the top of an `Infobox`, with its caption.
+
+  `width`/`height` are passed through so the browser can reserve the box
+  before the bytes arrive — the difference between a page that settles and
+  one that jumps under the reader's eye — but only reserve that space when
+  BOTH are present; the caller supplies them together or not at all.
+
+  `eager` (default off: an infobox usually sits beside the prose rather than
+  above it, so its picture is rarely the first thing painted) sets
+  `loading="eager"` and `fetchpriority="high"` together.
+-->
+<script lang="ts">let { src, alt, caption, width, height, eager = false, class: className, ...rest } = $props();
+const loading = $derived(eager ? "eager" : "lazy");
+const fetchpriority = $derived(eager ? "high" : undefined);
+export {};
+</script>
+
+<figure class="border-base-300 border-b">
+  <img
+    {...rest}
+    {src}
+    {alt}
+    {width}
+    {height}
+    {loading}
+    {fetchpriority}
+    class={['h-auto w-full', className]}
+  />
+  {#if caption !== undefined && caption !== ''}
+    <figcaption class="text-base-content/60 px-4 py-2 text-center text-xs italic">
+      {caption}
+    </figcaption>
+  {/if}
+</figure>

package/dist/infobox/InfoboxImage.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLImgAttributes, 'src' | 'alt' | 'width' | 'height' | 'loading' | 'class'> {
+    /** Image URL. */
+    src: string;
+    /** Alternative text; `''` only where the image is decoration. */
+    alt: string;
+    /** Rendered as the `<figcaption>`. */
+    caption?: string | undefined;
+    /** Intrinsic width in pixels; reserves the box. */
+    width?: number | undefined;
+    /** Intrinsic height in pixels; reserves the box. */
+    height?: number | undefined;
+    /** Eager-loads at high `fetchpriority` — for the page's LCP candidate. */
+    eager?: boolean | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** The picture at the top of an `Infobox`, with its caption. */
+declare const InfoboxImage: import("svelte").Component<Props, {}, "">;
+type InfoboxImage = ReturnType<typeof InfoboxImage>;
+export default InfoboxImage;

package/dist/infobox/InfoboxRow.svelte

@@ -0,0 +1,50 @@
+<!-- @component
+One label/value pair inside an `InfoboxSection`.
+-->
+<!--
+  InfoboxRow — one label/value pair inside an `InfoboxSection`.
+
+  Absent by default: a row with neither a `value` nor `children` renders no
+  DOM at all, so a page can build a run of rows straight off sparse resource
+  attributes without guarding each one — the same "has something to show"
+  contract `infoboxRowIsPresent` gives the typed `rows` convenience on
+  `Infobox`. `showEmpty` opts back: an em
+  dash captioned by `emptyLabel`, which says "asked, and there is no answer"
+  rather than "nobody asked" — for a section that always lists the same
+  facts, where a gap is itself informative.
+
+  `href` wraps the row's content in the shared `Link`, so an in-app path
+  resolves through the components context exactly like every other link in
+  the library; `external` is `Link`'s own external-link contract, passed
+  straight through.
+-->
+<script lang="ts">import Link from "../ui/Link.svelte";
+let { label, value, children, href, external, emptyLabel = "unrecorded", showEmpty = false, class: className, ...rest } = $props();
+const hasValue = $derived(value !== undefined && value !== "");
+const present = $derived(children !== undefined || hasValue);
+</script>
+
+{#if present || showEmpty}
+  <div
+    {...rest}
+    class={[
+      'hover:bg-base-100 grid grid-cols-3 gap-2 px-4 py-2 transition-colors',
+      className,
+    ]}
+  >
+    <dt class="text-base-content/70 col-span-1 text-sm font-semibold select-none">{label}</dt>
+    <dd class="col-span-2 text-sm">
+      {#if present && href !== undefined}
+        <Link {href} external={external ?? false}>
+          {#if children}{@render children()}{:else}{value}{/if}
+        </Link>
+      {:else if present && children}
+        {@render children()}
+      {:else if present}
+        {value}
+      {:else}
+        <span class="text-base-content/40" aria-label={emptyLabel}>&mdash;</span>
+      {/if}
+    </dd>
+  </div>
+{/if}

package/dist/infobox/InfoboxRow.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The term, rendered as the `<dt>`. */
+    label: string;
+    /** Plain text or number; `children` wins where both are supplied. */
+    value?: string | number | undefined;
+    /** Richer markup — a formatted quantity, a badge, more than one link. */
+    children?: Snippet<[]> | undefined;
+    /** Wraps the row's content in a `Link` resolved through the components context. */
+    href?: string | undefined;
+    /** Passed through to `Link` — an off-site destination. */
+    external?: boolean | undefined;
+    /**
+     * Stands in for the value, captioned by `aria-label`, when `showEmpty` and the row has nothing.
+     * @defaultValue `'unrecorded'`
+     */
+    emptyLabel?: string | undefined;
+    /** Render the row even when empty, showing `emptyLabel` instead of nothing. */
+    showEmpty?: boolean | undefined;
+}
+/** One label/value pair inside an `InfoboxSection`. */
+declare const InfoboxRow: import("svelte").Component<Props, {}, "">;
+type InfoboxRow = ReturnType<typeof InfoboxRow>;
+export default InfoboxRow;

package/dist/infobox/InfoboxSection.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+A titled group of `InfoboxRow`s, with dividing rules between them.
+-->
+<!--
+  InfoboxSection — a titled group of `InfoboxRow`s, with the dividing rules
+  between them.
+
+  The `<dl>` lives here rather than on each row: a definition list whose
+  terms and definitions are split across a dozen sibling lists is not one
+  list, and a screen reader reading "list of 1 item" twelve times is the
+  audible version of that mistake. Rows contribute the `<dt>`/`<dd>` pairs.
+-->
+<script lang="ts">let { title, children, class: className, ...rest } = $props();
+export {};
+</script>
+
+{#if title !== undefined && title !== ''}
+  <div class="border-base-300 bg-base-300 border-b px-4 py-2">
+    <h4 class="text-sm font-bold select-none">{title}</h4>
+  </div>
+{/if}
+<dl {...rest} class={['divide-base-300 divide-y', className]}>
+  {@render children()}
+</dl>

package/dist/infobox/InfoboxSection.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDListElement> {
+    /** Names the group; omitted for an untitled run of rows. */
+    title?: string | undefined;
+    /** The rows — `InfoboxRow`s, or anything else that belongs in a `<dl>`. */
+    children: Snippet<[]>;
+}
+/** A titled group of `InfoboxRow`s, with dividing rules between them. */
+declare const InfoboxSection: import("svelte").Component<Props, {}, "">;
+type InfoboxSection = ReturnType<typeof InfoboxSection>;
+export default InfoboxSection;

package/dist/infobox/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * infobox — the family that fills an entity page's summary rail, two ways
+ * at once.
+ *
+ * Composed primitives (`InfoboxHeader`, `InfoboxImage`, `InfoboxSection`,
+ * `InfoboxRow`) let a page build bespoke markup. A
+ * typed `rows` convenience on `Infobox` itself — the `InfoboxRowSpec` union
+ * and `infoboxRowIsPresent` — lets a page instead hand over a
+ * `$derived<InfoboxRowSpec[]>` built from sparse entity attributes; `rows` renders through the very
+ * same primitives, so a fix to row layout lands in one place regardless of
+ * which API a caller used to reach it.
+ *
+ * @module
+ */
+export { default as Infobox } from './Infobox.svelte';
+export { default as InfoboxHeader } from './InfoboxHeader.svelte';
+export { default as InfoboxImage } from './InfoboxImage.svelte';
+export { default as InfoboxRow } from './InfoboxRow.svelte';
+export { default as InfoboxSection } from './InfoboxSection.svelte';
+export { infoboxRowIsPresent } from './types.ts';
+export type { InfoboxCustomRow, InfoboxFactRow, InfoboxImageRow, InfoboxImageSpec, InfoboxLinkEntry, InfoboxLinkRow, InfoboxLinksRow, InfoboxRowSpec, } from './types.ts';

package/dist/infobox/index.js

@@ -0,0 +1,20 @@
+/**
+ * infobox — the family that fills an entity page's summary rail, two ways
+ * at once.
+ *
+ * Composed primitives (`InfoboxHeader`, `InfoboxImage`, `InfoboxSection`,
+ * `InfoboxRow`) let a page build bespoke markup. A
+ * typed `rows` convenience on `Infobox` itself — the `InfoboxRowSpec` union
+ * and `infoboxRowIsPresent` — lets a page instead hand over a
+ * `$derived<InfoboxRowSpec[]>` built from sparse entity attributes; `rows` renders through the very
+ * same primitives, so a fix to row layout lands in one place regardless of
+ * which API a caller used to reach it.
+ *
+ * @module
+ */
+export { default as Infobox } from './Infobox.svelte';
+export { default as InfoboxHeader } from './InfoboxHeader.svelte';
+export { default as InfoboxImage } from './InfoboxImage.svelte';
+export { default as InfoboxRow } from './InfoboxRow.svelte';
+export { default as InfoboxSection } from './InfoboxSection.svelte';
+export { infoboxRowIsPresent } from "./types.js";

package/dist/infobox/types.d.ts

@@ -0,0 +1,86 @@
+/**
+ * The shapes the `infobox` family passes around: the image spec both
+ * `InfoboxImage` and an `image`-kind row accept, the row union `Infobox`'s
+ * `rows` convenience renders, and the single "has something to show" rule
+ * the component and its tests share.
+ *
+ * @module
+ */
+import type { Snippet } from 'svelte';
+/** The picture at the top of an `Infobox`. */
+export interface InfoboxImageSpec {
+    readonly src: string;
+    /** Empty for a purely decorative image; a description otherwise. */
+    readonly alt: string;
+    /** Shown beneath the picture — a photographer, a provenance, a scale. */
+    readonly caption?: string | undefined;
+    /** Intrinsic dimensions; supplying both is what stops the layout shifting. */
+    readonly width?: number | undefined;
+    readonly height?: number | undefined;
+    /**
+     * Eager-loads at high `fetchpriority`. Set when this image is the page's
+     * LCP candidate — typically an infobox's own identifying picture.
+     */
+    readonly eager?: boolean | undefined;
+}
+/** An `Infobox` row holding a single identifying fact (e.g. publication year, ISBN, page count). */
+export interface InfoboxFactRow {
+    readonly kind: 'fact';
+    readonly label: string;
+    /** `undefined` or an empty string skips the row. */
+    readonly value: string | number | undefined;
+}
+/** An `Infobox` row holding a single named link, with its own visible text. */
+export interface InfoboxLinkRow {
+    readonly kind: 'link';
+    readonly label: string;
+    readonly text: string;
+    /** `undefined` or an empty string skips the row. */
+    readonly href: string | undefined;
+    /** Passed through to the underlying `Link` — an off-site destination. */
+    readonly external?: boolean | undefined;
+}
+/** One entry of an `InfoboxLinksRow`. */
+export interface InfoboxLinkEntry {
+    readonly label: string;
+    readonly href: string;
+}
+/** An `Infobox` row for a named outbound relationship, rendered as one or more links. */
+export interface InfoboxLinksRow {
+    readonly kind: 'links';
+    readonly label: string;
+    /** `undefined` or an empty list skips the row. */
+    readonly links: readonly InfoboxLinkEntry[] | undefined;
+}
+/**
+ * An `Infobox` row for the hero/identifying image. Renders above the `<dl>` as an
+ * `InfoboxImage`, not as a `dt`/`dd` pair — the same shape `Infobox`'s own
+ * `image` prop takes, offered as a row for the callers who build the whole
+ * infobox from one `rows` array.
+ */
+export interface InfoboxImageRow extends InfoboxImageSpec {
+    readonly kind: 'image';
+}
+/** An `Infobox` row whose value is arbitrary markup (a badge, a formatted quantity). */
+export interface InfoboxCustomRow {
+    readonly kind: 'custom';
+    readonly label: string;
+    readonly content: Snippet<[]>;
+}
+/**
+ * Discriminated union of every row kind `Infobox`'s `rows` prop accepts.
+ *
+ * Named `InfoboxRowSpec` rather than `InfoboxRow` (design.md's own name for
+ * it) because the family already has an `InfoboxRow` COMPONENT: Svelte's
+ * compiled default export carries a type meaning as well as a value one, so
+ * a value export and a type export cannot share that identifier in the same
+ * module without a "Duplicate identifier" error. `*Spec` matches
+ * `InfoboxImageSpec`, the sibling type this union's `image` member reuses.
+ */
+export type InfoboxRowSpec = InfoboxFactRow | InfoboxLinkRow | InfoboxLinksRow | InfoboxImageRow | InfoboxCustomRow;
+/**
+ * Whether a row carries renderable content — the single definition of
+ * "empty" `Infobox` and its unit tests share. A `custom` row is always
+ * present: its snippet is the caller's decision, not this function's.
+ */
+export declare function infoboxRowIsPresent(row: InfoboxRowSpec): boolean;

package/dist/infobox/types.js

@@ -0,0 +1,27 @@
+/**
+ * The shapes the `infobox` family passes around: the image spec both
+ * `InfoboxImage` and an `image`-kind row accept, the row union `Infobox`'s
+ * `rows` convenience renders, and the single "has something to show" rule
+ * the component and its tests share.
+ *
+ * @module
+ */
+/**
+ * Whether a row carries renderable content — the single definition of
+ * "empty" `Infobox` and its unit tests share. A `custom` row is always
+ * present: its snippet is the caller's decision, not this function's.
+ */
+export function infoboxRowIsPresent(row) {
+    switch (row.kind) {
+        case 'fact':
+            return row.value !== undefined && row.value !== '';
+        case 'link':
+            return row.href !== undefined && row.href !== '';
+        case 'links':
+            return row.links !== undefined && row.links.length > 0;
+        case 'image':
+            return row.src !== '';
+        case 'custom':
+            return true;
+    }
+}

package/dist/layout/AppShell.svelte

@@ -0,0 +1,50 @@
+<!-- @component
+The responsive app frame: the sidebar as a standing column from `lg` up, and in a navigation drawer below it.
+-->
+<!--
+  AppShell — the frame every app with a `Sidebar` rebuilt by hand. From
+  `lg` up the `sidebar` snippet is a plain column beside the content; below
+  `lg` it moves into a `Drawer` (`side="start"`) opened from a top bar's
+  menu button.
+
+  The persistent column is never inside a dialog. The sidebar renders in
+  two places, but the column is `display: none` below `lg` and the drawer
+  only exists while it is open (and only its trigger bar below `lg`), so
+  exactly one copy, and one `navigation` landmark, is in the accessibility
+  tree at any width.
+
+  Closing the drawer on navigation is the app's job, because a library
+  cannot import `$app/navigation`. Bind `navOpen` and reset it in
+  SvelteKit's `afterNavigate(() => (navOpen = false))`, as with
+  `Navbar`'s `menuOpen`.
+-->
+<script lang="ts">import { Menu as MenuIcon } from "@lucide/svelte";
+import Drawer from "../feedback/Drawer.svelte";
+import Button from "../ui/Button.svelte";
+import VisuallyHidden from "../ui/VisuallyHidden.svelte";
+let { sidebar, header, children, navOpen = $bindable(false), navLabel = "Menu", navTitle = "Navigation", class: className, ...rest } = $props();
+</script>
+
+<div {...rest} class={['min-h-svh lg:flex', className]}>
+  <div class="hidden shrink-0 lg:block">{@render sidebar()}</div>
+  <div class="min-w-0 flex-1">
+    <div class="lg:hidden">
+      <Drawer bind:open={navOpen} title={navTitle} hideTitle side="start" size="sm">
+        {#snippet trigger({ props })}
+          {#if header}
+            {@render header({ triggerProps: props })}
+          {:else}
+            <div class="border-base-300 bg-base-100 flex h-14 items-center border-b px-2">
+              <Button {...props} variant="ghost" class="btn-square">
+                <MenuIcon class="size-5" aria-hidden="true" />
+                <VisuallyHidden>{navLabel}</VisuallyHidden>
+              </Button>
+            </div>
+          {/if}
+        {/snippet}
+        {@render sidebar()}
+      </Drawer>
+    </div>
+    {@render children()}
+  </div>
+</div>

package/dist/layout/AppShell.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The sidebar, usually a `Sidebar`: a column from `lg` up, the drawer's body below. */
+    sidebar: Snippet<[]>;
+    /** The top bar below `lg`; spread `triggerProps` onto the menu button. Omitted, a bar with a menu button. */
+    header?: Snippet<[{
+        triggerProps: Record<string, unknown>;
+    }]> | undefined;
+    /** The page content. */
+    children: Snippet<[]>;
+    /** Whether the narrow-viewport drawer is open. Bindable. */
+    navOpen?: boolean | undefined;
+    /**
+     * Accessible name of the default menu button.
+     * @defaultValue `'Menu'`
+     */
+    navLabel?: string | undefined;
+    /**
+     * The drawer's accessible name.
+     * @defaultValue `'Navigation'`
+     */
+    navTitle?: string | undefined;
+}
+/** The responsive app frame: the sidebar as a standing column from `lg` up, and in a navigation drawer below it. */
+declare const AppShell: import("svelte").Component<Props, {}, "navOpen">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;