@donotdev/ui 0.0.13 → 0.0.14

package/dist/internal/common/RouteErrorFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/internal/common/RouteErrorFallback.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,EAAE,aAAa,CAAC,uBAAuB,CAyPrE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"RouteErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/internal/common/RouteErrorFallback.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,EAAE,aAAa,CAAC,uBAAuB,CAoPrE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/internal/devtools/components/AuthDebugButton.js

@@ -62,7 +62,7 @@ export const AuthDebugButton = () => {
                     zIndex: 'calc(var(--z-toast) + 100)',
                     marginBottom: 'var(--gap-sm)',
                     padding: 'var(--gap-md)',
-                    right: 0,
+                    insetInlineEnd: 0,
                     backgroundColor: 'rgba(0, 0, 0, 0.9)',
                     color: 'white',
                     borderRadius: 'var(--radius-lg)',

package/dist/internal/devtools/components/DesignTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DesignTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/DesignTab.tsx"],"names":[],"mappings":"AA+CA,eAAO,MAAM,SAAS,+CA2yBrB,CAAC"}
+{"version":3,"file":"DesignTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/DesignTab.tsx"],"names":[],"mappings":"AA+CA,eAAO,MAAM,SAAS,+CA4yBrB,CAAC"}

package/dist/internal/devtools/components/DesignTab.js

@@ -416,10 +416,11 @@ export const DesignTab = () => {
                                     return normalizeFontSize(style.fontSize) === normalizedSize;
                                 });
                                 found.forEach((el) => {
-                                    console.log(el, el.textContent?.trim().substring(0, 50));
+                                    // Log text content only (not the DOM node) to avoid memory leaks from retained element refs
+                                    console.log('[DesignTab]', el.textContent?.trim().substring(0, 50));
                                     el.style.outline = '2px solid red';
                                 });
