feat: implement RouterProvider, add draft mode mechanisms, update storage keys, and refactor module transformation logic.

apps/showcase/src/App.tsx

@@ -1,5 +1,5 @@
-import { useState, Suspense } from 'react';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { useState, Suspense, useMemo } from 'react';
+import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
 import { ThemeProvider, DensityType } from '@repo/ui/provider';
 import { AgGridProvider } from '@repo/ui/components';
 import { useThemeStore } from './core/stores/theme.store';
@@ -21,28 +21,32 @@ export default function App() {
   const colorScheme = useThemeStore((s) => s.colorScheme);
   const [density, setDensity] = useState<DensityType>('compact');
 
+  const router = useMemo(() => createBrowserRouter([
+    {
+      path: "/",
+      element: <ShowcaseLayout density={density} setDensity={setDensity} />,
+      children: [
+        { index: true, element: <Navigate to="/ui-components" replace /> },
+        { path: "ui-components", element: <UiComponentsPage /> },
+        { path: "forms", element: <FormsPage /> },
+        { path: "storage", element: <StoragePage /> },
+        { path: "events", element: <EventsPage /> },
+        { path: "hardware", element: <HardwarePage /> },
+        { path: "rbac", element: <RbacPage /> },
+        { path: "auth", element: <AuthPage /> },
+        { path: "action-tools", element: <ActionToolsPage /> },
+        { path: "ag-grid", element: <AgGridPage /> },
+      ]
+    },
+    { path: "/shell-demo", element: <ShellDemoPage /> }
+  ]), [density]);
+
   return (
     <ThemeProvider colorScheme={colorScheme} density={density}>
       <AgGridProvider bypassLicense>
-        <BrowserRouter>
-          <Suspense fallback={<div>Loading...</div>}>
-            <Routes>
-              <Route path="/" element={<ShowcaseLayout density={density} setDensity={setDensity} />}>
-                <Route index element={<Navigate to="/ui-components" replace />} />
-                <Route path="ui-components" element={<UiComponentsPage />} />
-                <Route path="forms" element={<FormsPage />} />
-                <Route path="storage" element={<StoragePage />} />
-                <Route path="events" element={<EventsPage />} />
-                <Route path="hardware" element={<HardwarePage />} />
-                <Route path="rbac" element={<RbacPage />} />
-                <Route path="auth" element={<AuthPage />} />
-                <Route path="action-tools" element={<ActionToolsPage />} />
-                <Route path="ag-grid" element={<AgGridPage />} />
-              </Route>
-              <Route path="/shell-demo" element={<ShellDemoPage />} />
-            </Routes>
-          </Suspense>
-        </BrowserRouter>
+        <Suspense fallback={<div>Loading...</div>}>
+          <RouterProvider router={router} />
+        </Suspense>
       </AgGridProvider>
     </ThemeProvider>
   );