@donotdev/ui 0.0.6 → 0.0.7

package/dist/internal/layout/components/PerformanceHints.d.ts

@@ -0,0 +1,64 @@
+import type { ComponentType } from 'react';
+interface FontPreload {
+    /** Path to font file (e.g., '/fonts/Inter-latin.woff2') */
+    href: string;
+    /** Font MIME type @default 'font/woff2' */
+    type?: string;
+    /** Cross-origin setting @default 'anonymous' */
+    crossOrigin?: 'anonymous' | 'use-credentials';
+}
+interface PerformanceHintsProps {
+    /**
+     * Additional origins to preconnect to
+     * These are merged with defaults
+     */
+    preconnects?: string[];
+    /**
+     * Additional origins to dns-prefetch
+     * These are merged with defaults
+     */
+    dnsPrefetch?: string[];
+    /**
+     * Fonts to preload for faster LCP
+     * Pass string[] for simple paths, or FontPreload[] for full control
+     * @default ['/fonts/Inter-latin.woff2']
+     */
+    fontPreloads?: (string | FontPreload)[];
+    /**
+     * Disable default preconnects (use only custom ones)
+     * @default false
+     */
+    disableDefaults?: boolean;
+    /**
+     * Disable default font preloads
+     * @default false
+     */
+    disableFontPreloads?: boolean;
+}
+/**
+ * PerformanceHints component
+ *
+ * Adds preconnect, dns-prefetch, and font preload hints to improve page load.
+ * Automatically includes common third-party origins and critical fonts.
+ *
+ * @example
+ * ```tsx
+ * // Use defaults (preloads Inter-latin.woff2)
+ * <PerformanceHints />
+ *
+ * // Custom font preloads
+ * <PerformanceHints fontPreloads={['/fonts/Roboto-400-latin.woff2']} />
+ *
+ * // Full control over font preload
+ * <PerformanceHints
+ *   fontPreloads={[{ href: '/fonts/Custom.woff2', type: 'font/woff2' }]}
+ * />
+ *
+ * // Disable font preloads (e.g., when using next/font)
+ * <PerformanceHints disableFontPreloads />
+ * ```
+ */
+declare const PerformanceHints: ComponentType<PerformanceHintsProps>;
+export default PerformanceHints;
+export type { FontPreload, PerformanceHintsProps };
+//# sourceMappingURL=PerformanceHints.d.ts.map

