create-bluecopa-react-app 1.0.39 → 1.0.41

package/README.md

@@ -1,8 +1,8 @@
 # create-bluecopa-react-app [![npm version](https://img.shields.io/npm/v/create-bluecopa-react-app)](https://www.npmjs.com/package/create-bluecopa-react-app) [![License](https://img.shields.io/npm/l/create-bluecopa-react-app)](LICENSE)
 
-## A CLI Tool for BlueCopa React Applications
+## A CLI Tool for Bluecopa React Applications
 
-A command-line interface for bootstrapping modern React applications with BlueCopa integration, featuring opinionated best practices and pre-configured tooling.
+A command-line interface for bootstrapping modern React applications with Bluecopa integration, featuring opinionated best practices and pre-configured tooling.
 
 ## Table of Contents
 
@@ -50,9 +50,9 @@ export BLUECOPA_BOILERPLATE_REGISTRY=https://registry.npmjs.org
 - 🌐 **Microfrontend Support**: Single-spa compatible with module federation
 - 📊 **Data Visualization**: Recharts integration for charts and analytics
 - 🎨 **UI Components**: shadcn/ui components built on Radix UI primitives
-- 📡 **BlueCopa React Components**: Pre-configured [`@bluecopa/react`](packages/react:1) package with hooks (includes TanStack Query integration)
+- 📡 **Bluecopa React Components**: Pre-configured [`@bluecopa/react`](packages/react:1) package with hooks (includes TanStack Query integration)
 - 🎯 **Type Safety**: Full TypeScript support
-- 📱 **Responsive Design**: Tailwind CSS v4 with mobile-first approach and BlueCopa design system
+- 📱 **Responsive Design**: Tailwind CSS v4 with mobile-first approach and Bluecopa design system
 - 🛠️ **Development Tools**: ESLint, TypeScript checking, and Vite fast build system
 - ⚡ **Fast Development**: Hot module replacement with Vite
 - 🔄 **Server-side Rendering**: React Router v7 with SSR support
@@ -93,7 +93,7 @@ npx create-bluecopa-react-app my-dashboard --template shadcn
 
 ### `create-bluecopa-react-app [project-name] [options]`
 
-Creates a new BlueCopa React application.
+Creates a new Bluecopa React application.
 
 **Parameters:**
 - `project-name`: Name of the new project directory
@@ -143,21 +143,21 @@ npx create-bluecopa-react-app my-dashboard
 - **React Router v7** - Modern routing with SSR support
 - **Vite 6** - Fast build tool and development server
 - **TypeScript** - Full type safety and developer experience
-- **[`@bluecopa/react`](packages/react:1)** - BlueCopa-specific React components and hooks
+- **[`@bluecopa/react`](packages/react:1)** - Bluecopa-specific React components and hooks
 - **shadcn/ui** - Accessible component library built on Radix UI
 - **Radix UI** - Unstyled, accessible UI primitives
 - **TanStack Table** - Headless table library for React
 - **Recharts** - Composable charting library for React
 - **DND Kit** - Drag and drop toolkit for React
-- **Tailwind CSS v4** - Utility-first CSS framework with BlueCopa design system
+- **Tailwind CSS v4** - Utility-first CSS framework with Bluecopa design system
 - **next-themes** - Theme switching with dark mode support
 - **Lucide React** - Beautiful, customizable icons
 
 ## Monorepo Integration
 
-This CLI tool is part of the BlueCopa UI monorepo and integrates with the following packages:
+This CLI tool is part of the Bluecopa UI monorepo and integrates with the following packages:
 
-- **[`@bluecopa/react`](packages/react:1)** - BlueCopa-specific React components and hooks
+- **[`@bluecopa/react`](packages/react:1)** - Bluecopa-specific React components and hooks
 
 ### Standalone Development
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bluecopa-react-app",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "CLI tool to create bluecopa React applications",
   "type": "module",
   "main": "./bin/create-bluecopa-react-app.js",

package/templates/latest/Agent.md

@@ -1,6 +1,6 @@
-# AI Agent Guide for BlueCopa React UI Template
+# AI Agent Guide for Bluecopa React UI Template
 
-This guide helps AI assistants and developers understand the project structure, patterns, and best practices for working with this BlueCopa React application template.
+This guide helps AI assistants and developers understand the project structure, patterns, and best practices for working with this Bluecopa React application template.
 
 ## 🏗️ Project Architecture Overview
 
