slice-machine-ui 1.19.3-dev-next-release.1 → 1.19.3-dev-rename-and-delete-variations.2

package/components/DeleteVariationModal/index.tsx

@@ -0,0 +1,84 @@
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  Text,
+} from "@prismicio/editor-ui";
+import { useRouter } from "next/router";
+import type { Dispatch, FC, PropsWithChildren, SetStateAction } from "react";
+
+import type { SliceBuilderState } from "@builders/SliceBuilder";
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import type { VariationSM } from "@lib/models/common/Slice";
+import { deleteVariation } from "@src/features/slices/sliceBuilder/actions/deleteVariation";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+
+type DeleteVariationModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  slice: ComponentUI;
+  variation: VariationSM;
+  sliceBuilderState: SliceBuilderState;
+  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
+};
+
+export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
+  isOpen,
+  onClose,
+  slice,
+  variation,
+  sliceBuilderState,
+  setSliceBuilderState,
+}) => {
+  const router = useRouter();
+  const { updateAndSaveSlice } = useSliceMachineActions();
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      size={{ width: 448, height: "auto" }}
+    >
+      <DialogHeader icon="delete" title="Delete variation" />
+      <DialogContent>
+        <Box flexDirection="column">
+          <Box flexDirection="column" gap={8} padding={16}>
+            <Text color="grey11">
+              This action will remove the variation from the slice model and
+              delete associated files. When you push your changes, the variation
+              will disappear from your repository. This update will{" "}
+              <Bold>not</Bold> affect your documents until you <Bold>edit</Bold>{" "}
+              them manually.
+            </Text>
+          </Box>
+          <DialogActions
+            ok={{
+              text: "Delete",
+              onClick: () => {
+                void (async () => {
+                  try {
+                    await deleteVariation({
+                      component: slice,
+                      router,
+                      setSliceBuilderState,
+                      updateAndSaveSlice,
+                      variation,
+                    });
+                  } catch {}
+                  onClose();
+                })();
+              },
+              loading: sliceBuilderState.loading,
+            }}
+            cancel={{ text: "Cancel" }}
+          />
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const Bold: FC<PropsWithChildren> = (props) => (
+  <Text {...props} color="inherit" component="span" variant="bold" />
+);

package/components/Forms/RenameVariationModal/RenameVariationModal.css.ts

@@ -0,0 +1,7 @@
+import { sprinkles } from "@prismicio/editor-ui";
+
+export const label = sprinkles({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+});

package/components/Forms/RenameVariationModal/RenameVariationModal.tsx

@@ -0,0 +1,118 @@
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  FormInput,
+  Text,
+} from "@prismicio/editor-ui";
+import { Formik } from "formik";
+import type { Dispatch, FC, SetStateAction } from "react";
+
+import type { SliceBuilderState } from "@builders/SliceBuilder";
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import type { VariationSM } from "@lib/models/common/Slice";
+import { renameVariation } from "@src/features/slices/sliceBuilder/actions/renameVariation";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+
+import * as styles from "./RenameVariationModal.css";
+
+type RenameVariationModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  slice: ComponentUI;
+  variation: VariationSM;
+  sliceBuilderState: SliceBuilderState;
+  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
+};
+
+export const RenameVariationModal: FC<RenameVariationModalProps> = ({
+  isOpen,
+  onClose,
+  slice,
+  variation,
+  sliceBuilderState,
+  setSliceBuilderState,
+}) => {
+  const { updateAndSaveSlice } = useSliceMachineActions();
+  return (
+    <>
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => !open && onClose()}
+        size={{ width: 448, height: "auto" }}
+      >
+        <DialogHeader icon="edit" title="Rename variation" />
+        <DialogContent>
+          <Formik
+            validateOnChange
+            validateOnMount
+            initialValues={{ variationName: variation.name }}
+            validate={(values) => {
+              if (values.variationName.length === 0) {
+                return { variationName: "Cannot be empty" };
+              }
+            }}
+            onSubmit={async (values) => {
+              try {
+                await renameVariation({
+                  component: slice,
+                  setSliceBuilderState,
+                  updateAndSaveSlice,
+                  variation,
+                  variationName: values.variationName.trim(),
+                });
+              } catch {}
+              onClose();
+            }}
+          >
+            {(formik) => (
+              <form>
+                <Box flexDirection="column">
+                  <Box flexDirection="column" gap={8} padding={16}>
+                    <Text variant="normal" color="grey11">
+                      This action will rename the variation in the slice model.
+                      When you push your changes, the variation will be renamed
+                      in your repository.
+                    </Text>
+                    <Box flexDirection="column" gap={4}>
+                      <label className={styles.label}>
+                        <Text variant="bold">Variation name*</Text>
+                        {typeof formik.errors.variationName === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.variationName}
+                          </Text>
+                        ) : null}
+                      </label>
+                      <FormInput
+                        placeholder="Variation name"
+                        error={typeof formik.errors.variationName === "string"}
+                        value={formik.values.variationName}
+                        onValueChange={(value) =>
+                          void formik.setFieldValue(
+                            "variationName",
+                            value.slice(0, 30),
+                          )
+                        }
+                      />
+                    </Box>
+                  </Box>
+                  <DialogActions
+                    ok={{
+                      text: "Rename",
+                      onClick: () => void formik.submitForm(),
+                      loading: sliceBuilderState.loading,
+                      disabled: !formik.isValid,
+                    }}
+                    cancel={{ text: "Cancel" }}
+                  />
+                </Box>
+              </form>
+            )}
+          </Formik>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

