@thomasfosterau/components 0.0.0 → 0.1.0

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;
+}
+/** 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;
+}
+/** A single named link, rendered as one row 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;
+}
+/** 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;
+}
+/**
+ * A hero/identifying image row. 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';
+}
+/** A 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/Breadcrumbs.svelte

@@ -0,0 +1,52 @@
+<!-- @component
+The ancestor trail above a page title, as daisyUI `breadcrumbs` inside a labelled navigation landmark.
+-->
+<!--
+  Breadcrumbs — the ancestor trail above a page title, as daisyUI's
+  `breadcrumbs` inside a labelled navigation landmark.
+
+  ARIA contract: a `<nav aria-label>` wrapping an `<ol>`, because a trail is
+  ordered and the order is the meaning — "Home, then Elections, then this".
+  Ancestors are links; the TRAILING crumb is rendered as text and carries
+  `aria-current="page"`, even when the caller gave it an `href`. A link to the
+  page you are already on is a link that does nothing, and `aria-current` is
+  what says "this is where you are" to someone who cannot see the trail.
+
+  `item` lets a caller render a crumb's contents themselves — an icon beside
+  the label, a `<Badge>`, a truncated middle. The `<li>` and the
+  `aria-current` stay this component's either way: when `item` is supplied the
+  attribute moves to the `<li>`, so the contract holds whatever the snippet
+  renders inside it.
+
+  Hrefs resolve through the components context, so a base path or a locale
+  prefix is applied once by the app rather than at every call site.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { items, label = "Breadcrumb", item, class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+<nav
+  {...rest}
+  aria-label={label}
+  class={['breadcrumbs text-base-content/70 text-sm', className]}
+>
+  <ol>
+    {#each items as crumb, index (index)}
+      {@const current = index === items.length - 1}
+      {#if item}
+        <li aria-current={current ? 'page' : undefined}>{@render item(crumb, index)}</li>
+      {:else}
+        <li>
+          {#if crumb.href !== undefined && !current}
+            <a href={context.href(crumb.href)} class="link link-hover">{crumb.label}</a>
+          {:else}
+            <span class="text-base-content" aria-current={current ? 'page' : undefined}>
+              {crumb.label}
+            </span>
+          {/if}
+        </li>
+      {/if}
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Crumb } from './types.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Ordered ancestors, ending with the current page. */
+    items: readonly Crumb[];
+    /**
+     * Accessible name of the navigation landmark.
+     * @defaultValue `'Breadcrumb'`
+     */
+    label?: string | undefined;
+    /** Render one crumb's contents. The `<li>` wrapper is still this component's. */
+    item?: Snippet<[Crumb, number]> | undefined;
+}
+/** The ancestor trail above a page title, as daisyUI `breadcrumbs` inside a labelled navigation landmark. */
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/layout/DetailLayout.svelte

@@ -0,0 +1,50 @@
+<!-- @component
+The two-column detail-page shell: a header across the top, a body column and a summary aside.
+-->
+<!--
+  DetailLayout — the two-column detail-page shell: a header across the top, a
+  body column, and a summary aside beside it.
+
+  The reflow is the whole point. On a wide viewport the aside sits to the
+  RIGHT of the body (a third of the width, the Wikipedia infobox position); on
+  a phone there is no beside, and the useful order is title → aside → body,
+  because the aside is the facts-at-a-glance block and a reader who has to
+  scroll past the whole article to reach it will never reach it. That is done
+  by putting the aside BEFORE the body in the column flow (`order-first`) and
+  overriding to explicit grid placement from `lg` — not by rendering it twice,
+  which would duplicate every id and every heading in the accessibility tree.
+
+  ARIA contract: the aside is an `<aside aria-label>` — a `complementary`
+  landmark, which is exactly what it is: content related to the page's main
+  content and meaningful on its own. It is named because a landmark a reader
+  cannot tell apart from another landmark is a landmark they will not use.
+  `header` is a snippet rather than a set of title/subtitle props: it takes a
+  `PageHeader`, which already owns the heading contract.
+
+  This renders no `<main>`. It is placed INSIDE `Main` by the page, because a
+  page that is two columns of a wider shell must not open a second landmark.
+  `data-testid="detail-body"` / `"detail-infobox"` are carried over.
+-->
+<script lang="ts">let { header, body, aside, asideLabel = "Summary", class: className, ...rest } = $props();
+export {};
+</script>
+
+<div {...rest} class={['space-y-8', className]}>
+  {@render header()}
+
+  <div class="flex flex-col gap-8 lg:grid lg:grid-cols-3 lg:items-start">
+    <div data-testid="detail-body" class="min-w-0 space-y-8 lg:col-span-2 lg:col-start-1 lg:row-start-1">
+      {@render body()}
+    </div>
+
+    {#if aside}
+      <aside
+        data-testid="detail-infobox"
+        aria-label={asideLabel}
+        class="order-first min-w-0 lg:order-none lg:col-start-3 lg:row-start-1"
+      >
+        {@render aside()}
+      </aside>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The page header block — normally a `PageHeader`. */
+    header: Snippet<[]>;
+    /** The main body column. */
+    body: Snippet<[]>;
+    /** The summary column — an infobox, a fact list, a map. */
+    aside?: Snippet<[]> | undefined;
+    /**
+     * Accessible name of the `<aside>` landmark.
+     * @defaultValue `'Summary'`
+     */
+    asideLabel?: string | undefined;
+}
+/** The two-column detail-page shell: a header across the top, a body column and a summary aside. */
+declare const DetailLayout: import("svelte").Component<Props, {}, "">;
+type DetailLayout = ReturnType<typeof DetailLayout>;
+export default DetailLayout;

