slice-machine-ui 2.18.1-beta.6 → 2.18.1-beta.8

package/src/legacy/components/Navigation/ChangesItem.tsx

@@ -9,13 +9,6 @@ import {
 import { useRouter } from "next/router";
 import { type FC } from "react";
 
-import {
-  HoverCard,
-  HoverCardCloseButton,
-  HoverCardDescription,
-  HoverCardMedia,
-  HoverCardTitle,
-} from "@/components/HoverCard";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { AutoSyncStatusIndicator } from "@/features/sync/components/AutoSyncStatusIndicator";
 import { useUnSyncChanges } from "@/features/sync/useUnSyncChanges";
@@ -23,87 +16,59 @@ import { useAuthStatus } from "@/hooks/useAuthStatus";
 import { useNetwork } from "@/hooks/useNetwork";
 import { ChangesIcon } from "@/icons/ChangesIcon";
 import { AuthStatus } from "@/modules/userContext/types";
-import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 export const ChangesItem: FC = () => {
-  const { setSeenChangesToolTip } = useSliceMachineActions();
-  const open = useOpenChangesHoverCard();
   const router = useRouter();
   const { autoSyncStatus } = useAutoSync();
   const collapsed = useMediaQuery({ max: "medium" });
 
-  const onClose = () => {
-    setSeenChangesToolTip();
-  };
-
   return (
-    <HoverCard
-      align="start"
-      open={open}
-      openDelay={3000}
-      onClose={onClose}
-      side="right"
-      sideOffset={24}
-      trigger={
-        <Box
-          alignItems={collapsed ? "center" : undefined}
-          flexDirection="column"
-        >
-          {autoSyncStatus === "failed" ||
-          autoSyncStatus === "synced" ||
-          autoSyncStatus === "syncing" ? (
-            <AutoSyncStatusIndicator autoSyncStatus={autoSyncStatus} />
-          ) : collapsed ? (
-            <Tooltip content="Review changes" side="right">
-              <Box position="relative">
-                {/*
-                 * TODO(DT-1942): This should be an IconButton with a link
-                 * component for accessibility
-                 */}
-                <IconButton
-                  icon={<ChangesIcon />}
-                  onClick={() => {
-                    void router.push("/changes");
-                  }}
-                  variant="solid"
-                />
-                <Box
-                  left="100%"
-                  position="absolute"
-                  top={0}
-                  transform="translate(-50%, -50%)"
-                >
-                  <ChangesCount color="purple" />
-                </Box>
-              </Box>
-            </Tooltip>
-          ) : (
-            // TODO(DT-1942): This should be a Button with a link component for
-            // accessibility
-            <Button
-              color="grey"
+    <Box alignItems={collapsed ? "center" : undefined} flexDirection="column">
+      {autoSyncStatus === "failed" ||
+      autoSyncStatus === "synced" ||
+      autoSyncStatus === "syncing" ? (
+        <AutoSyncStatusIndicator autoSyncStatus={autoSyncStatus} />
+      ) : collapsed ? (
+        <Tooltip content="Review changes" side="right">
+          <Box position="relative">
+            {/*
+             * TODO(DT-1942): This should be an IconButton with a link
+             * component for accessibility
+             */}
+            <IconButton
+              icon={<ChangesIcon />}
               onClick={() => {
                 void router.push("/changes");
               }}
-              sx={{ width: "100%" }}
+              variant="solid"
+            />
+            <Box
+              left="100%"
+              position="absolute"
+              top={0}
+              transform="translate(-50%, -50%)"
             >
-              <Box alignItems="center" gap={4}>
-                <Text variant="bold">Review changes</Text>{" "}
-                <ChangesCount color="grey" />
-              </Box>
-            </Button>
-          )}
-        </Box>
-      }
-    >
-      <HoverCardTitle>Push your changes</HoverCardTitle>
-      <HoverCardMedia component="image" src="/push.png" />
-      <HoverCardDescription>
-        When you click Save, your changes are saved locally. Then, you can push
-        your models to Prismic from the Changes page.
-      </HoverCardDescription>
-      <HoverCardCloseButton>Got it</HoverCardCloseButton>
-    </HoverCard>
+              <ChangesCount color="purple" />
+            </Box>
+          </Box>
+        </Tooltip>
+      ) : (
+        // TODO(DT-1942): This should be a Button with a link component for
+        // accessibility
+        <Button
+          color="grey"
+          onClick={() => {
+            void router.push("/changes");
+          }}
+          sx={{ width: "100%" }}
+        >
+          <Box alignItems="center" gap={4}>
+            <Text variant="bold">Review changes</Text>{" "}
+            <ChangesCount color="grey" />
+          </Box>
+        </Button>
+      )}
+    </Box>
   );
 };
 
@@ -117,16 +82,12 @@ export const ChangesCount: FC<ChangesCountProps> = ({ color }) => {
 
   if (
     !isOnline ||
-    authStatus === AuthStatus.UNAUTHORIZED ||
-    authStatus === AuthStatus.FORBIDDEN
+    authStatus !== AuthStatus.AUTHENTICATED ||
+    numberOfChanges === 0
   ) {
     return null;
   }
 
-  if (numberOfChanges === 0) {
-    return null;
-  }
-
   const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
 
   return (
@@ -141,20 +102,3 @@ export const ChangesCount: FC<ChangesCountProps> = ({ color }) => {
     </Box>
   );
 };
-
-// TODO(DT-1925): Reactivate this feature
-const useOpenChangesHoverCard = () => {
-  // const { hasSeenChangesToolTip, hasSeenSimulatorToolTip } = useSelector(
-  //   (store: SliceMachineStoreType) => ({
-  //     hasSeenChangesToolTip: userHasSeenChangesToolTip(store),
-  //     hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store),
-  //   }),
-  // );
-
-  // return (
-  //   !hasSeenChangesToolTip &&
-  //   hasSeenSimulatorToolTip
-  // );
-
-  return false;
-};

package/src/legacy/components/Navigation/Environment.tsx

@@ -5,7 +5,7 @@ import {
 import { useState } from "react";
 
 import { getState, telemetry } from "@/apiClient";
-import { setEnvironment } from "@/features/environments/actions/setEnvironment";
+import { useSetEnvironment } from "@/features/environments/actions/useSetEnvironment";
 import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { useEnvironments } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
@@ -28,6 +28,7 @@ export function Environment() {
   const authStatus = useAuthStatus();
   const [isSwitchingEnv, setIsSwitchingEnv] = useState(false);
   const { autoSyncStatus } = useAutoSync();
+  const setEnvironment = useSetEnvironment();
 
   async function onSelect(environment: EnvironmentType) {
     if (activeEnvironment?.name === environment.name) {
@@ -105,10 +106,4 @@ export function Environment() {
       />
     );
   }
-
-  if (useEnvironmentsError !== undefined) {
-    throw useEnvironmentsError;
-  }
-
-  throw activeEnvironmentError;
 }

package/src/legacy/components/Navigation/SideNavEnvironmentSelector/SideNavEnvironmentSelector.tsx

@@ -17,9 +17,8 @@ import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import type { Environment } from "@slicemachine/manager/client";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
-import { toast } from "react-toastify";
 
-import { LogoutButton } from "@/features/auth/LogoutButton";
+import { EnvironmentLogoutButton } from "@/features/auth/LogoutButton";
 import { LoginIcon } from "@/icons/LoginIcon";
 import { LogoIcon } from "@/icons/LogoIcon";
 
@@ -30,7 +29,7 @@ type SideNavEnvironmentSelectorProps = {
   disabled?: boolean;
   environments?: Environment[];
   loading?: boolean;
-  variant?: "default" | "offline" | "unauthorized" | "unauthenticated";
+  variant?: "default" | "offline" | "unauthenticated";
   onLogInClick?: () => void;
   onSelect?: (environment: Environment) => void | Promise<void>;
 };
@@ -141,11 +140,7 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
               />
             ) : undefined}
 
-            {variant === "default" && (
-              <LogoutButton
-                onLogoutSuccess={() => toast.success("Logged out")}
-              />
-            )}
+            {variant === "default" && <EnvironmentLogoutButton />}
           </Box>
         </>
       )}