package/dist/internal/layout/components/PerformanceHints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceHints.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/components/PerformanceHints.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAkC3C,UAAU,WAAW;IACnB,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAC;CAC/C;AAED,UAAU,qBAAqB;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,gBAAgB,EAAE,aAAa,CAAC,qBAAqB,CA6D1D,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/internal/layout/components/PerformanceHints.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/ui/src/internal/layout/components/PerformanceHints.tsx
+/**
+ * @fileoverview Performance hints for faster page loads
+ * @description Adds preconnect, dns-prefetch, and font preload hints
+ *
+ * - Preconnect establishes early connections (DNS + TCP + TLS) to origins
+ *   the page will need, saving 100-300ms per origin on slow networks.
+ * - Font preload initiates font downloads early, reducing LCP by ~500-1000ms
+ *
+ * @version 0.0.2
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { Helmet } from 'react-helmet-async';
+/**
+ * Common third-party origins that benefit from preconnect
+ * Only includes origins that are commonly used and safe to preconnect
+ */
+const DEFAULT_PRECONNECTS = [
+    // YouTube embeds - thumbnails and iframe
+    'https://img.youtube.com',
+    'https://www.youtube.com',
+    // Google Fonts (if used)
+    'https://fonts.googleapis.com',
+    'https://fonts.gstatic.com',
+    // Google APIs (Firebase, Analytics, etc.)
+    'https://www.googleapis.com',
+    // Stripe (if used)
+    'https://js.stripe.com',
+];
+/**
+ * Origins to dns-prefetch only (less aggressive than preconnect)
+ * Use for origins that might be needed but aren't certain
+ */
+const DEFAULT_DNS_PREFETCH = [
+    'https://www.google-analytics.com',
+    'https://www.googletagmanager.com',
+];
+/**
+ * Default critical fonts to preload
+ * Inter-latin is the primary UI font used by the framework
+ */
+const DEFAULT_FONT_PRELOADS = ['/fonts/Inter-latin.woff2'];
+/**
+ * PerformanceHints component
+ *
+ * Adds preconnect, dns-prefetch, and font preload hints to improve page load.
+ * Automatically includes common third-party origins and critical fonts.
+ *
+ * @example
+ * ```tsx
+ * // Use defaults (preloads Inter-latin.woff2)
+ * <PerformanceHints />
+ *
+ * // Custom font preloads
+ * <PerformanceHints fontPreloads={['/fonts/Roboto-400-latin.woff2']} />
+ *
+ * // Full control over font preload
+ * <PerformanceHints
+ *   fontPreloads={[{ href: '/fonts/Custom.woff2', type: 'font/woff2' }]}
+ * />
+ *
+ * // Disable font preloads (e.g., when using next/font)
+ * <PerformanceHints disableFontPreloads />
+ * ```
+ */
+const PerformanceHints = ({ preconnects = [], dnsPrefetch = [], fontPreloads = [], disableDefaults = false, disableFontPreloads = false, }) => {
+    // Merge defaults with custom origins
+    const allPreconnects = disableDefaults
+        ? preconnects
+        : [...new Set([...DEFAULT_PRECONNECTS, ...preconnects])];
+    const allDnsPrefetch = disableDefaults
+        ? dnsPrefetch
+        : [...new Set([...DEFAULT_DNS_PREFETCH, ...dnsPrefetch])];
+    // Normalize font preloads to FontPreload objects
+    const normalizeFontPreload = (font) => typeof font === 'string' ? { href: font } : font;
+    const customFontPaths = fontPreloads.map((f) => typeof f === 'string' ? f : f.href);
+    const allFontPreloads = disableFontPreloads
+        ? []
+        : fontPreloads.length > 0
+            ? fontPreloads.map(normalizeFontPreload)
+            : DEFAULT_FONT_PRELOADS.filter((f) => !customFontPaths.includes(f)).map(normalizeFontPreload);
+    return (_jsxs(Helmet, { children: [allFontPreloads.map((font) => (_jsx("link", { rel: "preload", as: "font", href: font.href, type: font.type || 'font/woff2', crossOrigin: font.crossOrigin || 'anonymous' }, `font-${font.href}`))), allPreconnects.map((origin) => (_jsx("link", { rel: "preconnect", href: origin, crossOrigin: "anonymous" }, `preconnect-${origin}`))), allDnsPrefetch.map((origin) => (_jsx("link", { rel: "dns-prefetch", href: origin }, `dns-${origin}`)))] }));
+};
+export default PerformanceHints;

package/dist/internal/layout/components/footer/FooterBranding.js

