slice-machine-ui 1.14.0 → 1.14.1-dev-upgrade-legacy.0

package/components/Forms/ConvertLegacySliceModal/FormAsNewVariation.tsx

@@ -0,0 +1,263 @@
+import { useState } from "react";
+import Select from "react-select";
+import { Field, Input, Label } from "theme-ui";
+import { Formik } from "formik";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  ScrollArea,
+  Text,
+  tokens,
+} from "@prismicio/editor-ui";
+
+import { Variation } from "@models/common/Variation";
+import { LibraryUI } from "@models/common/LibraryUI";
+
+import * as styles from "./ConvertLegacySliceModal.css";
+import { FormProps } from "./types";
+
+type FormValues = {
+  libraryID: string;
+  sliceID: string;
+  variationID: string;
+  variationName: string;
+};
+
+const validateAsNewVariationValues = (
+  values: FormValues,
+  libraries: readonly LibraryUI[]
+): Partial<Record<keyof FormValues, string>> => {
+  const errors: Partial<Record<keyof FormValues, string>> = {};
+
+  if (!values.libraryID) {
+    errors.libraryID = "Cannot be empty.";
+  }
+  const library = libraries.find(
+    (library) => library.path === values.libraryID
+  );
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (!errors.variationID && !library) {
+    errors.variationID = "Does not exists.";
+  }
+
+  if (!values.sliceID) {
+    errors.libraryID = "Cannot be empty.";
+  }
+  const slice = library?.components.find(
+    (component) => component.model.id === values.sliceID
+  );
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (!errors.sliceID && !slice) {
+    errors.sliceID = "Does not exists.";
+  }
+
+  if (!values.variationName) {
+    errors.libraryID = "Cannot be empty.";
+  }
+
+  if (!values.variationID) {
+    errors.libraryID = "Cannot be empty.";
+  } else {
+    const variationIDs =
+      slice?.model.variations.map((variation) => variation.id) ?? [];
+
+    if (variationIDs.includes(values.variationID)) {
+      errors.variationID = "Slice variation ID is already taken.";
+    }
+  }
+
+  return errors;
+};
+
+export const FormAsNewVariation: React.FC<FormProps> = ({
+  isOpen,
+  close,
+  onSubmit,
+  isLoading,
+  slice,
+  sliceName,
+  libraries,
+  localSharedSlices,
+}) => {
+  const [inferIDFromName, setInferIDFromName] = useState(true);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => !open && close()}
+      size="small"
+    >
+      <DialogHeader title="Convert to new slice" />
+      <DialogContent>
+        <Formik
+          validateOnChange
+          initialValues={{
+            libraryID: localSharedSlices[0]?.from,
+            sliceID: localSharedSlices[0]?.model.id,
+            variationID: Variation.generateId(slice.key),
+            variationName: sliceName,
+          }}
+          validate={(values) => {
+            return validateAsNewVariationValues(values, libraries);
+          }}
+          onSubmit={(values) => {
+            onSubmit(values);
+          }}
+        >
+          {(formik) => {
+            return (
+              <form
+                id="convert-legacy-slice-modal-as-new-variation"
+                data-cy="convert-legacy-slice-modal-as-new-variation"
+                className={styles.layout.small}
+              >
+                <ScrollArea
+                  style={{
+                    height: "100%",
+                    display: "flex",
+                    gap: tokens.space[12],
+                    paddingInline: tokens.space[24],
+                    paddingBlock: tokens.space[16],
+                  }}
+                >
+                  <div className={styles.layout.small}>
+                    <div>
+                      <Label htmlFor="slice" sx={{ mb: 2 }}>
+                        Target Slice
+                      </Label>
+                      <Select
+                        name="slice"
+                        options={localSharedSlices.map((slice) => ({
+                          value: `${slice.from}::${slice.model.id}`,
+                          label: `${slice.from} > ${slice.model.name} (${slice.model.id})`,
+                        }))}
+                        onChange={(option) => {
+                          if (option) {
+                            const [libraryID, sliceID] =
+                              option.value.split("::");
+                            void formik.setFieldValue("libraryID", libraryID);
+                            void formik.setFieldValue("sliceID", sliceID);
+                          }
+                        }}
+                        defaultValue={{
+                          value: `${formik.values.libraryID}::${formik.values.sliceID}`,
+                          label: `${formik.values.libraryID} > ${localSharedSlices[0]?.model.name} (${formik.values.sliceID})`,
+                        }}
+                        styles={{
+                          option: (provided) => ({
+                            ...provided,
+                            // Color of item text (Dark/Shade-01)
+                            color: "#161618",
+                          }),
+                        }}
+                        theme={(theme) => {
+                          return {
+                            ...theme,
+                            colors: {
+                              ...theme.colors,
+                              // Background of selected item (Gray/Shade-05)
+                              primary: "#E9E8EA",
+                            },
+                          };
+                        }}
+                        menuPortalTarget={document.body}
+                      />
+                    </div>
+                    <div>
+                      <Label
+                        htmlFor="variationName"
+                        sx={{
+                          mb: 2,
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 2,
+                        }}
+                      >
+                        Variation Name
+                        {typeof formik.errors.variationName === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.variationName}
+                          </Text>
+                        ) : null}
+                      </Label>
+                      <Field
+                        autoComplete="off"
+                        id="variationName"
+                        name="variationName"
+                        type="text"
+                        placeholder={sliceName}
+                        as={Input}
+                        maxLength={30}
+                        value={formik.values.variationName}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          void formik.setFieldValue(
+                            "variationName",
+                            e.currentTarget.value
+                          );
+                          if (inferIDFromName) {
+                            void formik.setFieldValue(
+                              "variationID",
+                              Variation.generateId(e.currentTarget.value)
+                            );
+                          }
+                        }}
+                        data-cy="slice-name-input"
+                      />
+                    </div>
+                    <div>
+                      <Label
+                        htmlFor="variationID"
+                        sx={{
+                          mb: 2,
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 2,
+                        }}
+                      >
+                        Variation ID
+                        {typeof formik.errors.variationID === "string" ? (
+                          <Text variant="small" color="tomato10">
+                            {formik.errors.variationID}
+                          </Text>
+                        ) : null}
+                      </Label>
+                      <Field
+                        autoComplete="off"
+                        id="variationID"
+                        name="variationID"
+                        type="text"
+                        placeholder={Variation.generateId(slice.key)}
+                        as={Input}
+                        maxLength={30}
+                        value={formik.values.variationID}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          setInferIDFromName(false);
+                          void formik.setFieldValue(
+                            "variationID",
+                            Variation.generateId(e.currentTarget.value)
+                          );
+                        }}
+                        data-cy="slice-name-input"
+                      />
+                    </div>
+                  </div>
+                </ScrollArea>
+                <DialogActions
+                  ok={{
+                    text: "Convert",
+                    onClick: () => void formik.submitForm(),
+                    loading: isLoading,
+                    disabled: !formik.isValid,
+                  }}
+                  cancel={{ text: "Cancel" }}
+                />
+              </form>
+            );
+          }}
+        </Formik>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/components/Forms/ConvertLegacySliceModal/FormMergeWithIdentical.tsx