package/src/legacy/components/Simulator/index.tsx

@@ -17,7 +17,7 @@ import { toast } from "react-toastify";
 import { BaseStyles, Box, Flex, Spinner } from "theme-ui";
 
 import { saveSliceMock, telemetry } from "@/apiClient";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/features/errorBoundaries";
 import useThrottle from "@/hooks/useThrottle";
 import ScreenshotPreviewModal from "@/legacy/components/ScreenshotPreviewModal";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
@@ -287,7 +287,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
                 overflowY: "auto",
               }}
             >
-              <ErrorBoundary
+              <DefaultErrorBoundary
                 renderError={() => (
                   <DefaultErrorMessage
                     title="Editor error"
@@ -315,7 +315,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
                     />
                   </QueryClientProvider>
                 </Suspense>
-              </ErrorBoundary>
+              </DefaultErrorBoundary>
             </Flex>
           ) : null}
         </Flex>

package/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -20,8 +20,8 @@ import {
   reorderField,
   updateField,
 } from "@/domain/customType";
-import { ErrorBoundary } from "@/ErrorBoundary";
 import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { DefaultErrorBoundary } from "@/features/errorBoundaries";
 import {
   CustomTypes,
   type TabField,
@@ -246,7 +246,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
   };
 
   return (
-    <ErrorBoundary>
+    <DefaultErrorBoundary>
       <Suspense
         fallback={
           <Box padding={32}>
@@ -297,7 +297,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
           />
         </List>
       </Suspense>
-    </ErrorBoundary>
+    </DefaultErrorBoundary>
   );
 };
 

