Ship JetBrains Mono, add AuthLayout maxWidth and PageHeading breadcrumbs

The design system named JetBrains Mono as --font-mono but never loaded it.
The UI font was set on the Storybook canvas in .storybook/storybook.css, a
file excluded from files: ["dist"], so it reached the canvas and no consumer.
Every consuming app silently rendered in ui-monospace instead — SF Mono,
Consolas or DejaVu Sans Mono depending on the developer's OS.

Load it from the published src/tokens.css instead, self-hosted via
@fontsource/jetbrains-mono as a real dependency so consumers get the files
transitively. Latin subset, weights 400/500/600/700. Self-hosted rather than
CDN-loaded: consumers ship their own privacy policy and DPA, and a webfont CDN
sends every visitor's IP to a third party on first paint.

Alongside it, two additive APIs that consuming apps were forking components to
get: AuthLayout gains maxWidth (the card was hardcoded to max-w-md, so wider
onboarding and consent screens had to copy its markup), and PageHeading gains
breadcrumbs/breadcrumbAs (the trail and title are one visual unit, re-paired by
hand on every nested page).

PageHeading's title row is now min-h-11 so pages with and without an action
cluster align their titles; AuthLayout pins its footer to the bottom of the
viewport, which is a no-op unless a #footer slot is passed. Type-scale comments
corrected: PageHeading renders text-xl, not the text-2xl the token claimed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: StanBarrows

CHANGELOG.md

@@ -5,6 +5,58 @@ All notable changes to `@codebar-ag/storybook`.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
 this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v1.8.0
