@aws/nx-plugin 0.62.0 → 0.62.2

package/src/ts/react-website/app/__snapshots__/generator.spec.ts.snap

@@ -1,5 +1,825 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/components/AppLayout/index.tsx 1`] = `
+"import * as React from 'react';
+import { createContext, useCallback, useEffect, useState } from 'react';
+import Config from '../../config';
+
+import {
+  BreadcrumbGroup,
+  BreadcrumbGroupProps,
+  SideNavigation,
+  TopNavigation,
+} from '@cloudscape-design/components';
+import CloudscapeAppLayout, {
+  AppLayoutProps,
+} from '@cloudscape-design/components/app-layout';
+import {
+  useMatchRoute,
+  useLocation,
+  useNavigate,
+} from '@tanstack/react-router';
+
+const getBreadcrumbs = (
+  matchRoute: ReturnType<typeof useMatchRoute>,
+  pathName: string,
+  search: string,
+  defaultBreadcrumb: string,
+  availableRoutes?: string[],
+) => {
+  const segments = [
+    defaultBreadcrumb,
+    ...pathName.split('/').filter((segment) => segment !== ''),
+  ];
+
+  return segments.map((segment, i) => {
+    const href =
+      i === 0
+        ? '/'
+        : \`/\${segments
+            .slice(1, i + 1)
+            .join('/')
+            .replace('//', '/')}\`;
+
+    const matched =
+      !availableRoutes || availableRoutes.find((r) => matchRoute({ to: href }));
+
+    return {
+      href: matched ? \`\${href}\${search}\` : '#',
+      text: segment,
+    };
+  });
+};
+
+export interface AppLayoutContext {
+  appLayoutProps: AppLayoutProps;
+  setAppLayoutProps: (props: AppLayoutProps) => void;
+  displayHelpPanel: (helpContent: React.ReactNode) => void;
+}
+
+/**
+ * Context for updating/retrieving the AppLayout.
+ */
+export const AppLayoutContext = createContext({
+  appLayoutProps: {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setAppLayoutProps: (_: AppLayoutProps) => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  displayHelpPanel: (_: React.ReactNode) => {},
+});
+
+/**
+ * Defines the App layout and contains logic for routing.
+ */
+const AppLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const appLayout = React.useRef<AppLayoutProps.Ref>(null);
+  const [appLayoutProps, setAppLayoutProps] = useState<AppLayoutProps>({});
+  const setAppLayoutPropsSafe = useCallback(
+    (props: AppLayoutProps) => {
+      JSON.stringify(appLayoutProps) !== JSON.stringify(props) &&
+        setAppLayoutProps(props);
+    },
+    [appLayoutProps],
+  );
+
+  const navigate = useNavigate();
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+    BreadcrumbGroupProps.Item[]
+  >([{ text: '/', href: '/' }]);
+  const matchRoute = useMatchRoute();
+  const { pathname, search } = useLocation();
+
+  useEffect(() => {
+    const breadcrumbs = getBreadcrumbs(
+      matchRoute,
+      pathname,
+      Object.entries(search).reduce((p, [k, v]) => p + \`\${k}=\${v}\`, ''),
+      '/',
+    );
+    setActiveBreadcrumbs(breadcrumbs);
+  }, [pathname, search]);
+
+  const onNavigate = useCallback(
+    (e: CustomEvent<{ href: string; external?: boolean }>) => {
+      if (!e.detail.external) {
+        e.preventDefault();
+        setAppLayoutPropsSafe({
+          contentType: undefined,
+        });
+        navigate({ to: e.detail.href });
+      }
+    },
+    [navigate, setAppLayoutPropsSafe],
+  );
+
+  return (
+    <AppLayoutContext.Provider
+      value={{
+        appLayoutProps,
+        setAppLayoutProps: setAppLayoutPropsSafe,
+        displayHelpPanel: (helpContent: React.ReactNode) => {
+          setAppLayoutPropsSafe({ tools: helpContent, toolsHide: false });
+          appLayout.current?.openTools();
+        },
+      }}
+    >
+      <TopNavigation
+        identity={{
+          href: '/',
+          title: Config.applicationName,
+          logo: {
+            src: Config.logo,
+          },
+        }}
+      />
+      <CloudscapeAppLayout
+        ref={appLayout}
+        breadcrumbs={
+          <BreadcrumbGroup onFollow={onNavigate} items={activeBreadcrumbs} />
+        }
+        navigation={
+          <SideNavigation
+            header={{ text: Config.applicationName, href: '/' }}
+            activeHref={pathname}
+            onFollow={onNavigate}
+            items={[{ text: 'Home', type: 'link', href: '/' }]}
+          />
+        }
+        toolsHide
+        content={children}
+        {...appLayoutProps}
+      />
+    </AppLayoutContext.Provider>
+  );
+};
+
+export default AppLayout;
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/components/alert.tsx 1`] = `
+"import { Alert as CloudscapeAlert } from '@cloudscape-design/components';
+
+export const Alert = CloudscapeAlert;
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/components/spinner.tsx 1`] = `
+"import { Spinner as CloudscapeSpinner } from '@cloudscape-design/components';
+
+export const Spinner = CloudscapeSpinner;
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/config.ts 1`] = `
+"export default {
+  applicationName: 'test-app',
+  logo: 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjMjQ4YmFlIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZT0iIzI0OGJhZSI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+Cg08dGl0bGU+aW9uaWNvbnMtdjVfbG9nb3M8L3RpdGxlPgoNPHBhdGggZD0iTTQxMC42NiwxODAuNzJoMHEtNy42Ny0yLjYyLTE1LjQ1LTQuODgsMS4yOS01LjI1LDIuMzgtMTAuNTZjMTEuNy01Ni45LDQuMDUtMTAyLjc0LTIyLjA2LTExNy44My0yNS0xNC40OC02NiwuNjEtMTA3LjM2LDM2LjY5cS02LjEsNS4zNC0xMS45NSwxMS0zLjktMy43Ni04LTcuMzZjLTQzLjM1LTM4LjU4LTg2LjgtNTQuODMtMTEyLjg4LTM5LjY5LTI1LDE0LjUxLTMyLjQzLDU3LjYtMjEuOSwxMTEuNTNxMS41OCw4LDMuNTUsMTUuOTNjLTYuMTUsMS43NS0xMi4wOSwzLjYyLTE3Ljc3LDUuNkM0OC40NiwxOTguOSwxNiwyMjYuNzMsMTYsMjU1LjU5YzAsMjkuODIsMzQuODQsNTkuNzIsODcuNzcsNzcuODVxNi40NCwyLjE5LDEzLDQuMDdRMTE0LjY0LDM0NiwxMTMsMzU0LjY4Yy0xMCw1My0yLjIsOTUuMDcsMjIuNzUsMTA5LjQ5LDI1Ljc3LDE0Ljg5LDY5LS40MSwxMTEuMTQtMzcuMzFxNS00LjM4LDEwLTkuMjUsNi4zMiw2LjExLDEzLDExLjg2YzQwLjgsMzUuMTgsODEuMDksNDkuMzksMTA2LDM0LjkzLDI1Ljc1LTE0Ljk0LDM0LjEyLTYwLjE0LDIzLjI1LTExNS4xM3EtMS4yNS02LjMtMi44OC0xMi44Niw0LjU2LTEuMzUsOC45My0yLjc5YzU1LTE4LjI3LDkwLjgzLTQ3LjgxLDkwLjgzLTc4QzQ5NiwyMjYuNjIsNDYyLjUsMTk4LjYxLDQxMC42NiwxODAuNzJabS0xMjktODEuMDhjMzUuNDMtMzAuOTEsNjguNTUtNDMuMTEsODMuNjUtMzQuMzloMGMxNi4wNyw5LjI5LDIyLjMyLDQ2Ljc1LDEyLjIyLDk1Ljg4cS0xLDQuOC0yLjE2LDkuNTdhNDg3LjgzLDQ4Ny44MywwLDAsMC02NC4xOC0xMC4xNiw0ODEuMjcsNDgxLjI3LDAsMCwwLTQwLjU3LTUwLjc1UTI3NiwxMDQuNTcsMjgxLjY0LDk5LjY0Wk0xNTcuNzMsMjgwLjI1cTYuNTEsMTIuNiwxMy42MSwyNC44OSw3LjIzLDEyLjU0LDE1LjA3LDI0LjcxYTQzNS4yOCw0MzUuMjgsMCwwLDEtNDQuMjQtNy4xM0MxNDYuNDEsMzA5LDE1MS42MywyOTQuNzUsMTU3LjczLDI4MC4yNVptMC00OC4zM2MtNi0xNC4xOS0xMS4wOC0yOC4xNS0xNS4yNS00MS42MywxMy43LTMuMDcsMjguMy01LjU4LDQzLjUyLTcuNDhxLTcuNjUsMTEuOTQtMTQuNzIsMjQuMjNUMTU3LjcsMjMxLjkyWm0xMC45LDI0LjE3cTkuNDgtMTkuNzcsMjAuNDItMzguNzhoMHExMC45My0xOSwyMy4yNy0zNy4xM2MxNC4yOC0xLjA4LDI4LjkyLTEuNjUsNDMuNzEtMS42NXMyOS41Mi41Nyw0My43OSwxLjY2cTEyLjIxLDE4LjA5LDIzLjEzLDM3dDIwLjY5LDM4LjZRMzM0LDI3NS42MywzMjMsMjk0LjczaDBxLTEwLjkxLDE5LTIzLDM3LjI0Yy0xNC4yNSwxLTI5LDEuNTUtNDQsMS41NXMtMjkuNDctLjQ3LTQzLjQ2LTEuMzhxLTEyLjQzLTE4LjE5LTIzLjQ2LTM3LjI5VDE2OC42LDI1Ni4wOVpNMzQwLjc1LDMwNXE3LjI1LTEyLjU4LDEzLjkyLTI1LjQ5aDBhNDQwLjQxLDQ0MC40MSwwLDAsMSwxNi4xMiw0Mi4zMkE0MzQuNDQsNDM0LjQ0LDAsMCwxLDMyNiwzMjkuNDhRMzMzLjYyLDMxNy4zOSwzNDAuNzUsMzA1Wm0xMy43Mi03My4wN3EtNi42NC0xMi42NS0xMy44MS0yNWgwcS03LTEyLjE4LTE0LjU5LTI0LjA2YzE1LjMxLDEuOTQsMzAsNC41Miw0My43Nyw3LjY3QTQzOS44OSw0MzkuODksMCwwLDEsMzU0LjQ3LDIzMS45M1pNMjU2LjIzLDEyNC40OGgwYTQzOS43NSw0MzkuNzUsMCwwLDEsMjguMjUsMzQuMThxLTI4LjM1LTEuMzUtNTYuNzQsMEMyMzcuMDcsMTQ2LjMyLDI0Ni42MiwxMzQuODcsMjU2LjIzLDEyNC40OFpNMTQ1LjY2LDY1Ljg2YzE2LjA2LTkuMzIsNTEuNTcsNCw4OSwzNy4yNywyLjM5LDIuMTMsNC44LDQuMzYsNy4yLDYuNjdBNDkxLjM3LDQ5MS4zNywwLDAsMCwyMDEsMTYwLjUxYTQ5OS4xMiw0OTkuMTIsMCwwLDAtNjQuMDYsMTBxLTEuODMtNy4zNi0zLjMtMTQuODJoMEMxMjQuNTksMTA5LjQ2LDEzMC41OCw3NC42MSwxNDUuNjYsNjUuODZaTTEyMi4yNSwzMTcuNzFxLTYtMS43MS0xMS44NS0zLjcxYy0yMy40LTgtNDIuNzMtMTguNDQtNTYtMjkuODFDNDIuNTIsMjc0LDM2LjUsMjYzLjgzLDM2LjUsMjU1LjU5YzAtMTcuNTEsMjYuMDYtMzkuODUsNjkuNTItNTVxOC4xOS0yLjg1LDE2LjUyLTUuMjFhNDkzLjU0LDQ5My41NCwwLDAsMCwyMy40LDYwLjc1QTUwMi40Niw1MDIuNDYsMCwwLDAsMTIyLjI1LDMxNy43MVptMTExLjEzLDkzLjY3Yy0xOC42MywxNi4zMi0zNy4yOSwyNy44OS01My43NCwzMy43MmgwYy0xNC43OCw1LjIzLTI2LjU1LDUuMzgtMzMuNjYsMS4yNy0xNS4xNC04Ljc1LTIxLjQ0LTQyLjU0LTEyLjg1LTg3Ljg2cTEuNTMtOCwzLjUtMTZhNDgwLjg1LDQ4MC44NSwwLDAsMCw2NC42OSw5LjM5LDUwMS4yLDUwMS4yLDAsMCwwLDQxLjIsNTFDMjM5LjU0LDQwNS44MywyMzYuNDksNDA4LjY1LDIzMy4zOCw0MTEuMzhabTIzLjQyLTIzLjIyYy05LjcyLTEwLjUxLTE5LjQyLTIyLjE0LTI4Ljg4LTM0LjY0cTEzLjc5LjU0LDI4LjA4LjU0YzkuNzgsMCwxOS40Ni0uMjEsMjktLjY0QTQzOS4zMyw0MzkuMzMsMCwwLDEsMjU2LjgsMzg4LjE2Wm0xMjQuNTIsMjguNTljLTIuODYsMTUuNDQtOC42MSwyNS43NC0xNS43MiwyOS44Ni0xNS4xMyw4Ljc4LTQ3LjQ4LTIuNjMtODIuMzYtMzIuNzItNC0zLjQ0LTgtNy4xMy0xMi4wNy0xMWE0ODQuNTQsNDg0LjU0LDAsMCwwLDQwLjIzLTUxLjIsNDc3Ljg0LDQ3Ny44NCwwLDAsMCw2NS0xMC4wNXExLjQ3LDUuOTQsMi42LDExLjY0aDBDMzgzLjgxLDM3Ny41OCwzODQuNSwzOTkuNTYsMzgxLjMyLDQxNi43NVptMTcuNC0xMDIuNjRoMGMtMi42Mi44Ny01LjMyLDEuNzEtOC4wNiwyLjUzYTQ4My4yNiw0ODMuMjYsMCwwLDAtMjQuMzEtNjAuOTQsNDgxLjUyLDQ4MS41MiwwLDAsMCwyMy4zNi02MC4wNmM0LjkxLDEuNDMsOS42OCwyLjkzLDE0LjI3LDQuNTIsNDQuNDIsMTUuMzIsNzEuNTIsMzgsNzEuNTIsNTUuNDNDNDc1LjUsMjc0LjE5LDQ0Ni4yMywyOTguMzMsMzk4LjcyLDMxNC4xMVoiLz4KDTxwYXRoIGQ9Ik0yNTYsMjk4LjU1YTQzLDQzLDAsMSwwLTQyLjg2LTQzQTQyLjkxLDQyLjkxLDAsMCwwLDI1NiwyOTguNTVaIi8+Cg08L2c+Cg08L3N2Zz4=',
+};
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/hooks/useAppLayout.tsx 1`] = `
+"import { useContext } from 'react';
+import { AppLayoutContext } from '../components/AppLayout';
+
+export const useAppLayout = (): AppLayoutContext =>
+  useContext(AppLayoutContext);
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/main.tsx 1`] = `
+"import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { I18nProvider } from '@cloudscape-design/components/i18n';
+import messages from '@cloudscape-design/components/i18n/messages/all.en';
+import '@cloudscape-design/global-styles/index.css';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type RouterProviderContext = {};
+
+const router = createRouter({
+  routeTree,
+  context: {},
+});
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const App = () => {
+  return <RouterProvider router={router} context={{}} />;
+};
+
+const root = document.getElementById('root');
+root &&
+  createRoot(root).render(
+    <React.StrictMode>
+      <I18nProvider locale="en" messages={[messages]}>
+        <App />
+      </I18nProvider>
+    </React.StrictMode>,
+  );
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/routeTree.gen.ts 1`] = `
+"/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as IndexRouteImport } from './routes/index';
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any);
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute;
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute;
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport;
+  '/': typeof IndexRoute;
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths: '/';
+  fileRoutesByTo: FileRoutesByTo;
+  to: '/';
+  id: '__root__' | '/';
+  fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/';
+      path: '/';
+      fullPath: '/';
+      preLoaderRoute: typeof IndexRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+};
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>();
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/routes/__root.tsx 1`] = `
+"import { createRootRouteWithContext } from '@tanstack/react-router';
+import AppLayout from '../components/AppLayout';
+import { RouterProviderContext } from '../main';
+import { Outlet } from '@tanstack/react-router';
+
+export const Route = createRootRouteWithContext<RouterProviderContext>()({
+  component: () => (
+    <AppLayout>
+      <Outlet />
+    </AppLayout>
+  ),
+});
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/routes/index.tsx 1`] = `
+"import {
+  ContentLayout,
+  Header,
+  SpaceBetween,
+  Container,
+} from '@cloudscape-design/components';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <ContentLayout header={<Header>Welcome</Header>}>
+      <SpaceBetween size="l">
+        <Container>Welcome to your new React website!</Container>
+      </SpaceBetween>
+    </ContentLayout>
+  );
+}
+"
+`;
+
+exports[`react-website generator (uxProvider=Cloudscape) > should update package.json with required dependencies > test-app/src/styles.css 1`] = `
+"@import 'tailwindcss';
+/* You can add global styles to this file, and also import other style files */
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/components/AppLayout/index.tsx 1`] = `
+"import * as React from 'react';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import Config from '../../config';
+import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
+
+const getBreadcrumbs = (
+  matchRoute: ReturnType<typeof useMatchRoute>,
+  pathName: string,
+  search: string,
+  defaultBreadcrumb: string,
+  availableRoutes?: string[],
+) => {
+  const segments = [
+    defaultBreadcrumb,
+    ...pathName.split('/').filter((segment) => segment !== ''),
+  ];
+
+  return segments.map((segment, i) => {
+    const href =
+      i === 0
+        ? '/'
+        : \`/\${segments
+            .slice(1, i + 1)
+            .join('/')
+            .replace('//', '/')}\`;
+
+    const matched =
+      !availableRoutes || availableRoutes.find((r) => matchRoute({ to: href }));
+
+    return {
+      href: matched ? \`\${href}\${search}\` : '#',
+      text: segment,
+    };
+  });
+};
+
+/**
+ * Defines the App layout and contains logic for routing.
+ */
+const AppLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+    { href: string; text: string }[]
+  >([{ text: '/', href: '/' }]);
+  const matchRoute = useMatchRoute();
+  const { pathname, search } = useLocation();
+  const navItems = useMemo(() => [{ to: '/', label: 'Home' }], []);
+
+  useEffect(() => {
+    const breadcrumbs = getBreadcrumbs(
+      matchRoute,
+      pathname,
+      Object.entries(search).reduce((p, [k, v]) => p + \`\${k}=\${v}\`, ''),
+      'Home',
+    );
+    setActiveBreadcrumbs(breadcrumbs);
+  }, [matchRoute, pathname, search]);
+
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <div className="app-header-inner">
+          <div className="brand">
+            <a href="/">
+              <img
+                src={Config.logo}
+                alt={\`\${Config.applicationName} logo\`}
+                className="brand-logo"
+              />
+              <span className="brand-name">{Config.applicationName}</span>
+            </a>
+          </div>
+
+          <nav className="app-nav">
+            {navItems.map((item) => (
+              <Link
+                key={item.to}
+                to={item.to}
+                className={pathname === item.to ? 'active' : undefined}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </header>
+      <main className="app-main">
+        <nav className="breadcrumbs" aria-label="Breadcrumb">
+          {activeBreadcrumbs.map((crumb, index) => (
+            <span className="breadcrumb-segment" key={crumb.href || index}>
+              {index > 0 && <span className="breadcrumb-separator">/</span>}
+              {index === activeBreadcrumbs.length - 1 ? (
+                <span className="breadcrumb-current">{crumb.text}</span>
+              ) : (
+                <Link to={crumb.href}>{crumb.text}</Link>
+              )}
+            </span>
+          ))}
+        </nav>
+
+        <section className="card">{children}</section>
+      </main>
+    </div>
+  );
+};
+
+export default AppLayout;
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/components/alert.tsx 1`] = `
+"import React from 'react';
+
+interface AlertProps {
+  type: string;
+  header: string;
+  children: React.ReactNode;
+}
+
+export const Alert: React.FC<AlertProps> = ({ type, header, children }) => (
+  <div className={\`alert alert-\${type}\`} role="alert">
+    <div className="alert-header">{header}</div>
+    <div className="alert-body">{children}</div>
+  </div>
+);
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/components/spinner.tsx 1`] = `
+"import React from 'react';
+
+export const Spinner: React.FC = () => (
+  <div className="spinner" role="status" aria-live="polite" aria-busy="true">
+    Loading...
+  </div>
+);
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/config.ts 1`] = `
+"export default {
+  applicationName: 'test-app',
+  logo: 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjMjQ4YmFlIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZT0iIzI0OGJhZSI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+Cg08dGl0bGU+aW9uaWNvbnMtdjVfbG9nb3M8L3RpdGxlPgoNPHBhdGggZD0iTTQxMC42NiwxODAuNzJoMHEtNy42Ny0yLjYyLTE1LjQ1LTQuODgsMS4yOS01LjI1LDIuMzgtMTAuNTZjMTEuNy01Ni45LDQuMDUtMTAyLjc0LTIyLjA2LTExNy44My0yNS0xNC40OC02NiwuNjEtMTA3LjM2LDM2LjY5cS02LjEsNS4zNC0xMS45NSwxMS0zLjktMy43Ni04LTcuMzZjLTQzLjM1LTM4LjU4LTg2LjgtNTQuODMtMTEyLjg4LTM5LjY5LTI1LDE0LjUxLTMyLjQzLDU3LjYtMjEuOSwxMTEuNTNxMS41OCw4LDMuNTUsMTUuOTNjLTYuMTUsMS43NS0xMi4wOSwzLjYyLTE3Ljc3LDUuNkM0OC40NiwxOTguOSwxNiwyMjYuNzMsMTYsMjU1LjU5YzAsMjkuODIsMzQuODQsNTkuNzIsODcuNzcsNzcuODVxNi40NCwyLjE5LDEzLDQuMDdRMTE0LjY0LDM0NiwxMTMsMzU0LjY4Yy0xMCw1My0yLjIsOTUuMDcsMjIuNzUsMTA5LjQ5LDI1Ljc3LDE0Ljg5LDY5LS40MSwxMTEuMTQtMzcuMzFxNS00LjM4LDEwLTkuMjUsNi4zMiw2LjExLDEzLDExLjg2YzQwLjgsMzUuMTgsODEuMDksNDkuMzksMTA2LDM0LjkzLDI1Ljc1LTE0Ljk0LDM0LjEyLTYwLjE0LDIzLjI1LTExNS4xM3EtMS4yNS02LjMtMi44OC0xMi44Niw0LjU2LTEuMzUsOC45My0yLjc5YzU1LTE4LjI3LDkwLjgzLTQ3LjgxLDkwLjgzLTc4QzQ5NiwyMjYuNjIsNDYyLjUsMTk4LjYxLDQxMC42NiwxODAuNzJabS0xMjktODEuMDhjMzUuNDMtMzAuOTEsNjguNTUtNDMuMTEsODMuNjUtMzQuMzloMGMxNi4wNyw5LjI5LDIyLjMyLDQ2Ljc1LDEyLjIyLDk1Ljg4cS0xLDQuOC0yLjE2LDkuNTdhNDg3LjgzLDQ4Ny44MywwLDAsMC02NC4xOC0xMC4xNiw0ODEuMjcsNDgxLjI3LDAsMCwwLTQwLjU3LTUwLjc1UTI3NiwxMDQuNTcsMjgxLjY0LDk5LjY0Wk0xNTcuNzMsMjgwLjI1cTYuNTEsMTIuNiwxMy42MSwyNC44OSw3LjIzLDEyLjU0LDE1LjA3LDI0LjcxYTQzNS4yOCw0MzUuMjgsMCwwLDEtNDQuMjQtNy4xM0MxNDYuNDEsMzA5LDE1MS42MywyOTQuNzUsMTU3LjczLDI4MC4yNVptMC00OC4zM2MtNi0xNC4xOS0xMS4wOC0yOC4xNS0xNS4yNS00MS42MywxMy43LTMuMDcsMjguMy01LjU4LDQzLjUyLTcuNDhxLTcuNjUsMTEuOTQtMTQuNzIsMjQuMjNUMTU3LjcsMjMxLjkyWm0xMC45LDI0LjE3cTkuNDgtMTkuNzcsMjAuNDItMzguNzhoMHExMC45My0xOSwyMy4yNy0zNy4xM2MxNC4yOC0xLjA4LDI4LjkyLTEuNjUsNDMuNzEtMS42NXMyOS41Mi41Nyw0My43OSwxLjY2cTEyLjIxLDE4LjA5LDIzLjEzLDM3dDIwLjY5LDM4LjZRMzM0LDI3NS42MywzMjMsMjk0LjczaDBxLTEwLjkxLDE5LTIzLDM3LjI0Yy0xNC4yNSwxLTI5LDEuNTUtNDQsMS41NXMtMjkuNDctLjQ3LTQzLjQ2LTEuMzhxLTEyLjQzLTE4LjE5LTIzLjQ2LTM3LjI5VDE2OC42LDI1Ni4wOVpNMzQwLjc1LDMwNXE3LjI1LTEyLjU4LDEzLjkyLTI1LjQ5aDBhNDQwLjQxLDQ0MC40MSwwLDAsMSwxNi4xMiw0Mi4zMkE0MzQuNDQsNDM0LjQ0LDAsMCwxLDMyNiwzMjkuNDhRMzMzLjYyLDMxNy4zOSwzNDAuNzUsMzA1Wm0xMy43Mi03My4wN3EtNi42NC0xMi42NS0xMy44MS0yNWgwcS03LTEyLjE4LTE0LjU5LTI0LjA2YzE1LjMxLDEuOTQsMzAsNC41Miw0My43Nyw3LjY3QTQzOS44OSw0MzkuODksMCwwLDEsMzU0LjQ3LDIzMS45M1pNMjU2LjIzLDEyNC40OGgwYTQzOS43NSw0MzkuNzUsMCwwLDEsMjguMjUsMzQuMThxLTI4LjM1LTEuMzUtNTYuNzQsMEMyMzcuMDcsMTQ2LjMyLDI0Ni42MiwxMzQuODcsMjU2LjIzLDEyNC40OFpNMTQ1LjY2LDY1Ljg2YzE2LjA2LTkuMzIsNTEuNTcsNCw4OSwzNy4yNywyLjM5LDIuMTMsNC44LDQuMzYsNy4yLDYuNjdBNDkxLjM3LDQ5MS4zNywwLDAsMCwyMDEsMTYwLjUxYTQ5OS4xMiw0OTkuMTIsMCwwLDAtNjQuMDYsMTBxLTEuODMtNy4zNi0zLjMtMTQuODJoMEMxMjQuNTksMTA5LjQ2LDEzMC41OCw3NC42MSwxNDUuNjYsNjUuODZaTTEyMi4yNSwzMTcuNzFxLTYtMS43MS0xMS44NS0zLjcxYy0yMy40LTgtNDIuNzMtMTguNDQtNTYtMjkuODFDNDIuNTIsMjc0LDM2LjUsMjYzLjgzLDM2LjUsMjU1LjU5YzAtMTcuNTEsMjYuMDYtMzkuODUsNjkuNTItNTVxOC4xOS0yLjg1LDE2LjUyLTUuMjFhNDkzLjU0LDQ5My41NCwwLDAsMCwyMy40LDYwLjc1QTUwMi40Niw1MDIuNDYsMCwwLDAsMTIyLjI1LDMxNy43MVptMTExLjEzLDkzLjY3Yy0xOC42MywxNi4zMi0zNy4yOSwyNy44OS01My43NCwzMy43MmgwYy0xNC43OCw1LjIzLTI2LjU1LDUuMzgtMzMuNjYsMS4yNy0xNS4xNC04Ljc1LTIxLjQ0LTQyLjU0LTEyLjg1LTg3Ljg2cTEuNTMtOCwzLjUtMTZhNDgwLjg1LDQ4MC44NSwwLDAsMCw2NC42OSw5LjM5LDUwMS4yLDUwMS4yLDAsMCwwLDQxLjIsNTFDMjM5LjU0LDQwNS44MywyMzYuNDksNDA4LjY1LDIzMy4zOCw0MTEuMzhabTIzLjQyLTIzLjIyYy05LjcyLTEwLjUxLTE5LjQyLTIyLjE0LTI4Ljg4LTM0LjY0cTEzLjc5LjU0LDI4LjA4LjU0YzkuNzgsMCwxOS40Ni0uMjEsMjktLjY0QTQzOS4zMyw0MzkuMzMsMCwwLDEsMjU2LjgsMzg4LjE2Wm0xMjQuNTIsMjguNTljLTIuODYsMTUuNDQtOC42MSwyNS43NC0xNS43MiwyOS44Ni0xNS4xMyw4Ljc4LTQ3LjQ4LTIuNjMtODIuMzYtMzIuNzItNC0zLjQ0LTgtNy4xMy0xMi4wNy0xMWE0ODQuNTQsNDg0LjU0LDAsMCwwLDQwLjIzLTUxLjIsNDc3Ljg0LDQ3Ny44NCwwLDAsMCw2NS0xMC4wNXExLjQ3LDUuOTQsMi42LDExLjY0aDBDMzgzLjgxLDM3Ny41OCwzODQuNSwzOTkuNTYsMzgxLjMyLDQxNi43NVptMTcuNC0xMDIuNjRoMGMtMi42Mi44Ny01LjMyLDEuNzEtOC4wNiwyLjUzYTQ4My4yNiw0ODMuMjYsMCwwLDAtMjQuMzEtNjAuOTQsNDgxLjUyLDQ4MS41MiwwLDAsMCwyMy4zNi02MC4wNmM0LjkxLDEuNDMsOS42OCwyLjkzLDE0LjI3LDQuNTIsNDQuNDIsMTUuMzIsNzEuNTIsMzgsNzEuNTIsNTUuNDNDNDc1LjUsMjc0LjE5LDQ0Ni4yMywyOTguMzMsMzk4LjcyLDMxNC4xMVoiLz4KDTxwYXRoIGQ9Ik0yNTYsMjk4LjU1YTQzLDQzLDAsMSwwLTQyLjg2LTQzQTQyLjkxLDQyLjkxLDAsMCwwLDI1NiwyOTguNTVaIi8+Cg08L2c+Cg08L3N2Zz4=',
+};
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/main.tsx 1`] = `
+"import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type RouterProviderContext = {};
+
+const router = createRouter({
+  routeTree,
+  context: {},
+});
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const App = () => {
+  return <RouterProvider router={router} context={{}} />;
+};
+
+const root = document.getElementById('root');
+root &&
+  createRoot(root).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/routeTree.gen.ts 1`] = `
+"/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as IndexRouteImport } from './routes/index';
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any);
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute;
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute;
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport;
+  '/': typeof IndexRoute;
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths: '/';
+  fileRoutesByTo: FileRoutesByTo;
+  to: '/';
+  id: '__root__' | '/';
+  fileRoutesById: FileRoutesById;
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/';
+      path: '/';
+      fullPath: '/';
+      preLoaderRoute: typeof IndexRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+};
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>();
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/routes/__root.tsx 1`] = `
+"import { createRootRouteWithContext } from '@tanstack/react-router';
+import AppLayout from '../components/AppLayout';
+import { RouterProviderContext } from '../main';
+import { Outlet } from '@tanstack/react-router';
+
+export const Route = createRootRouteWithContext<RouterProviderContext>()({
+  component: () => (
+    <AppLayout>
+      <Outlet />
+    </AppLayout>
+  ),
+});
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/routes/index.tsx 1`] = `
+"import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <>
+      <h1>Welcome</h1>
+      <p>Welcome to your new React website!</p>
+    </>
+  );
+}
+"
+`;
+
+exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/styles.css 1`] = `
+"@import 'tailwindcss';
+
+:root {
+  color-scheme: light;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  background-color: #f8fafc;
+  color: #0f172a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.app-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 1rem 0;
+  border-bottom: 1px solid #e2e8f0;
+  background: #ffffff;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.app-header-inner {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  width: min(1100px, 100%);
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+}
+
+.brand a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.brand-logo {
+  height: 32px;
+  width: auto;
+}
+
+.brand-name {
+  font-weight: 700;
+  font-size: 1.1rem;
+  line-height: 1.1;
+  display: inline-flex;
+  align-items: center;
+}
+
+.user-greeting {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.signout-link {
+  border: none;
+  background: transparent;
+  color: #0ea5e9;
+  cursor: pointer;
+  font-weight: 600;
+  padding: 0.25rem 0.35rem;
+  border-radius: 0.35rem;
+}
+
+.signout-link:hover {
+  background: #e0f2fe;
+}
+
+.app-main {
+  width: min(1100px, 100%);
+  margin: 2rem auto;
+  padding: 0 1rem 3rem;
+}
+
+.card {
+  background: #ffffff;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
+  border: 1px solid #e2e8f0;
+}
+
+.card h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  color: #334155;
+  line-height: 1.6;
+}
+
+.spinner {
+  display: inline-block;
+  padding: 0.75rem 1rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  background: #ffffff;
+  color: #0f172a;
+}
+
+.alert {
+  border-radius: 0.75rem;
+  padding: 1rem 1.25rem;
+  margin: 1rem 0;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #0f172a;
+}
+
+.alert-error {
+  border-color: #fecdd3;
+  background: #fff1f2;
+  color: #881337;
+}
+
+.alert-header {
+  font-weight: 700;
+  margin-bottom: 0.35rem;
+}
+
+.alert-body {
+  margin: 0;
+}
+
+.app-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.app-nav a {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.65rem;
+  border-radius: 0.375rem;
+  line-height: 1.1;
+}
+
+.app-nav a.active {
+  background: #e2e8f0;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.95rem;
+  color: #475569;
+  margin: 0 0 1rem;
+}
+
+.breadcrumb-segment a {
+  color: inherit;
+}
+
+.breadcrumb-current {
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.breadcrumb-separator {
+  color: #cbd5e1;
+}
+"
+`;
+
 exports[`react-website generator > TailwindCSS integration > should configure vite with TailwindCSS plugin by default > vite.config.mts-with-tailwind 1`] = `
 "import tailwindcss from '@tailwindcss/vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
@@ -1055,9 +1875,9 @@ exports[`react-website generator > Tanstack router integration > should generate
   "name": "@proj/source",
   "dependencies": {
     "@cloudscape-design/board-components": "3.0.130",
-    "@cloudscape-design/components": "3.0.1143",
+    "@cloudscape-design/components": "3.0.1144",
     "@cloudscape-design/global-styles": "1.0.49",
-    "aws-cdk-lib": "2.229.1",
+    "aws-cdk-lib": "2.230.0",
     "constructs": "10.4.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
@@ -1922,7 +2742,8 @@ exports[`react-website generator > Tanstack router integration > should generate
     }
   },
   "metadata": {
-    "generator": "ts#react-website"
+    "generator": "ts#react-website",
+    "uxProvider": "Cloudscape"
   }
 }
 "
