@plurid/plurid-react 0.0.0-16 → 0.0.0-19

package/distribution/index.es.js

@@ -1,8 +1,8 @@
-import { defaultConfiguration, TRANSFORM_MODES, LAYOUT_TYPES, TRANSLATION_STEP, ROTATION_STEP, SCALE_STEP, SCALE_UPPER_LIMIT, SCALE_LOWER_LIMIT, PLURID_ENTITY_PLANE_BRIDGE, PLURID_ENTITY_PLANE_CONTROLS, PLURID_ENTITY_PLANE_CONTENT, PLURID_ENTITY_PLANE, PLURID_ENTITY_ROOT, SIZES, PLURID_ENTITY_ROOTS, PLURID_ENTITY_TRANSFORM_ORIGIN, PLURID_ENTITY_SPACE, internationalization, TRANSFORM_TOUCHES, layoutNames, defaultShortcuts, shortcutsNames, TOOLBAR_DRAWERS, PLURID_ENTITY_TOOLBAR, PLURID_ENTITY_VIEWCUBE, PLURID_PUBSUB_TOPIC, PLURID_ENTITY_VIEW, PLURID_ROUTE_DEFAULT_PATH_VALUE, PLURID_ROUTE_DEFAULT_PATH, PLURID_ROUTE_DEFAULT_SPACE_VALUE, PLURID_ROUTE_DEFAULT_SPACE, PLURID_ROUTE_DEFAULT_UNIVERSE_VALUE, PLURID_ROUTE_DEFAULT_UNIVERSE, PLURID_ROUTE_DEFAULT_CLUSTER_VALUE, PLURID_ROUTE_DEFAULT_CLUSTER, PLURID_ROUTE_SEPARATOR, PLURID_ENTITY_MULTISPACE, PLURID_ROUTER_LOCATION_CHANGED, PLURID_ROUTER_STORAGE, PLURID_ROUTER_LOCATION_STORED, PLURID_DEFAULT_CONFIGURATION_LINK_SUFFIX, PLURID_ENTITY_LINK, PLURID_DEFAULT_CONFIGURATION_LINK_PREVIEW_FADE_IN, PLURID_DEFAULT_CONFIGURATION_LINK_PREVIEW_FADE_OUT, PLURID_ENTITY_APPLICATION_CONFIGURATOR, PLURID_ENTITY_PLANE_CONFIGURATOR } from "@plurid/plurid-data";
+import { defaultConfiguration, TRANSFORM_MODES, LAYOUT_TYPES, TRANSLATION_STEP, ROTATION_STEP, SCALE_STEP, SCALE_UPPER_LIMIT, SCALE_LOWER_LIMIT, PLURID_ENTITY_PLANE_BRIDGE, PLURID_ENTITY_PLANE_CONTROLS, PLURID_ENTITY_PLANE_CONTENT, PLURID_ENTITY_PLANE, PLURID_ENTITY_ROOT, PLURID_ENTITY_ROOTS, PLURID_ENTITY_SPACE, SIZES, PLURID_ENTITY_TRANSFORM_ORIGIN, internationalization, TRANSFORM_TOUCHES, layoutNames, defaultShortcuts, shortcutsNames, TOOLBAR_DRAWERS, PLURID_ENTITY_TOOLBAR, PLURID_ENTITY_VIEWCUBE, PLURID_PUBSUB_TOPIC, PLURID_ENTITY_VIEW, PLURID_ROUTE_DEFAULT_PATH_VALUE, PLURID_ROUTE_DEFAULT_PATH, PLURID_ROUTE_DEFAULT_SPACE_VALUE, PLURID_ROUTE_DEFAULT_SPACE, PLURID_ROUTE_DEFAULT_UNIVERSE_VALUE, PLURID_ROUTE_DEFAULT_UNIVERSE, PLURID_ROUTE_DEFAULT_CLUSTER_VALUE, PLURID_ROUTE_DEFAULT_CLUSTER, PLURID_ROUTE_SEPARATOR, PLURID_ENTITY_MULTISPACE, PLURID_ROUTER_LOCATION_CHANGED, PLURID_ROUTER_STORAGE, PLURID_ROUTER_LOCATION_STORED, PLURID_ENTITY_LINK, PLURID_DEFAULT_CONFIGURATION_LINK_PREVIEW_FADE_IN, PLURID_DEFAULT_CONFIGURATION_LINK_PREVIEW_FADE_OUT, PLURID_DEFAULT_CONFIGURATION_LINK_SUFFIX, PLURID_ENTITY_APPLICATION_CONFIGURATOR, PLURID_ENTITY_PLANE_CONFIGURATOR } from "@plurid/plurid-data";
 
 export { PLURID_PUBSUB_TOPIC, PLURID_ROUTER_LOCATION_CHANGED, PLURID_ROUTER_LOCATION_STORED, SIZES, LAYOUT_TYPES as SPACE_LAYOUT, TRANSFORM_MODES, TRANSFORM_TOUCHES } from "@plurid/plurid-data";
 
-import { general as general$1, interaction, cleanTemplate, planes, internatiolate, space as space$1, state, utilities, routing, pluridRouterNavigate } from "@plurid/plurid-engine";
+import { interaction, general as general$1, cleanTemplate, planes, internatiolate, space as space$1, state, utilities, routing, pluridRouterNavigate } from "@plurid/plurid-engine";
 
 export { pluridRouterNavigate } from "@plurid/plurid-engine";
 
@@ -18,7 +18,7 @@ import { combineReducers, createStore, applyMiddleware } from "redux";
 
 import thunk from "redux-thunk";
 
-import { mathematics, dom, meta, uuid, storage } from "@plurid/plurid-functions";
+import { mathematics, objects, dom, meta, uuid, storage } from "@plurid/plurid-functions";
 
 import themes$1, { plurid, decomposeColor } from "@plurid/plurid-themes";
 
@@ -705,8 +705,12 @@ var shortcuts = Object.freeze({
     Types: index$f
 });
 
+const SET_SPACE_FIELD = "SET_SPACE_FIELD";
+
 const SET_SPACE_LOADING = "SET_SPACE_LOADING";
 
+const SET_TRANSFORM = "SET_TRANSFORM";
+
 const SET_ANIMATED_TRANSFORM = "SET_ANIMATED_TRANSFORM";
 
 const SET_TRANSFORM_TIME = "SET_TRANSFORM_TIME";
