@thomasfosterau/components 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * Accessible name of the `<nav>` landmark.
+     * @defaultValue `'Primary'`
+     */
+    label?: string | undefined;
+    /**
+     * Accessible name of the responsive menu toggle.
+     * @defaultValue `'Menu'`
+     */
+    menuLabel?: string | undefined;
+    /** Whether the responsive panel is open. Bindable. */
+    menuOpen?: boolean | undefined;
+    /** Leading region — the brand link. */
+    start: Snippet<[]>;
+    /** Middle region — the primary links. Hidden below `lg`. */
+    center?: Snippet<[]> | undefined;
+    /** Trailing region — search, theme, account. */
+    end?: Snippet<[]> | undefined;
+    /**
+     * The panel the toggle opens. Given one, the toggle appears below `lg`;
+     * without one there is nothing to disclose and no button is rendered.
+     */
+    menu?: Snippet<[]> | undefined;
+}
+/** The site banner: brand, primary links and account controls, with a disclosure for what does not fit on a narrow viewport. */
+declare const Navbar: import("svelte").Component<Props, {}, "menuOpen">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/layout/PageHeader.svelte

@@ -0,0 +1,77 @@
+<!-- @component
+The block at the top of a page: its heading, supporting facts and actions.
+-->
+<!--
+  PageHeader — the block at the top of a page: what the page is about, and
+  what you can do to it.
+
+  `title` takes a string OR a snippet because a page title is sometimes
+  marked up — a species name in italics, a title with a `<Badge>` after it —
+  and an app should not have to choose between the component and its own
+  typography.
+
+  ARIA contract: `title` is a real heading, at `headingLevel` (an `<h1>` by
+  default, because this is the page's heading and a page has one). The level
+  is a prop and not a consequence of the type scale: the outline is document
+  structure, the scale is decoration, and `class` moves the second without
+  touching the first. `actions` is a `role="group"` named by `actionsLabel`,
+  so the cluster announces itself as one thing ("Page actions, group") rather
+  than as loose buttons floating beside a heading. `icon` is decorative and
+  hidden — it repeats what the title already says.
+
+  The `<header>` element is a `banner` landmark only when it is NOT inside
+  `<main>`, `<article>`, `<aside>`, `<nav>` or `<section>`. A page header is
+  inside `Main`, so it is not a banner, which is correct: the banner is the
+  site chrome (`Navbar`), of which there is one per page.
+-->
+<script lang="ts">let { title, subtitle, headingLevel = 1, actionsLabel = "Page actions", eyebrow, icon, meta, actions, children, class: className, ...rest } = $props();
+// The page title's scale is the page's, not the outline's — an `<h2>` used
+// as a page heading (a panel, a dialog body) still reads as the title.
+const titleClasses = "text-3xl font-semibold tracking-tight text-balance sm:text-4xl";
+export {};
+</script>
+
+<header {...rest} class={['space-y-3', className]}>
+  {#if eyebrow}
+    <div class="text-base-content/70 text-sm">{@render eyebrow()}</div>
+  {/if}
+
+  <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+    <div class="flex min-w-0 flex-1 items-start gap-x-5">
+      {#if icon}
+        <div class="avatar shrink-0" aria-hidden="true">
+          <div class="bg-base-200 size-16 rounded-full">{@render icon()}</div>
+        </div>
+      {/if}
+      <div class="min-w-0 flex-1 space-y-1">
+        <svelte:element this={`h${headingLevel}`} class={titleClasses}>
+          {#if typeof title === 'string'}
+            {title}
+          {:else}
+            {@render title()}
+          {/if}
+        </svelte:element>
+        {#if subtitle !== undefined}
+          <p class="text-base-content/70 text-lg leading-7">{subtitle}</p>
+        {/if}
+        {#if meta}
+          <div
+            class="text-base-content/70 flex flex-col gap-2 pt-1 text-sm leading-6 sm:flex-row sm:flex-wrap sm:gap-x-6"
+          >
+            {@render meta()}
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    {#if actions}
+      <div role="group" aria-label={actionsLabel} class="flex shrink-0 flex-wrap gap-2">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+
+  {#if children}
+    <div>{@render children()}</div>
+  {/if}
+</header>

package/dist/layout/PageHeader.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';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /** The page's heading — its own text, or a snippet for richer markup. */
+    title: string | Snippet<[]>;
+    /** Supporting line under the heading. */
+    subtitle?: string | undefined;
+    /**
+     * The heading level, so the page outline stays intact.
+     * @defaultValue `1`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /**
+     * Accessible name of the `actions` group.
+     * @defaultValue `'Page actions'`
+     */
+    actionsLabel?: string | undefined;
+    /** Rendered above the heading — breadcrumbs, an eyebrow label, a badge. */
+    eyebrow?: Snippet<[]> | undefined;
+    /** A leading avatar or emblem, in a round frame. Decorative. */
+    icon?: Snippet<[]> | undefined;
+    /** Small facts under the heading — dates, counts, status. */
+    meta?: Snippet<[]> | undefined;
+    /** Buttons and links, aligned to the end of the heading row. */
+    actions?: Snippet<[]> | undefined;
+    /** Free content under the whole header block — a tab strip, a filter row. */
+    children?: Snippet<[]> | undefined;
+}
+/** The block at the top of a page: its heading, supporting facts and actions. */
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/layout/Section.svelte

@@ -0,0 +1,72 @@
+<!-- @component
+A titled block of a page: a heading, an optional count, optional actions, and either the rows or an empty state.
+-->
+<!--
+  Section — a titled block of a page: a heading, an optional count beside it,
+  optional actions opposite, and either the rows or an honest empty state.
+
+  Every detail page is a stack of these —
+  `InboundSection` and `DetailSection` — that differed only in which optional
+  parts they carried. The eight lines were copied per section in the apps,
+  and eight copies is eight places to forget the empty state, which renders as
+  a section that looks broken rather than one that is honestly empty.
+
+  `count` is deliberately separate from the rows: a section shows a preview
+  (the first fifty) beside the real unpaged total, so the two numbers differ
+  and the heading has to say the second one. It is formatted through `Intl`,
+  so a five-figure count reads as `12,480` in the reader's locale.
+
+  ARIA contract: a `<section aria-labelledby>` pointing at its own heading, so
+  it is a named `region` — a landmark a reader can jump between, which is the
+  whole reason a long detail page is cut into sections. The heading is real
+  and at `headingLevel`, defaulting to `<h2>` (one level under the page's
+  `<h1>`). `headingId` defaults to a slug of `title`, which makes the section
+  addressable by URL fragment and is stable across server and client render.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { slugify } from "../ui/slug.js";
+let { title, headingLevel = 2, headingId, count, description, empty = false, emptyMessage = "Nothing here yet.", locales, actions, emptyState, children, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const fallbackId = $props.id();
+// A title of nothing but punctuation slugs to `''`, which is not an id —
+// fall back to a generated one rather than emit `aria-labelledby=""`.
+const slugged = $derived(slugify(title));
+const resolvedHeadingId = $derived(headingId ?? (slugged === "" ? fallbackId : slugged));
+// The PERF-CPU-003 shape: the formatter is built in one `$derived` and only
+// `.format()` runs in the next, so re-rendering a count does not re-resolve
+// the locale data.
+const formatter = $derived(new Intl.NumberFormat(locales ?? context.locale()));
+const formattedCount = $derived(count === undefined ? undefined : formatter.format(count));
+</script>
+
+<section {...rest} aria-labelledby={resolvedHeadingId} class={['space-y-3', className]}>
+  <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+    <svelte:element
+      this={`h${headingLevel}`}
+      id={resolvedHeadingId}
+      class="scroll-mt-16 text-xl font-semibold sm:text-2xl"
+    >
+      {title}
+      {#if formattedCount !== undefined}
+        <span class="text-base-content/60 text-base font-normal">({formattedCount})</span>
+      {/if}
+    </svelte:element>
+    {#if actions}
+      <div class="flex shrink-0 flex-wrap gap-2">{@render actions()}</div>
+    {/if}
+  </div>
+
+  {#if description !== undefined}
+    <p class="text-base-content/70 text-sm leading-6">{description}</p>
+  {/if}
+
+  {#if empty}
+    {#if emptyState}
+      {@render emptyState()}
+    {:else}
+      <p class="text-base-content/60">{emptyMessage}</p>
+    {/if}
+  {:else}
+    {@render children()}
+  {/if}
+</section>

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

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../ui/tones.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** The section's heading. */
+    title: string;
+    /**
+     * The heading level, so the page outline stays intact.
+     * @defaultValue `2`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /**
+     * Explicit heading id. Defaults to a slug of `title`, so the section is
+     * addressable; pass one when two sections on a page share a title.
+     */
+    headingId?: string | undefined;
+    /** The unpaged total, rendered beside the heading. */
+    count?: number | undefined;
+    /** A line under the heading saying what the section contains. */
+    description?: string | undefined;
+    /** Whether there is anything to show. Drives the empty state. */
+    empty?: boolean | undefined;
+    /**
+     * The default empty state's text.
+     * @defaultValue `'Nothing here yet.'`
+     */
+    emptyMessage?: string | undefined;
+    /** `Intl` locales for `count`; falls back to the context's. */
+    locales?: string | readonly string[] | undefined;
+    /** A "see all" link or an "add" button, opposite the heading. */
+    actions?: Snippet<[]> | undefined;
+    /** Replaces the default empty paragraph — usually an `EmptyState`. */
+    emptyState?: Snippet<[]> | undefined;
+    /** The section's rows; replaced by the empty state when `empty`. */
+    children: Snippet<[]>;
+}
+/** A titled block of a page: a heading, an optional count, optional actions, and either the rows or an empty state. */
+declare const Section: import("svelte").Component<Props, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/layout/Sidebar.svelte

@@ -0,0 +1,54 @@
+<!-- @component
+The app shell’s navigation column: a brand mark, the primary links and an account block.
+-->
+<!--
+  Sidebar — the app shell's standing navigation column: a brand mark at the
+  top, the primary links in the middle, an account block at the bottom.
+
+  A thin composition and nothing more. The links themselves are `MenuItem`s
+  inside a `Menu mode="nav"`, which already owns the whole navigation
+  contract — the `<nav aria-label>` landmark, the `<ul class="menu">`, and
+  `aria-current="page"` on the item the reader is on. This adds only what a
+  sidebar has and a menu does not.
+
+  What it deliberately does NOT do is wrap the column in an `<aside>`, which
+  is what that original did. `<aside>` is the `complementary` landmark — "content
+  related to the main content, meaningful on its own" — and a site's primary
+  navigation is neither. Wrapping it makes the app's most important landmark
+  announce itself as an afterthought, and puts a second landmark around the
+  `navigation` one, which a reader then has to step through twice.
+
+  ARIA contract: the navigation landmark is `Menu`'s. When `title` is shown,
+  it is also the landmark's accessible name by default, so the name a reader
+  hears is the text a reader sees. `brand` and `footer` are plain regions: the
+  brand is a link, the footer block is usually a second short `Menu`.
+-->
+<script lang="ts">import Menu from "../ui/Menu.svelte";
+let { label, title, headingLevel = 2, brand, footer, children, class: className, ...rest } = $props();
+const navLabel = $derived(label ?? title ?? "Primary");
+</script>
+
+<div
+  {...rest}
+  class={['bg-base-100 border-base-300 flex min-h-full w-72 flex-col border-r', className]}
+>
+  {#if brand}
+    <div class="flex h-16 shrink-0 items-center px-6">{@render brand()}</div>
+  {/if}
+
+  <div class="min-h-0 flex-1 space-y-2 px-4 py-2">
+    {#if title !== undefined}
+      <svelte:element
+        this={`h${headingLevel}`}
+        class="text-base-content/60 px-1 text-xs font-semibold tracking-wide uppercase"
+      >
+        {title}
+      </svelte:element>
+    {/if}
+    <Menu label={navLabel}>{@render children()}</Menu>
+  </div>
+
+  {#if footer}
+    <div class="border-base-300 shrink-0 border-t px-4 py-4">{@render footer()}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../ui/tones.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * Accessible name of the navigation landmark. Defaults to `title` when
+     * one is shown, and to `Primary` when it is not.
+     */
+    label?: string | undefined;
+    /** A visible heading over the links ("Browse", "Your account"). */
+    title?: string | undefined;
+    /**
+     * The heading level, so the page outline stays intact.
+     * @defaultValue `2`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /** The brand mark, above the links. */
+    brand?: Snippet<[]> | undefined;
+    /** A block pinned under the links — the signed-in account menu. */
+    footer?: Snippet<[]> | undefined;
+    /** The `MenuItem`s. */
+    children: Snippet<[]>;
+}
+/** The app shell’s navigation column: a brand mark, the primary links and an account block. */
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/layout/Tabs.svelte

@@ -0,0 +1,85 @@
+<!-- @component
+A tab strip that is either a tab widget over panels (`mode="panels"`) or navigation between sibling routes (`mode="links"`).
+-->
+<!--
+  Tabs — one strip, two things.
+
+  `mode="panels"` is a tab WIDGET: bits-ui's `Tabs`, which owns the
+  `tablist`/`tab`/`tabpanel` roles, the roving tabindex (one Tab stop for the
+  whole strip), Arrow/Home/End movement between tabs, and the
+  `aria-controls`/`aria-labelledby` pairing between each tab and its panel.
+  None of that is worth hand-rolling and all of it is easy to get subtly
+  wrong.
+
+  `mode="links"` is NAVIGATION between sibling routes that happens to look
+  like tabs (First preferences / Two-candidate preferred / Polling places).
+  It must NOT be a tab widget: these are separate documents, each with its own
+  URL, and a `role="tab"` that navigates lies to a reader about what pressing
+  it does. So it is a labelled `<nav>` of ordinary anchors, every one of them
+  a Tab stop, with `aria-current="page"` on the one you are on — chosen by
+  `value` when the caller tracks it, and otherwise by the components context's
+  own current-page check.
+
+  ARIA contract: panels mode is bits-ui's, unmodified — `aria-selected` on the
+  tabs, `aria-controls` to the panel, arrows and Home/End moving selection.
+  Links mode is `<nav aria-label>` + `aria-current="page"`. A disabled item in
+  links mode is not a link at all (there is nothing to navigate to) but stays
+  in the strip as `aria-disabled` text, so the set of sections a reader can
+  see does not change as their permissions do.
+-->
+<script lang="ts">import { Tabs as BitsTabs } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import { tabsSize, tabsVariant } from "./types.js";
+let { items, mode = "panels", value = $bindable(""), label = "Sections", variant = "border", size = "md", panel, class: className } = $props();
+const context = getComponentsContext();
+const stripClasses = $derived([
+	"tabs",
+	tabsVariant[variant],
+	tabsSize[size]
+]);
+// A tab widget with nothing selected shows nothing, so panels need a
+// selection from the start; the first ENABLED item, since a disabled one
+// cannot be navigated back to.
+const selected = $derived(value !== "" ? value : items.find((item) => item.disabled !== true)?.value ?? "");
+const isCurrentLink = (item) => value !== "" ? value === item.value : item.href !== undefined && context.isCurrent(context.href(item.href));
+</script>
+
+{#if mode === 'links'}
+  <nav aria-label={label} class={[...stripClasses, className]}>
+    {#each items as item (item.value)}
+      {#if item.disabled === true}
+        <span class="tab tab-disabled" aria-disabled="true">{item.label}</span>
+      {:else}
+        {@const current = isCurrentLink(item)}
+        <a
+          href={context.href(item.href ?? '')}
+          class={['tab', current && 'tab-active']}
+          aria-current={current ? 'page' : undefined}
+        >
+          {item.label}
+        </a>
+      {/if}
+    {/each}
+  </nav>
+{:else}
+  <!-- A function binding rather than `bind:value`: the value this renders at
+       is the DEFAULTED one, while what a write puts back is the caller's. -->
+  <BitsTabs.Root bind:value={() => selected, (next) => (value = next)} class={className}>
+    <BitsTabs.List class={stripClasses} aria-label={label}>
+      {#each items as item (item.value)}
+        <BitsTabs.Trigger
+          value={item.value}
+          disabled={item.disabled === true}
+          class={['tab', selected === item.value && 'tab-active']}
+        >
+          {item.label}
+        </BitsTabs.Trigger>
+      {/each}
+    </BitsTabs.List>
+    {#if panel}
+      {#each items as item (item.value)}
+        <BitsTabs.Content value={item.value} class="py-4">{@render panel(item)}</BitsTabs.Content>
+      {/each}
+    {/if}
+  </BitsTabs.Root>
+{/if}

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

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import type { Size } from '../ui/tones.ts';
+import { type TabItem, type TabsMode, type TabsVariant } from './types.ts';
+interface Props {
+    /** The tabs, in order: `value` and `label`, plus `href` in `links` mode. */
+    items: readonly TabItem[];
+    /**
+     * `panels` for a tab widget; `links` for navigation between routes.
+     * @defaultValue `'panels'`
+     */
+    mode?: TabsMode | undefined;
+    /**
+     * The selected value (panels) or the current one (links); `''` means
+     * unset — panels then select the first enabled item and links fall back to
+     * the context's current-page check. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * Accessible name of the tab list / the navigation landmark.
+     * @defaultValue `'Sections'`
+     */
+    label?: string | undefined;
+    /**
+     * daisyUI tab style.
+     * @defaultValue `'border'`
+     */
+    variant?: TabsVariant | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: Size | undefined;
+    /** One panel's content, in `panels` mode. Without it, no panels render. */
+    panel?: Snippet<[TabItem]> | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A tab strip that is either a tab widget over panels (`mode="panels"`) or navigation between sibling routes (`mode="links"`). */
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/layout/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * layout — page chrome: the landmarks a page is assembled from, and the
+ * blocks that sit inside them.
+ *
+ * The family is structure, never copy. Every one of these takes the app's
+ * content as snippets and owns only the element that carries the semantics —
+ * the `<main>` a reader jumps to, the named `<nav>`s, the `banner` and
+ * `contentinfo` at the two ends of the page, the `<section aria-labelledby>`
+ * a long page is cut into. Import from the package barrel rather than from
+ * here.
+ *
+ * Optional props are declared `T | undefined` for the reason `ui/`'s are: the
+ * workspace compiles with `exactOptionalPropertyTypes`, under which `prop?: T`
+ * rejects an explicitly passed `undefined` and a caller cannot forward its own
+ * optional prop straight through.
+ *
+ * @module
+ */
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as DetailLayout } from './DetailLayout.svelte';
+export { default as FilterBar } from './FilterBar.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Main } from './Main.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as Section } from './Section.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export * from './types.ts';

package/dist/layout/index.js

@@ -0,0 +1,29 @@
+/**
+ * layout — page chrome: the landmarks a page is assembled from, and the
+ * blocks that sit inside them.
+ *
+ * The family is structure, never copy. Every one of these takes the app's
+ * content as snippets and owns only the element that carries the semantics —
+ * the `<main>` a reader jumps to, the named `<nav>`s, the `banner` and
+ * `contentinfo` at the two ends of the page, the `<section aria-labelledby>`
+ * a long page is cut into. Import from the package barrel rather than from
+ * here.
+ *
+ * Optional props are declared `T | undefined` for the reason `ui/`'s are: the
+ * workspace compiles with `exactOptionalPropertyTypes`, under which `prop?: T`
+ * rejects an explicitly passed `undefined` and a caller cannot forward its own
+ * optional prop straight through.
+ *
+ * @module
+ */
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as DetailLayout } from './DetailLayout.svelte';
+export { default as FilterBar } from './FilterBar.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Main } from './Main.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as Section } from './Section.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export * from "./types.js";

package/dist/layout/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The vocabulary the `layout/` family's list-shaped props are written in, and
+ * the literal daisyUI class tables its variants look up.
+ *
+ * The tables are local to this family rather than added to `ui/tones.ts`
+ * because `tabs-*` is a layout word: no `ui/` component renders a tab strip,
+ * and a table nobody outside one family reads is a table that belongs beside
+ * that family. The reason they are tables at all is the repo-wide one —
+ * Tailwind generates only the classes it can see verbatim in source, so a
+ * `tabs-${variant}` template string emits no CSS whatsoever.
+ *
+ * @module
+ */
+import type { Size } from '../ui/tones.ts';
+/** One step of a {@link Breadcrumbs} trail. */
+export interface Crumb {
+    readonly label: string;
+    /**
+     * Where the crumb points. The TRAILING crumb is rendered as text whether or
+     * not it carries one — it is the page you are already on.
+     */
+    readonly href?: string | undefined;
+}
+/** One entry of a {@link Tabs} strip, in either mode. */
+export interface TabItem {
+    /** Stable key, and the value `Tabs` selects on in `panels` mode. */
+    readonly value: string;
+    readonly label: string;
+    /** The route, in `links` mode. Ignored by `panels`. */
+    readonly href?: string | undefined;
+    readonly disabled?: boolean | undefined;
+}
+/** One option of a {@link FilterBar}. */
+export interface FilterOption {
+    /** Stable key for the keyed `{#each}`. */
+    readonly key: string;
+    readonly label: string;
+    readonly href: string;
+    /**
+     * Whether this option is the view currently shown. The caller's to decide:
+     * only the page knows which axis the row is filtering on.
+     */
+    readonly active: boolean;
+}
+/** `panels` is a tab widget; `links` is navigation between sibling routes. */
+export type TabsMode = 'panels' | 'links';
+/** The three daisyUI tab treatments. */
+export type TabsVariant = 'border' | 'box' | 'lift';
+/** Literal daisyUI class per `TabsVariant` for `Tabs`; a lookup table so Tailwind's scanner sees every class. */
+export declare const tabsVariant: Record<TabsVariant, string>;
+/** Literal daisyUI class per `Size` for `Tabs`; a lookup table so Tailwind's scanner sees every class. */
+export declare const tabsSize: Record<Size, string>;

package/dist/layout/types.js

@@ -0,0 +1,27 @@
+/**
+ * The vocabulary the `layout/` family's list-shaped props are written in, and
+ * the literal daisyUI class tables its variants look up.
+ *
+ * The tables are local to this family rather than added to `ui/tones.ts`
+ * because `tabs-*` is a layout word: no `ui/` component renders a tab strip,
+ * and a table nobody outside one family reads is a table that belongs beside
+ * that family. The reason they are tables at all is the repo-wide one —
+ * Tailwind generates only the classes it can see verbatim in source, so a
+ * `tabs-${variant}` template string emits no CSS whatsoever.
+ *
+ * @module
+ */
+/** Literal daisyUI class per `TabsVariant` for `Tabs`; a lookup table so Tailwind's scanner sees every class. */
+export const tabsVariant = {
+    border: 'tabs-border',
+    box: 'tabs-box',
+    lift: 'tabs-lift',
+};
+/** Literal daisyUI class per `Size` for `Tabs`; a lookup table so Tailwind's scanner sees every class. */
+export const tabsSize = {
+    xs: 'tabs-xs',
+    sm: 'tabs-sm',
+    md: 'tabs-md',
+    lg: 'tabs-lg',
+    xl: 'tabs-xl',
+};

package/dist/links/ContextLinks.svelte

@@ -0,0 +1,28 @@
+<!-- @component
+The "About: Rosa canina, Bed 4" row under a piece of content: a leading label, then a link per subject.
+-->
+<!--
+  ContextLinks — the "About: Rosa canina, Bed 4" row under a piece of content:
+  a leading label, then the things the content is about, each a link.
+
+  Renders NOTHING when there are no links — the common case, since most
+  content names no context, and an empty "About:" would be noise. Each href is
+  resolved through the components context, like every app-relative link here.
+
+  ARIA contract: a plain paragraph of links. The label is visible text read
+  before the links, so no `aria-label` is needed; each link's own text is its
+  accessible name.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { links, label = "About", class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+{#if links.length > 0}
+  <p {...rest} class={['text-base-content/70 flex flex-wrap gap-x-3 gap-y-1 text-sm', className]}>
+    <span>{label}:</span>
+    {#each links as entry, index (index)}
+      <a class="link link-hover" href={context.href(entry.href)}>{entry.label}</a>
+    {/each}
+  </p>
+{/if}

package/dist/links/ContextLinks.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/** One thing the content is about. */
+export interface ContextLinkItem {
+    /** App-relative path, resolved through the components context. */
+    readonly href: string;
+    readonly label: string;
+}
+interface Props extends HTMLAttributes<HTMLParagraphElement> {
+    /** The subjects, each rendered as a link. */
+    links: readonly ContextLinkItem[];
+    /**
+     * The leading word, rendered as `"<label>:"`.
+     * @defaultValue `'About'`
+     */
+    label?: string | undefined;
+}
+/** The "About: Rosa canina, Bed 4" row under a piece of content: a leading label, then a link per subject. */
+declare const ContextLinks: import("svelte").Component<Props, {}, "">;
+type ContextLinks = ReturnType<typeof ContextLinks>;
+export default ContextLinks;