@thomasfosterau/components 0.0.0 → 0.2.0

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 `DropdownMenu`
+  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>

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`, 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/Spacer.svelte

@@ -0,0 +1,12 @@
+<!-- @component
+Flexible space inside a `VStack` / `HStack`: pushes what follows to the far end.
+-->
+<!--
+  Spacer — SwiftUI's `Spacer()`, Compose's `Spacer(Modifier.weight(1f))`: an
+  empty `flex-1` element. It carries nothing, so it is `aria-hidden`.
+-->
+<script lang="ts">let { class: className, ...rest } = $props();
+export {};
+</script>
+
+<div {...rest} aria-hidden="true" class={['flex-1', className]}></div>

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/** Flexible space inside a `VStack` / `HStack`: pushes what follows to the far end. */
+declare const Spacer: import("svelte").Component<Props, {}, "">;
+type Spacer = ReturnType<typeof Spacer>;
+export default Spacer;

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/VStack.svelte

@@ -0,0 +1,12 @@
+<!-- @component
+A vertical stack: children one above the next, on the spacing scale.
+-->
+<!--
+  VStack — children in a column with a token gap (SwiftUI `VStack`, Compose `Column`). Tokens for gap and alignment come from `space.ts`, the
+  library's spacing scale. See `Flow` for the list and divider rules.
+-->
+<script lang="ts">import Flow from "./Flow.svelte";
+let props = $props();
+</script>
+
+<Flow direction="vertical" {...props} />

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FlowAlign, FlowElement, FlowJustify, Gap } from './space.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * Space between children.
+     * @defaultValue `'md'`
+     */
+    gap?: Gap | undefined;
+    /** Cross-axis alignment. */
+    align?: FlowAlign | undefined;
+    /** Main-axis distribution. */
+    justify?: FlowJustify | undefined;
+    /**
+     * A decorative rule between children (never around them).
+     * @defaultValue `false`
+     */
+    divider?: boolean | undefined;
+    /**
+     * The element. With `'ul'` / `'ol'`, children must be `<li>`s.
+     * @defaultValue `'div'`
+     */
+    as?: FlowElement | undefined;
+    children: Snippet<[]>;
+}
+/** A vertical stack: children one above the next, on the spacing scale. */
+declare const VStack: import("svelte").Component<Props, {}, "">;
+type VStack = ReturnType<typeof VStack>;
+export default VStack;

package/dist/layout/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 AppShell } from './AppShell.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as Cluster } from './Cluster.svelte';
+export { default as DetailLayout } from './DetailLayout.svelte';
+export { default as FilterBar } from './FilterBar.svelte';
+export { default as Fits } from './Fits.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Grid } from './Grid.svelte';
+export { default as HStack } from './HStack.svelte';
+export { default as Hero } from './Hero.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 Spacer } from './Spacer.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as VStack } from './VStack.svelte';
+export * from './space.ts';
+export * from './types.ts';