@autumnsgrove/groveengine 0.8.0 → 0.8.5

package/dist/ui/components/typography/EBGaramond.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const EBGaramond: import("svelte").Component<Props, {}, "">;
+type EBGaramond = ReturnType<typeof EBGaramond>;
+export default EBGaramond;

package/dist/ui/components/typography/FontProvider.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { FontId } from '../../tokens/fonts.js';
+	import { fontById, getFontUrl, getFontStack } from '../../tokens/fonts.js';
+
+	interface Props {
+		/** The font ID to apply */
+		font: FontId;
+		/** HTML element to render as */
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		/** Additional CSS classes */
+		class?: string;
+		/** Inline styles */
+		style?: string;
+		/** Content to render */
+		children: Snippet;
+	}
+
+	let { font, as = 'span', class: className = '', style = '', children }: Props = $props();
+
+	const fontDef = $derived(fontById[font]);
+	const fontStack = $derived(fontDef ? getFontStack(font) : 'inherit');
+	const combinedStyle = $derived(`font-family: ${fontStack};${style ? ` ${style}` : ''}`);
+
+	// Ensure the font is loaded (inject @font-face if not already present)
+	onMount(() => {
+		if (!fontDef) return;
+
+		const styleId = `grove-font-${font}`;
+		if (document.getElementById(styleId)) return;
+
+		const styleEl = document.createElement('style');
+		styleEl.id = styleId;
+		styleEl.textContent = `
+			@font-face {
+				font-family: '${fontDef.fontFamily}';
+				src: url('${getFontUrl(fontDef.file)}') format('${fontDef.format}');
+				font-weight: normal;
+				font-style: normal;
+				font-display: swap;
+			}
+		`;
+		document.head.appendChild(styleEl);
+	});
+</script>
+
+{#if as === 'div'}
+	<div class={className} style={combinedStyle}>
+		{@render children()}
+	</div>
+{:else if as === 'p'}
+	<p class={className} style={combinedStyle}>
+		{@render children()}
+	</p>
+{:else if as === 'h1'}
+	<h1 class={className} style={combinedStyle}>
+		{@render children()}
+	</h1>
+{:else if as === 'h2'}
+	<h2 class={className} style={combinedStyle}>
+		{@render children()}
+	</h2>
+{:else if as === 'h3'}
+	<h3 class={className} style={combinedStyle}>
+		{@render children()}
+	</h3>
+{:else if as === 'h4'}
+	<h4 class={className} style={combinedStyle}>
+		{@render children()}
+	</h4>
+{:else if as === 'h5'}
+	<h5 class={className} style={combinedStyle}>
+		{@render children()}
+	</h5>
+{:else if as === 'h6'}
+	<h6 class={className} style={combinedStyle}>
+		{@render children()}
+	</h6>
+{:else if as === 'code'}
+	<code class={className} style={combinedStyle}>
+		{@render children()}
+	</code>
+{:else if as === 'pre'}
+	<pre class={className} style={combinedStyle}>{@render children()}</pre>
+{:else if as === 'article'}
+	<article class={className} style={combinedStyle}>
+		{@render children()}
+	</article>
+{:else if as === 'section'}
+	<section class={className} style={combinedStyle}>
+		{@render children()}
+	</section>
+{:else}
+	<span class={className} style={combinedStyle}>
+		{@render children()}
+	</span>
+{/if}

package/dist/ui/components/typography/FontProvider.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { FontId } from '../../tokens/fonts.js';
+interface Props {
+    /** The font ID to apply */
+    font: FontId;
+    /** HTML element to render as */
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    /** Additional CSS classes */
+    class?: string;
+    /** Inline styles */
+    style?: string;
+    /** Content to render */
+    children: Snippet;
+}
+declare const FontProvider: import("svelte").Component<Props, {}, "">;
+type FontProvider = ReturnType<typeof FontProvider>;
+export default FontProvider;

package/dist/ui/components/typography/Fraunces.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="fraunces" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/Fraunces.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const Fraunces: import("svelte").Component<Props, {}, "">;
+type Fraunces = ReturnType<typeof Fraunces>;
+export default Fraunces;

package/dist/ui/components/typography/IBMPlexMono.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="ibm-plex-mono" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/IBMPlexMono.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const IBMPlexMono: import("svelte").Component<Props, {}, "">;
+type IBMPlexMono = ReturnType<typeof IBMPlexMono>;
+export default IBMPlexMono;

package/dist/ui/components/typography/InstrumentSans.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="instrument-sans" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/InstrumentSans.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const InstrumentSans: import("svelte").Component<Props, {}, "">;
+type InstrumentSans = ReturnType<typeof InstrumentSans>;
+export default InstrumentSans;

package/dist/ui/components/typography/Lexend.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="lexend" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/Lexend.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const Lexend: import("svelte").Component<Props, {}, "">;
+type Lexend = ReturnType<typeof Lexend>;
+export default Lexend;

package/dist/ui/components/typography/Lora.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="lora" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/Lora.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const Lora: import("svelte").Component<Props, {}, "">;
+type Lora = ReturnType<typeof Lora>;
+export default Lora;

package/dist/ui/components/typography/Luciole.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="luciole" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/Luciole.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const Luciole: import("svelte").Component<Props, {}, "">;
+type Luciole = ReturnType<typeof Luciole>;
+export default Luciole;

package/dist/ui/components/typography/Manrope.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="manrope" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/Manrope.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const Manrope: import("svelte").Component<Props, {}, "">;
+type Manrope = ReturnType<typeof Manrope>;
+export default Manrope;

package/dist/ui/components/typography/Merriweather.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="merriweather" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/Merriweather.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const Merriweather: import("svelte").Component<Props, {}, "">;
+type Merriweather = ReturnType<typeof Merriweather>;
+export default Merriweather;

package/dist/ui/components/typography/Nunito.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="nunito" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/Nunito.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const Nunito: import("svelte").Component<Props, {}, "">;
+type Nunito = ReturnType<typeof Nunito>;
+export default Nunito;

package/dist/ui/components/typography/OpenDyslexic.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="opendyslexic" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/OpenDyslexic.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const OpenDyslexic: import("svelte").Component<Props, {}, "">;
+type OpenDyslexic = ReturnType<typeof OpenDyslexic>;
+export default OpenDyslexic;

package/dist/ui/components/typography/PlusJakartaSans.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="plus-jakarta-sans" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/PlusJakartaSans.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const PlusJakartaSans: import("svelte").Component<Props, {}, "">;
+type PlusJakartaSans = ReturnType<typeof PlusJakartaSans>;
+export default PlusJakartaSans;

package/dist/ui/components/typography/Quicksand.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FontProvider from './FontProvider.svelte';
+
+	interface Props {
+		as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+		class?: string;
+		style?: string;
+		children: Snippet;
+	}
+
+	let { as = 'span', class: className = '', style = '', children }: Props = $props();
+</script>
+
+<FontProvider font="quicksand" {as} class={className} {style}>
+	{@render children()}
+</FontProvider>

package/dist/ui/components/typography/Quicksand.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'pre' | 'article' | 'section';
+    class?: string;
+    style?: string;
+    children: Snippet;
+}
+declare const Quicksand: import("svelte").Component<Props, {}, "">;
+type Quicksand = ReturnType<typeof Quicksand>;
+export default Quicksand;