+
+### Fixed
+
+- **The design system declared JetBrains Mono but never shipped it, so every
+  consuming app rendered in the OS monospace fallback.** `--font-mono` named
+  `"JetBrains Mono"` in `tokens.css`, but the only font actually loaded was Open
+  Sans (used by the DocuWare mirror). The UI font was set on the Storybook canvas
+  via `.storybook/storybook.css` — a file excluded from `files: ["dist"]`, so it
+  reached the canvas and no consumer. Apps fell through to `ui-monospace`: SF
+  Mono on macOS, Consolas/Cascadia on Windows, DejaVu Sans Mono on Linux, with
+  different metrics on each.
+
+  The font is now loaded from the published `src/tokens.css`, self-hosted via
+  `@fontsource/jetbrains-mono` (a real `dependency`, so consumers receive the
+  files transitively). Latin subset, weights 400/500/600/700. Self-hosted rather
+  than CDN-loaded because consumers ship their own privacy policy and DPA, and a
+  webfont CDN sends every visitor's IP to a third party on first paint.
+
+  **Consumers need no change** — `@import "@codebar-ag/storybook/tokens.css"`
+  already pulls this in. Expect a visible shift in glyph metrics on first
+  upgrade: that is the app finally rendering in its own brand font.
+
+### Added
+
+- **`AuthLayout` gained a `maxWidth` prop** (`md` | `lg` | `xl` | `2xl`,
+  default `md`). The card was hardcoded to `max-w-md`, which forced apps with
+  wider auth-adjacent screens — onboarding with side-by-side billing fields,
+  consent screens with a document preview — to fork the component's markup.
+
+- **`PageHeading` gained `breadcrumbs` and `breadcrumbAs` props.** The trail and
+  the title are one visual unit (the trail's bottom spacing is part of the
+  heading block's rhythm), and consuming apps were otherwise re-pairing
+  `Breadcrumbs` with `PageHeading` by hand on every nested page. Pass
+  `breadcrumbAs` (e.g. Inertia's `Link`) for SPA navigation.
+
+### Changed
+
+- **`PageHeading`'s title row is now `min-h-11`.** A page with an action cluster
+  and a page without now align their titles on the same baseline; previously the
+  row's height tracked whether the page happened to have actions, so consecutive
+  pages visibly jumped. Bare headings grow by up to 16px.
+
+- **`AuthLayout` pins its footer to the bottom of the viewport** instead of
+  centering the whole stack as one group. Renders identically when no `#footer`
+  slot is passed; only footer-using callers see the difference.
+
+- **Type-scale documentation corrected.** `--text-xl` (20px) was labelled
+  "auth/section headers" and `--text-2xl` (24px) "page H1", but `PageHeading`
+  renders `text-xl` and only `ErrorLayout` uses `text-2xl`. Comments and the
+  token catalogue now match what the components do. No values changed.
+
 ## v1.7.1
 
 ### Fixed

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@codebar-ag/storybook",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "codebar-ag DocuHub — shared Vue 3 + Tailwind v4 design-system atoms and tokens, documented in Storybook.",
   "license": "MIT",
   "author": "codebar Solutions AG",
@@ -34,6 +34,7 @@
     "test:ci": "playwright test"
   },
   "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.3.0",
     "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {

package.json

@@ -33,3 +33,33 @@ export const Default: Story = {
             </AuthLayout>`,
     }),
 };
+
+// `maxWidth` widens the card for auth-adjacent screens that outgrow a single
+// column — onboarding with side-by-side fields, consent screens with a preview.
+export const Wide: Story = {
+    render: () => ({
+        components: { AuthLayout, Button, Field, Input },
+        template: `
+            <AuthLayout
+                max-width="2xl"
+                title="Create your workspace"
+                description="Billing details can be changed later."
+            >
+                <form class="grid gap-4 sm:grid-cols-2" novalidate @submit.prevent>
+                    <Field label="Company" name="company">
+                        <Input name="company" />
+                    </Field>
+                    <Field label="VAT number" name="vat">
+                        <Input name="vat" />
+                    </Field>
+                    <Field label="Street" name="street">
+                        <Input name="street" />
+                    </Field>
+                    <Field label="City" name="city">
+                        <Input name="city" />
+                    </Field>
+                    <Button type="submit" class="w-full sm:col-span-2">Continue</Button>
+                </form>
+            </AuthLayout>`,
+    }),
+};

src/components/layouts/AuthLayout.stories.ts

@@ -1,34 +1,59 @@
 <script setup lang="ts">
 // Centered single-card shell for auth screens (login, register, reset, OTP).
 // The brand slot sits above the card; footer links render quiet below it.
+import { computed } from 'vue';
 import Card from '../molecules/Card.vue';
 
-withDefaults(
+// Tailwind scans for literal class names, so each width is spelled out here
+// rather than interpolated into `max-w-${maxWidth}` at render time.
+const MAX_WIDTHS = {
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+} as const;
+
+// `maxWidth` defaults to md — the width this card was previously hardcoded to,
+// so existing callers render unchanged. The wider steps exist for auth-adjacent
+// screens that outgrow one column: onboarding with side-by-side billing fields,
+// consent screens showing a document alongside the form.
+const props = withDefaults(
     defineProps<{
         title?: string | null;
         description?: string | null;
+        maxWidth?: keyof typeof MAX_WIDTHS;
     }>(),
-    { title: null, description: null },
+    { title: null, description: null, maxWidth: 'md' },
 );
+
+const cardWidth = computed(() => MAX_WIDTHS[props.maxWidth]);
 </script>
 
 <template>
-  <div class="flex min-h-dvh flex-col items-center justify-center bg-bg px-4 py-10">
-    <div
-      v-if="$slots.brand"
-      class="mb-6"
-    >
-      <slot name="brand" />
-    </div>
+  <!-- Card centers in the space above the footer (`flex-1` + `justify-center`)
+       rather than the whole stack centering as one group, so the footer sits at
+       the bottom of the viewport on tall screens instead of floating just under
+       the card. Renders identically to the old markup when no footer slot is
+       passed; only footer-using callers see the difference. -->
+  <div class="flex min-h-dvh flex-col items-center bg-bg px-4 py-10">
+    <div class="flex w-full flex-1 flex-col items-center justify-center">
+      <div
+        v-if="$slots.brand"
+        class="mb-6"
+      >
+        <slot name="brand" />
+      </div>
 
-    <Card
-      size="lg"
-      :title="title"
-      :description="description"
-      class="w-full max-w-md animate-fade"
-    >
-      <slot />
-    </Card>
+      <Card
+        size="lg"
+        :title="title"
+        :description="description"
+        class="w-full animate-fade"
+        :class="cardWidth"
+      >
+        <slot />
+      </Card>
+    </div>
 
     <div
       v-if="$slots.footer"

src/components/layouts/AuthLayout.vue

@@ -47,3 +47,38 @@ export const WithActions: Story = {
         </PageHeading>`,
     }),
 };
+
+export const WithBreadcrumbs: Story = {
+    args: {
+        breadcrumbs: [
+            { label: 'Gateways', href: '#' },
+            { label: 'Mustermann AG', href: '#' },
+            { label: 'File cabinets' },
+        ],
+    },
+};
+
+// The everything case, and what most consuming pages actually render: trail,
+// title, description and an action cluster as one heading block.
+export const WithBreadcrumbsAndActions: Story = {
+    render: () => ({
+        components: { PageHeading, Button },
+        setup: () => ({
+            breadcrumbs: [
+                { label: 'Gateways', href: '#' },
+                { label: 'Mustermann AG', href: '#' },
+                { label: 'File cabinets' },
+            ],
+        }),
+        template: `<PageHeading :breadcrumbs="breadcrumbs">
+            File cabinets
+            <template #description>
+                Archives and document trays available to the connected MCP gateway.
+            </template>
+            <template #actions>
+                <Button variant="secondary" size="sm">Export</Button>
+                <Button size="sm">New cabinet</Button>
+            </template>
+        </PageHeading>`,
+    }),
+};