@@ -8,7 +8,7 @@ This guide helps AI assistants and developers understand the project structure,
 - **React 18** with TypeScript
 - **React Router v7** with SSR support
 - **shadcn/ui** components built on Radix UI
-- **BlueCopa UI** components from `@bluecopa-ui` registry (built on Radix UI)
+- **Bluecopa UI** components from `@bluecopa-ui` registry (built on Radix UI)
 - **Tailwind CSS v4** with CSS variables
 - **Vite 6** for build tooling
 - **TanStack Query** (via @bluecopa/react)
@@ -17,7 +17,7 @@ This guide helps AI assistants and developers understand the project structure,
 ```
 app/
 ├── components/          # Reusable UI components
-│   ├── ui/             # BlueCopa UI or shadcn/ui components
+│   ├── ui/             # Bluecopa UI or shadcn/ui components
 │   ├── app-sidebar.tsx # Main navigation
 │   ├── data-table.tsx  # TanStack Table wrapper
 │   └── chart-*.tsx     # Recharts components
@@ -33,10 +33,10 @@ app/
 
 This project supports components from two registries:
 
-1. **BlueCopa UI Registry** (Preferred for BlueCopa-specific components)
+1. **Bluecopa UI Registry** (Preferred for Bluecopa-specific components)
    - Registry URL: https://blui.vercel.app
    - Registry JSON: https://blui.vercel.app/r/registry.json
-   - Custom BlueCopa components built on Radix UI
+   - Custom Bluecopa components built on Radix UI
 
 2. **shadcn/ui Registry** (Standard components)
    - Registry URL: https://ui.shadcn.com
@@ -51,9 +51,9 @@ Both registries:
 
 ### Adding Components
 
-#### From BlueCopa UI Registry
+#### From Bluecopa UI Registry
 
-To add a component from the BlueCopa UI registry (preferred for BlueCopa-specific components):
+To add a component from the Bluecopa UI registry (preferred for Bluecopa-specific components):
 
 ```bash
 pnpm dlx shadcn@latest add @bluecopa-ui/button