@@ -0,0 +1,120 @@
+import Select from "react-select";
+import { Label } from "theme-ui";
+import { Formik } from "formik";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  ScrollArea,
+  tokens,
+} from "@prismicio/editor-ui";
+
+import * as styles from "./ConvertLegacySliceModal.css";
+import { FormProps } from "./types";
+
+export const FormMergeWithIdentical: React.FC<FormProps> = ({
+  isOpen,
+  close,
+  onSubmit,
+  isLoading,
+  identicalSlices,
+}) => {
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => !open && close()}
+      size="small"
+    >
+      <DialogHeader title="Convert to new slice" />
+      <DialogContent>
+        <Formik
+          validateOnChange
+          initialValues={{
+            path: identicalSlices[0]?.path ?? "",
+          }}
+          validate={(values) => {
+            if (!values.path) {
+              return { path: "Cannot be empty." };
+            }
+          }}
+          onSubmit={(values) => {
+            const [libraryID, sliceID, variationID] = values.path.split("::");
+            onSubmit({ libraryID, sliceID, variationID });
+          }}
+        >
+          {(formik) => {
+            return (
+              <form
+                id="convert-legacy-slice-modal-merge-with-identical"
+                data-cy="convert-legacy-slice-modal-merge-with-identical"
+                className={styles.layout.small}
+              >
+                <ScrollArea
+                  style={{
+                    height: "100%",
+                    display: "flex",
+                    gap: tokens.space[12],
+                    paddingInline: tokens.space[24],
+                    paddingBlock: tokens.space[16],
+                  }}
+                >
+                  <div className={styles.layout.small}>
+                    <div>
+                      <Label htmlFor="path" sx={{ mb: 2 }}>
+                        Merge with
+                      </Label>
+                      <Select
+                        name="path"
+                        options={identicalSlices.map((v) => ({
+                          value: v.path,
+                          label: v.path.split("::").join(" > "),
+                        }))}
+                        onChange={(option) =>
+                          option
+                            ? void formik.setFieldValue("path", option.value)
+                            : null
+                        }
+                        defaultValue={{
+                          value: formik.values.path,
+                          label: formik.values.path.split("::").join(" > "),
+                        }}
+                        styles={{
+                          option: (provided) => ({
+                            ...provided,
+                            // Color of item text (Dark/Shade-01)
+                            color: "#161618",
+                          }),
+                        }}
+                        theme={(theme) => {
+                          return {
+                            ...theme,
+                            colors: {
+                              ...theme.colors,
+                              // Background of selected item (Gray/Shade-05)
+                              primary: "#E9E8EA",
+                            },
+                          };
+                        }}
+                        menuPortalTarget={document.body}
+                      />
+                    </div>
+                  </div>
+                </ScrollArea>
+                <DialogActions
+                  ok={{
+                    text: "Convert",
+                    onClick: () => void formik.submitForm(),
+                    loading: isLoading,
+                    disabled: !formik.isValid,
+                  }}
+                  cancel={{ text: "Cancel" }}
+                />
+              </form>
+            );
+          }}
+        </Formik>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/components/Forms/ConvertLegacySliceModal/index.tsx

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