src/components/molecules/PageHeading.stories.ts

@@ -4,17 +4,27 @@
 // text-ink">` pattern repeated across most pages. An optional `#actions`
 // slot renders a right-aligned action cluster beside the title (wraps below
 // it on narrow screens) — omit the slot and this renders exactly as before.
+//
+// `breadcrumbs` renders a trail above the title. It lives here rather than
+// being composed by each caller because the two are a single visual unit: the
+// trail's spacing below itself is part of the heading block's rhythm, and every
+// consuming app was otherwise re-pairing them by hand on every nested page.
+// Pass `breadcrumbAs` (e.g. Inertia's `Link`) for SPA navigation, exactly as
+// Breadcrumbs' own `as` prop expects.
 import { computed, useSlots } from 'vue';
 import { cx } from '../../helpers/cx';
 import { useRootAttrs } from '../../composables/useRootAttrs';
+import Breadcrumbs, { type BreadcrumbItem } from './Breadcrumbs.vue';
 
 defineOptions({ inheritAttrs: false });
 
 withDefaults(
     defineProps<{
         eyebrow?: string | null;
+        breadcrumbs?: BreadcrumbItem[];
+        breadcrumbAs?: string | object;
     }>(),
-    { eyebrow: null },
+    { eyebrow: null, breadcrumbs: () => [], breadcrumbAs: 'a' },
 );
 
 const slots = useSlots();
@@ -24,32 +34,45 @@ const classes = computed(() => cx('text-xl font-semibold text-ink', classAttr.va
 </script>
 
 <template>
-  <div class="flex flex-wrap items-start justify-between gap-4">
-    <div class="min-w-0">
-      <p
-        v-if="eyebrow"
-        class="text-2xs uppercase tracking-wide text-muted"
-      >
-        {{ eyebrow }}
-      </p>
-      <h1
-        :class="classes"
-        v-bind="rootAttrs"
-      >
-        <slot />
-      </h1>
-      <p
-        v-if="slots.description"
-        class="mt-1 text-sm text-muted"
+  <div>
+    <Breadcrumbs
+      v-if="breadcrumbs.length"
+      :items="breadcrumbs"
+      :as="breadcrumbAs"
+      class="mb-2"
+    />
+
+    <!-- `min-h-11` matches the height of a Button, so a page WITH an action
+         cluster and a page without still line their titles up at the same
+         baseline. Without it the heading row's height tracks whether the page
+         happens to have actions, and consecutive pages visibly jump. -->
+    <div class="flex min-h-11 flex-wrap items-start justify-between gap-4">
+      <div class="min-w-0">
+        <p
+          v-if="eyebrow"
+          class="text-2xs uppercase tracking-wide text-muted"
+        >
+          {{ eyebrow }}
+        </p>
+        <h1
+          :class="classes"
+          v-bind="rootAttrs"
+        >
+          <slot />
+        </h1>
+        <p
+          v-if="slots.description"
+          class="mt-1 text-sm text-muted"
+        >
+          <slot name="description" />
+        </p>
+      </div>
+      <div
+        v-if="slots.actions"
+        class="flex flex-wrap items-center gap-2 shrink-0"
       >
-        <slot name="description" />
-      </p>
-    </div>
-    <div
-      v-if="slots.actions"
-      class="flex flex-wrap items-center gap-2 shrink-0"
-    >
-      <slot name="actions" />
+        <slot name="actions" />
+      </div>
     </div>
   </div>
 </template>

src/components/molecules/PageHeading.vue

@@ -71,8 +71,8 @@ export const typeScale: TypeStep[] = [
     { token: '--text-sm', textClass: 'text-sm', px: '13px / 18px', use: 'Body default, controls' },
     { token: '--text-base', textClass: 'text-base', px: '14px / 20px', use: 'Emphasized body, buttons' },
     { token: '--text-lg', textClass: 'text-lg', px: '16px / 24px', use: 'Card titles, section leads' },
-    { token: '--text-xl', textClass: 'text-xl', px: '20px / 28px', use: 'Auth/section headers' },
-    { token: '--text-2xl', textClass: 'text-2xl', px: '24px / 32px', use: 'Page H1' },
+    { token: '--text-xl', textClass: 'text-xl', px: '20px / 28px', use: 'Page H1, auth/section headers' },
+    { token: '--text-2xl', textClass: 'text-2xl', px: '24px / 32px', use: 'Error-page headline, display figures' },
 ];
 
 export interface RadiusToken {