package/src/modules/userContext/index.ts

@@ -1,3 +1,4 @@
+import { UnauthenticatedError } from "@slicemachine/manager/client";
 import { Reducer } from "redux";
 import { ActionType, createAction, getType } from "typesafe-actions";
 
@@ -90,13 +91,12 @@ const getAuthStatus = (
 ): AuthStatus => {
   switch (clientError?.status) {
     case undefined: {
-      return AuthStatus.AUTHORIZED;
-    }
-    case 403: {
-      return AuthStatus.UNAUTHORIZED;
+      return AuthStatus.AUTHENTICATED;
     }
     case 401: {
-      return AuthStatus.FORBIDDEN;
+      if (clientError.name === new UnauthenticatedError().name) {
+        return AuthStatus.UNAUTHENTICATED;
+      }
     }
     default: {
       return AuthStatus.UNKNOWN;

package/src/modules/userContext/types.ts

@@ -1,7 +1,6 @@
 export enum AuthStatus {
-  AUTHORIZED = "authorized",
-  UNAUTHORIZED = "unauthorized",
-  FORBIDDEN = "forbidden",
+  AUTHENTICATED = "authenticated",
+  UNAUTHENTICATED = "unauthenticated",
   UNKNOWN = "unknown",
 }
 

package/src/pages/_app.tsx

@@ -13,34 +13,33 @@ import "@/styles/starry-night.css";
 import "@/styles/tabs.css";
 import "@/styles/toaster.css";
 
+import { ThemeProvider, TooltipProvider } from "@prismicio/editor-ui";
 import {
-  Box,
-  DefaultErrorMessage,
-  ThemeProvider,
-  TooltipProvider,
-} from "@prismicio/editor-ui";
-import { ConnectedRouter } from "connected-next-router";
+  isInvalidActiveEnvironmentError,
+  isUnauthorizedError,
+} from "@slicemachine/manager/client";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { ConnectedRouter as StoreConnectedRouter } from "connected-next-router";
 import type { NextPage } from "next";
 import type { AppContext, AppInitialProps } from "next/app";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import Router from "next/router";
-import { type FC, type ReactNode, Suspense, useEffect, useState } from "react";
+import { type FC, type ReactNode, Suspense, useEffect } from "react";
 import { Provider } from "react-redux";
-import type { Store } from "redux";
-import type { Persistor } from "redux-persist/es/types";
 import { PersistGate } from "redux-persist/integration/react";
 import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
 import { getState } from "@/apiClient";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
+import { AppStateErrorBoundary } from "@/features/errorBoundaries";
 import { AutoSyncProvider } from "@/features/sync/AutoSyncProvider";
 import { RouteChangeProvider } from "@/hooks/useRouteChange";
 import SliceMachineApp from "@/legacy/components/App";
 import LoadingPage from "@/legacy/components/LoadingPage";
 import ToastContainer from "@/legacy/components/ToasterContainer";
 import { normalizeFrontendCustomTypes } from "@/legacy/lib/models/common/normalizers/customType";
-import type ServerState from "@/legacy/lib/models/server/ServerState";
+import { QueryClientProvider } from "@/queryClient";
 import configureStore from "@/redux/store";
 import theme from "@/theme";
 
@@ -68,50 +67,10 @@ const RemoveDarkMode: FC<RemoveDarkModeProps> = ({ children }) => {
   return <>{children}</>;
 };
 
-function App({
-  Component,
-  pageProps,
-}: AppContextWithComponentLayout & AppInitialProps) {
-  const [serverState, setServerState] = useState<ServerState | null>(null);
-  const [smStore, setSMStore] = useState<{
-    store: Store;
-    persistor: Persistor;
-  } | null>(null);
+function App(props: AppContextWithComponentLayout & AppInitialProps) {
+  const { Component } = props;
 
-  useEffect(() => {
-    async function getInitialState() {
-      const serverState = await getState();
-      setServerState(serverState);
-    }
-    void getInitialState();
-  }, []);
-
-  useEffect(() => {
-    if (!serverState || smStore) {
-      return;
-    }
-
-    const normalizedCustomTypes = normalizeFrontendCustomTypes(
-      serverState.customTypes,
-      serverState.remoteCustomTypes,
-    );
-
-    const { store, persistor } = configureStore({
-      environment: serverState.env,
-      availableCustomTypes: {
-        ...normalizedCustomTypes,
-      },
-      slices: {
-        libraries: serverState.libraries,
-        remoteSlices: serverState.remoteSlices,
-      },
-    });
-
-    setSMStore({ store, persistor });
-  }, [serverState, smStore]);
-
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  const ComponentLayout = Component.CustomLayout || SliceMachineApp;
+  const ComponentLayout = Component.CustomLayout ?? SliceMachineApp;
 
   return (
     <>
@@ -119,50 +78,89 @@ function App({
         <title>Slice Machine</title>
       </Head>
       <ThemeUIThemeProvider theme={theme}>
-        <RemoveDarkMode>
-          <ThemeProvider mode="light">
-            <TooltipProvider>
-              {!smStore || !serverState ? (
-                <LoadingPage />
-              ) : (
-                <Provider store={smStore.store}>
-                  <ConnectedRouter Router={Router}>
-                    <PersistGate loading={null} persistor={smStore.persistor}>
-                      <ErrorBoundary
-                        renderError={() => (
-                          <Box
-                            justifyContent="center"
-                            width="100%"
-                            padding={80}
-                          >
-                            <DefaultErrorMessage
-                              title="Error"
-                              description="An error occurred while rendering the app."
-                            />
-                          </Box>
-                        )}
-                      >
-                        <Suspense fallback={<LoadingPage />}>
-                          <AutoSyncProvider>
-                            <RouteChangeProvider>
-                              <ComponentLayout>
-                                <Component {...pageProps} />
-                              </ComponentLayout>
-                            </RouteChangeProvider>
-                          </AutoSyncProvider>
-                        </Suspense>
-                      </ErrorBoundary>
-                    </PersistGate>
-                  </ConnectedRouter>
-                  <ToastContainer />
-                </Provider>
-              )}
-            </TooltipProvider>
-          </ThemeProvider>
-        </RemoveDarkMode>
+        <QueryClientProvider>
+          <RemoveDarkMode>
+            <ThemeProvider mode="light">
+              <TooltipProvider>
+                <AppStateErrorBoundary>
+                  <Suspense fallback={<LoadingPage />}>
+                    <AppStateValidator>
+                      <AppStateWrapper>
+                        <AutoSyncProvider>
+                          <ComponentLayout>
+                            <Component {...props.pageProps} />
+                          </ComponentLayout>
+                        </AutoSyncProvider>
+                      </AppStateWrapper>
+                    </AppStateValidator>
+                  </Suspense>
+                </AppStateErrorBoundary>
+                <ToastContainer />
+              </TooltipProvider>
+            </ThemeProvider>
+          </RemoveDarkMode>
+        </QueryClientProvider>
       </ThemeUIThemeProvider>
     </>
   );
 }
 
+/** This is where we should check for unwanted states that should prevent the
+ * user from using the app, and trigger the {@link AppStateErrorBoundary} to
+ * display something explaining why. */
+function AppStateValidator(props: { children: ReactNode }) {
+  const activeEnvironment = useActiveEnvironment({ suspense: true });
+
+  if (
+    // We're using the fetchEnvironments request to check this because it can
+    // return an SMUnauthorizedError or SMInvalidActiveEnvironmentError
+    // according to the API response, so we handle both cases with just one
+    // request. We also perform the request in other parts of the app, so it can
+    // reuse its cache.
+    isUnauthorizedError(activeEnvironment.error) ||
+    isInvalidActiveEnvironmentError(activeEnvironment.error)
+  ) {
+    throw activeEnvironment.error;
+  }
+
+  return <>{props.children}</>;
+}
+
+function AppStateWrapper({ children }: { children: ReactNode }) {
+  const { data: state } = useSuspenseQuery({
+    queryKey: ["getInitialState"],
+    queryFn: async () => {
+      const serverState = await getState();
+      const { store, persistor } = configureStore({
+        environment: serverState.env,
+        availableCustomTypes: {
+          ...normalizeFrontendCustomTypes(
+            serverState.customTypes,
+            serverState.remoteCustomTypes,
+          ),
+        },
+        slices: {
+          libraries: serverState.libraries,
+          remoteSlices: serverState.remoteSlices,
+        },
+      });
+
+      return { serverState, store, persistor };
+    },
+    // avoid refetching
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  return (
+    <Provider store={state.store}>
+      <StoreConnectedRouter Router={Router}>
+        <PersistGate loading={null} persistor={state.persistor}>
+          <RouteChangeProvider>{children}</RouteChangeProvider>
+        </PersistGate>
+      </StoreConnectedRouter>
+    </Provider>
+  );
+}
+
 export default dynamic(() => Promise.resolve(App), { ssr: false });

package/src/pages/changes.tsx

@@ -25,8 +25,8 @@ import {
   AppLayoutHeader,
 } from "@/legacy/components/AppLayout";
 import {
-  AuthErrorPage,
   OfflinePage,
+  UnauthenticatedView,
 } from "@/legacy/components/ChangesEmptyState";
 import { ChangesItems } from "@/legacy/components/ChangesItems";
 import {
@@ -114,8 +114,8 @@ const Changes: React.FunctionComponent = () => {
     if (!isOnline) {
       return <OfflinePage />;
     }
-    if (authStatus === AuthStatus.FORBIDDEN) {
-      return <AuthErrorPage authStatus={authStatus} />;
+    if (authStatus === AuthStatus.UNAUTHENTICATED) {
+      return <UnauthenticatedView />;
     }
     if (numberOfChanges === 0) {
       return (
@@ -160,8 +160,7 @@ const Changes: React.FunctionComponent = () => {
               disabled={
                 numberOfChanges === 0 ||
                 !isOnline ||
-                authStatus === AuthStatus.UNAUTHORIZED ||
-                authStatus === AuthStatus.FORBIDDEN ||
+                authStatus !== AuthStatus.AUTHENTICATED ||
                 isSyncing
               }
               loading={isSyncing}

package/src/queryClient.tsx

@@ -0,0 +1,24 @@
+import {
+  QueryClient,
+  QueryClientProvider as RCQueryClientProvider,
+} from "@tanstack/react-query";
+import { ReactNode } from "react";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      gcTime: 10 * 60 * 1000,
+      retry: false,
+      refetchOnWindowFocus: "always",
+    },
+  },
+});
+
+export function QueryClientProvider(props: { children: ReactNode }) {
+  return (
+    <RCQueryClientProvider client={queryClient}>
+      {props.children}
+    </RCQueryClientProvider>
+  );
+}

package/test/__testutils__/index.tsx

@@ -5,7 +5,8 @@ import { Provider } from "react-redux";
 import { AnyAction, Store } from "redux";
 import { BaseStyles, ThemeProvider as ThemeUIThemeProvider } from "theme-ui";
 
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/features/errorBoundaries";
+import { QueryClientProvider } from "@/queryClient";
 
 import configureStore from "../../src/redux/store";
 import type { SliceMachineStoreType } from "../../src/redux/type";
@@ -44,15 +45,17 @@ function render(
     children: any;
   }) {
     return (
-      <ThemeUIThemeProvider theme={theme}>
-        <TooltipProvider>
-          <BaseStyles>
-            <Provider store={store}>
-              <ErrorBoundary>{children}</ErrorBoundary>
-            </Provider>
-          </BaseStyles>
-        </TooltipProvider>
-      </ThemeUIThemeProvider>
+      <QueryClientProvider>
+        <ThemeUIThemeProvider theme={theme}>
+          <TooltipProvider>
+            <BaseStyles>
+              <Provider store={store}>
+                <DefaultErrorBoundary>{children}</DefaultErrorBoundary>
+              </Provider>
+            </BaseStyles>
+          </TooltipProvider>
+        </ThemeUIThemeProvider>
+      </QueryClientProvider>
     );
   }
   return {

package/out/_next/static/AMILL72qfLjZDeK2IRMSB/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,d,b,n,u,h,l,f,k,j,p,g,o,r,m){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,e,p,g,"static/chunks/pages/index-0d8cb369de720a35.js"],"/_error":["static/chunks/pages/_error-fedd2c6ebd3d27b9.js"],"/changelog":[c,t,"static/chunks/870-a72b74312773efea.js","static/chunks/pages/changelog-ba55ed247c20dc21.js"],"/changes":[c,i,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-fa4f2563cb5fd014.js",a,b,"static/css/d98ebc475f8423a3.css","static/chunks/pages/changes-4c23263cdc8e59c6.js"],"/custom-types":[s,e,p,g,"static/chunks/pages/custom-types-5acd56959b60346f.js"],"/custom-types/[customTypeId]":[c,n,u,h,l,s,t,d,f,o,a,e,k,j,r,m,"static/chunks/pages/custom-types/[customTypeId]-816acb31b652239b.js"],"/labs":["static/chunks/pages/labs-78ac01d97ab02cd7.js"],"/page-types/[pageTypeId]":[c,n,u,h,l,s,t,d,f,o,a,e,k,j,r,m,"static/chunks/pages/page-types/[pageTypeId]-669d5479e81b638b.js"],"/slices":[c,i,s,d,a,b,j,"static/css/efa5152b7c0f35c0.css","static/chunks/pages/slices-f6552e2fbc491c4d.js"],"/slices/[lib]/[sliceName]/[variation]":[c,i,n,u,h,l,s,t,d,f,a,k,b,"static/css/cdee5b195444f185.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-11802744e89707f7.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[i,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/157-54b8336d20b41933.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-b127d948a17968d3.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/397-e6c340070a3bcb41.js","static/chunks/59b4e022-ef680789f7cc9b11.js","static/chunks/34-8d9d9b2944824750.js","static/chunks/647-4379a741c8d85d9e.js","static/chunks/183-4ea255b867ff171b.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/50-586dc7ab5e584e76.js","static/chunks/658-8231c0b729e0124a.js","static/chunks/f36c6662-1f3a854183168b10.js","static/chunks/4c744e84-480e426e4b1cfef3.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-09fb3b997ad1eb70.js","static/chunks/349-7118116b93278f73.js","static/chunks/630-bb6e3db525588f16.js","static/chunks/907-445266211c48b1a5.js","static/chunks/248-43faecb386a16518.js","static/css/4e475d945cf8a890.css","static/chunks/422-c9192a1dbdd2ae0e.js","static/chunks/489-234ed5471aa694b3.js","static/css/56f2a6684a524374.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();