@@ -2064,6 +2885,20 @@ export default AppLayout;
 "
 `;
 
+exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > test-app/src/components/alert.tsx 1`] = `
+"import { Alert as CloudscapeAlert } from '@cloudscape-design/components';
+
+export const Alert = CloudscapeAlert;
+"
+`;
+
+exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > test-app/src/components/spinner.tsx 1`] = `
+"import { Spinner as CloudscapeSpinner } from '@cloudscape-design/components';
+
+export const Spinner = CloudscapeSpinner;
+"
+`;
+
 exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > test-app/src/config.ts 1`] = `
 "export default {
   applicationName: 'test-app',
@@ -2460,10 +3295,10 @@ exports[`react-website generator > Tanstack router integration > should generate
   "name": "@proj/source",
   "dependencies": {
     "@cloudscape-design/board-components": "3.0.130",
-    "@cloudscape-design/components": "3.0.1143",
+    "@cloudscape-design/components": "3.0.1144",
     "@cloudscape-design/global-styles": "1.0.49",
-    "@tanstack/react-router": "1.139.6",
-    "aws-cdk-lib": "2.229.1",
+    "@tanstack/react-router": "1.139.7",
+    "aws-cdk-lib": "2.230.0",
     "constructs": "10.4.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
@@ -2483,8 +3318,8 @@ exports[`react-website generator > Tanstack router integration > should generate
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
     "@tailwindcss/vite": "4.1.17",
-    "@tanstack/router-generator": "1.139.6",
-    "@tanstack/router-plugin": "1.139.6",
+    "@tanstack/router-generator": "1.139.7",
+    "@tanstack/router-plugin": "1.139.7",
     "@tanstack/router-utils": "1.139.0",
     "@tanstack/virtual-file-routes": "1.139.0",
     "@testing-library/dom": "10.4.0",
@@ -3332,7 +4167,8 @@ exports[`react-website generator > Tanstack router integration > should generate
     }
   },
   "metadata": {
-    "generator": "ts#react-website"
+    "generator": "ts#react-website",
+    "uxProvider": "Cloudscape"
   }
 }
 "