package/dist/layout/FilterBar.svelte

@@ -0,0 +1,40 @@
+<!-- @component
+The row of filter options above a list, as links rather than a form.
+-->
+<!--
+  FilterBar — the row of filter options above a list, as links rather than a
+  form.
+
+  Links, deliberately: a filtered view is then a URL an operator can bookmark,
+  paste into a message, or reload — which a `<select>` that mutates client
+  state is not. `href` is supplied per option by the page, because a cursor,
+  a sort order and a search term all have to travel with the filter and only
+  the page knows what the rest of its query string is.
+
+  `active` is the caller's to decide for the same reason: only the page knows
+  which axis this row filters on.
+
+  ARIA contract: a `<nav aria-label>` — each surface filters on a different
+  axis ("Filter by status", "Filter by licence") and an unnamed second
+  navigation landmark on a page is one a reader cannot tell from the first.
+  The active option carries `aria-current="page"` as well as daisyUI's
+  `btn-active`, because the highlight is a colour and the attribute is what
+  says so out loud. The options are anchors, not buttons, so the `btn` class
+  here is a costume, not a role.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { options, label, class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+<nav {...rest} aria-label={label} class={['flex flex-wrap items-center gap-2', className]}>
+  {#each options as option (option.key)}
+    <a
+      href={context.href(option.href)}
+      class={['btn btn-sm', option.active && 'btn-active']}
+      aria-current={option.active ? 'page' : undefined}
+    >
+      {option.label}
+    </a>
+  {/each}
+</nav>

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

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FilterOption } from './types.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** The filters; the current one gets `aria-current`. */
+    options: readonly FilterOption[];
+    /** Accessible name for the row — say which axis it filters on. */
+    label: string;
+}
+/** The row of filter options above a list, as links rather than a form. */
+declare const FilterBar: import("svelte").Component<Props, {}, "">;
+type FilterBar = ReturnType<typeof FilterBar>;
+export default FilterBar;

package/dist/layout/Footer.svelte

@@ -0,0 +1,32 @@
+<!-- @component
+The site footer: a `contentinfo` landmark with columns of links and an optional aside for the brand and attribution notices.
+-->
+<!--
+  Footer — the site footer: a `contentinfo` landmark holding the columns of
+  links an app puts at the bottom of every page, and an optional `aside` for
+  the brand block and the attribution notices (a data licence, a copyright
+  line) that belong beside them rather than in them.
+
+  ARIA contract: `<footer>` at the top of the document is the `contentinfo`
+  landmark — the one a screen-reader user jumps to for "the small print".
+  There is one per page, so a footer INSIDE an `<article>` or a `<section>` is
+  not this component. `aside` renders first, which is where the attribution
+  block reads: the columns are navigation, and navigation should not be
+  preceded by nothing.
+
+  Structure only. The columns are the app's — typically `<nav>` blocks with a
+  `footer-title` heading each, which is what makes daisyUI's grid line up.
+-->
+<script lang="ts">let { children, aside, class: className, ...rest } = $props();
+export {};
+</script>
+
+<footer
+  {...rest}
+  class={['footer sm:footer-horizontal bg-base-200 text-base-content mt-auto p-10', className]}
+>
+  {#if aside}
+    <aside>{@render aside()}</aside>
+  {/if}
+  {@render children()}
+</footer>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** The columns — `<nav>` blocks with `footer-title` headings. */
+    children: Snippet<[]>;
+    /** Brand and attribution block, rendered before the columns. */
+    aside?: Snippet<[]> | undefined;
+}
+/** The site footer: a `contentinfo` landmark with columns of links and an optional aside for the brand and attribution notices. */
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/layout/Main.svelte

