slice-machine-ui 1.26.1-beta.8 → 2.0.0

package/{components → src/legacy/components}/LoadingPage/index.tsx

@@ -1,4 +1,5 @@
 import { Spinner } from "theme-ui";
+
 import FullPage from "../FullPage";
 
 const LoadingPage: React.FunctionComponent = () => (

package/{components → src/legacy/components}/LoginModal/index.tsx

@@ -1,5 +1,7 @@
-import Modal from "react-modal";
 import React from "react";
+import Modal from "react-modal";
+import { useSelector } from "react-redux";
+import { toast } from "react-toastify";
 import {
   Button,
   Card,
@@ -10,28 +12,26 @@ import {
   Spinner,
   Text,
 } from "theme-ui";
-import { toast } from "react-toastify";
-import { useSelector } from "react-redux";
 
-import SliceMachineModal from "@components/SliceMachineModal";
-import { checkAuthStatus, getState, startAuth } from "@src/apiClient";
-import { buildEndpoints } from "@lib/prismic/endpoints";
-import { startPolling } from "@lib/utils/poll";
-import { CheckAuthStatusResponse } from "@models/common/Auth";
-import { isModalOpen } from "@src/modules/modal";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { isLoading } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { getEnvironment } from "@src/modules/environment";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import preferWroomBase from "@lib/utils/preferWroomBase";
-import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
-import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
-import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { getActiveEnvironment } from "@src/features/environments/actions/getActiveEnvironment";
+import { checkAuthStatus, getState, startAuth } from "@/apiClient";
+import { getActiveEnvironment } from "@/features/environments/actions/getActiveEnvironment";
+import { useAutoSync } from "@/features/sync/AutoSyncProvider";
+import { getUnSyncedChanges } from "@/features/sync/getUnSyncChanges";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+import { CheckAuthStatusResponse } from "@/legacy/lib/models/common/Auth";
+import { normalizeFrontendCustomTypes } from "@/legacy/lib/models/common/normalizers/customType";
+import { normalizeFrontendSlices } from "@/legacy/lib/models/common/normalizers/slices";
+import { buildEndpoints } from "@/legacy/lib/prismic/endpoints";
+import { startPolling } from "@/legacy/lib/utils/poll";
+import preferWroomBase from "@/legacy/lib/utils/preferWroomBase";
+import { getEnvironment } from "@/modules/environment";
+import { isLoading } from "@/modules/loading";
+import { LoadingKeysEnum } from "@/modules/loading/types";
+import { isModalOpen } from "@/modules/modal";
+import { ModalKeysEnum } from "@/modules/modal/types";
+import { AuthStatus } from "@/modules/userContext/types";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@/redux/type";
 
 interface ValidAuthStatus extends CheckAuthStatusResponse {
   status: "ok";

package/{components → src/legacy/components}/ModalFormCard/index.tsx

@@ -1,21 +1,22 @@
-import Modal from "react-modal";
-import SliceMachineModal from "@components/SliceMachineModal";
 import {
-  Formik,
   Form,
+  Formik,
   FormikErrors,
+  FormikProps,
   FormikTouched,
   FormikValues,
-  FormikProps,
 } from "formik";
 import type {
   ComponentPropsWithoutRef,
   ReactNode,
   SetStateAction,
 } from "react";
-import { Flex, Heading, Close, Button as ThemeButton } from "theme-ui";
+import Modal from "react-modal";
+import { Button as ThemeButton, Close, Flex, Heading } from "theme-ui";
+
+import { Button } from "@/legacy/components/Button";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 
-import { Button } from "@components/Button";
 import Card from "../Card";
 
 type ModalCardProps<T extends FormikValues> = {

package/{components → src/legacy/components}/Navigation/ChangesItem.tsx

@@ -1,14 +1,13 @@
-import { type FC } from "react";
-import { useRouter } from "next/router";
-import { useMediaQuery } from "@prismicio/editor-support/React";
 import {
   Box,
   Button,
   IconButton,
   Text,
   Tooltip,
-  breakpoints,
+  useMediaQuery,
 } from "@prismicio/editor-ui";
+import { useRouter } from "next/router";
+import { type FC } from "react";
 
 import {
   HoverCard,
@@ -16,22 +15,22 @@ import {
   HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
-} from "@src/components/HoverCard";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { useNetwork } from "@src/hooks/useNetwork";
-import { useAuthStatus } from "@src/hooks/useAuthStatus";
-import { useUnSyncChanges } from "@src/features/sync/useUnSyncChanges";
-import { ChangesIcon } from "@src/icons/ChangesIcon";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { AutoSyncStatusIndicator } from "@src/features/sync/components/AutoSyncStatusIndicator";
+} from "@/components/HoverCard";
+import { useAutoSync } from "@/features/sync/AutoSyncProvider";
+import { AutoSyncStatusIndicator } from "@/features/sync/components/AutoSyncStatusIndicator";
+import { useUnSyncChanges } from "@/features/sync/useUnSyncChanges";
+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 isSmall = useMediaQuery(breakpoints.small);
+  const collapsed = useMediaQuery({ max: "medium" });
 
   const onClose = () => {
     setSeenChangesToolTip();
@@ -46,12 +45,15 @@ export const ChangesItem: FC = () => {
       side="right"
       sideOffset={24}
       trigger={
-        <Box alignItems={isSmall ? "center" : undefined} flexDirection="column">
+        <Box
+          alignItems={collapsed ? "center" : undefined}
+          flexDirection="column"
+        >
           {autoSyncStatus === "failed" ||
           autoSyncStatus === "synced" ||
           autoSyncStatus === "syncing" ? (
             <AutoSyncStatusIndicator autoSyncStatus={autoSyncStatus} />
-          ) : isSmall ? (
+          ) : collapsed ? (
             <Tooltip content="Review changes" side="right">
               <Box position="relative">
                 {/*

package/{components → src/legacy/components}/Navigation/Environment.tsx

@@ -1,22 +1,22 @@
-import { useState } from "react";
 import {
   Environment as EnvironmentType,
   isUnauthenticatedError,
   isUnauthorizedError,
 } from "@slicemachine/manager/client";
+import { useState } from "react";
 
-import { getState, telemetry } from "@src/apiClient";
-import { useEnvironments } from "@src/features/environments/useEnvironments";
-import { setEnvironment } from "@src/features/environments/actions/setEnvironment";
-import { useActiveEnvironment } from "@src/features/environments/useActiveEnvironment";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { SideNavEnvironmentSelector } from "@src/components/SideNav";
-import { useNetwork } from "@src/hooks/useNetwork";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
-import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
-import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
-import { useAuthStatus } from "@src/hooks/useAuthStatus";
+import { getState, telemetry } from "@/apiClient";
+import { SideNavEnvironmentSelector } from "@/components/SideNav";
+import { setEnvironment } from "@/features/environments/actions/setEnvironment";
+import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
+import { useEnvironments } from "@/features/environments/useEnvironments";
+import { useAutoSync } from "@/features/sync/AutoSyncProvider";
+import { getUnSyncedChanges } from "@/features/sync/getUnSyncChanges";
+import { useAuthStatus } from "@/hooks/useAuthStatus";
+import { useNetwork } from "@/hooks/useNetwork";
+import { normalizeFrontendCustomTypes } from "@/legacy/lib/models/common/normalizers/customType";
+import { normalizeFrontendSlices } from "@/legacy/lib/models/common/normalizers/slices";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 export function Environment() {
   const { environments, error: useEnvironmentsError } = useEnvironments();

package/{components → src/legacy/components}/Navigation/RunningVersion.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 
-import { RightElement } from "@src/components/SideNav";
-import { useSliceMachineRunningVersion } from "@src/hooks/useSliceMachineRunningVersion";
+import { RightElement } from "@/components/SideNav";
+import { useSliceMachineRunningVersion } from "@/hooks/useSliceMachineRunningVersion";
 
 export const RunningVersion: FC = () => {
   const sliceMachineRunningVersion = useSliceMachineRunningVersion();

package/{components → src/legacy/components}/Navigation/UpdateBox.tsx

@@ -1,8 +1,8 @@
-import { FC } from "react";
 import Link from "next/link";
+import { FC } from "react";
 
-import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
-import { UpdateInfo } from "@src/components/SideNav";
+import { UpdateInfo } from "@/components/SideNav";
+import { useUpdateAvailable } from "@/hooks/useUpdateAvailable";
 
 export const UpdateBox: FC = () => {
   const { sliceMachineUpdateAvailable, adapterUpdateAvailable } =

package/src/legacy/components/Navigation/VideoItem.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "videoTutorialsContainer": string;
+};
+export = styles;
+

package/{components → src/legacy/components}/Navigation/VideoItem.tsx

@@ -1,29 +1,30 @@
 import {
   type FC,
-  useCallback,
-  useRef,
-  RefCallback,
-  ReactNode,
   forwardRef,
   PropsWithChildren,
+  ReactNode,
+  RefCallback,
+  useCallback,
+  useRef,
 } from "react";
 import { useSelector } from "react-redux";
 import ReactTooltip from "react-tooltip";
 import { Close, Flex, Paragraph } from "theme-ui";
-import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
-import { telemetry } from "@src/apiClient";
-import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
-import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
+
+import { telemetry } from "@/apiClient";
 import {
   HoverCard,
-  HoverCardDescription,
   HoverCardCloseButton,
+  HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
-} from "@src/components/HoverCard";
-import { getUserReview } from "@src/modules/userContext";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { useMarketingContent } from "@src/hooks/useMarketingContent";
+} from "@/components/HoverCard";
+import { SideNavLink, SideNavListItem } from "@/components/SideNav";
+import { useMarketingContent } from "@/hooks/useMarketingContent";
+import { PlayCircleIcon } from "@/icons/PlayCircleIcon";
+import { ReactTooltipPortal } from "@/legacy/components/ReactTooltipPortal";
+import { getUserReview } from "@/modules/userContext";
+import { SliceMachineStoreType } from "@/redux/type";
 
 import style from "./VideoItem.module.css";
 

package/src/legacy/components/Navigation/index.module.css

@@ -0,0 +1,3 @@
+.environmentDivider {
+  margin-block: 16px;
+}

package/src/legacy/components/Navigation/index.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "environmentDivider": string;
+};
+export = styles;
+

package/{components → src/legacy/components}/Navigation/index.test.tsx

@@ -1,24 +1,24 @@
 // @vitest-environment jsdom
-import { describe, test, expect, vi } from "vitest";
+import { cache } from "@prismicio/editor-support/Suspense";
+import { createSliceMachineManager } from "@slicemachine/manager";
+import { createSliceMachineManagerMSWHandler } from "@slicemachine/manager/test";
 import Router from "next/router";
 import { act } from "react-dom/test-utils";
-import { createSliceMachineManagerMSWHandler } from "@slicemachine/manager/test";
-import { createSliceMachineManager } from "@slicemachine/manager";
+import { describe, expect, test, vi } from "vitest";
 
-import { FrontEndEnvironment } from "@lib/models/common/Environment";
-import { UserContextStoreType } from "@src/modules/userContext/types";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { createTestPlugin } from "test/__testutils__/createTestPlugin";
-import { createTestProject } from "test/__testutils__/createTestProject";
 import {
   render,
-  within,
-  screen,
   type RenderReturnType,
+  screen,
   waitFor,
-} from "test/__testutils__";
+  within,
+} from "@/../test/__testutils__";
+import { createTestPlugin } from "@/../test/__testutils__/createTestPlugin";
+import { createTestProject } from "@/../test/__testutils__/createTestProject";
+import { FrontEndEnvironment } from "@/legacy/lib/models/common/Environment";
+import { AuthStatus, UserContextStoreType } from "@/modules/userContext/types";
+
 import SideNavigation from "./index";
-import { cache } from "@prismicio/editor-support/Suspense";
 
 const mockRouter = vi.mocked(Router);
 

package/{components → src/legacy/components}/Navigation/index.tsx

@@ -1,39 +1,38 @@
 import { Box } from "@prismicio/editor-ui";
-import { Suspense, type FC } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { type FC, Suspense } from "react";
 import { useSelector } from "react-redux";
 
-import { telemetry } from "@src/apiClient";
-import VideoItem from "@components/Navigation/VideoItem";
-import { LightningIcon } from "@src/icons/Lightning";
-import { MathPlusIcon } from "@src/icons/MathPlusIcon";
-import { SettingsIcon } from "@src/icons/SettingsIcon";
-import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
+import { telemetry } from "@/apiClient";
+import { Divider } from "@/components/Divider";
 import {
+  SideNav,
   SideNavLink,
-  SideNavListItem,
   SideNavList,
-  SideNav,
+  SideNavListItem,
   SideNavRepository,
-} from "@src/components/SideNav/SideNav";
-import { Divider } from "@src/components/Divider";
-import { FolderIcon } from "@src/icons/FolderIcon";
-import { userHasSeenTutorialsToolTip } from "@src/modules/userContext";
-import { SliceMachineStoreType } from "@src/redux/type";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
-import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
-import { ErrorBoundary } from "@src/ErrorBoundary";
+} from "@/components/SideNav/SideNav";
+import { ErrorBoundary } from "@/ErrorBoundary";
+import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
+import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
+import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
+import { useRepositoryInformation } from "@/hooks/useRepositoryInformation";
+import { FolderIcon } from "@/icons/FolderIcon";
+import { LightningIcon } from "@/icons/Lightning";
+import { MathPlusIcon } from "@/icons/MathPlusIcon";
+import { SettingsIcon } from "@/icons/SettingsIcon";
+import VideoItem from "@/legacy/components/Navigation/VideoItem";
+import { userHasSeenTutorialsToolTip } from "@/modules/userContext";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@/redux/type";
 
 import { ChangesItem } from "./ChangesItem";
 import { Environment } from "./Environment";
+import styles from "./index.module.css";
 import { RunningVersion } from "./RunningVersion";
 import { UpdateBox } from "./UpdateBox";
 
-import * as styles from "./index.css";
-
 const Navigation: FC = () => {
   const { hasSeenTutorialsToolTip } = useSelector(
     (store: SliceMachineStoreType) => ({

package/{components → src/legacy/components}/ReviewModal/ReviewForm.tsx

@@ -1,5 +1,7 @@
-import { FC } from "react";
 import { Field, Form, Formik } from "formik";
+import { FC } from "react";
+import Modal from "react-modal";
+import { useSelector } from "react-redux";
 import {
   Box,
   Button,
@@ -10,18 +12,16 @@ import {
   Text,
   Textarea,
 } from "theme-ui";
-import Modal from "react-modal";
-import { useSelector } from "react-redux";
 
-import SliceMachineModal from "@components/SliceMachineModal";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { isModalOpen } from "@src/modules/modal";
-import { isLoading } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { telemetry } from "@src/apiClient";
-import { UserReviewType } from "@src/modules/userContext/types";
+import { telemetry } from "@/apiClient";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+import { isLoading } from "@/modules/loading";
+import { LoadingKeysEnum } from "@/modules/loading/types";
+import { isModalOpen } from "@/modules/modal";
+import { ModalKeysEnum } from "@/modules/modal/types";
+import { UserReviewType } from "@/modules/userContext/types";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@/redux/type";
 
 import { ReviewFormSelect } from "./ReviewFormSelect";
 

package/{components → src/legacy/components}/ReviewModal/ReviewModal.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { useSelector } from "react-redux";
 
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getLastSyncChange, getUserReview } from "@src/modules/userContext";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { getLibraries } from "@src/modules/slices";
-import { hasLocal } from "@lib/models/common/ModelData";
-import { useInAppGuide } from "@src/features/inAppGuide/InAppGuideContext";
+import { useInAppGuide } from "@/features/inAppGuide/InAppGuideContext";
+import { hasLocal } from "@/legacy/lib/models/common/ModelData";
+import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
+import { getLibraries } from "@/modules/slices";
+import { getLastSyncChange, getUserReview } from "@/modules/userContext";
+import { SliceMachineStoreType } from "@/redux/type";
 
 import { ReviewForm } from "./ReviewForm";
 

package/{components → src/legacy/components}/ScreenshotChangesModal/VariationDropZone.tsx

@@ -1,14 +1,14 @@
 import { useState } from "react";
-import { Flex, Text, Spinner } from "theme-ui";
 import { useHotkeys } from "react-hotkeys-hook";
-import { toast } from "react-toastify";
 import { AiOutlineCloudUpload } from "react-icons/ai";
+import { toast } from "react-toastify";
+import { Flex, Spinner, Text } from "theme-ui";
 
-import { acceptedImagesTypes } from "@lib/consts";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { ScreenshotPreview } from "@components/ScreenshotPreview";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { uploadSliceScreenshot } from "@src/features/slices/actions/uploadSliceScreenshot";
+import { uploadSliceScreenshot } from "@/features/slices/actions/uploadSliceScreenshot";
+import { ScreenshotPreview } from "@/legacy/components/ScreenshotPreview";
+import { acceptedImagesTypes } from "@/legacy/lib/consts";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 import useCustomScreenshot from "./useCustomScreenshot";
 

package/{components → src/legacy/components}/ScreenshotChangesModal/index.tsx

@@ -1,25 +1,22 @@
 import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { Flex, Heading, Close, Box, Text } from "theme-ui";
-
-import Card from "@components/Card";
 import { AiOutlinePicture } from "react-icons/ai";
 import { RiErrorWarningLine } from "react-icons/ri";
-import SliceMachineModal from "@components/SliceMachineModal";
-
-import { isModalOpen } from "@src/modules/modal";
+import { useSelector } from "react-redux";
+import { Box, Close, Flex, Heading, Text } from "theme-ui";
 
-import { SliceMachineStoreType } from "@src/redux/type";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { Kbd } from "@/components/Kbd";
+import { FigmaIcon } from "@/icons/FigmaIcon";
+import Card from "@/legacy/components/Card";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { isModalOpen } from "@/modules/modal";
+import { ModalKeysEnum } from "@/modules/modal/types";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@/redux/type";
+import { getOS, OS } from "@/utils/os";
 
 import VariationDropZone from "./VariationDropZone";
 
-import { FigmaIcon } from "@src/icons/FigmaIcon";
-import { getOS, OS } from "@src/utils/os";
-import { Kbd } from "@src/components/Kbd";
-
 export type SliceVariationSelector = { sliceID: string; variationID: string };
 
 const FigmaTip = () => {

package/{components → src/legacy/components}/ScreenshotChangesModal/useCustomScreenshot.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { Label } from "theme-ui";
 
-import { acceptedImagesTypes } from "@lib/consts";
+import { acceptedImagesTypes } from "@/legacy/lib/consts";
 
 type HandleFileProp = {
   inputFile: React.RefObject<HTMLInputElement>;

package/{components → src/legacy/components}/ScreenshotPreviewModal/index.tsx

@@ -1,12 +1,13 @@
-import SliceMachineModal from "@components/SliceMachineModal";
 import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { isModalOpen } from "@src/modules/modal";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { Button, Close, Flex, Heading } from "theme-ui";
-import Card from "@components/Card";
-import { ScreenshotPreview } from "@components/ScreenshotPreview";
+
+import Card from "@/legacy/components/Card";
+import { ScreenshotPreview } from "@/legacy/components/ScreenshotPreview";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+import { isModalOpen } from "@/modules/modal";
+import { ModalKeysEnum } from "@/modules/modal/types";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@/redux/type";
 
 type ScreenshotModalProps = {
   sliceName: string;

package/{components → src/legacy/components}/Simulator/components/FailedConnect/index.tsx

@@ -1,9 +1,9 @@
+import { IoMdRefresh } from "react-icons/io";
 import { Image, Link, Text } from "theme-ui";
-import FullPage from "../FullPage";
 
-import { Button } from "@components/Button";
+import { Button } from "@/legacy/components/Button";
 
-import { IoMdRefresh } from "react-icons/io";
+import FullPage from "../FullPage";
 
 const FailedConnect = ({ onRetrigger }: { onRetrigger: () => void }) => (
   <FullPage>

package/{components → src/legacy/components}/Simulator/components/Header/VariationsPopover/MenuList.tsx

@@ -1,7 +1,8 @@
-import { VariationSM } from "@lib/models/common/Slice";
 import React from "react";
 import { Box, Flex, Text } from "theme-ui";
 
+import { VariationSM } from "@/legacy/lib/models/common/Slice";
+
 const MenuList: React.FunctionComponent<{
   defaultValue: VariationSM;
   variations: ReadonlyArray<VariationSM>;

package/{components → src/legacy/components}/Simulator/components/Header/VariationsPopover/index.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from "react";
+import { RiArrowDropDownFill, RiArrowDropUpFill } from "react-icons/ri";
 import { Popover } from "react-tiny-popover";
+import { Box, Button, ThemeUICSSObject, ThemeUIStyleObject } from "theme-ui";
 
-import MenuList from "./MenuList";
-
-import { Button, Box, ThemeUICSSObject, ThemeUIStyleObject } from "theme-ui";
+import { VariationSM } from "@/legacy/lib/models/common/Slice";
 
-import { RiArrowDropDownFill, RiArrowDropUpFill } from "react-icons/ri";
-import { VariationSM } from "@lib/models/common/Slice";
+import MenuList from "./MenuList";
 
 const VarationsPopover: React.FunctionComponent<{
   buttonSx?: ThemeUICSSObject;

package/{components → src/legacy/components}/Simulator/components/Header/index.tsx

@@ -1,12 +1,12 @@
 import router from "next/router";
-import { Text, Flex, Switch, Label } from "theme-ui";
+import { Flex, Label, Switch, Text } from "theme-ui";
 
-import { Button } from "@components/Button";
-import VariationsPopover from "@components/Simulator/components/Header/VariationsPopover";
-import * as Links from "@components/Simulator/components/Header/links";
-import SliceMachineLogo from "@src/icons/SliceMachineLogo";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { VariationSM } from "@lib/models/common/Slice";
+import SliceMachineLogo from "@/icons/SliceMachineLogo";
+import { Button } from "@/legacy/components/Button";
+import * as Links from "@/legacy/components/Simulator/components/Header/links";
+import VariationsPopover from "@/legacy/components/Simulator/components/Header/VariationsPopover";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { VariationSM } from "@/legacy/lib/models/common/Slice";
 
 const redirect = (
   model: ComponentUI,

package/{components → src/legacy/components}/Simulator/components/IframeRenderer/index.tsx

@@ -1,10 +1,9 @@
+import { SimulatorClient } from "@prismicio/simulator";
 import { RefCallback, useCallback, useEffect, useRef, useState } from "react";
-
 import { Flex } from "theme-ui";
 
-import { SimulatorClient } from "@prismicio/simulator";
-import { useElementSize } from "@src/hooks/useElementSize";
-import { ScreenDimensions } from "@lib/models/common/Screenshots";
+import { useElementSize } from "@/hooks/useElementSize";
+import { ScreenDimensions } from "@/legacy/lib/models/common/Screenshots";
 
 function useSimulatorClient(): readonly [
   SimulatorClient | undefined,