package/components/Forms/RenameVariationModal/index.ts

@@ -0,0 +1 @@
+export { RenameVariationModal } from "./RenameVariationModal";

package/lib/builders/SliceBuilder/Sidebar/{VariationModal.tsx → AddVariationModal.tsx}

@@ -15,7 +15,7 @@ const Error = ({ msg }: { msg?: string }) => (
     {msg || "Error!"}
   </Text>
 );
-const VariationModal: React.FunctionComponent<{
+const AddVariationModal: React.FunctionComponent<{
   isOpen: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onClose: () => any;
@@ -51,7 +51,7 @@ const VariationModal: React.FunctionComponent<{
     const originError = !(
       origin.value.length && variations.find((v) => v.id === origin.value)
     )
-      ? { id: "Yuu must select an existing variation!" }
+      ? { id: "You must select an existing variation!" }
       : null;
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     const invalidIdError = id &&
@@ -236,4 +236,4 @@ const VariationModal: React.FunctionComponent<{
   );
 };
 
-export default VariationModal;
+export default AddVariationModal;

package/lib/builders/SliceBuilder/Sidebar/index.tsx

@@ -1,8 +1,11 @@
 import { Box, Button } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
-import { type FC, useState } from "react";
+import { type Dispatch, type FC, type SetStateAction, useState } from "react";
 
-import VariationModal from "@builders/SliceBuilder/Sidebar/VariationModal";
+import AddVariationModal from "@builders/SliceBuilder/Sidebar/AddVariationModal";
+import type { SliceBuilderState } from "@builders/SliceBuilder";
+import { DeleteVariationModal } from "@components/DeleteVariationModal";
+import { RenameVariationModal } from "@components/Forms/RenameVariationModal";
 import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM } from "@lib/models/common/Slice";
@@ -15,27 +18,43 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 type SidebarProps = {
   slice: ComponentUI;
   variation: VariationSM;
-  updateSlice: (slice: ComponentUI) => void;
+  sliceBuilderState: SliceBuilderState;
+  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
 };
 
+type DialogState =
+  | { type: "ADD_VARIATION" }
+  | { type: "RENAME_VARIATION"; variation: VariationSM }
+  | { type: "DELETE_VARIATION"; variation: VariationSM }
+  | undefined;
+
 export const Sidebar: FC<SidebarProps> = (props) => {
-  const { slice, variation, updateSlice } = props;
+  const { slice, variation, sliceBuilderState, setSliceBuilderState } = props;
 
-  const router = useRouter();
+  const [dialog, setDialog] = useState<DialogState>();
 
   const screenshotChangesModal = useScreenshotChangesModal();
   const { sliceFilterFn, defaultVariationSelector } =
     screenshotChangesModal.modalPayload;
 
-  const [showVariationModal, setShowVariationModal] = useState(false);
-  const { copyVariationSlice } = useSliceMachineActions();
+  const { copyVariationSlice, updateSlice } = useSliceMachineActions();
+  const router = useRouter();
 
   return (
     <>
       <Box flexDirection="column" gap={16}>
         {slice.model.variations.map((v) => (
           <SharedSliceCard
-            action={{ type: "menu" }}
+            action={{
+              type: "menu",
+              onRename: () => {
+                setDialog({ type: "RENAME_VARIATION", variation: v });
+              },
+              onRemove: () => {
+                setDialog({ type: "DELETE_VARIATION", variation: v });
+              },
+              removeDisabled: slice.model.variations.length <= 1,
+            }}
             key={v.id}
             mode="navigation"
             onUpdateScreenshot={() => {
@@ -56,7 +75,7 @@ export const Sidebar: FC<SidebarProps> = (props) => {
         ))}
         <Button
           onClick={() => {
-            setShowVariationModal(true);
+            setDialog({ type: "ADD_VARIATION" });
           }}
           startIcon="add"
           sx={{ bottom: 72, marginInline: 24, position: "sticky" }}
@@ -69,36 +88,62 @@ export const Sidebar: FC<SidebarProps> = (props) => {
         slices={sliceFilterFn([slice])}
         defaultVariationSelector={defaultVariationSelector}
       />
-      <VariationModal
-        initialVariation={variation}
-        isOpen={showVariationModal}
-        onClose={() => {
-          setShowVariationModal(false);
-        }}
-        onSubmit={(id, name, copiedVariation) => {
-          copyVariationSlice(id, name, copiedVariation);
+      {dialog?.type === "RENAME_VARIATION" ? (
+        <RenameVariationModal
+          isOpen
+          onClose={() => {
+            setDialog(undefined);
+          }}
+          slice={slice}
+          variation={dialog.variation}
+          sliceBuilderState={sliceBuilderState}
+          setSliceBuilderState={setSliceBuilderState}
+        />
+      ) : undefined}
+      {dialog?.type === "DELETE_VARIATION" ? (
+        <DeleteVariationModal
+          isOpen
+          onClose={() => {
+            setDialog(undefined);
+          }}
+          slice={slice}
+          variation={dialog.variation}
+          sliceBuilderState={sliceBuilderState}
+          setSliceBuilderState={setSliceBuilderState}
+        />
+      ) : undefined}
+      {dialog?.type === "ADD_VARIATION" ? (
+        <AddVariationModal
+          initialVariation={variation}
+          isOpen
+          onClose={() => {
+            setDialog(undefined);
+          }}
+          onSubmit={(id, name, copiedVariation) => {
+            copyVariationSlice(id, name, copiedVariation);
 
-          // We have to immediately save the new variation to prevent an
-          // infinite loop related to screenshots handling.
-          const newVariation = Variation.copyValue(copiedVariation, id, name);
-          const newSlice = {
-            ...slice,
-            model: {
-              ...slice.model,
-              variations: [...slice.model.variations, newVariation],
-            },
-          };
-          updateSlice(newSlice);
+            // We have to immediately save the new variation to prevent an
+            // infinite loop related to screenshots handling.
+            const newVariation = Variation.copyValue(copiedVariation, id, name);
+            const newSlice = {
+              ...slice,
+              model: {
+                ...slice.model,
+                variations: [...slice.model.variations, newVariation],
+              },
+            };
+            updateSlice(newSlice, setSliceBuilderState);
 
-          const url = SLICES_CONFIG.getBuilderPagePathname({
-            libraryName: newSlice.href,
-            sliceName: newSlice.model.name,
-            variationId: newVariation.id,
-          });
-          void router.replace(url);
-        }}
-        variations={slice.model.variations}
-      />
+            const url = SLICES_CONFIG.getBuilderPagePathname({
+              libraryName: newSlice.href,
+              sliceName: newSlice.model.name,
+              variationId: newVariation.id,
+            });
+            void router.replace(url);
+          }}
+          variations={slice.model.variations}
+        />
+      ) : undefined}
     </>
   );
 };

package/lib/builders/SliceBuilder/index.tsx

@@ -1,7 +1,16 @@
 import { Box, Button } from "@prismicio/editor-ui";
-import React, { useState, useEffect } from "react";
+import {
+  type Dispatch,
+  type FC,
+  type SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 
-import { handleRemoteResponse } from "@src/modules/toaster/utils";
+import {
+  type ToastPayload,
+  handleRemoteResponse,
+} from "@src/modules/toaster/utils";
 
 import FieldZones from "./FieldZones";
 import { Sidebar } from "./Sidebar";
@@ -27,10 +36,7 @@ import { selectIsSimulatorAvailableForFramework } from "@src/modules/environment
 import { isSelectedSliceTouched } from "@src/modules/selectedSlice/selectors";
 import { ComponentWithSliceProps } from "@src/layouts/WithSlice";
 
-export type SliceBuilderState = {
-  loading: boolean;
-  done: boolean;
-};
+export type SliceBuilderState = ToastPayload & { loading: boolean };
 
 export const initialState: SliceBuilderState = {
   loading: false,
@@ -38,63 +44,60 @@ export const initialState: SliceBuilderState = {
 };
 
 const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => {
-  const { openToaster, updateSlice } = useSliceMachineActions();
+  const { openToaster } = useSliceMachineActions();
   const isTouched = useSelector((store: SliceMachineStoreType) =>
     isSelectedSliceTouched(store, slice.from, slice.model.id),
   );
 
   // We need to move this state to somewhere global to update the UI if any action from anywhere save or update to the filesystem I'd guess
-  const [data, setData] = useState<SliceBuilderState>(initialState);
+  const [state, setState] = useState<SliceBuilderState>(initialState);
 
   useEffect(() => {
     if (isTouched) {
-      setData(initialState);
+      setState(initialState);
     }
   }, [isTouched]);
 
   // activate/deactivate Success message
   useEffect(() => {
-    if (data.done) {
-      // @ts-expect-error TS(2345) FIXME: Argument of type '(content: string | React.ReactNo... Remove this comment to see the full error message
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      handleRemoteResponse(openToaster)(data);
+    if (state.done) {
+      handleRemoteResponse(openToaster)(state);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data]);
+  }, [state]);
 
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   if (!variation) return <AppLayout />;
   else
     return (
       <SliceBuilderForVariation
-        updateSlice={(slice) => {
-          updateSlice(slice, setData);
-        }}
+        setState={setState}
         slice={slice}
         variation={variation}
         isTouched={isTouched}
-        data={data}
+        state={state}
       />
     );
 };
 
 type SliceBuilderForVariationProps = {
-  updateSlice: (slice: ComponentUI) => void;
+  setState: Dispatch<SetStateAction<SliceBuilderState>>;
   slice: ComponentUI;
   variation: VariationSM;
   isTouched: boolean;
-  data: SliceBuilderState;
+  state: SliceBuilderState;
 };
-const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
-  updateSlice,
+const SliceBuilderForVariation: FC<SliceBuilderForVariationProps> = ({
+  setState,
   slice,
   variation,
   isTouched,
-  data,
+  state,
 }) => {
   const isSimulatorAvailableForFramework = useSelector(
     selectIsSimulatorAvailableForFramework,
   );
+  const { updateSlice } = useSliceMachineActions();
 
   return (
     <AppLayout>
@@ -107,10 +110,10 @@ const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
             isTouched={!!isTouched}
           />
           <Button
-            loading={data.loading}
-            disabled={!isTouched || data.loading}
+            loading={state.loading}
+            disabled={!isTouched || state.loading}
             onClick={() => {
-              updateSlice(slice);
+              updateSlice(slice, setState);
             }}
             data-cy="builder-save-button"
           >
@@ -128,7 +131,8 @@ const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
           <Sidebar
             slice={slice}
             variation={variation}
-            updateSlice={updateSlice}
+            sliceBuilderState={state}
+            setSliceBuilderState={setState}
           />
           <FieldZones variation={variation} />
         </Box>

package/out/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/412af4286eb0b283.css" as="style"/><link rel="stylesheet" href="/_next/static/css/412af4286eb0b283.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-2d090d3ea4b0e31a.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/aZP9hfVnQfVO9cRmJSs18/_buildManifest.js" defer=""></script><script src="/_next/static/aZP9hfVnQfVO9cRmJSs18/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"aZP9hfVnQfVO9cRmJSs18","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Slice Machine</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/412af4286eb0b283.css" as="style"/><link rel="stylesheet" href="/_next/static/css/412af4286eb0b283.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-5a91622066c7f465.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/hVQ3Yc7gBdqefYnTLZuOw/_buildManifest.js" defer=""></script><script src="/_next/static/hVQ3Yc7gBdqefYnTLZuOw/_ssgManifest.js" defer=""></script></head><body><div id="__next"><style data-emotion="css-global 413pep">html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;color:var(--theme-ui-colors-text);background-color:var(--theme-ui-colors-background);}html.theme-ui-light,.theme-ui-light html{--theme-ui-colors-text:#25252D;--theme-ui-colors-textClear:#6F6E77;--theme-ui-colors-grayLight:#E8E8ED;--theme-ui-colors-hoverBackground:#f2f2f2;--theme-ui-colors-background:#FFF;--theme-ui-colors-backgroundClear:#FFF;--theme-ui-colors-primary:#5D40F7;--theme-ui-colors-purpleLight:#F6F1FC;--theme-ui-colors-purpleLight01:#6548FF1A;--theme-ui-colors-purple12:#F1EEFE;--theme-ui-colors-purpleStrong:#5842C3;--theme-ui-colors-whiteButtonText:#1A1523;--theme-ui-colors-codeBlockBackground:#32275F;--theme-ui-colors-failedConnectText:#86848D;--theme-ui-colors-changesWarning-background:#FFECC7;--theme-ui-colors-changesWarning-color:#5C0C17;--theme-ui-colors-greyIcon:#6F6E77;--theme-ui-colors-greyIconDisabled:#C9D0D8;--theme-ui-colors-missingScreenshotBanner-color:#5C0C17;--theme-ui-colors-missingScreenshotBanner-bg:#FFECC7;--theme-ui-colors-badge-new-bg:#DBEDDB;--theme-ui-colors-badge-new-color:#05644D;--theme-ui-colors-badge-modified-bg:#FFECC7;--theme-ui-colors-badge-modified-color:#5C0C17;--theme-ui-colors-badge-synced-bg:purple12;--theme-ui-colors-badge-synced-color:#5842C3;--theme-ui-colors-badge-deleted-bg:rgba(203, 36, 49, 0.1);--theme-ui-colors-badge-unknown-bg:#F3F5F7;--theme-ui-colors-badge-unknown-color:#9AA4AF;--theme-ui-colors-codeBlockBorder:#545454;--theme-ui-colors-secondary:#F9FAFB;--theme-ui-colors-danger:#CB2431;--theme-ui-colors-highlight:hsl(10, 40%, 90%);--theme-ui-colors-purple:#5B3DF5;--theme-ui-colors-purple08:#5842C3;--theme-ui-colors-muted:#F9F9FB;--theme-ui-colors-icons:#8091A5;--theme-ui-colors-gray:#F8F9FA;--theme-ui-colors-grey01:#F3F5F7;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-grey03:#F4F2F4;--theme-ui-colors-grey04:#9AA4AF;--theme-ui-colors-grey05:#667587;--theme-ui-colors-grey07:#F9F8F9;--theme-ui-colors-grey10:#86848D;--theme-ui-colors-grey12:#1A1523;--theme-ui-colors-greyTransparent:rgba(37, 37, 45, 0.4);--theme-ui-colors-borders:#E4E2E4;--theme-ui-colors-bordersFocused:#6E56CF;--theme-ui-colors-deep:#0E2150;--theme-ui-colors-deep1:#A0ADE7;--theme-ui-colors-lightGreen:#EBF8F1;--theme-ui-colors-lightOrange:#FDF4EC;--theme-ui-colors-darkOrange:#C17C10;--theme-ui-colors-error:#E55737;--theme-ui-colors-success:#3AB97A;--theme-ui-colors-headSection:#fff;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-warning02:#ED811C;--theme-ui-colors-sidebar:#F1F1F4;--theme-ui-colors-link:#6E56CF;--theme-ui-colors-choggleBox:#5163BA;--theme-ui-colors-darkBorder:#DCDBDD;--theme-ui-colors-code-border:#DFE1E5;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;}html.theme-ui-dark,.theme-ui-dark html{--theme-ui-colors-text:#fff;--theme-ui-colors-textClear:#6E707B;--theme-ui-colors-hoverBackground:#202020;--theme-ui-colors-grey02:#E6E6EA;--theme-ui-colors-background:#202022;--theme-ui-colors-backgroundClear:#28282C;--theme-ui-colors-primary:#4E54D7;--theme-ui-colors-secondary:#28282C;--theme-ui-colors-icons:#5D5D71;--theme-ui-colors-gray:#1D1D1F;--theme-ui-colors-borders:#3A3A46;--theme-ui-colors-deep:#28282C;--theme-ui-colors-headSection:#28282C;--theme-ui-colors-warning:#E67E22;--theme-ui-colors-sidebar:#28282C;--theme-ui-colors-code-border:#5D5D6F;--theme-ui-colors-code-blue:#3B41BD;--theme-ui-colors-code-gray:#667587;--theme-ui-colors-code-orange:#EA6D46;--theme-ui-colors-code-green:#3AB97A;--theme-ui-colors-link:#A9A9C6;--theme-ui-colors-choggleBox:#fff;}</style><style data-emotion="css-global h19pgh">*{box-sizing:border-box;}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;line-height:1.5;font-weight:400;}body{margin:0;}</style><style data-emotion="css yvak7d">.css-yvak7d{box-sizing:border-box;margin:0;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:calc(100vh - 57px);width:100vw;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-yvak7d"><style data-emotion="css uqm8ih">.css-uqm8ih{box-sizing:border-box;margin:0;min-width:0;color:var(--theme-ui-colors-primary);overflow:visible;}</style><svg stroke-width="4" viewBox="0 0 32 32" width="48" height="48" fill="none" stroke="currentColor" role="img" id="spinner" class="css-uqm8ih"><title>Loading</title><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" opacity="0.125"></circle><circle stroke-width="4" r="12" cx="16" cy="16" fill="none" stroke-dasharray="20 110"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="750ms" repeatCount="indefinite"></animateTransform></circle></svg></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"hVQ3Yc7gBdqefYnTLZuOw","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>