@@ -80,7 +80,7 @@ The registries are configured in `components.json`:
 }
 ```
 
-**Note**: When no registry prefix is specified, components are added from the default shadcn/ui registry. Use `@bluecopa-ui/` prefix for BlueCopa-specific components.
+**Note**: When no registry prefix is specified, components are added from the default shadcn/ui registry. Use `@bluecopa-ui/` prefix for Bluecopa-specific components.
 
 ### Custom Components
 - Use TypeScript interfaces for props
@@ -128,14 +128,14 @@ A React library providing opinionated custom hooks for TanStack React Query inte
 
 ## Table of Contents
 
-- [AI Agent Guide for BlueCopa React UI Template](#ai-agent-guide-for-bluecopa-react-ui-template)
+- [AI Agent Guide for Bluecopa React UI Template](#ai-agent-guide-for-bluecopa-react-ui-template)
   - [🏗️ Project Architecture Overview](#️-project-architecture-overview)
     - [Core Stack](#core-stack)
     - [Key Directories](#key-directories)
   - [🎨 Component Patterns](#-component-patterns)
     - [UI Component Registries](#ui-component-registries)
     - [Adding Components](#adding-components)
-      - [From BlueCopa UI Registry](#from-bluecopa-ui-registry)
+      - [From Bluecopa UI Registry](#from-bluecopa-ui-registry)
       - [From shadcn/ui Registry](#from-shadcnui-registry)
     - [Custom Components](#custom-components)
     - [Example Component Structure](#example-component-structure)
@@ -211,7 +211,7 @@ A React library providing opinionated custom hooks for TanStack React Query inte
     - [Development Tools](#development-tools)
   - [📚 Useful Resources](#-useful-resources)
     - [Documentation](#documentation)
-    - [BlueCopa Specific](#bluecopa-specific)
+    - [Bluecopa Specific](#bluecopa-specific)
   - [🎯 Best Practices Summary](#-best-practices-summary)
   - [🔄 Common Workflows](#-common-workflows)
     - [Adding a New Feature](#adding-a-new-feature)
@@ -775,20 +775,20 @@ import {
 
 ### Adding New Components
 1. Add components from either registry:
-   - BlueCopa UI: `pnpm dlx shadcn@latest add @bluecopa-ui/component-name`
+   - Bluecopa UI: `pnpm dlx shadcn@latest add @bluecopa-ui/component-name`
    - shadcn/ui: `pnpm dlx shadcn@latest add component-name`
 2. Components are installed in `app/components/ui/`
-3. Prefer BlueCopa UI registry for BlueCopa-specific components
-4. Use shadcn/ui registry for standard components not available in BlueCopa UI
+3. Prefer Bluecopa UI registry for Bluecopa-specific components
+4. Use shadcn/ui registry for standard components not available in Bluecopa UI
 5. Define TypeScript interface for props if extending components
 6. Implement responsive design
 7. Add proper accessibility attributes
 
 ### Working with Forms
 1. Use form components from either registry:
-   - BlueCopa UI: `pnpm dlx shadcn@latest add @bluecopa-ui/form`
+   - Bluecopa UI: `pnpm dlx shadcn@latest add @bluecopa-ui/form`
    - shadcn/ui: `pnpm dlx shadcn@latest add form`
-2. Prefer BlueCopa UI form components when available
+2. Prefer Bluecopa UI form components when available
 3. Implement validation with Zod
 4. Handle form state with React hooks
 5. Show loading and error states
@@ -886,21 +886,21 @@ import {
 
 ### Documentation
 - [React Router v7 Docs](https://reactrouter.com/)
-- [BlueCopa UI Registry](https://blui.vercel.app)
+- [Bluecopa UI Registry](https://blui.vercel.app)
 - [shadcn/ui Components](https://ui.shadcn.com/)
 - [Tailwind CSS v4](https://tailwindcss.com/)
 - [TanStack Table](https://tanstack.com/table)
 - [Recharts](https://recharts.org/)
 
-### BlueCopa Specific
+### Bluecopa Specific
 - [@bluecopa/react Package](packages/react:1)
-- BlueCopa Design System
+- Bluecopa Design System
 - API Integration Patterns
 
 ## 🎯 Best Practices Summary
 
 1. **Always use TypeScript** - Define proper interfaces and types
-2. **Use appropriate registry** - Prefer BlueCopa UI (`@bluecopa-ui/component-name`) for BlueCopa-specific components, use shadcn/ui (`component-name`) for standard components
+2. **Use appropriate registry** - Prefer Bluecopa UI (`@bluecopa-ui/component-name`) for Bluecopa-specific components, use shadcn/ui (`component-name`) for standard components
 3. **Follow component patterns** - Use established component structure from both registries
 4. **Implement accessibility** - Use semantic HTML and ARIA attributes
 5. **Optimize for performance** - Use proper React patterns and code splitting
@@ -916,7 +916,7 @@ import {
 ### Adding a New Feature
 1. Create feature branch
 2. Add required UI components from appropriate registry:
-   - BlueCopa UI: `pnpm dlx shadcn@latest add @bluecopa-ui/component-name`
+   - Bluecopa UI: `pnpm dlx shadcn@latest add @bluecopa-ui/component-name`
    - shadcn/ui: `pnpm dlx shadcn@latest add component-name`
 3. Implement components with TypeScript
 4. Add proper styling with Tailwind
@@ -933,4 +933,4 @@ import {
 5. Verify responsive behavior
 6. Test accessibility features
 
-This guide should help AI assistants and developers work effectively with this BlueCopa React template, ensuring consistent patterns and best practices are followed throughout development.
+This guide should help AI assistants and developers work effectively with this Bluecopa React template, ensuring consistent patterns and best practices are followed throughout development.

package/templates/latest/README.md

@@ -1,4 +1,4 @@
-# BlueCopa React App with shadcn/ui
+# Bluecopa React App with shadcn/ui
 
 A modern, production-ready template for building full-stack React applications using React Router v7 and shadcn/ui components.
 
@@ -17,7 +17,7 @@ A modern, production-ready template for building full-stack React applications u
 - 🎯 **Drag & Drop** - DND Kit integration for interactive interfaces
 - 📱 **Responsive Design** - Mobile-first approach with sidebar navigation
 - 🌙 **Dark Mode** - Built-in theme switching with next-themes
-- 🔗 **BlueCopa API integration** - Pre-configured with `@bluecopa/react` hooks
+- 🔗 **Bluecopa API integration** - Pre-configured with `@bluecopa/react` hooks
 - 📖 [React Router docs](https://reactrouter.com/)
 - 🎨 [shadcn/ui docs](https://ui.shadcn.com/)
 
@@ -37,11 +37,11 @@ pnpm install
 
 ## Quick Start
 
-This template is designed to work both as a standalone application and as a microfrontend within the BlueCopa ecosystem. It includes:
+This template is designed to work both as a standalone application and as a microfrontend within the Bluecopa ecosystem. It includes:
 
 - **Single-spa integration** for microfrontend architecture
 - **Module federation** support for dynamic imports
-- **BlueCopa API integration** with pre-configured hooks
+- **Bluecopa API integration** with pre-configured hooks
 - **Production-ready** Docker configuration
 
 ### Development
@@ -114,7 +114,7 @@ If the API errors out or is not configured, the application will show "Set Envir
 
 ### Statement Hooks Example
 
-This template includes a comprehensive example of using BlueCopa statement hooks at `/statements`. The example demonstrates:
+This template includes a comprehensive example of using Bluecopa statement hooks at `/statements`. The example demonstrates:
 
 - **useGetStatementData** - Fetching statement data by statement ID (with optional viewId and runId)
 - **useGetViewsBySheetId** - Fetching all views for a statement sheet
@@ -196,7 +196,7 @@ This template comes with [Tailwind CSS v4](https://tailwindcss.com/) configured
 - CSS variables for theming
 - Dark mode support with next-themes
 - shadcn/ui design system
-- Custom BlueCopa color palette
+- Custom Bluecopa color palette
 - Responsive design utilities
 
 ## Key Technologies

package/templates/latest/app/routes/statements.tsx

@@ -123,7 +123,7 @@ export default function StatementsPage() {
                   <div>
                     <h1 className="text-3xl font-bold tracking-tight">Statement Viewer</h1>
                     <p className="text-muted-foreground">
-                      View and manage statement data using BlueCopa statement hooks
+                      View and manage statement data using Bluecopa statement hooks
                     </p>
                   </div>
                   <div className="flex gap-2">

package/templates/latest/app/single-spa.tsx

@@ -1,7 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import singleSpaReact from "single-spa-react";
-import { MemoryRouter, BrowserRouter } from "react-router-dom";
+import {
+  MemoryRouter,
+  BrowserRouter,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
 import App from "./app";
 import type { AppProps } from "single-spa";
 
@@ -18,6 +23,93 @@ interface LifecycleProps {
 
 let root: Root | null = null;
 
+// Helper function to extract path from browser URL
+function getInitialPath(basename?: string): string {
+  const currentPath = window.location.pathname;
+  const search = window.location.search;
+  const hash = window.location.hash;
+
+  // If basename is provided, extract the path after basename
+  let pathAfterBasename = currentPath;
+  if (basename && currentPath.startsWith(basename)) {
+    pathAfterBasename = currentPath.slice(basename.length) || "/";
+  }
+
+  // Combine path, search params, and hash
+  return pathAfterBasename + search + hash;
+}
+
+// Component to sync MemoryRouter navigation with browser URL
+const RouterSync: React.FC<{ basename?: string }> = ({ basename }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Get the current path from MemoryRouter
+    const mainAppPath = window.location.pathname;
+    if (mainAppPath.includes("/apps/ext/")) {
+      const currentPath = location.pathname;
+      const search = location.search || "";
+      const hash = location.hash || "";
+
+      // Calculate the full URL path
+      const basenamePath = basename || "";
+      const fullPath = basenamePath + currentPath + search + hash;
+
+      // Update browser URL without reloading the page
+      const currentBrowserPath =
+        window.location.pathname +
+        window.location.search +
+        window.location.hash;
+      if (currentBrowserPath !== fullPath) {
+        // Use pushState to maintain browser history for back/forward buttons
+        window.history.pushState(
+          { ...window.history.state, path: fullPath },
+          "",
+          fullPath
+        );
+      }
+    }
+  }, [location.pathname, location.search, location.hash, basename]);
+
+  // Listen for browser navigation (back/forward buttons)
+  useEffect(() => {
+    const handlePopState = () => {
+      const mainAppPath = window.location.pathname;
+      // If current path does not contain /apps/ext/, clean up all /apps/ext/ references
+      if (mainAppPath.includes("/apps/ext/")) {
+        const currentPath = window.location.pathname;
+        const search = window.location.search || "";
+        const hash = window.location.hash || "";
+        const basenamePath = basename || "";
+
+        // Extract the path after basename
+        let pathToNavigate = currentPath;
+        if (basenamePath && currentPath.startsWith(basenamePath)) {
+          pathToNavigate = currentPath.slice(basenamePath.length) || "/";
+        }
+
+        // Combine with search and hash
+        const fullPathToNavigate = pathToNavigate + search + hash;
+        const currentRouterPath =
+          location.pathname + (location.search || "") + (location.hash || "");
+
+        // Navigate MemoryRouter to match browser URL
+        if (currentRouterPath !== fullPathToNavigate) {
+          navigate(fullPathToNavigate, { replace: true });
+        }
+      } else {
+        window.removeEventListener("popstate", handlePopState);
+      }
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [navigate, location.pathname, location.search, location.hash, basename]);
+
+  return null;
+};
+
 // Root component wrapper that handles routing
 const MicrofrontendRoot: React.FC<{
   isMicroFrontend: boolean;
@@ -26,10 +118,17 @@ const MicrofrontendRoot: React.FC<{
   // Use MemoryRouter for micro-frontend to avoid conflicts with host routing
   // Use BrowserRouter for standalone mode
   const Router = isMicroFrontend ? MemoryRouter : BrowserRouter;
-  const routerProps = isMicroFrontend ? {} : { basename: props?.basename };
+
+  // Get initial path from browser URL for MemoryRouter
+  const initialPath = isMicroFrontend ? getInitialPath(props?.basename) : "/";
+
+  const routerProps = isMicroFrontend
+    ? { initialEntries: [initialPath], initialIndex: 0 }
+    : { basename: props?.basename };
 
   return (
     <Router {...routerProps}>
+      {isMicroFrontend && <RouterSync basename={props?.basename} />}
       <App {...props} />
     </Router>
   );

package/templates/latest/dist/assets/{__federation_expose_App-OFfdinOR.js → __federation_expose_App-D-lv9y21.js}

@@ -1,6 +1,6 @@
-System.register(['./__federation_fn_import-CzfA7kmP.js', './client-CkHcT_xc.js'], (function (exports, module) {
+System.register(['./__federation_fn_import-CzfA7kmP.js', './client-Dms8K6Dw.js'], (function (exports, module) {
   'use strict';
-  var importShared, clientExports, jsxRuntimeExports, MemoryRouter, BrowserRouter, App;
+  var importShared, clientExports, jsxRuntimeExports, MemoryRouter, BrowserRouter, App, useLocation, useNavigate;
   return {
     setters: [module => {
       importShared = module.importShared;
@@ -10,17 +10,81 @@ System.register(['./__federation_fn_import-CzfA7kmP.js', './client-CkHcT_xc.js']
       MemoryRouter = module.M;
       BrowserRouter = module.B;
       App = module.A;
+      useLocation = module.u;
+      useNavigate = module.a;
     }],
     execute: (async function () {
 
       function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o);}return n}function t(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?e(Object(r),true).forEach((function(e){o(t,e,r[e]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e));}));}return t}function n(e){return (n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:true,configurable:true,writable:true}):e[t]=n,e}function r(e){return (r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t){var n;if("function"!=typeof(n=t.domElement?function(){return t.domElement}:t.domElementGetter?t.domElementGetter:e.domElementGetter?e.domElementGetter:function(e){var t=e.appName||e.name;if(!t)throw Error("single-spa's dom-element-getter-helpers was not given an application name as a prop, so it can't make a unique dom element container for the react application");var n="single-spa-application:".concat(t);return function(){var e=document.getElementById(n);return e||((e=document.createElement("div")).id=n,document.body.appendChild(e)),e}}(t)))throw Error("single-spa's dom-element-getter-helpers was given an invalid domElementGetter for application or parcel '".concat(t.name,"'. Expected a function, received ").concat(r(n)));return function(){var e=n(t);if(!(e instanceof HTMLElement))throw Error("single-spa's dom-element-getter-helpers: domElementGetter returned an invalid dom element for application or parcel '".concat(t.name,"'. Expected HTMLElement, received ").concat(r(e)));return e}}var c=null;try{c=require("react").createContext();}catch(e){}var u={React:null,ReactDOM:null,ReactDOMClient:null,rootComponent:null,loadRootComponent:null,errorBoundary:null,errorBoundaryClass:null,domElementGetter:null,parcelCanUpdate:true,suppressComponentDidCatchWarning:false,domElements:{},renderResults:{},updateResolves:{},unmountResolves:{}};function i(e){if("object"!==n(e))throw new Error("single-spa-react requires a configuration object");var o,r=t(t({},u),e);if(!r.React)throw new Error("single-spa-react must be passed opts.React");if(!r.ReactDOM&&!r.ReactDOMClient)throw new Error("single-spa-react must be passed opts.ReactDOM or opts.ReactDOMClient");r.renderType||(null!==(o=r.ReactDOMClient)&&void 0!==o&&o.createRoot?r.renderType="createRoot":r.renderType="render");if(!r.rootComponent&&!r.loadRootComponent)throw new Error("single-spa-react must be passed opts.rootComponent or opts.loadRootComponent");if(r.errorBoundary&&"function"!=typeof r.errorBoundary)throw Error("The errorBoundary opt for single-spa-react must either be omitted or be a function that returns React elements");!c&&r.React.createContext&&(c=r.React.createContext()),r.SingleSpaRoot=function(e){function t(e){t.displayName="SingleSpaRoot(".concat(e.name,")");}return t.prototype=Object.create(e.React.Component.prototype),t.prototype.componentDidMount=function(){setTimeout(this.props.mountFinished);},t.prototype.componentWillUnmount=function(){setTimeout(this.props.unmountFinished);},t.prototype.render=function(){return setTimeout(this.props.updateFinished),this.props.children},t}(r);var a={bootstrap:s.bind(null,r),mount:p.bind(null,r),unmount:l.bind(null,r)};return r.parcelCanUpdate&&(a.update=m.bind(null,r)),a}function s(e,t){return e.rootComponent?Promise.resolve():e.loadRootComponent(t).then((function(t){e.rootComponent=t;}))}function p(e,t){return new Promise((function(n,o){e.suppressComponentDidCatchWarning||!function(e){if(!(e&&"string"==typeof e.version&&e.version.indexOf(".")>=0))return  false;var t=e.version.slice(0,e.version.indexOf("."));try{return Number(t)>=16}catch(e){return  false}}(e.React)||e.errorBoundary||e.errorBoundaryClass||(e.rootComponent.prototype?e.rootComponent.prototype.componentDidCatch||console.warn("single-spa-react: ".concat(t.name||t.appName||t.childAppName,"'s rootComponent should implement componentDidCatch to avoid accidentally unmounting the entire single-spa application.")):console.warn("single-spa-react: ".concat(t.name||t.appName||t.childAppName,"'s rootComponent does not implement an error boundary.  If using a functional component, consider providing an opts.errorBoundary to singleSpaReact(opts).")));var r=y(e,t,(function(){n(this);})),c=a(e,t)(),u=function(e){var t=e.reactDom,n=e.renderType,o=e.elementToRender,r=e.domElement,a=t[n];if("function"!=typeof a)throw new Error('renderType "'.concat(n,'" did not return a function.'));switch(n){case "createRoot":case "unstable_createRoot":case "createBlockingRoot":case "unstable_createBlockingRoot":var c=a(r);return c.render(o),c;case "hydrateRoot":return a(r,o);case "hydrate":default:return a(o,r),null}}({elementToRender:r,domElement:c,reactDom:d(e),renderType:f(e)});e.domElements[t.name]=c,e.renderResults[t.name]=u;}))}function l(e,t){return new Promise((function(n){e.unmountResolves[t.name]=n;var o=e.renderResults[t.name];o&&o.unmount?o.unmount():d(e).unmountComponentAtNode(e.domElements[t.name]),delete e.domElements[t.name],delete e.renderResults[t.name];}))}function m(e,t){return new Promise((function(n){e.updateResolves[t.name]||(e.updateResolves[t.name]=[]),e.updateResolves[t.name].push(n);var o=y(e,t,null),r=e.renderResults[t.name];if(r&&r.render)r.render(o);else {var c=a(e,t)();d(e).render(o,c);}}))}function d(e){return e.ReactDOMClient||e.ReactDOM}function f(e){return "function"==typeof e.renderType?e.renderType():e.renderType}function y(e,n,o){var r=e.React.createElement(e.rootComponent,n),a=c?e.React.createElement(c.Provider,{value:n},r):r;return (e.errorBoundary||n.errorBoundary||e.errorBoundaryClass||n.errorBoundaryClass)&&(e.errorBoundaryClass=e.errorBoundaryClass||n.errorBoundaryClass||function(e,t){function n(t){e.React.Component.apply(this,arguments),this.state={caughtError:null,caughtErrorInfo:null},n.displayName="SingleSpaReactErrorBoundary(".concat(t.name,")");}return n.prototype=Object.create(e.React.Component.prototype),n.prototype.render=function(){return this.state.caughtError?(e.errorBoundary||t.errorBoundary)(this.state.caughtError,this.state.caughtErrorInfo,this.props):this.props.children},n.prototype.componentDidCatch=function(e,t){this.setState({caughtError:e,caughtErrorInfo:t});},n}(e,n),a=e.React.createElement(e.errorBoundaryClass,n,a)),a=e.React.createElement(e.SingleSpaRoot,t(t({},n),{},{mountFinished:o,updateFinished:function(){e.updateResolves[n.name]&&(e.updateResolves[n.name].forEach((function(e){return e()})),delete e.updateResolves[n.name]);},unmountFinished:function(){e.unmountResolves[n.name]&&(e.unmountResolves[n.name](),delete e.unmountResolves[n.name]);}}),a)}
 
       const React = await importShared('react');
+      const {useEffect} = React;
       let root = null;
+      function getInitialPath(basename) {
+        const currentPath = window.location.pathname;
+        const search = window.location.search;
+        const hash = window.location.hash;
+        let pathAfterBasename = currentPath;
+        if (basename && currentPath.startsWith(basename)) {
+          pathAfterBasename = currentPath.slice(basename.length) || "/";
+        }
+        return pathAfterBasename + search + hash;
+      }
+      const RouterSync = ({ basename }) => {
+        const location = useLocation();
+        const navigate = useNavigate();
+        useEffect(() => {
+          const mainAppPath = window.location.pathname;
+          if (mainAppPath.includes("/apps/ext/")) {
+            const currentPath = location.pathname;
+            const search = location.search || "";
+            const hash = location.hash || "";
+            const basenamePath = basename || "";
+            const fullPath = basenamePath + currentPath + search + hash;
+            const currentBrowserPath = window.location.pathname + window.location.search + window.location.hash;
+            if (currentBrowserPath !== fullPath) {
+              window.history.pushState(
+                { ...window.history.state, path: fullPath },
+                "",
+                fullPath
+              );
+            }
+          }
+        }, [location.pathname, location.search, location.hash, basename]);
+        useEffect(() => {
+          const handlePopState = () => {
+            const mainAppPath = window.location.pathname;
+            if (mainAppPath.includes("/apps/ext/")) {
+              const currentPath = window.location.pathname;
+              const search = window.location.search || "";
+              const hash = window.location.hash || "";
+              const basenamePath = basename || "";
+              let pathToNavigate = currentPath;
+              if (basenamePath && currentPath.startsWith(basenamePath)) {
+                pathToNavigate = currentPath.slice(basenamePath.length) || "/";
+              }
+              const fullPathToNavigate = pathToNavigate + search + hash;
+              const currentRouterPath = location.pathname + (location.search || "") + (location.hash || "");
+              if (currentRouterPath !== fullPathToNavigate) {
+                navigate(fullPathToNavigate, { replace: true });
+              }
+            } else {
+              window.removeEventListener("popstate", handlePopState);
+            }
+          };
+          window.addEventListener("popstate", handlePopState);
+          return () => window.removeEventListener("popstate", handlePopState);
+        }, [navigate, location.pathname, location.search, location.hash, basename]);
+        return null;
+      };
       const MicrofrontendRoot = ({ isMicroFrontend, props }) => {
         const Router = isMicroFrontend ? MemoryRouter : BrowserRouter;
-        const routerProps = isMicroFrontend ? {} : { basename: props?.basename };
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { ...routerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, { ...props }) });
+        const initialPath = isMicroFrontend ? getInitialPath(props?.basename) : "/";
+        const routerProps = isMicroFrontend ? { initialEntries: [initialPath], initialIndex: 0 } : { basename: props?.basename };
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(Router, { ...routerProps, children: [
+          isMicroFrontend && /* @__PURE__ */ jsxRuntimeExports.jsx(RouterSync, { basename: props?.basename }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(App, { ...props })
+        ] });
       };
       const lifecycles = i({
         React,