@thomasfosterau/components 0.1.0 → 0.2.0

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;

package/dist/layout/Cluster.svelte

@@ -0,0 +1,28 @@
+<!-- @component
+Inline items that wrap onto new lines with a token gap: a row of tags or buttons.
+-->
+<!--
+  Cluster — "every-layout"'s Cluster, Compose's `FlowRow`: items in a row
+  that wraps, with the same gap between rows as between items. With
+  `as="ul"` / `"ol"` it is a list (`role="list"` restored; children `<li>`).
+-->
+<script lang="ts">import { alignClass, gapClass, justifyClass } from "./space.js";
+let { gap = "sm", align = "center", justify, as = "div", children, class: className, ...rest } = $props();
+const list = $derived(as === "ul" || as === "ol");
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  role={list ? 'list' : rest.role}
+  class={[
+    'flex flex-wrap',
+    gapClass[gap],
+    alignClass[align],
+    justify !== undefined && justifyClass[justify],
+    list && 'list-none',
+    className,
+  ]}
+>
+  {@render children()}
+</svelte:element>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FlowAlign, type FlowElement, type FlowJustify, type Gap } from './space.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * Space between items and between rows.
+     * @defaultValue `'sm'`
+     */
+    gap?: Gap | undefined;
+    /**
+     * Cross-axis alignment.
+     * @defaultValue `'center'`
+     */
+    align?: FlowAlign | undefined;
+    /** Main-axis distribution. */
+    justify?: FlowJustify | undefined;
+    /**
+     * The element. With `'ul'` / `'ol'`, children must be `<li>`s.
+     * @defaultValue `'div'`
+     */
+    as?: FlowElement | undefined;
+    children: Snippet<[]>;
+}
+/** Inline items that wrap onto new lines with a token gap: a row of tags or buttons. */
+declare const Cluster: import("svelte").Component<Props, {}, "">;
+type Cluster = ReturnType<typeof Cluster>;
+export default Cluster;

package/dist/layout/Fits.svelte

@@ -0,0 +1,27 @@
+<!-- @component
+Shows the first of several layouts that fits its container, switching at declared container widths (CSS container queries, no JavaScript).
+-->
+<!--
+  Fits — the model is SwiftUI's `ViewThatFits`: "the horizontal button row
+  if it fits, else the stacked one, else a menu". CSS cannot measure
+  content's intrinsic width, so, unlike SwiftUI, it switches at declared
+  container widths: `breakpoints[i]` is the width below which `layouts[i]`
+  stops fitting. It is an `@container`, so the switch follows the space the
+  component actually has, not the viewport.
+
+  A JavaScript-measuring mode (render all, measure, hide) was considered and
+  left out: it shifts layout after first paint and cannot agree with
+  server-rendered HTML.
+
+  Every layout is rendered; all but the active one are `display: none`, so
+  assistive technology meets exactly one copy of each control at any width.
+-->
+<script lang="ts">import { fitsLayoutClass } from "./space.js";
+let { layouts, breakpoints, class: className, ...rest } = $props();
+</script>
+
+<div {...rest} class={['@container', className]}>
+  {#each layouts as layout, index (index)}
+    <div class={fitsLayoutClass(index, layouts.length, breakpoints)}>{@render layout()}</div>
+  {/each}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FitsBreakpoint } from './space.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Layouts in order of preference, widest first. */
+    layouts: readonly Snippet<[]>[];
+    /** Container width below which each layout stops fitting; one fewer than `layouts`, descending. */
+    breakpoints: readonly FitsBreakpoint[];
+}
+/** Shows the first of several layouts that fits its container, switching at declared container widths (CSS container queries, no JavaScript). */
+declare const Fits: import("svelte").Component<Props, {}, "">;
+type Fits = ReturnType<typeof Fits>;
+export default Fits;

package/dist/layout/Flow.svelte

