From 0d64ced38e3af9ad8c6feaa6b24b0a2ea46b4f3c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 27 Aug 2026 17:46:12 +0100
Subject: [PATCH 01/31] First pass

---
 .../js/components/blueprints/Section.vue      | 27 ++++++++++++++++++-
 .../js/components/blueprints/Sections.vue     | 11 ++++++--
 .../fieldtypes/replicator/Replicator.vue      | 12 ++++++---
 .../components/fieldtypes/replicator/Set.vue  |  4 ++-
 src/Fields/FieldTransformer.php               |  4 +++
 src/Fieldtypes/Sets.php                       |  3 +++
 tests/Fieldtypes/SetsTest.php                 |  8 ++++++
 7 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 59f95fe09a4..13bc8209150 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -1,5 +1,9 @@
 <template>
-    <div class="blueprint-section min-h-40 w-full outline-hidden @container" tabindex="-1">
+    <div
+        class="blueprint-section min-h-40 outline-hidden @container"
+        :class="showHandleField ? widthClass : 'w-full'"
+        tabindex="-1"
+    >
         <ui-panel>
             <ui-panel-header class="flex items-center justify-between pl-2.75! pr-3.25!">
                 <div class="flex items-center gap-2 flex-1">
@@ -7,6 +11,7 @@
                     <ui-icon :name="section.icon" :set="iconSet" v-if="section.icon" />
                     <ui-heading v-text="__(section.display ?? 'Section')" />
                 </div>
+                <width-selector v-if="showHandleField" v-model="width" class="me-1" />
                 <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" />
                 <ui-button icon="trash" size="sm" variant="ghost" @click.prevent="$emit('deleted')" />
             </ui-panel-header>
@@ -124,6 +129,9 @@
                     <ui-field :label="__('Hidden')" v-if="showHideField">
                         <ui-switch v-model="editingSection.hide" />
                     </ui-field>
+                    <ui-field :label="__('Width')" v-if="showHandleField">
+                        <width-selector v-model="editingSection.width" size="lg" />
+                    </ui-field>
                     <div class="py-6 space-x-2 -mx-6 px-6 border-t border-gray-200 dark:border-gray-700">
                         <ui-button :text="isSoloNarrowStack ? __('Save') : __('Confirm')" @click="handleSaveOrConfirm" variant="primary" />
                         <ui-button :text="__('Cancel')" @click="editCancelled" variant="ghost" />
@@ -137,7 +145,9 @@
 <script>
 import Fields from './Fields.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
+import WidthSelector from '../fields/WidthSelector.vue';
 import { Switch, Heading } from '@/components/ui';
+import { field_width_class } from '@/bootstrap/globals.js';
 
 export default {
     mixins: [CanDefineLocalizable],
@@ -150,6 +160,7 @@ export default {
         Fields,
         Switch,
         Heading,
+        WidthSelector,
     },
 
     props: {
@@ -193,6 +204,19 @@ export default {
             const stacks = this.$stacks.stacks();
             return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
+
+        width: {
+            get() {
+                return this.section.width ?? 100;
+            },
+            set(width) {
+                this.$emit('updated', { ...this.section, width });
+            },
+        },
+
+        widthClass() {
+            return field_width_class(this.width);
+        },
     },
 
     watch: {
@@ -269,6 +293,7 @@ export default {
                 icon: this.section.icon,
                 image: this.section.image,
                 hide: this.section.hide,
+                width: this.section.width ?? 100,
                 collapsible: this.section.collapsible,
                 collapsed: this.section.collapsed,
             };
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index c139c803233..80b879fd45e 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -1,6 +1,12 @@
 <template>
     <div>
-        <div ref="sections" class="blueprint-sections flex flex-wrap outline-hidden" :data-tab="tabId" tabindex="-1">
+        <div
+            ref="sections"
+            class="blueprint-sections outline-hidden"
+            :class="showSectionHandleField ? 'field-grid' : 'flex flex-wrap'"
+            :data-tab="tabId"
+            tabindex="-1"
+        >
             <BlueprintSection
                 ref="section"
                 v-for="(section, i) in sections"
@@ -18,7 +24,7 @@
                 @deleted="deleteSection(i)"
             />
 
-            <div class="blueprint-add-section-container w-full">
+            <div class="blueprint-add-section-container" :class="showSectionHandleField ? 'field-w-100' : 'w-full'">
                 <button class="blueprint-add-section-button" @click="addAndEditSection">
                     <div class="flex items-center gap-2">
                         <ui-icon name="plus" class="size-4" />
@@ -114,6 +120,7 @@ export default {
                 collapsed: false,
                 icon: null,
                 hide: null,
+                width: 100,
                 handle: snake_case(this.newSectionText),
                 fields: [],
             };
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index d2843c3f0ba..af46a3f8743 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -19,7 +19,7 @@
                     <section :class="{ 'mt-12 p-4': fullScreenMode }">
                         <sortable-list
                             :model-value="value"
-                            :vertical="true"
+                            :vertical="!hasPartialWidthSets"
                             :item-class="sortableItemClass"
                             :handle-class="sortableHandleClass"
                             append-to="body"
@@ -29,7 +29,7 @@
                             @dragend="$emit('blur')"
                             v-slot="{}"
                         >
-                            <div class="relative">
+                            <div class="replicator-sets relative" :class="{ 'field-grid': hasPartialWidthSets }">
                                 <ReplicatorSet
                                     v-for="(set, index) in value"
                                     :key="set._id"
@@ -60,7 +60,7 @@
                                             :index="index"
                                             :enabled="canAddSet"
                                             :is-first="index === 0"
-                                            :show-connector="!(index === 0 && config.hide_display)"
+                                            :show-connector="!hasPartialWidthSets && !(index === 0 && config.hide_display)"
                                             :loading-set="loadingSet"
                                             @added="addSet"
                                         />
@@ -73,7 +73,7 @@
                             v-if="canAddSet"
                             :groups="groupConfigs"
                             :sets="setConfigs"
-                            :show-connector="value.length > 0"
+                            :show-connector="value.length > 0 && !hasPartialWidthSets"
                             :index="value.length"
                             :label="config.button_label"
                             :is-first="value.length === 0"
@@ -146,6 +146,10 @@ export default {
             return this.config.sets;
         },
 
+        hasPartialWidthSets() {
+            return this.setConfigs.some((set) => (set.width ?? 100) !== 100);
+        },
+
         sortableItemClass() {
             return `${this.fieldId}-sortable-item`;
         },
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 3b7ef4c3a72..b0c5faf9e47 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -18,6 +18,7 @@ import PreviewHtml from '@/components/fieldtypes/replicator/PreviewHtml.js';
 import FieldAction from '@/components/field-actions/FieldAction.js';
 import toFieldActions from '@/components/field-actions/toFieldActions.js';
 import { reveal } from '@api';
+import { field_width_class } from '@/bootstrap/globals.js';
 
 const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'removed']);
 
@@ -49,6 +50,7 @@ const fieldPathPrefix = computed(() => `${props.fieldPath}.${props.index}`);
 const metaPathPrefix = computed(() => `${props.metaPath}.existing.${props.id}`);
 const isInvalid = computed(() => Object.keys(props.config).length === 0);
 const hasFields = computed(() => Array.isArray(props.config.fields) ? props.config.fields.length > 0 : Object.keys(props.config.fields || {}).length > 0);
+const widthClass = computed(() => field_width_class(props.config.width ?? 100));
 
 const setGroup = computed(() => {
     if (replicatorSets.length < 1) return null;
@@ -125,7 +127,7 @@ reveal.use(rootEl, () => emit('expanded'));
 </script>
 
 <template>
-    <div ref="rootEl" :class="sortableItemClass">
+    <div ref="rootEl" :class="[sortableItemClass, widthClass]">
         <slot name="picker" />
         <div
             layout
diff --git a/src/Fields/FieldTransformer.php b/src/Fields/FieldTransformer.php
index ab992143676..85711d00b59 100644
--- a/src/Fields/FieldTransformer.php
+++ b/src/Fields/FieldTransformer.php
@@ -89,6 +89,10 @@ private static function inlineTabField(array $submitted)
                                             unset($set['hide']);
                                         }
 
+                                        if (Arr::get($set, 'width') === 100) {
+                                            unset($set['width']);
+                                        }
+
                                         return $set;
                                     })
                                     ->filter()
diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
index 4448d8ebebe..df0d397a76d 100644
--- a/src/Fieldtypes/Sets.php
+++ b/src/Fieldtypes/Sets.php
@@ -58,6 +58,7 @@ public function preProcess($sets)
                         'icon' => $set['icon'] ?? null,
                         'image' => $this->preProcessPreviewImage($set['image'] ?? null),
                         'hide' => $set['hide'] ?? null,
+                        'width' => $set['width'] ?? 100,
                         'fields' => collect($set['fields'] ?? [])->map(function ($field, $i) use ($setId) {
                             return array_merge(FieldTransformer::toVue($field), ['_id' => $setId.'-'.$i]);
                         })->all(),
@@ -97,6 +98,7 @@ public function preProcessConfig($sets)
                         return array_merge($config, [
                             'handle' => $name,
                             'id' => $name,
+                            'width' => $config['width'] ?? 100,
                             'image' => $this->previewImageUrl($config['image'] ?? null),
                             'fields' => (new NestedFields)->preProcessConfig(Arr::get($config, 'fields', [])),
                         ]);
@@ -128,6 +130,7 @@ public function process($tabs)
                                 'icon' => $section['icon'] ?? null,
                                 'image' => $this->processPreviewImage($section['image'] ?? null),
                                 'hide' => $section['hide'] ?? null,
+                                'width' => $section['width'] ?? 100,
                                 'fields' => collect($section['fields'])->map(function ($field) {
                                     return FieldTransformer::fromVue($field);
                                 })->all(),
diff --git a/tests/Fieldtypes/SetsTest.php b/tests/Fieldtypes/SetsTest.php
index e90c46b00fb..f5f1a462815 100644
--- a/tests/Fieldtypes/SetsTest.php
+++ b/tests/Fieldtypes/SetsTest.php
@@ -29,6 +29,7 @@ public function it_preprocesses_with_groups()
                         'instructions' => 'One instructions',
                         'icon' => 'one-icon',
                         'hide' => true,
+                        'width' => 50,
                         'fields' => [
                             ['handle' => 'field_one', 'field' => ['type' => 'text']],
                         ],
@@ -63,6 +64,7 @@ public function it_preprocesses_with_groups()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => true,
+                        'width' => 50,
                         'fields' => [
                             [
                                 '_id' => 'group-alfa-section-one-0',
@@ -95,6 +97,7 @@ public function it_preprocesses_with_groups()
                         'icon' => null,
                         'image' => null,
                         'hide' => null,
+                        'width' => 100,
                         'fields' => [
                             [
                                 '_id' => 'group-bravo-section-two-0',
@@ -147,6 +150,7 @@ public function it_preprocesses_without_groups()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => null,
+                        'width' => 100,
                         'fields' => [
                             [
                                 '_id' => 'group-main-section-one-0',
@@ -252,6 +256,7 @@ public function it_preprocesses_for_config_with_groups()
                         ],
                         'handle' => 'one',
                         'id' => 'one',
+                        'width' => 100,
                         'image' => null,
                     ],
                 ],
@@ -292,6 +297,7 @@ public function it_preprocesses_for_config_with_groups()
                         ],
                         'handle' => 'two',
                         'id' => 'two',
+                        'width' => 100,
                         'image' => null,
                     ],
                 ],
@@ -355,6 +361,7 @@ public function it_preprocesses_for_config_without_groups()
                         ],
                         'handle' => 'one',
                         'id' => 'one',
+                        'width' => 100,
                         'image' => null,
                     ],
                 ],