package/dist/ui/components/typography/README.md

@@ -0,0 +1,153 @@
+# Typography Components
+
+Scoped font wrapper components for the Grove Design System. Each component loads its font from CDN on-demand and applies it to children.
+
+## Installation
+
+```ts
+import { Alagard, IBMPlexMono, Caveat } from '@autumnsgrove/groveengine/ui/typography';
+```
+
+## Quick Start
+
+```svelte
+<!-- Fantasy game header -->
+<Alagard as="h1" class="text-4xl">Welcome to the Grove</Alagard>
+
+<!-- Code block -->
+<IBMPlexMono as="code">console.log('hello');</IBMPlexMono>
+
+<!-- Handwritten note -->
+<Caveat as="p" class="text-2xl">A personal touch...</Caveat>
+```
+
+## Available Fonts
+
+### Display & Special (3)
+| Component | Font | Use Case |
+|-----------|------|----------|
+| `Alagard` | Alagard | Fantasy, gaming, medieval themes |
+| `Calistoga` | Calistoga | Friendly headlines, warm branding |
+| `Caveat` | Caveat | Handwritten notes, personal touches |
+
+### Serif (6)
+| Component | Font | Use Case |
+|-----------|------|----------|
+| `Cormorant` | Cormorant | Elegant headers, editorial |
+| `BodoniModa` | Bodoni Moda | High fashion, sophisticated |
+| `Lora` | Lora | Body text, readable articles |
+| `EBGaramond` | EB Garamond | Book typography, classic feel |
+| `Merriweather` | Merriweather | Screen reading, long-form content |
+| `Fraunces` | Fraunces | Warm personality, soft serif |
+
+### Sans-Serif (6)
+| Component | Font | Use Case |
+|-----------|------|----------|
+| `Lexend` | Lexend | Default, highly readable UI |
+| `Nunito` | Nunito | Friendly, approachable interfaces |
+| `Quicksand` | Quicksand | Light, modern, geometric |
+| `Manrope` | Manrope | Professional, clean interfaces |
+| `InstrumentSans` | Instrument Sans | Elegant simplicity |
+| `PlusJakartaSans` | Plus Jakarta Sans | Balanced, versatile |
+
+### Monospace (2)
+| Component | Font | Use Case |
+|-----------|------|----------|
+| `IBMPlexMono` | IBM Plex Mono | Code blocks, technical content |
+| `Cozette` | Cozette | Retro terminal, pixel aesthetic |
+
+### Accessibility (3)
+| Component | Font | Use Case |
+|-----------|------|----------|
+| `Atkinson` | Atkinson Hyperlegible | Low vision readers |
+| `OpenDyslexic` | OpenDyslexic | Dyslexic readers |
+| `Luciole` | Luciole | Visually impaired readers |
+
+## Props
+
+All font components accept the same props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `as` | `'span' \| 'div' \| 'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'code' \| 'pre' \| 'article' \| 'section'` | `'span'` | HTML element to render |
+| `class` | `string` | `''` | CSS classes (Tailwind works great) |
+| `style` | `string` | `''` | Inline styles |
+
+## Dynamic Font Selection
+
+Use `FontProvider` when you need to select fonts programmatically:
+
+```svelte
+<script>
+  import { FontProvider } from '@autumnsgrove/groveengine/ui/typography';
+  let selectedFont = 'cormorant';
+</script>
+
+<FontProvider font={selectedFont} as="article">
+  <p>Content with dynamic font...</p>
+</FontProvider>
+```
+
+## Performance
+
+- **On-demand loading**: Fonts load from CDN only when the component mounts
+- **Deduplication**: Each font's `@font-face` is injected once, even with multiple instances
+- **Swap display**: Uses `font-display: swap` for fast initial render
+- **CDN**: All fonts served from `cdn.grove.place` with proper caching
+
+## Accessibility Recommendations
+
+| Situation | Recommended Font |
+|-----------|-----------------|
+| Low vision users | `Atkinson` (maximum character distinction) |
+| Dyslexic readers | `OpenDyslexic` (weighted letter bottoms) |
+| General accessibility | `Lexend` (designed for reading fluency) |
+| Long-form reading | `Merriweather` or `Lora` (optimized for screens) |
+
+## Examples
+
+### Blog Post Header
+```svelte
+<Fraunces as="h1" class="text-4xl font-bold text-bark-900">
+  A Warm Welcome to the Grove
+</Fraunces>
+```
+
+### Code Documentation
+```svelte
+<IBMPlexMono as="pre" class="bg-bark-900 text-cream-100 p-4 rounded-lg">
+  {codeExample}
+</IBMPlexMono>
+```
+
+### Personal Note Card
+```svelte
+<div class="bg-rose-50 p-6 rounded-lg">
+  <Caveat as="p" class="text-2xl text-rose-900">
+    Thanks for being here...
+  </Caveat>
+</div>
+```
+
+### Mixed Typography
+```svelte
+<article>
+  <Alagard as="h1" class="text-3xl mb-4">Quest Log</Alagard>
+  <Lora as="div" class="prose">
+    <p>Your journey begins in the misty forests...</p>
+  </Lora>
+</article>
+```
+
+## Font Tokens
+
+The typography module also exports font metadata for programmatic use:
+
+```ts
+import {
+  fonts,           // Array of all font definitions
+  fontById,        // Map of font ID to definition
+  getFontStack,    // Get full font-family string with fallbacks
+  getFontUrl,      // Get CDN URL for a font file
+} from '@autumnsgrove/groveengine/ui/typography';
+```