@@ -795,7 +799,9 @@ const SPACE_SET_CULLED_VIEW = "SPACE_SET_CULLED_VIEW";
 
 var index$b = Object.freeze({
     __proto__: null,
+    SET_SPACE_FIELD: SET_SPACE_FIELD,
     SET_SPACE_LOADING: SET_SPACE_LOADING,
+    SET_TRANSFORM: SET_TRANSFORM,
     SET_ANIMATED_TRANSFORM: SET_ANIMATED_TRANSFORM,
     SET_TRANSFORM_TIME: SET_TRANSFORM_TIME,
     SET_SPACE_LOCATION: SET_SPACE_LOCATION,
@@ -841,11 +847,21 @@ var index$b = Object.freeze({
     SPACE_SET_CULLED_VIEW: SPACE_SET_CULLED_VIEW
 });
 
+const setSpaceField$1 = payload => ({
+    type: SET_SPACE_FIELD,
+    payload: payload
+});
+
 const setSpaceLoading$1 = payload => ({
     type: SET_SPACE_LOADING,
     payload: payload
 });
 
+const setTransform$1 = payload => ({
+    type: SET_TRANSFORM,
+    payload: payload
+});
+
 const setAnimatedTransform$1 = payload => ({
     type: SET_ANIMATED_TRANSFORM,
     payload: payload
@@ -1040,7 +1056,9 @@ const spaceSetCulledView$1 = payload => ({
 
 var index$a = Object.freeze({
     __proto__: null,
+    setSpaceField: setSpaceField$1,
     setSpaceLoading: setSpaceLoading$1,
+    setTransform: setTransform$1,
     setAnimatedTransform: setAnimatedTransform$1,
     setTransformTime: setTransformTime$1,
     setSpaceLocation: setSpaceLocation$1,
@@ -1088,6 +1106,7 @@ var index$a = Object.freeze({
 
 const initialState$2 = {
     loading: true,
+    transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)",
     animatedTransform: false,
     transformTime: 450,
     scale: 1,
@@ -1122,303 +1141,393 @@ const initialState$2 = {
     culledView: []
 };
 
+const {quaternion: quaternion, matrix: matrix} = interaction;
+
+const {matrixArrayToCSSMatrix: matrixArrayToCSSMatrix$1, rotateMatrix: rotateMatrix$1, multiplyArrayOfMatrices: multiplyArrayOfMatrices$1, scaleMatrix: scaleMatrix$1, translateMatrix: translateMatrix$2} = matrix;
+
+const {degToRad: degToRad$2} = quaternion;
+
+const computeMatrix = spaceState => {
+    const {translationX: translationX, translationY: translationY, translationZ: translationZ, rotationX: rotationX, rotationY: rotationY, scale: scale} = spaceState;
+    const innerWidth = typeof window === "undefined" ? 720 : window.innerWidth / 2;
+    const innerHeight = typeof window === "undefined" ? 400 : window.innerHeight / 2;
+    const transformOriginX = translationX * -1 + innerWidth;
+    const transformOriginY = translationY * -1 + innerHeight;
+    const transformOriginZ = translationZ * -1;
+    const rotationMatrix = rotateMatrix$1(degToRad$2(-rotationX), degToRad$2(-rotationY));
+    const translationMatrix = translateMatrix$2(translationX, translationY, translationZ);
+    const scalationMatrix = scaleMatrix$1(scale);
+    const transformMatrix = multiplyArrayOfMatrices$1([ translationMatrix, multiplyArrayOfMatrices$1([ translateMatrix$2(transformOriginX, transformOriginY, transformOriginZ), rotationMatrix, translateMatrix$2(-transformOriginX, -transformOriginY, -transformOriginZ) ]), scalationMatrix ]);
+    const transform = matrixArrayToCSSMatrix$1(transformMatrix);
+    return transform;
+};
+
 const {toRadians: toRadians} = mathematics.geometry;
 
-const setSpaceLoading = (state, action) => Object.assign(Object.assign({}, state), {
-    loading: action.payload
-});
+const getNewState = state => objects.clone(state, "any");
 
-const setAnimatedTransform = (state, action) => Object.assign(Object.assign({}, state), {
-    animatedTransform: action.payload
-});
+const setSpaceField = (state, action) => {
+    const {field: field, value: value} = action.payload;
+    const newState = getNewState(state);
+    newState[field] = value;
+    return Object.assign({}, newState);
+};
 
-const setTransformTime = (state, action) => Object.assign(Object.assign({}, state), {
-    transformTime: action.payload
-});
+const setSpaceLoading = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        loading: action.payload
+    });
+};
+
+const setTransform = (state, action) => {
+    const {translationX: translationX, translationY: translationY, translationZ: translationZ, rotationX: rotationX, rotationY: rotationY, scale: scale} = action.payload;
+    const resolvedTranslationX = translationX !== null && translationX !== void 0 ? translationX : state.translationX;
+    const resolvedTranslationY = translationY !== null && translationY !== void 0 ? translationY : state.translationY;
+    const resolvedTranslationZ = translationZ !== null && translationZ !== void 0 ? translationZ : state.translationZ;
+    const resolvedRotationX = rotationX !== null && rotationX !== void 0 ? rotationX : state.rotationX;
+    const resolvedRotationY = rotationY !== null && rotationY !== void 0 ? rotationY : state.rotationY;
+    const resolvedScale = scale !== null && scale !== void 0 ? scale : state.scale;
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        translationX: resolvedTranslationX,
+        translationY: resolvedTranslationY,
+        translationZ: resolvedTranslationZ,
+        rotationX: resolvedRotationX,
+        rotationY: resolvedRotationY,
+        scale: resolvedScale
+    });
+};
 
-const setSpaceLocation = (state, action) => Object.assign(Object.assign({}, state), action.payload);
+const setAnimatedTransform = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        animatedTransform: action.payload
+    });
+};
 
-const viewCameraMoveForward = state => {
-    const translationZ = state.translationZ + TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
-    const translationX = state.translationX + TRANSLATION_STEP * 6 * Math.sin(toRadians(-state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
+const setTransformTime = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        transformTime: action.payload
     });
 };
 
+const setSpaceLocation = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), action.payload);
+};
+
+const viewCameraMoveForward = state => {
+    const newState = getNewState(state);
+    newState.translationZ = state.translationZ + TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
+    newState.translationX = state.translationX + TRANSLATION_STEP * 6 * Math.sin(toRadians(-state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
+
 const viewCameraMoveBackward = state => {
-    const translationZ = state.translationZ - TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
-    const translationX = state.translationX - TRANSLATION_STEP * 6 * Math.sin(toRadians(-state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationZ = state.translationZ - TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
+    newState.translationX = state.translationX - TRANSLATION_STEP * 6 * Math.sin(toRadians(-state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraMoveLeft = state => {
-    const translationX = state.translationX + TRANSLATION_STEP * 3 * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ + TRANSLATION_STEP * 3 * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX + TRANSLATION_STEP * 3 * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ + TRANSLATION_STEP * 3 * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraMoveRight = state => {
-    const translationX = state.translationX - TRANSLATION_STEP * 3 * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ - TRANSLATION_STEP * 3 * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX - TRANSLATION_STEP * 3 * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ - TRANSLATION_STEP * 3 * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraMoveUp = state => {
-    const translationY = state.translationY + TRANSLATION_STEP * 3;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY + TRANSLATION_STEP * 3;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraMoveDown = state => {
-    const translationY = state.translationY - TRANSLATION_STEP * 3;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY - TRANSLATION_STEP * 3;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraTurnUp = state => {
-    const rotationX = (state.rotationX + ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = (state.rotationX + ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraTurnDown = state => {
-    const rotationX = (state.rotationX - ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = (state.rotationX - ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraTurnLeft = state => {
-    const rotationY = (state.rotationY - ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = (state.rotationY - ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraTurnRight = state => {
-    const rotationY = (state.rotationY + ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = (state.rotationY + ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const rotateUp = state => {
-    const rotationX = (state.rotationX + ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = (state.rotationX + ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const rotateDown = state => {
-    const rotationX = (state.rotationX - ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = (state.rotationX - ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
-const rotateX = (state, action) => Object.assign(Object.assign({}, state), {
-    rotationX: action.payload
-});
+const rotateX = (state, action) => {
+    const newState = getNewState(state);
+    newState.rotationX = action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
 
 const rotateXWith = (state, action) => {
-    const rotationX = state.rotationX + action.payload;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = state.rotationX + action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const rotateLeft = state => {
-    const rotationY = (state.rotationY + ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = (state.rotationY + ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const rotateRight = state => {
-    const rotationY = (state.rotationY - ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = (state.rotationY - ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
-const rotateY = (state, action) => Object.assign(Object.assign({}, state), {
-    rotationY: action.payload
-});
+const rotateY = (state, action) => {
+    const newState = getNewState(state);
+    newState.rotationY = action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
 
 const rotateYWith = (state, action) => {
-    const rotationY = state.rotationY + action.payload;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = state.rotationY + action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateUp = state => {
-    const translationY = state.translationY - TRANSLATION_STEP;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY - TRANSLATION_STEP;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateDown = state => {
-    const translationY = state.translationY + TRANSLATION_STEP;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY + TRANSLATION_STEP;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateLeft = state => {
-    const translationX = state.translationX - TRANSLATION_STEP * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ - TRANSLATION_STEP * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX - TRANSLATION_STEP * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ - TRANSLATION_STEP * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateRight = state => {
-    const translationX = state.translationX + TRANSLATION_STEP * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ + TRANSLATION_STEP * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX + TRANSLATION_STEP * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ + TRANSLATION_STEP * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateIn = state => {
-    const translationZ = state.translationZ - TRANSLATION_STEP * 3 * Math.cos(toRadians(-state.rotationY));
-    const translationX = state.translationX - TRANSLATION_STEP * 3 * Math.sin(toRadians(-state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationZ = state.translationZ - TRANSLATION_STEP * 3 * Math.cos(toRadians(-state.rotationY));
+    newState.translationX = state.translationX - TRANSLATION_STEP * 3 * Math.sin(toRadians(-state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateOut = state => {
-    const translationZ = state.translationZ + TRANSLATION_STEP * 3 * Math.cos(toRadians(-state.rotationY));
-    const translationX = state.translationX + TRANSLATION_STEP * 3 * Math.sin(toRadians(-state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationZ = state.translationZ + TRANSLATION_STEP * 3 * Math.cos(toRadians(-state.rotationY));
+    newState.translationX = state.translationX + TRANSLATION_STEP * 3 * Math.sin(toRadians(-state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateXWith = (state, action) => {
-    const translationX = state.translationX + action.payload * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ + action.payload * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX + action.payload * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ + action.payload * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateYWith = (state, action) => {
-    const translationY = state.translationY + action.payload;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY + action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const scaleUp = state => {
     const computedScale = state.scale + SCALE_STEP;
     const scale = computedScale < SCALE_UPPER_LIMIT ? computedScale : SCALE_UPPER_LIMIT;
-    return Object.assign(Object.assign({}, state), {
-        scale: scale
-    });
+    const newState = getNewState(state);
+    newState.scale = scale;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const scaleDown = state => {
     const computedScale = state.scale - SCALE_STEP;
     const scale = computedScale > SCALE_LOWER_LIMIT ? computedScale : SCALE_LOWER_LIMIT;
-    return Object.assign(Object.assign({}, state), {
-        scale: scale
-    });
+    const newState = getNewState(state);
+    newState.scale = scale;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const scaleUpWith = (state, action) => {
     const computedScale = state.scale + Math.abs(action.payload);
     const scale = computedScale < SCALE_UPPER_LIMIT ? computedScale : SCALE_UPPER_LIMIT;
-    return Object.assign(Object.assign({}, state), {
-        scale: scale
-    });
+    const newState = getNewState(state);
+    newState.scale = scale;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const scaleDownWith = (state, action) => {
     const computedScale = state.scale - Math.abs(action.payload);
     const scale = computedScale > SCALE_LOWER_LIMIT ? computedScale : SCALE_LOWER_LIMIT;
-    return Object.assign(Object.assign({}, state), {
-        scale: scale
-    });
+    const newState = getNewState(state);
+    newState.scale = scale;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
-const setInitialTree = (state, action) => Object.assign(Object.assign({}, state), {
-    initialTree: [ ...action.payload ]
-});
+const setInitialTree = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        initialTree: [ ...action.payload ]
+    });
+};
 
-const setTree = (state, action) => Object.assign(Object.assign({}, state), {
-    tree: [ ...action.payload ]
-});
+const setTree = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        tree: [ ...action.payload ]
+    });
+};
 
-const setActiveUniverse = (state, action) => Object.assign(Object.assign({}, state), {
-    activeUniverseID: action.payload
-});
+const setActiveUniverse = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        activeUniverseID: action.payload
+    });
+};
 
-const spaceResetTransform = state => Object.assign(Object.assign({}, state), {
-    scale: 1,
-    rotationX: 0,
-    rotationY: 0,
-    translationX: 0,
-    translationY: 0,
-    translationZ: 0
-});
+const spaceResetTransform = state => {
+    const newState = getNewState(state);
+    newState.scale = 1;
+    newState.rotationX = 0;
+    newState.rotationY = 0;
+    newState.translationX = 0;
+    newState.translationY = 0;
+    newState.translationZ = 0;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
 
-const setViewSize = (state, action) => Object.assign(Object.assign({}, state), {
-    viewSize: Object.assign({}, action.payload)
-});
+const setViewSize = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        viewSize: Object.assign({}, action.payload)
+    });
+};
 
-const setSpaceSize = (state, action) => Object.assign(Object.assign({}, state), {
-    spaceSize: Object.assign({}, action.payload)
-});
+const setSpaceSize = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        spaceSize: Object.assign({}, action.payload)
+    });
+};
 
 const updateSpaceTreePlane = (state, action) => {
-    const updatedTree = general$1.tree.updateTreePlane(state.tree, action.payload);
-    return Object.assign(Object.assign({}, state), {
+    const newState = getNewState(state);
+    const updatedTree = general$1.tree.updateTreePlane(newState.tree, action.payload);
+    return Object.assign(Object.assign({}, newState), {
         tree: updatedTree
     });
 };
 
 const updateSpaceLinkCoordinates = (state, action) => {
     const {planeID: planeID, linkCoordinates: linkCoordinates} = action.payload;
-    const updatedTree = general$1.tree.updateTreeByPlaneIDWithLinkCoordinates(state.tree, planeID, linkCoordinates);
-    return Object.assign(Object.assign({}, state), {
+    const newState = getNewState(state);
+    const updatedTree = general$1.tree.updateTreeByPlaneIDWithLinkCoordinates(newState.tree, planeID, linkCoordinates);
+    return Object.assign(Object.assign({}, newState), {
         tree: updatedTree
     });
 };
 
-const spaceSetView = (state, action) => Object.assign(Object.assign({}, state), {
-    view: action.payload
-});
+const spaceSetView = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        view: action.payload
+    });
+};
 
-const spaceSetCulledView = (state, action) => Object.assign(Object.assign({}, state), {
-    culledView: action.payload
-});
+const spaceSetCulledView = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        culledView: action.payload
+    });
+};
 
 var index$9 = Object.freeze({
     __proto__: null,
+    setSpaceField: setSpaceField,
     setSpaceLoading: setSpaceLoading,
+    setTransform: setTransform,
     setAnimatedTransform: setAnimatedTransform,
     setTransformTime: setTransformTime,
     setSpaceLocation: setSpaceLocation,
@@ -1469,9 +1578,15 @@ const reducer$2 = (state = initialState$2, action) => {
       case SET_STATE:
         return Object.assign(Object.assign({}, state), action.payload.space);
 
+      case SET_SPACE_FIELD:
+        return setSpaceField(state, action);
+
       case SET_SPACE_LOADING:
         return setSpaceLoading(state, action);
 
+      case SET_TRANSFORM:
+        return setTransform(state, action);
+
       case SET_ANIMATED_TRANSFORM:
         return setAnimatedTransform(state, action);
 
@@ -1608,6 +1723,8 @@ const reducer$2 = (state = initialState$2, action) => {
 
 const getLoading = state => state.space.loading;
 
+const getTransformMatrix = state => state.space.transform;
+
 const getAnimatedTransform = state => state.space.animatedTransform;
 
 const getTransformTime = state => state.space.transformTime;
@@ -1647,6 +1764,7 @@ const getCulledView = state => state.space.culledView;
 
 var index$8 = {
     getLoading: getLoading,
+    getTransformMatrix: getTransformMatrix,
     getAnimatedTransform: getAnimatedTransform,
     getTransformTime: getTransformTime,
     getRotationX: getRotationX,
@@ -2276,8 +2394,7 @@ const StyledPluridPlane = styled.div`
     height: auto;
     width: 100%;
     font-size: 0.9rem;
-    font-family: Ubuntu, -apple-system, BlinkMacSystemFont, Roboto,
-        'Open Sans', 'Helvetica Neue', 'Lucida Sans', sans-serif;
+    font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
     transition: background-color 300ms linear;
 
     display: grid;
@@ -2322,14 +2439,14 @@ const PluridPlaneBridge = properties => {
     });
 };
 
-const mapStateToProperties$g = state => ({
+const mapStateToProperties$i = state => ({
     stateGeneralTheme: selectors.themes.getGeneralTheme(state),
     stateConfiguration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProperties$g = dispatch => ({});
+const mapDispatchToProperties$i = dispatch => ({});
 
-const ConnectedPluridPlaneBridge = connect(mapStateToProperties$g, mapDispatchToProperties$g, null, {
+const ConnectedPluridPlaneBridge = connect(mapStateToProperties$i, mapDispatchToProperties$i, null, {
     context: StateContext
 })(PluridPlaneBridge);
 
@@ -2380,9 +2497,9 @@ const PluridPlaneControls = properties => {
     const {route: route, routeDivisions: routeDivisions} = treePlane;
     const {protocol: protocol, host: host} = routeDivisions;
     const gateway = "gateway";
-    const gatewayAddress = `${protocol}://${host.value}/${gateway}?plurid=` + encodeURIComponent(route);
-    const [path, setPath] = useState(routeDivisions.plane.value);
-    const [showAddress, setShowAddress] = useState(false);
+    `${protocol}://${host.value}/${gateway}?plurid=` + encodeURIComponent(route);
+    const [path, setPath] = useState(treePlane.route);
+    useState(false);
     const [showSearch, setShowSearch] = useState(false);
     const onPathInput = event => {
         setPath(event.target.value);
@@ -2410,29 +2527,27 @@ const PluridPlaneControls = properties => {
         "data-plurid-entity": PLURID_ENTITY_PLANE_CONTROLS
     }, React.createElement(StyledPluridPlaneControlsLeft, null), React.createElement(StyledPluridPlaneControlsCenter, null, React.createElement(PluridTextline, {
         theme: interactionTheme,
-        text: showAddress ? gatewayAddress : path,
+        text: path,
         atChange: onPathInput,
         atKeyDown: handleOnKeyDown,
         ariaLabel: "Plurid Pathbar"
     })), React.createElement(StyledPluridPlaneControlsRight, null));
 };
 
-const mapStateToProps$h = state => ({
+const mapStateToProps$g = state => ({
     configuration: selectors.configuration.getConfiguration(state),
     generalTheme: selectors.themes.getGeneralTheme(state),
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$h = dispatch => ({});
+const mapDispatchToProps$g = dispatch => ({});
 
-const ConnectedPluridPlaneControls = connect(mapStateToProps$h, mapDispatchToProps$h, null, {
+const ConnectedPluridPlaneControls = connect(mapStateToProps$g, mapDispatchToProps$g, null, {
     context: StateContext
 })(PluridPlaneControls);
 
 const StyledPluridPlaneContent = styled.div`
     position: relative;
-    font-family: initial !important;
-    font-size: initial !important;
 `;
 
 const PluridPlaneContent = properties => {
@@ -2484,17 +2599,17 @@ const PluridPlane = properties => {
     }, React.createElement(PluridPlaneContent, Object.assign({}, planeContentProperties), children)) : React.createElement(PluridPlaneContent, Object.assign({}, planeContentProperties), children)));
 };
 
-const mapStateToProps$g = state => ({
+const mapStateToProps$f = state => ({
     stateViewSize: selectors.space.getViewSize(state),
     stateGeneralTheme: selectors.themes.getGeneralTheme(state),
     stateConfiguration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$g = dispatch => ({
+const mapDispatchToProps$f = dispatch => ({
     dispatchUpdateSpaceTreePlane: treePlane => dispatch(actions.space.updateSpaceTreePlane(treePlane))
 });
 
-const ConnectedPluridPlane = connect(mapStateToProps$g, mapDispatchToProps$g, null, {
+const ConnectedPluridPlane = connect(mapStateToProps$f, mapDispatchToProps$f, null, {
     context: StateContext
 })(PluridPlane);
 
@@ -2521,7 +2636,7 @@ const PluridRoot = properties => {
     if (!context) {
         return React.createElement(React.Fragment, null);
     }
-    const {planesRegistrar: planesRegistrar, planeContext: PlaneContext, planeContextValue: planeContextValue, customPlane: customPlane} = context;
+    const {planesRegistrar: planesRegistrar, planeContext: PlaneContext, planeContextValue: planeContextValue, customPlane: customPlane, matchedRoute: matchedRoute} = context;
     const CustomPluridPlane = customPlane;
     const [childrenPlanes, setChildrenPlanes] = useState([]);
     const computeChildrenPlanes = plane => {
@@ -2548,9 +2663,9 @@ const PluridRoot = properties => {
                         query: activePlane.route.query
                     },
                     route: {
-                        value: "",
-                        parameters: {},
-                        query: {}
+                        value: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.value) || "",
+                        parameters: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.parameters) || {},
+                        query: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.query) || {}
                     }
                 };
                 const properties = {
@@ -2603,9 +2718,9 @@ const PluridRoot = properties => {
             query: pluridPlane.route.query
         },
         route: {
-            value: "",
-            parameters: {},
-            query: {}
+            value: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.value) || "",
+            parameters: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.parameters) || {},
+            query: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.query) || {}
         }
     };
     const planeProperties = {
@@ -2636,112 +2751,47 @@ const PluridRoot = properties => {
     }, React.createElement(Plane, Object.assign({}, planeProperties)))), childrenPlanes);
 };
 
-const mapStateToProperties$f = state => ({});
+const mapStateToProperties$h = state => ({});
 
-const mapDispatchToProperties$f = dispatch => ({});
+const mapDispatchToProperties$h = dispatch => ({});
 
-const ConnectedPluridRoot = connect(mapStateToProperties$f, mapDispatchToProperties$f, null, {
+const ConnectedPluridRoot = connect(mapStateToProperties$h, mapDispatchToProperties$h, null, {
     context: StateContext
 })(PluridRoot);
 
 const StyledPluridRoots = styled.div`
     transform-style: preserve-3d;
-`;
-
-const StyledTransformOrigin = styled.div`
-    background-color: ${({theme: theme}) => theme.backgroundColorTertiaryAlpha};
-    height: ${({transformOriginSize: transformOriginSize}) => {
-    switch (transformOriginSize) {
-      case SIZES.SMALL:
-        return "5px";
-
-      case SIZES.NORMAL:
-        return "10px";
-
-      case SIZES.LARGE:
-        return "15px";
-
-      default:
-        return "10px";
-    }
-}};
-    width: ${({transformOriginSize: transformOriginSize}) => {
-    switch (transformOriginSize) {
-      case SIZES.SMALL:
-        return "5px";
-
-      case SIZES.NORMAL:
-        return "10px";
-
-      case SIZES.LARGE:
-        return "15px";
-
-      default:
-        return "10px";
-    }
-}};
-
-    position: absolute;
-    z-index: 999;
-    border-radius: 100px;
-    user-select: none;
-    pointer-events: none;
-    touch-action: none;
+    transform-origin: 0 0 0;
 `;
 
 const PluridRoots = properties => {
-    const {stateConfiguration: stateConfiguration, interactionTheme: interactionTheme, animatedTransform: animatedTransform, transformTime: transformTime, spaceScale: spaceScale, spaceRotationX: spaceRotationX, spaceRotationY: spaceRotationY, spaceTranslationX: spaceTranslationX, spaceTranslationY: spaceTranslationY, spaceTranslationZ: spaceTranslationZ, stateTree: stateTree} = properties;
-    const {space: space} = stateConfiguration;
-    const {transformOrigin: transformOrigin} = space;
-    const {show: showTransformOrigin, size: transformOriginSize} = transformOrigin;
-    const innerWidth = typeof window === "undefined" ? 720 : window.innerWidth / 2;
-    const innerHeight = typeof window === "undefined" ? 400 : window.innerHeight / 2;
-    const transformOriginX = spaceTranslationX * -1 + innerWidth;
-    const transformOriginY = spaceTranslationY * -1 + innerHeight;
-    const transformOriginZ = spaceTranslationZ * -1;
-    const transformOriginSizeDifference = transformOriginSize === SIZES.SMALL ? 2.5 : transformOriginSize === SIZES.NORMAL ? 5 : 7.5;
+    const {spaceTransformMatrix: spaceTransformMatrix, spaceAnimatedTransform: spaceAnimatedTransform, spaceTransformTime: spaceTransformTime, stateTree: stateTree} = properties;
     return React.createElement(StyledPluridRoots, {
         suppressHydrationWarning: true,
         style: {
             width: "100%",
             height: typeof window !== "undefined" ? window.innerHeight + "px" : "821px",
-            transform: cleanTemplate(`\n                    translateX(${spaceTranslationX}px)\n                    translateY(${spaceTranslationY}px)\n                    translateZ(${spaceTranslationZ}px)\n                    scale(${spaceScale})\n                    rotateX(${spaceRotationX}deg)\n                    rotateY(${spaceRotationY}deg)\n                `),
-            transition: animatedTransform ? `transform ${transformTime}ms ease-in-out` : "initial",
-            transformOrigin: cleanTemplate(`\n                    ${transformOriginX}px\n                    ${transformOriginY}px\n                    ${transformOriginZ}px\n                `)
+            transform: spaceTransformMatrix,
+            transition: spaceAnimatedTransform ? `transform ${spaceTransformTime}ms ease-in-out` : "initial"
         },
         "data-plurid-entity": PLURID_ENTITY_ROOTS
-    }, showTransformOrigin && React.createElement(StyledTransformOrigin, {
-        suppressHydrationWarning: true,
-        theme: interactionTheme,
-        transformOriginSize: transformOriginSize,
-        style: {
-            transform: cleanTemplate(`\n                            rotateY(${-spaceRotationY}deg)\n                            translateX(${transformOriginX - transformOriginSizeDifference}px)\n                            translateY(${transformOriginY - transformOriginSizeDifference}px)\n                            translateZ(${transformOriginZ + 5}px)\n                        `),
-            transformOrigin: cleanTemplate(`\n                            ${transformOriginX - transformOriginSizeDifference}px\n                            ${transformOriginY - transformOriginSizeDifference}px\n                            ${transformOriginZ}px\n                        `)
-        },
-        "data-plurid-entity": PLURID_ENTITY_TRANSFORM_ORIGIN
-    }), stateTree.map((plane => React.createElement(ConnectedPluridRoot, {
+    }, stateTree.map((plane => React.createElement(ConnectedPluridRoot, {
         key: plane.planeID,
         plane: plane
     }))));
 };
 
-const mapStateToProperties$e = state => ({
+const mapStateToProperties$g = state => ({
     stateConfiguration: selectors.configuration.getConfiguration(state),
-    interactionTheme: selectors.themes.getInteractionTheme(state),
-    animatedTransform: selectors.space.getAnimatedTransform(state),
-    transformTime: selectors.space.getTransformTime(state),
-    spaceScale: selectors.space.getScale(state),
-    spaceRotationX: selectors.space.getRotationX(state),
-    spaceRotationY: selectors.space.getRotationY(state),
-    spaceTranslationX: selectors.space.getTranslationX(state),
-    spaceTranslationY: selectors.space.getTranslationY(state),
-    spaceTranslationZ: selectors.space.getTranslationZ(state),
+    spaceTransformMatrix: selectors.space.getTransformMatrix(state),
+    spaceAnimatedTransform: selectors.space.getAnimatedTransform(state),
+    spaceTransformTime: selectors.space.getTransformTime(state),
     stateTree: selectors.space.getTree(state)
 });
 
-const mapDispatchToProperties$e = dispatch => ({});
+const mapDispatchToProperties$g = dispatch => ({});
 
-const ConnectedPluridRoots = connect(mapStateToProperties$e, mapDispatchToProperties$e, null, {
+const ConnectedPluridRoots = connect(mapStateToProperties$g, mapDispatchToProperties$g, null, {
     context: StateContext
 })(PluridRoots);
 
@@ -2805,17 +2855,76 @@ const PluridSpace = properties => {
     }, React.createElement(ConnectedPluridRoots, null));
 };
 
-const mapStateToProperties$d = state => ({
+const mapStateToProperties$f = state => ({
     stateConfiguration: selectors.configuration.getConfiguration(state),
     stateGeneralTheme: selectors.themes.getGeneralTheme(state)
 });
 
-const mapDispatchToProperties$d = dispatch => ({});
+const mapDispatchToProperties$f = dispatch => ({});
 
-const ConnectedPluridSpace = connect(mapStateToProperties$d, mapDispatchToProperties$d, null, {
+const ConnectedPluridSpace = connect(mapStateToProperties$f, mapDispatchToProperties$f, null, {
     context: StateContext
 })(PluridSpace);
 
+const resolveSize = ({size: size}) => {
+    switch (size) {
+      case SIZES.SMALL:
+        return "5px";
+
+      case SIZES.NORMAL:
+        return "10px";
+
+      case SIZES.LARGE:
+        return "15px";
+
+      default:
+        return "10px";
+    }
+};
+
+const StyledOrigin = styled.div`
+    background-color: ${({theme: theme}) => theme.backgroundColorTertiaryAlpha};
+    height: ${resolveSize};
+    width: ${resolveSize};
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    z-index: 99999;
+    border-radius: 100px;
+    user-select: none;
+    pointer-events: none;
+    touch-action: none;
+`;
+
+const Origin = properties => {
+    const {stateGeneralTheme: stateGeneralTheme, stateConfiguration: stateConfiguration} = properties;
+    const {space: space} = stateConfiguration;
+    const {transformOrigin: transformOrigin} = space;
+    const {show: showTransformOrigin, size: transformOriginSize} = transformOrigin;
+    if (!showTransformOrigin) {
+        return React.createElement(React.Fragment, null);
+    }
+    return React.createElement(StyledOrigin, {
+        theme: stateGeneralTheme,
+        size: transformOriginSize,
+        "data-plurid-entity": PLURID_ENTITY_TRANSFORM_ORIGIN
+    });
+};
+
+const mapStateToProperties$e = state => ({
+    stateGeneralTheme: selectors.themes.getGeneralTheme(state),
+    stateInteractionTheme: selectors.themes.getInteractionTheme(state),
+    stateConfiguration: selectors.configuration.getConfiguration(state)
+});
+
+const mapDispatchToProperties$e = dispatch => ({});
+
+const ConnectedOrigin = connect(mapStateToProperties$e, mapDispatchToProperties$e, null, {
+    context: StateContext
+})(Origin);
+
 var MENUS;
 
 (function(MENUS) {
@@ -3076,16 +3185,16 @@ const PluridMenuUniverses = properties => {
     }, React.createElement(StyledPluridMenuUniversesScroll, null));
 };
 
-const mapStateToProps$f = state => ({
+const mapStateToProps$e = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state),
     activeUniverseID: selectors.space.getActiveUniverseID(state)
 });
 
-const mapDispatchToProps$f = dispatch => ({
+const mapDispatchToProps$e = dispatch => ({
     dispatchSetActiveUniverse: documentID => dispatch(actions.space.setActiveUniverse(documentID))
 });
 
-const ConnectedPluridMenuUniverses = connect(mapStateToProps$f, mapDispatchToProps$f, null, {
+const ConnectedPluridMenuUniverses = connect(mapStateToProps$e, mapDispatchToProps$e, null, {
     context: StateContext
 })(PluridMenuUniverses);
 
@@ -3159,14 +3268,14 @@ const PluridDrawer = properties => {
     }, heading)), toggled && React.createElement(StyledPluridDrawerItems, null, items));
 };
 
-const mapStateToProps$e = state => ({
+const mapStateToProps$d = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$e = dispatch => ({});
+const mapDispatchToProps$d = dispatch => ({});
 
-const ConnectedPluridDrawer = connect(mapStateToProps$e, mapDispatchToProps$e, null, {
+const ConnectedPluridDrawer = connect(mapStateToProps$d, mapDispatchToProps$d, null, {
     context: StateContext
 })(PluridDrawer);
 
@@ -3298,13 +3407,13 @@ const PluridMenuMoreGlobal = properties => {
     })));
 };
 
-const mapStateToProps$d = state => ({
+const mapStateToProps$c = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$d = dispatch => ({
+const mapDispatchToProps$c = dispatch => ({
     dispatchSetConfigurationThemeGeneralAction: theme => dispatch(actions.configuration.setConfigurationThemeGeneralAction(theme)),
     dispatchSetConfigurationThemeInteractionAction: theme => dispatch(actions.configuration.setConfigurationThemeInteractionAction(theme)),
     dispatchSetConfigurationLanguage: language => dispatch(actions.configuration.setConfigurationLanguageAction(language)),
@@ -3312,7 +3421,7 @@ const mapDispatchToProps$d = dispatch => ({
     dispatchSetInteractionTheme: theme => dispatch(actions.themes.setInteractionTheme(theme))
 });
 
-const ConnectedPluridMenuMoreGlobal = connect(mapStateToProps$d, mapDispatchToProps$d, null, {
+const ConnectedPluridMenuMoreGlobal = connect(mapStateToProps$c, mapDispatchToProps$c, null, {
     context: StateContext
 })(PluridMenuMoreGlobal);
 
@@ -3373,19 +3482,19 @@ const PluridMenuMoreTransform = properties => {
     })));
 };
 
-const mapStateToProps$c = state => ({
+const mapStateToProps$b = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$c = dispatch => ({
+const mapDispatchToProps$b = dispatch => ({
     dispatchToggleConfigurationSpaceTransformMultimode: multimode => dispatch(actions.configuration.toggleConfigurationSpaceTransformMultimode(multimode)),
     dispatchSetConfigurationSpaceTransformTouch: touch => dispatch(actions.configuration.setConfigurationSpaceTransformTouch(touch)),
     dispatchSetConfigurationSpaceTransformLocks: lock => dispatch(actions.configuration.setConfigurationSpaceTransformLocks(lock))
 });
 
-const ConnectedPluridMenuMoreTransform = connect(mapStateToProps$c, mapDispatchToProps$c, null, {
+const ConnectedPluridMenuMoreTransform = connect(mapStateToProps$b, mapDispatchToProps$b, null, {
     context: StateContext
 })(PluridMenuMoreTransform);
 
@@ -3447,12 +3556,12 @@ const PluridMenuMoreSpace = properties => {
     })));
 };
 
-const mapStateToProps$b = state => ({
+const mapStateToProps$a = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$b = dispatch => ({
+const mapDispatchToProps$a = dispatch => ({
     dispatchSetConfigurationPlaneOpacity: value => dispatch(actions.configuration.setConfigurationPlaneOpacity(value)),
     dispatchToggleConfigurationSpaceTransparentUI: () => dispatch(actions.configuration.toggleConfigurationSpaceTransparentUI()),
     dispatchToggleConfigurationSpaceShowTransformOrigin: () => dispatch(actions.configuration.toggleConfigurationSpaceShowTransformOrigin()),
@@ -3460,7 +3569,7 @@ const mapDispatchToProps$b = dispatch => ({
     dispatchSetConfigurationSpaceLayoutType: layoutType => dispatch(actions.configuration.setConfigurationSpaceLayoutType(layoutType))
 });
 
-const ConnectedPluridMenuMoreSpace = connect(mapStateToProps$b, mapDispatchToProps$b, null, {
+const ConnectedPluridMenuMoreSpace = connect(mapStateToProps$a, mapDispatchToProps$a, null, {
     context: StateContext
 })(PluridMenuMoreSpace);
 
@@ -3507,21 +3616,21 @@ const PluridMenuMoreToolbar = properties => {
     })));
 };
 
-const mapStateToProps$a = state => ({
+const mapStateToProps$9 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state),
     viewSize: selectors.space.getViewSize(state)
 });
 
-const mapDispatchToProps$a = dispatch => ({
+const mapDispatchToProps$9 = dispatch => ({
     dispatchToggleConfigurationToolbarConceal: () => dispatch(actions.configuration.toggleConfigurationToolbarConceal()),
     dispatchToggleConfigurationToolbarTransformIcons: () => dispatch(actions.configuration.toggleConfigurationToolbarTransformIcons()),
     dispatchToggleConfigurationToolbarTransformButtons: () => dispatch(actions.configuration.toggleConfigurationToolbarTransformButtons()),
     dispatchToggleConfigurationToolbarOpaque: () => dispatch(actions.configuration.toggleConfigurationToolbarOpaque())
 });
 
-const ConnectedPluridMenuMoreToolbar = connect(mapStateToProps$a, mapDispatchToProps$a, null, {
+const ConnectedPluridMenuMoreToolbar = connect(mapStateToProps$9, mapDispatchToProps$9, null, {
     context: StateContext
 })(PluridMenuMoreToolbar);
 
@@ -3562,20 +3671,20 @@ const PluridMenuMoreViewcube = properties => {
     }))));
 };
 
-const mapStateToProps$9 = state => ({
+const mapStateToProps$8 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$9 = dispatch => ({
+const mapDispatchToProps$8 = dispatch => ({
     dispatchToggleConfigurationViewcubeHide: toggle => dispatch(actions.configuration.toggleConfigurationViewcubeHide(toggle)),
     dispatchToggleConfigurationViewcubeButtons: toggle => dispatch(actions.configuration.toggleConfigurationViewcubeButtons(toggle)),
     dispatchToggleConfigurationViewcubeOpaque: toggle => dispatch(actions.configuration.toggleConfigurationViewcubeOpaque(toggle)),
     dispatchToggleConfigurationViewcubeConceal: () => dispatch(actions.configuration.toggleConfigurationViewcubeConceal())
 });
 
-const ConnectedPluridMenuMoreViewcube = connect(mapStateToProps$9, mapDispatchToProps$9, null, {
+const ConnectedPluridMenuMoreViewcube = connect(mapStateToProps$8, mapDispatchToProps$8, null, {
     context: StateContext
 })(PluridMenuMoreViewcube);
 
@@ -3603,17 +3712,17 @@ const PluridMenuMoreTechnical = properties => {
     })));
 };
 
-const mapStateToProps$8 = state => ({
+const mapStateToProps$7 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     stateConfiguration: selectors.configuration.getConfiguration(state),
     stateInteractionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$8 = dispatch => ({
+const mapDispatchToProps$7 = dispatch => ({
     dispatchSetConfigurationSpaceCullingDistance: value => dispatch(actions.configuration.setConfigurationSpaceCullingDistance(value))
 });
 
-const ConnectedPluridMenuMoreTechnical = connect(mapStateToProps$8, mapDispatchToProps$8, null, {
+const ConnectedPluridMenuMoreTechnical = connect(mapStateToProps$7, mapDispatchToProps$7, null, {
     context: StateContext
 })(PluridMenuMoreTechnical);
 
@@ -3638,14 +3747,14 @@ const PluridMenuMoreShortcuts = properties => {
     })));
 };
 
-const mapStateToProps$7 = state => ({
+const mapStateToProps$6 = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$7 = dispatch => ({});
+const mapDispatchToProps$6 = dispatch => ({});
 
-const ConnectedPluridMenuMoreShortcuts = connect(mapStateToProps$7, mapDispatchToProps$7, null, {
+const ConnectedPluridMenuMoreShortcuts = connect(mapStateToProps$6, mapDispatchToProps$6, null, {
     context: StateContext
 })(PluridMenuMoreShortcuts);
 
@@ -3748,19 +3857,19 @@ const PluridMoreMenu = properties => {
     }))));
 };
 
-const mapStateToProperties$c = state => ({
+const mapStateToProperties$d = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     stateInteractionTheme: selectors.themes.getInteractionTheme(state),
     stateConfiguration: selectors.configuration.getConfiguration(state),
     stateToolbarMenuScrollPosition: selectors.ui.getToolbarScrollPosition(state)
 });
 
-const mapDispatchToProperties$c = dispatch => ({
+const mapDispatchToProperties$d = dispatch => ({
     dispatchToggleConfigurationToolbarToggleDrawer: drawer => dispatch(actions.configuration.toggleConfigurationToolbarToggleDrawer(drawer)),
     dispatchSetUIToolbarScrollPosition: value => dispatch(actions.ui.setUIToolbarScrollPosition(value))
 });
 
-const ConnectedPluridMoreMenu = connect(mapStateToProperties$c, mapDispatchToProperties$c, null, {
+const ConnectedPluridMoreMenu = connect(mapStateToProperties$d, mapDispatchToProperties$d, null, {
     context: StateContext
 })(PluridMoreMenu);
 
@@ -3785,55 +3894,75 @@ const StyledPluridTransformArrow = styled.div`
     display: grid;
     place-content: center;
     padding: 2px;
-    background-color: ${props => {
-    if (props.pressed) {
-        return props.theme.backgroundColorTertiary;
+
+    background-color: ${({pressed: pressed, theme: theme}) => {
+    if (pressed) {
+        return theme.backgroundColorTertiary;
     }
     return "initial";
 }};
 
     :hover {
-        background-color: ${props => props.theme.backgroundColorTertiary};
+        background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
     }
 `;
 
+const arrowSigns = {
+    left: "◀",
+    right: "▶",
+    up: "▲",
+    down: "▼"
+};
+
 const PluridTransformArrow = properties => {
     const {direction: direction, transform: transform, interactionTheme: interactionTheme} = properties;
-    useRef(null);
+    const arrowSign = arrowSigns[direction];
+    const pressingInterval = useRef(null);
     const arrowElement = useRef(null);
-    const [arrowSign, setArrowSign] = useState("");
     const [pressed, setPressed] = useState(false);
-    useEffect((() => {
-        switch (direction) {
-          case "left":
-            setArrowSign("◀");
-            break;
-
-          case "right":
-            setArrowSign("▶");
+    const handleTouch = event => {
+        switch (event.type) {
+          case "tap":
+            transform();
+            if (pressingInterval.current) {
+                setPressed(false);
+                clearInterval(pressingInterval.current);
+            }
             break;
 
-          case "up":
-            setArrowSign("▲");
+          case "press":
+            setPressed(true);
+            pressingInterval.current = setInterval((() => {
+                transform();
+            }), 30);
             break;
 
-          case "down":
-            setArrowSign("▼");
+          case "pressup":
+            setPressed(false);
+            if (pressingInterval.current) {
+                clearInterval(pressingInterval.current);
+            }
             break;
         }
-    }), [ direction ]);
+    };
+    const handleMouseLeave = () => {
+        if (pressingInterval.current) {
+            setPressed(false);
+            clearInterval(pressingInterval.current);
+        }
+    };
     useEffect((() => {
         if (typeof window === "undefined") {
             return;
         }
         let touch;
-        const handleTouch = () => __awaiter(void 0, void 0, void 0, (function*() {
+        const loadTouch = () => __awaiter(void 0, void 0, void 0, (function*() {
             const HammerImport = yield loadHammer();
             const Hammer = HammerImport.default;
             touch = new Hammer(arrowElement.current);
             touch.on("tap press pressup", handleTouch);
         }));
-        handleTouch();
+        loadTouch();
         return () => {
             if (touch) {
                 touch.off("tap press pressup", handleTouch);
@@ -3843,17 +3972,18 @@ const PluridTransformArrow = properties => {
     return React.createElement(StyledPluridTransformArrow, {
         ref: arrowElement,
         theme: interactionTheme,
-        pressed: pressed
+        pressed: pressed,
+        onMouseLeave: () => handleMouseLeave()
     }, arrowSign);
 };
 
-const mapStateToProps$6 = state => ({
+const mapStateToProps$5 = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$6 = dispatch => ({});
+const mapDispatchToProps$5 = dispatch => ({});
 
-const ConnectedPluridTransformArrow = connect(mapStateToProps$6, mapDispatchToProps$6, null, {
+const ConnectedPluridTransformArrow = connect(mapStateToProps$5, mapDispatchToProps$5, null, {
     context: StateContext
 })(PluridTransformArrow);
 
@@ -3883,19 +4013,19 @@ const PluridToolbarRotate = properties => {
     })));
 };
 
-const mapStateToProps$5 = state => ({
+const mapStateToProps$4 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$5 = dispatch => ({
+const mapDispatchToProps$4 = dispatch => ({
     rotateUp: () => dispatch(actions.space.rotateUp()),
     rotateDown: () => dispatch(actions.space.rotateDown()),
     rotateLeft: () => dispatch(actions.space.rotateLeft()),
     rotateRight: () => dispatch(actions.space.rotateRight())
 });
 
-const ConnectedPluridToolbarRotate = connect(mapStateToProps$5, mapDispatchToProps$5, null, {
+const ConnectedPluridToolbarRotate = connect(mapStateToProps$4, mapDispatchToProps$4, null, {
     context: StateContext
 })(PluridToolbarRotate);
 
@@ -3931,17 +4061,17 @@ const PluridToolbarScale = properties => {
     }));
 };
 
-const mapStateToProps$4 = state => ({
+const mapStateToProps$3 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$4 = dispatch => ({
+const mapDispatchToProps$3 = dispatch => ({
     scaleUp: () => dispatch(actions.space.scaleUp()),
     scaleDown: () => dispatch(actions.space.scaleDown())
 });
 
-const ConnectedPluridToolbarScale = connect(mapStateToProps$4, mapDispatchToProps$4, null, {
+const ConnectedPluridToolbarScale = connect(mapStateToProps$3, mapDispatchToProps$3, null, {
     context: StateContext
 })(PluridToolbarScale);
 
@@ -3983,19 +4113,19 @@ const PluridToolbarTranslate = properties => {
     })));
 };
 
-const mapStateToProps$3 = state => ({
+const mapStateToProperties$c = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$3 = dispatch => ({
+const mapDispatchToProperties$c = dispatch => ({
     translateUp: () => dispatch(actions.space.translateUp()),
     translateDown: () => dispatch(actions.space.translateDown()),
     translateLeft: () => dispatch(actions.space.translateLeft()),
     translateRight: () => dispatch(actions.space.translateRight())
 });
 
-const ConnectedPluridToolbarTranslate = connect(mapStateToProps$3, mapDispatchToProps$3, null, {
+const ConnectedPluridToolbarTranslate = connect(mapStateToProperties$c, mapDispatchToProperties$c, null, {
     context: StateContext
 })(PluridToolbarTranslate);
 
@@ -4006,6 +4136,7 @@ const PluridToolbar = properties => {
     const {firstPerson: firstPerson, transformMode: transformMode, fadeInTime: fadeInTime} = space;
     const {toolbar: toolbar} = elements;
     const {conceal: conceal, opaque: opaque, transformIcons: transformIcons, transformButtons: transformButtons} = toolbar;
+    const showToolbar = toolbar.show;
     const menuTimeout = useRef(null);
     const [mouseIn, setMouseIn] = useState(false);
     const [showMenu, setShowMenu] = useState(MENUS.NONE);
@@ -4058,6 +4189,9 @@ const PluridToolbar = properties => {
             }
         };
     }), [ mouseIn ]);
+    if (!showToolbar) {
+        return React.createElement(React.Fragment, null);
+    }
     return React.createElement(StyledToolbar, {
         onMouseEnter: () => setMouseIn(true),
         onMouseLeave: () => setMouseIn(false),
@@ -4622,6 +4756,10 @@ const StyledPluridViewcubeModelCube = styled.div`
     height: 50px;
 `;
 
+const {matrixArrayToCSSMatrix: matrixArrayToCSSMatrix, rotateMatrix: rotateMatrix, multiplyArrayOfMatrices: multiplyArrayOfMatrices, scaleMatrix: scaleMatrix, translateMatrix: translateMatrix$1} = interaction.matrix;
+
+const {degToRad: degToRad$1} = interaction.quaternion;
+
 const PluridViewcubeModel = properties => {
     const {mouseOver: mouseOver, stateLanguage: stateLanguage, spaceRotationX: spaceRotationX, spaceRotationY: spaceRotationY, stateAnimatedTransform: stateAnimatedTransform, stateTransformTime: stateTransformTime} = properties;
     const [hoveredZone, setHoveredZone] = useState("");
@@ -4629,15 +4767,35 @@ const PluridViewcubeModel = properties => {
     const handleMouseLeave = () => {
         setHoveredZone("");
     };
+    const computeTransform = () => {
+        const offsets = {
+            x: 32,
+            y: 23,
+            z: 0
+        };
+        const transformOrigins = {
+            x: 0,
+            y: 0,
+            z: 0
+        };
+        const scale = 1;
+        const rotationMatrix = rotateMatrix(degToRad$1(-spaceRotationX), degToRad$1(-spaceRotationY));
+        const translationMatrix = translateMatrix$1(offsets.x, offsets.y, offsets.z);
+        const scalationMatrix = scaleMatrix(scale);
+        const transformMatrix = multiplyArrayOfMatrices([ translationMatrix, multiplyArrayOfMatrices([ translateMatrix$1(transformOrigins.x, transformOrigins.y, transformOrigins.z), rotationMatrix, translateMatrix$1(-transformOrigins.x, -transformOrigins.y, -transformOrigins.z) ]), scalationMatrix ]);
+        const transform = matrixArrayToCSSMatrix(transformMatrix);
+        return transform;
+    };
     useEffect((() => {
         if (!hoveredZone) {
             setActiveZone("");
         }
     }), [ spaceRotationX, spaceRotationY ]);
+    const transform = computeTransform();
     return React.createElement(StyledPluridViewcubeModel, null, React.createElement(StyledPluridViewcubeModelContainer, null, React.createElement(StyledPluridViewcubeModelCube, {
         suppressHydrationWarning: true,
         style: {
-            transform: `\n                            translateX(32px)\n                            translateY(23px)\n                            rotateX(${spaceRotationX}deg)\n                            rotateY(${spaceRotationY}deg)\n                        `,
+            transform: transform,
             transition: mouseOver || stateAnimatedTransform ? `transform ${stateTransformTime}ms ease-in-out` : ""
         },
         onMouseLeave: () => handleMouseLeave()
@@ -4712,6 +4870,7 @@ const PluridViewcube = properties => {
     const {viewcube: viewcube} = elements;
     const {buttons: buttons, conceal: conceal} = viewcube;
     const {fadeInTime: fadeInTime} = space;
+    const showViewcube = viewcube.show;
     const [mouseOver, setMouseOver] = useState(false);
     const [isMounted, setIsMounted] = useState(false);
     const animatedRotate = (type, value) => {
@@ -4742,6 +4901,9 @@ const PluridViewcube = properties => {
     useEffect((() => {
         setIsMounted(true);
     }), []);
+    if (!showViewcube) {
+        return React.createElement(React.Fragment, null);
+    }
     return React.createElement(StyledPluridViewcube, {
         onMouseEnter: () => setMouseOver(true),
         onMouseLeave: () => setMouseOver(false),
@@ -4806,18 +4968,9 @@ const ConnectedPluridViewcube = connect(mapStateToProperties$8, mapDispatchToPro
     context: StateContext
 })(PluridViewcube);
 
-const PluridPlanesView = properties => {
-    const {stateConfiguration: stateConfiguration} = properties;
-    const {elements: elements} = stateConfiguration;
-    const {toolbar: toolbar, viewcube: viewcube} = elements;
-    const showToolbar = toolbar.show;
-    const showViewcube = viewcube.show;
-    return React.createElement(React.Fragment, null, React.createElement(ConnectedPluridSpace, null), showToolbar && React.createElement(ConnectedPluridToolbar, null), showViewcube && React.createElement(ConnectedPluridViewcube, null));
-};
+const PluridPlanesView = properties => React.createElement(React.Fragment, null, React.createElement(ConnectedPluridSpace, null), React.createElement(ConnectedOrigin, null), React.createElement(ConnectedPluridToolbar, null), React.createElement(ConnectedPluridViewcube, null));
 
-const mapStateToProps$2 = state => ({
-    stateConfiguration: selectors.configuration.getConfiguration(state)
-});
+const mapStateToProps$2 = state => ({});
 
 const mapDispatchToProps$2 = dispatch => ({});
 
@@ -4835,7 +4988,7 @@ const handleView = view => {
 const {getRegisteredPlanes: getRegisteredPlanes} = planes;
 
 const PluridView = properties => {
-    const {planesRegistrar: planesRegistrar, customPlane: customPlane, planeContext: planeContext, planeContextValue: planeContextValue, pubsub: pubsub, planeNotFound: planeNotFound, planeRenderError: planeRenderError, stateConfiguration: stateConfiguration, stateTransform: stateTransform, stateSpaceView: stateSpaceView, dispatch: dispatch, dispatchSetConfiguration: dispatchSetConfiguration, dispatchSetGeneralTheme: dispatchSetGeneralTheme, dispatchSetInteractionTheme: dispatchSetInteractionTheme, dispatchSetSpaceLocation: dispatchSetSpaceLocation, dispatchSetAnimatedTransform: dispatchSetAnimatedTransform, dispatchSetTransformTime: dispatchSetTransformTime, dispatchSetTree: dispatchSetTree, dispatchRotateXWith: dispatchRotateXWith, dispatchRotateX: dispatchRotateX, dispatchRotateYWith: dispatchRotateYWith, dispatchRotateY: dispatchRotateY, dispatchTranslateXWith: dispatchTranslateXWith, dispatchTranslateYWith: dispatchTranslateYWith, dispatchScaleUpWith: dispatchScaleUpWith, dispatchScaleDownWith: dispatchScaleDownWith, dispatchSpaceSetViewSize: dispatchSpaceSetViewSize, dispatchSpaceSetView: dispatchSpaceSetView} = properties;
+    const {planesRegistrar: planesRegistrar, customPlane: customPlane, planeContext: planeContext, planeContextValue: planeContextValue, pubsub: pubsub, planeNotFound: planeNotFound, planeRenderError: planeRenderError, matchedRoute: matchedRoute, stateConfiguration: stateConfiguration, stateTransform: stateTransform, stateSpaceView: stateSpaceView, stateTree: stateTree, dispatch: dispatch, dispatchSetConfiguration: dispatchSetConfiguration, dispatchSetGeneralTheme: dispatchSetGeneralTheme, dispatchSetInteractionTheme: dispatchSetInteractionTheme, dispatchSetSpaceLocation: dispatchSetSpaceLocation, dispatchSetAnimatedTransform: dispatchSetAnimatedTransform, dispatchSetTransformTime: dispatchSetTransformTime, dispatchSetTree: dispatchSetTree, dispatchRotateXWith: dispatchRotateXWith, dispatchRotateX: dispatchRotateX, dispatchRotateYWith: dispatchRotateYWith, dispatchRotateY: dispatchRotateY, dispatchTranslateXWith: dispatchTranslateXWith, dispatchTranslateYWith: dispatchTranslateYWith, dispatchScaleUpWith: dispatchScaleUpWith, dispatchScaleDownWith: dispatchScaleDownWith, dispatchSpaceSetViewSize: dispatchSpaceSetViewSize, dispatchSpaceSetView: dispatchSpaceSetView} = properties;
     const viewElement = useRef(null);
     const [pluridPubSub, setPluridPubSub] = useState(pubsub ? [ pubsub ] : []);
     const shortcutsCallback = useCallback((event => {
@@ -4859,6 +5012,15 @@ const PluridView = properties => {
             view: stateSpaceView
         });
         const computedTree = spaceTree.compute();
+        for (const statePlane of stateTree) {
+            for (const [index, computedPlane] of computedTree.entries()) {
+                if (statePlane.route === computedPlane.route) {
+                    if (statePlane.children) {
+                        computedTree[index].children = statePlane.children;
+                    }
+                }
+            }
+        }
         dispatchSetTree(computedTree);
     }), [ stateSpaceView, stateConfiguration ]);
     const handlePubSubSubscribe = pubsub => {
@@ -5016,10 +5178,10 @@ const PluridView = properties => {
     };
     const handleSwipe = event => {
         const {transformMode: transformMode} = stateConfiguration.space;
-        const {velocity: velocity, distance: distance, direction: direction} = event;
         if (transformMode === TRANSFORM_MODES.ALL) {
             return;
         }
+        const {velocity: velocity, distance: distance, direction: direction} = event;
         const rotationMode = transformMode === TRANSFORM_MODES.ROTATION;
         const translationMode = transformMode === TRANSFORM_MODES.TRANSLATION;
         const scalationMode = transformMode === TRANSFORM_MODES.SCALE;
@@ -5073,10 +5235,10 @@ const PluridView = properties => {
     };
     const handlePan = event => {
         const {transformMode: transformMode} = stateConfiguration.space;
-        const {velocity: velocity, distance: distance, direction: direction} = event;
         if (transformMode === TRANSFORM_MODES.ALL) {
             return;
         }
+        const {velocity: velocity, distance: distance, direction: direction} = event;
         const rotationMode = transformMode === TRANSFORM_MODES.ROTATION;
         const translationMode = transformMode === TRANSFORM_MODES.TRANSLATION;
         const scalationMode = transformMode === TRANSFORM_MODES.SCALE;
@@ -5197,18 +5359,17 @@ const PluridView = properties => {
         }));
         handleTouch();
         return () => {
+            if (!touch) {
+                return;
+            }
             const {transformTouch: transformTouch} = stateConfiguration.space;
             if (transformTouch === TRANSFORM_TOUCHES.PAN) {
-                if (touch) {
-                    touch.off("pan", handlePan);
-                }
+                touch.off("pan", handlePan);
             } else {
-                if (touch) {
-                    touch.off("swipe", handleSwipe);
-                }
+                touch.off("swipe", handleSwipe);
             }
         };
-    }), [ viewElement.current, stateConfiguration.space.transformTouch ]);
+    }), [ viewElement.current, stateConfiguration.space.transformTouch, stateConfiguration.space.transformMode ]);
     useEffect((() => {
         const handleGamepadConnect = event => {
             const gamepad = navigator.getGamepads()[event.gamepad.index];
@@ -5246,9 +5407,6 @@ const PluridView = properties => {
             handlePubSubPublish(pubsub);
         }
     }), [ pluridPubSub.length, stateConfiguration, stateTransform ]);
-    useEffect((() => {
-        treeUpdateCallback();
-    }), [ stateSpaceView ]);
     const pluridContext = {
         planesRegistrar: planesRegistrar,
         planeContext: planeContext,
@@ -5256,6 +5414,7 @@ const PluridView = properties => {
         customPlane: customPlane,
         planeNotFound: planeNotFound,
         planeRenderError: planeRenderError,
+        matchedRoute: matchedRoute,
         registerPubSub: registerPubSub
     };
     const viewContainer = handleView(stateSpaceView);
@@ -5272,6 +5431,7 @@ const PluridView = properties => {
 const mapStateToProperties$7 = state => ({
     stateConfiguration: selectors.configuration.getConfiguration(state),
     stateTransform: selectors.space.getTransform(state),
+    stateTree: selectors.space.getTree(state),
     stateSpaceLoading: selectors.space.getLoading(state),
     stateSpaceView: selectors.space.getView(state)
 });
@@ -5472,13 +5632,23 @@ const computeIndexedPlanes = (routes, protocol, host) => {
     return indexedPlanes;
 };
 
-const collectApplicationsFromPath = (isoMatch, protocol, host) => {
+const collectApplicationsFromPath = (isoMatch, protocol, host, globals) => __awaiter(void 0, void 0, void 0, (function*() {
     const path = {
-        planes: isoMatch.data.planes || [],
-        spaces: isoMatch.data.spaces || [],
-        view: isoMatch.data.view || [],
-        value: isoMatch.data.value || ""
+        planes: [],
+        spaces: [],
+        view: [],
+        value: ""
     };
+    if (isoMatch.kind === "Route") {
+        let routeData = isoMatch.data;
+        if (isoMatch.data.resolver) {
+            routeData = yield isoMatch.data.resolver(globals);
+        }
+        path.planes = routeData.planes || [];
+        path.spaces = routeData.spaces || [];
+        path.view = routeData.view || [];
+        path.value = isoMatch.data.value || "";
+    }
     const {planes: planes, spaces: spaces, view: view} = path;
     const plurids = [];
     if (spaces) {
@@ -5539,7 +5709,7 @@ const collectApplicationsFromPath = (isoMatch, protocol, host) => {
         plurids.push(pluridApplication);
     }
     return plurids;
-};
+}));
 
 const gatherPluridPlanes = (routes, planes) => {
     const pluridPlanes = [];
@@ -5784,7 +5954,8 @@ const computePluridRoute = (matchedRoute, planesRegistrar, isoMatcher, directPla
                 view: view,
                 planesRegistrar: planesRegistrar,
                 configuration: defaultConfiguration,
-                pubsub: pubsub
+                pubsub: pubsub,
+                matchedRoute: matchedRoute
             });
             const PluridRoute = () => React.createElement(React.Fragment, null, PluridRouteExterior && React.createElement(PluridRouteExterior, {
                 plurid: pluridRouteProperty,
@@ -5863,10 +6034,12 @@ const renderDirectPlane = (routePlane, planesRegistrar) => {
             }
         }
     }
+    const {defaultConfiguration: defaultConfiguration} = routePlane === null || routePlane === void 0 ? void 0 : routePlane.data;
     const DirectPlane = () => {
         const PluridRoute = () => React.createElement(React.Fragment, null, React.createElement(PluridApplication, {
             view: [ routePlane.match.value ],
-            planesRegistrar: planesRegistrar
+            planesRegistrar: planesRegistrar,
+            configuration: defaultConfiguration
         }));
         return PluridRoute;
     };
@@ -6103,13 +6276,21 @@ const {resolveRoute: resolveRoute, computePlaneAddress: computePlaneAddress} = r
 
 const {getPlanesRegistrar: getPlanesRegistrar, getPluridPlaneIDByData: getPluridPlaneIDByData$1} = planes;
 
+const {degToRad: degToRad, radToDeg: radToDeg} = interaction.quaternion;
+
+const {multiplyMatrices: multiplyMatrices, translateMatrix: translateMatrix, rotateYMatrix: rotateYMatrix} = interaction.transform.general;
+
+const {getTransformRotate: getTransformRotate, getTransformTranslate: getTransformTranslate, getTransformScale: getTransformScale} = interaction.transform.matrix3d;
+
 const PluridLink = properties => {
-    const {children: children, route: planeRoute, devisible: _devisible, suffix: _suffix, atClick: atClick, style: style, className: className, stateTree: stateTree, stateGeneralTheme: stateGeneralTheme, stateConfiguration: stateConfiguration, stateViewSize: stateViewSize, dispatchSetTree: dispatchSetTree, dispatchUpdateSpaceLinkCoordinates: dispatchUpdateSpaceLinkCoordinates} = properties;
+    const {children: children, route: planeRoute, devisible: _devisible, suffix: _suffix, atClick: atClick, style: style, className: className, stateTree: stateTree, stateGeneralTheme: stateGeneralTheme, stateConfiguration: stateConfiguration, stateViewSize: stateViewSize, dispatchSetTree: dispatchSetTree, dispatchSetAnimatedTransform: dispatchSetAnimatedTransform, dispatchSetTransform: dispatchSetTransform, dispatchSetSpaceField: dispatchSetSpaceField, dispatchUpdateSpaceLinkCoordinates: dispatchUpdateSpaceLinkCoordinates} = properties;
     const planeControls = stateConfiguration.elements.plane.controls.show;
     const previewAppearTime = PLURID_DEFAULT_CONFIGURATION_LINK_PREVIEW_FADE_IN;
     const previewDisappearTime = PLURID_DEFAULT_CONFIGURATION_LINK_PREVIEW_FADE_OUT;
     const planeRouteResolved = computePlaneAddress(planeRoute);
     const absolutePlaneRoute = resolveRoute(planeRouteResolved, stateConfiguration.network.protocol, stateConfiguration.network.host);
+    const suffix = _suffix !== null && _suffix !== void 0 ? _suffix : PLURID_DEFAULT_CONFIGURATION_LINK_SUFFIX;
+    const devisible = _devisible !== null && _devisible !== void 0 ? _devisible : false;
     const context = useContext(Context);
     if (!context) {
         return React.createElement(React.Fragment, null, children);
@@ -6129,8 +6310,6 @@ const PluridLink = properties => {
     const [pluridPlaneID, setPluridPlaneID] = useState("");
     const [parentPlaneID, setParentPlaneID] = useState("");
     const [linkCoordinates, setLinkCoordinates] = useState(defaultLinkCoordinates);
-    const [suffix, setSuffix] = useState(_suffix !== null && _suffix !== void 0 ? _suffix : PLURID_DEFAULT_CONFIGURATION_LINK_SUFFIX);
-    const [devisible, setDevisible] = useState(_devisible !== null && _devisible !== void 0 ? _devisible : false);
     const getPluridLinkCoordinates = () => {
         const link = linkElement.current;
         if (!link) {
@@ -6180,38 +6359,69 @@ const PluridLink = properties => {
             y: y
         };
     };
-    const updateLinkCoordinates = () => {
-        const linkCoordinates = getPluridLinkCoordinates();
-        const payload = {
-            planeID: pluridPlaneID,
-            linkCoordinates: linkCoordinates
-        };
-        dispatchUpdateSpaceLinkCoordinates(payload);
-    };
-    const updateTreeWithLink = () => {
+    const updateTreeWithLink = event => {
         if (!parentPlaneID || !absolutePlaneRoute) {
             return;
         }
         const {route: route} = absolutePlaneRoute;
         const linkCoordinates = getPluridLinkCoordinates();
-        const {pluridPlaneID: pluridPlaneID, updatedTree: updatedTree} = space$1.tree.logic.updateTreeWithNewPlane(route, parentPlaneID, linkCoordinates, stateTree, planesRegistry.getAll(), stateConfiguration);
+        const {pluridPlaneID: pluridPlaneID, updatedTree: updatedTree, updatedTreePlane: updatedTreePlane} = space$1.tree.logic.updateTreeWithNewPlane(route, parentPlaneID, linkCoordinates, stateTree, planesRegistry.getAll(), stateConfiguration);
         if (pluridPlaneID) {
+            navigateToPluridPlane(event, updatedTreePlane);
             dispatchSetTree(updatedTree);
             setShowLink(true);
             setPluridPlaneID(pluridPlaneID);
         }
     };
-    const toggleLinkFromTree = () => {
-        const updatedTree = space$1.tree.logic.togglePlaneFromTree(stateTree, pluridPlaneID);
+    const toggleLinkFromTree = event => {
+        const {updatedTree: updatedTree, updatedPlane: updatedPlane} = space$1.tree.logic.togglePlaneFromTree(stateTree, pluridPlaneID);
+        navigateToPluridPlane(event, updatedPlane);
         dispatchSetTree(updatedTree);
         setShowLink((show => !show));
         setShowPreview(false);
     };
-    const handleShowPluridPlane = () => {
+    const navigateToPluridPlane = (event, updatedPlane) => {
+        if (!updatedPlane) {
+            return;
+        }
+        if (showLink) {
+            return;
+        }
+        if (event.altKey || event.metaKey) {
+            return;
+        }
+        const {location: location} = updatedPlane;
+        const {translateX: translateX, translateY: translateY, translateZ: translateZ, rotateY: rotateY} = location;
+        const zSign1 = rotateY < 100 ? 1 : -1;
+        const zSign2 = rotateY < 100 ? -1 : 1;
+        const xOffset = rotateY < 100 ? 200 : 0;
+        const newMatrix = multiplyMatrices(multiplyMatrices(multiplyMatrices(translateMatrix(-translateX, -translateY, zSign1 * translateZ), rotateYMatrix(degToRad(rotateY))), translateMatrix(translateX, translateY, zSign2 * translateZ)), translateMatrix(-(translateX + xOffset), -translateY, zSign1 * translateZ));
+        const matrix3d = `matrix3d(${newMatrix.flat().join(",")})`;
+        const rotate = getTransformRotate(matrix3d);
+        const translate = getTransformTranslate(matrix3d);
+        const scale = getTransformScale(matrix3d);
+        dispatchSetAnimatedTransform(true);
+        dispatchSetSpaceField({
+            field: "transform",
+            value: matrix3d
+        });
+        dispatchSetTransform({
+            translationX: translate.translateX,
+            translationY: translate.translateY,
+            translationZ: translate.translateZ,
+            rotationX: radToDeg(rotate.rotateX),
+            rotationY: radToDeg(rotate.rotateY) * -1,
+            scale: scale.scale
+        });
+        setTimeout((() => {
+            dispatchSetAnimatedTransform(false);
+        }), 500);
+    };
+    const handleShowPluridPlane = event => {
         if (!showLink && !pluridPlaneID) {
-            updateTreeWithLink();
+            updateTreeWithLink(event);
         } else {
-            toggleLinkFromTree();
+            toggleLinkFromTree(event);
         }
     };
     const handleClick = useCallback((event => {
@@ -6219,21 +6429,8 @@ const PluridLink = properties => {
         if (atClick !== undefined) {
             atClick(event);
         }
-        handleShowPluridPlane();
+        handleShowPluridPlane(event);
     }), [ linkElement.current, stateTree ]);
-    useEffect((() => {
-        if (_suffix !== undefined) {
-            setSuffix(_suffix);
-        }
-        if (_devisible !== undefined) {
-            setDevisible(_devisible);
-        }
-    }), [ _suffix, _devisible ]);
-    useEffect((() => {
-        if (showLink) {
-            updateLinkCoordinates();
-        }
-    }), [ stateViewSize ]);
     useEffect((() => {
         const parentPlaneID = getPluridPlaneIDByData$1(linkElement.current);
         setParentPlaneID(parentPlaneID);
@@ -6294,6 +6491,9 @@ const mapStateToProperties$5 = state => ({
 
 const mapDispatchToProperties$5 = dispatch => ({
     dispatchSetTree: tree => dispatch(actions.space.setTree(tree)),
+    dispatchSetAnimatedTransform: payload => dispatch(actions.space.setAnimatedTransform(payload)),
+    dispatchSetTransform: payload => dispatch(actions.space.setTransform(payload)),
+    dispatchSetSpaceField: payload => dispatch(actions.space.setSpaceField(payload)),
     dispatchUpdateSpaceLinkCoordinates: payload => dispatch(actions.space.updateSpaceLinkCoordinates(payload))
 });
 
@@ -6725,11 +6925,11 @@ const computeApplication = (indexedPlanes, planes, configuration, view) => {
     return data;
 };
 
-const serverComputeMetastate = (isoMatch, paths) => {
+const serverComputeMetastate = (isoMatch, paths, globals) => __awaiter(void 0, void 0, void 0, (function*() {
     const protocol = "http";
     const host = "localhost:63000";
     const indexedPlanes = computeIndexedPlanes(paths, protocol, host);
-    const pluridApplications = collectApplicationsFromPath(isoMatch);
+    const pluridApplications = yield collectApplicationsFromPath(isoMatch, protocol, host, globals);
     const states = {};
     for (const application of pluridApplications) {
         const {planes: planes, view: view} = application;
@@ -6787,13 +6987,13 @@ const serverComputeMetastate = (isoMatch, paths) => {
     return {
         states: states
     };
-};
+}));
 
 const usePluridRouter = () => {
     const [routerValue, setRouterValue] = useState("");
     useEffect((() => {
         const fetchState = () => {
-            const state = storage.loadState("__PLURID_ROUTER__");
+            const state = storage.loadState(PLURID_ROUTER_STORAGE);
             if (state) {
                 setRouterValue(state);
             }