@@ -0,0 +1,30 @@
+<!-- @component
+The page’s content column and the `<main>` landmark.
+-->
+<!--
+  Main — the page's content column, and the `<main>` landmark that names it.
+
+  Every app in the survey had a component called `Main` and none of them
+  rendered a `<main>`: each one was a `<section>`, because each was mounted
+  inside a shell that had already opened the real `<main>`. That is a correct
+  thing to want and a bad thing to leave implicit, so the element is a prop.
+  `as="main"` is the default because a page that needs a landmark and does not
+  get one is the failure that matters; `as="section"` is for the nested case.
+
+  ARIA contract: exactly one `<main>` per rendered page — the landmark a
+  screen-reader user jumps to with a single keystroke, and the target of a
+  skip link. There must never be two, which is what `as="section"` exists to
+  prevent. A `<section>` is a `region` landmark only when it has an accessible
+  name, so pass `aria-label`/`aria-labelledby` (spread through `rest`) when
+  the nested block is one worth jumping to, and nothing when it is not.
+-->
+<script lang="ts">let { as = "main", children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<!-- `min-w-0` is the one class worth imposing: a content column is nearly
+     always a flex or grid child, and without it a wide table or a long
+     unbroken URL inside pushes the whole layout sideways. -->
+<svelte:element this={as} {...rest} class={['min-w-0', className]}>
+  {@render children()}
+</svelte:element>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * `main`, or `section` when a `<main>` is already open.
+     * @defaultValue `'main'`
+     */
+    as?: 'main' | 'section' | undefined;
+    /** The page content, inside the landmark and the content column. */
+    children: Snippet<[]>;
+}
+/** The page’s content column and the `<main>` landmark. */
+declare const Main: import("svelte").Component<Props, {}, "">;
+type Main = ReturnType<typeof Main>;
+export default Main;

package/dist/layout/Navbar.svelte

@@ -0,0 +1,68 @@
+<!-- @component
+The site banner: brand, primary links and account controls, with a disclosure for what does not fit on a narrow viewport.
+-->
+<!--
+  Navbar — the site's banner: the brand, the primary links, the account
+  controls, and on a narrow viewport the disclosure that holds whatever did
+  not fit.
+
+  The three regions are snippets (`start` / `center` / `end`) because the
+  content is the app's — its brand mark, its search form, its `Menu
+  mode="dropdown"` account menu. What this owns is the structure: the banner
+  landmark, the named navigation inside it, the responsive bar, and the
+  toggle.
+
+  The toggle is bits-ui's `Collapsible`, not a hand-rolled button and a
+  `hidden` div (which is what three of the four apps had) and not a
+  `<details>`. `<details>` would be tempting — it is the native disclosure —
+  but its ARIA is implicit: the browser maps the open state internally and
+  exposes no `aria-controls`, so the toggle cannot say WHICH region it opens,
+  and a `<summary>` cannot be styled as a `btn` without fighting the marker.
+  `Collapsible` gives the pairing this needs and nothing else: a real
+  `<button type="button">` carrying `aria-expanded` and `aria-controls`
+  pointing at the panel's id, and the panel kept in the DOM with `hidden` when
+  closed so the reference always resolves.
+
+  ARIA contract: `<header>` at the top of the document is the `banner`
+  landmark; the `<nav aria-label>` inside it is the named navigation. The
+  toggle is an icon button with a real accessible name (`menuLabel`) — its
+  glyph is `aria-hidden`, so the name never changes as the state does; the
+  state is `aria-expanded`'s job, not the label's. `menuOpen` is bindable, so
+  an app can close the panel after a route change.
+-->
+<script lang="ts">import { Collapsible } from "bits-ui";
+import { Menu as MenuIcon } from "@lucide/svelte";
+import VisuallyHidden from "../ui/VisuallyHidden.svelte";
+let { label = "Primary", menuLabel = "Menu", menuOpen = $bindable(false), start, center, end, menu, class: className, ...rest } = $props();
+</script>
+
+<Collapsible.Root bind:open={menuOpen}>
+  {#snippet child({ props })}
+    <header {...rest} {...props} class={['bg-base-200 border-base-300 border-b', className]}>
+      <nav aria-label={label} class="navbar mx-auto max-w-7xl px-4 sm:px-6">
+        <div class="navbar-start min-w-0">{@render start()}</div>
+        {#if center}
+          <div class="navbar-center hidden lg:flex">{@render center()}</div>
+        {/if}
+        <div class="navbar-end gap-2">
+          {#if end}{@render end()}{/if}
+          {#if menu}
+            <Collapsible.Trigger>
+              {#snippet child({ props: triggerProps })}
+                <button {...triggerProps} class="btn btn-ghost btn-square lg:hidden">
+                  <MenuIcon class="size-5" aria-hidden="true" />
+                  <VisuallyHidden>{menuLabel}</VisuallyHidden>
+                </button>
+              {/snippet}
+            </Collapsible.Trigger>
+          {/if}
+        </div>
+      </nav>
+      {#if menu}
+        <Collapsible.Content class="border-base-300 border-t px-4 py-3 lg:hidden">
+          {@render menu()}
+        </Collapsible.Content>
+      {/if}
+    </header>
+  {/snippet}
+</Collapsible.Root>