package/components/Forms/ConvertLegacySliceModal/types.ts

@@ -0,0 +1,47 @@
+import { CompositeSlice } from "@prismicio/types-internal/lib/customtypes";
+
+import { LibraryUI } from "@models/common/LibraryUI";
+import { ComponentUI } from "@models/common/ComponentUI";
+import { SliceZoneSlice } from "@models/common/CustomType/sliceZone";
+
+export type ConvertLegacySliceModalProps = {
+  slice: { key: string; value: CompositeSlice };
+  slices: readonly SliceZoneSlice[];
+  path: {
+    customTypeID: string;
+    tabID: string;
+    sliceZoneID: string;
+  };
+};
+
+export type ConvertLegacySliceAndTrackArgs = {
+  libraryID: string;
+  sliceID: string;
+  variationID?: string;
+  variationName?: string;
+};
+
+const types = [
+  "as_new_slice",
+  "as_new_variation",
+  "merge_with_identical",
+] as const;
+export type Type = (typeof types)[number];
+
+export type IdenticalSlice = {
+  libraryID: string;
+  sliceID: string;
+  variationID: string;
+  path: string;
+};
+
+export type FormProps = {
+  isOpen: boolean;
+  close: () => void;
+  onSubmit: (args: ConvertLegacySliceAndTrackArgs) => void;
+  isLoading: boolean;
+  sliceName: string;
+  libraries: readonly LibraryUI[];
+  localSharedSlices: ComponentUI[];
+  identicalSlices: IdenticalSlice[];
+} & Pick<ConvertLegacySliceModalProps, "path" | "slice">;