-                                console.log(`Found ${found.length} elements with ${f.size}`);
+                                console.log(`[DesignTab] Found ${found.length} elements with ${f.size}`);
                             };
                             return (_jsxs(Stack, { direction: "row", justify: "between", align: "center", gap: "tight", style: {
                                     padding: 'var(--gap-sm)',

package/dist/internal/devtools/components/LayoutReset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutReset.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/LayoutReset.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,WAAW,EAAE,aAoOxB,CAAC"}
+{"version":3,"file":"LayoutReset.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/LayoutReset.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,WAAW,EAAE,aAqOxB,CAAC"}

package/dist/internal/devtools/components/LayoutReset.js

@@ -20,6 +20,8 @@ export const LayoutReset = memo(() => {
             return;
         if (!isClient())
             return; // SSR guard
+        if (process.env.NODE_ENV !== 'development')
+            return; // DevTools only
         setIsResetting(true);
         try {
             // Clear all caches and stores (comprehensive reset)

package/dist/internal/devtools/components/StoresTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoresTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/StoresTab.tsx"],"names":[],"mappings":"AAwCA,eAAO,MAAM,SAAS,+CAoHrB,CAAC"}
+{"version":3,"file":"StoresTab.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/components/StoresTab.tsx"],"names":[],"mappings":"AAwCA,eAAO,MAAM,SAAS,+CAsHrB,CAAC"}

package/dist/internal/devtools/components/StoresTab.js

@@ -53,6 +53,9 @@ export const StoresTab = () => {
         setStoreStates(states);
     }, []);
     useEffect(() => {
+        // StoresTab is only rendered inside DevTools (dev-only), but guard defensively
+        if (process.env.NODE_ENV !== 'development')
+            return;
         refreshStores();
         const interval = setInterval(refreshStores, 1000);
         return () => clearInterval(interval);

package/dist/internal/devtools/utils/envVarDiscovery.d.ts

@@ -15,6 +15,7 @@ export declare function discoverEnvVarsByPattern(env: Record<string, string>, pa
 export declare function groupEnvVarsByCategory(env: Record<string, string>): {
     stripe?: Record<string, string>;
     firebase?: Record<string, string>;
+    supabase?: Record<string, string>;
     oauth?: Record<string, string>;
     emulator?: Record<string, string>;
     other?: Record<string, string>;

package/dist/internal/devtools/utils/envVarDiscovery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"envVarDiscovery.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/utils/envVarDiscovery.ts"],"names":[],"mappings":"AA8BA;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC3B,QAAQ,EAAE,MAAM,EAAE,GACjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAWxB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC,CA2CA;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC3B,QAAQ,EAAE,MAAM,EAAE,GACjB,MAAM,GAAG,SAAS,CAOpB"}
+{"version":3,"file":"envVarDiscovery.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/utils/envVarDiscovery.ts"],"names":[],"mappings":"AA8BA;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC3B,QAAQ,EAAE,MAAM,EAAE,GACjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAWxB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC,CA+CA;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC3B,QAAQ,EAAE,MAAM,EAAE,GACjB,MAAM,GAAG,SAAS,CAOpB"}

package/dist/internal/devtools/utils/envVarDiscovery.js

@@ -62,6 +62,11 @@ export function groupEnvVarsByCategory(env) {
                 result.firebase = {};
             result.firebase[key] = value;
         }
+        else if (matchesPattern(key, '*SUPABASE*')) {
+            if (!result.supabase)
+                result.supabase = {};
+            result.supabase[key] = value;
+        }
         else if (matchesPattern(key, '*OAUTH*') ||
             matchesPattern(key, '*GOOGLE*CLIENT*') ||
             matchesPattern(key, '*GITHUB*CLIENT*') ||

package/dist/internal/devtools/utils/virtualModuleInspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"virtualModuleInspector.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/utils/virtualModuleInspector.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,OAAO,EAER,MAAM,UAAU,CAAC;AAElB,qBAAa,sBAAsB;WACpB,eAAe,IAAI,OAAO,CAAC,mBAAmB,CAAC;WAwE/C,cAAc,IAAI,OAAO,CAAC,mBAAmB,CAAC;IAyD3D,MAAM,CAAC,sBAAsB,IAAI,UAAU;IAoB3C,MAAM,CAAC,kBAAkB,IAAI,OAAO;WAgGvB,kBAAkB,IAAI,OAAO,CAAC,iBAAiB,CAAC;CAgF9D"}
+{"version":3,"file":"virtualModuleInspector.d.ts","sourceRoot":"","sources":["../../../../src/internal/devtools/utils/virtualModuleInspector.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,OAAO,EAER,MAAM,UAAU,CAAC;AAElB,qBAAa,sBAAsB;WACpB,eAAe,IAAI,OAAO,CAAC,mBAAmB,CAAC;WA4E/C,cAAc,IAAI,OAAO,CAAC,mBAAmB,CAAC;IA2D3D,MAAM,CAAC,sBAAsB,IAAI,UAAU;IAoB3C,MAAM,CAAC,kBAAkB,IAAI,OAAO;WAgGvB,kBAAkB,IAAI,OAAO,CAAC,iBAAiB,CAAC;CAgF9D"}

package/dist/internal/devtools/utils/virtualModuleInspector.js

@@ -36,12 +36,14 @@ export class VirtualModuleInspector {
                 }
             }
             const tokenCount = Object.keys(designTokens).length;
-            console.log('🎯 Design Tokens:', {
-                platform,
-                tokenCount,
-                sampleTokens: Object.keys(designTokens).slice(0, 5),
-                source,
-            });
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[VirtualModuleInspector] Design Tokens:', {
+                    platform,
+                    tokenCount,
+                    sampleTokens: Object.keys(designTokens).slice(0, 5),
+                    source,
+                });
+            }
             return {
                 success: true,
                 data: {
@@ -58,16 +60,18 @@ export class VirtualModuleInspector {
         }
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : String(error);
-            console.group('❌ Design Tokens Failed');
-            console.error('Error:', errorMessage);
-            console.log('Platform:', detectPlatform());
-            console.log('Environment:', {
-                isClient: typeof window !== 'undefined',
-                hasConfig: !!getDndevConfig(),
-                hasThemes: !!getDndevConfig()?.themes,
-                hasVariables: !!getDndevConfig()?.themes?.variables,
-            });
-            console.groupEnd();
+            if (process.env.NODE_ENV === 'development') {
+                console.group('[VirtualModuleInspector] Design Tokens Failed');
+                console.error('Error:', errorMessage);
+                console.log('Platform:', detectPlatform());
+                console.log('Environment:', {
+                    isClient: typeof window !== 'undefined',
+                    hasConfig: !!getDndevConfig(),
+                    hasThemes: !!getDndevConfig()?.themes,
+                    hasVariables: !!getDndevConfig()?.themes?.variables,
+                });
+                console.groupEnd();
+            }
             return {
                 success: false,
                 data: null,
@@ -100,11 +104,13 @@ export class VirtualModuleInspector {
                     console.warn('Failed to fetch i18n from API route:', error);
                 }
             }
-            console.log('🌐 i18n Mapping:', {
-                platform,
-                namespaces: Object.keys(i18nMapping),
-                source,
-            });
+            if (process.env.NODE_ENV === 'development') {
+                console.log('🌐 i18n Mapping:', {
+                    platform,
+                    namespaces: Object.keys(i18nMapping),
+                    source,
+                });
+            }
             return {
                 success: true,
                 data: {

package/dist/internal/initializers/BaseStoresInitializer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStoresInitializer.d.ts","sourceRoot":"","sources":["../../../src/internal/initializers/BaseStoresInitializer.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4DvC;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyGD;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAQ,EACR,YAAiB,EACjB,aAAqB,EACrB,aAAa,GACd,EAAE,0BAA0B,kDAgJ5B"}
+{"version":3,"file":"BaseStoresInitializer.d.ts","sourceRoot":"","sources":["../../../src/internal/initializers/BaseStoresInitializer.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4DvC;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyGD;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAQ,EACR,YAAiB,EACjB,aAAqB,EACrB,aAAa,GACd,EAAE,0BAA0B,kDA+K5B"}

package/dist/internal/initializers/BaseStoresInitializer.js

@@ -9,7 +9,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useThemeStore, useNavigationStore, useOverlayStore, useNetworkStore, useAbortControllerStore, useConsentStore, useConsentReady, useThemeReady, getPlatformEnvVar, } from '@donotdev/core';
 import { useI18nReady } from '@donotdev/core';
 import { handleError, isClient, getDndevConfig, globalEmitter, } from '@donotdev/core';
@@ -224,12 +224,36 @@ export function BaseStoresInitializer({ children, handlers, customStores = [], s
     const themeReady = useThemeReady();
     const i18nReady = useI18nReady();
     const criticalCustomStores = customStores.filter((config) => config.type === 'critical');
-    const customReadiness = criticalCustomStores.map((config) => {
-        const store = config.store;
-        return store((state) => ('isReady' in state ? state.isReady : false));
+    // Track custom store readiness via subscriptions — never call hooks inside .map()
+    const [allCustomReady, setAllCustomReady] = useState(() => {
+        if (criticalCustomStores.length === 0)
+            return true;
+        return criticalCustomStores.every((config) => {
+            const state = config.store.getState();
+            return 'isReady' in state && state.isReady === true;
+        });
     });
-    const allCustomReady = criticalCustomStores.length === 0 ||
-        customReadiness.every((ready) => ready === true);
+    useEffect(() => {
+        if (criticalCustomStores.length === 0) {
+            setAllCustomReady(true);
+            return;
+        }
+        const checkAll = () => criticalCustomStores.every((config) => {
+            const state = config.store.getState();
+            return 'isReady' in state && state.isReady === true;
+        });
+        // Subscribe to each critical custom store for readiness updates
+        const unsubscribers = criticalCustomStores.map((config) => config.store.subscribe(() => {
+            setAllCustomReady(checkAll());
+        }));
+        // Initial check in case stores became ready before subscriptions were set up
+        setAllCustomReady(checkAll());
+        return () => {
+            unsubscribers.forEach((unsub) => unsub());
+        };
+        // criticalCustomStores reference changes only when customStores prop changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [customStores]);
     const criticalReady = consentReady && themeReady && i18nReady && allCustomReady;
     // Two-phase loader: wait for BOTH framework AND route to be ready
     useLayoutEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"AutoMetaTags.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/components/AutoMetaTags.tsx"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAyE3C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,aAoN1B,CAAC;AAEF;;;GAGG;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AutoMetaTags.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/components/AutoMetaTags.tsx"],"names":[],"mappings":"AA0DA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAyE3C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,aAmN1B,CAAC;AAEF;;;GAGG;AAEH,eAAe,YAAY,CAAC"}

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

@@ -122,16 +122,15 @@ export const AutoMetaTags = () => {
     const location = useLocation();
     const seoConfig = useSeoConfig();
     const isClient = useIsClient();
-    // Return null if SEO is disabled
-    if (!seoConfig)
-        return null;
-    const { defaultNamespace = 'home', defaultImage, twitterHandle, staticTags = {}, } = seoConfig;
     const siteName = useAppConfig('name');
     const baseUrl = getPlatformEnvVar('APP_URL') || '';
-    // Get route metadata
+    // Get route metadata — computed from current pathname and client flag
     const routeMeta = getRouteMetadata(location.pathname, isClient);
-    // Memoize computed values for performance
+    // Memoize computed values for performance — must be called before any early return
     const metaData = useMemo(() => {
+        if (!seoConfig)
+            return null;
+        const { defaultNamespace = 'home', defaultImage, } = seoConfig;
         // Construct absolute URL for canonical link
         const currentUrl = `${baseUrl}${location.pathname}`;
         const ns = routeMeta.ns || defaultNamespace;
@@ -175,10 +174,13 @@ export const AutoMetaTags = () => {
         routeMeta,
         siteName,
         baseUrl,
-        defaultNamespace,
-        defaultImage,
+        seoConfig,
         t,
     ]);
+    // Return null if SEO is disabled — after all hooks have been called
+    if (!seoConfig || !metaData)
+        return null;
+    const { twitterHandle, staticTags = {} } = seoConfig;
     return (_jsxs(Helmet, { children: [_jsx("title", { children: metaData.title }), metaData.description && (_jsx("meta", { name: "description", content: metaData.description })), _jsx("link", { rel: "canonical", href: metaData.url }), metaData.keywords && (_jsx("meta", { name: "keywords", content: Array.isArray(metaData.keywords)
                     ? metaData.keywords.join(', ')
                     : metaData.keywords })), metaData.author && _jsx("meta", { name: "author", content: metaData.author }), metaData.noindex && _jsx("meta", { name: "robots", content: "noindex, nofollow" }), _jsx("meta", { property: "og:title", content: metaData.title }), metaData.description && (_jsx("meta", { property: "og:description", content: metaData.description })), _jsx("meta", { property: "og:url", content: metaData.url }), _jsx("meta", { property: "og:type", content: metaData.type }), metaData.image && _jsx("meta", { property: "og:image", content: metaData.image }), _jsx("meta", { property: "og:site_name", content: siteName }), metaData.type === 'article' && (_jsxs(_Fragment, { children: [metaData.author && (_jsx("meta", { property: "article:author", content: metaData.author })), metaData.publishDate && (_jsx("meta", { property: "article:published_time", content: metaData.publishDate })), metaData.modifiedDate && (_jsx("meta", { property: "article:modified_time", content: metaData.modifiedDate }))] })), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:title", content: metaData.title }), metaData.description && (_jsx("meta", { name: "twitter:description", content: metaData.description })), metaData.image && _jsx("meta", { name: "twitter:image", content: metaData.image }), twitterHandle && (_jsx("meta", { name: "twitter:site", content: `@${twitterHandle}` })), metaData.author && (_jsx("meta", { name: "twitter:creator", content: metaData.author })), _jsx("meta", { name: "format-detection", content: "telephone=no" }), _jsx("meta", { name: "mobile-web-app-capable", content: "yes" }), _jsx("meta", { name: "apple-mobile-web-app-status-bar-style", content: "default" }), Object.entries(staticTags).map(([name, content]) => (_jsx("meta", { name: name, content: content }, name))), metaData.image && metaData.image.startsWith('http') && (_jsx("link", { rel: "dns-prefetch", href: new URL(metaData.image).origin })), _jsx("script", { type: "application/ld+json", children: JSON.stringify({

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

@@ -0,0 +1,16 @@
+/**
+ * @fileoverview FontPreloadLinks - Server-only component for Next.js
+ * @description Reads public/dndev-font-preloads.json (written at build by FontPreloadWebpackPlugin) and renders preload link tags for Lighthouse-friendly LCP. Include in root layout so initial HTML contains the links.
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import type { ReactNode } from 'react';
+/**
+ * Server component: renders preload links for fonts listed in public/dndev-font-preloads.json.
+ * No-op if manifest is missing or empty. Use in root layout.tsx for SSR preload in initial HTML.
+ */
+export declare function FontPreloadLinks(): Promise<ReactNode>;
+export default FontPreloadLinks;
+//# sourceMappingURL=FontPreloadLinks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FontPreloadLinks.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/components/FontPreloadLinks.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC;;;GAGG;AACH,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,SAAS,CAAC,CA6B3D;AAED,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @fileoverview FontPreloadLinks - Server-only component for Next.js
+ * @description Reads public/dndev-font-preloads.json (written at build by FontPreloadWebpackPlugin) and renders preload link tags for Lighthouse-friendly LCP. Include in root layout so initial HTML contains the links.
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+const MANIFEST_FILENAME = 'dndev-font-preloads.json';
+/**
+ * Server component: renders preload links for fonts listed in public/dndev-font-preloads.json.
+ * No-op if manifest is missing or empty. Use in root layout.tsx for SSR preload in initial HTML.
+ */
+export async function FontPreloadLinks() {
+    const manifestPath = path.join(process.cwd(), 'public', MANIFEST_FILENAME);
+    let entries = [];
+    try {
+        const content = await fs.readFile(manifestPath, 'utf8');
+        const parsed = JSON.parse(content);
+        entries = Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return null;
+    }
+    if (entries.length === 0)
+        return null;
+    return (_jsx(_Fragment, { children: entries.map((e) => (_jsx("link", { rel: "preload", as: "font", href: e.href, type: e.type ?? 'font/woff2', crossOrigin: "anonymous" }, e.href))) }));
+}
+export default FontPreloadLinks;

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

@@ -19,9 +19,9 @@ interface PerformanceHintsProps {
      */
     dnsPrefetch?: string[];
     /**
-     * Fonts to preload for faster LCP
-     * Pass string[] for simple paths, or FontPreload[] for full control
-     * @default ['/fonts/Inter-latin.woff2']
+     * Additional fonts to preload (optional). Framework injects preloads at build time for Vite/Next;
+     * use this prop only for extra or custom font URLs.
+     * @default []
      */
     fontPreloads?: (string | FontPreload)[];
     /**
@@ -43,18 +43,13 @@ interface PerformanceHintsProps {
  *
  * @example
  * ```tsx
- * // Use defaults (preloads Inter-latin.woff2)
+ * // Default: preconnect/dns-prefetch only; font preload handled by framework build (Vite/Next)
  * <PerformanceHints />
  *
- * // Custom font preloads
- * <PerformanceHints fontPreloads={['/fonts/Roboto-400-latin.woff2']} />
+ * // Add custom font preload URLs
+ * <PerformanceHints fontPreloads={[customFontUrl]} />
  *
- * // Full control over font preload
- * <PerformanceHints
- *   fontPreloads={[{ href: '/fonts/Custom.woff2', type: 'font/woff2' }]}
- * />
- *
- * // Disable font preloads (e.g., when using next/font)
+ * // Disable font preloads
  * <PerformanceHints disableFontPreloads />
  * ```
  */

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

@@ -1 +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;AAmC3C,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"}
+{"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;AAoC3C,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;;;;;;;;;;;;;;;;;GAiBG;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

@@ -39,9 +39,10 @@ const DEFAULT_DNS_PREFETCH = [
     'https://www.googletagmanager.com',
 ];
 /**
- * Default critical fonts to preload
- * Empty by default - apps should specify their own fonts based on their font-display strategy
- * Note: Don't preload fonts with font-display: optional (they're meant to be non-blocking)
+ * Default critical fonts to preload.
+ * Empty: when using the framework's Vite or Next setup, font preload is handled by build-time
+ * injection (Vite: FontPreloadPlugin patches index.html; Next: FontPreloadLinks in root layout
+ * reads public/dndev-font-preloads.json). Pass fontPreloads only for extra/custom URLs.
  */
 const DEFAULT_FONT_PRELOADS = [];
 /**
@@ -52,18 +53,13 @@ const DEFAULT_FONT_PRELOADS = [];
  *
  * @example
  * ```tsx
- * // Use defaults (preloads Inter-latin.woff2)
+ * // Default: preconnect/dns-prefetch only; font preload handled by framework build (Vite/Next)
  * <PerformanceHints />
  *
- * // Custom font preloads
- * <PerformanceHints fontPreloads={['/fonts/Roboto-400-latin.woff2']} />
+ * // Add custom font preload URLs
+ * <PerformanceHints fontPreloads={[customFontUrl]} />
  *
- * // Full control over font preload
- * <PerformanceHints
- *   fontPreloads={[{ href: '/fonts/Custom.woff2', type: 'font/woff2' }]}
- * />
- *
- * // Disable font preloads (e.g., when using next/font)
+ * // Disable font preloads
  * <PerformanceHints disableFontPreloads />
  * ```
  */

package/dist/internal/layout/components/footer/useLegalLinks.d.ts

@@ -4,11 +4,12 @@ export interface FooterLegalLink {
     label: string;
 }
 /**
- * Hook to get the configured legal links
+ * Returns the configured legal links for the footer.
  * Handles the logic: null = hide, undefined = defaults, array = custom
+ *
+ * @remarks Not a hook — no React state or effects. Named with `get` prefix.
  */
-export declare const useLegalLinks: (footerConfig: AppMetadata["footer"]) => {
-    path: string;
-    label: string;
-}[];
+export declare const getLegalLinks: (footerConfig: AppMetadata["footer"]) => FooterLegalLink[];
+/** @deprecated Use getLegalLinks instead */
+export declare const useLegalLinks: (footerConfig: AppMetadata["footer"]) => FooterLegalLink[];
 //# sourceMappingURL=useLegalLinks.d.ts.map

package/dist/internal/layout/components/footer/useLegalLinks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLegalLinks.d.ts","sourceRoot":"","sources":["../../../../../src/internal/layout/components/footer/useLegalLinks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAQD;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,cAAc,WAAW,CAAC,QAAQ,CAAC;;;GAQhE,CAAC"}
+{"version":3,"file":"useLegalLinks.d.ts","sourceRoot":"","sources":["../../../../../src/internal/layout/components/footer/useLegalLinks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAQD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,cAAc,WAAW,CAAC,QAAQ,CAAC,KAAG,eAAe,EAQlF,CAAC;AAEF,4CAA4C;AAC5C,eAAO,MAAM,aAAa,iBAXkB,WAAW,CAAC,QAAQ,CAAC,KAAG,eAAe,EAWzC,CAAC"}

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

@@ -5,10 +5,12 @@ const DEFAULT_LINKS = [
     { label: 'footer.legal.termsOfService', path: '/terms' },
 ];
 /**
- * Hook to get the configured legal links
+ * Returns the configured legal links for the footer.
  * Handles the logic: null = hide, undefined = defaults, array = custom
+ *
+ * @remarks Not a hook — no React state or effects. Named with `get` prefix.
  */
-export const useLegalLinks = (footerConfig) => {
+export const getLegalLinks = (footerConfig) => {
     // If explicitly null, return empty array (hidden)
     if (footerConfig?.legalLinks === null) {
         return [];
@@ -16,3 +18,5 @@ export const useLegalLinks = (footerConfig) => {
     // Use configured links or defaults
     return footerConfig?.legalLinks ?? DEFAULT_LINKS;
 };
+/** @deprecated Use getLegalLinks instead */
+export const useLegalLinks = getLegalLinks;

package/dist/internal/layout/zones/DnDevFooter.d.ts

@@ -17,6 +17,12 @@ export interface DnDevFooterProps {
  * 4. app.footer.copyright === string -> custom copyright
  * 5. LegalLinks from app.footer.legalLinks (defaults if undefined)
  * 6. DoNotDev branding always appended
+ *
+ * @critical The `<footer>` MUST have `role="contentinfo"` and className `"footer"`.
+ * ALL footer CSS in layout-variables.css targets `footer[role='contentinfo']`.
+ * This controls: grid placement, height, border, footer-mode scroll behavior,
+ * preset-specific visibility (moolti/plain hide footer, blog hides on mobile).
+ * DO NOT change role, tag, or className.
  */
 declare function DnDevFooterComponent({ app }: DnDevFooterProps): ReactNode;
 export declare const DnDevFooter: import("react").MemoExoticComponent<typeof DnDevFooterComponent>;

package/dist/internal/layout/zones/DnDevFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DnDevFooter.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/zones/DnDevFooter.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAUlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,oBAAoB,CAAC,EAAE,GAAQ,EAAE,EAAE,gBAAgB,GAAG,SAAS,CA8EvE;AAED,eAAO,MAAM,WAAW,kEAA6B,CAAC"}
+{"version":3,"file":"DnDevFooter.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/zones/DnDevFooter.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAUlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,oBAAoB,CAAC,EAAE,GAAQ,EAAE,EAAE,gBAAgB,GAAG,SAAS,CA8EvE;AAED,eAAO,MAAM,WAAW,kEAA6B,CAAC"}

package/dist/internal/layout/zones/DnDevFooter.js

@@ -17,7 +17,7 @@ import { Stack } from '@donotdev/components';
 import { useBreakpoint, useTranslation, maybeTranslate } from '@donotdev/core';
 import { Link } from '../../../routing/Link';
 import { FooterBranding } from '../components/footer/FooterBranding';
-import { useLegalLinks, } from '../components/footer/useLegalLinks';
+import { getLegalLinks, } from '../components/footer/useLegalLinks';
 /**
  * DnDevFooter - Simple footer: Copyright (left) | LegalLinks + DoNotDev (right)
  *
@@ -31,16 +31,22 @@ import { useLegalLinks, } from '../components/footer/useLegalLinks';
  * 4. app.footer.copyright === string -> custom copyright
  * 5. LegalLinks from app.footer.legalLinks (defaults if undefined)
  * 6. DoNotDev branding always appended
+ *
+ * @critical The `<footer>` MUST have `role="contentinfo"` and className `"footer"`.
+ * ALL footer CSS in layout-variables.css targets `footer[role='contentinfo']`.
+ * This controls: grid placement, height, border, footer-mode scroll behavior,
+ * preset-specific visibility (moolti/plain hide footer, blog hides on mobile).
+ * DO NOT change role, tag, or className.
  */
 function DnDevFooterComponent({ app = {} }) {
     const { t } = useTranslation('dndev');
     const isLaptopOrDesktop = useBreakpoint('isLaptopOrDesktop');
+    // Get legal links (defaults or custom) — must be called before any return
+    const links = getLegalLinks(app?.footer);
     // Explicit null hides footer
     if (app?.footer === null) {
         return null;
     }
-    // Get legal links (defaults or custom)
-    const links = useLegalLinks(app.footer);
     // Copyright: null = hide, undefined = default, string = custom
     const copyrightConfig = app.footer?.copyright;
     const showCopyright = copyrightConfig !== null;
@@ -49,7 +55,7 @@ function DnDevFooterComponent({ app = {} }) {
         : copyrightConfig;
     // Desktop/Wide: 2-zone layout [Copyright] | [Links + DoNotDev]
     if (isLaptopOrDesktop) {
-        return (_jsx("footer", { role: "contentinfo", className: "footer", children: _jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "none", children: [showCopyright && (_jsx("div", { className: "dndev-flex dndev-justify-start", children: _jsx("span", { className: "footer-copyright", children: copyrightText }) })), _jsx("div", { className: "dndev-flex dndev-justify-end", children: _jsxs(Stack, { direction: "row", align: "center", children: [links.map((link) => (_jsx(Link, { path: link.path, style: { fontSize: 'var(--font-size-xs)' }, children: maybeTranslate(t, link.label) }, link.path))), _jsx(FooterBranding, {})] }) })] }) }));
+        return (_jsx("footer", { role: "contentinfo", className: "footer", children: _jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "none", children: [showCopyright && (_jsx("div", { style: { display: 'flex', justifyContent: 'flex-start' }, children: _jsx("span", { className: "footer-copyright", children: copyrightText }) })), _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end' }, children: _jsxs(Stack, { direction: "row", align: "center", children: [links.map((link) => (_jsx(Link, { path: link.path, style: { fontSize: 'var(--font-size-xs)' }, children: maybeTranslate(t, link.label) }, link.path))), _jsx(FooterBranding, {})] }) })] }) }));
     }
     // Mobile/Tablet: stacked layout
     return (_jsx("footer", { role: "contentinfo", className: "footer", children: _jsxs(Stack, { align: "center", gap: "tight", children: [showCopyright && (_jsx("span", { className: "footer-copyright", children: copyrightText })), _jsxs(Stack, { direction: "row", wrap: "wrap", gap: "tight", justify: "center", align: "center", children: [links.map((link) => (_jsx(Link, { path: link.path, style: { fontSize: 'var(--font-size-xs)' }, children: maybeTranslate(t, link.label) }, link.path))), _jsx(FooterBranding, {})] })] }) }));

package/dist/internal/layout/zones/DnDevHeader.d.ts

@@ -12,6 +12,13 @@ export interface DnDevHeaderProps {
  *
  * Layout: start (start-aligned) | center (absolutely centered) | end (end-aligned)
  * Center is absolutely positioned overlay, independent of start/end content.
+ *
+ * @critical The `<header>` MUST have `role="banner"` and className `"header"`.
+ * ALL header CSS in layout-variables.css targets `header[role='banner']`.
+ * The inner divs MUST use classNames `"header-start"`, `"header-center"`, `"header-end"`.
+ * Removing or renaming any of these silently breaks header layout, spacing, visibility,
+ * and preset-specific rules (e.g. landing compact mode, mergedBar hiding).
+ * DO NOT change role, tag, or classNames.
  */
 declare function DnDevHeaderComponent({ start, center, end, }: DnDevHeaderProps): ReactNode;
 export declare const DnDevHeader: import("react").MemoExoticComponent<typeof DnDevHeaderComponent>;

package/dist/internal/layout/zones/DnDevHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DnDevHeader.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/zones/DnDevHeader.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACxB;AAED;;;;;GAKG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,GAAG,GACJ,EAAE,gBAAgB,GAAG,SAAS,CAgB9B;AAED,eAAO,MAAM,WAAW,kEAA6B,CAAC"}
+{"version":3,"file":"DnDevHeader.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/zones/DnDevHeader.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,GAAG,GACJ,EAAE,gBAAgB,GAAG,SAAS,CAgB9B;AAED,eAAO,MAAM,WAAW,kEAA6B,CAAC"}

package/dist/internal/layout/zones/DnDevHeader.js

@@ -20,6 +20,13 @@ import { cn } from '@donotdev/components';
  *
  * Layout: start (start-aligned) | center (absolutely centered) | end (end-aligned)
  * Center is absolutely positioned overlay, independent of start/end content.
+ *
+ * @critical The `<header>` MUST have `role="banner"` and className `"header"`.
+ * ALL header CSS in layout-variables.css targets `header[role='banner']`.
+ * The inner divs MUST use classNames `"header-start"`, `"header-center"`, `"header-end"`.
+ * Removing or renaming any of these silently breaks header layout, spacing, visibility,
+ * and preset-specific rules (e.g. landing compact mode, mergedBar hiding).
+ * DO NOT change role, tag, or classNames.
  */
 function DnDevHeaderComponent({ start, center, end, }) {
     // Check if center has content

package/dist/internal/layout/zones/DnDevMergedBar.d.ts

@@ -20,6 +20,13 @@ export interface DnDevMergedBarProps {
  * Slots are customizable per-preset with smart defaults:
  * - trigger: What shows in the fixed bar (default: header.start or AppBranding)
  * - top/content/bottom: Sheet content (default: derived from sidebar)
+ *
+ * @critical The outer `<div>` MUST have className `"merged-bar"` and `data-position`.
+ * ALL mergedBar CSS in layout-variables.css targets `.merged-bar` and `.merged-bar[data-position]`.
+ * This controls: position:fixed placement, display:none/flex toggling per preset + breakpoint,
+ * safe area padding, border, and z-index. Inner divs MUST keep `"merged-bar-trigger"`,
+ * `"merged-bar-sheet-content"`, `"merged-bar-sheet-scroll"` classNames.
+ * DO NOT change classNames or data attributes.
  */
 declare function DnDevMergedBarComponent({ position, height, trigger, top, content, bottom, }: DnDevMergedBarProps): ReactNode;
 export declare const DnDevMergedBar: import("react").MemoExoticComponent<typeof DnDevMergedBarComponent>;

package/dist/internal/layout/zones/DnDevMergedBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DnDevMergedBar.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/zones/DnDevMergedBar.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,mBAAmB;IAClC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,iBAAS,uBAAuB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,EACH,OAAO,EACP,MAAM,GACP,EAAE,mBAAmB,GAAG,SAAS,CA8DjC;AAED,eAAO,MAAM,cAAc,qEAAgC,CAAC"}
+{"version":3,"file":"DnDevMergedBar.d.ts","sourceRoot":"","sources":["../../../../src/internal/layout/zones/DnDevMergedBar.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,mBAAmB;IAClC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC3B,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,uBAAuB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,GAAG,EACH,OAAO,EACP,MAAM,GACP,EAAE,mBAAmB,GAAG,SAAS,CAgEjC;AAED,eAAO,MAAM,cAAc,qEAAgC,CAAC"}

package/dist/internal/layout/zones/DnDevMergedBar.js

@@ -24,10 +24,19 @@ import { useLocation } from '@donotdev/ui/routing/hooks';
  * Slots are customizable per-preset with smart defaults:
  * - trigger: What shows in the fixed bar (default: header.start or AppBranding)
  * - top/content/bottom: Sheet content (default: derived from sidebar)
+ *
+ * @critical The outer `<div>` MUST have className `"merged-bar"` and `data-position`.
+ * ALL mergedBar CSS in layout-variables.css targets `.merged-bar` and `.merged-bar[data-position]`.
+ * This controls: position:fixed placement, display:none/flex toggling per preset + breakpoint,
+ * safe area padding, border, and z-index. Inner divs MUST keep `"merged-bar-trigger"`,
+ * `"merged-bar-sheet-content"`, `"merged-bar-sheet-scroll"` classNames.
+ * DO NOT change classNames or data attributes.
  */
 function DnDevMergedBarComponent({ position, height, trigger, top, content, bottom, }) {
     const { t } = useTranslation('dndev');
     const Icon = position === 'top' ? Menu : ChevronUp;
+    // Sheet component accepts 'left'|'right'|'top'|'bottom' (physical), not logical properties.
+    // For RTL apps, this would need Sheet to support 'start'/'end' sides — tracked separately.
     const sheetSide = position === 'top' ? 'left' : position;
     const [open, setOpen] = useState(false);
     const location = useLocation();