From 94609f96304ad0d086fc95cb5bead9730ad8d30a Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 8 Apr 2024 14:23:56 +0100
Subject: [PATCH 01/17] WIP

---
 .../css/components/fieldtypes/replicator.css  |  2 +-
 resources/js/app.js                           |  1 +
 resources/js/components/Sortables.js          | 28 +++++++++++++++++++
 resources/js/components/Statamic.js           |  6 ++++
 .../fieldtypes/replicator/Replicator.vue      |  9 ++++--
 .../js/components/sortable/SortableList.vue   | 10 +++++--
 src/Fieldtypes/Replicator.php                 |  1 +
 7 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/components/Sortables.js

diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 55b54cc677..1d0ae05cd5 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .replicator-set-container {
-    @apply outline-none;
+    @apply outline-none min-h-[10px];
 }
 
 .replicator-set {
diff --git a/resources/js/app.js b/resources/js/app.js
index 968c30a852..47595f5c9a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -67,6 +67,7 @@ Vue.prototype.$echo = Statamic.$echo;
 Vue.prototype.$bard = Statamic.$bard;
 Vue.prototype.$keys = Statamic.$keys;
 Vue.prototype.$reveal = Statamic.$reveal;
+Vue.prototype.$sortables = Statamic.$sortables;
 
 import Moment from 'moment';
 window.moment = Vue.moment = Vue.prototype.$moment = Moment;
diff --git a/resources/js/components/Sortables.js b/resources/js/components/Sortables.js
new file mode 100644
index 0000000000..d1e3f7abce
--- /dev/null
+++ b/resources/js/components/Sortables.js
@@ -0,0 +1,28 @@
+import { Sortable } from '@shopify/draggable'
+
+class Sortables {
+    constructor() {
+        this.instances = {};
+    }
+
+    connect(id, container, options) {
+        if (!this.instances[id]) {
+            this.instances[id] = new Sortable(container, options);
+        } else {
+            this.instances[id].addContainer(container);
+        }
+        return this.instances[id];
+    }
+
+    disconnect(id, container) {
+        if (this.instances[id]) {
+            this.instances[id].removeContainer(container);
+            if (this.instances[id].containers.length === 0) {
+                this.instances[id].destroy();
+                delete this.instances[id];
+            }
+        }
+    }
+}
+
+export default Sortables;
diff --git a/resources/js/components/Statamic.js b/resources/js/components/Statamic.js
index 75d6d71404..0ec2e9bdc0 100644
--- a/resources/js/components/Statamic.js
+++ b/resources/js/components/Statamic.js
@@ -4,6 +4,7 @@ import Bard from './Bard';
 import Keys from './keys/Keys';
 import Hooks from './Hooks';
 import Reveal from './Reveal';
+import Sortables from './Sortables';
 import Components from './Components';
 import FieldConditions from './FieldConditions';
 import Callbacks from './Callbacks';
@@ -12,6 +13,7 @@ const bard = new Bard;
 const keys = new Keys;
 const hooks = new Hooks;
 const reveal = new Reveal;
+const sortables = new Sortables;
 const components = new Components;
 const conditions = new FieldConditions;
 const callbacks = new Callbacks;
@@ -55,6 +57,10 @@ export default new Vue({
             return reveal;
         },
 
+        $sortables() {
+            return sortables;
+        },
+
         $conditions() {
             return conditions;
         },
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 3f7d4cb216..6c3c8ac664 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -43,6 +43,7 @@
         <sortable-list
             :value="value"
             :vertical="true"
+            :group="sortableGroup"
             :item-class="sortableItemClass"
             :handle-class="sortableHandleClass"
             append-to="body"
@@ -160,12 +161,16 @@ export default {
             return this.config.sets;
         },
 
+        sortableGroup() {
+            return this.meta.sortableGroup;
+        },
+
         sortableItemClass() {
-            return `${this.name}-sortable-item`;
+            return `${this.sortableGroup}-sortable-item`;
         },
 
         sortableHandleClass() {
-            return `${this.name}-sortable-handle`;
+            return `${this.sortableGroup}-sortable-handle`;
         },
 
         storeState() {
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index ce1cc588dc..60648e4e71 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -1,5 +1,5 @@
 <script>
-import { Sortable, Plugins } from '@shopify/draggable'
+import { Plugins } from '@shopify/draggable'
 
 function move(items, oldIndex, newIndex) {
     const itemRemovedArray = [
@@ -20,6 +20,9 @@ export default {
         value: {
             required: true,
         },
+        group: {
+            default: null,
+        },
         itemClass: {
             default: 'sortable-item',
         },
@@ -63,6 +66,7 @@ export default {
     data() {
         return {
             sortable: null,
+            sortableId: this.group || uniqid(),
         }
     },
 
@@ -120,7 +124,7 @@ export default {
 
     methods: {
         setupSortableList() {
-            this.sortable = new Sortable(this.$el, this.computedOptions);
+            this.sortable = this.$sortables.connect(this.sortableId, this.$el, this.computedOptions);
 
             this.sortable.on('drag:start', () => this.$emit('dragstart'));
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
@@ -139,7 +143,7 @@ export default {
         },
 
         destroySortableList() {
-            this.sortable.destroy()
+            this.$sortables.disconnect(this.sortableId, this.$el, this.computedOptions);
         },
     },
 
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index a437022e07..1e5ca7bb8d 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -224,6 +224,7 @@ public function preload()
             'defaults' => $defaults,
             'collapsed' => [],
             'previews' => $previews,
+            'sortableGroup' => implode('-', $this->field->handlePath()),
         ];
     }
 

From caa85bab1c880405fa46f6f595b95d5f999a8316 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 24 Jun 2024 20:13:43 +0100
Subject: [PATCH 02/17] WIP

---
 .../js/components/fieldtypes/replicator/Replicator.vue | 10 +++++-----
 src/Fieldtypes/Replicator.php                          |  8 +++++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 78ab350b11..17eda3f40d 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -43,7 +43,7 @@
         <sortable-list
             :value="value"
             :vertical="true"
-            :group="sortableGroup"
+            :group="groupKey"
             :item-class="sortableItemClass"
             :handle-class="sortableHandleClass"
             append-to="body"
@@ -162,16 +162,16 @@ export default {
             return this.config.sets;
         },
 
-        sortableGroup() {
-            return this.meta.sortableGroup;
+        groupKey() {
+            return this.meta.groupKey;
         },
 
         sortableItemClass() {
-            return `${this.sortableGroup}-sortable-item`;
+            return `${this.groupKey}-sortable-item`;
         },
 
         sortableHandleClass() {
-            return `${this.sortableGroup}-sortable-handle`;
+            return `${this.groupKey}-sortable-handle`;
         },
 
         storeState() {
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 65b3de028a..388a8eac2c 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -241,7 +241,7 @@ public function preload()
             'defaults' => $defaults,
             'collapsed' => [],
             'previews' => $previews,
-            'sortableGroup' => implode('-', $this->field->handlePath()),
+            'groupKey' => $this->groupKey(),
         ];
     }
 
@@ -330,4 +330,10 @@ public function toQueryableValue($value)
     {
         return empty($value) ? null : $value;
     }
+
+    protected function groupKey()
+    {
+        // @todo This should be refactored into a list of allowed set config hashes, if possible.
+        return md5(serialize($this->field->config('sets')));
+    }
 }

From 8071ee21530939bb5f23df459025bbcd1c0a273f Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Mon, 24 Jun 2024 21:21:14 +0100
Subject: [PATCH 03/17] WIP

---
 .../js/components/sortable/SortableList.vue   | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 60648e4e71..6968152897 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -1,19 +1,25 @@
 <script>
 import { Plugins } from '@shopify/draggable'
 
-function move(items, oldIndex, newIndex) {
-    const itemRemovedArray = [
-        ...items.slice(0, oldIndex),
-        ...items.slice(oldIndex + 1, items.length)
+function add(items, item, index) {
+    return [
+        ...items.slice(0, index),
+        item,
+        ...items.slice(index, items.length)
     ]
+}
 
+function remove(items, index) {
     return [
-        ...itemRemovedArray.slice(0, newIndex),
-        items[oldIndex],
-        ...itemRemovedArray.slice(newIndex, itemRemovedArray.length)
+        ...items.slice(0, index),
+        ...items.slice(index + 1, items.length)
     ]
 }
 
+function move(items, oldIndex, newIndex) {
+    return add(remove(items, oldIndex), items[oldIndex], newIndex);
+}
+
 export default {
 
     props: {
@@ -129,8 +135,14 @@ export default {
             this.sortable.on('drag:start', () => this.$emit('dragstart'));
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
 
-            this.sortable.on('sortable:stop', ({ oldIndex, newIndex }) => {
-                this.$emit('input', move(this.value, oldIndex, newIndex))
+            this.sortable.on('sortable:stop', ({ newContainer, oldContainer, oldIndex, newIndex }) => {
+                if (newContainer === this.$el && oldContainer === this.$el) {
+                    this.$emit('input', move(this.value, oldIndex, newIndex));
+                } else if (newContainer === this.$el) {
+                    this.$emit('input', add(this.value, oldContainer.__vue__.value[oldIndex], newIndex));
+                } else if (oldContainer === this.$el) {
+                    this.$emit('input', remove(this.value, oldIndex));
+                }
             })
 
             this.$on('hook:destroyed', () => {

From f0f6cf6265952c34828d9cab8857bdcd3fbaec1b Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 28 Jun 2024 12:43:16 +0100
Subject: [PATCH 04/17] WIP

---
 .../css/components/fieldtypes/replicator.css  |  3 +-
 resources/js/bootstrap/globals.js             | 19 ++++++
 resources/js/components/Sortables.js          | 28 --------
 resources/js/components/Statamic.js           |  6 --
 .../fieldtypes/replicator/Replicator.vue      | 61 ++++++++++++-----
 .../components/fieldtypes/replicator/Set.vue  |  2 +-
 .../js/components/sortable/SortableList.vue   | 66 ++++++++++---------
 7 files changed, 102 insertions(+), 83 deletions(-)
 delete mode 100644 resources/js/components/Sortables.js

diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 136c3aaa70..15fbc047a1 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -3,7 +3,8 @@
    ========================================================================== */
 
 .replicator-set-container {
-    @apply outline-none min-h-[10px];
+    @apply outline-none;
+    min-height: 1rem;
 }
 
 .replicator-set {
diff --git a/resources/js/bootstrap/globals.js b/resources/js/bootstrap/globals.js
index aca3362eb7..b217596a2a 100644
--- a/resources/js/bootstrap/globals.js
+++ b/resources/js/bootstrap/globals.js
@@ -138,3 +138,22 @@ export function str_slug(string) {
 export function snake_case(string) {
     return Statamic.$slug.separatedBy('_').create(string);
 }
+
+export function arrayAdd(items, item, index) {
+    return [
+        ...items.slice(0, index),
+        item,
+        ...items.slice(index, items.length)
+    ]
+}
+
+export function arrayRemove(items, index) {
+    return [
+        ...items.slice(0, index),
+        ...items.slice(index + 1, items.length)
+    ]
+}
+
+export function arrayMove(items, oldIndex, newIndex) {
+    return arrayAdd(arrayRemove(items, oldIndex), items[oldIndex], newIndex);
+}
\ No newline at end of file
diff --git a/resources/js/components/Sortables.js b/resources/js/components/Sortables.js
deleted file mode 100644
index d1e3f7abce..0000000000
--- a/resources/js/components/Sortables.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Sortable } from '@shopify/draggable'
-
-class Sortables {
-    constructor() {
-        this.instances = {};
-    }
-
-    connect(id, container, options) {
-        if (!this.instances[id]) {
-            this.instances[id] = new Sortable(container, options);
-        } else {
-            this.instances[id].addContainer(container);
-        }
-        return this.instances[id];
-    }
-
-    disconnect(id, container) {
-        if (this.instances[id]) {
-            this.instances[id].removeContainer(container);
-            if (this.instances[id].containers.length === 0) {
-                this.instances[id].destroy();
-                delete this.instances[id];
-            }
-        }
-    }
-}
-
-export default Sortables;
diff --git a/resources/js/components/Statamic.js b/resources/js/components/Statamic.js
index 02defad184..b8d570ab19 100644
--- a/resources/js/components/Statamic.js
+++ b/resources/js/components/Statamic.js
@@ -4,7 +4,6 @@ import Bard from './Bard';
 import Keys from './keys/Keys';
 import Hooks from './Hooks';
 import Reveal from './Reveal';
-import Sortables from './Sortables';
 import Components from './Components';
 import FieldConditions from './FieldConditions';
 import Callbacks from './Callbacks';
@@ -14,7 +13,6 @@ const bard = new Bard;
 const keys = new Keys;
 const hooks = new Hooks;
 const reveal = new Reveal;
-const sortables = new Sortables;
 const components = new Components;
 const conditions = new FieldConditions;
 const callbacks = new Callbacks;
@@ -59,10 +57,6 @@ export default new Vue({
             return reveal;
         },
 
-        $sortables() {
-            return sortables;
-        },
-
         $conditions() {
             return conditions;
         },
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 17eda3f40d..2a4a241877 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -43,16 +43,17 @@
         <sortable-list
             :value="value"
             :vertical="true"
-            :group="groupKey"
-            :item-class="sortableItemClass"
-            :handle-class="sortableHandleClass"
+            group="replicator-fieldtype"
+            :group-validator="sortableGroupValidator"
+            item-class="replicator-sortable-item"
+            handle-class="replicator-sortable-handle"
             append-to="body"
             constrain-dimensions
-            @input="sorted($event)"
+            @sortablestop="sorted($event)"
             @dragstart="$emit('focus')"
             @dragend="$emit('blur')"
         >
-            <div slot-scope="{}" class="replicator-set-container">
+            <div slot-scope="{}" class="replicator-set-container" ref="sortable">
                 <replicator-set
                     v-for="(set, index) in value"
                     :key="set._id"
@@ -61,8 +62,8 @@
                     :meta="meta.existing[set._id]"
                     :config="setConfig(set.type)"
                     :parent-name="name"
-                    :sortable-item-class="sortableItemClass"
-                    :sortable-handle-class="sortableHandleClass"
+                    sortable-item-class="replicator-sortable-item"
+                    sortable-handle-class="replicator-sortable-handle"
                     :is-read-only="isReadOnly"
                     :collapsed="collapsed.includes(set._id)"
                     :field-path-prefix="fieldPathPrefix || handle"
@@ -118,6 +119,7 @@ import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
 import reduce from 'underscore/modules/reduce';
+import { closestVm } from '../../../bootstrap/globals';
 
 export default {
 
@@ -166,14 +168,6 @@ export default {
             return this.meta.groupKey;
         },
 
-        sortableItemClass() {
-            return `${this.groupKey}-sortable-item`;
-        },
-
-        sortableHandleClass() {
-            return `${this.groupKey}-sortable-handle`;
-        },
-
         storeState() {
             return this.$store.state.publish[this.storeName] || {};
         },
@@ -201,8 +195,30 @@ export default {
             this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
-        sorted(value) {
-            this.update(value);
+        sorted({ oldIndex, newIndex, oldContainer, newContainer }) {
+            if (newContainer === this.$refs.sortable && oldContainer === this.$refs.sortable) {
+                // Set moved within this replicator
+                this.update(arrayMove(this.value, oldIndex, newIndex));
+            } else if (newContainer === this.$refs.sortable) {
+                // Set moved into this replicator
+                const oldVm = closestVm(oldContainer, 'replicator-fieldtype');
+                const set = oldVm.value[oldIndex];
+                const meta = oldVm.meta.existing[set._id];
+                const previews = oldVm.previews[set._id];
+                this.updateSetPreviews(set._id, previews);
+                this.updateSetMeta(set._id, meta);
+                this.update(arrayAdd(this.value, set, newIndex));
+                if (oldVm.collapsed.includes(set._id)) {
+                    this.collapseSet(set._id);
+                } else {
+                    this.expandSet(set._id);
+                }
+            } else if (oldContainer === this.$refs.sortable) {
+                // Set moved out of this replicator
+                const set = this.value[oldIndex];
+                this.removeSetMeta(set._id);
+                this.update(arrayRemove(this.value, oldIndex)); 
+            }
         },
 
         addSet(handle, index) {
@@ -290,6 +306,17 @@ export default {
 
             return Object.keys(this.storeState.errors ?? []).some(handle => handle.startsWith(prefix));
         },
+
+        sortableGroupValidator({ sourceContainer, overContainer, source }) {
+            if (overContainer !== this.$refs.sortable || sourceContainer === this.$refs.sortable) {
+                return true;
+            }
+            if (!this.canAddSet) {
+                return false;
+            }
+            return _.pluck(this.setConfigs, 'handle').includes(source.dataset.handle);
+        },
+
     },
 
     mounted() {
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 47ee202824..d362371bc1 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div :class="sortableItemClass">
+    <div :class="sortableItemClass" :data-handle="config.handle">
         <slot name="picker" />
         <div class="replicator-set" :class="{ 'has-error': this.hasError }">
 
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 6968152897..efc9d083e2 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -1,23 +1,23 @@
 <script>
-import { Plugins } from '@shopify/draggable'
-
-function add(items, item, index) {
-    return [
-        ...items.slice(0, index),
-        item,
-        ...items.slice(index, items.length)
-    ]
+import { Sortable, Plugins } from '@shopify/draggable'
+
+const instances = {};
+function connect(id, container, options) {
+    if (!instances[id]) {
+        instances[id] = new Sortable(container, options);
+    } else {
+        instances[id].addContainer(container);
+    }
+    return instances[id];
 }
-
-function remove(items, index) {
-    return [
-        ...items.slice(0, index),
-        ...items.slice(index + 1, items.length)
-    ]
-}
-
-function move(items, oldIndex, newIndex) {
-    return add(remove(items, oldIndex), items[oldIndex], newIndex);
+function disconnect(id, container) {
+    if (instances[id]) {
+        instances[id].removeContainer(container);
+        if (instances[id].containers.length === 0) {
+            instances[id].destroy();
+            delete instances[id];
+        }
+    }
 }
 
 export default {
@@ -29,6 +29,9 @@ export default {
         group: {
             default: null,
         },
+        groupValidator: {
+            default: null,
+        },
         itemClass: {
             default: 'sortable-item',
         },
@@ -72,7 +75,7 @@ export default {
     data() {
         return {
             sortable: null,
-            sortableId: this.group || uniqid(),
+            instanceId: this.group || uniqid(),
         }
     },
 
@@ -130,32 +133,35 @@ export default {
 
     methods: {
         setupSortableList() {
-            this.sortable = this.$sortables.connect(this.sortableId, this.$el, this.computedOptions);
+            this.sortable = connect(this.instanceId, this.$el, this.computedOptions);
 
             this.sortable.on('drag:start', () => this.$emit('dragstart'));
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
 
-            this.sortable.on('sortable:stop', ({ newContainer, oldContainer, oldIndex, newIndex }) => {
-                if (newContainer === this.$el && oldContainer === this.$el) {
-                    this.$emit('input', move(this.value, oldIndex, newIndex));
-                } else if (newContainer === this.$el) {
-                    this.$emit('input', add(this.value, oldContainer.__vue__.value[oldIndex], newIndex));
-                } else if (oldContainer === this.$el) {
-                    this.$emit('input', remove(this.value, oldIndex));
-                }
+            this.sortable.on('sortable:stop', (event) => {
+                this.$emit('input', arrayMove(this.value, event.oldIndex, event.newIndex));
+                this.$emit('sortablestop', event);
             })
 
             this.$on('hook:destroyed', () => {
-                this.sortable.destroy()
+                this.destroySortableList();
             })
 
             if (this.mirror === false) {
                 this.sortable.on('mirror:create', (e) => e.cancel());
             }
+
+            if (this.group && this.groupValidator) {
+                this.sortable.on('sortable:sort', (event) => {
+                    if (!this.groupValidator(event.dragEvent)) {
+                        event.cancel();
+                    }
+                });
+            }
         },
 
         destroySortableList() {
-            this.$sortables.disconnect(this.sortableId, this.$el, this.computedOptions);
+            disconnect(this.instanceId, this.$el);
         },
     },
 

From a121818d3fa7175232125df841090557a73ac279 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 28 Jun 2024 12:48:53 +0100
Subject: [PATCH 05/17] WIP

---
 resources/js/app.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index a927504489..5e7a78fcfe 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -67,7 +67,6 @@ Vue.prototype.$echo = Statamic.$echo;
 Vue.prototype.$bard = Statamic.$bard;
 Vue.prototype.$keys = Statamic.$keys;
 Vue.prototype.$reveal = Statamic.$reveal;
-Vue.prototype.$sortables = Statamic.$sortables;
 Vue.prototype.$slug = Statamic.$slug;
 
 import Moment from 'moment';

From c156f58829364b8e214ee0c69f681eca827b4e2c Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 28 Jun 2024 13:52:33 +0100
Subject: [PATCH 06/17] WIP

---
 .../fieldtypes/replicator/Replicator.vue      |  4 +-
 .../js/components/sortable/SortableList.vue   | 46 ++++++++++---------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 2a4a241877..afd5604b02 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -307,8 +307,10 @@ export default {
             return Object.keys(this.storeState.errors ?? []).some(handle => handle.startsWith(prefix));
         },
 
-        sortableGroupValidator({ sourceContainer, overContainer, source }) {
+        sortableGroupValidator({ dragEvent }) {
+            const { sourceContainer, overContainer, source } = dragEvent;
             if (overContainer !== this.$refs.sortable || sourceContainer === this.$refs.sortable) {
+                // Set dragged over another replicator or within this replicator
                 return true;
             }
             if (!this.canAddSet) {
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index efc9d083e2..031436f456 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -2,23 +2,6 @@
 import { Sortable, Plugins } from '@shopify/draggable'
 
 const instances = {};
-function connect(id, container, options) {
-    if (!instances[id]) {
-        instances[id] = new Sortable(container, options);
-    } else {
-        instances[id].addContainer(container);
-    }
-    return instances[id];
-}
-function disconnect(id, container) {
-    if (instances[id]) {
-        instances[id].removeContainer(container);
-        if (instances[id].containers.length === 0) {
-            instances[id].destroy();
-            delete instances[id];
-        }
-    }
-}
 
 export default {
 
@@ -132,15 +115,16 @@ export default {
     },
 
     methods: {
+
         setupSortableList() {
-            this.sortable = connect(this.instanceId, this.$el, this.computedOptions);
+            this.sortable = this.connectInstace(this.instanceId, this.$el, this.computedOptions);
 
             this.sortable.on('drag:start', () => this.$emit('dragstart'));
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
 
             this.sortable.on('sortable:stop', (event) => {
-                this.$emit('input', arrayMove(this.value, event.oldIndex, event.newIndex));
                 this.$emit('sortablestop', event);
+                this.$emit('input', arrayMove(this.value, event.oldIndex, event.newIndex));
             })
 
             this.$on('hook:destroyed', () => {
@@ -153,7 +137,7 @@ export default {
 
             if (this.group && this.groupValidator) {
                 this.sortable.on('sortable:sort', (event) => {
-                    if (!this.groupValidator(event.dragEvent)) {
+                    if (!this.groupValidator(event)) {
                         event.cancel();
                     }
                 });
@@ -161,8 +145,28 @@ export default {
         },
 
         destroySortableList() {
-            disconnect(this.instanceId, this.$el);
+            this.disconnectInstace(this.instanceId, this.$el);
         },
+
+        connectInstace(id, container, options) {
+            if (!instances[id]) {
+                instances[id] = new Sortable(container, options);
+            } else {
+                instances[id].addContainer(container);
+            }
+            return instances[id];
+        },
+
+        disconnectInstace(id, container) {
+            if (instances[id]) {
+                instances[id].removeContainer(container);
+                if (instances[id].containers.length === 0) {
+                    instances[id].destroy();
+                    delete instances[id];
+                }
+            }
+        },
+
     },
 
     watch: {

From 962a905f915237bc796a2f5979c9cefa2da5c89d Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 28 Jun 2024 16:03:35 +0100
Subject: [PATCH 07/17] WIP

---
 .../fieldtypes/replicator/Replicator.vue      | 69 +++++++++++--------
 .../js/components/sortable/SortableList.vue   | 31 ++++++---
 2 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index afd5604b02..e37c9e1878 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -44,7 +44,7 @@
             :value="value"
             :vertical="true"
             group="replicator-fieldtype"
-            :group-validator="sortableGroupValidator"
+            :group-droppable="sortableGroupDroppable"
             item-class="replicator-sortable-item"
             handle-class="replicator-sortable-handle"
             append-to="body"
@@ -196,29 +196,39 @@ export default {
         },
 
         sorted({ oldIndex, newIndex, oldContainer, newContainer }) {
+            // Set moved within this replicator
             if (newContainer === this.$refs.sortable && oldContainer === this.$refs.sortable) {
-                // Set moved within this replicator
                 this.update(arrayMove(this.value, oldIndex, newIndex));
-            } else if (newContainer === this.$refs.sortable) {
-                // Set moved into this replicator
-                const oldVm = closestVm(oldContainer, 'replicator-fieldtype');
-                const set = oldVm.value[oldIndex];
-                const meta = oldVm.meta.existing[set._id];
-                const previews = oldVm.previews[set._id];
-                this.updateSetPreviews(set._id, previews);
-                this.updateSetMeta(set._id, meta);
-                this.update(arrayAdd(this.value, set, newIndex));
-                if (oldVm.collapsed.includes(set._id)) {
-                    this.collapseSet(set._id);
-                } else {
-                    this.expandSet(set._id);
-                }
-            } else if (oldContainer === this.$refs.sortable) {
-                // Set moved out of this replicator
-                const set = this.value[oldIndex];
-                this.removeSetMeta(set._id);
-                this.update(arrayRemove(this.value, oldIndex)); 
+                return;
+            }
+
+            // Set moved out of this replicator
+            if (oldContainer === this.$refs.sortable) {
+                // We'll deal with updating this replicator from the target replicator (see below), as we need to
+                // control the order of operations to avoid race conditions with nested replicators both trying to
+                // update their parent's value at the same time.
+                return;
+            }
+
+            // Set moved into this replicator
+            const oldVm = closestVm(oldContainer, 'replicator-fieldtype');
+            const set = oldVm.value[oldIndex];
+            const meta = oldVm.meta.existing[set._id];
+            const previews = oldVm.previews[set._id];
+            this.updateSetPreviews(set._id, previews);
+            this.updateSetMeta(set._id, meta);
+            this.update(arrayAdd(this.value, set, newIndex));
+            if (oldVm.collapsed.includes(set._id)) {
+                this.collapseSet(set._id);
+            } else {
+                this.expandSet(set._id);
             }
+
+            // Remove the set from the old replicator
+            this.$nextTick(() => {
+                oldVm.removeSetMeta(set._id);
+                oldVm.update(arrayRemove(oldVm.value, oldIndex)); 
+            });
         },
 
         addSet(handle, index) {
@@ -307,16 +317,21 @@ export default {
             return Object.keys(this.storeState.errors ?? []).some(handle => handle.startsWith(prefix));
         },
 
-        sortableGroupValidator({ dragEvent }) {
+        sortableGroupDroppable({ dragEvent }) {
             const { sourceContainer, overContainer, source } = dragEvent;
-            if (overContainer !== this.$refs.sortable || sourceContainer === this.$refs.sortable) {
-                // Set dragged over another replicator or within this replicator
+
+            // Set dragged within this replicator
+            if (overContainer === this.$refs.sortable && sourceContainer === this.$refs.sortable) {
                 return true;
             }
-            if (!this.canAddSet) {
-                return false;
+
+            // Set dragged out of this replicator
+            if (sourceContainer === this.$refs.sortable) {
+                return true;
             }
-            return _.pluck(this.setConfigs, 'handle').includes(source.dataset.handle);
+
+            // Set dragged into this replicator
+            return this.canAddSet && _.pluck(this.setConfigs, 'handle').includes(source.dataset.handle);
         },
 
     },
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 031436f456..9b533b3b22 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -12,7 +12,7 @@ export default {
         group: {
             default: null,
         },
-        groupValidator: {
+        groupDroppable: {
             default: null,
         },
         itemClass: {
@@ -123,10 +123,29 @@ export default {
             this.sortable.on('drag:stop', () => this.$emit('dragend'));
 
             this.sortable.on('sortable:stop', (event) => {
+                const { oldIndex, newIndex, oldContainer, newContainer } = event;
+                if (oldContainer !== this.$el && newContainer !== this.$el) {
+                    // Event doesn't concern this list
+                    return;                    
+                }
                 this.$emit('sortablestop', event);
-                this.$emit('input', arrayMove(this.value, event.oldIndex, event.newIndex));
+                this.$emit('input', arrayMove(this.value, oldIndex, newIndex));
             })
 
+            if (this.group && this.groupDroppable) {
+                this.sortable.on('sortable:sort', (event) => {
+                    const { dragEvent } = event;
+                    const { sourceContainer, overContainer, source } = dragEvent;
+                    if (sourceContainer !== this.$el && overContainer !== this.$el) {
+                        // Event doesn't concern this list
+                        return;                    
+                    }
+                    if (!this.groupDroppable(event)) {
+                        event.cancel();
+                    }
+                });
+            }
+
             this.$on('hook:destroyed', () => {
                 this.destroySortableList();
             })
@@ -134,14 +153,6 @@ export default {
             if (this.mirror === false) {
                 this.sortable.on('mirror:create', (e) => e.cancel());
             }
-
-            if (this.group && this.groupValidator) {
-                this.sortable.on('sortable:sort', (event) => {
-                    if (!this.groupValidator(event)) {
-                        event.cancel();
-                    }
-                });
-            }
         },
 
         destroySortableList() {

From ace7aea3859964fc3d0af25b88b6cae0b0e1735f Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 28 Jun 2024 16:40:18 +0100
Subject: [PATCH 08/17] WIP

---
 .../fieldtypes/replicator/Replicator.vue      | 17 ++++---
 .../components/fieldtypes/replicator/Set.vue  |  6 ++-
 src/Fieldtypes/Replicator.php                 | 44 ++++++++++++-------
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index e37c9e1878..4dd795f262 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -61,6 +61,7 @@
                     :values="set"
                     :meta="meta.existing[set._id]"
                     :config="setConfig(set.type)"
+                    :config-hash="setConfigHash(set.type)"
                     :parent-name="name"
                     sortable-item-class="replicator-sortable-item"
                     sortable-handle-class="replicator-sortable-handle"
@@ -160,12 +161,12 @@ export default {
             }, []);
         },
 
-        groupConfigs() {
-            return this.config.sets;
+        setConfigHashes() {
+            return this.meta.setConfigHashes;
         },
 
-        groupKey() {
-            return this.meta.groupKey;
+        groupConfigs() {
+            return this.config.sets;
         },
 
         storeState() {
@@ -185,6 +186,10 @@ export default {
             return _.find(this.setConfigs, { handle }) || {};
         },
 
+        setConfigHash(handle) {
+            return this.setConfigHashes[handle];
+        },
+
         updated(index, set) {
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index + 1)]);
         },
@@ -330,8 +335,10 @@ export default {
                 return true;
             }
 
+            console.log(this.setConfigHashes);
+
             // Set dragged into this replicator
-            return this.canAddSet && _.pluck(this.setConfigs, 'handle').includes(source.dataset.handle);
+            return this.canAddSet && Object.values(this.setConfigHashes).includes(source.dataset.configHash);
         },
 
     },
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index d362371bc1..9d6d5c81f2 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div :class="sortableItemClass" :data-handle="config.handle">
+    <div :class="sortableItemClass" :data-config-hash="configHash">
         <slot name="picker" />
         <div class="replicator-set" :class="{ 'has-error': this.hasError }">
 
@@ -91,6 +91,10 @@ export default {
             type: Object,
             required: true
         },
+        configHash: {
+            type: String,
+            required: true
+        },
         meta: {
             type: Object,
             required: true
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 388a8eac2c..f235843a96 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -119,12 +119,12 @@ protected function preProcessRow($row, $index)
 
     public function fields($set, $index = -1)
     {
-        $config = Arr::get($this->flattenedSetsConfig(), "$set.fields");
-        $hash = md5($this->field->fieldPathPrefix().$index.json_encode($config));
+        $configHash = $this->configHash();
+        $fieldsHash = md5($this->field->fieldPathPrefix().'.'.$index);
 
-        return Blink::once($hash, function () use ($config, $index) {
+        return Blink::once('replicator-'.$configHash.'-'.$fieldsHash, function () use ($set, $index) {
             return new Fields(
-                $config,
+                Arr::get($this->flattenedSetsConfig(), "$set.fields"),
                 $this->field()->parent(),
                 $this->field(),
                 $index
@@ -209,13 +209,13 @@ protected function performAugmentation($values, $shallow)
 
     public function preload()
     {
+        $configHash = $this->configHash();
+
         $existing = collect($this->field->value())->mapWithKeys(function ($set, $index) {
             return [$set['_id'] => $this->fields($set['type'], $index)->addValues($set)->meta()->put('_', '_')];
         })->toArray();
 
-        $blink = md5(json_encode($this->flattenedSetsConfig()));
-
-        $defaults = Blink::once($blink.'-defaults', function () {
+        $defaults = Blink::once('replicator-'.$configHash.'-defaults', function () {
             return collect($this->flattenedSetsConfig())->map(function ($set, $handle) {
                 return $this->fields($handle)->all()->map(function ($field) {
                     return $field->fieldtype()->preProcess($field->defaultValue());
@@ -223,7 +223,7 @@ public function preload()
             })->all();
         });
 
-        $new = Blink::once($blink.'-new', function () use ($defaults) {
+        $new = Blink::once('replicator-'.$configHash.'-new', function () use ($defaults) {
             return collect($this->flattenedSetsConfig())->map(function ($set, $handle) use ($defaults) {
                 return $this->fields($handle)->addValues($defaults[$handle])->meta()->put('_', '_');
             })->toArray();
@@ -241,15 +241,17 @@ public function preload()
             'defaults' => $defaults,
             'collapsed' => [],
             'previews' => $previews,
-            'groupKey' => $this->groupKey(),
+            'setConfigHashes' => $this->flattenedSetsConfig()
+                ->map(fn ($set) => $set['hash'])
+                ->all(),
         ];
     }
 
     public function flattenedSetsConfig()
     {
-        $blink = md5($this->field?->handle().json_encode($this->field?->config()));
+        $configHash = $this->configHash();
 
-        return Blink::once($blink, function () {
+        return Blink::once('replicator-'.$configHash.'-sets', function () {
             $sets = collect($this->config('sets'));
 
             // If the first set doesn't have a nested "set" key, it would be the legacy format.
@@ -263,9 +265,16 @@ public function flattenedSetsConfig()
                 ]);
             }
 
-            return $sets->flatMap(function ($section) {
-                return $section['sets'];
-            });
+            return $sets
+                ->flatMap(function ($section) {
+                    return $section['sets'];
+                })
+                ->map(function ($set) {
+                    return [
+                        ...$set,
+                        'hash' => md5(json_encode($set)),
+                    ];
+                });
         });
     }
 
@@ -331,9 +340,10 @@ public function toQueryableValue($value)
         return empty($value) ? null : $value;
     }
 
-    protected function groupKey()
+    protected function configHash()
     {
-        // @todo This should be refactored into a list of allowed set config hashes, if possible.
-        return md5(serialize($this->field->config('sets')));
+        return Blink::once('replicator-'.spl_object_id($this->field).'-hash', function () {
+            return md5($this->field->handle().json_encode($this->field->config()));
+        });
     }
 }

From e363215c4835d4f1e3f0e14bc8c04f989a537e00 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 28 Jun 2024 16:44:31 +0100
Subject: [PATCH 09/17] WIP

---
 resources/js/components/fieldtypes/replicator/Replicator.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 4dd795f262..4f84687bc3 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -335,8 +335,6 @@ export default {
                 return true;
             }
 
-            console.log(this.setConfigHashes);
-
             // Set dragged into this replicator
             return this.canAddSet && Object.values(this.setConfigHashes).includes(source.dataset.configHash);
         },

From 5f846a810dfdda4ad84d4f7b149dc7ca0e4eba9c Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Fri, 28 Jun 2024 17:04:57 +0100
Subject: [PATCH 10/17] WIP

---
 src/Fieldtypes/Replicator.php | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index f235843a96..7642287f06 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -119,12 +119,13 @@ protected function preProcessRow($row, $index)
 
     public function fields($set, $index = -1)
     {
-        $configHash = $this->configHash();
-        $fieldsHash = md5($this->field->fieldPathPrefix().'.'.$index);
+        $setConfig = Arr::get($this->flattenedSetsConfig(), $set);
+        $setConfigHash = $setConfig['hash'];
+        $itemHash = md5($this->field->fieldPathPrefix().'.'.$index);
 
-        return Blink::once('replicator-'.$configHash.'-'.$fieldsHash, function () use ($set, $index) {
+        return Blink::once('replicator-'.$setConfigHash.'-'.$itemHash, function () use ($setConfig, $index) {
             return new Fields(
-                Arr::get($this->flattenedSetsConfig(), "$set.fields"),
+                $setConfig['fields'],
                 $this->field()->parent(),
                 $this->field(),
                 $index
@@ -342,8 +343,8 @@ public function toQueryableValue($value)
 
     protected function configHash()
     {
-        return Blink::once('replicator-'.spl_object_id($this->field).'-hash', function () {
-            return md5($this->field->handle().json_encode($this->field->config()));
-        });
+        // return Blink::once('replicator-'.spl_object_id($this->field).'-hash', function () {
+        return md5($this->field->handle().json_encode($this->field->config()));
+        // });
     }
 }

From 2357fe92d7ea3b5f63a7b9143caa83a90dbdc141 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Sun, 30 Jun 2024 16:43:10 +0100
Subject: [PATCH 11/17] WIP

---
 resources/js/bootstrap/components.js          |  2 +
 resources/js/bootstrap/globals.js             | 17 ++--
 .../fieldtypes/replicator/Replicator.vue      | 77 +++++++------------
 .../js/components/sortable/SortableList.vue   | 32 +++++---
 4 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 1ab414772f..001f5b14a7 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -60,6 +60,7 @@ import ResourceDeleter from '../components/ResourceDeleter.vue';
 import Stack from '../components/stacks/Stack.vue';
 import StackTest from '../components/stacks/StackTest.vue';
 import CodeBlock from '../components/CodeBlock.vue';
+import SortableList from '../components/sortable/SortableList.vue';
 
 // Third Party
 Vue.component('v-select', vSelect)
@@ -129,6 +130,7 @@ Vue.component('create-entry-button', CreateEntryButton);
 Vue.component('popover', Popover);
 Vue.component('portal', Portal);
 Vue.component('code-block', CodeBlock);
+Vue.component('sortable-list', SortableList);
 
 // Recursive
 Vue.component('role-permission-tree', PermissionTree);
diff --git a/resources/js/bootstrap/globals.js b/resources/js/bootstrap/globals.js
index b217596a2a..aba61aeefe 100644
--- a/resources/js/bootstrap/globals.js
+++ b/resources/js/bootstrap/globals.js
@@ -118,13 +118,18 @@ export function replicatorPreviewHtml(html) {
     return new PreviewHtml(html);
 }
 
-export function closestVm(el, name) {
-    let parent = el;
-    while (parent) {
-        if (parent.__vue__) break;
-        parent = parent.parentElement;
+export function closestVm(obj, name) {
+    let vm, parent;
+    if (obj instanceof HTMLElement) {
+        parent = obj;
+        while (parent) {
+            if (parent.__vue__) break;
+            parent = parent.parentElement;
+        }
+        vm = parent.__vue__;
+    } else {
+        vm = obj;
     }
-    let vm = parent.__vue__;
     while (vm !== vm.$root) {
         if (!name || name === vm.$options.name) return vm;
         vm = vm.$parent;
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 4f84687bc3..0d320af51a 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -44,16 +44,16 @@
             :value="value"
             :vertical="true"
             group="replicator-fieldtype"
-            :group-droppable="sortableGroupDroppable"
+            :group-validator="sortableGroupValidator"
             item-class="replicator-sortable-item"
             handle-class="replicator-sortable-handle"
             append-to="body"
             constrain-dimensions
-            @sortablestop="sorted($event)"
+            @input="sorted($event)"
             @dragstart="$emit('focus')"
             @dragend="$emit('blur')"
         >
-            <div slot-scope="{}" class="replicator-set-container" ref="sortable">
+            <div slot-scope="{}" class="replicator-set-container">
                 <replicator-set
                     v-for="(set, index) in value"
                     :key="set._id"
@@ -200,40 +200,32 @@ export default {
             this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
-        sorted({ oldIndex, newIndex, oldContainer, newContainer }) {
-            // Set moved within this replicator
-            if (newContainer === this.$refs.sortable && oldContainer === this.$refs.sortable) {
+        sorted({ operation, oldIndex, newIndex, oldList }) {
+            if (operation === 'move') {
+                // Move set within this replicator
                 this.update(arrayMove(this.value, oldIndex, newIndex));
-                return;
-            }
-
-            // Set moved out of this replicator
-            if (oldContainer === this.$refs.sortable) {
-                // We'll deal with updating this replicator from the target replicator (see below), as we need to
-                // control the order of operations to avoid race conditions with nested replicators both trying to
-                // update their parent's value at the same time.
-                return;
-            }
-
-            // Set moved into this replicator
-            const oldVm = closestVm(oldContainer, 'replicator-fieldtype');
-            const set = oldVm.value[oldIndex];
-            const meta = oldVm.meta.existing[set._id];
-            const previews = oldVm.previews[set._id];
-            this.updateSetPreviews(set._id, previews);
-            this.updateSetMeta(set._id, meta);
-            this.update(arrayAdd(this.value, set, newIndex));
-            if (oldVm.collapsed.includes(set._id)) {
-                this.collapseSet(set._id);
-            } else {
-                this.expandSet(set._id);
+            } else if (operation === 'add') {
+                // Add set to this replicator
+                const oldReplicator = closestVm(oldList, 'replicator-fieldtype');
+                const set = oldReplicator.value[oldIndex];
+                const meta = oldReplicator.meta.existing[set._id];
+                const previews = oldReplicator.previews[set._id];
+                this.updateSetPreviews(set._id, previews);
+                this.updateSetMeta(set._id, meta);
+                this.update(arrayAdd(this.value, set, newIndex));
+                if (oldReplicator.collapsed.includes(set._id)) {
+                    this.collapseSet(set._id);
+                } else {
+                    this.expandSet(set._id);
+                }
+                // Remove set from old replicator
+                // Do this from the target replicator in order to avoid race conditions with nested
+                // replicators both trying to update their parent's value at the same time.
+                this.$nextTick(() => {
+                    oldReplicator.removeSetMeta(set._id);
+                    oldReplicator.update(arrayRemove(oldReplicator.value, oldIndex)); 
+                });
             }
-
-            // Remove the set from the old replicator
-            this.$nextTick(() => {
-                oldVm.removeSetMeta(set._id);
-                oldVm.update(arrayRemove(oldVm.value, oldIndex)); 
-            });
         },
 
         addSet(handle, index) {
@@ -322,20 +314,7 @@ export default {
             return Object.keys(this.storeState.errors ?? []).some(handle => handle.startsWith(prefix));
         },
 
-        sortableGroupDroppable({ dragEvent }) {
-            const { sourceContainer, overContainer, source } = dragEvent;
-
-            // Set dragged within this replicator
-            if (overContainer === this.$refs.sortable && sourceContainer === this.$refs.sortable) {
-                return true;
-            }
-
-            // Set dragged out of this replicator
-            if (sourceContainer === this.$refs.sortable) {
-                return true;
-            }
-
-            // Set dragged into this replicator
+        sortableGroupValidator({ source }) {
             return this.canAddSet && Object.values(this.setConfigHashes).includes(source.dataset.configHash);
         },
 
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 9b533b3b22..e9bf61402b 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -1,5 +1,6 @@
 <script>
 import { Sortable, Plugins } from '@shopify/draggable'
+import { closestVm } from '../../bootstrap/globals';
 
 const instances = {};
 
@@ -12,7 +13,7 @@ export default {
         group: {
             default: null,
         },
-        groupDroppable: {
+        groupValidator: {
             default: null,
         },
         itemClass: {
@@ -124,24 +125,31 @@ export default {
 
             this.sortable.on('sortable:stop', (event) => {
                 const { oldIndex, newIndex, oldContainer, newContainer } = event;
-                if (oldContainer !== this.$el && newContainer !== this.$el) {
-                    // Event doesn't concern this list
-                    return;                    
+                if (!this.group) {
+                    this.$emit('input', arrayMove(this.value, oldIndex, newIndex));
+                    return;           
                 }
-                this.$emit('sortablestop', event);
-                this.$emit('input', arrayMove(this.value, oldIndex, newIndex));
-            })
+                const payload = { oldIndex, newIndex };
+                if (newContainer === this.$el && oldContainer === this.$el) {
+                    this.$emit('input', { operation: 'move', oldList: this, newList: this, ...payload });
+                } else if (newContainer === this.$el) {
+                    this.$emit('input', { operation: 'add', oldList: closestVm(oldContainer, 'sortable-list'), newList: this, ...payload });
+                } else if (oldContainer === this.$el) {
+                    this.$emit('input', { operation: 'remove', oldList: this, newList: closestVm(newContainer, 'sortable-list'), ...payload });
+                }
+                this.$el.classList.remove('cursor-not-allowed');
+            });
 
-            if (this.group && this.groupDroppable) {
+            if (this.group && this.groupValidator) {
                 this.sortable.on('sortable:sort', (event) => {
                     const { dragEvent } = event;
                     const { sourceContainer, overContainer, source } = dragEvent;
-                    if (sourceContainer !== this.$el && overContainer !== this.$el) {
-                        // Event doesn't concern this list
-                        return;                    
+                    if (overContainer !== this.$el || sourceContainer === this.$el) {
+                        return;
                     }
-                    if (!this.groupDroppable(event)) {
+                    if (!this.groupValidator({ source })) {
                         event.cancel();
+                        this.$el.classList.add('cursor-not-allowed');
                     }
                 });
             }

From 73cb18e8dabba149dd5834a13daa36737d4009af Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Wed, 3 Jul 2024 18:23:12 +0100
Subject: [PATCH 12/17] WIP

---
 .../css/components/fieldtypes/replicator.css  |  8 ++++++++
 .../fieldtypes/replicator/Replicator.vue      | 20 +++++++++++++++++--
 .../js/components/sortable/SortableList.vue   | 11 ++++++++--
 src/Fieldtypes/Replicator.php                 | 14 ++++++-------
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 15fbc047a1..01d2f5e617 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -7,6 +7,14 @@
     min-height: 1rem;
 }
 
+.replicator-droppable {
+    @apply ring ring-green-500;
+}
+
+.replicator-not-droppable {
+    @apply ring ring-red-500;
+}
+
 .replicator-set {
     @apply shadow-set dark:shadow-dark-set rounded bg-white dark:bg-dark-800 outline-none relative;
 }
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 0d320af51a..19669aae6d 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -6,7 +6,11 @@
      once it has been portaled out. -->
 <div :class="{ 'publish-fields': fullScreenMode }">
 <div :class="{ wrapperClasses: fullScreenMode }">
-<div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode }">
+<div class="replicator-fieldtype-container" :class="{
+    'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode,
+    'replicator-droppable': canDropSet === true,
+    'replicator-not-droppable': canDropSet === false,
+}">
 
     <header class="bg-white dark:bg-dark-550 fixed top-0 inset-x-0 border-b dark:border-dark-900 p-3 rtl:pr-4 ltr:pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
         <h2 v-text="__(config.display)" class="flex-1" />
@@ -50,6 +54,8 @@
             append-to="body"
             constrain-dimensions
             @input="sorted($event)"
+            @groupstart="sortableGroupStart"
+            @groupend="sortableGroupEnd"
             @dragstart="$emit('focus')"
             @dragend="$emit('blur')"
         >
@@ -140,6 +146,7 @@ export default {
             collapsed: clone(this.meta.collapsed),
             previews: this.meta.previews,
             fullScreenMode: false,
+            canDropSet: null,
             provide: {
                 storeName: this.storeName,
                 replicatorSets: this.config.sets
@@ -315,7 +322,16 @@ export default {
         },
 
         sortableGroupValidator({ source }) {
-            return this.canAddSet && Object.values(this.setConfigHashes).includes(source.dataset.configHash);
+            this.canDropSet = this.canAddSet && Object.values(this.setConfigHashes).includes(source.dataset.configHash);
+            return this.canDropSet;
+        },
+
+        sortableGroupStart({ valid }) {
+            this.canDropSet = valid;
+        },
+
+        sortableGroupEnd() {
+            this.canDropSet = null;
         },
 
     },
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index e9bf61402b..10cd3b4545 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -137,7 +137,6 @@ export default {
                 } else if (oldContainer === this.$el) {
                     this.$emit('input', { operation: 'remove', oldList: this, newList: closestVm(newContainer, 'sortable-list'), ...payload });
                 }
-                this.$el.classList.remove('cursor-not-allowed');
             });
 
             if (this.group && this.groupValidator) {
@@ -149,9 +148,17 @@ export default {
                     }
                     if (!this.groupValidator({ source })) {
                         event.cancel();
-                        this.$el.classList.add('cursor-not-allowed');
                     }
                 });
+                this.sortable.on('sortable:start', (event) => {
+                    const { dragEvent } = event;
+                    const { source } = dragEvent;
+                    const valid = this.groupValidator({ source });
+                    this.$emit('groupstart', { valid });
+                });
+                this.sortable.on('sortable:stop', () => {
+                    this.$emit('groupend');
+                });
             }
 
             this.$on('hook:destroyed', () => {
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 7642287f06..743d83aba7 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -119,13 +119,13 @@ protected function preProcessRow($row, $index)
 
     public function fields($set, $index = -1)
     {
-        $setConfig = Arr::get($this->flattenedSetsConfig(), $set);
-        $setConfigHash = $setConfig['hash'];
+        $config = Arr::get($this->flattenedSetsConfig(), $set);
+        $configHash = $config['hash'] ?? null;
         $itemHash = md5($this->field->fieldPathPrefix().'.'.$index);
 
-        return Blink::once('replicator-'.$setConfigHash.'-'.$itemHash, function () use ($setConfig, $index) {
+        return Blink::once('replicator-'.$configHash.'-'.$itemHash, function () use ($config, $index) {
             return new Fields(
-                $setConfig['fields'],
+                $config['fields'] ?? [],
                 $this->field()->parent(),
                 $this->field(),
                 $index
@@ -343,8 +343,8 @@ public function toQueryableValue($value)
 
     protected function configHash()
     {
-        // return Blink::once('replicator-'.spl_object_id($this->field).'-hash', function () {
-        return md5($this->field->handle().json_encode($this->field->config()));
-        // });
+        return Blink::once('replicator-'.implode('.', $this->field->handlePath()).'-hash', function () {
+            return md5($this->field->handle().json_encode($this->field->config()));
+        });
     }
 }

From 8dffb26f5bf68260c772822ca69bdf49d1780a07 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Wed, 3 Jul 2024 18:27:45 +0100
Subject: [PATCH 13/17] WIP

---
 src/Fieldtypes/Replicator.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 743d83aba7..d8eea108db 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -343,8 +343,8 @@ public function toQueryableValue($value)
 
     protected function configHash()
     {
-        return Blink::once('replicator-'.implode('.', $this->field->handlePath()).'-hash', function () {
-            return md5($this->field->handle().json_encode($this->field->config()));
+        return Blink::once('replicator-'.implode('.', $this->field?->handlePath()).'-hash', function () {
+            return md5($this->field?->handle().json_encode($this->field?->config()));
         });
     }
 }

From 5bddba1b08df562dc9b1a59f6e11153e63b03514 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 4 Jul 2024 10:52:32 +0100
Subject: [PATCH 14/17] WIP

---
 .../css/components/fieldtypes/replicator.css  | 26 +++++++++++++------
 src/Fields/Field.php                          | 10 +++++++
 src/Fieldtypes/Replicator.php                 | 13 +++-------
 tests/Modifiers/MarkTest.php                  |  3 ++-
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 01d2f5e617..03a532d078 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -7,14 +7,6 @@
     min-height: 1rem;
 }
 
-.replicator-droppable {
-    @apply ring ring-green-500;
-}
-
-.replicator-not-droppable {
-    @apply ring ring-red-500;
-}
-
 .replicator-set {
     @apply shadow-set dark:shadow-dark-set rounded bg-white dark:bg-dark-800 outline-none relative;
 }
@@ -89,3 +81,21 @@
 .replicator-fullscreen {
     @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none;
 }
+
+@scope (.replicator-droppable) to (.replicator-fieldtype) {
+    :scope {
+        cursor: auto;
+    }
+    * {
+        pointer-events: auto;
+    }
+}
+
+@scope (.replicator-not-droppable) to (.replicator-fieldtype) {
+    :scope {
+        cursor: not-allowed;
+    }
+    * {
+        pointer-events: none;
+    }
+}
diff --git a/src/Fields/Field.php b/src/Fields/Field.php
index 8f3ef80e9a..71b0359c1a 100644
--- a/src/Fields/Field.php
+++ b/src/Fields/Field.php
@@ -18,6 +18,7 @@ class Field implements Arrayable
     protected $handle;
     protected $prefix;
     protected $config;
+    protected $configHash;
     protected $value;
     protected $parent;
     protected $parentField;
@@ -459,6 +460,15 @@ public function form(): ?Form
         return $this->form;
     }
 
+    public function configHash(): string
+    {
+        if (! isset($this->configHash)) {
+            $this->configHash = md5(json_encode($this->config));
+        }
+
+        return $this->configHash;
+    }
+
     public static function commonFieldOptions(): Fields
     {
         $reserved = [
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index d8eea108db..0c4b59c800 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -120,7 +120,7 @@ protected function preProcessRow($row, $index)
     public function fields($set, $index = -1)
     {
         $config = Arr::get($this->flattenedSetsConfig(), $set);
-        $configHash = $config['hash'] ?? null;
+        $configHash = $config['hash'] ?? 'invalid_set';
         $itemHash = md5($this->field->fieldPathPrefix().'.'.$index);
 
         return Blink::once('replicator-'.$configHash.'-'.$itemHash, function () use ($config, $index) {
@@ -210,7 +210,7 @@ protected function performAugmentation($values, $shallow)
 
     public function preload()
     {
-        $configHash = $this->configHash();
+        $configHash = $this->field->configHash();
 
         $existing = collect($this->field->value())->mapWithKeys(function ($set, $index) {
             return [$set['_id'] => $this->fields($set['type'], $index)->addValues($set)->meta()->put('_', '_')];
@@ -250,7 +250,7 @@ public function preload()
 
     public function flattenedSetsConfig()
     {
-        $configHash = $this->configHash();
+        $configHash = $this->field->configHash();
 
         return Blink::once('replicator-'.$configHash.'-sets', function () {
             $sets = collect($this->config('sets'));
@@ -340,11 +340,4 @@ public function toQueryableValue($value)
     {
         return empty($value) ? null : $value;
     }
-
-    protected function configHash()
-    {
-        return Blink::once('replicator-'.implode('.', $this->field?->handlePath()).'-hash', function () {
-            return md5($this->field?->handle().json_encode($this->field?->config()));
-        });
-    }
 }
diff --git a/tests/Modifiers/MarkTest.php b/tests/Modifiers/MarkTest.php
index 5f4f865bb0..8582319a0a 100644
--- a/tests/Modifiers/MarkTest.php
+++ b/tests/Modifiers/MarkTest.php
@@ -3,6 +3,7 @@
 namespace Tests\Modifiers;
 
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fields\Field;
 use Statamic\Fields\Value;
 use Statamic\Fieldtypes\Bard;
 use Statamic\Fieldtypes\Markdown;
@@ -78,7 +79,7 @@ public function it_marks_bard_value()
                     ['type' => 'text', 'text' => 'amet', 'marks' => [['type' => 'bold']]],
                 ],
             ],
-        ], 'content', new Bard());
+        ], 'content', (new Bard)->setField(new Field('test', [])));
         $words = 'elüt amet';
 
         $expected = '<p>Lorem, ipsum <mark>el&uuml;t</mark> sit <strong><mark>amet</mark></strong></p>';

From e6f98282529b8c892ce9b15586a0f0385bc0dd88 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 4 Jul 2024 11:21:43 +0100
Subject: [PATCH 15/17] Nudge tests

---
 src/Fieldtypes/Replicator.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 0c4b59c800..713830a830 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -257,7 +257,7 @@ public function flattenedSetsConfig()
 
             // If the first set doesn't have a nested "set" key, it would be the legacy format.
             // We'll put it in a "main" group so it's compatible with the new format.
-            // This also happens in the "sets" fieldtype.
+            // This also happens in the "sets" fieldtype
             if (! Arr::has($sets->first(), 'sets')) {
                 $sets = collect([
                     'main' => [

From e5c768e0905cb1c7a0e46612c8352343a3d50859 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 4 Jul 2024 11:36:52 +0100
Subject: [PATCH 16/17] Revert "Nudge tests"

This reverts commit e6f98282529b8c892ce9b15586a0f0385bc0dd88.
---
 src/Fieldtypes/Replicator.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 713830a830..0c4b59c800 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -257,7 +257,7 @@ public function flattenedSetsConfig()
 
             // If the first set doesn't have a nested "set" key, it would be the legacy format.
             // We'll put it in a "main" group so it's compatible with the new format.
-            // This also happens in the "sets" fieldtype
+            // This also happens in the "sets" fieldtype.
             if (! Arr::has($sets->first(), 'sets')) {
                 $sets = collect([
                     'main' => [

From 53d8d7c0060e9b7adbaa92f782d37d7b66304217 Mon Sep 17 00:00:00 2001
From: Jack Sleight <jacksleight@gmail.com>
Date: Thu, 4 Jul 2024 20:16:05 +0100
Subject: [PATCH 17/17] Needs handles

---
 src/Fields/Field.php          | 2 +-
 src/Fieldtypes/Replicator.php | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Fields/Field.php b/src/Fields/Field.php
index 71b0359c1a..7dc87a8b2f 100644
--- a/src/Fields/Field.php
+++ b/src/Fields/Field.php
@@ -463,7 +463,7 @@ public function form(): ?Form
     public function configHash(): string
     {
         if (! isset($this->configHash)) {
-            $this->configHash = md5(json_encode($this->config));
+            $this->configHash = md5($this->handle.json_encode($this->config));
         }
 
         return $this->configHash;
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 0c4b59c800..99df8bf858 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -270,10 +270,10 @@ public function flattenedSetsConfig()
                 ->flatMap(function ($section) {
                     return $section['sets'];
                 })
-                ->map(function ($set) {
+                ->map(function ($config, $handle) {
                     return [
-                        ...$set,
-                        'hash' => md5(json_encode($set)),
+                        ...$config,
+                        'hash' => md5($handle.json_encode($config)),
                     ];
                 });
         });