@@ -3534,6 +4370,20 @@ export default AppLayout;
 "
 `;
 
+exports[`react-website generator > Tanstack router integration > should generate website with router correctly > test-app/src/components/alert.tsx 1`] = `
+"import { Alert as CloudscapeAlert } from '@cloudscape-design/components';
+
+export const Alert = CloudscapeAlert;
+"
+`;
+
+exports[`react-website generator > Tanstack router integration > should generate website with router correctly > test-app/src/components/spinner.tsx 1`] = `
+"import { Spinner as CloudscapeSpinner } from '@cloudscape-design/components';
+
+export const Spinner = CloudscapeSpinner;
+"
+`;
+
 exports[`react-website generator > Tanstack router integration > should generate website with router correctly > test-app/src/config.ts 1`] = `
 "export default {
   applicationName: 'test-app',
@@ -3602,107 +4452,55 @@ exports[`react-website generator > Tanstack router integration > should generate
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-// Import Routes
+import { Route as rootRouteImport } from './routes/__root';
+import { Route as IndexRouteImport } from './routes/index';
 
-import { Route as rootRoute } from './routes/__root';
-import { Route as IndexImport } from './routes/index';
-import { Route as WelcomeIndexImport } from './routes/welcome/index';
-
-// Create/Update Routes
-
-const IndexRoute = IndexImport.update({
+const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => rootRoute,
-} as any);
-
-const WelcomeIndexRoute = WelcomeIndexImport.update({
-  id: '/welcome/',
-  path: '/welcome/',
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => rootRouteImport,
 } as any);
 
-// Populate the FileRoutesByPath interface
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/': {
-      id: '/';
-      path: '/';
-      fullPath: '/';
-      preLoaderRoute: typeof IndexImport;
-      parentRoute: typeof rootRoute;
-    };
-    '/welcome/': {
-      id: '/welcome/';
-      path: '/welcome';
-      fullPath: '/welcome';
-      preLoaderRoute: typeof WelcomeIndexImport;
-      parentRoute: typeof rootRoute;
-    };
-  }
-}
-
-// Create and export the route tree
-
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute;
-  '/welcome': typeof WelcomeIndexRoute;
 }
-
 export interface FileRoutesByTo {
   '/': typeof IndexRoute;
-  '/welcome': typeof WelcomeIndexRoute;
 }
-
 export interface FileRoutesById {
-  __root__: typeof rootRoute;
+  __root__: typeof rootRouteImport;
   '/': typeof IndexRoute;
-  '/welcome/': typeof WelcomeIndexRoute;
 }
-
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath;
-  fullPaths: '/' | '/welcome';
+  fullPaths: '/';
   fileRoutesByTo: FileRoutesByTo;
-  to: '/' | '/welcome';
-  id: '__root__' | '/' | '/welcome/';
+  to: '/';
+  id: '__root__' | '/';
   fileRoutesById: FileRoutesById;
 }
-
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute;
-  WelcomeIndexRoute: typeof WelcomeIndexRoute;
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/';
+      path: '/';
+      fullPath: '/';
+      preLoaderRoute: typeof IndexRouteImport;
+      parentRoute: typeof rootRouteImport;
+    };
+  }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  WelcomeIndexRoute: WelcomeIndexRoute,
 };
-
-export const routeTree = rootRoute
+export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>();
-
-/* ROUTE_MANIFEST_START
-{
-  "routes": {
-    "__root__": {
-      "filePath": "__root.tsx",
-      "children": [
-        "/",
-        "/welcome/"
-      ]
-    },
-    "/": {
-      "filePath": "index.tsx"
-    },
-    "/welcome/": {
-      "filePath": "welcome/index.tsx"
-    }
-  }
-}
-ROUTE_MANIFEST_END */
 "
 `;
 
@@ -4562,10 +5360,10 @@ root &&
 exports[`react-website generator > should handle npm scope prefix correctly > scoped-dependencies 1`] = `
 {
   "@cloudscape-design/board-components": "3.0.130",
-  "@cloudscape-design/components": "3.0.1143",
+  "@cloudscape-design/components": "3.0.1144",
   "@cloudscape-design/global-styles": "1.0.49",
-  "@tanstack/react-router": "1.139.6",
-  "aws-cdk-lib": "2.229.1",
+  "@tanstack/react-router": "1.139.7",
+  "aws-cdk-lib": "2.230.0",
   "constructs": "10.4.3",
   "react": "19.2.0",
   "react-dom": "19.2.0",