@@ -418,6 +425,7 @@ public function it_processes()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => false,
+                        'width' => 100,
                         'fields' => [
                             [
                                 'handle' => 'field_one',

From fca82a4a4f1bf7719444ccf61e5cc333ccc9b420 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 12:08:10 +0100
Subject: [PATCH 02/31] Improve appearance

---
 lang/en/messages.php                          |  1 +
 .../js/components/blueprints/Section.vue      | 41 +++++++++----------
 .../js/components/blueprints/Sections.vue     |  2 +-
 .../fieldtypes/replicator/Replicator.vue      | 12 +++---
 .../components/fieldtypes/replicator/Set.vue  |  5 +--
 resources/svg/icons/cards.svg                 |  1 +
 src/Fields/FieldTransformer.php               |  4 +-
 src/Fieldtypes/Sets.php                       |  6 +--
 tests/Fieldtypes/SetsTest.php                 | 16 ++++----
 9 files changed, 43 insertions(+), 45 deletions(-)
 create mode 100644 resources/svg/icons/cards.svg

diff --git a/lang/en/messages.php b/lang/en/messages.php
index 5899880f2c1..c83eb28f118 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -222,6 +222,7 @@
     'publish_actions_publish' => 'Changes to the working copy will be applied to the entry and it will be published immediately.',
     'publish_actions_schedule' => 'Changes to the working copy will be applied to the entry and it will appear published on the selected date.',
     'publish_actions_unpublish' => 'The current revision will be unpublished.',
+    'replicator_set_card_layout_instructions' => 'On the publish form, multiple instances of this set display side by side instead of full width.',
     'relationship_item_unavailable' => 'This item is unavailable. It may have been deleted, or you may not have permission to view it.',
     'reset_password_notification_body' => 'You are receiving this email because we received a password reset request for your account.',
     'reset_password_notification_no_action' => 'If you did not request a password reset, no further action is required.',
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 13bc8209150..ed6471ca251 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -1,17 +1,22 @@
 <template>
     <div
-        class="blueprint-section min-h-40 outline-hidden @container"
-        :class="showHandleField ? widthClass : 'w-full'"
+        class="blueprint-section min-h-40 outline-hidden @container w-full"
         tabindex="-1"
     >
         <ui-panel>
             <ui-panel-header class="flex items-center justify-between pl-2.75! pr-3.25!">
-                <div class="flex items-center gap-2 flex-1">
+                <div class="flex items-center gap-2 flex-1 min-w-0">
                     <ui-icon name="handles-sm" class="blueprint-section-drag-handle size-3! cursor-grab text-gray-400" />
                     <ui-icon :name="section.icon" :set="iconSet" v-if="section.icon" />
                     <ui-heading v-text="__(section.display ?? 'Section')" />
+                    <ui-badge
+                        v-if="showHandleField && card"
+                        pill
+                        icon="cards"
+                        :text="__('Card')"
+                        color="white"
+                    />
                 </div>
-                <width-selector v-if="showHandleField" v-model="width" class="me-1" />
                 <ui-button icon="pencil-line" size="sm" variant="ghost" @click="edit" />
                 <ui-button icon="trash" size="sm" variant="ghost" @click.prevent="$emit('deleted')" />
             </ui-panel-header>
@@ -75,6 +80,13 @@
                     <ui-field :label="__('Instructions')">
                         <ui-input type="text" v-model="editingSection.instructions" />
                     </ui-field>
+                    <ui-field
+                        :label="__('Card layout')"
+                        :instructions="__('messages.replicator_set_card_layout_instructions')"
+                        v-if="showHandleField"
+                    >
+                        <ui-switch v-model="editingSection.card" />
+                    </ui-field>
                     <ui-field :label="__('Collapsible')" v-if="showCollapsibleField">
                         <ui-switch v-model="editingSection.collapsible" />
                     </ui-field>
@@ -129,9 +141,6 @@
                     <ui-field :label="__('Hidden')" v-if="showHideField">
                         <ui-switch v-model="editingSection.hide" />
                     </ui-field>
-                    <ui-field :label="__('Width')" v-if="showHandleField">
-                        <width-selector v-model="editingSection.width" size="lg" />
-                    </ui-field>
                     <div class="py-6 space-x-2 -mx-6 px-6 border-t border-gray-200 dark:border-gray-700">
                         <ui-button :text="isSoloNarrowStack ? __('Save') : __('Confirm')" @click="handleSaveOrConfirm" variant="primary" />
                         <ui-button :text="__('Cancel')" @click="editCancelled" variant="ghost" />
@@ -145,9 +154,7 @@
 <script>
 import Fields from './Fields.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
-import WidthSelector from '../fields/WidthSelector.vue';
 import { Switch, Heading } from '@/components/ui';
-import { field_width_class } from '@/bootstrap/globals.js';
 
 export default {
     mixins: [CanDefineLocalizable],
@@ -160,7 +167,6 @@ export default {
         Fields,
         Switch,
         Heading,
-        WidthSelector,
     },
 
     props: {
@@ -205,17 +211,8 @@ export default {
             return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
 
-        width: {
-            get() {
-                return this.section.width ?? 100;
-            },
-            set(width) {
-                this.$emit('updated', { ...this.section, width });
-            },
-        },
-
-        widthClass() {
-            return field_width_class(this.width);
+        card() {
+            return this.section.card ?? false;
         },
     },
 
@@ -293,7 +290,7 @@ export default {
                 icon: this.section.icon,
                 image: this.section.image,
                 hide: this.section.hide,
-                width: this.section.width ?? 100,
+                card: this.section.card ?? false,
                 collapsible: this.section.collapsible,
                 collapsed: this.section.collapsed,
             };
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index 80b879fd45e..28dd28a5a42 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -120,7 +120,7 @@ export default {
                 collapsed: false,
                 icon: null,
                 hide: null,
-                width: 100,
+                card: false,
                 handle: snake_case(this.newSectionText),
                 fields: [],
             };
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index af46a3f8743..baa458c701c 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -19,7 +19,7 @@
                     <section :class="{ 'mt-12 p-4': fullScreenMode }">
                         <sortable-list
                             :model-value="value"
-                            :vertical="!hasPartialWidthSets"
+                            :vertical="!hasCardLayoutSets"
                             :item-class="sortableItemClass"
                             :handle-class="sortableHandleClass"
                             append-to="body"
@@ -29,7 +29,7 @@
                             @dragend="$emit('blur')"
                             v-slot="{}"
                         >
-                            <div class="replicator-sets relative" :class="{ 'field-grid': hasPartialWidthSets }">
+                            <div class="replicator-sets relative" :class="{ 'field-grid': hasCardLayoutSets }">
                                 <ReplicatorSet
                                     v-for="(set, index) in value"
                                     :key="set._id"
@@ -60,7 +60,7 @@
                                             :index="index"
                                             :enabled="canAddSet"
                                             :is-first="index === 0"
-                                            :show-connector="!hasPartialWidthSets && !(index === 0 && config.hide_display)"
+                                            :show-connector="!hasCardLayoutSets && !(index === 0 && config.hide_display)"
                                             :loading-set="loadingSet"
                                             @added="addSet"
                                         />
@@ -73,7 +73,7 @@
                             v-if="canAddSet"
                             :groups="groupConfigs"
                             :sets="setConfigs"
-                            :show-connector="value.length > 0 && !hasPartialWidthSets"
+                            :show-connector="value.length > 0 && !hasCardLayoutSets"
                             :index="value.length"
                             :label="config.button_label"
                             :is-first="value.length === 0"
@@ -146,8 +146,8 @@ export default {
             return this.config.sets;
         },
 
-        hasPartialWidthSets() {
-            return this.setConfigs.some((set) => (set.width ?? 100) !== 100);
+        hasCardLayoutSets() {
+            return this.setConfigs.some((set) => set.card);
         },
 
         sortableItemClass() {
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index b0c5faf9e47..dc97ea5c143 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -18,7 +18,6 @@ import PreviewHtml from '@/components/fieldtypes/replicator/PreviewHtml.js';
 import FieldAction from '@/components/field-actions/FieldAction.js';
 import toFieldActions from '@/components/field-actions/toFieldActions.js';
 import { reveal } from '@api';
-import { field_width_class } from '@/bootstrap/globals.js';
 
 const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'removed']);
 
@@ -50,7 +49,7 @@ const fieldPathPrefix = computed(() => `${props.fieldPath}.${props.index}`);
 const metaPathPrefix = computed(() => `${props.metaPath}.existing.${props.id}`);
 const isInvalid = computed(() => Object.keys(props.config).length === 0);
 const hasFields = computed(() => Array.isArray(props.config.fields) ? props.config.fields.length > 0 : Object.keys(props.config.fields || {}).length > 0);
-const widthClass = computed(() => field_width_class(props.config.width ?? 100));
+const layoutClass = computed(() => props.config.card ? 'field-w-50' : '');
 
 const setGroup = computed(() => {
     if (replicatorSets.length < 1) return null;
@@ -127,7 +126,7 @@ reveal.use(rootEl, () => emit('expanded'));
 </script>
 
 <template>
-    <div ref="rootEl" :class="[sortableItemClass, widthClass]">
+    <div ref="rootEl" :class="[sortableItemClass, layoutClass]">
         <slot name="picker" />
         <div
             layout
diff --git a/resources/svg/icons/cards.svg b/resources/svg/icons/cards.svg
new file mode 100644
index 00000000000..1a86e464325
--- /dev/null
+++ b/resources/svg/icons/cards.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" id="Cards--Streamline-Flex"><g id="cards"><path id="Rectangle 325" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.15058 1.5023c-0.09762 -0.4386 -0.47533 -0.76026 -0.92445 -0.782856 -2.23941 -0.112671 -3.74453 0.03427 -5.92631 0.525676 -0.447772 0.10086 -0.768809 0.49415 -0.781265 0.95261 -0.079813 2.93766 0.088917 4.84324 0.680725 7.68875 0.09223 0.44352 0.47006 0.77202 0.92269 0.79742 2.24522 0.1259 3.75375 -0.0092 5.94454 -0.5273 0.43538 -0.103 0.74834 -0.48406 0.76777 -0.93068 0.1276 -2.93419 -0.04553 -4.85626 -0.6837 -7.72362Z" stroke-width="1"/><path id="Rectangle 326" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.99581 3.07593c0.95769 0.33106 1.86509 0.73804 2.93149 1.30439 0.4318 0.22934 0.6538 0.72079 0.5457 1.19734 -0.6361 2.80708 -1.2944 4.60584 -2.6304 7.15534 -0.2256 0.4307 -0.7102 0.661 -1.1861 0.5598 -1.55918 -0.3316 -2.72851 -0.694 -3.99146 -1.2661" stroke-width="1"/></g></svg>
\ No newline at end of file
diff --git a/src/Fields/FieldTransformer.php b/src/Fields/FieldTransformer.php
index 85711d00b59..ead5ac616e5 100644
--- a/src/Fields/FieldTransformer.php
+++ b/src/Fields/FieldTransformer.php
@@ -89,8 +89,8 @@ private static function inlineTabField(array $submitted)
                                             unset($set['hide']);
                                         }
 
-                                        if (Arr::get($set, 'width') === 100) {
-                                            unset($set['width']);
+                                        if (! Arr::get($set, 'card')) {
+                                            unset($set['card']);
                                         }
 
                                         return $set;
diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
index df0d397a76d..ebd5f83a690 100644
--- a/src/Fieldtypes/Sets.php
+++ b/src/Fieldtypes/Sets.php
@@ -58,7 +58,7 @@ public function preProcess($sets)
                         'icon' => $set['icon'] ?? null,
                         'image' => $this->preProcessPreviewImage($set['image'] ?? null),
                         'hide' => $set['hide'] ?? null,
-                        'width' => $set['width'] ?? 100,
+                        'card' => $set['card'] ?? false,
                         'fields' => collect($set['fields'] ?? [])->map(function ($field, $i) use ($setId) {
                             return array_merge(FieldTransformer::toVue($field), ['_id' => $setId.'-'.$i]);
                         })->all(),
@@ -98,7 +98,7 @@ public function preProcessConfig($sets)
                         return array_merge($config, [
                             'handle' => $name,
                             'id' => $name,
-                            'width' => $config['width'] ?? 100,
+                            'card' => $config['card'] ?? false,
                             'image' => $this->previewImageUrl($config['image'] ?? null),
                             'fields' => (new NestedFields)->preProcessConfig(Arr::get($config, 'fields', [])),
                         ]);
@@ -130,7 +130,7 @@ public function process($tabs)
                                 'icon' => $section['icon'] ?? null,
                                 'image' => $this->processPreviewImage($section['image'] ?? null),
                                 'hide' => $section['hide'] ?? null,
-                                'width' => $section['width'] ?? 100,
+                                'card' => $section['card'] ?? false,
                                 'fields' => collect($section['fields'])->map(function ($field) {
                                     return FieldTransformer::fromVue($field);
                                 })->all(),
diff --git a/tests/Fieldtypes/SetsTest.php b/tests/Fieldtypes/SetsTest.php
index f5f1a462815..17db2413828 100644
--- a/tests/Fieldtypes/SetsTest.php
+++ b/tests/Fieldtypes/SetsTest.php
@@ -29,7 +29,7 @@ public function it_preprocesses_with_groups()
                         'instructions' => 'One instructions',
                         'icon' => 'one-icon',
                         'hide' => true,
-                        'width' => 50,
+                        'card' => true,
                         'fields' => [
                             ['handle' => 'field_one', 'field' => ['type' => 'text']],
                         ],
@@ -64,7 +64,7 @@ public function it_preprocesses_with_groups()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => true,
-                        'width' => 50,
+                        'card' => true,
                         'fields' => [
                             [
                                 '_id' => 'group-alfa-section-one-0',
@@ -97,7 +97,7 @@ public function it_preprocesses_with_groups()
                         'icon' => null,
                         'image' => null,
                         'hide' => null,
-                        'width' => 100,
+                        'card' => false,
                         'fields' => [
                             [
                                 '_id' => 'group-bravo-section-two-0',
@@ -150,7 +150,7 @@ public function it_preprocesses_without_groups()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => null,
-                        'width' => 100,
+                        'card' => false,
                         'fields' => [
                             [
                                 '_id' => 'group-main-section-one-0',
@@ -256,7 +256,7 @@ public function it_preprocesses_for_config_with_groups()
                         ],
                         'handle' => 'one',
                         'id' => 'one',
-                        'width' => 100,
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -297,7 +297,7 @@ public function it_preprocesses_for_config_with_groups()
                         ],
                         'handle' => 'two',
                         'id' => 'two',
-                        'width' => 100,
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -361,7 +361,7 @@ public function it_preprocesses_for_config_without_groups()
                         ],
                         'handle' => 'one',
                         'id' => 'one',
-                        'width' => 100,
+                        'card' => false,
                         'image' => null,
                     ],
                 ],
@@ -425,7 +425,7 @@ public function it_processes()
                         'icon' => 'one-icon',
                         'image' => null,
                         'hide' => false,
-                        'width' => 100,
+                        'card' => false,
                         'fields' => [
                             [
                                 'handle' => 'field_one',

From a20911414a19b8bbdad39ae0a74bfc7616bd72ed Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 12:09:30 +0100
Subject: [PATCH 03/31] Reset replicator layout

---
 .../components/fieldtypes/replicator/Replicator.vue  | 12 ++++--------
 .../js/components/fieldtypes/replicator/Set.vue      |  3 +--
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index baa458c701c..d2843c3f0ba 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -19,7 +19,7 @@
                     <section :class="{ 'mt-12 p-4': fullScreenMode }">
                         <sortable-list
                             :model-value="value"
-                            :vertical="!hasCardLayoutSets"
+                            :vertical="true"
                             :item-class="sortableItemClass"
                             :handle-class="sortableHandleClass"
                             append-to="body"
@@ -29,7 +29,7 @@
                             @dragend="$emit('blur')"
                             v-slot="{}"
                         >
-                            <div class="replicator-sets relative" :class="{ 'field-grid': hasCardLayoutSets }">
+                            <div class="relative">
                                 <ReplicatorSet
                                     v-for="(set, index) in value"
                                     :key="set._id"
@@ -60,7 +60,7 @@
                                             :index="index"
                                             :enabled="canAddSet"
                                             :is-first="index === 0"
-                                            :show-connector="!hasCardLayoutSets && !(index === 0 && config.hide_display)"
+                                            :show-connector="!(index === 0 && config.hide_display)"
                                             :loading-set="loadingSet"
                                             @added="addSet"
                                         />
@@ -73,7 +73,7 @@
                             v-if="canAddSet"
                             :groups="groupConfigs"
                             :sets="setConfigs"
-                            :show-connector="value.length > 0 && !hasCardLayoutSets"
+                            :show-connector="value.length > 0"
                             :index="value.length"
                             :label="config.button_label"
                             :is-first="value.length === 0"
@@ -146,10 +146,6 @@ export default {
             return this.config.sets;
         },
 
-        hasCardLayoutSets() {
-            return this.setConfigs.some((set) => set.card);
-        },
-
         sortableItemClass() {
             return `${this.fieldId}-sortable-item`;
         },
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index dc97ea5c143..3b7ef4c3a72 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -49,7 +49,6 @@ const fieldPathPrefix = computed(() => `${props.fieldPath}.${props.index}`);
 const metaPathPrefix = computed(() => `${props.metaPath}.existing.${props.id}`);
 const isInvalid = computed(() => Object.keys(props.config).length === 0);
 const hasFields = computed(() => Array.isArray(props.config.fields) ? props.config.fields.length > 0 : Object.keys(props.config.fields || {}).length > 0);
-const layoutClass = computed(() => props.config.card ? 'field-w-50' : '');
 
 const setGroup = computed(() => {
     if (replicatorSets.length < 1) return null;
@@ -126,7 +125,7 @@ reveal.use(rootEl, () => emit('expanded'));
 </script>
 
 <template>
-    <div ref="rootEl" :class="[sortableItemClass, layoutClass]">
+    <div ref="rootEl" :class="sortableItemClass">
         <slot name="picker" />
         <div
             layout

From bedc4b74c144bde91b55266ba6548ea30f6f2c81 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 12:52:32 +0100
Subject: [PATCH 04/31] Wrapping a container around the first and last item of
 a set with a card layout

---
 .../fieldtypes/replicator/Replicator.vue      | 142 +++++++++++++-----
 .../components/fieldtypes/replicator/Set.vue  |   2 +-
 2 files changed, 107 insertions(+), 37 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index d2843c3f0ba..39604ea3ef0 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -30,42 +30,81 @@
                             v-slot="{}"
                         >
                             <div class="relative">
-                                <ReplicatorSet
-                                    v-for="(set, index) in value"
-                                    :key="set._id"
-                                    :id="set._id"
-                                    :index
-                                    :field-path="setFieldPathPrefix"
-                                    :meta-path="setMetaPathPrefix"
-                                    :values="set"
-                                    :config="setConfig(set.type)"
-                                    :sortable-item-class="sortableItemClass"
-                                    :sortable-handle-class="sortableHandleClass"
-                                    :collapsed="collapsed.includes(set._id)"
-                                    :enabled="set.enabled"
-                                    :read-only="isReadOnly"
-                                    :can-add-set="canAddSet"
-                                    :has-error="setHasError(set._id)"
-                                    :show-field-previews="config.previews"
-                                    @collapsed="collapseSet(set._id)"
-                                    @expanded="expandSet(set._id)"
-                                    @duplicated="duplicateSet(set._id)"
-                                    @removed="removed(set, index)"
-                                >
-                                    <template v-slot:picker>
-                                        <add-set-button
-                                            variant="between"
-                                            :groups="groupConfigs"
-                                            :sets="setConfigs"
-                                            :index="index"
-                                            :enabled="canAddSet"
-                                            :is-first="index === 0"
-                                            :show-connector="!(index === 0 && config.hide_display)"
-                                            :loading-set="loadingSet"
-                                            @added="addSet"
-                                        />
-                                    </template>
-                                </ReplicatorSet>
+                                <template v-for="group in setGroups" :key="groupKey(group)">
+                                    <div v-if="group.type === 'card-group'" class="replicator-card-sets">
+                                        <ReplicatorSet
+                                            v-for="{ set, index } in group.items"
+                                            :key="set._id"
+                                            :id="set._id"
+                                            :index
+                                            :field-path="setFieldPathPrefix"
+                                            :meta-path="setMetaPathPrefix"
+                                            :values="set"
+                                            :config="setConfig(set.type)"
+                                            :sortable-item-class="sortableItemClass"
+                                            :sortable-handle-class="sortableHandleClass"
+                                            :collapsed="collapsed.includes(set._id)"
+                                            :enabled="set.enabled"
+                                            :read-only="isReadOnly"
+                                            :can-add-set="canAddSet"
+                                            :has-error="setHasError(set._id)"
+                                            :show-field-previews="config.previews"
+                                            @collapsed="collapseSet(set._id)"
+                                            @expanded="expandSet(set._id)"
+                                            @duplicated="duplicateSet(set._id)"
+                                            @removed="removed(set, index)"
+                                        >
+                                            <template v-slot:picker>
+                                                <add-set-button
+                                                    variant="between"
+                                                    :groups="groupConfigs"
+                                                    :sets="setConfigs"
+                                                    :index="index"
+                                                    :enabled="canAddSet"
+                                                    :is-first="index === 0"
+                                                    :show-connector="!(index === 0 && config.hide_display)"
+                                                    :loading-set="loadingSet"
+                                                    @added="addSet"
+                                                />
+                                            </template>
+                                        </ReplicatorSet>
+                                    </div>
+                                    <ReplicatorSet
+                                        v-else
+                                        :id="group.set._id"
+                                        :index="group.index"
+                                        :field-path="setFieldPathPrefix"
+                                        :meta-path="setMetaPathPrefix"
+                                        :values="group.set"
+                                        :config="setConfig(group.set.type)"
+                                        :sortable-item-class="sortableItemClass"
+                                        :sortable-handle-class="sortableHandleClass"
+                                        :collapsed="collapsed.includes(group.set._id)"
+                                        :enabled="group.set.enabled"
+                                        :read-only="isReadOnly"
+                                        :can-add-set="canAddSet"
+                                        :has-error="setHasError(group.set._id)"
+                                        :show-field-previews="config.previews"
+                                        @collapsed="collapseSet(group.set._id)"
+                                        @expanded="expandSet(group.set._id)"
+                                        @duplicated="duplicateSet(group.set._id)"
+                                        @removed="removed(group.set, group.index)"
+                                    >
+                                        <template v-slot:picker>
+                                            <add-set-button
+                                                variant="between"
+                                                :groups="groupConfigs"
+                                                :sets="setConfigs"
+                                                :index="group.index"
+                                                :enabled="canAddSet"
+                                                :is-first="group.index === 0"
+                                                :show-connector="!(group.index === 0 && config.hide_display)"
+                                                :loading-set="loadingSet"
+                                                @added="addSet"
+                                            />
+                                        </template>
+                                    </ReplicatorSet>
+                                </template>
                             </div>
                         </sortable-list>
 
@@ -146,6 +185,29 @@ export default {
             return this.config.sets;
         },
 
+        setGroups() {
+            const groups = [];
+            let current = null;
+
+            this.value.forEach((set, index) => {
+                if (this.setConfig(set.type).card) {
+                    if (current?.setType === set.type) {
+                        current.items.push({ set, index });
+                        return;
+                    }
+
+                    current = { setType: set.type, items: [{ set, index }] };
+                    groups.push({ type: 'card-group', ...current });
+                    return;
+                }
+
+                current = null;
+                groups.push({ type: 'set', set, index });
+            });
+
+            return groups;
+        },
+
         sortableItemClass() {
             return `${this.fieldId}-sortable-item`;
         },
@@ -196,6 +258,14 @@ export default {
             return this.setConfigs.find((c) => c.handle === handle) || {};
         },
 
+        groupKey(group) {
+            if (group.type === 'card-group') {
+                return `card-group-${group.setType}-${group.items[0].set._id}`;
+            }
+
+            return group.set._id;
+        },
+
         updated(index, set) {
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index + 1)]);
         },
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 3b7ef4c3a72..000a7197f66 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -132,7 +132,7 @@ reveal.use(rootEl, () => emit('expanded'));
             data-replicator-set
             class="relative w-full rounded-lg border border-gray-300 text-base dark:border-white/10 bg-white dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black shadow-ui-sm dark:[&_[data-ui-switch]]:border-gray-600 dark:[&_[data-ui-switch]]:border-1"
             :class="{
-                'border-red-500': hasError
+                'border-red-500': hasError,
             }"
             :data-collapsed="collapsed ?? undefined"
             :data-error="hasError ?? undefined"

From 2938557c531dc4a18133b7f7d2dd8047ef893260 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 14:17:01 +0100
Subject: [PATCH 05/31] Remove line connectors for replicator cards

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

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 39604ea3ef0..f7b21086988 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -62,7 +62,7 @@
                                                     :index="index"
                                                     :enabled="canAddSet"
                                                     :is-first="index === 0"
-                                                    :show-connector="!(index === 0 && config.hide_display)"
+                                                    :show-connector="false"
                                                     :loading-set="loadingSet"
                                                     @added="addSet"
                                                 />
@@ -112,7 +112,7 @@
                             v-if="canAddSet"
                             :groups="groupConfigs"
                             :sets="setConfigs"
-                            :show-connector="value.length > 0"
+                            :show-connector="value.length > 0 && !setConfig(value[value.length - 1].type).card"
                             :index="value.length"
                             :label="config.button_label"
                             :is-first="value.length === 0"

From de7903ab2699843431c07c899ea0d2a31e42372f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 15:49:30 +0100
Subject: [PATCH 06/31] Get the CSS working

---
 .../fieldtypes/replicator-card-sets.css       | 35 +++++++++++++++++++
 .../css/components/fieldtypes/replicator.css  |  3 --
 resources/css/cp.css                          |  1 +
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 resources/css/components/fieldtypes/replicator-card-sets.css
 delete mode 100644 resources/css/components/fieldtypes/replicator.css

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
new file mode 100644
index 00000000000..6df569cd59b
--- /dev/null
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -0,0 +1,35 @@
+/* ==========================================================================
+   REPLICATOR CARD SETS
+   ========================================================================== */
+
+.replicator-card-sets {
+    /* Has at least 3 children */
+    &:has(> :nth-child(3)) {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        grid-gap: 0.75rem;
+
+        .publish-fields {
+            /* Prevent columns and gaps exceeding the container */
+            grid-column-gap: unset;
+        }
+
+        .field_replicator_field-sortable-item {
+            position: relative;
+
+            [data-ui-popover-trigger] {
+                position: absolute;
+                left: -1.15rem;
+                height: 100%;
+                writing-mode: vertical-lr;
+                button .rounded-full {
+                    position: absolute;
+                    left: calc(0.5rem + 2px);
+                    height: 100%;
+                    width: 0.3rem;
+                    background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%,var(--color-gray-200) 100%);
+                }
+            }
+        }
+    }
+}
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
deleted file mode 100644
index cbf0f8dc3bf..00000000000
--- a/resources/css/components/fieldtypes/replicator.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/* ==========================================================================
-   REPLICATOR FIELDTYPE
-   ========================================================================== */
diff --git a/resources/css/cp.css b/resources/css/cp.css
index dd8ab0f1172..97bab663169 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -35,6 +35,7 @@
 @import './components/fieldtypes/markdown.css';
 @import './components/fieldtypes/partial.css';
 @import './components/fieldtypes/relationship.css';
+@import './components/fieldtypes/replicator-card-sets.css';
 @import './components/fieldtypes/section.css';
 @import './components/fieldtypes/table.css';
 @import './components/fieldtypes/width.css';

From 6b36382ee1141f0c79d76e170b7a9a7715e11205 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 16:50:24 +0100
Subject: [PATCH 07/31] Shift output toggle to overflow menu for cards so we
 have a bit more room

---
 .../js/components/fieldtypes/replicator/Set.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 000a7197f66..250516485ed 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -173,12 +173,27 @@ reveal.use(rootEl, () => emit('expanded'));
                     />
                 </button>
                 <div class="flex items-center gap-2" v-if="!readOnly">
-                    <Switch size="xs" :model-value="enabled" @update:model-value="toggleEnabledState" v-tooltip="enabled ? __('Included in output') : __('Hidden from output')" />
+                    <Switch
+                        v-if="!config.card"
+                        size="xs"
+                        :model-value="enabled"
+                        @update:model-value="toggleEnabledState"
+                        v-tooltip="enabled ? __('Included in output') : __('Hidden from output')"
+                    />
                     <Dropdown>
                         <template #trigger>
                             <Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" />
                         </template>
                         <DropdownMenu>
+                            <div
+                                v-if="config.card"
+                                class="col-span-2 flex items-center justify-between gap-4 rounded-lg px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300"
+                                @pointerdown.stop
+                            >
+                                <span>{{ __('Visible') }}</span>
+                                <Switch size="xs" :model-value="enabled" @update:model-value="toggleEnabledState" />
+                            </div>
+                            <DropdownSeparator v-if="config.card" />
                             <DropdownItem
                                 v-if="fieldActions.length"
                                 v-for="action in fieldActions"

From b009060eda3713cbacf4d892d26df398aa5a76e6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 16:58:04 +0100
Subject: [PATCH 08/31] Fix missing connector line

---
 .../fieldtypes/replicator/Replicator.vue      | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index f7b21086988..d7d625bb758 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -62,7 +62,7 @@
                                                     :index="index"
                                                     :enabled="canAddSet"
                                                     :is-first="index === 0"
-                                                    :show-connector="false"
+                                                    :show-connector="showCardGroupEntryConnector(group, index)"
                                                     :loading-set="loadingSet"
                                                     @added="addSet"
                                                 />
@@ -98,7 +98,7 @@
                                                 :index="group.index"
                                                 :enabled="canAddSet"
                                                 :is-first="group.index === 0"
-                                                :show-connector="!(group.index === 0 && config.hide_display)"
+                                                :show-connector="showSetConnector(group.index)"
                                                 :loading-set="loadingSet"
                                                 @added="addSet"
                                             />
@@ -266,6 +266,37 @@ export default {
             return group.set._id;
         },
 
+        showSetConnector(index) {
+            if (index === 0) {
+                return !this.config.hide_display;
+            }
+
+            const set = this.value[index];
+            const previous = this.value[index - 1];
+
+            if (
+                this.setConfig(set.type).card
+                && this.setConfig(previous.type).card
+                && previous.type === set.type
+            ) {
+                return false;
+            }
+
+            return true;
+        },
+
+        showCardGroupEntryConnector(group, index) {
+            if (group.items[0].index !== index) {
+                return false;
+            }
+
+            if (index === 0) {
+                return false;
+            }
+
+            return this.showSetConnector(index);
+        },
+
         updated(index, set) {
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index + 1)]);
         },

From cb91ed9d99aa4b08ca104af579047ea16ed8bf76 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 17:31:41 +0100
Subject: [PATCH 09/31] Fix drag and drop not working
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shopify Draggable’s swap animation doesn’t work well with display: grid.
Handle conflict — The outer (vertical) sortable used the same handle class as the cards. Dragging a card handle started a row drag instead of a card drag.
Fix: Separate handles — sortable-row-handle for full-width sets (vertical moves), sortable-handle for cards (horizontal moves inside a group).
---
 .../fieldtypes/replicator-card-sets.css       |  13 +-
 .../fieldtypes/replicator/Replicator.vue      | 147 ++++++++++++------
 2 files changed, 110 insertions(+), 50 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 6df569cd59b..59a5b5fcfb5 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -5,16 +5,21 @@
 .replicator-card-sets {
     /* Has at least 3 children */
     &:has(> :nth-child(3)) {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        grid-gap: 0.75rem;
+        display: flex;
+        flex-direction: row;
+        gap: 0.75rem;
+
+        > [class*='-sortable-item'] {
+            flex: 1 1 0;
+            min-width: 0;
+        }
 
         .publish-fields {
             /* Prevent columns and gaps exceeding the container */
             grid-column-gap: unset;
         }
 
-        .field_replicator_field-sortable-item {
+        [class*='-sortable-item'] {
             position: relative;
 
             [data-ui-popover-trigger] {
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index d7d625bb758..95cd0d92213 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -18,57 +18,74 @@
 
                     <section :class="{ 'mt-12 p-4': fullScreenMode }">
                         <sortable-list
-                            :model-value="value"
+                            :model-value="setGroups"
                             :vertical="true"
-                            :item-class="sortableItemClass"
-                            :handle-class="sortableHandleClass"
+                            :item-class="sortableRowClass"
+                            :handle-class="sortableRowHandleClass"
                             append-to="body"
                             constrain-dimensions
-                            @update:model-value="sorted($event)"
+                            @update:model-value="groupsSorted"
                             @dragstart="$emit('focus')"
                             @dragend="$emit('blur')"
                             v-slot="{}"
                         >
                             <div class="relative">
-                                <template v-for="group in setGroups" :key="groupKey(group)">
-                                    <div v-if="group.type === 'card-group'" class="replicator-card-sets">
-                                        <ReplicatorSet
-                                            v-for="{ set, index } in group.items"
-                                            :key="set._id"
-                                            :id="set._id"
-                                            :index
-                                            :field-path="setFieldPathPrefix"
-                                            :meta-path="setMetaPathPrefix"
-                                            :values="set"
-                                            :config="setConfig(set.type)"
-                                            :sortable-item-class="sortableItemClass"
-                                            :sortable-handle-class="sortableHandleClass"
-                                            :collapsed="collapsed.includes(set._id)"
-                                            :enabled="set.enabled"
-                                            :read-only="isReadOnly"
-                                            :can-add-set="canAddSet"
-                                            :has-error="setHasError(set._id)"
-                                            :show-field-previews="config.previews"
-                                            @collapsed="collapseSet(set._id)"
-                                            @expanded="expandSet(set._id)"
-                                            @duplicated="duplicateSet(set._id)"
-                                            @removed="removed(set, index)"
-                                        >
-                                            <template v-slot:picker>
-                                                <add-set-button
-                                                    variant="between"
-                                                    :groups="groupConfigs"
-                                                    :sets="setConfigs"
-                                                    :index="index"
-                                                    :enabled="canAddSet"
-                                                    :is-first="index === 0"
-                                                    :show-connector="showCardGroupEntryConnector(group, index)"
-                                                    :loading-set="loadingSet"
-                                                    @added="addSet"
-                                                />
-                                            </template>
-                                        </ReplicatorSet>
-                                    </div>
+                                <div
+                                    v-for="group in setGroups"
+                                    :key="groupKey(group)"
+                                    :class="sortableRowClass"
+                                >
+                                    <sortable-list
+                                        v-if="group.type === 'card-group'"
+                                        :model-value="group.items"
+                                        :vertical="false"
+                                        :item-class="sortableItemClass"
+                                        :handle-class="sortableHandleClass"
+                                        :options="cardSortableOptions"
+                                        append-to="body"
+                                        constrain-dimensions
+                                        @update:model-value="(items) => cardGroupSorted(group, items)"
+                                        v-slot="{}"
+                                    >
+                                        <div class="replicator-card-sets">
+                                            <ReplicatorSet
+                                                v-for="{ set, index } in group.items"
+                                                :key="set._id"
+                                                :id="set._id"
+                                                :index
+                                                :field-path="setFieldPathPrefix"
+                                                :meta-path="setMetaPathPrefix"
+                                                :values="set"
+                                                :config="setConfig(set.type)"
+                                                :sortable-item-class="sortableItemClass"
+                                                :sortable-handle-class="sortableHandleClass"
+                                                :collapsed="collapsed.includes(set._id)"
+                                                :enabled="set.enabled"
+                                                :read-only="isReadOnly"
+                                                :can-add-set="canAddSet"
+                                                :has-error="setHasError(set._id)"
+                                                :show-field-previews="config.previews"
+                                                @collapsed="collapseSet(set._id)"
+                                                @expanded="expandSet(set._id)"
+                                                @duplicated="duplicateSet(set._id)"
+                                                @removed="removed(set, index)"
+                                            >
+                                                <template v-slot:picker>
+                                                    <add-set-button
+                                                        variant="between"
+                                                        :groups="groupConfigs"
+                                                        :sets="setConfigs"
+                                                        :index="index"
+                                                        :enabled="canAddSet"
+                                                        :is-first="index === 0"
+                                                        :show-connector="showCardGroupEntryConnector(group, index)"
+                                                        :loading-set="loadingSet"
+                                                        @added="addSet"
+                                                    />
+                                                </template>
+                                            </ReplicatorSet>
+                                        </div>
+                                    </sortable-list>
                                     <ReplicatorSet
                                         v-else
                                         :id="group.set._id"
@@ -77,8 +94,8 @@
                                         :meta-path="setMetaPathPrefix"
                                         :values="group.set"
                                         :config="setConfig(group.set.type)"
-                                        :sortable-item-class="sortableItemClass"
-                                        :sortable-handle-class="sortableHandleClass"
+                                        :sortable-item-class="''"
+                                        :sortable-handle-class="sortableRowHandleClass"
                                         :collapsed="collapsed.includes(group.set._id)"
                                         :enabled="group.set.enabled"
                                         :read-only="isReadOnly"
@@ -104,7 +121,7 @@
                                             />
                                         </template>
                                     </ReplicatorSet>
-                                </template>
+                                </div>
                             </div>
                         </sortable-list>
 
@@ -212,10 +229,27 @@ export default {
             return `${this.fieldId}-sortable-item`;
         },
 
+        sortableRowClass() {
+            return `${this.fieldId}-sortable-row`;
+        },
+
+        sortableRowHandleClass() {
+            return `${this.fieldId}-sortable-row-handle`;
+        },
+
         sortableHandleClass() {
             return `${this.fieldId}-sortable-handle`;
         },
 
+        cardSortableOptions() {
+            return {
+                mirror: {
+                    constrainDimensions: true,
+                    yAxis: false,
+                },
+            };
+        },
+
         replicatorPreview() {
             if (!this.showFieldPreviews) return;
 
@@ -311,6 +345,27 @@ export default {
             this.update(value);
         },
 
+        groupsSorted(groups) {
+            this.update(groups.flatMap((group) => {
+                if (group.type === 'card-group') {
+                    return group.items.map((item) => item.set);
+                }
+
+                return [group.set];
+            }));
+        },
+
+        cardGroupSorted(group, items) {
+            const startIndex = group.items[0].index;
+            const endIndex = group.items[group.items.length - 1].index + 1;
+
+            this.update([
+                ...this.value.slice(0, startIndex),
+                ...items.map((item) => item.set),
+                ...this.value.slice(endIndex),
+            ]);
+        },
+
         addSet(handle, index) {
             this.loadingSet = handle;
 

From f011af7f07b77d432f8af16e2efc2135ad78f9f9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 28 Aug 2026 20:20:25 +0100
Subject: [PATCH 10/31] Back to grid

---
 .../fieldtypes/replicator-card-sets.css       | 53 ++++++-------
 .../fieldtypes/replicator/Replicator.vue      | 79 +++++++++++++------
 2 files changed, 79 insertions(+), 53 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 59a5b5fcfb5..8059f3d8d9f 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -3,38 +3,35 @@
    ========================================================================== */
 
 .replicator-card-sets {
-    /* Has at least 3 children */
-    &:has(> :nth-child(3)) {
-        display: flex;
-        flex-direction: row;
-        gap: 0.75rem;
+    display: grid;
+    grid-template-columns: repeat(var(--card-cols, 1), minmax(0, 1fr));
+    gap: 0.75rem;
 
-        > [class*='-sortable-item'] {
-            flex: 1 1 0;
-            min-width: 0;
-        }
+    > * {
+        min-width: 0;
+    }
 
-        .publish-fields {
-            /* Prevent columns and gaps exceeding the container */
-            grid-column-gap: unset;
-        }
+    .publish-fields {
+        /* Prevent columns and gaps exceeding the container */
+        grid-column-gap: unset;
+    }
+}
+
+.replicator-card-set-inset-picker {
+    position: relative;
 
-        [class*='-sortable-item'] {
-            position: relative;
+    [data-ui-popover-trigger] {
+        position: absolute;
+        left: -1.15rem;
+        height: 100%;
+        writing-mode: vertical-lr;
 
-            [data-ui-popover-trigger] {
-                position: absolute;
-                left: -1.15rem;
-                height: 100%;
-                writing-mode: vertical-lr;
-                button .rounded-full {
-                    position: absolute;
-                    left: calc(0.5rem + 2px);
-                    height: 100%;
-                    width: 0.3rem;
-                    background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%,var(--color-gray-200) 100%);
-                }
-            }
+        button .rounded-full {
+            position: absolute;
+            left: calc(0.5rem + 2px);
+            height: 100%;
+            width: 0.3rem;
+            background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
         }
     }
 }
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 95cd0d92213..8fe0beb3dce 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -47,41 +47,50 @@
                                         @update:model-value="(items) => cardGroupSorted(group, items)"
                                         v-slot="{}"
                                     >
-                                        <div class="replicator-card-sets">
+                                        <div
+                                            class="replicator-card-sets"
+                                            :style="{ '--card-cols': cardGroupColumns(group.items.length) }"
+                                        >
                                             <ReplicatorSet
-                                                v-for="{ set, index } in group.items"
-                                                :key="set._id"
-                                                :id="set._id"
-                                                :index
+                                                v-for="(item, positionInGroup) in group.items"
+                                                :key="item.set._id"
+                                                :id="item.set._id"
+                                                :index="item.index"
                                                 :field-path="setFieldPathPrefix"
                                                 :meta-path="setMetaPathPrefix"
-                                                :values="set"
-                                                :config="setConfig(set.type)"
+                                                :values="item.set"
+                                                :config="setConfig(item.set.type)"
                                                 :sortable-item-class="sortableItemClass"
                                                 :sortable-handle-class="sortableHandleClass"
-                                                :collapsed="collapsed.includes(set._id)"
-                                                :enabled="set.enabled"
+                                                :collapsed="collapsed.includes(item.set._id)"
+                                                :enabled="item.set.enabled"
                                                 :read-only="isReadOnly"
                                                 :can-add-set="canAddSet"
-                                                :has-error="setHasError(set._id)"
+                                                :has-error="setHasError(item.set._id)"
                                                 :show-field-previews="config.previews"
-                                                @collapsed="collapseSet(set._id)"
-                                                @expanded="expandSet(set._id)"
-                                                @duplicated="duplicateSet(set._id)"
-                                                @removed="removed(set, index)"
+                                                @collapsed="collapseSet(item.set._id)"
+                                                @expanded="expandSet(item.set._id)"
+                                                @duplicated="duplicateSet(item.set._id)"
+                                                @removed="removed(item.set, item.index)"
                                             >
                                                 <template v-slot:picker>
-                                                    <add-set-button
-                                                        variant="between"
-                                                        :groups="groupConfigs"
-                                                        :sets="setConfigs"
-                                                        :index="index"
-                                                        :enabled="canAddSet"
-                                                        :is-first="index === 0"
-                                                        :show-connector="showCardGroupEntryConnector(group, index)"
-                                                        :loading-set="loadingSet"
-                                                        @added="addSet"
-                                                    />
+                                                    <div
+                                                        :class="{
+                                                            'replicator-card-set-inset-picker': showCardInsetPicker(group.items.length, positionInGroup),
+                                                        }"
+                                                    >
+                                                        <add-set-button
+                                                            variant="between"
+                                                            :groups="groupConfigs"
+                                                            :sets="setConfigs"
+                                                            :index="item.index"
+                                                            :enabled="canAddSet"
+                                                            :is-first="item.index === 0"
+                                                            :show-connector="showCardGroupEntryConnector(group, item.index)"
+                                                            :loading-set="loadingSet"
+                                                            @added="addSet"
+                                                        />
+                                                    </div>
                                                 </template>
                                             </ReplicatorSet>
                                         </div>
@@ -331,6 +340,26 @@ export default {
             return this.showSetConnector(index);
         },
 
+        cardGroupColumns(count) {
+            if (count <= 1) {
+                return 1;
+            }
+
+            if (count === 2) {
+                return 2;
+            }
+
+            return 3;
+        },
+
+        showCardInsetPicker(cardCount, positionInGroup) {
+            if (positionInGroup === 0) {
+                return false;
+            }
+
+            return positionInGroup % this.cardGroupColumns(cardCount) !== 0;
+        },
+
         updated(index, set) {
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index + 1)]);
         },

From c6191d6d670294e8d2f085129947164b213abf54 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Sat, 29 Aug 2026 07:02:10 +0100
Subject: [PATCH 11/31] =?UTF-8?q?=F0=9F=8F=81=20Fix=20vertical=20drag=20fo?=
 =?UTF-8?q?r=20single=20replicator=20card=20sets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lone card groups no longer use the inner horizontal sortable, so their
set handle drives the outer row sortable. Multi-card groups get a
dedicated row handle for moving the whole group vertically.
---
 .../fieldtypes/replicator-card-sets.css       |  12 ++
 .../fieldtypes/replicator/Replicator.vue      | 144 ++++++++++++------
 2 files changed, 110 insertions(+), 46 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 8059f3d8d9f..ee1a3a113cd 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -6,6 +6,7 @@
     display: grid;
     grid-template-columns: repeat(var(--card-cols, 1), minmax(0, 1fr));
     gap: 0.75rem;
+    width: 100%;
 
     > * {
         min-width: 0;
@@ -17,6 +18,17 @@
     }
 }
 
+.replicator-card-group-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.replicator-card-group-handle {
+    margin-top: 0.625rem;
+}
+
 .replicator-card-set-inset-picker {
     position: relative;
 
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 8fe0beb3dce..c447f15e151 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -35,66 +35,116 @@
                                     :key="groupKey(group)"
                                     :class="sortableRowClass"
                                 >
-                                    <sortable-list
-                                        v-if="group.type === 'card-group'"
-                                        :model-value="group.items"
-                                        :vertical="false"
-                                        :item-class="sortableItemClass"
-                                        :handle-class="sortableHandleClass"
-                                        :options="cardSortableOptions"
-                                        append-to="body"
-                                        constrain-dimensions
-                                        @update:model-value="(items) => cardGroupSorted(group, items)"
-                                        v-slot="{}"
-                                    >
+                                    <template v-if="group.type === 'card-group'">
                                         <div
+                                            v-if="group.items.length === 1"
                                             class="replicator-card-sets"
-                                            :style="{ '--card-cols': cardGroupColumns(group.items.length) }"
+                                            :style="{ '--card-cols': 1 }"
                                         >
                                             <ReplicatorSet
-                                                v-for="(item, positionInGroup) in group.items"
-                                                :key="item.set._id"
-                                                :id="item.set._id"
-                                                :index="item.index"
+                                                :id="group.items[0].set._id"
+                                                :index="group.items[0].index"
                                                 :field-path="setFieldPathPrefix"
                                                 :meta-path="setMetaPathPrefix"
-                                                :values="item.set"
-                                                :config="setConfig(item.set.type)"
-                                                :sortable-item-class="sortableItemClass"
-                                                :sortable-handle-class="sortableHandleClass"
-                                                :collapsed="collapsed.includes(item.set._id)"
-                                                :enabled="item.set.enabled"
+                                                :values="group.items[0].set"
+                                                :config="setConfig(group.items[0].set.type)"
+                                                :sortable-item-class="''"
+                                                :sortable-handle-class="sortableRowHandleClass"
+                                                :collapsed="collapsed.includes(group.items[0].set._id)"
+                                                :enabled="group.items[0].set.enabled"
                                                 :read-only="isReadOnly"
                                                 :can-add-set="canAddSet"
-                                                :has-error="setHasError(item.set._id)"
+                                                :has-error="setHasError(group.items[0].set._id)"
                                                 :show-field-previews="config.previews"
-                                                @collapsed="collapseSet(item.set._id)"
-                                                @expanded="expandSet(item.set._id)"
-                                                @duplicated="duplicateSet(item.set._id)"
-                                                @removed="removed(item.set, item.index)"
+                                                @collapsed="collapseSet(group.items[0].set._id)"
+                                                @expanded="expandSet(group.items[0].set._id)"
+                                                @duplicated="duplicateSet(group.items[0].set._id)"
+                                                @removed="removed(group.items[0].set, group.items[0].index)"
                                             >
                                                 <template v-slot:picker>
-                                                    <div
-                                                        :class="{
-                                                            'replicator-card-set-inset-picker': showCardInsetPicker(group.items.length, positionInGroup),
-                                                        }"
-                                                    >
-                                                        <add-set-button
-                                                            variant="between"
-                                                            :groups="groupConfigs"
-                                                            :sets="setConfigs"
-                                                            :index="item.index"
-                                                            :enabled="canAddSet"
-                                                            :is-first="item.index === 0"
-                                                            :show-connector="showCardGroupEntryConnector(group, item.index)"
-                                                            :loading-set="loadingSet"
-                                                            @added="addSet"
-                                                        />
-                                                    </div>
+                                                    <add-set-button
+                                                        variant="between"
+                                                        :groups="groupConfigs"
+                                                        :sets="setConfigs"
+                                                        :index="group.items[0].index"
+                                                        :enabled="canAddSet"
+                                                        :is-first="group.items[0].index === 0"
+                                                        :show-connector="showCardGroupEntryConnector(group, group.items[0].index)"
+                                                        :loading-set="loadingSet"
+                                                        @added="addSet"
+                                                    />
                                                 </template>
                                             </ReplicatorSet>
                                         </div>
-                                    </sortable-list>
+                                        <div v-else class="replicator-card-group-row">
+                                            <Icon
+                                                v-if="!isReadOnly"
+                                                name="handles"
+                                                :class="sortableRowHandleClass"
+                                                class="replicator-card-group-handle size-4 shrink-0 cursor-grab text-gray-400"
+                                            />
+                                            <sortable-list
+                                                :model-value="group.items"
+                                                :vertical="false"
+                                                :item-class="sortableItemClass"
+                                                :handle-class="sortableHandleClass"
+                                                :options="cardSortableOptions"
+                                                append-to="body"
+                                                constrain-dimensions
+                                                class="min-w-0 flex-1"
+                                                @update:model-value="(items) => cardGroupSorted(group, items)"
+                                                v-slot="{}"
+                                            >
+                                                <div
+                                                    class="replicator-card-sets"
+                                                    :style="{ '--card-cols': cardGroupColumns(group.items.length) }"
+                                                >
+                                                    <ReplicatorSet
+                                                        v-for="(item, positionInGroup) in group.items"
+                                                        :key="item.set._id"
+                                                        :id="item.set._id"
+                                                        :index="item.index"
+                                                        :field-path="setFieldPathPrefix"
+                                                        :meta-path="setMetaPathPrefix"
+                                                        :values="item.set"
+                                                        :config="setConfig(item.set.type)"
+                                                        :sortable-item-class="sortableItemClass"
+                                                        :sortable-handle-class="sortableHandleClass"
+                                                        :collapsed="collapsed.includes(item.set._id)"
+                                                        :enabled="item.set.enabled"
+                                                        :read-only="isReadOnly"
+                                                        :can-add-set="canAddSet"
+                                                        :has-error="setHasError(item.set._id)"
+                                                        :show-field-previews="config.previews"
+                                                        @collapsed="collapseSet(item.set._id)"
+                                                        @expanded="expandSet(item.set._id)"
+                                                        @duplicated="duplicateSet(item.set._id)"
+                                                        @removed="removed(item.set, item.index)"
+                                                    >
+                                                        <template v-slot:picker>
+                                                            <div
+                                                                :class="{
+                                                                    'replicator-card-set-inset-picker': showCardInsetPicker(group.items.length, positionInGroup),
+                                                                }"
+                                                            >
+                                                                <add-set-button
+                                                                    variant="between"
+                                                                    :groups="groupConfigs"
+                                                                    :sets="setConfigs"
+                                                                    :index="item.index"
+                                                                    :enabled="canAddSet"
+                                                                    :is-first="item.index === 0"
+                                                                    :show-connector="showCardGroupEntryConnector(group, item.index)"
+                                                                    :loading-set="loadingSet"
+                                                                    @added="addSet"
+                                                                />
+                                                            </div>
+                                                        </template>
+                                                    </ReplicatorSet>
+                                                </div>
+                                            </sortable-list>
+                                        </div>
+                                    </template>
                                     <ReplicatorSet
                                         v-else
                                         :id="group.set._id"
@@ -159,6 +209,7 @@ import ReplicatorSet from './Set.vue';
 import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
+import { Icon } from '@/components/ui';
 import { data_get } from "@/bootstrap/globals.js";
 
 export default {
@@ -168,6 +219,7 @@ export default {
         ReplicatorSet,
         SortableList,
         AddSetButton,
+        Icon,
     },
 
     data() {

From 51848c250d0ba670630725fc5a1d1f6bcd04d41d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 09:52:51 +0100
Subject: [PATCH 12/31] =?UTF-8?q?=F0=9F=8F=81=20Switch=20things=20so=20you?=
 =?UTF-8?q?=20can=20drag=20cards=20in=20and=20out=20of=20card=20sets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fieldtypes/replicator-card-sets.css       |  40 +--
 .../fieldtypes/replicator/Replicator.vue      | 298 ++++++------------
 2 files changed, 116 insertions(+), 222 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index ee1a3a113cd..4b4e3bca14f 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -2,31 +2,35 @@
    REPLICATOR CARD SETS
    ========================================================================== */
 
-.replicator-card-sets {
-    display: grid;
-    grid-template-columns: repeat(var(--card-cols, 1), minmax(0, 1fr));
+.replicator-set-list {
+    display: flex;
+    flex-wrap: wrap;
     gap: 0.75rem;
-    width: 100%;
+    align-items: start;
+}
 
-    > * {
-        min-width: 0;
-    }
+.replicator-set-slot--full,
+.replicator-set-slot--card-cols-1 {
+    width: 100%;
+    min-width: 0;
+}
 
-    .publish-fields {
-        /* Prevent columns and gaps exceeding the container */
-        grid-column-gap: unset;
-    }
+.replicator-set-slot--card-cols-2 {
+    width: calc((100% - 0.75rem) / 2);
+    min-width: 0;
 }
 
-.replicator-card-group-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    width: 100%;
+.replicator-set-slot--card-cols-3 {
+    width: calc((100% - 1.5rem) / 3);
+    min-width: 0;
 }
 
-.replicator-card-group-handle {
-    margin-top: 0.625rem;
+.replicator-set-slot--full .publish-fields,
+.replicator-set-slot--card-cols-1 .publish-fields,
+.replicator-set-slot--card-cols-2 .publish-fields,
+.replicator-set-slot--card-cols-3 .publish-fields {
+    /* Prevent columns and gaps exceeding the container */
+    grid-column-gap: unset;
 }
 
 .replicator-card-set-inset-picker {
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index c447f15e151..ff2757e2bc8 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -18,166 +18,65 @@
 
                     <section :class="{ 'mt-12 p-4': fullScreenMode }">
                         <sortable-list
-                            :model-value="setGroups"
+                            :model-value="value"
                             :vertical="true"
-                            :item-class="sortableRowClass"
+                            :item-class="sortableItemClass"
                             :handle-class="sortableRowHandleClass"
                             append-to="body"
                             constrain-dimensions
-                            @update:model-value="groupsSorted"
+                            :animate="false"
+                            @update:model-value="sorted"
                             @dragstart="$emit('focus')"
                             @dragend="$emit('blur')"
                             v-slot="{}"
                         >
-                            <div class="relative">
+                            <div class="replicator-set-list relative">
                                 <div
-                                    v-for="group in setGroups"
-                                    :key="groupKey(group)"
-                                    :class="sortableRowClass"
+                                    v-for="(set, index) in value"
+                                    :key="set._id"
+                                    :class="[sortableItemClass, cardLayouts[index].className]"
                                 >
-                                    <template v-if="group.type === 'card-group'">
-                                        <div
-                                            v-if="group.items.length === 1"
-                                            class="replicator-card-sets"
-                                            :style="{ '--card-cols': 1 }"
-                                        >
-                                            <ReplicatorSet
-                                                :id="group.items[0].set._id"
-                                                :index="group.items[0].index"
-                                                :field-path="setFieldPathPrefix"
-                                                :meta-path="setMetaPathPrefix"
-                                                :values="group.items[0].set"
-                                                :config="setConfig(group.items[0].set.type)"
-                                                :sortable-item-class="''"
-                                                :sortable-handle-class="sortableRowHandleClass"
-                                                :collapsed="collapsed.includes(group.items[0].set._id)"
-                                                :enabled="group.items[0].set.enabled"
-                                                :read-only="isReadOnly"
-                                                :can-add-set="canAddSet"
-                                                :has-error="setHasError(group.items[0].set._id)"
-                                                :show-field-previews="config.previews"
-                                                @collapsed="collapseSet(group.items[0].set._id)"
-                                                @expanded="expandSet(group.items[0].set._id)"
-                                                @duplicated="duplicateSet(group.items[0].set._id)"
-                                                @removed="removed(group.items[0].set, group.items[0].index)"
-                                            >
-                                                <template v-slot:picker>
-                                                    <add-set-button
-                                                        variant="between"
-                                                        :groups="groupConfigs"
-                                                        :sets="setConfigs"
-                                                        :index="group.items[0].index"
-                                                        :enabled="canAddSet"
-                                                        :is-first="group.items[0].index === 0"
-                                                        :show-connector="showCardGroupEntryConnector(group, group.items[0].index)"
-                                                        :loading-set="loadingSet"
-                                                        @added="addSet"
-                                                    />
-                                                </template>
-                                            </ReplicatorSet>
-                                        </div>
-                                        <div v-else class="replicator-card-group-row">
-                                            <Icon
-                                                v-if="!isReadOnly"
-                                                name="handles"
-                                                :class="sortableRowHandleClass"
-                                                class="replicator-card-group-handle size-4 shrink-0 cursor-grab text-gray-400"
-                                            />
-                                            <sortable-list
-                                                :model-value="group.items"
-                                                :vertical="false"
-                                                :item-class="sortableItemClass"
-                                                :handle-class="sortableHandleClass"
-                                                :options="cardSortableOptions"
-                                                append-to="body"
-                                                constrain-dimensions
-                                                class="min-w-0 flex-1"
-                                                @update:model-value="(items) => cardGroupSorted(group, items)"
-                                                v-slot="{}"
-                                            >
-                                                <div
-                                                    class="replicator-card-sets"
-                                                    :style="{ '--card-cols': cardGroupColumns(group.items.length) }"
-                                                >
-                                                    <ReplicatorSet
-                                                        v-for="(item, positionInGroup) in group.items"
-                                                        :key="item.set._id"
-                                                        :id="item.set._id"
-                                                        :index="item.index"
-                                                        :field-path="setFieldPathPrefix"
-                                                        :meta-path="setMetaPathPrefix"
-                                                        :values="item.set"
-                                                        :config="setConfig(item.set.type)"
-                                                        :sortable-item-class="sortableItemClass"
-                                                        :sortable-handle-class="sortableHandleClass"
-                                                        :collapsed="collapsed.includes(item.set._id)"
-                                                        :enabled="item.set.enabled"
-                                                        :read-only="isReadOnly"
-                                                        :can-add-set="canAddSet"
-                                                        :has-error="setHasError(item.set._id)"
-                                                        :show-field-previews="config.previews"
-                                                        @collapsed="collapseSet(item.set._id)"
-                                                        @expanded="expandSet(item.set._id)"
-                                                        @duplicated="duplicateSet(item.set._id)"
-                                                        @removed="removed(item.set, item.index)"
-                                                    >
-                                                        <template v-slot:picker>
-                                                            <div
-                                                                :class="{
-                                                                    'replicator-card-set-inset-picker': showCardInsetPicker(group.items.length, positionInGroup),
-                                                                }"
-                                                            >
-                                                                <add-set-button
-                                                                    variant="between"
-                                                                    :groups="groupConfigs"
-                                                                    :sets="setConfigs"
-                                                                    :index="item.index"
-                                                                    :enabled="canAddSet"
-                                                                    :is-first="item.index === 0"
-                                                                    :show-connector="showCardGroupEntryConnector(group, item.index)"
-                                                                    :loading-set="loadingSet"
-                                                                    @added="addSet"
-                                                                />
-                                                            </div>
-                                                        </template>
-                                                    </ReplicatorSet>
-                                                </div>
-                                            </sortable-list>
-                                        </div>
-                                    </template>
                                     <ReplicatorSet
-                                        v-else
-                                        :id="group.set._id"
-                                        :index="group.index"
+                                        :id="set._id"
+                                        :index="index"
                                         :field-path="setFieldPathPrefix"
                                         :meta-path="setMetaPathPrefix"
-                                        :values="group.set"
-                                        :config="setConfig(group.set.type)"
+                                        :values="set"
+                                        :config="setConfig(set.type)"
                                         :sortable-item-class="''"
                                         :sortable-handle-class="sortableRowHandleClass"
-                                        :collapsed="collapsed.includes(group.set._id)"
-                                        :enabled="group.set.enabled"
+                                        :collapsed="collapsed.includes(set._id)"
+                                        :enabled="set.enabled"
                                         :read-only="isReadOnly"
                                         :can-add-set="canAddSet"
-                                        :has-error="setHasError(group.set._id)"
+                                        :has-error="setHasError(set._id)"
                                         :show-field-previews="config.previews"
-                                        @collapsed="collapseSet(group.set._id)"
-                                        @expanded="expandSet(group.set._id)"
-                                        @duplicated="duplicateSet(group.set._id)"
-                                        @removed="removed(group.set, group.index)"
+                                        @collapsed="collapseSet(set._id)"
+                                        @expanded="expandSet(set._id)"
+                                        @duplicated="duplicateSet(set._id)"
+                                        @removed="removed(set, index)"
                                     >
                                         <template v-slot:picker>
-                                            <add-set-button
-                                                variant="between"
-                                                :groups="groupConfigs"
-                                                :sets="setConfigs"
-                                                :index="group.index"
-                                                :enabled="canAddSet"
-                                                :is-first="group.index === 0"
-                                                :show-connector="showSetConnector(group.index)"
-                                                :loading-set="loadingSet"
-                                                @added="addSet"
-                                            />
+                                            <div
+                                                :class="{
+                                                    'replicator-card-set-inset-picker': showCardInsetPicker(
+                                                        cardLayouts[index].groupSize,
+                                                        cardLayouts[index].positionInGroup,
+                                                    ),
+                                                }"
+                                            >
+                                                <add-set-button
+                                                    variant="between"
+                                                    :groups="groupConfigs"
+                                                    :sets="setConfigs"
+                                                    :index="index"
+                                                    :enabled="canAddSet"
+                                                    :is-first="index === 0"
+                                                    :show-connector="showCardEntryConnector(index)"
+                                                    :loading-set="loadingSet"
+                                                    @added="addSet"
+                                                />
+                                            </div>
                                         </template>
                                     </ReplicatorSet>
                                 </div>
@@ -209,7 +108,6 @@ import ReplicatorSet from './Set.vue';
 import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
-import { Icon } from '@/components/ui';
 import { data_get } from "@/bootstrap/globals.js";
 
 export default {
@@ -219,7 +117,6 @@ export default {
         ReplicatorSet,
         SortableList,
         AddSetButton,
-        Icon,
     },
 
     data() {
@@ -263,52 +160,49 @@ export default {
             return this.config.sets;
         },
 
-        setGroups() {
-            const groups = [];
-            let current = null;
-
-            this.value.forEach((set, index) => {
-                if (this.setConfig(set.type).card) {
-                    if (current?.setType === set.type) {
-                        current.items.push({ set, index });
-                        return;
-                    }
-
-                    current = { setType: set.type, items: [{ set, index }] };
-                    groups.push({ type: 'card-group', ...current });
-                    return;
-                }
-
-                current = null;
-                groups.push({ type: 'set', set, index });
-            });
-
-            return groups;
-        },
-
         sortableItemClass() {
             return `${this.fieldId}-sortable-item`;
         },
 
-        sortableRowClass() {
-            return `${this.fieldId}-sortable-row`;
-        },
-
         sortableRowHandleClass() {
             return `${this.fieldId}-sortable-row-handle`;
         },
 
-        sortableHandleClass() {
-            return `${this.fieldId}-sortable-handle`;
-        },
+        cardLayouts() {
+            return this.value.map((set, index) => {
+                if (!this.setConfig(set.type).card) {
+                    return {
+                        isCard: false,
+                        groupSize: 1,
+                        positionInGroup: 0,
+                        columns: 1,
+                        className: 'replicator-set-slot--full',
+                    };
+                }
 
-        cardSortableOptions() {
-            return {
-                mirror: {
-                    constrainDimensions: true,
-                    yAxis: false,
-                },
-            };
+                let groupStart = index;
+
+                while (groupStart > 0 && this.isSameCardGroup(this.value[groupStart - 1], set)) {
+                    groupStart--;
+                }
+
+                let groupEnd = index;
+
+                while (groupEnd < this.value.length - 1 && this.isSameCardGroup(this.value[groupEnd + 1], set)) {
+                    groupEnd++;
+                }
+
+                const groupSize = groupEnd - groupStart + 1;
+                const columns = this.cardGroupColumns(groupSize);
+
+                return {
+                    isCard: true,
+                    groupSize,
+                    positionInGroup: index - groupStart,
+                    columns,
+                    className: `replicator-set-slot--card-cols-${columns}`,
+                };
+            });
         },
 
         replicatorPreview() {
@@ -353,12 +247,12 @@ export default {
             return this.setConfigs.find((c) => c.handle === handle) || {};
         },
 
-        groupKey(group) {
-            if (group.type === 'card-group') {
-                return `card-group-${group.setType}-${group.items[0].set._id}`;
-            }
-
-            return group.set._id;
+        isSameCardGroup(a, b) {
+            return (
+                this.setConfig(a.type).card
+                && this.setConfig(b.type).card
+                && a.type === b.type
+            );
         },
 
         showSetConnector(index) {
@@ -380,8 +274,10 @@ export default {
             return true;
         },
 
-        showCardGroupEntryConnector(group, index) {
-            if (group.items[0].index !== index) {
+        showCardEntryConnector(index) {
+            const layout = this.cardLayouts[index];
+
+            if (layout.isCard && layout.positionInGroup !== 0) {
                 return false;
             }
 
@@ -423,28 +319,22 @@ export default {
         },
 
         sorted(value) {
-            this.update(value);
-        },
+            const ids = new Set();
 
-        groupsSorted(groups) {
-            this.update(groups.flatMap((group) => {
-                if (group.type === 'card-group') {
-                    return group.items.map((item) => item.set);
+            const unique = value.filter((set) => {
+                if (ids.has(set._id)) {
+                    return false;
                 }
 
-                return [group.set];
-            }));
-        },
+                ids.add(set._id);
+                return true;
+            });
 
-        cardGroupSorted(group, items) {
-            const startIndex = group.items[0].index;
-            const endIndex = group.items[group.items.length - 1].index + 1;
+            if (unique.length !== this.value.length) {
+                return;
+            }
 
-            this.update([
-                ...this.value.slice(0, startIndex),
-                ...items.map((item) => item.set),
-                ...this.value.slice(endIndex),
-            ]);
+            this.update(unique);
         },
 
         addSet(handle, index) {

From 314329a89175b70e0707475fc8c7ea005c3c0c8a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 10:22:11 +0100
Subject: [PATCH 13/31] Get the insert handle working again

---
 .../fieldtypes/replicator-card-sets.css       | 12 +++---
 .../fieldtypes/replicator/AddSetButton.vue    |  2 +-
 .../fieldtypes/replicator/Replicator.vue      | 42 +++++++++----------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 4b4e3bca14f..206893a3208 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -1,7 +1,5 @@
-/* ==========================================================================
-   REPLICATOR CARD SETS
-   ========================================================================== */
-
+/* GROUP REPLICATOR CARD SETS
+=================================================== */
 .replicator-set-list {
     display: flex;
     flex-wrap: wrap;
@@ -38,12 +36,14 @@
 
     [data-ui-popover-trigger] {
         position: absolute;
+        inset: 0;
         left: -1.15rem;
-        height: 100%;
         writing-mode: vertical-lr;
 
-        button .rounded-full {
+        [data-insert-handle] {
+            width: 1rem;
             position: absolute;
+            top: 0;
             left: calc(0.5rem + 2px);
             height: 100%;
             width: 0.3rem;
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index 4145a83a725..fd5f84fd4d6 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -30,7 +30,7 @@
                     tabindex="-1"
                 >
                     <div class="h-full flex flex-col justify-center">
-                        <div class="rounded-full bg-[linear-gradient(90deg,theme(colors.gray.100)_0%,theme(colors.gray.200)_50%,theme(colors.gray.100)_100%)] dark:bg-[linear-gradient(90deg,theme(colors.gray.800)_0%,theme(colors.gray.700)_50%,theme(colors.gray.800)_100%)] h-2" />
+                        <div data-insert-handle class="rounded-full bg-[linear-gradient(90deg,theme(colors.gray.100)_0%,theme(colors.gray.200)_50%,theme(colors.gray.100)_100%)] dark:bg-[linear-gradient(90deg,theme(colors.gray.800)_0%,theme(colors.gray.700)_50%,theme(colors.gray.800)_100%)] h-2" />
                     </div>
                 </button>
                 <Button v-if="enabled" round icon="plus" size="sm" class="-my-4 z-3 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity delay-10 duration-250" />
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index ff2757e2bc8..c8f56e734d4 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -34,7 +34,16 @@
                                 <div
                                     v-for="(set, index) in value"
                                     :key="set._id"
-                                    :class="[sortableItemClass, cardLayouts[index].className]"
+                                    :class="[
+                                        sortableItemClass,
+                                        cardLayouts[index].className,
+                                        {
+                                            'replicator-card-set-inset-picker': showCardInsetPicker(
+                                                cardLayouts[index].groupSize,
+                                                cardLayouts[index].positionInGroup,
+                                            ),
+                                        },
+                                    ]"
                                 >
                                     <ReplicatorSet
                                         :id="set._id"
@@ -57,26 +66,17 @@
                                         @removed="removed(set, index)"
                                     >
                                         <template v-slot:picker>
-                                            <div
-                                                :class="{
-                                                    'replicator-card-set-inset-picker': showCardInsetPicker(
-                                                        cardLayouts[index].groupSize,
-                                                        cardLayouts[index].positionInGroup,
-                                                    ),
-                                                }"
-                                            >
-                                                <add-set-button
-                                                    variant="between"
-                                                    :groups="groupConfigs"
-                                                    :sets="setConfigs"
-                                                    :index="index"
-                                                    :enabled="canAddSet"
-                                                    :is-first="index === 0"
-                                                    :show-connector="showCardEntryConnector(index)"
-                                                    :loading-set="loadingSet"
-                                                    @added="addSet"
-                                                />
-                                            </div>
+                                            <add-set-button
+                                                variant="between"
+                                                :groups="groupConfigs"
+                                                :sets="setConfigs"
+                                                :index="index"
+                                                :enabled="canAddSet"
+                                                :is-first="index === 0"
+                                                :show-connector="showCardEntryConnector(index)"
+                                                :loading-set="loadingSet"
+                                                @added="addSet"
+                                            />
                                         </template>
                                     </ReplicatorSet>
                                 </div>

From d9e52b9b06e1a179c18448bb160664ff6d4a2939 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 10:28:04 +0100
Subject: [PATCH 14/31] =?UTF-8?q?=F0=9F=8F=81=20Show=20left=20insert=20han?=
 =?UTF-8?q?dle=20on=20every=20card=20in=20a=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply inset picker styling to all sets in a multi-card group, including
the first and last cards. Hide the dashed entry connector for card rows
since the vertical handle replaces it.
---
 .../components/fieldtypes/replicator/Replicator.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index c8f56e734d4..5354e788d70 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -40,7 +40,6 @@
                                         {
                                             'replicator-card-set-inset-picker': showCardInsetPicker(
                                                 cardLayouts[index].groupSize,
-                                                cardLayouts[index].positionInGroup,
                                             ),
                                         },
                                     ]"
@@ -281,6 +280,10 @@ export default {
                 return false;
             }
 
+            if (layout.isCard && layout.groupSize > 1) {
+                return false;
+            }
+
             if (index === 0) {
                 return false;
             }
@@ -300,12 +303,8 @@ export default {
             return 3;
         },
 
-        showCardInsetPicker(cardCount, positionInGroup) {
-            if (positionInGroup === 0) {
-                return false;
-            }
-
-            return positionInGroup % this.cardGroupColumns(cardCount) !== 0;
+        showCardInsetPicker(cardCount) {
+            return cardCount > 1;
         },
 
         updated(index, set) {

From e4be3e517aec90749b0548c4bf49406fbc3a008b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 10:38:06 +0100
Subject: [PATCH 15/31] Fix gaps

---
 resources/css/components/fieldtypes/replicator-card-sets.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 206893a3208..57325d8119e 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -3,7 +3,7 @@
 .replicator-set-list {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.75rem;
+    column-gap: 0.75rem;
     align-items: start;
 }
 
@@ -33,6 +33,7 @@
 
 .replicator-card-set-inset-picker {
     position: relative;
+    @apply mt-6;
 
     [data-ui-popover-trigger] {
         position: absolute;

From 21e9062a1c5030d213d64674e5dbd0e73f8a2b44 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 11:23:25 +0100
Subject: [PATCH 16/31] TRICKSY LITTLE HOBBITSES

(get the first replicator control above the card)
---
 .../fieldtypes/replicator-card-sets.css       | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 57325d8119e..5cafa40ed50 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -32,23 +32,38 @@
 }
 
 .replicator-card-set-inset-picker {
-    position: relative;
-    @apply mt-6;
+    &:nth-child(1 of &) {
+        --pull: 1.5rem;
+        /* Since the popover trigger is now absolutely positioned we need to compensate for the space it took up */
+        margin-block-start: var(--pull);
+        [data-ui-popover-trigger] {
+            position: absolute;
+            z-index: var(--z-index-above);
+            transform: translateY(calc(0% - var(--pull)));
+            width: 100%;
+        }
+    }
 
-    [data-ui-popover-trigger] {
-        position: absolute;
-        inset: 0;
-        left: -1.15rem;
-        writing-mode: vertical-lr;
+    &:not(:nth-child(1 of &)) {
+        /* Don't use position: relative; on the first-child, so we can break out of the container to make the "+" control full-width */
+        position: relative;
+        margin-block-start: 1.5rem;
 
-        [data-insert-handle] {
-            width: 1rem;
+        [data-ui-popover-trigger] {
             position: absolute;
-            top: 0;
-            left: calc(0.5rem + 2px);
-            height: 100%;
-            width: 0.3rem;
-            background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
+            inset: 0;
+            left: -1.15rem;
+            writing-mode: vertical-lr;
+
+            [data-insert-handle] {
+                width: 1rem;
+                position: absolute;
+                top: 0;
+                left: calc(0.5rem + 2px);
+                height: 100%;
+                width: 0.3rem;
+                background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
+            }
         }
     }
 }

From a5f96b2a8bb67e75b4ec0166807efbbd4bdeeabb Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 11:34:29 +0100
Subject: [PATCH 17/31] Get connector back

---
 .../fieldtypes/replicator-card-sets.css       | 69 +++++++++++--------
 .../fieldtypes/replicator/Replicator.vue      |  8 +--
 2 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 5cafa40ed50..9562c6c4ad4 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -31,39 +31,52 @@
     grid-column-gap: unset;
 }
 
-.replicator-card-set-inset-picker {
-    &:nth-child(1 of &) {
-        --pull: 1.5rem;
-        /* Since the popover trigger is now absolutely positioned we need to compensate for the space it took up */
-        margin-block-start: var(--pull);
-        [data-ui-popover-trigger] {
+.replicator-card-set-inset-picker:not(.replicator-card-set-row-start) {
+    position: relative;
+    margin-block-start: 1.5rem;
+
+    [data-ui-popover-trigger] {
+        position: absolute;
+        inset: 0;
+        left: -1.15rem;
+        writing-mode: vertical-lr;
+
+        [data-insert-handle] {
             position: absolute;
-            z-index: var(--z-index-above);
-            transform: translateY(calc(0% - var(--pull)));
-            width: 100%;
+            top: 0;
+            left: calc(0.5rem + 2px);
+            height: 100%;
+            width: 0.3rem;
+            background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
         }
     }
+}
 
-    &:not(:nth-child(1 of &)) {
-        /* Don't use position: relative; on the first-child, so we can break out of the container to make the "+" control full-width */
-        position: relative;
-        margin-block-start: 1.5rem;
+.replicator-card-set-row-start:not(.replicator-card-set-has-entry-connector) {
+    --pull: 1.5rem;
 
-        [data-ui-popover-trigger] {
-            position: absolute;
-            inset: 0;
-            left: -1.15rem;
-            writing-mode: vertical-lr;
+    [data-ui-popover-trigger] {
+        position: absolute;
+        z-index: var(--z-index-above);
+        transform: translateY(calc(0% - var(--pull)));
+        width: 100%;
+    }
+}
 
-            [data-insert-handle] {
-                width: 1rem;
-                position: absolute;
-                top: 0;
-                left: calc(0.5rem + 2px);
-                height: 100%;
-                width: 0.3rem;
-                background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
-            }
-        }
+.replicator-card-set-row-start.replicator-card-set-has-entry-connector {
+    --pull: 1.5rem;
+
+    [data-ui-popover-trigger] {
+        position: relative;
+        z-index: var(--z-index-above);
+        width: 100%;
     }
 }
+
+.replicator-set-slot--card-cols-2.replicator-card-set-row-start.replicator-card-set-has-entry-connector [data-ui-popover-trigger] {
+    width: calc(200% + 0.75rem);
+}
+
+.replicator-set-slot--card-cols-3.replicator-card-set-row-start.replicator-card-set-has-entry-connector [data-ui-popover-trigger] {
+    width: calc(300% + 1.5rem);
+}
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 5354e788d70..433043a30eb 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -41,6 +41,10 @@
                                             'replicator-card-set-inset-picker': showCardInsetPicker(
                                                 cardLayouts[index].groupSize,
                                             ),
+                                            'replicator-card-set-row-start': cardLayouts[index].isCard
+                                                && cardLayouts[index].positionInGroup === 0
+                                                && cardLayouts[index].groupSize > 1,
+                                            'replicator-card-set-has-entry-connector': showCardEntryConnector(index),
                                         },
                                     ]"
                                 >
@@ -280,10 +284,6 @@ export default {
                 return false;
             }
 
-            if (layout.isCard && layout.groupSize > 1) {
-                return false;
-            }
-
             if (index === 0) {
                 return false;
             }

From 5b16ead488d1808585ccd2c119eea3801efbcfa2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 11:45:36 +0100
Subject: [PATCH 18/31] Tidy CSS

---
 .../fieldtypes/replicator-card-sets.css       | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 9562c6c4ad4..130cafb10bb 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -23,12 +23,14 @@
     min-width: 0;
 }
 
-.replicator-set-slot--full .publish-fields,
-.replicator-set-slot--card-cols-1 .publish-fields,
-.replicator-set-slot--card-cols-2 .publish-fields,
-.replicator-set-slot--card-cols-3 .publish-fields {
-    /* Prevent columns and gaps exceeding the container */
-    grid-column-gap: unset;
+.replicator-set-slot--full,
+.replicator-set-slot--card-cols-1,
+.replicator-set-slot--card-cols-2,
+.replicator-set-slot--card-cols-3 {
+    .publish-fields {
+        /* Prevent columns and gaps exceeding the container */
+        grid-column-gap: unset;
+    }
 }
 
 .replicator-card-set-inset-picker:not(.replicator-card-set-row-start) {
@@ -52,31 +54,31 @@
     }
 }
 
-.replicator-card-set-row-start:not(.replicator-card-set-has-entry-connector) {
+.replicator-card-set-row-start {
     --pull: 1.5rem;
 
-    [data-ui-popover-trigger] {
-        position: absolute;
-        z-index: var(--z-index-above);
-        transform: translateY(calc(0% - var(--pull)));
-        width: 100%;
+    &:not(.replicator-card-set-has-entry-connector) {
+        [data-ui-popover-trigger] {
+            position: absolute;
+            z-index: var(--z-index-above);
+            transform: translateY(calc(0% - var(--pull)));
+            width: 100%;
+        }
     }
-}
-
-.replicator-card-set-row-start.replicator-card-set-has-entry-connector {
-    --pull: 1.5rem;
 
-    [data-ui-popover-trigger] {
-        position: relative;
-        z-index: var(--z-index-above);
-        width: 100%;
-    }
-}
+    &.replicator-card-set-has-entry-connector {
+        [data-ui-popover-trigger] {
+            position: relative;
+            z-index: var(--z-index-above);
+            width: 100%;
+        }
 
-.replicator-set-slot--card-cols-2.replicator-card-set-row-start.replicator-card-set-has-entry-connector [data-ui-popover-trigger] {
-    width: calc(200% + 0.75rem);
-}
+        &.replicator-set-slot--card-cols-2 [data-ui-popover-trigger] {
+            width: calc(200% + 0.75rem);
+        }
 
-.replicator-set-slot--card-cols-3.replicator-card-set-row-start.replicator-card-set-has-entry-connector [data-ui-popover-trigger] {
-    width: calc(300% + 1.5rem);
+        &.replicator-set-slot--card-cols-3 [data-ui-popover-trigger] {
+            width: calc(300% + 1.5rem);
+        }
+    }
 }

From 3c10e35eea7d44dd55a86383192445ed52aea88c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 12:03:50 +0100
Subject: [PATCH 19/31] Increase insert handle thickness slightly

---
 .../css/components/fieldtypes/replicator-card-sets.css   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 130cafb10bb..2107c8c726f 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -48,10 +48,17 @@
             top: 0;
             left: calc(0.5rem + 2px);
             height: 100%;
-            width: 0.3rem;
+            width: 0.325rem;
             background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
         }
     }
+
+    /* Nudge to account for rounding error / subpixel positioning */
+    &:nth-child(3n + 1) [data-ui-popover-trigger] {
+        [data-insert-handle] {
+            left: calc(0.5rem + 1.5px);
+        }
+    }
 }
 
 .replicator-card-set-row-start {

From dd60d504464d5a50d4441682db56b002730b1bce Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 12:32:30 +0100
Subject: [PATCH 20/31] Wrap container queries

---
 .../fieldtypes/replicator-card-sets.css       | 141 +++++++++---------
 1 file changed, 73 insertions(+), 68 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 2107c8c726f..70bef45d24a 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -1,91 +1,96 @@
 /* GROUP REPLICATOR CARD SETS
 =================================================== */
-.replicator-set-list {
-    display: flex;
-    flex-wrap: wrap;
-    column-gap: 0.75rem;
-    align-items: start;
-}
-
-.replicator-set-slot--full,
-.replicator-set-slot--card-cols-1 {
-    width: 100%;
-    min-width: 0;
-}
-
-.replicator-set-slot--card-cols-2 {
-    width: calc((100% - 0.75rem) / 2);
-    min-width: 0;
-}
-
-.replicator-set-slot--card-cols-3 {
-    width: calc((100% - 1.5rem) / 3);
-    min-width: 0;
-}
-
-.replicator-set-slot--full,
-.replicator-set-slot--card-cols-1,
-.replicator-set-slot--card-cols-2,
-.replicator-set-slot--card-cols-3 {
-    .publish-fields {
-        /* Prevent columns and gaps exceeding the container */
-        grid-column-gap: unset;
+@container panel (width > 635px) {
+    .replicator-set-list {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 0.75rem;
+        align-items: start;
     }
-}
 
-.replicator-card-set-inset-picker:not(.replicator-card-set-row-start) {
-    position: relative;
-    margin-block-start: 1.5rem;
+    .replicator-set-slot--full,
+    .replicator-set-slot--card-cols-1 {
+        width: 100%;
+        min-width: 0;
+    }
 
-    [data-ui-popover-trigger] {
-        position: absolute;
-        inset: 0;
-        left: -1.15rem;
-        writing-mode: vertical-lr;
+    .replicator-set-slot--card-cols-2,
+    .replicator-set-slot--card-cols-3 {
+        width: calc((100% - 0.75rem) / 2);
+        min-width: 0;
+    }
 
-        [data-insert-handle] {
-            position: absolute;
-            top: 0;
-            left: calc(0.5rem + 2px);
-            height: 100%;
-            width: 0.325rem;
-            background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
+    @container panel (width > 935px) {
+        .replicator-set-slot--card-cols-3 {
+            width: calc((100% - 1.5rem) / 3);
+            min-width: 0;
         }
     }
 
-    /* Nudge to account for rounding error / subpixel positioning */
-    &:nth-child(3n + 1) [data-ui-popover-trigger] {
-        [data-insert-handle] {
-            left: calc(0.5rem + 1.5px);
+    .replicator-set-slot--full,
+    .replicator-set-slot--card-cols-1,
+    .replicator-set-slot--card-cols-2,
+    .replicator-set-slot--card-cols-3 {
+        .publish-fields {
+            /* Prevent columns and gaps exceeding the container */
+            grid-column-gap: unset;
         }
     }
-}
 
-.replicator-card-set-row-start {
-    --pull: 1.5rem;
+    .replicator-card-set-inset-picker:not(.replicator-card-set-row-start) {
+        position: relative;
+        margin-block-start: 1.5rem;
 
-    &:not(.replicator-card-set-has-entry-connector) {
         [data-ui-popover-trigger] {
             position: absolute;
-            z-index: var(--z-index-above);
-            transform: translateY(calc(0% - var(--pull)));
-            width: 100%;
+            inset: 0;
+            left: -1.15rem;
+            writing-mode: vertical-lr;
+
+            [data-insert-handle] {
+                position: absolute;
+                top: 0;
+                left: calc(0.5rem + 2px);
+                height: 100%;
+                width: 0.325rem;
+                background: linear-gradient(to bottom, var(--color-gray-200) 0%, var(--color-gray-100) 50%, var(--color-gray-200) 100%);
+            }
         }
-    }
 
-    &.replicator-card-set-has-entry-connector {
-        [data-ui-popover-trigger] {
-            position: relative;
-            z-index: var(--z-index-above);
-            width: 100%;
+        /* Nudge to account for rounding error / subpixel positioning */
+        &:nth-child(3n + 1) [data-ui-popover-trigger] {
+            [data-insert-handle] {
+                left: calc(0.5rem + 1.5px);
+            }
         }
+    }
 
-        &.replicator-set-slot--card-cols-2 [data-ui-popover-trigger] {
-            width: calc(200% + 0.75rem);
+    .replicator-card-set-row-start {
+        --pull: 1.5rem;
+
+        &:not(.replicator-card-set-has-entry-connector) {
+            [data-ui-popover-trigger] {
+                position: absolute;
+                z-index: var(--z-index-above);
+                transform: translateY(calc(0% - var(--pull)));
+                width: 100%;
+            }
         }
 
-        &.replicator-set-slot--card-cols-3 [data-ui-popover-trigger] {
-            width: calc(300% + 1.5rem);
+        &.replicator-card-set-has-entry-connector {
+            [data-ui-popover-trigger] {
+                position: relative;
+                z-index: var(--z-index-above);
+                width: 100%;
+            }
+
+            &.replicator-set-slot--card-cols-2 [data-ui-popover-trigger] {
+                width: calc(200% + 0.75rem);
+            }
+
+            &.replicator-set-slot--card-cols-3 [data-ui-popover-trigger] {
+                width: calc(300% + 1.5rem);
+            }
         }
     }
-}
+}
\ No newline at end of file

From 5172b306d1b512d24dcef4dbe49cd8d70f129fc2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 12:41:41 +0100
Subject: [PATCH 21/31] Restore layout on smaller containers

---
 .../fieldtypes/replicator-card-sets.css       | 56 ++++++++++---------
 .../fieldtypes/replicator/AddSetButton.vue    |  1 +
 .../fieldtypes/replicator/Replicator.vue      | 14 ++++-
 3 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 70bef45d24a..d5a411a1046 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -1,5 +1,26 @@
 /* GROUP REPLICATOR CARD SETS
 =================================================== */
+.replicator-card-set-row-start {
+    --pull: 1.5rem;
+
+    &:not(.replicator-card-set-has-entry-connector) {
+        [data-ui-popover-trigger] {
+            position: absolute;
+            z-index: var(--z-index-above);
+            transform: translateY(calc(0% - var(--pull)));
+            width: 100%;
+        }
+    }
+
+    &.replicator-card-set-has-entry-connector {
+        [data-ui-popover-trigger] {
+            position: relative;
+            z-index: var(--z-index-above);
+            width: 100%;
+        }
+    }
+}
+
 @container panel (width > 635px) {
     .replicator-set-list {
         display: flex;
@@ -41,6 +62,10 @@
         position: relative;
         margin-block-start: 1.5rem;
 
+        [data-replicator-connector] {
+            display: none;
+        }
+
         [data-ui-popover-trigger] {
             position: absolute;
             inset: 0;
@@ -65,32 +90,13 @@
         }
     }
 
-    .replicator-card-set-row-start {
-        --pull: 1.5rem;
-
-        &:not(.replicator-card-set-has-entry-connector) {
-            [data-ui-popover-trigger] {
-                position: absolute;
-                z-index: var(--z-index-above);
-                transform: translateY(calc(0% - var(--pull)));
-                width: 100%;
-            }
+    .replicator-card-set-row-start.replicator-card-set-has-entry-connector {
+        &.replicator-set-slot--card-cols-2 [data-ui-popover-trigger] {
+            width: calc(200% + 0.75rem);
         }
 
-        &.replicator-card-set-has-entry-connector {
-            [data-ui-popover-trigger] {
-                position: relative;
-                z-index: var(--z-index-above);
-                width: 100%;
-            }
-
-            &.replicator-set-slot--card-cols-2 [data-ui-popover-trigger] {
-                width: calc(200% + 0.75rem);
-            }
-
-            &.replicator-set-slot--card-cols-3 [data-ui-popover-trigger] {
-                width: calc(300% + 1.5rem);
-            }
+        &.replicator-set-slot--card-cols-3 [data-ui-popover-trigger] {
+            width: calc(300% + 1.5rem);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index fd5f84fd4d6..dc84eee2ded 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -17,6 +17,7 @@
             >
                 <div
                     v-if="showConnector"
+                    data-replicator-connector
                     class="absolute group-focus-within:opacity-0 transition-opacity group-focus-within:transition-none delay-10 duration-250 inset-y-0 left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850"
                     :class="{
                         'group-hover:opacity-0': enabled,
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 433043a30eb..ba99148dab1 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -76,7 +76,7 @@
                                                 :index="index"
                                                 :enabled="canAddSet"
                                                 :is-first="index === 0"
-                                                :show-connector="showCardEntryConnector(index)"
+                                                :show-connector="showPickerConnector(index)"
                                                 :loading-set="loadingSet"
                                                 @added="addSet"
                                             />
@@ -291,6 +291,18 @@ export default {
             return this.showSetConnector(index);
         },
 
+        showPickerConnector(index) {
+            if (this.showCardEntryConnector(index)) {
+                return true;
+            }
+
+            const layout = this.cardLayouts[index];
+
+            return layout.isCard
+                && layout.groupSize > 1
+                && layout.positionInGroup !== 0;
+        },
+
         cardGroupColumns(count) {
             if (count <= 1) {
                 return 1;

From faceaf2b1a6bd311649e4e0ad1f209794c77aeee Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 15:31:10 +0100
Subject: [PATCH 22/31] Columns should span full width when cards kick in

---
 resources/css/components/fieldtypes/replicator-card-sets.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index d5a411a1046..d51a4b9a6b2 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -22,6 +22,9 @@
 }
 
 @container panel (width > 635px) {
+    .publish-fields * {
+        --col-span: 12;
+    }
     .replicator-set-list {
         display: flex;
         flex-wrap: wrap;

From 06401465f865e502305da46fbaa21813cbeb1bd7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 15:31:20 +0100
Subject: [PATCH 23/31] Tidy instructions

---
 lang/en/messages.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lang/en/messages.php b/lang/en/messages.php
index c83eb28f118..df937464264 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -222,7 +222,7 @@
     'publish_actions_publish' => 'Changes to the working copy will be applied to the entry and it will be published immediately.',
     'publish_actions_schedule' => 'Changes to the working copy will be applied to the entry and it will appear published on the selected date.',
     'publish_actions_unpublish' => 'The current revision will be unpublished.',
-    'replicator_set_card_layout_instructions' => 'On the publish form, multiple instances of this set display side by side instead of full width.',
+    'replicator_set_card_layout_instructions' => 'On the publish form stacked instances of this set are displayed side by side as cards when there’s enough space.',
     'relationship_item_unavailable' => 'This item is unavailable. It may have been deleted, or you may not have permission to view it.',
     'reset_password_notification_body' => 'You are receiving this email because we received a password reset request for your account.',
     'reset_password_notification_no_action' => 'If you did not request a password reset, no further action is required.',

From 22a21a17b43b5d9ae15ca91b29564beac9d17adc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 16:10:02 +0100
Subject: [PATCH 24/31] Collapse/expand all replicator cards at once

---
 .../fieldtypes/replicator/Replicator.vue      | 55 ++++++++++++++++---
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index ba99148dab1..cd6e543fe3b 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -30,7 +30,7 @@
                             @dragend="$emit('blur')"
                             v-slot="{}"
                         >
-                            <div class="replicator-set-list relative">
+                            <div ref="setList" class="replicator-set-list relative">
                                 <div
                                     v-for="(set, index) in value"
                                     :key="set._id"
@@ -441,21 +441,22 @@ export default {
         },
 
         collapseSet(id) {
-            if (!this.collapsed.includes(id)) {
-                this.collapsed.push(id);
-            }
+            const collapsed = new Set(this.collapsed);
+
+            this.cardGroupMemberIds(id).forEach((setId) => collapsed.add(setId));
+
+            this.collapsed = [...collapsed];
         },
 
         expandSet(id) {
+            const ids = this.cardGroupMemberIds(id);
+
             if (this.config.collapse === 'accordion') {
-                this.collapsed = this.value.map((v) => v._id).filter((v) => v !== id);
+                this.collapsed = this.value.map((v) => v._id).filter((v) => !ids.includes(v));
                 return;
             }
 
-            if (this.collapsed.includes(id)) {
-                var index = this.collapsed.indexOf(id);
-                this.collapsed.splice(index, 1);
-            }
+            this.collapsed = this.collapsed.filter((setId) => !ids.includes(setId));
         },
 
         collapseAll() {
@@ -494,6 +495,42 @@ export default {
 
             return this.errorsById.hasOwnProperty(id) && this.errorsById[id].length > 0;
         },
+
+        cardGroupMemberIds(id) {
+            const index = this.value.findIndex((set) => set._id === id);
+
+            if (index === -1) {
+                return [id];
+            }
+
+            const layout = this.cardLayouts[index];
+
+            if (!layout.isCard || layout.groupSize <= 1) {
+                return [id];
+            }
+
+            const groupStart = index - layout.positionInGroup;
+
+            if (!this.cardsAreDisplayedInParallelRow(groupStart)) {
+                return [id];
+            }
+
+            return this.value
+                .slice(groupStart, groupStart + layout.groupSize)
+                .map((set) => set._id);
+        },
+
+        cardsAreDisplayedInParallelRow(groupStart) {
+            const list = this.$refs.setList;
+            const slot = list?.children[groupStart];
+
+            if (!slot || !list?.clientWidth) {
+                return false;
+            }
+
+            // Stacked cards span the full list width; side-by-side cards are narrower.
+            return slot.offsetWidth < list.clientWidth * 0.85;
+        },
     },
 
     watch: {

From c4834a702cf9db2011ff89b9de10204525245a0e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 16:15:41 +0100
Subject: [PATCH 25/31] Fix scope of publish field columns

---
 .../css/components/fieldtypes/replicator-card-sets.css     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index d51a4b9a6b2..cbc9185d094 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -22,14 +22,15 @@
 }
 
 @container panel (width > 635px) {
-    .publish-fields * {
-        --col-span: 12;
-    }
     .replicator-set-list {
         display: flex;
         flex-wrap: wrap;
         column-gap: 0.75rem;
         align-items: start;
+
+        .publish-fields * {
+            --col-span: 12;
+        }
     }
 
     .replicator-set-slot--full,

From 08178024dea7431f65c160603d71a73f9d7f9fe5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 16:22:11 +0100
Subject: [PATCH 26/31] Scope card field columns to card slot publish fields

Move the --col-span override from the set list onto each card slot so
nested publish fields are reset without relying on the list wrapper.
---
 .../fieldtypes/replicator-card-sets.css        | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index cbc9185d094..1819e7f7525 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -27,10 +27,6 @@
         flex-wrap: wrap;
         column-gap: 0.75rem;
         align-items: start;
-
-        .publish-fields * {
-            --col-span: 12;
-        }
     }
 
     .replicator-set-slot--full,
@@ -50,6 +46,10 @@
             width: calc((100% - 1.5rem) / 3);
             min-width: 0;
         }
+
+        .replicator-card-set-third-column [data-ui-popover-trigger] [data-insert-handle] {
+            left: calc(0.5rem + 1.5px);
+        }
     }
 
     .replicator-set-slot--full,
@@ -59,6 +59,10 @@
         .publish-fields {
             /* Prevent columns and gaps exceeding the container */
             grid-column-gap: unset;
+
+            * {
+                --col-span: 12;
+            }
         }
     }
 
@@ -86,12 +90,6 @@
             }
         }
 
-        /* Nudge to account for rounding error / subpixel positioning */
-        &:nth-child(3n + 1) [data-ui-popover-trigger] {
-            [data-insert-handle] {
-                left: calc(0.5rem + 1.5px);
-            }
-        }
     }
 
     .replicator-card-set-row-start.replicator-card-set-has-entry-connector {

From 2561b0a764ecf25e40c1f1c65e34d8a3df6d50c7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 16:22:19 +0100
Subject: [PATCH 27/31] Extract replicator card layout helpers for testing

Move grouping, connector, and collapse member logic into pure helpers
with Vitest coverage for column counts and row membership.
---
 .../fieldtypes/replicator/cardLayouts.js      | 80 +++++++++++++++
 .../fieldtypes/replicator/cardLayouts.test.js | 98 +++++++++++++++++++
 2 files changed, 178 insertions(+)
 create mode 100644 resources/js/components/fieldtypes/replicator/cardLayouts.js
 create mode 100644 resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js

diff --git a/resources/js/components/fieldtypes/replicator/cardLayouts.js b/resources/js/components/fieldtypes/replicator/cardLayouts.js
new file mode 100644
index 00000000000..8651b9a2d78
--- /dev/null
+++ b/resources/js/components/fieldtypes/replicator/cardLayouts.js
@@ -0,0 +1,80 @@
+export function cardGroupColumns(count) {
+    if (count <= 1) {
+        return 1;
+    }
+
+    if (count === 2) {
+        return 2;
+    }
+
+    return 3;
+}
+
+export function buildCardLayouts(value, isCardSet, isSameCardGroup) {
+    return value.map((set, index) => {
+        if (!isCardSet(set.type)) {
+            return {
+                isCard: false,
+                groupSize: 1,
+                positionInGroup: 0,
+                columns: 1,
+                className: 'replicator-set-slot--full',
+            };
+        }
+
+        let groupStart = index;
+
+        while (groupStart > 0 && isSameCardGroup(value[groupStart - 1], set)) {
+            groupStart--;
+        }
+
+        let groupEnd = index;
+
+        while (groupEnd < value.length - 1 && isSameCardGroup(value[groupEnd + 1], set)) {
+            groupEnd++;
+        }
+
+        const groupSize = groupEnd - groupStart + 1;
+        const columns = cardGroupColumns(groupSize);
+
+        return {
+            isCard: true,
+            groupSize,
+            positionInGroup: index - groupStart,
+            columns,
+            className: `replicator-set-slot--card-cols-${columns}`,
+        };
+    });
+}
+
+export function getCardGroupMemberIds({ index, value, layouts, multiColumn }) {
+    const set = value[index];
+
+    if (!set) {
+        return [];
+    }
+
+    const layout = layouts[index];
+
+    if (!multiColumn || !layout.isCard || layout.groupSize <= 1) {
+        return [set._id];
+    }
+
+    const groupStart = index - layout.positionInGroup;
+
+    return value
+        .slice(groupStart, groupStart + layout.groupSize)
+        .map((item) => item._id);
+}
+
+export function shouldShowPickerConnector({ index, layouts, showCardEntryConnector }) {
+    if (showCardEntryConnector(index)) {
+        return true;
+    }
+
+    const layout = layouts[index];
+
+    return layout.isCard
+        && layout.groupSize > 1
+        && layout.positionInGroup !== 0;
+}
diff --git a/resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js b/resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js
new file mode 100644
index 00000000000..4d82c99e72d
--- /dev/null
+++ b/resources/js/tests/components/fieldtypes/replicator/cardLayouts.test.js
@@ -0,0 +1,98 @@
+import { expect, test } from 'vitest';
+import {
+    buildCardLayouts,
+    cardGroupColumns,
+    getCardGroupMemberIds,
+    shouldShowPickerConnector,
+} from '@/components/fieldtypes/replicator/cardLayouts.js';
+
+test('cardGroupColumns returns expected column counts', () => {
+    expect(cardGroupColumns(1)).toBe(1);
+    expect(cardGroupColumns(2)).toBe(2);
+    expect(cardGroupColumns(3)).toBe(3);
+    expect(cardGroupColumns(5)).toBe(3);
+});
+
+test('buildCardLayouts groups consecutive card sets', () => {
+    const value = [
+        { _id: '1', type: 'marketing' },
+        { _id: '2', type: 'team' },
+        { _id: '3', type: 'team' },
+        { _id: '4', type: 'team' },
+    ];
+    const isCardSet = (type) => type === 'team';
+    const isSameCardGroup = (a, b) => isCardSet(a.type) && isCardSet(b.type) && a.type === b.type;
+
+    const layouts = buildCardLayouts(value, isCardSet, isSameCardGroup);
+
+    expect(layouts[0].className).toBe('replicator-set-slot--full');
+    expect(layouts[1].groupSize).toBe(3);
+    expect(layouts[1].positionInGroup).toBe(0);
+    expect(layouts[2].positionInGroup).toBe(1);
+    expect(layouts[3].positionInGroup).toBe(2);
+    expect(layouts[3].columns).toBe(3);
+    expect(layouts[3].className).toBe('replicator-set-slot--card-cols-3');
+});
+
+test('getCardGroupMemberIds returns the whole row in multi-column layout', () => {
+    const value = [
+        { _id: '1', type: 'team' },
+        { _id: '2', type: 'team' },
+        { _id: '3', type: 'team' },
+    ];
+    const layouts = buildCardLayouts(
+        value,
+        () => true,
+        (a, b) => a.type === b.type,
+    );
+
+    expect(getCardGroupMemberIds({
+        index: 1,
+        value,
+        layouts,
+        multiColumn: true,
+    })).toEqual(['1', '2', '3']);
+});
+
+test('getCardGroupMemberIds only returns the clicked set when stacked', () => {
+    const value = [
+        { _id: '1', type: 'team' },
+        { _id: '2', type: 'team' },
+    ];
+    const layouts = buildCardLayouts(
+        value,
+        () => true,
+        (a, b) => a.type === b.type,
+    );
+
+    expect(getCardGroupMemberIds({
+        index: 1,
+        value,
+        layouts,
+        multiColumn: false,
+    })).toEqual(['2']);
+});
+
+test('shouldShowPickerConnector shows inset connectors for non-row-start cards', () => {
+    const value = [
+        { _id: '1', type: 'team' },
+        { _id: '2', type: 'team' },
+    ];
+    const layouts = buildCardLayouts(
+        value,
+        () => true,
+        (a, b) => a.type === b.type,
+    );
+
+    expect(shouldShowPickerConnector({
+        index: 0,
+        layouts,
+        showCardEntryConnector: () => false,
+    })).toBe(false);
+
+    expect(shouldShowPickerConnector({
+        index: 1,
+        layouts,
+        showCardEntryConnector: () => false,
+    })).toBe(true);
+});

From d29fe4c95b77f72ca7b40df58304ba6d6d1649d0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 16:22:26 +0100
Subject: [PATCH 28/31] Fix card row collapse grouping and drag reorder
 recovery

Observe the panel container width instead of slot offset comparisons so
parallel cards collapse together reliably, recover sort order from the
DOM when sortable emits duplicates, and wire the extracted card layout
helpers.
---
 .../fieldtypes/replicator/Replicator.vue      | 172 ++++++++++--------
 1 file changed, 92 insertions(+), 80 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index cd6e543fe3b..b79b89f7241 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -34,6 +34,7 @@
                                 <div
                                     v-for="(set, index) in value"
                                     :key="set._id"
+                                    :data-set-id="set._id"
                                     :class="[
                                         sortableItemClass,
                                         cardLayouts[index].className,
@@ -45,6 +46,8 @@
                                                 && cardLayouts[index].positionInGroup === 0
                                                 && cardLayouts[index].groupSize > 1,
                                             'replicator-card-set-has-entry-connector': showCardEntryConnector(index),
+                                            'replicator-card-set-third-column': cardLayouts[index].columns === 3
+                                                && cardLayouts[index].positionInGroup === 2,
                                         },
                                     ]"
                                 >
@@ -112,6 +115,13 @@ import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
 import { data_get } from "@/bootstrap/globals.js";
+import {
+    buildCardLayouts,
+    getCardGroupMemberIds,
+    shouldShowPickerConnector,
+} from './cardLayouts.js';
+
+const CARD_MULTI_COLUMN_MIN_WIDTH = 635;
 
 export default {
     mixins: [Fieldtype, ManagesSetMeta],
@@ -135,6 +145,8 @@ export default {
             errorsById: {},
             setsCache: {},
             loadingSet: null,
+            cardMultiColumnLayout: false,
+            cardLayoutObserver: null,
         };
     },
 
@@ -172,40 +184,11 @@ export default {
         },
 
         cardLayouts() {
-            return this.value.map((set, index) => {
-                if (!this.setConfig(set.type).card) {
-                    return {
-                        isCard: false,
-                        groupSize: 1,
-                        positionInGroup: 0,
-                        columns: 1,
-                        className: 'replicator-set-slot--full',
-                    };
-                }
-
-                let groupStart = index;
-
-                while (groupStart > 0 && this.isSameCardGroup(this.value[groupStart - 1], set)) {
-                    groupStart--;
-                }
-
-                let groupEnd = index;
-
-                while (groupEnd < this.value.length - 1 && this.isSameCardGroup(this.value[groupEnd + 1], set)) {
-                    groupEnd++;
-                }
-
-                const groupSize = groupEnd - groupStart + 1;
-                const columns = this.cardGroupColumns(groupSize);
-
-                return {
-                    isCard: true,
-                    groupSize,
-                    positionInGroup: index - groupStart,
-                    columns,
-                    className: `replicator-set-slot--card-cols-${columns}`,
-                };
-            });
+            return buildCardLayouts(
+                this.value,
+                (type) => this.setConfig(type).card,
+                (a, b) => this.isSameCardGroup(a, b),
+            );
         },
 
         replicatorPreview() {
@@ -292,27 +275,11 @@ export default {
         },
 
         showPickerConnector(index) {
-            if (this.showCardEntryConnector(index)) {
-                return true;
-            }
-
-            const layout = this.cardLayouts[index];
-
-            return layout.isCard
-                && layout.groupSize > 1
-                && layout.positionInGroup !== 0;
-        },
-
-        cardGroupColumns(count) {
-            if (count <= 1) {
-                return 1;
-            }
-
-            if (count === 2) {
-                return 2;
-            }
-
-            return 3;
+            return shouldShowPickerConnector({
+                index,
+                layouts: this.cardLayouts,
+                showCardEntryConnector: (i) => this.showCardEntryConnector(i),
+            });
         },
 
         showCardInsetPicker(cardCount) {
@@ -330,22 +297,36 @@ export default {
         },
 
         sorted(value) {
-            const ids = new Set();
+            const byId = new Map(this.value.map((set) => [set._id, set]));
+            const seen = new Set();
+            const unique = [];
 
-            const unique = value.filter((set) => {
-                if (ids.has(set._id)) {
-                    return false;
+            for (const set of value) {
+                if (seen.has(set._id)) {
+                    continue;
                 }
 
-                ids.add(set._id);
-                return true;
-            });
+                seen.add(set._id);
+
+                const existing = byId.get(set._id);
 
-            if (unique.length !== this.value.length) {
+                if (!existing) {
+                    return;
+                }
+
+                unique.push(existing);
+            }
+
+            if (unique.length === this.value.length) {
+                this.update(unique);
                 return;
             }
 
-            this.update(unique);
+            const fromDom = this.sortedValueFromDom(byId);
+
+            if (fromDom) {
+                this.update(fromDom);
+            }
         },
 
         addSet(handle, index) {
@@ -503,36 +484,63 @@ export default {
                 return [id];
             }
 
-            const layout = this.cardLayouts[index];
+            return getCardGroupMemberIds({
+                index,
+                value: this.value,
+                layouts: this.cardLayouts,
+                multiColumn: this.cardMultiColumnLayout,
+            });
+        },
 
-            if (!layout.isCard || layout.groupSize <= 1) {
-                return [id];
+        sortedValueFromDom(byId) {
+            const list = this.$refs.setList;
+
+            if (!list) {
+                return null;
             }
 
-            const groupStart = index - layout.positionInGroup;
+            const ordered = [...list.children]
+                .map((element) => byId.get(element.dataset.setId))
+                .filter(Boolean);
 
-            if (!this.cardsAreDisplayedInParallelRow(groupStart)) {
-                return [id];
+            if (ordered.length !== this.value.length) {
+                return null;
             }
 
-            return this.value
-                .slice(groupStart, groupStart + layout.groupSize)
-                .map((set) => set._id);
+            return ordered;
         },
 
-        cardsAreDisplayedInParallelRow(groupStart) {
-            const list = this.$refs.setList;
-            const slot = list?.children[groupStart];
+        observeCardLayoutContainer() {
+            this.cardLayoutObserver?.disconnect();
+            this.cardLayoutObserver = null;
 
-            if (!slot || !list?.clientWidth) {
-                return false;
+            const root = this.$refs.setList;
+            const panel = root?.closest('[data-ui-panel]')
+                ?? root?.closest('[class*="container/panel"]');
+
+            if (!panel) {
+                this.cardMultiColumnLayout = false;
+                return;
             }
 
-            // Stacked cards span the full list width; side-by-side cards are narrower.
-            return slot.offsetWidth < list.clientWidth * 0.85;
+            const update = () => {
+                this.cardMultiColumnLayout = panel.clientWidth > CARD_MULTI_COLUMN_MIN_WIDTH;
+            };
+
+            update();
+            this.cardLayoutObserver = new ResizeObserver(update);
+            this.cardLayoutObserver.observe(panel);
         },
     },
 
+    mounted() {
+        this.$nextTick(() => this.observeCardLayoutContainer());
+    },
+
+    beforeUnmount() {
+        this.cardLayoutObserver?.disconnect();
+    },
+
     watch: {
         focused(focused, oldFocused) {
             if (focused === oldFocused) return;
@@ -546,6 +554,10 @@ export default {
             }, 1);
         },
 
+        fullScreenMode() {
+            this.$nextTick(() => this.observeCardLayoutContainer());
+        },
+
         collapsed(collapsed) {
             this.updateMeta({ ...this.meta, collapsed: clone(collapsed) });
         },

From 04f20404fc2d5fa231ae50a533a3e7e43f37b989 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 16:22:27 +0100
Subject: [PATCH 29/31] Add trailing newline to cards icon SVG

---
 resources/svg/icons/cards.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/svg/icons/cards.svg b/resources/svg/icons/cards.svg
index 1a86e464325..18b258d0dac 100644
--- a/resources/svg/icons/cards.svg
+++ b/resources/svg/icons/cards.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" id="Cards--Streamline-Flex"><g id="cards"><path id="Rectangle 325" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.15058 1.5023c-0.09762 -0.4386 -0.47533 -0.76026 -0.92445 -0.782856 -2.23941 -0.112671 -3.74453 0.03427 -5.92631 0.525676 -0.447772 0.10086 -0.768809 0.49415 -0.781265 0.95261 -0.079813 2.93766 0.088917 4.84324 0.680725 7.68875 0.09223 0.44352 0.47006 0.77202 0.92269 0.79742 2.24522 0.1259 3.75375 -0.0092 5.94454 -0.5273 0.43538 -0.103 0.74834 -0.48406 0.76777 -0.93068 0.1276 -2.93419 -0.04553 -4.85626 -0.6837 -7.72362Z" stroke-width="1"/><path id="Rectangle 326" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.99581 3.07593c0.95769 0.33106 1.86509 0.73804 2.93149 1.30439 0.4318 0.22934 0.6538 0.72079 0.5457 1.19734 -0.6361 2.80708 -1.2944 4.60584 -2.6304 7.15534 -0.2256 0.4307 -0.7102 0.661 -1.1861 0.5598 -1.55918 -0.3316 -2.72851 -0.694 -3.99146 -1.2661" stroke-width="1"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" id="Cards--Streamline-Flex"><g id="cards"><path id="Rectangle 325" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.15058 1.5023c-0.09762 -0.4386 -0.47533 -0.76026 -0.92445 -0.782856 -2.23941 -0.112671 -3.74453 0.03427 -5.92631 0.525676 -0.447772 0.10086 -0.768809 0.49415 -0.781265 0.95261 -0.079813 2.93766 0.088917 4.84324 0.680725 7.68875 0.09223 0.44352 0.47006 0.77202 0.92269 0.79742 2.24522 0.1259 3.75375 -0.0092 5.94454 -0.5273 0.43538 -0.103 0.74834 -0.48406 0.76777 -0.93068 0.1276 -2.93419 -0.04553 -4.85626 -0.6837 -7.72362Z" stroke-width="1"/><path id="Rectangle 326" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.99581 3.07593c0.95769 0.33106 1.86509 0.73804 2.93149 1.30439 0.4318 0.22934 0.6538 0.72079 0.5457 1.19734 -0.6361 2.80708 -1.2944 4.60584 -2.6304 7.15534 -0.2256 0.4307 -0.7102 0.661 -1.1861 0.5598 -1.55918 -0.3316 -2.72851 -0.694 -3.99146 -1.2661" stroke-width="1"/></g></svg>

From 700161c945624064610135145b95fcd16ef251dc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 1 Sep 2026 16:27:50 +0100
Subject: [PATCH 30/31] Restore some CSS needed

---
 .../css/components/fieldtypes/replicator-card-sets.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/css/components/fieldtypes/replicator-card-sets.css b/resources/css/components/fieldtypes/replicator-card-sets.css
index 1819e7f7525..4799624058f 100644
--- a/resources/css/components/fieldtypes/replicator-card-sets.css
+++ b/resources/css/components/fieldtypes/replicator-card-sets.css
@@ -46,10 +46,6 @@
             width: calc((100% - 1.5rem) / 3);
             min-width: 0;
         }
-
-        .replicator-card-set-third-column [data-ui-popover-trigger] [data-insert-handle] {
-            left: calc(0.5rem + 1.5px);
-        }
     }
 
     .replicator-set-slot--full,
@@ -90,6 +86,12 @@
             }
         }
 
+        /* Nudge to account for rounding error / subpixel positioning */
+        &:nth-child(3n + 1) [data-ui-popover-trigger] {
+            [data-insert-handle] {
+                left: calc(0.5rem + 1.5px);
+            }
+        }
     }
 
     .replicator-card-set-row-start.replicator-card-set-has-entry-connector {

From c35d37789a73071eb73bc610483de8e7e3ace2a3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 2 Sep 2026 10:16:04 +0100
Subject: [PATCH 31/31] Scope replicator card layout to Replicator fields only

Show the card layout toggle only when editing Replicator sets, strip the
card flag from Bard blueprint saves, and ignore it in Bard runtime config.
Clarify the blueprint instructions copy.
---
 lang/en/messages.php                          |  2 +-
 .../js/components/blueprints/Section.vue      |  5 +++--
 .../js/components/blueprints/Sections.vue     |  5 +++++
 .../js/components/blueprints/TabContent.vue   |  5 +++++
 resources/js/components/blueprints/Tabs.vue   |  5 +++++
 .../fieldtypes/replicator/SetsFieldtype.vue   | 22 +++++++++++++++++--
 .../fieldtypes/replicator/cardLayouts.js      |  8 +++++--
 src/Fieldtypes/Bard.php                       |  9 ++++++++
 src/Fieldtypes/Replicator.php                 |  1 +
 9 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/lang/en/messages.php b/lang/en/messages.php
index df937464264..a80733baa2b 100644
--- a/lang/en/messages.php
+++ b/lang/en/messages.php
@@ -222,7 +222,7 @@
     'publish_actions_publish' => 'Changes to the working copy will be applied to the entry and it will be published immediately.',
     'publish_actions_schedule' => 'Changes to the working copy will be applied to the entry and it will appear published on the selected date.',
     'publish_actions_unpublish' => 'The current revision will be unpublished.',
-    'replicator_set_card_layout_instructions' => 'On the publish form stacked instances of this set are displayed side by side as cards when there’s enough space.',
+    'replicator_set_card_layout_instructions' => 'In a Replicator field, stacked instances of this set are displayed side by side as cards when there’s enough space.',
     'relationship_item_unavailable' => 'This item is unavailable. It may have been deleted, or you may not have permission to view it.',
     'reset_password_notification_body' => 'You are receiving this email because we received a password reset request for your account.',
     'reset_password_notification_no_action' => 'If you did not request a password reset, no further action is required.',
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index ed6471ca251..21c152c41c9 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -10,7 +10,7 @@
                     <ui-icon :name="section.icon" :set="iconSet" v-if="section.icon" />
                     <ui-heading v-text="__(section.display ?? 'Section')" />
                     <ui-badge
-                        v-if="showHandleField && card"
+                        v-if="showCardField && card"
                         pill
                         icon="cards"
                         :text="__('Card')"
@@ -83,7 +83,7 @@
                     <ui-field
                         :label="__('Card layout')"
                         :instructions="__('messages.replicator_set_card_layout_instructions')"
-                        v-if="showHandleField"
+                        v-if="showCardField"
                     >
                         <ui-switch v-model="editingSection.card" />
                     </ui-field>
@@ -173,6 +173,7 @@ export default {
         tabId: { type: String },
         section: { type: Object, required: true },
         showHandleField: { type: Boolean, default: false },
+        showCardField: { type: Boolean, default: false },
 	    showCollapsibleField: { type: Boolean, default: false },
         showHideField: { type: Boolean, default: false },
         editText: { type: String },
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index 28dd28a5a42..9c15449cce8 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -15,6 +15,7 @@
                 :can-define-localizable="canDefineLocalizable"
                 :tab-id="tabId"
                 :show-handle-field="showSectionHandleField"
+                :show-card-field="showSectionCardField"
                 :show-collapsible-field="showSectionCollapsibleField"
                 :show-hide-field="showSectionHideField"
                 :exclude-fieldset="excludeFieldset"
@@ -79,6 +80,10 @@ export default {
         showSectionHandleField: {
             type: Boolean,
             default: false,
+        },
+        showSectionCardField: {
+            type: Boolean,
+            default: false,
         },
 	    showSectionCollapsibleField: {
 			type: Boolean,
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index 0b9b1287048..6a776a69f9e 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -8,6 +8,7 @@
             :add-section-text="addSectionText"
             :edit-section-text="editSectionText"
             :show-section-handle-field="showSectionHandleField"
+            :show-section-card-field="showSectionCardField"
             :show-section-collapsible-field="showSectionCollapsibleField"
             :show-section-hide-field="showSectionHideField"
             :can-define-localizable="canDefineLocalizable"
@@ -36,6 +37,10 @@ export default {
         showSectionHandleField: {
             type: Boolean,
             default: false,
+        },
+        showSectionCardField: {
+            type: Boolean,
+            default: false,
         },
 	    showSectionCollapsibleField: {
 			type: Boolean,
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 7d58aa4f4d9..5d1416de055 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -75,6 +75,7 @@
                     :tab="tab"
                     v-show="currentTab === tab._id"
                     :show-section-handle-field="showSectionHandleField"
+                    :show-section-card-field="showSectionCardField"
                     :show-section-collapsible-field="showSectionCollapsibleField"
                     :show-section-hide-field="showSectionHideField"
                     :new-section-text="newSectionText"
@@ -154,6 +155,10 @@ export default {
         showSectionHandleField: {
             type: Boolean,
             default: false,
+        },
+        showSectionCardField: {
+            type: Boolean,
+            default: false,
         },
 	    showSectionCollapsibleField: {
 			type: Boolean,
diff --git a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
index 05e20973a46..1ea006df521 100644
--- a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
@@ -12,6 +12,7 @@
             :new-section-text="__('New Set')"
             show-tab-instructions-field
             show-section-handle-field
+            :show-section-card-field="showCardLayoutField"
             show-section-hide-field
             @updated="tabsUpdated"
         />
@@ -23,6 +24,17 @@ import Fieldtype from '../Fieldtype.vue';
 import SuggestsConditionalFields from '../../blueprints/SuggestsConditionalFields';
 import Tabs from '../../blueprints/Tabs.vue';
 
+function stripCardLayout(tabs) {
+    return tabs.map((tab) => ({
+        ...tab,
+        sections: tab.sections.map((section) => {
+            const { card, ...rest } = section;
+
+            return rest;
+        }),
+    }));
+}
+
 export default {
     mixins: [Fieldtype, SuggestsConditionalFields],
 
@@ -30,9 +42,15 @@ export default {
         Tabs,
     },
 
+    computed: {
+        showCardLayoutField() {
+            return this.config.show_card_layout_field === true;
+        },
+    },
+
     data() {
         return {
-            tabs: this.value,
+            tabs: this.config.show_card_layout_field === true ? this.value : stripCardLayout(this.value),
         };
     },
 
@@ -42,7 +60,7 @@ export default {
 
     methods: {
         tabsUpdated(tabs) {
-            this.update(tabs);
+            this.update(this.showCardLayoutField ? tabs : stripCardLayout(tabs));
         },
 
         getSectionFieldsForConditionSuggestions(vm = null) {
diff --git a/resources/js/components/fieldtypes/replicator/cardLayouts.js b/resources/js/components/fieldtypes/replicator/cardLayouts.js
index 8651b9a2d78..e112abc7492 100644
--- a/resources/js/components/fieldtypes/replicator/cardLayouts.js
+++ b/resources/js/components/fieldtypes/replicator/cardLayouts.js
@@ -47,6 +47,10 @@ export function buildCardLayouts(value, isCardSet, isSameCardGroup) {
     });
 }
 
+function setId(set) {
+    return set._id ?? set.id;
+}
+
 export function getCardGroupMemberIds({ index, value, layouts, multiColumn }) {
     const set = value[index];
 
@@ -57,14 +61,14 @@ export function getCardGroupMemberIds({ index, value, layouts, multiColumn }) {
     const layout = layouts[index];
 
     if (!multiColumn || !layout.isCard || layout.groupSize <= 1) {
-        return [set._id];
+        return [setId(set)];
     }
 
     const groupStart = index - layout.positionInGroup;
 
     return value
         .slice(groupStart, groupStart + layout.groupSize)
-        .map((item) => item._id);
+        .map((item) => setId(item));
 }
 
 export function shouldShowPickerConnector({ index, layouts, showCardEntryConnector }) {
diff --git a/src/Fieldtypes/Bard.php b/src/Fieldtypes/Bard.php
index d4f89574529..1b09501e422 100644
--- a/src/Fieldtypes/Bard.php
+++ b/src/Fieldtypes/Bard.php
@@ -547,6 +547,15 @@ public function extraValidationAttributes(): array
         return $this->runHooks('extra-validation-attributes', $attributes);
     }
 
+    public function flattenedSetsConfig()
+    {
+        return parent::flattenedSetsConfig()->map(function ($set) {
+            unset($set['card']);
+
+            return $set;
+        });
+    }
+
     public function isLegacyData($value)
     {
         if (is_string($value)) {
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 73e0bc0f48b..0223daa7fce 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -47,6 +47,7 @@ protected function configFieldItems(): array
                         'type' => 'sets',
                         'hide_display' => true,
                         'full_width_setting' => true,
+                        'show_card_layout_field' => true,
                     ],
                 ],
             ],