@autumnsgrove/groveengine 0.6.4 → 0.6.5

package/dist/ui/components/ui/Logo.svelte

@@ -7,8 +7,21 @@
 	 * when placed in an accent-colored context, or can be overridden.
 	 *
 	 * The trunk defaults to Grove's classic bark brown (#5d4037).
+	 *
+	 * @example Loading state (breathing animation)
+	 * ```svelte
+	 * <Logo breathing />
+	 * <Logo breathing breathingSpeed="slow" />
+	 * ```
+	 * Note: breathing is intended for single loading indicators, not lists.
 	 */
 
+	import { tweened } from 'svelte/motion';
+	import { cubicInOut } from 'svelte/easing';
+	import { browser } from '$app/environment';
+
+	type BreathingSpeed = 'slow' | 'normal' | 'fast';
+
 	interface Props {
 		class?: string;
 		/** Foliage color - defaults to currentColor (inherits accent) */
@@ -19,8 +32,10 @@
 		monochrome?: boolean;
 		/** Add subtle sway animation */
 		animate?: boolean;
-		/** Add breathing animation (for loading states) */
+		/** Add breathing animation (for loading states, not lists) */
 		breathing?: boolean;
+		/** Breathing animation speed - 'slow' (1500ms), 'normal' (800ms), 'fast' (400ms) */
+		breathingSpeed?: BreathingSpeed;
 	}
 
 	let {
@@ -29,9 +44,28 @@
 		trunkColor,
 		monochrome = false,
 		animate = false,
-		breathing = false
+		breathing = false,
+		breathingSpeed = 'normal'
 	}: Props = $props();
 
+	// Breathing speed presets (duration per half-cycle in ms)
+	const BREATHING_SPEEDS = {
+		slow: 1500,    // 3s full cycle - calm, meditative
+		normal: 800,   // 1.6s full cycle - balanced
+		fast: 400      // 0.8s full cycle - urgent
+	} as const;
+
+	// Respect user's reduced motion preference (reactive to system changes)
+	const reducedMotionQuery = browser ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
+	let prefersReducedMotion = $state(reducedMotionQuery?.matches ?? false);
+
+	$effect(() => {
+		if (!reducedMotionQuery) return;
+		const handler = (e: MediaQueryListEvent) => { prefersReducedMotion = e.matches; };
+		reducedMotionQuery.addEventListener('change', handler);
+		return () => reducedMotionQuery.removeEventListener('change', handler);
+	});
+
 	// Classic bark brown from the nature palette
 	const BARK_BROWN = '#5d4037';
 
@@ -41,8 +75,85 @@
 		? foliageColor
 		: (trunkColor ?? BARK_BROWN);
 