@@ -20,7 +20,7 @@ import { useAppConfig } from '@donotdev/core';
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export const FooterBranding = ({ className, size = 'xs', }) => {
+export const FooterBranding = ({ className, size = 'sm', }) => {
     const appUrl = useAppConfig('url');
     const isFrameworkSite = appUrl === 'https://donotdev.com';
     const sizeStyles = {

package/dist/providers/NextJsAppProviders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NextJsAppProviders.d.ts","sourceRoot":"","sources":["../../src/providers/NextJsAppProviders.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiDxD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAyChE"}
+{"version":3,"file":"NextJsAppProviders.d.ts","sourceRoot":"","sources":["../../src/providers/NextJsAppProviders.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAkDxD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA4ChE"}

package/dist/providers/NextJsAppProviders.js

@@ -15,6 +15,7 @@ import { QueryProviders, AppConfigProvider } from '@donotdev/core';
 import { useConsent } from '@donotdev/core';
 import { NextJsStoresInitializer } from '../internal/initializers/NextJsStoresInitializer';
 import FaviconHead from '../internal/layout/components/FaviconHead';
+import PerformanceHints from '../internal/layout/components/PerformanceHints';
 // import NextJsAutoMetaTags from '../internal/layout/components/NextJsAutoMetaTags'; // Deprecated - metadata now server-side
 import { DnDevLayout } from '../internal/layout/DnDevLayout';
 import { SentryInitializer } from '../internal/providers/SentryInitializer';
@@ -45,5 +46,5 @@ function ConsentBanner() {
 }
 export function NextJsAppProviders(props) {
     const { config = {}, layout, children, serverCookies, customStores } = props;
-    return (_jsxs(AppConfigProvider, { config: config, platform: "nextjs", children: [_jsx(SentryInitializer, {}), _jsx(HelmetProvider, { children: _jsxs(NextJsStoresInitializer, { serverCookies: serverCookies, customStores: customStores, children: [_jsx(FaviconHead, {}), _jsx(QueryProviders, { children: _jsxs(UIProviders, { children: [_jsx(DnDevLayout, { layout: layout, children: children }), _jsx(ConsentBanner, {}), _jsx(Suspense, { fallback: null, children: _jsx(PWAUpdateNotification, {}) }), _jsx(Suspense, { fallback: null, children: _jsx(LicenseWatermark, {}) })] }) })] }) })] }));
+    return (_jsxs(AppConfigProvider, { config: config, platform: "nextjs", children: [_jsx(SentryInitializer, {}), _jsx(HelmetProvider, { children: _jsxs(NextJsStoresInitializer, { serverCookies: serverCookies, customStores: customStores, children: [_jsx(FaviconHead, {}), _jsx(PerformanceHints, {}), _jsx(QueryProviders, { children: _jsxs(UIProviders, { children: [_jsx(DnDevLayout, { layout: layout, children: children }), _jsx(ConsentBanner, {}), _jsx(Suspense, { fallback: null, children: _jsx(PWAUpdateNotification, {}) }), _jsx(Suspense, { fallback: null, children: _jsx(LicenseWatermark, {}) })] }) })] }) })] }));
 }

package/dist/providers/ViteAppProviders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViteAppProviders.d.ts","sourceRoot":"","sources":["../../src/providers/ViteAppProviders.tsx"],"names":[],"mappings":"AAcA,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAsBxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,2CA+BxD"}
+{"version":3,"file":"ViteAppProviders.d.ts","sourceRoot":"","sources":["../../src/providers/ViteAppProviders.tsx"],"names":[],"mappings":"AAcA,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AA2BxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,2CAkCxD"}

package/dist/providers/ViteAppProviders.js

@@ -30,6 +30,9 @@ const HelmetProvider = lazy(() => import('react-helmet-async').then((m) => ({ de
 const FaviconHead = lazy(() => import('../internal/layout/components/FaviconHead').then((m) => ({
     default: m.default,
 })));
+const PerformanceHints = lazy(() => import('../internal/layout/components/PerformanceHints').then((m) => ({
+    default: m.default,
+})));
 /**
  * ViteAppProviders - Vite platform-specific app providers
  *
@@ -77,5 +80,5 @@ export function ViteAppProviders(props) {
         routeGroups,
         layout,
     });
-    return (_jsxs(AppConfigProvider, { config: config, platform: "vite", children: [_jsx(SentryInitializer, {}), _jsx(ViteStoresInitializer, { customStores: customStores, children: _jsx(Suspense, { fallback: null, children: _jsxs(HelmetProvider, { children: [_jsx(FaviconHead, {}), _jsx(NavigationProvider, { router: router })] }) }) })] }));
+    return (_jsxs(AppConfigProvider, { config: config, platform: "vite", children: [_jsx(SentryInitializer, {}), _jsx(ViteStoresInitializer, { customStores: customStores, children: _jsx(Suspense, { fallback: null, children: _jsxs(HelmetProvider, { children: [_jsx(FaviconHead, {}), _jsx(PerformanceHints, {}), _jsx(NavigationProvider, { router: router })] }) }) })] }));
 }

package/dist/routing/useGoTo.d.ts

@@ -1,12 +1,11 @@
-import { type NavigationItem } from './useNavigation';
 /**
  * Hook for navigation with favorites and recents
  * Command component handles search/filtering
  */
 export declare const useGoTo: () => {
-    navigationItems: NavigationItem[];
-    favoriteItems: NavigationItem[];
-    recentItems: NavigationItem[];
+    navigationItems: import("./useNavigation").NavigationItem[];
+    favoriteItems: import("./useNavigation").NavigationItem[];
+    recentItems: import("./useNavigation").NavigationItem[];
     toggleFavorite: (path: string) => void;
     isFavorite: (path: string) => boolean;
     navigateToItem: (path: string) => void;

package/dist/routing/useGoTo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGoTo.d.ts","sourceRoot":"","sources":["../../src/routing/useGoTo.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAO1E;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;2BAmCT,MAAM;uBAUN,MAAM;2BAgBN,MAAM;CAehB,CAAC"}
+{"version":3,"file":"useGoTo.d.ts","sourceRoot":"","sources":["../../src/routing/useGoTo.ts"],"names":[],"mappings":"AAmBA;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;2BA4BT,MAAM;uBAQN,MAAM;2BAcN,MAAM;CAehB,CAAC"}

package/dist/routing/useGoTo.js

@@ -3,19 +3,15 @@
  * @fileoverview useGoTo Hook - Navigation search logic
  * @description Clean hook for Cmd+K navigation with favorites, recents, and filtering
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 import { useCallback, useMemo } from 'react';
-import { useLocalStorage } from '@donotdev/core';
+import { useNavigationStore } from '@donotdev/core';
 // Platform-specific hooks via conditional exports
 import { useNavigate } from '@donotdev/ui/routing/hooks';
 import { useNavigationItems } from './useNavigation';
-const FAVORITES_KEY = 'nav_favorites';
-const RECENT_KEY = 'nav_recent';
-const MAX_RECENT = 8;
-const EMPTY_ARRAY = [];
 /**
  * Hook for navigation with favorites and recents
  * Command component handles search/filtering
@@ -23,15 +19,12 @@ const EMPTY_ARRAY = [];
 export const useGoTo = () => {
     const navigate = useNavigate();
     const navigationItems = useNavigationItems() ?? [];
-    // LocalStorage state
-    const { value: favorites, setValue: setFavorites } = useLocalStorage(FAVORITES_KEY, {
-        defaultValue: EMPTY_ARRAY,
-        syncAcrossTabs: true,
-    });
-    const { value: recent, setValue: setRecent } = useLocalStorage(RECENT_KEY, {
-        defaultValue: EMPTY_ARRAY,
-        syncAcrossTabs: false,
-    });
+    // Navigation store (favorites and recent persisted per computer)
+    const favorites = useNavigationStore((state) => state.favorites);
+    const recent = useNavigationStore((state) => state.recent);
+    const toggleFavoriteStore = useNavigationStore((state) => state.toggleFavorite);
+    const isFavoriteStore = useNavigationStore((state) => state.isFavorite);
+    const addRecentStore = useNavigationStore((state) => state.addRecent);
     // Get favorite items
     const favoriteItems = useMemo(() => {
         if (!navigationItems.length)
@@ -45,16 +38,16 @@ export const useGoTo = () => {
         const items = navigationItems.filter((item) => recent.includes(item.path));
         return items.slice(0, 5);
     }, [recent, navigationItems]);
-    // Toggle favorite
+    // Toggle favorite (delegates to navigation store)
     const toggleFavorite = useCallback((path) => {
-        setFavorites((prev) => prev.includes(path) ? prev.filter((p) => p !== path) : [...prev, path]);
-    }, [setFavorites]);
-    // Check if item is favorite
-    const isFavorite = useCallback((path) => favorites.includes(path), [favorites]);
-    // Add to recent
+        toggleFavoriteStore(path);
+    }, [toggleFavoriteStore]);
+    // Check if item is favorite (delegates to navigation store)
+    const isFavorite = useCallback((path) => isFavoriteStore(path), [isFavoriteStore]);
+    // Add to recent (delegates to navigation store)
     const addRecent = useCallback((path) => {
-        setRecent((prev) => [path, ...prev.filter((p) => p !== path)].slice(0, MAX_RECENT));
-    }, [setRecent]);
+        addRecentStore(path);
+    }, [addRecentStore]);
     // Navigate to item
     const navigateToItem = useCallback((path) => {
         addRecent(path);

package/dist/styles/index.css

@@ -18,9 +18,9 @@
      Used by: CSS @media queries, JavaScript hooks, responsive components
      Note: CSS variables don't work in @media, so we use hardcoded px values
      =========================== */
-  --breakpoint-mobile: 768px;   /* < 768 = mobile */
-  --breakpoint-tablet: 1024px;  /* 768-1023 = tablet */
-  --breakpoint-laptop: 1440px;  /* 1024-1439 = laptop (key layout split) */
+  --breakpoint-mobile: 768px; /* < 768 = mobile */
+  --breakpoint-tablet: 1024px; /* 768-1023 = tablet */
+  --breakpoint-laptop: 1440px; /* 1024-1439 = laptop (key layout split) */
   --breakpoint-desktop: 1920px; /* 1440+ = desktop */
 
   /* ===========================
@@ -287,23 +287,39 @@
 
 [data-density='compact'] {
   /* Base sizes: Fluid responsiveness for all text, zoom-safe */
-  --font-size-base: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); /* 14-15px fluid */
-  --font-size-lg: clamp(1.05rem, 0.9375rem + 0.5vw, 1.125rem); /* 17-18px fluid */
-  --font-size-xl: clamp(1.26rem, 1.125rem + 0.75vw, 1.375rem); /* 20-22px fluid */
+  --font-size-base: clamp(
+    0.875rem,
+    0.8125rem + 0.25vw,
+    0.9375rem
+  ); /* 14-15px fluid */
+  --font-size-lg: clamp(
+    1.05rem,
+    0.9375rem + 0.5vw,
+    1.125rem
+  ); /* 17-18px fluid */
+  --font-size-xl: clamp(
+    1.26rem,
+    1.125rem + 0.75vw,
+    1.375rem
+  ); /* 20-22px fluid */
   /* Display sizes: Musical scale + fluid responsiveness */
   --font-size-2xl: clamp(
     1.512rem,
     1.375rem + 0.75vw,
     1.625rem
   ); /* 24-26px fluid */
-  --font-size-3xl: clamp(
-    1.814rem,
-    1.625rem + 1vw,
-    2rem
-  ); /* 29-32px fluid */
+  --font-size-3xl: clamp(1.814rem, 1.625rem + 1vw, 2rem); /* 29-32px fluid */
   --gap-sm: clamp(0.375rem, 0.3125rem + 0.25vw, 0.5rem); /* 6-8px fluid */
-  --gap-md: clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem); /* 12-14px fluid, zoom-safe */
-  --gap-lg: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); /* 24-28px fluid, zoom-safe */
+  --gap-md: clamp(
+    0.75rem,
+    0.625rem + 0.5vw,
+    0.875rem
+  ); /* 12-14px fluid, zoom-safe */
+  --gap-lg: clamp(
+    1.5rem,
+    1.25rem + 1vw,
+    1.75rem
+  ); /* 24-28px fluid, zoom-safe */
   --line-height: 1.2; /* Minor Third - All text */
 }
 
@@ -311,22 +327,34 @@
 
 [data-density='standard'] {
   /* Base sizes: Fluid responsiveness for all text, zoom-safe */
-  --font-size-base: clamp(1rem, 0.9375rem + 0.25vw, 1.0625rem); /* 16-17px fluid */
-  --font-size-lg: clamp(1.25rem, 1.125rem + 0.5vw, 1.375rem); /* 20-22px fluid */
-  --font-size-xl: clamp(1.563rem, 1.375rem + 0.75vw, 1.75rem); /* 25-28px fluid */
+  --font-size-base: clamp(
+    1rem,
+    0.9375rem + 0.25vw,
+    1.0625rem
+  ); /* 16-17px fluid */
+  --font-size-lg: clamp(
+    1.25rem,
+    1.125rem + 0.5vw,
+    1.375rem
+  ); /* 20-22px fluid */
+  --font-size-xl: clamp(
+    1.563rem,
+    1.375rem + 0.75vw,
+    1.75rem
+  ); /* 25-28px fluid */
   /* Display sizes: Musical scale + fluid responsiveness */
-  --font-size-2xl: clamp(
-    1.953rem,
-    1.75rem + 1vw,
-    2.25rem
-  ); /* 31-36px fluid */
+  --font-size-2xl: clamp(1.953rem, 1.75rem + 1vw, 2.25rem); /* 31-36px fluid */
   --font-size-3xl: clamp(
     2.441rem,
     2rem + 1.5vw,
     3rem
   ); /* 39-48px fluid - hero text */
   --gap-sm: clamp(0.5rem, 0.4375rem + 0.25vw, 0.625rem); /* 8-10px fluid */
-  --gap-md: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16-20px fluid, zoom-safe */
+  --gap-md: clamp(
+    1rem,
+    0.875rem + 0.5vw,
+    1.25rem
+  ); /* 16-20px fluid, zoom-safe */
   --gap-lg: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 32-40px fluid, zoom-safe */
   --line-height: 1.25; /* Major Third - All text */
 }
@@ -581,6 +609,7 @@ h6 {
   line-height: var(--line-height);
   color: var(--foreground);
   background: transparent;
+  text-wrap: balance; /* Equalize line lengths, prevent orphans */
 }
 
 h1 {
@@ -618,6 +647,7 @@ p {
   line-height: var(--line-height);
   color: var(--foreground);
   background: transparent;
+  text-wrap: pretty; /* Optimize last line, avoid orphans */
 }
 
 ul,
@@ -627,6 +657,7 @@ ol {
   color: var(--foreground);
   background: transparent;
   list-style-position: outside;
+  text-wrap: pretty;
 }
 
 ul {
@@ -1070,8 +1101,10 @@ em {
     -webkit-backdrop-filter: blur(20px) saturate(180%);
     border: var(--border-hairline) solid
       color-mix(in oklab, var(--card-foreground) 25%, transparent);
-    box-shadow: var(--shadow-lg),
-      inset 0 1px 0 0 color-mix(in oklab, var(--card-foreground) 10%, transparent);
+    box-shadow:
+      var(--shadow-lg),
+      inset 0 1px 0 0
+        color-mix(in oklab, var(--card-foreground) 10%, transparent);
   }
 
 /* Separator style */
@@ -8312,14 +8345,20 @@ main[role='main'][data-routing-animation='none'] {
     'header header'
     'sidebar main'
     'footer footer';
-  grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
+  grid-template-rows: var(--header-height) 1fr minmax(
+      var(--footer-height),
+      auto
+    );
   grid-template-columns: var(--sidebar-width) 1fr;
 
   /* Game layout: Grid rows adjust based on breakpoint (footer hidden on tablet/mobile) */
 }
 
 [data-layout='game']:root .dndev-layout {
-    grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
+    grid-template-rows: var(--header-height) 1fr minmax(
+        var(--footer-height),
+        auto
+      );
   }
 
 /* ===========================
@@ -8575,10 +8614,14 @@ aside[role='navigation'].sidebar[data-collapsed='true'] .dndev-interactive kbd {
 
 /* Force sidebar children to shrink - no blocking resize */
 
-aside.sidebar[role='navigation'] .sidebar-content,aside.sidebar[role='navigation'] .sidebar-top,aside.sidebar[role='navigation'] .sidebar-bottom {
+aside.sidebar[role='navigation'] .sidebar-top,aside.sidebar[role='navigation'] .sidebar-bottom {
     overflow: hidden;
   }
 
+aside.sidebar[role='navigation'] .sidebar-content {
+    overflow-x: hidden; /* Prevent horizontal scroll, allow vertical */
+  }
+
 aside.sidebar[role='navigation'] .dndev-interactive {
     overflow: hidden;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
@@ -48,19 +48,18 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "marked": "^17.0.1",
     "react-helmet-async": "^2.0.5",
-    "react-hook-form": "^7.68.0"
+    "react-hook-form": "^7.71.0"
   },
   "peerDependencies": {
-    "@donotdev/adv-comps": "0.0.6",
-    "@donotdev/auth": "0.0.6",
-    "@donotdev/billing": "0.0.6",
-    "@donotdev/components": "0.0.6",
-    "@donotdev/core": "0.0.6",
-    "@donotdev/crud": "0.0.6",
-    "@donotdev/firebase": "0.0.6",
-    "@donotdev/oauth": "0.0.6",
+    "@donotdev/adv-comps": "0.0.7",
+    "@donotdev/auth": "0.0.7",
+    "@donotdev/billing": "0.0.7",
+    "@donotdev/components": "0.0.7",
+    "@donotdev/core": "0.0.7",
+    "@donotdev/crud": "0.0.7",
+    "@donotdev/firebase": "0.0.7",
+    "@donotdev/oauth": "0.0.7",
     "firebase": "^12.5.0",
     "lucide-react": "^0.562.0",
     "react": "^19.2.3",