@@ -0,0 +1,46 @@
+<!-- @component
+The flex flow `VStack` and `HStack` share; internal, not exported.
+-->
+<!--
+  Flow — one template for both stacks, so their tokens, list semantics and
+  dividers cannot drift. No `reverse` option, deliberately: a visual order
+  that contradicts the DOM order breaks WCAG 1.3.2 (meaningful sequence).
+
+  `as="ul"` / `"ol"` adds `role="list"`: Safari drops list semantics from a
+  list styled `list-style: none`. Its children must be `<li>`s. `divider`
+  draws a rule between children (Tailwind's `divide-*`, on the borders
+  between siblings, never around them); it is decorative, like a
+  `Divider` with `decorative`, and adds nothing to the accessibility tree.
+-->
+<script lang="ts">import { alignClass, gapClass, justifyClass } from "./space.js";
+let { direction, gap = "md", align, justify, divider = false, as = "div", children, class: className, ...rest } = $props();
+const directionClass = {
+	vertical: "flex-col",
+	horizontal: "flex-row",
+	responsive: "flex-col sm:flex-row"
+};
+const dividerClass = {
+	vertical: "divide-base-300 divide-y",
+	horizontal: "divide-base-300 divide-x",
+	responsive: "divide-base-300 divide-y sm:divide-x sm:divide-y-0"
+};
+const list = $derived(as === "ul" || as === "ol");
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  role={list ? 'list' : rest.role}
+  class={[
+    'flex',
+    directionClass[direction],
+    gapClass[gap],
+    align !== undefined && alignClass[align],
+    justify !== undefined && justifyClass[justify],
+    divider && dividerClass[direction],
+    list && 'list-none',
+    className,
+  ]}
+>
+  {@render children()}
+</svelte:element>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FlowAlign, type FlowElement, type FlowJustify, type Gap } from './space.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    direction: 'vertical' | 'horizontal' | 'responsive';
+    gap?: Gap | undefined;
+    align?: FlowAlign | undefined;
+    justify?: FlowJustify | undefined;
+    divider?: boolean | undefined;
+    as?: FlowElement | undefined;
+    children: Snippet<[]>;
+}
+/** The flex flow `VStack` and `HStack` share; internal, not exported. */
+declare const Flow: import("svelte").Component<Props, {}, "">;
+type Flow = ReturnType<typeof Flow>;
+export default Flow;

package/dist/layout/Grid.svelte

@@ -0,0 +1,23 @@
+<!-- @component
+A responsive grid sized by the narrowest an item may get, not by breakpoints.
+-->
+<!--
+  Grid — `repeat(auto-fill, minmax(<minItem>, 1fr))` (SwiftUI
+  `LazyVGrid(.adaptive(minimum:))`, Chakra `minChildWidth`): as many columns
+  as fit items at least `minItem` wide, so a card grid reflows by the space
+  it actually has, inside a sidebar or out. With `as="ul"` / `"ol"` it is a
+  list (`role="list"` restored; children `<li>`).
+-->
+<script lang="ts">import { gapClass, minItemClass } from "./space.js";
+let { minItem = "md", gap = "md", as = "div", children, class: className, ...rest } = $props();
+const list = $derived(as === "ul" || as === "ol");
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  role={list ? 'list' : rest.role}
+  class={['grid', minItemClass[minItem], gapClass[gap], list && 'list-none', className]}
+>
+  {@render children()}
+</svelte:element>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FlowElement, type Gap, type MinItem } from './space.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * The narrowest an item gets before the grid drops a column: `xs` 10rem,
+     * `sm` 12rem, `md` 16rem, `lg` 20rem.
+     * @defaultValue `'md'`
+     */
+    minItem?: MinItem | undefined;
+    /**
+     * Space between items.
+     * @defaultValue `'md'`
+     */
+    gap?: Gap | undefined;
+    /**
+     * The element. With `'ul'` / `'ol'`, children must be `<li>`s.
+     * @defaultValue `'div'`
+     */
+    as?: FlowElement | undefined;
+    children: Snippet<[]>;
+}
+/** A responsive grid sized by the narrowest an item may get, not by breakpoints. */
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/layout/HStack.svelte

@@ -0,0 +1,12 @@
+<!-- @component
+A horizontal stack: children side by side, on the spacing scale; optionally a column below `sm`.
+-->
+<!--
+  HStack — children in a row with a token gap (SwiftUI `HStack`, Compose `Row`). With `responsive`, a column on a narrow screen and a row from `sm` up. 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 { responsive = false, ...props } = $props();
+</script>
+
+<Flow direction={responsive ? 'responsive' : 'horizontal'} {...props} />

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