-	// Build animation classes (using $derived for reactivity)
-	const animationClass = $derived(breathing ? 'grove-logo-breathe' : (animate ? 'grove-logo-sway' : ''));
+	// Breathing animation using tweened store (duration set dynamically in $effect)
+	const breathValue = tweened(0, { easing: cubicInOut });
+
+	// Animation loop for breathing effect
+	// Re-runs when breathing or breathingSpeed changes, ensuring reactive duration updates
+	$effect(() => {
+		const duration = BREATHING_SPEEDS[breathingSpeed];
+
+		// Disable animation if breathing is off or user prefers reduced motion
+		if (!breathing || prefersReducedMotion) {
+			// Use half the breathing duration for smoother exit transition
+			breathValue.set(0, { duration: Math.min(duration / 2, 300) });
+			return;
+		}
+
+		let cancelled = false;
+
+		async function pulse() {
+			while (!cancelled) {
+				await breathValue.set(1, { duration });
+				if (cancelled) break;
+				await breathValue.set(0, { duration });
+				if (cancelled) break;
+			}
+		}
+
+		pulse();
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	// Expansion values for breathing animation (in SVG units, tied to viewBox 417×512.238)
+	// These are absolute values within the SVG coordinate system, so they scale
+	// proportionally with the logo regardless of rendered size.
+	const expansion = $derived($breathValue * 22);
+	const diagExpansion = $derived($breathValue * 16); // ~16px at 45° angles
+
+	// Individual branch transforms
+	const leftTransform = $derived(`translate(${-expansion}, 0)`);
+	const rightTransform = $derived(`translate(${expansion}, 0)`);
+	const topTransform = $derived(`translate(0, ${-expansion})`);
+	const topLeftTransform = $derived(`translate(${-diagExpansion}, ${-diagExpansion})`);
+	const topRightTransform = $derived(`translate(${diagExpansion}, ${-diagExpansion})`);
+	const bottomLeftTransform = $derived(`translate(${-diagExpansion}, ${diagExpansion})`);
+	const bottomRightTransform = $derived(`translate(${diagExpansion}, ${diagExpansion})`);
+
+	// Build animation classes (sway only, breathing uses transforms)
+	const animationClass = $derived(animate && !breathing ? 'grove-logo-sway' : '');
+
+	// Decomposed foliage paths (8 pieces) for breathing animation
+	// Original path: "M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"
+	// Decomposed by tracing path commands and isolating geometric boundaries where arms meet center.
+	// If modifying, ensure pieces align at rest (breathValue=0) to match the original silhouette.
+
+	// Center anchor - the hub where all branches connect (stays stationary)
+	const centerPath = "M126 173.468 L171.476 124.872 L171.476 173.468 L126 173.468 M245.562 124.872 L290.972 173.268 L245.562 173.268 L245.562 124.872 M126.664 243.97 L171.476 243.97 L171.476 173.468 L126 173.468 L126.664 243.97 M290.252 243.77 L245.562 243.77 L245.562 173.268 L290.972 173.268 L290.252 243.77 M171.476 243.97 L208.519 258.11 L245.562 243.77 L245.562 173.268 L171.476 173.468 L171.476 243.97";
+
+	// Left horizontal bar
+	const leftBarPath = "M0 173.468 L126 173.468 L126.664 243.97 L0 243.97 Z";
+
+	// Right horizontal bar
+	const rightBarPath = "M290.972 173.268 L417 173.268 L417 243.77 L290.252 243.77 Z";
+
+	// Top vertical bar
+	const topBarPath = "M171.476 0 L245.562 0 L245.562 124.872 L171.476 124.872 Z";
+
+	// Top-left diagonal branch (arrow shape)
+	const topLeftDiagPath = "M126.068 173.468 L36.446 88.028 L86.037 37.043 L171.476 124.872 Z";
+
+	// Top-right diagonal branch (arrow shape)
+	const topRightDiagPath = "M245.562 124.872 L331 37.243 L380.552 88.028 L290.972 173.268 Z";
+
+	// Bottom-left diagonal branch (arrow shape)
+	const bottomLeftDiagPath = "M126.664 243.97 L36.446 331.601 L86.037 381.192 L208.519 258.11 L171.476 243.97 Z";
+
+	// Bottom-right diagonal branch (arrow shape)
+	const bottomRightDiagPath = "M290.252 243.77 L380.435 331.399 L331 381.192 L208.519 258.11 L245.562 243.77 Z";
 </script>
 
 <svg
@@ -51,10 +162,53 @@
 	viewBox="0 0 417 512.238"
 	aria-label="Grove logo"
 >
-	<!-- Trunk -->
+	<!-- Trunk (always static) -->
 	<path fill={actualTrunkColor} d="M171.274 344.942h74.09v167.296h-74.09V344.942z"/>
-	<!-- Foliage -->
-	<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+
+	{#if breathing}
+		<!-- Decomposed foliage with breathing animation -->
+
+		<!-- Center anchor (stationary) -->
+		<path fill={foliageColor} d={centerPath}/>
+
+		<!-- Left horizontal bar -->
+		<g transform={leftTransform}>
+			<path fill={foliageColor} d={leftBarPath}/>
+		</g>
+
+		<!-- Right horizontal bar -->
+		<g transform={rightTransform}>
+			<path fill={foliageColor} d={rightBarPath}/>
+		</g>
+
+		<!-- Top vertical bar -->
+		<g transform={topTransform}>
+			<path fill={foliageColor} d={topBarPath}/>
+		</g>
+
+		<!-- Top-left diagonal -->
+		<g transform={topLeftTransform}>
+			<path fill={foliageColor} d={topLeftDiagPath}/>
+		</g>
+
+		<!-- Top-right diagonal -->
+		<g transform={topRightTransform}>
+			<path fill={foliageColor} d={topRightDiagPath}/>
+		</g>
+
+		<!-- Bottom-left diagonal -->
+		<g transform={bottomLeftTransform}>
+			<path fill={foliageColor} d={bottomLeftDiagPath}/>
+		</g>
+
+		<!-- Bottom-right diagonal -->
+		<g transform={bottomRightTransform}>
+			<path fill={foliageColor} d={bottomRightDiagPath}/>
+		</g>
+	{:else}
+		<!-- Original single foliage path (for non-breathing state) -->
+		<path fill={foliageColor} d="M0 173.468h126.068l-89.622-85.44 49.591-50.985 85.439 87.829V0h74.086v124.872L331 37.243l49.552 50.785-89.58 85.24H417v70.502H290.252l90.183 87.629L331 381.192 208.519 258.11 86.037 381.192l-49.591-49.591 90.218-87.631H0v-70.502z"/>
+	{/if}
 </svg>
 
 <style>
@@ -63,24 +217,8 @@
 		50% { transform: rotate(1deg); }
 	}
 
-	@keyframes grove-logo-breathe {
-		0%, 100% {
-			transform: scale(1);
-			opacity: 0.7;
-		}
-		50% {
-			transform: scale(1.05);
-			opacity: 1;
-		}
-	}
-
 	.grove-logo-sway {
 		transform-origin: center bottom;
 		animation: grove-logo-sway 4s ease-in-out infinite;
 	}
-
-	.grove-logo-breathe {
-		transform-origin: center center;
-		animation: grove-logo-breathe 2s ease-in-out infinite;
-	}
 </style>

package/dist/ui/components/ui/Logo.svelte.d.ts

@@ -1,12 +1,4 @@
-/**
- * Grove Logo Component
- *
- * A logo that respects the user's accent color by default.
- * The foliage uses `currentColor` which inherits from --accent-color
- * when placed in an accent-colored context, or can be overridden.
- *
- * The trunk defaults to Grove's classic bark brown (#5d4037).
- */
+type BreathingSpeed = 'slow' | 'normal' | 'fast';
 interface Props {
     class?: string;
     /** Foliage color - defaults to currentColor (inherits accent) */
@@ -17,8 +9,10 @@ interface Props {
     monochrome?: boolean;
     /** Add subtle sway animation */
     animate?: boolean;
-    /** Add breathing animation (for loading states) */
+    /** Add breathing animation (for loading states, not lists) */
     breathing?: boolean;
+    /** Breathing animation speed - 'slow' (1500ms), 'normal' (800ms), 'fast' (400ms) */
+    breathingSpeed?: BreathingSpeed;
 }
 declare const Logo: import("svelte").Component<Props, {}, "">;
 type Logo = ReturnType<typeof Logo>;

package/dist/ui/tokens/fonts.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Grove Design System - Font Tokens
+ *
+ * Complete font catalog with metadata, CDN URLs, and helper utilities.
+ * All fonts are served from cdn.grove.place for optimal performance.
+ */
+/** CDN base URL for all font assets */
+export declare const FONT_CDN_BASE = "https://cdn.grove.place/fonts";
+/** Font category for organizing fonts */
+export type FontCategory = "default" | "accessibility" | "sans-serif" | "serif" | "monospace" | "display";
+/** Font format for @font-face src declarations */
+export type FontFormat = "truetype" | "opentype";
+/** Complete font definition with metadata */
+export interface FontDefinition {
+    /** Unique identifier used in database and fontMap */
+    id: string;
+    /** Display name shown to users */
+    name: string;
+    /** Font file name on CDN */
+    file: string;
+    /** Font format (truetype or opentype) */
+    format: FontFormat;
+    /** CSS font-family name (may include spaces) */
+    fontFamily: string;
+    /** Category for organizing fonts */
+    category: FontCategory;
+    /** Brief description of the font's purpose/style */
+    description: string;
+    /** CSS fallback stack */
+    fallback: string[];
+}
+/**
+ * Complete catalog of available fonts
+ * These fonts are served from cdn.grove.place
+ */
+export declare const fonts: readonly FontDefinition[];
+/** All valid font IDs */
+export type FontId = (typeof fonts)[number]["id"];
+/** Map of font IDs to their definitions */
+export declare const fontById: Record<FontId, FontDefinition>;
+/** Get fonts by category */
+export declare function getFontsByCategory(category: FontCategory): FontDefinition[];
+/** Get CDN URL for a font */
+export declare function getFontUrl(fontIdOrFile: string): string;
+/** Get complete CSS font-family value with fallbacks */
+export declare function getFontStack(fontId: FontId): string;
+/**
+ * Generate @font-face CSS for a single font
+ * @param fontId - Font ID to generate CSS for
+ * @returns CSS @font-face declaration string
+ */
+export declare function generateFontFace(fontId: FontId): string;
+/**
+ * Generate @font-face CSS for multiple fonts
+ * @param fontIds - Array of font IDs (defaults to all fonts)
+ * @returns CSS string with all @font-face declarations
+ */
+export declare function generateAllFontFaces(fontIds?: FontId[]): string;
+/**
+ * Font map matching the format used in +layout.svelte
+ * Maps font IDs to their complete CSS font-family values
+ */
+export declare const fontMap: Record<FontId, string>;
+/** Default font ID */
+export declare const DEFAULT_FONT: FontId;
+/** Total number of available fonts */
+export declare const FONT_COUNT: number;
+/** Font categories with human-readable labels */
+export declare const fontCategoryLabels: Record<FontCategory, string>;

package/dist/ui/tokens/fonts.js

@@ -0,0 +1,341 @@
+/**
+ * Grove Design System - Font Tokens
+ *
+ * Complete font catalog with metadata, CDN URLs, and helper utilities.
+ * All fonts are served from cdn.grove.place for optimal performance.
+ */
+/** CDN base URL for all font assets */
+export const FONT_CDN_BASE = "https://cdn.grove.place/fonts";
+/**
+ * Complete catalog of available fonts
+ * These fonts are served from cdn.grove.place
+ */
+export const fonts = [
+    // Default
+    {
+        id: "lexend",
+        name: "Lexend",
+        file: "Lexend-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Lexend",
+        category: "default",
+        description: "Modern, highly readable sans-serif. Grove default.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    // Accessibility fonts
+    {
+        id: "atkinson",
+        name: "Atkinson Hyperlegible",
+        file: "AtkinsonHyperlegible-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Atkinson Hyperlegible",
+        category: "accessibility",
+        description: "Designed for low vision readers. Maximum character distinction.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "opendyslexic",
+        name: "OpenDyslexic",
+        file: "OpenDyslexic-Regular.otf",
+        format: "opentype",
+        fontFamily: "OpenDyslexic",
+        category: "accessibility",
+        description: "Weighted bottoms reduce letter confusion for dyslexic readers.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "luciole",
+        name: "Luciole",
+        file: "Luciole-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Luciole",
+        category: "accessibility",
+        description: "French accessibility font designed for visually impaired readers.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    // Modern sans-serif fonts
+    {
+        id: "nunito",
+        name: "Nunito",
+        file: "Nunito-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Nunito",
+        category: "sans-serif",
+        description: "Friendly rounded sans-serif. Warm and approachable.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "quicksand",
+        name: "Quicksand",
+        file: "Quicksand-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Quicksand",
+        category: "sans-serif",
+        description: "Geometric sans with rounded terminals. Light and modern.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "manrope",
+        name: "Manrope",
+        file: "Manrope-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Manrope",
+        category: "sans-serif",
+        description: "Professional geometric sans. Clean and contemporary.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "instrument-sans",
+        name: "Instrument Sans",
+        file: "InstrumentSans-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Instrument Sans",
+        category: "sans-serif",
+        description: "Low contrast sans with humanist touches. Elegant simplicity.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    {
+        id: "plus-jakarta-sans",
+        name: "Plus Jakarta Sans",
+        file: "PlusJakartaSans-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Plus Jakarta Sans",
+        category: "sans-serif",
+        description: "Contemporary geometric sans. Balanced and versatile.",
+        fallback: [
+            "-apple-system",
+            "BlinkMacSystemFont",
+            "Segoe UI",
+            "Roboto",
+            "sans-serif",
+        ],
+    },
+    // Serif fonts
+    {
+        id: "cormorant",
+        name: "Cormorant",
+        file: "Cormorant-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Cormorant",
+        category: "serif",
+        description: "Elegant display serif inspired by Garamond. Refined and classic.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "bodoni-moda",
+        name: "Bodoni Moda",
+        file: "BodoniModa-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Bodoni Moda",
+        category: "serif",
+        description: "High contrast modern serif. Bold and sophisticated.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "lora",
+        name: "Lora",
+        file: "Lora-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Lora",
+        category: "serif",
+        description: "Well-balanced contemporary serif. Excellent for body text.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "eb-garamond",
+        name: "EB Garamond",
+        file: "EBGaramond-Regular.ttf",
+        format: "truetype",
+        fontFamily: "EB Garamond",
+        category: "serif",
+        description: "Revival of classic Garamond. Timeless book typography.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "merriweather",
+        name: "Merriweather",
+        file: "Merriweather-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Merriweather",
+        category: "serif",
+        description: "Designed for screen reading. Excellent legibility.",
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    {
+        id: "fraunces",
+        name: "Fraunces",
+        file: "Fraunces-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Fraunces",
+        category: "serif",
+        description: 'Soft serif with "wonky" optical axes. Warm personality.',
+        fallback: ["Georgia", "Times New Roman", "serif"],
+    },
+    // Monospace fonts
+    {
+        id: "ibm-plex-mono",
+        name: "IBM Plex Mono",
+        file: "IBMPlexMono-Regular.ttf",
+        format: "truetype",
+        fontFamily: "IBM Plex Mono",
+        category: "monospace",
+        description: "Corporate monospace with human warmth. Great for code.",
+        fallback: ["Courier New", "Consolas", "monospace"],
+    },
+    {
+        id: "cozette",
+        name: "Cozette",
+        file: "CozetteVector.ttf",
+        format: "truetype",
+        fontFamily: "Cozette",
+        category: "monospace",
+        description: "Bitmap-style vector font. Retro terminal aesthetic.",
+        fallback: ["Courier New", "Consolas", "monospace"],
+    },
+    // Display/special fonts
+    {
+        id: "alagard",
+        name: "Alagard",
+        file: "alagard.ttf",
+        format: "truetype",
+        fontFamily: "Alagard",
+        category: "display",
+        description: "Pixel art medieval display font. Fantasy and gaming.",
+        fallback: ["fantasy", "cursive"],
+    },
+    {
+        id: "calistoga",
+        name: "Calistoga",
+        file: "Calistoga-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Calistoga",
+        category: "display",
+        description: "Casual brush serif. Friendly headlines.",
+        fallback: ["Georgia", "serif"],
+    },
+    {
+        id: "caveat",
+        name: "Caveat",
+        file: "Caveat-Regular.ttf",
+        format: "truetype",
+        fontFamily: "Caveat",
+        category: "display",
+        description: "Handwritten script. Personal and informal.",
+        fallback: ["cursive", "sans-serif"],
+    },
+];
+/** Map of font IDs to their definitions */
+export const fontById = Object.fromEntries(fonts.map((font) => [font.id, font]));
+/** Get fonts by category */
+export function getFontsByCategory(category) {
+    return fonts.filter((font) => font.category === category);
+}
+/** Get CDN URL for a font */
+export function getFontUrl(fontIdOrFile) {
+    // If it's a font ID, look up the file
+    const font = fonts.find((f) => f.id === fontIdOrFile);
+    const file = font ? font.file : fontIdOrFile;
+    return `${FONT_CDN_BASE}/${file}`;
+}
+/** Get complete CSS font-family value with fallbacks */
+export function getFontStack(fontId) {
+    const font = fontById[fontId];
+    if (!font)
+        return fontById.lexend.fallback.join(", ");
+    const primary = font.fontFamily.includes(" ")
+        ? `'${font.fontFamily}'`
+        : font.fontFamily;
+    return [primary, ...font.fallback].join(", ");
+}
+/**
+ * Generate @font-face CSS for a single font
+ * @param fontId - Font ID to generate CSS for
+ * @returns CSS @font-face declaration string
+ */
+export function generateFontFace(fontId) {
+    const font = fontById[fontId];
+    if (!font)
+        return "";
+    return `@font-face {
+  font-family: '${font.fontFamily}';
+  src: url('${getFontUrl(font.file)}') format('${font.format}');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}`;
+}
+/**
+ * Generate @font-face CSS for multiple fonts
+ * @param fontIds - Array of font IDs (defaults to all fonts)
+ * @returns CSS string with all @font-face declarations
+ */
+export function generateAllFontFaces(fontIds) {
+    const ids = fontIds ?? fonts.map((f) => f.id);
+    return ids.map(generateFontFace).filter(Boolean).join("\n\n");
+}
+/**
+ * Font map matching the format used in +layout.svelte
+ * Maps font IDs to their complete CSS font-family values
+ */
+export const fontMap = Object.fromEntries(fonts.map((font) => [font.id, getFontStack(font.id)]));
+/** Default font ID */
+export const DEFAULT_FONT = "lexend";
+/** Total number of available fonts */
+export const FONT_COUNT = fonts.length;
+/** Font categories with human-readable labels */
+export const fontCategoryLabels = {
+    default: "Default",
+    accessibility: "Accessibility",
+    "sans-serif": "Sans-Serif",
+    serif: "Serif",
+    monospace: "Monospace",
+    display: "Display & Special",
+};

package/dist/ui/tokens/index.d.ts

@@ -1,6 +1,7 @@
-export * from './colors.js';
-export * from './typography.js';
-export * from './spacing.js';
-export * from './effects.js';
-export * from './animation.js';
+export * from "./colors.js";
+export * from "./typography.js";
+export * from "./spacing.js";
+export * from "./effects.js";
+export * from "./animation.js";
+export * from "./fonts.js";
 export declare const TOKENS_VERSION = "0.2.0";