package/lib/builders/CustomTypeBuilder/SliceZone/List.tsx

@@ -16,12 +16,18 @@ import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMess
 interface SlicesListProps {
   format: CustomTypeFormat;
   slices: ReadonlyArray<SliceZoneSlice>;
+  path: {
+    customTypeID: string;
+    tabID: string;
+    sliceZoneID: string;
+  };
   onRemoveSharedSlice: (sliceId: string) => void;
 }
 
 export const SlicesList: React.FC<SlicesListProps> = ({
   slices,
   format,
+  path,
   onRemoveSharedSlice,
 }) => {
   const hasLegacySlices = slices.some((slice) => slice.type !== "SharedSlice");
@@ -45,19 +51,21 @@ export const SlicesList: React.FC<SlicesListProps> = ({
     <Grid
       elems={slices}
       defineElementKey={(slice: SliceZoneSlice) => {
-        if (slice.type === "Slice") {
+        if (slice.type !== "SharedSlice") {
           // NonsharedSlice
           return (slice.payload as NonSharedSliceInSliceZone).key;
         }
         return (slice.payload as ComponentUI).model.name;
       }}
       renderElem={(slice: SliceZoneSlice) => {
-        if (slice.type === "Slice") {
-          return NonSharedSlice.render({
+        if (slice.type !== "SharedSlice") {
+          return NonSharedSlice.Render({
             slice: slice.payload as NonSharedSliceInSliceZone,
+            slices,
+            path,
           });
         }
-        return SharedSlice.render({
+        return SharedSlice.Render({
           slice: slice.payload as ComponentUI,
           StatusOrCustom: () => (
             // Prevent the Grid to redirect to the slice builder page

package/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx

@@ -24,7 +24,7 @@ const UpdateSliceZoneModalList: React.FC<{
             (s) => s.model.id === slice.model.id
           );
 
-          return SharedSlice.render({
+          return SharedSlice.Render({
             slice: slice,
             Wrapper: ({ slice, children, sx }) => {
               return (

package/lib/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -161,6 +161,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     .filter((e) => e.type === "Slice")
     .map((e) => (e.payload as NonSharedSliceInSliceZone).key);
 
+  const path = useMemo(() => {
+    return {
+      customTypeID: customType.id,
+      tabID: tabId,
+      sliceZoneID: sliceZone?.key as string,
+    };
+  }, [customType, tabId, sliceZone]);
   const availableSlicesToAdd = availableSlices.filter(
     (slice) =>
       !sharedSlicesInSliceZone.some(
@@ -267,6 +274,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
             <SlicesList
               slices={slicesInSliceZone}
               format={customType.format}
+              path={path}
               onRemoveSharedSlice={onRemoveSharedSlice}
             />
           </BaseStyles>

package/lib/models/ui/Slice/index.tsx

@@ -21,6 +21,12 @@ import { Button } from "@components/Button";
 import { KebabMenuDropdown } from "@components/KebabMenuDropdown";
 import ReactTooltip from "react-tooltip";
 import style from "./LegacySliceTooltip.module.css";
+import { ConvertLegacySliceModal } from "@components/Forms/ConvertLegacySliceModal";
+import {
+  NonSharedSliceInSliceZone,
+  SliceZoneSlice,
+} from "@lib/models/common/CustomType/sliceZone";
+import { CompositeSlice } from "@prismicio/types-internal/lib/customtypes";
 
 const defaultSx = (sx: ThemeUIStyleObject = {}): ThemeUICSSObject => ({
   bg: "white",
@@ -210,7 +216,7 @@ const isDeleted = (statusOrCustom: StatusOrCustom): boolean =>
   "status" in statusOrCustom && statusOrCustom.status === ModelStatus.Deleted;
 
 export const SharedSlice = {
-  render({
+  Render({
     showActions,
     slice,
     Wrapper,
@@ -311,13 +317,20 @@ export const SharedSlice = {
 };
 
 export const NonSharedSlice = {
-  render({
+  Render({
     slice,
+    slices,
     sx,
+    path,
   }: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    slice: { key: string; value: any };
+    slice: NonSharedSliceInSliceZone;
+    slices: readonly SliceZoneSlice[];
     sx?: ThemeUIStyleObject;
+    path: {
+      customTypeID: string;
+      tabID: string;
+      sliceZoneID: string;
+    };
   }) {
     const Wrapper = WrapperByType[WrapperType.nonClickable];
 
@@ -374,11 +387,9 @@ export const NonSharedSlice = {
                   lineHeight: "16px",
                 }}
               >
-                This Slice was created with the Legacy Builder, and is
-                incompatible with Slice Machine. You cannot edit, push, or
-                delete it in Slice Machine. In order to proceed, manually remove
-                the Slice from your type model. Then create a new Slice with the
-                same fields using Slice Machine.
+                {slice.value.type === "Slice"
+                  ? "This Slice was created with the Legacy Builder. It needs to be converted first to be used within Slice Machine."
+                  : "This Slice was created with the Legacy Builder and cannot be yet converted to be used within Slice Machine."}
               </Text>
             </ReactTooltip>
           </ReactTooltipPortal>
@@ -392,30 +403,45 @@ export const NonSharedSlice = {
           />
           <Flex
             p={3}
-            sx={{
-              flexDirection: "column",
-            }}
+            sx={{ justifyContent: "space-between", alignItems: "center" }}
           >
-            <TextWithTooltip
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/strict-boolean-expressions
-              text={slice?.value?.fieldset || slice.key}
-              as="h6"
-              sx={{
-                fontWeight: "600 !important",
-                maxWidth: "80%",
-                lineHeight: "24px !important",
-                color: "grey10",
-              }}
-            />
             <Flex
               sx={{
-                height: "28px",
-                justifyContent: "center",
                 flexDirection: "column",
+                flex: "1 1 auto",
               }}
             >
-              <SliceVariations numberOfVariations={1} />
+              <TextWithTooltip
+                text={
+                  slice.value.type === "Slice"
+                    ? slice?.value?.fieldset ?? slice.key
+                    : slice.key
+                }
+                as="h6"
+                sx={{
+                  fontWeight: "600 !important",
+                  maxWidth: "80%",
+                  lineHeight: "24px !important",
+                  color: "grey10",
+                }}
+              />
+              <Flex
+                sx={{
+                  height: "28px",
+                  justifyContent: "center",
+                  flexDirection: "column",
+                }}
+              >
+                <SliceVariations numberOfVariations={1} />
+              </Flex>
             </Flex>
+            {slice.value.type === "Slice" ? (
+              <ConvertLegacySliceModal
+                slice={slice as { key: string; value: CompositeSlice }}
+                slices={slices}
+                path={path}
+              />
+            ) : null}
           </Flex>
         </Themecard>
       </Wrapper>

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/fe2a2a1cbf3b4092.css" as="style"/><link rel="stylesheet" href="/_next/static/css/fe2a2a1cbf3b4092.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-250ad97f7f362ab4.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/98p2ftWwipTg4xas9uSc6/_buildManifest.js" defer=""></script><script src="/_next/static/98p2ftWwipTg4xas9uSc6/_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":"98p2ftWwipTg4xas9uSc6","runtimeConfig":{"sentryEnvironment":"production"},"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/fe2a2a1cbf3b4092.css" as="style"/><link rel="stylesheet" href="/_next/static/css/fe2a2a1cbf3b4092.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-cdcc9574e096e708.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/HJothAZ-ufia3zK-uZgiR/_buildManifest.js" defer=""></script><script src="/_next/static/HJothAZ-ufia3zK-uZgiR/_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":"HJothAZ-ufia3zK-uZgiR","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>