@@ -0,0 +1,34 @@
+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> {
+    /**
+     * Stack vertically below the `sm` breakpoint.
+     * @defaultValue `false`
+     */
+    responsive?: boolean | undefined;
+    /**
+     * 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 horizontal stack: children side by side, on the spacing scale; optionally a column below `sm`. */
+declare const HStack: import("svelte").Component<Props, {}, "">;
+type HStack = ReturnType<typeof HStack>;
+export default HStack;

package/dist/layout/Hero.svelte

@@ -0,0 +1,76 @@
+<!-- @component
+The large introductory block at the top of a landing or "about" page: a headline, supporting copy, calls to action, and an optional figure or background image, in daisyUI's `hero` styles.
+-->
+<!--
+  Hero — daisyUI's `hero` as a component: the top of a landing, marketing or
+  "about" page, where `PageHeader` is the top of an app page. It takes
+  arbitrary `children` rather than facts, which is why it is not a
+  `PageHeader` variant.
+
+  ARIA contract: the root is a `<section>` `aria-labelledby` its heading, so
+  it is a named region in the landmark list. The headline is a real heading
+  at `headingLevel`, `1` by default because a hero is normally the page's
+  title — a page with a `Hero` should not also render a `PageHeader` `<h1>`.
+  `actions` is a `role="group"` named by `actionsLabel`.
+
+  `backgroundImage` is decorative by definition, so it is a CSS
+  `background-image`, not an `<img>`: nothing enters the accessibility tree.
+  The copy over it sits on `hero-overlay` in `text-neutral-content`, so the
+  text keeps its contrast whatever the photo (WCAG 1.4.3). An image that
+  carries meaning belongs in `figure`, with alt text.
+-->
+<script lang="ts">let { title, headingLevel = 1, description, actions, actionsLabel = "Actions", figure, align, backgroundImage, children, class: className, style, ...rest } = $props();
+const uid = $props.id();
+const headingId = `${uid}-heading`;
+const centred = $derived((align ?? (figure === undefined ? "center" : "start")) === "center");
+const overlaid = $derived(backgroundImage !== undefined);
+// `JSON.stringify` quotes the URL, so a value with parentheses or spaces
+// cannot break out of `url(...)`.
+const background = $derived(backgroundImage === undefined ? undefined : `background-image: url(${JSON.stringify(backgroundImage)});`);
+export {};
+</script>
+
+{#snippet text(value: string | Snippet<[]>)}
+  {#if typeof value === 'string'}{value}{:else}{@render value()}{/if}
+{/snippet}
+
+<section
+  {...rest}
+  aria-labelledby={headingId}
+  style={[background, style].filter(Boolean).join(' ') || undefined}
+  class={['hero min-h-[50vh]', overlaid ? 'bg-cover bg-center' : 'bg-base-200', className]}
+>
+  {#if overlaid}
+    <div class="hero-overlay bg-neutral/60"></div>
+  {/if}
+  <div
+    class={[
+      'hero-content gap-8',
+      figure !== undefined && 'flex-col lg:flex-row',
+      centred && 'text-center',
+      overlaid && 'text-neutral-content',
+    ]}
+  >
+    <div class={['max-w-2xl space-y-5', centred && 'mx-auto']}>
+      <svelte:element
+        this={`h${headingLevel}`}
+        id={headingId}
+        class="text-4xl font-bold tracking-tight text-balance sm:text-5xl"
+      >
+        {@render text(title)}
+      </svelte:element>
+      {#if description !== undefined}
+        <p class={['text-lg leading-8', !overlaid && 'text-base-content/80']}>{@render text(description)}</p>
+      {/if}
+      {#if actions}
+        <div role="group" aria-label={actionsLabel} class={['flex flex-wrap gap-3', centred && 'justify-center']}>
+          {@render actions()}
+        </div>
+      {/if}
+      {#if children}<div>{@render children()}</div>{/if}
+    </div>
+    {#if figure}
+      <div class="w-full max-w-md shrink-0">{@render figure()}</div>
+    {/if}
+  </div>
+</section>

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

@@ -0,0 +1,36 @@
+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 headline: text, or a snippet for richer markup. */
+    title: string | Snippet<[]>;
+    /**
+     * The headline's level.
+     * @defaultValue `1`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /** Supporting copy under the headline. */
+    description?: string | Snippet<[]> | undefined;
+    /** The call-to-action row (`LinkButton`s), a group named by `actionsLabel`. */
+    actions?: Snippet<[]> | undefined;
+    /**
+     * Accessible name of the `actions` group.
+     * @defaultValue `'Actions'`
+     */
+    actionsLabel?: string | undefined;
+    /** A figure beside the copy; stacks under it on a phone. */
+    figure?: Snippet<[]> | undefined;
+    /**
+     * Where the copy aligns.
+     * @defaultValue `'start'` with a `figure`, `'center'` without
+     */
+    align?: 'start' | 'center' | undefined;
+    /** A decorative background image URL; the copy then sits on `hero-overlay` for contrast. */
+    backgroundImage?: string | undefined;
+    /** Extra content under the actions. */
+    children?: Snippet<[]> | undefined;
+}
+/** The large introductory block at the top of a landing or "about" page: a headline, supporting copy, calls to action, and an optional figure or background image, in daisyUI's `hero` styles. */
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/layout/Navbar.svelte

@@ -7,8 +7,8 @@ The site banner: brand, primary links and account controls, with a disclosure fo
   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
+  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.
 

package/dist/layout/Sidebar.svelte

@@ -6,7 +6,7 @@ The app shell’s navigation column: a brand mark, the primary links and an acco
   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
+  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.

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/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

@@ -16,14 +16,23 @@
  *
  * @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';

package/dist/layout/index.js

@@ -16,14 +16,23 @@
  *
  * @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.js";
 export * from "./types.js";

package/dist/layout/space.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The library's spacing rhythm and the layout primitives' vocabulary, as
+ * literal class tables.
+ *
+ * `VStack`, `HStack`, `Cluster`, `Grid` and `Fits` take tokens, not class
+ * names, so every app spaces things on the same scale. Tailwind only
+ * generates classes it can see verbatim in source, so each step is spelled
+ * out once here and looked up (the `ui/tones.ts` discipline).
+ *
+ * @module
+ */
+/** A step on the spacing scale. */
+export type Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Literal `gap-*` class per `Gap`; a lookup table so Tailwind's scanner sees every class. */
+export declare const gapClass: Record<Gap, string>;
+/** Cross-axis alignment of a stack's or cluster's items. */
+export type FlowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** Literal `items-*` class per `FlowAlign`; a lookup table so Tailwind's scanner sees every class. */
+export declare const alignClass: Record<FlowAlign, string>;
+/** Main-axis distribution of a stack's or cluster's items. */
+export type FlowJustify = 'start' | 'center' | 'end' | 'between';
+/** Literal `justify-*` class per `FlowJustify`; a lookup table so Tailwind's scanner sees every class. */
+export declare const justifyClass: Record<FlowJustify, string>;
+/** The narrowest an item of a `Grid` gets before the grid drops a column. */
+export type MinItem = 'xs' | 'sm' | 'md' | 'lg';
+/** Literal auto-fill column template per `MinItem`; a lookup table so Tailwind's scanner sees every class. */
+export declare const minItemClass: Record<MinItem, string>;
+/** The element a primitive renders. A list (`ul` / `ol`) takes `<li>` children. */
+export type FlowElement = 'div' | 'ul' | 'ol' | 'section' | 'nav';
+/** A container width at which a `Fits` layout stops fitting. */
+export type FitsBreakpoint = '20rem' | '28rem' | '36rem' | '48rem' | '64rem';
+/** Literal container-query class showing a `Fits` layout from this width up. */
+export declare const fitsShowFrom: Record<FitsBreakpoint, string>;
+/** Literal container-query class hiding a `Fits` layout from this width up. */
+export declare const fitsHideFrom: Record<FitsBreakpoint, string>;
+/**
+ * The classes of `Fits` layout `index` of `count`, given the widths at which
+ * each stops fitting (`breakpoints[i]` for layout `i`, one fewer than the
+ * layouts). The first shows from `breakpoints[0]` up, each next one between
+ * its own breakpoint and the previous one, and the last below the final
+ * breakpoint. Outside its band a layout is `display: none`, so it is out of
+ * the accessibility tree.
+ */
+export declare function fitsLayoutClass(index: number, count: number, breakpoints: readonly FitsBreakpoint[]): string[];