From aa2c5b3b604e086aa555644f10c06b5ec1616f1c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 17:20:13 +0100
Subject: [PATCH 01/31] Add site grouping with new sectioned grid UI

---
 resources/css/components/fieldtypes/grid.css  |  52 ++
 .../components/fieldtypes/SlugFieldtype.vue   |  27 +-
 .../js/components/fieldtypes/grid/Grid.vue    |  24 +-
 .../js/components/fieldtypes/grid/Stacked.vue |   5 +-
 .../js/components/fieldtypes/grid/Table.vue   |  21 +-
 .../js/components/fieldtypes/grid/View.vue    |  46 +-
 .../js/components/ui/Publish/Sections.vue     | 762 +++++++++++++++++-
 resources/js/pages/sites/Edit.vue             | 114 ++-
 src/Facades/Site.php                          |   5 +-
 src/Fields/Section.php                        |   2 +
 .../Controllers/CP/Sites/SitesController.php  |  85 +-
 src/Sites/Site.php                            |   8 +
 src/Sites/Sites.php                           | 244 +++++-
 tests/Fields/SectionTest.php                  |  36 +
 tests/Sites/SiteTest.php                      |   8 +
 tests/Sites/SitesConfigTest.php               | 391 ++++++++-
 tests/Sites/SitesTest.php                     |  18 +
 17 files changed, 1711 insertions(+), 137 deletions(-)

diff --git a/resources/css/components/fieldtypes/grid.css b/resources/css/components/fieldtypes/grid.css
index c1c5a1ea33d..eb579c97501 100644
--- a/resources/css/components/fieldtypes/grid.css
+++ b/resources/css/components/fieldtypes/grid.css
@@ -101,6 +101,58 @@
         }
     }
 
+    /* GRID FIELDTYPE / SECTIONED MODIFIER
+    =================================================== */
+    /* Grid whose column headers double as the enclosing publish section's header.
+      - e.g. A site group in `cp/sites`
+      - the table and its headers go transparent so the headers sit on the section background
+      - the rows take over the card background, border and corners
+      - headers stay real table headers, so they keep aligning with their columns
+    */
+    .grid-table--sectioned {
+        @apply rounded-none border-0 bg-transparent shadow-none dark:bg-transparent;
+
+        thead th {
+            @apply static border-b-0 bg-transparent dark:bg-transparent;
+            &:first-child {
+                @apply rounded-ss-none;
+            }
+            &:last-child {
+                @apply rounded-se-none;
+            }
+        }
+
+        > tbody > tr {
+            > td {
+                @apply bg-white dark:bg-gray-900;
+
+                &:first-child {
+                    @apply border-s dark:border-s-gray-700;
+                }
+
+                &:last-child {
+                    @apply border-e dark:border-e-gray-700;
+                }
+            }
+
+            &:first-child > td {
+                @apply border-t dark:border-t-gray-700;
+
+                &:first-child {
+                    @apply rounded-ss-[7px];
+                }
+
+                &:last-child {
+                    @apply rounded-se-[7px];
+                }
+            }
+
+            &:last-child > td {
+                @apply border-b dark:border-b-gray-700;
+            }
+        }
+    }
+
     .grid-item-header {
         @apply flex cursor-move items-center justify-between border-b bg-gray-200 px-4 py-2 text-sm outline-hidden;
     }
diff --git a/resources/js/components/fieldtypes/SlugFieldtype.vue b/resources/js/components/fieldtypes/SlugFieldtype.vue
index d9dda4158e7..03b4dbcf12b 100644
--- a/resources/js/components/fieldtypes/SlugFieldtype.vue
+++ b/resources/js/components/fieldtypes/SlugFieldtype.vue
@@ -74,15 +74,17 @@ export default {
         source() {
             if (!this.generate) return;
 
-            const field = this.config.from || 'title';
-            let key = field;
+            const from = this.valueFrom(this.config.from || 'title', { relative: true });
 
-            if (this.fieldPathPrefix) {
-                let dottedPrefix = this.fieldPathPrefix.replace(new RegExp('\.' + this.handle + '$'), '');
-                key = dottedPrefix + '.' + field;
-            }
+            if (!from) return from;
 
-            return data_get(this.publishContainer?.values, key);
+            const prefix = this.config.prefix_from
+                ? this.valueFrom(this.config.prefix_from, { relative: false })
+                : null;
+
+            if (!prefix) return from;
+
+            return `${prefix} ${from}`;
         },
 
         language() {
@@ -123,6 +125,17 @@ export default {
             }
         },
 
+        valueFrom(field, { relative }) {
+            let key = field;
+
+            if (relative && this.fieldPathPrefix) {
+                let dottedPrefix = this.fieldPathPrefix.replace(new RegExp('\.' + this.handle + '$'), '');
+                key = dottedPrefix + '.' + field;
+            }
+
+            return data_get(this.publishContainer?.values, key);
+        },
+
         sync() {
             this.$refs.slugify.reset();
         },
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 1b1a8de1622..c46e7a0c97c 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -36,7 +36,14 @@
                         @blur="blurred"
                     />
 
-                    <ui-button size="sm" v-if="canAddRows" v-text="__(addRowButtonLabel)" @click.prevent="addRow" />
+                    <Teleport
+                        v-if="canAddRows"
+                        :disabled="!usesExternalAddRow"
+                        defer
+                        :to="addRowTeleportTarget"
+                    >
+                        <ui-button size="sm" v-text="__(addRowButtonLabel)" @click.prevent="addRow" />
+                    </Teleport>
                 </section>
             </div>
         </element-container>
@@ -84,6 +91,10 @@ export default {
         isInGridField: true,
     },
 
+    inject: {
+        sectionAddRowTarget: { default: null },
+    },
+
     computed: {
         component() {
             const stackAt = this.config.stack_at ?? 550;
@@ -116,6 +127,16 @@ export default {
             return __(this.config.add_row) || __('Add Row');
         },
 
+        usesExternalAddRow() {
+            return !!this.sectionAddRowTarget && !!this.config.headers_in_section && !this.fullScreenMode;
+        },
+
+        addRowTeleportTarget() {
+            if (!this.usesExternalAddRow) return 'body';
+
+            return `[${this.sectionAddRowTarget}="${CSS.escape(this.handle)}"]`;
+        },
+
         hasMaxRows() {
             return this.maxRows != null;
         },
@@ -256,6 +277,7 @@ export default {
                 metaPathPrefix: { get: () => this.metaPathPrefix },
                 fullScreenMode: { get: () => this.fullScreenMode },
                 toggleFullScreen: { get: () => this.toggleFullScreen },
+                usesExternalAddRow: { get: () => this.usesExternalAddRow },
             });
             return grid;
         },
diff --git a/resources/js/components/fieldtypes/grid/Stacked.vue b/resources/js/components/fieldtypes/grid/Stacked.vue
index fedceb19b71..383300e1457 100644
--- a/resources/js/components/fieldtypes/grid/Stacked.vue
+++ b/resources/js/components/fieldtypes/grid/Stacked.vue
@@ -1,10 +1,11 @@
 <template>
-    <div :class="{ 'mb-4': rows.length > 0 }">
+    <div :class="{ 'mb-4': (rows.length > 0 || usesSectionRowSortable) && !grid.usesExternalAddRow }">
         <sortable-list
             :model-value="rows"
             :vertical="true"
             :item-class="sortableItemClass"
             :handle-class="sortableHandleClass"
+            :disabled="usesSectionRowSortable"
             append-to="body"
             constrain-dimensions
             @dragstart="$emit('focus')"
@@ -13,8 +14,10 @@
             v-slot="{}"
         >
             <div
+                ref="zone"
                 class="grid-stacked space-y-8"
                 :class="{
+                    'publish-section-row-zone min-h-16': usesSectionRowSortable,
                     // 'mt-0': !allowFullscreen && hideDisplay,
                     // 'mt-4': !hideDisplay,
                 }"
diff --git a/resources/js/components/fieldtypes/grid/Table.vue b/resources/js/components/fieldtypes/grid/Table.vue
index e5cfb6bb92d..1912d2a9a6e 100644
--- a/resources/js/components/fieldtypes/grid/Table.vue
+++ b/resources/js/components/fieldtypes/grid/Table.vue
@@ -1,5 +1,12 @@
 <template>
-    <table class="grid-table" :class="{ 'mb-4': rows.length > 0 }" v-if="rows.length > 0">
+    <table
+        class="grid-table"
+        :class="{
+            'mb-4': (rows.length > 0 || usesSectionRowSortable) && !grid.usesExternalAddRow,
+            'grid-table--sectioned': showsHeadersInSection && !grid.fullScreenMode,
+        }"
+        v-if="rows.length > 0 || usesSectionRowSortable"
+    >
         <thead>
             <tr>
                 <th class="w-3" v-if="grid.isReorderable"></th>
@@ -12,13 +19,14 @@
             :vertical="true"
             :item-class="sortableItemClass"
             :handle-class="sortableHandleClass"
+            :disabled="usesSectionRowSortable"
             append-to="body"
             @dragstart="$emit('focus')"
             @dragend="$emit('blur')"
             @update:model-value="(rows) => $emit('sorted', rows)"
             v-slot="{}"
         >
-            <tbody>
+            <tbody ref="zone" :class="{ 'publish-section-row-zone': usesSectionRowSortable }">
                 <grid-row
                     v-for="(row, index) in rows"
                     :key="`row-${row._id}`"
@@ -40,6 +48,9 @@
                     @focus="$emit('focus')"
                     @blur="$emit('blur')"
                 />
+                <tr v-if="usesSectionRowSortable && !rows.length">
+                    <td :colspan="emptyColspan" class="h-16"></td>
+                </tr>
             </tbody>
         </sortable-list>
     </table>
@@ -59,5 +70,11 @@ export default {
         GridHeaderCell,
         SortableList,
     },
+
+    computed: {
+        emptyColspan() {
+            return this.fields.length + (this.grid.isReorderable ? 1 : 0) + 1;
+        },
+    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/grid/View.vue b/resources/js/components/fieldtypes/grid/View.vue
index 4a2ee7303f8..2bebe303af6 100644
--- a/resources/js/components/fieldtypes/grid/View.vue
+++ b/resources/js/components/fieldtypes/grid/View.vue
@@ -2,7 +2,10 @@
 export default {
     props: ['fields', 'rows', 'meta', 'name', 'canDeleteRows', 'canAddRows', 'allowFullscreen', 'hideDisplay', 'errors', 'readOnly'],
 
-    inject: ['grid'],
+    inject: {
+        grid: 'grid',
+        sectionRowSortable: { default: null },
+    },
 
     data() {
         return {
@@ -11,12 +14,24 @@ export default {
     },
 
     computed: {
+        usesSectionRowSortable() {
+            return !!this.sectionRowSortable && this.grid.isReorderable;
+        },
+
         sortableItemClass() {
-            return `${this.name}-sortable-item`;
+            return this.usesSectionRowSortable
+                ? this.sectionRowSortable.itemClass
+                : `${this.name}-sortable-item`;
         },
 
         sortableHandleClass() {
-            return `${this.name}-drag-handle`;
+            return this.usesSectionRowSortable
+                ? this.sectionRowSortable.handleClass
+                : `${this.name}-drag-handle`;
+        },
+
+        showsHeadersInSection() {
+            return !!this.grid.config.headers_in_section;
         },
 
         fieldPathPrefix() {
@@ -56,6 +71,17 @@ export default {
                 }, {});
             },
         },
+        rows() {
+            this.$nextTick(() => this.registerSectionRowZone());
+        },
+    },
+
+    mounted() {
+        this.$nextTick(() => this.registerSectionRowZone());
+    },
+
+    unmounted() {
+        this.unregisterSectionRowZone();
     },
 
     methods: {
@@ -65,7 +91,19 @@ export default {
             }
 
             return this.errorsById.hasOwnProperty(id) && this.errorsById[id].length > 0;
-        }
+        },
+
+        registerSectionRowZone() {
+            if (!this.usesSectionRowSortable || !this.$refs.zone) return;
+
+            this.sectionRowSortable.register(this.$refs.zone, this.name);
+        },
+
+        unregisterSectionRowZone() {
+            if (!this.sectionRowSortable || !this.$refs.zone) return;
+
+            this.sectionRowSortable.unregister(this.$refs.zone);
+        },
     },
 };
 </script>
diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 0081db9693f..6867242ee73 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -7,22 +7,26 @@ import {
     Heading,
     Subheading,
     Card,
+    Editable,
+    Field,
     Icon,
+    Input,
+    Stack,
 } from '@ui';
+import { deepClone } from '@/util/clone.js';
 import FieldsProvider from './FieldsProvider.vue';
 import Fields from './Fields.vue';
 import ShowField from '@/components/field-conditions/ShowField.js';
 import { injectContainerContext } from './Container.vue';
+import { SortableList } from '@/components/sortable/Sortable.js';
+import { Sortable, Plugins, Draggable } from '@shopify/draggable';
 import markdown from '@/util/markdown.js';
-import { computed } from 'vue';
-import { Primitive } from 'reka-ui';
-import { Motion } from 'motion-v';
+import { computed, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue';
 
-const { blueprint, container, visibleValues, extraValues, revealerValues, asConfig, hiddenFields, setHiddenField } = injectContainerContext();
+const { container, visibleValues, extraValues, revealerValues, asConfig, hiddenFields, setHiddenField, values, setFieldValue, setValues, readOnly, editingSections, canAddSections, meta, setFieldMeta } = injectContainerContext();
 const tab = injectTabContext();
-const sections = tab.sections;
 const visibleSections = computed(() => {
-    return sections.filter((section) => {
+    return tab.sections.filter((section) => {
         return section.fields.some((field) => {
             return new ShowField(
                 visibleValues.value,
@@ -36,66 +40,750 @@ const visibleSections = computed(() => {
         });
     });
 });
+const reorderableSections = computed(() => visibleSections.value.filter((section) => section.reorderable));
+const usesGroupEditor = computed(() => !!canAddSections?.value);
+const listedSections = computed(() => {
+    if (!usesGroupEditor.value) return visibleSections.value;
+
+    return visibleSections.value.filter((section) => !isOtherSection(section));
+});
+const pinnedSections = computed(() => {
+    if (!usesGroupEditor.value) return [];
+
+    return visibleSections.value.filter(isOtherSection);
+});
+const canReorderSections = computed(() => !readOnly.value && reorderableSections.value.length > 1);
+const isEditingSections = computed(() => !!editingSections?.value);
+const showSectionDragHandles = computed(() => usesGroupEditor.value && isEditingSections.value && !readOnly.value);
+const showAddSection = computed(() => !!canAddSections?.value && isEditingSections.value && !readOnly.value);
+const showGroupActions = computed(() => showAddSection.value);
+const hasOnlyOtherGroup = computed(() => usesGroupEditor.value && listedSections.value.length === 0);
+
+watch(isEditingSections, (editing) => {
+    if (!editing) closeGroupEditor();
+});
+
+const titleSnapshots = ref({});
+const groupEditorOpen = ref(false);
+const editingNewGroup = ref(false);
+const editingGroupHandle = ref(null);
+const editingGroupTitle = ref('');
+const groupTitleError = ref(null);
 
 function renderInstructions(instructions) {
     return instructions ? markdown(__(instructions), { openLinksInNewTabs: true }) : '';
 }
 
+function snapshotTitle(handle) {
+    titleSnapshots.value[handle] = values.value[handle] ?? null;
+}
+
+function updateTitle(handle, value) {
+    setFieldValue(handle, value?.trim() || null);
+}
+
+function cancelTitleEdit(handle) {
+    setFieldValue(handle, titleSnapshots.value[handle]);
+}
+
 function toggleSection(section) {
     if (section.collapsible) {
         section.collapsibleInteracted = true;
         section.collapsed = !section.collapsed;
     }
 }
+
+function sectionKey(section) {
+    return section.editable_title_handle || section.fields[0]?.handle;
+}
+
+function reorderSections(reordered) {
+    const reorderedKeys = new Set(reordered.map(sectionKey));
+    const remaining = tab.sections.filter((section) => !reorderedKeys.has(sectionKey(section)));
+
+    tab.sections.splice(0, tab.sections.length, ...reordered, ...remaining);
+    persistGroupOrder(reordered);
+}
+
+function persistGroupOrder(reordered) {
+    const next = {};
+
+    for (const section of reordered) {
+        const nameHandle = section.editable_title_handle;
+        const sitesHandle = sitesHandleFor(section);
+
+        if (nameHandle in values.value) {
+            next[nameHandle] = values.value[nameHandle];
+        }
+
+        if (sitesHandle in values.value) {
+            next[sitesHandle] = values.value[sitesHandle];
+        }
+    }
+
+    for (const [key, value] of Object.entries(values.value)) {
+        if (!(key in next)) {
+            next[key] = value;
+        }
+    }
+
+    setValues(valuesWithOtherLast(next));
+}
+
+function valuesWithOtherLast(next) {
+    const otherSites = 'group_other_sites';
+    const otherName = 'group_other_name';
+    const ordered = {};
+
+    for (const [key, value] of Object.entries(next)) {
+        if (key === otherName || key === otherSites) continue;
+        ordered[key] = value;
+    }
+
+    if (otherName in next) ordered[otherName] = next[otherName];
+    if (otherSites in next) ordered[otherSites] = next[otherSites];
+
+    return ordered;
+}
+
+function sitesHandleFor(section) {
+    return section.fields.find((field) => field.handle.endsWith('_sites'))?.handle
+        ?? section.fields[0]?.handle;
+}
+
+function isOtherSection(section) {
+    return sitesHandleFor(section) === 'group_other_sites';
+}
+
+function insertNamedSection(section) {
+    const index = tab.sections.findIndex(isOtherSection);
+
+    if (index === -1) {
+        tab.sections.push(section);
+        return;
+    }
+
+    tab.sections.splice(index, 0, section);
+}
+
+function uniqueGroupKey(title) {
+    const base = Statamic.$slug.create(title) || 'group';
+    let key = base;
+    let suffix = 2;
+
+    while (`group_${key}_sites` in values.value) {
+        key = `${base}-${suffix++}`;
+    }
+
+    return key;
+}
+
+function sectionTitle(section) {
+    if (!section.editable_title_handle) return __(section.display);
+
+    return values.value[section.editable_title_handle] || __(section.display);
+}
+
+function sectionGridField(section) {
+    return section.fields.find((field) => field.type === 'grid' && field.headers_in_section);
+}
+
+function showsSectionTitleOutside(section) {
+    return !!sectionGridField(section);
+}
+
+function showsSectionTitle(section) {
+    if (hasOnlyOtherGroup.value && isOtherSection(section)) {
+        return false;
+    }
+
+    return true;
+}
+
+const groupTitleInput = ref(null);
+
+function openNewGroupEditor() {
+    const section = addGroup(__('New Group'));
+
+    if (!section) return;
+
+    nextTick(() => {
+        focusSection(section);
+        editGroup(section);
+        editingNewGroup.value = true;
+    });
+}
+
+function editGroup(section) {
+    groupEditorOpen.value = true;
+    editingNewGroup.value = false;
+    editingGroupHandle.value = section.editable_title_handle;
+    editingGroupTitle.value = values.value[section.editable_title_handle] || '';
+    groupTitleError.value = null;
+}
+
+function closeGroupEditor() {
+    groupEditorOpen.value = false;
+    editingNewGroup.value = false;
+    editingGroupHandle.value = null;
+    editingGroupTitle.value = '';
+    groupTitleError.value = null;
+}
+
+function saveGroupTitle() {
+    const title = editingGroupTitle.value.trim();
+
+    if (!title) {
+        groupTitleError.value = __('statamic::validation.required');
+        return;
+    }
+
+    if (editingGroupHandle.value) {
+        setFieldValue(editingGroupHandle.value, title);
+    }
+
+    closeGroupEditor();
+}
+
+function removeGroup(section) {
+    const moving = values.value[sitesHandleFor(section)] || [];
+    const next = { ...values.value };
+
+    next.group_other_sites = [...(next.group_other_sites || []), ...moving];
+    delete next[section.editable_title_handle];
+    delete next[sitesHandleFor(section)];
+
+    const index = tab.sections.findIndex((item) => sectionKey(item) === sectionKey(section));
+    if (index !== -1) {
+        tab.sections.splice(index, 1);
+    }
+
+    setValues(valuesWithOtherLast(next));
+}
+
+function addGroup(title) {
+    const template = reorderableSections.value[0] ?? visibleSections.value[0];
+
+    if (!template) return;
+
+    const key = uniqueGroupKey(title);
+    const templateSitesHandle = sitesHandleFor(template);
+    const nameHandle = `group_${key}_name`;
+    const sitesHandle = `group_${key}_sites`;
+    const sitesField = deepClone(
+        template.fields.find((field) => field.handle === templateSitesHandle)
+            ?? template.fields.find((field) => field.handle?.endsWith('_sites'))
+            ?? template.fields[0],
+    );
+
+    sitesField.handle = sitesHandle;
+
+    const handleField = (sitesField.fields || []).find((field) => field.handle === 'handle');
+    if (handleField) {
+        handleField.prefix_from = nameHandle;
+    }
+
+    const section = {
+        display: title,
+        editable_title_handle: nameHandle,
+        reorderable: true,
+        fields: [
+            {
+                handle: nameHandle,
+                type: 'text',
+                visibility: 'hidden',
+                always_save: true,
+            },
+            sitesField,
+        ],
+    };
+
+    insertNamedSection(section);
+
+    setValues(valuesWithOtherLast({
+        ...values.value,
+        [nameHandle]: title,
+        [sitesHandle]: [],
+    }));
+
+    const templateMeta = meta.value[templateSitesHandle];
+
+    if (templateMeta) {
+        setFieldMeta(sitesHandle, {
+            defaults: deepClone(templateMeta.defaults),
+            new: deepClone(templateMeta.new),
+            existing: {},
+        });
+    }
+
+    return section;
+}
+
+function focusSection(section) {
+    const el = document.querySelector(`[data-section-key="${CSS.escape(sectionKey(section))}"]`);
+
+    el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el?.focus({ preventScroll: true });
+}
+
+function focusGroupTitleInput() {
+    nextTick(() => groupTitleInput.value?.select());
+}
+
+const SECTION_ROW_ITEM_CLASS = 'publish-section-row-item';
+const SECTION_ROW_HANDLE_CLASS = 'publish-section-row-handle';
+const rowZones = new Map();
+let rowSortable = null;
+let rowSortableRebuildQueued = false;
+
+function registerSectionRowZone(el, handle) {
+    for (const [existing, existingHandle] of rowZones) {
+        if (existingHandle === handle) {
+            rowZones.delete(existing);
+        }
+    }
+
+    rowZones.set(el, handle);
+    scheduleRowSortableRebuild();
+}
+
+function unregisterSectionRowZone(el) {
+    if (typeof el === 'string') {
+        for (const [existing, handle] of rowZones) {
+            if (handle === el) {
+                rowZones.delete(existing);
+            }
+        }
+    } else {
+        rowZones.delete(el);
+    }
+
+    scheduleRowSortableRebuild();
+}
+
+function scheduleRowSortableRebuild() {
+    if (rowSortableRebuildQueued) return;
+
+    rowSortableRebuildQueued = true;
+
+    nextTick(() => {
+        rowSortableRebuildQueued = false;
+        rebuildRowSortable();
+    });
+}
+
+function rebuildRowSortable() {
+    rowSortable?.destroy();
+    rowSortable = null;
+
+    const containers = [...rowZones.keys()].filter((el) => el?.isConnected);
+
+    if (!containers.length || readOnly.value) return;
+
+    rowSortable = new Sortable(containers, {
+        draggable: `.${SECTION_ROW_ITEM_CLASS}`,
+        handle: `.${SECTION_ROW_HANDLE_CLASS}`,
+        delay: 0,
+        distance: 4,
+        swapAnimation: { vertical: true, horizontal: false },
+        plugins: [Plugins.SwapAnimation],
+        mirror: {
+            constrainDimensions: true,
+            appendTo: 'body',
+            xAxis: false,
+        },
+        exclude: {
+            plugins: [Draggable.Plugins.Focusable],
+        },
+    });
+
+    rowSortable.on('sortable:stop', moveRowBetweenZones);
+}
+
+function moveRowBetweenZones(event) {
+    const fromHandle = rowZones.get(event.oldContainer);
+    const toHandle = rowZones.get(event.newContainer);
+
+    if (!fromHandle || !toHandle || event.oldIndex < 0) return;
+
+    const fromRows = [...(values.value[fromHandle] || [])];
+    const toRows = fromHandle === toHandle ? fromRows : [...(values.value[toHandle] || [])];
+    const [row] = fromRows.splice(event.oldIndex, 1);
+
+    if (!row) return;
+
+    const newIndex = Math.min(Math.max(event.newIndex ?? 0, 0), toRows.length);
+    toRows.splice(newIndex, 0, row);
+
+    if (fromHandle === toHandle) {
+        setFieldValue(fromHandle, fromRows);
+        return;
+    }
+
+    setValues(valuesWithOtherLast({
+        ...values.value,
+        [fromHandle]: fromRows,
+        [toHandle]: toRows,
+    }));
+
+    moveRowMeta(fromHandle, toHandle, row._id);
+    scheduleRowSortableRebuild();
+}
+
+function moveRowMeta(fromHandle, toHandle, rowId) {
+    if (!rowId) return;
+
+    const fromMeta = meta.value[fromHandle];
+    const toMeta = meta.value[toHandle];
+
+    if (!fromMeta?.existing || !toMeta) return;
+
+    const { [rowId]: rowMeta, ...restExisting } = fromMeta.existing;
+
+    setFieldMeta(fromHandle, { ...fromMeta, existing: restExisting });
+    setFieldMeta(toHandle, {
+        ...toMeta,
+        existing: { ...toMeta.existing, [rowId]: rowMeta },
+    });
+}
+
+const SECTION_ADD_ROW_ATTR = 'data-grid-add-row';
+
+provide('sectionAddRowTarget', SECTION_ADD_ROW_ATTR);
+
+function sectionAddRowBindings(section) {
+    return { [SECTION_ADD_ROW_ATTR]: sitesHandleFor(section) };
+}
+
+if (canAddSections?.value) {
+    provide('sectionRowSortable', {
+        itemClass: SECTION_ROW_ITEM_CLASS,
+        handleClass: SECTION_ROW_HANDLE_CLASS,
+        register: registerSectionRowZone,
+        unregister: unregisterSectionRowZone,
+    });
+}
+
+onBeforeUnmount(() => {
+    rowSortable?.destroy();
+    rowSortable = null;
+    rowZones.clear();
+});
 </script>
 
 <template>
     <div>
-        <Panel
-            v-for="(section, i) in visibleSections"
-            :key="i"
-            :class="[
-                'mb-6',
-                { 'pb-0': section.collapsed }
-            ]"
+        <SortableList
+            :model-value="listedSections"
+            :disabled="!canReorderSections || !isEditingSections"
+            item-class="publish-section-sortable"
+            handle-class="publish-section-drag-handle"
+            :vertical="true"
+            append-to="body"
+            constrain-dimensions
+            v-slot="{}"
+            @update:model-value="reorderSections"
         >
-            <PanelHeader v-if="section.display || section.collapsible" class="relative flex items-center justify-between">
-                <div class="[&_a]:relative [&_a]:z-(--z-index-above)">
-                    <Heading :text="__(section.display)" />
-                    <Subheading v-if="section.instructions" :text="renderInstructions(section.instructions)" />
+            <div>
+                <div
+                    v-for="(section, i) in listedSections"
+                    :key="sectionKey(section) || i"
+                    :data-section-key="sectionKey(section)"
+                    tabindex="-1"
+                    class="outline-none"
+                    :class="{
+                        'publish-section-sortable': section.reorderable,
+                        'mb-8': showsSectionTitleOutside(section),
+                    }"
+                >
+                    <div
+                        v-if="showsSectionTitleOutside(section) && showsSectionTitle(section)"
+                        class="mb-2 flex items-center justify-between gap-3 px-1"
+                    >
+                        <div class="flex min-w-0 flex-1 items-center gap-2">
+                            <Icon
+                                v-if="section.reorderable && showSectionDragHandles"
+                                name="handles-sm"
+                                class="publish-section-drag-handle size-3! shrink-0 cursor-grab text-gray-400"
+                                :aria-label="__('Drag to reorder')"
+                                @mousedown.prevent
+                            />
+                            <Heading :text="sectionTitle(section)" />
+                            <Subheading v-if="section.instructions" :text="renderInstructions(section.instructions)" />
+                        </div>
+                        <div class="flex shrink-0 items-center">
+                            <div v-if="showGroupActions && section.reorderable" class="flex shrink-0 items-center">
+                                <Button
+                                    icon="pencil-line"
+                                    size="sm"
+                                    variant="ghost"
+                                    :aria-label="__('Edit Group')"
+                                    @click="editGroup(section)"
+                                />
+                                <Button
+                                    icon="trash"
+                                    size="sm"
+                                    variant="ghost"
+                                    :aria-label="__('Delete Group')"
+                                    @click.prevent="removeGroup(section)"
+                                />
+                            </div>
+                            <div v-if="section.collapsible" class="flex shrink-0 items-center">
+                                <Button
+                                    @click="toggleSection(section)"
+                                    class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
+                                    :icon="section.collapsed ? 'expand' : 'collapse'"
+                                    size="sm"
+                                    variant="ghost"
+                                    :aria-label="__('Toggle section visibility')"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <Panel
+                        :class="{
+                            'mb-6': !showsSectionTitleOutside(section),
+                            'mb-0!': showsSectionTitleOutside(section),
+                            'pb-0': section.collapsed,
+                        }"
+                    >
+                        <PanelHeader
+                            v-if="!showsSectionTitleOutside(section) && showsSectionTitle(section) && (section.display || section.collapsible || section.editable_title_handle)"
+                            class="pl-2.75! pr-3.25!"
+                        >
+                            <div class="flex items-center justify-between gap-3">
+                                <div class="flex min-w-0 flex-1 items-center gap-2">
+                                    <Icon
+                                        v-if="section.reorderable && showSectionDragHandles"
+                                        name="handles-sm"
+                                        class="publish-section-drag-handle size-3! shrink-0 cursor-grab text-gray-400"
+                                        :aria-label="__('Drag to reorder')"
+                                        @mousedown.prevent
+                                    />
+                                    <Heading v-if="!section.editable_title_handle || usesGroupEditor" :text="sectionTitle(section)" />
+                                    <Heading v-else class="min-w-0">
+                                        <Editable
+                                            :model-value="values[section.editable_title_handle] || ''"
+                                            :activation-mode="'none'"
+                                            submit-mode="both"
+                                            :placeholder="__(section.display)"
+                                            class="publish-section-editable-title min-w-0 field-sizing-content outline-offset-5 rounded-sm"
+                                            @edit="snapshotTitle(section.editable_title_handle)"
+                                            @update:model-value="(value) => updateTitle(section.editable_title_handle, value)"
+                                            @cancel="cancelTitleEdit(section.editable_title_handle)"
+                                        />
+                                    </Heading>
+                                    <Subheading v-if="section.instructions" :text="renderInstructions(section.instructions)" />
+                                </div>
+                                <div class="flex shrink-0 items-center">
+                                    <div v-if="showGroupActions && section.reorderable" class="flex shrink-0 items-center">
+                                        <Button
+                                            icon="pencil-line"
+                                            size="sm"
+                                            variant="ghost"
+                                            :aria-label="__('Edit Group')"
+                                            @click="editGroup(section)"
+                                        />
+                                        <Button
+                                            icon="trash"
+                                            size="sm"
+                                            variant="ghost"
+                                            :aria-label="__('Delete Group')"
+                                            @click.prevent="removeGroup(section)"
+                                        />
+                                    </div>
+                                    <div v-if="section.collapsible" class="flex shrink-0 items-center">
+                                        <Button
+                                            @click="toggleSection(section)"
+                                            class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
+                                            :icon="section.collapsed ? 'expand' : 'collapse'"
+                                            size="sm"
+                                            variant="ghost"
+                                            :aria-label="__('Toggle section visibility')"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </PanelHeader>
+                        <div
+                            class="publish-section-collapsible grid"
+                            :class="[
+                                section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded',
+                                { 'publish-section-collapsible--interacted': section.collapsibleInteracted },
+                            ]"
+                        >
+                            <div class="publish-section-collapsible__inner min-h-0">
+                                <Card v-if="!usesGroupEditor" :class="{ 'p-0!': asConfig }">
+                                    <FieldsProvider :fields="section.fields">
+                                        <slot :section="section">
+                                            <Fields />
+                                        </slot>
+                                    </FieldsProvider>
+                                </Card>
+                                <FieldsProvider v-else :fields="section.fields">
+                                    <slot :section="section">
+                                        <Fields />
+                                    </slot>
+                                </FieldsProvider>
+                            </div>
+                        </div>
+                    </Panel>
+                    <div
+                        v-if="showsSectionTitleOutside(section)"
+                        v-show="!section.collapsed"
+                        v-bind="sectionAddRowBindings(section)"
+                        class="mt-2 px-1 empty:hidden"
+                    />
                 </div>
-                <Button
-                    @click="toggleSection(section)"
-                    v-if="section.collapsible"
-                    class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
-                    :icon="section.collapsed ? 'expand' : 'collapse'"
-                    size="sm"
-                    variant="ghost"
-                    :aria-label="__('Toggle section visibility')"
-                />
-            </PanelHeader>
+            </div>
+        </SortableList>
+
+        <div
+            v-for="(section, i) in pinnedSections"
+            :key="sectionKey(section) || `pinned-${i}`"
+            :class="{ 'mb-8': showsSectionTitleOutside(section) }"
+        >
             <div
-                class="publish-section-collapsible grid"
-                :class="[
-                    section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded',
-                    { 'publish-section-collapsible--interacted': section.collapsibleInteracted },
-                ]"
+                v-if="showsSectionTitleOutside(section) && showsSectionTitle(section)"
+                class="mb-2 flex items-center justify-between gap-3 px-1"
             >
-                <div class="publish-section-collapsible__inner min-h-0">
-                    <Card :class="{ 'p-0!': asConfig }">
-                        <FieldsProvider :fields="section.fields">
+                <div class="flex min-w-0 flex-1 items-center gap-2">
+                    <Heading :text="sectionTitle(section)" />
+                    <Subheading v-if="section.instructions" :text="renderInstructions(section.instructions)" />
+                </div>
+                <div v-if="section.collapsible" class="flex shrink-0 items-center">
+                    <Button
+                        @click="toggleSection(section)"
+                        class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
+                        :icon="section.collapsed ? 'expand' : 'collapse'"
+                        size="sm"
+                        variant="ghost"
+                        :aria-label="__('Toggle section visibility')"
+                    />
+                </div>
+            </div>
+
+            <Panel
+                :class="{
+                    'mb-6': !showsSectionTitleOutside(section),
+                    'mb-0!': showsSectionTitleOutside(section),
+                    'pb-0': section.collapsed,
+                }"
+            >
+                <PanelHeader
+                    v-if="!showsSectionTitleOutside(section) && showsSectionTitle(section) && (section.display || section.collapsible)"
+                    class="pl-2.75! pr-3.25!"
+                >
+                    <div class="flex items-center justify-between">
+                        <div class="flex min-w-0 flex-1 items-center gap-2">
+                            <Heading :text="sectionTitle(section)" />
+                            <Subheading v-if="section.instructions" :text="renderInstructions(section.instructions)" />
+                        </div>
+                        <div v-if="section.collapsible" class="flex shrink-0 items-center">
+                            <Button
+                                @click="toggleSection(section)"
+                                class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
+                                :icon="section.collapsed ? 'expand' : 'collapse'"
+                                size="sm"
+                                variant="ghost"
+                                :aria-label="__('Toggle section visibility')"
+                            />
+                        </div>
+                    </div>
+                </PanelHeader>
+                <div
+                    class="publish-section-collapsible grid"
+                    :class="[
+                        section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded',
+                        { 'publish-section-collapsible--interacted': section.collapsibleInteracted },
+                    ]"
+                >
+                    <div class="publish-section-collapsible__inner min-h-0">
+                        <Card v-if="!usesGroupEditor" :class="{ 'p-0!': asConfig }">
+                            <FieldsProvider :fields="section.fields">
+                                <slot :section="section">
+                                    <Fields />
+                                </slot>
+                            </FieldsProvider>
+                        </Card>
+                        <FieldsProvider v-else :fields="section.fields">
                             <slot :section="section">
                                 <Fields />
                             </slot>
                         </FieldsProvider>
-                    </Card>
+                    </div>
                 </div>
+            </Panel>
+            <div
+                v-if="showsSectionTitleOutside(section)"
+                v-show="!section.collapsed"
+                v-bind="sectionAddRowBindings(section)"
+                class="mt-2 px-1 empty:hidden"
+            />
+        </div>
+
+        <div v-if="showAddSection" class="blueprint-add-section-container flex min-h-40 p-2">
+            <button
+                type="button"
+                class="relative flex w-full items-center justify-center rounded-xl border border-dashed border-gray-500 text-gray-700 hover:border-gray hover:text-gray-925 dark:border-gray-500 dark:text-gray-300 dark:hover:border-gray-400 dark:hover:text-gray-200"
+                @click="openNewGroupEditor"
+            >
+                <span class="flex items-center gap-2">
+                    <Icon name="plus" class="size-4" />
+                    {{ __('Add Group') }}
+                </span>
+            </button>
+        </div>
+
+        <Stack
+            size="narrow"
+            :open="groupEditorOpen"
+            :title="editingNewGroup ? __('Add Group') : __('Edit Group')"
+            @update:open="(open) => { if (!open) closeGroupEditor() }"
+            @opened="focusGroupTitleInput"
+        >
+            <div class="space-y-6">
+                <Field id="publish-section-group-title" :label="__('Title')" :error="groupTitleError" required>
+                    <Input
+                        ref="groupTitleInput"
+                        id="publish-section-group-title"
+                        v-model="editingGroupTitle"
+                        :focus="true"
+                        @keyup.enter="saveGroupTitle"
+                    />
+                </Field>
+                <Button class="w-full" variant="primary" :text="__('Save')" @click="saveGroupTitle" />
             </div>
-        </Panel>
+        </Stack>
     </div>
 </template>
 
 <style scoped>
+.publish-section-editable-title :deep(span),
+.publish-section-editable-title :deep(input) {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    outline: none;
+    box-shadow: none;
+}
+
+.publish-section-editable-title :deep(span[data-placeholder]) {
+    color: var(--color-gray-500);
+}
+
+.dark .publish-section-editable-title :deep(span[data-placeholder]) {
+    color: var(--color-gray-400);
+}
+
 .publish-section-collapsible {
     --timing: ease;
     /* No animation on load; enable once the user has toggled this section. */
diff --git a/resources/js/pages/sites/Edit.vue b/resources/js/pages/sites/Edit.vue
index 9eb90a7edab..656ae71286b 100644
--- a/resources/js/pages/sites/Edit.vue
+++ b/resources/js/pages/sites/Edit.vue
@@ -3,6 +3,7 @@ import Head from '@/pages/layout/Head.vue';
 import { Header, CommandPaletteItem, Button, PublishContainer, DocsCallout } from '@ui';
 import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 import { Pipeline, Request } from '@ui/Publish/SavePipeline.js';
+import { deepClone } from '@/util/clone.js';
 
 const props = defineProps({
     blueprint: Object,
@@ -11,29 +12,80 @@ const props = defineProps({
     updateUrl: String,
 });
 
+const isMultisite = computed(() => Statamic.$config.get('multisiteEnabled'));
+
+function siteHandlesFromValues(values) {
+    if (! isMultisite.value) {
+        return [values.handle];
+    }
+
+    return Object.entries(values)
+        .filter(([key, sites]) => key.endsWith('_sites') && Array.isArray(sites))
+        .flatMap(([, sites]) => sites.map((site) => site.handle));
+}
+
 const container = useTemplateRef('container');
 const values = ref(props.initialValues);
 const errors = ref({});
 const saving = ref(false);
+const editingGroups = ref(false);
+const groupsSnapshot = ref(null);
+const containerKey = ref(0);
 
-const pageTitle = computed(() => Statamic.$config.get('multisiteEnabled') ? __('Configure Sites') : __('Configure Site'));
+const groupsDirty = computed(() => {
+    if (!editingGroups.value || !groupsSnapshot.value) return false;
 
-const initialSiteHandles = computed(() => {
-    return Statamic.$config.get('multisiteEnabled')
-        ? props.initialValues.sites.map((site) => site.handle)
-        : [props.initialValues.handle];
+    return JSON.stringify(values.value) !== JSON.stringify(groupsSnapshot.value);
 });
 
-const currentSiteHandles = computed(() => {
-    return Statamic.$config.get('multisiteEnabled')
-        ? values.value.sites.map((site) => site.handle)
-        : [values.value.handle];
-});
+const pageTitle = computed(() => isMultisite.value ? __('Configure Sites') : __('Configure Site'));
+
+const initialSiteHandles = computed(() => siteHandlesFromValues(props.initialValues));
+
+const currentSiteHandles = computed(() => siteHandlesFromValues(values.value));
 
 const initialHandleChanged = computed(() => initialSiteHandles.value.filter((handle) => !currentSiteHandles.value.includes(handle)).length > 0);
 const initialHandleChangedWarning = computed(() => __('Warning! Changing a site handle may break existing site content!'));
 
+const hasOnlyOtherGroup = computed(() => {
+    if (! isMultisite.value || ! props.blueprint?.tabs) {
+        return false;
+    }
+
+    const sections = props.blueprint.tabs.flatMap((tab) => tab.sections ?? []);
+
+    return sections.length > 0 && ! sections.some((section) => section.reorderable);
+});
+
+const editSiteGroupsLabel = computed(() => hasOnlyOtherGroup.value ? __('Add Site Groups') : __('Edit Site Groups'));
+
+function startEditingGroups() {
+    groupsSnapshot.value = deepClone(values.value);
+    editingGroups.value = true;
+}
+
+function stopEditingGroups() {
+    editingGroups.value = false;
+    groupsSnapshot.value = null;
+}
+
+function discardGroupChanges() {
+    values.value = deepClone(groupsSnapshot.value);
+    containerKey.value++;
+    stopEditingGroups();
+}
+
+function groupNamesFromValues(formValues) {
+    return Object.fromEntries(
+        Object.entries(formValues).filter(([key, value]) => /^group_.+_name$/.test(key) && typeof value === 'string'),
+    );
+}
+
 function save() {
+    if (editingGroups.value && !groupsDirty.value) {
+        return;
+    }
+
     if (initialHandleChanged.value && !confirm(initialHandleChangedWarning.value)) {
         return;
     }
@@ -41,12 +93,12 @@ function save() {
     new Pipeline()
         .provide({ container, errors, saving })
         .through([
-            new Request(props.updateUrl, 'patch')
+            new Request(props.updateUrl, 'patch', groupNamesFromValues(values.value))
         ])
         .then((response) => {
             Statamic.$toast.success(__('Saved'));
 
-            if (Statamic.$config.get('multisiteEnabled')) {
+            if (isMultisite.value) {
                 window.location.reload();
             }
         });
@@ -56,6 +108,8 @@ let saveKeyBinding;
 
 onMounted(() => {
     saveKeyBinding = Statamic.$keys.bindGlobal(['mod+s'], (e) => {
+        if (editingGroups.value && !groupsDirty.value) return;
+
         e.preventDefault();
         save();
     });
@@ -65,10 +119,33 @@ onUnmounted(() => saveKeyBinding.destroy());
 </script>
 
 <template>
-    <Head :title="__('Configure Sites')" />
+    <Head :title="pageTitle" />
 
     <div class="max-w-page mx-auto">
         <Header :title="pageTitle" icon="site">
+            <CommandPaletteItem
+                v-if="!editingGroups && isMultisite"
+                :category="$commandPalette.category.Actions"
+                :text="editSiteGroupsLabel"
+                icon="navigation"
+                :action="startEditingGroups"
+                v-slot="{ text, action }"
+            >
+                <Button icon="navigation" :text="text" @click="action" />
+            </CommandPaletteItem>
+            <Button
+                v-if="editingGroups && !groupsDirty"
+                :text="__('Cancel')"
+                :disabled="saving"
+                @click="stopEditingGroups"
+            />
+            <Button
+                v-if="editingGroups && groupsDirty"
+                :text="__('Discard Changes')"
+                variant="filled"
+                :disabled="saving"
+                @click="discardGroupChanges"
+            />
             <CommandPaletteItem
                 :category="$commandPalette.category.Actions"
                 :text="__('Save')"
@@ -77,12 +154,20 @@ onUnmounted(() => saveKeyBinding.destroy());
                 prioritize
                 v-slot="{ text, action }"
             >
-                <Button type="submit" variant="primary" @click="action">{{ text }}</Button>
+                <Button
+                    type="submit"
+                    variant="primary"
+                    :text="text"
+                    :loading="saving"
+                    :disabled="editingGroups && !groupsDirty"
+                    @click="action"
+                />
             </CommandPaletteItem>
         </Header>
 
         <PublishContainer
             v-if="blueprint"
+            :key="containerKey"
             ref="container"
             name="sites"
             reference="sites"
@@ -90,6 +175,7 @@ onUnmounted(() => saveKeyBinding.destroy());
             v-model="values"
             :meta
             :errors
+            :provide="{ editingSections: editingGroups, canAddSections: isMultisite }"
         />
 
         <DocsCallout :topic="__('Multi-Site')" url="multi-site" />
diff --git a/src/Facades/Site.php b/src/Facades/Site.php
index 51ceb5432d1..80ed7d766f6 100644
--- a/src/Facades/Site.php
+++ b/src/Facades/Site.php
@@ -11,6 +11,7 @@
  * @method static mixed authorized()
  * @method static mixed default()
  * @method static bool hasMultiple()
+ * @method static \Illuminate\Support\Collection filterByGroup($handles, ?string $siteHandle)
  * @method static mixed get($handle)
  * @method static mixed findByUrl($url)
  * @method static mixed current()
@@ -21,7 +22,9 @@
  * @method static self setSites($sites)
  * @method static self setSiteValue(string $site, string $key, $value)
  * @method static string path()
- * @method static \Statamic\Fields\Blueprint blueprint()
+ * @method static \Statamic\Fields\Blueprint blueprint(array $values = [])
+ * @method static array blueprintValues()
+ * @method static array configFromBlueprintValues(array $values)
  * @method static array config()
  *
  * @see \Statamic\Sites\Sites
diff --git a/src/Fields/Section.php b/src/Fields/Section.php
index 4fa40e8c477..2ef984a0975 100644
--- a/src/Fields/Section.php
+++ b/src/Fields/Section.php
@@ -50,6 +50,8 @@ public function toPublishArray(): array
             'instructions' => $this->instructions(),
             'collapsible' => $this->collapsible() ?: null,
             'collapsed' => $this->collapsed() ?: null,
+            'editable_title_handle' => Arr::get($this->contents, 'editable_title_handle'),
+            'reorderable' => Arr::get($this->contents, 'reorderable') ?: null,
         ]) + [
             'fields' => $this->fields()->toPublishArray(),
         ];
diff --git a/src/Http/Controllers/CP/Sites/SitesController.php b/src/Http/Controllers/CP/Sites/SitesController.php
index f545d8169c2..37ec682c7b4 100644
--- a/src/Http/Controllers/CP/Sites/SitesController.php
+++ b/src/Http/Controllers/CP/Sites/SitesController.php
@@ -3,6 +3,7 @@
 namespace Statamic\Http\Controllers\CP\Sites;
 
 use Illuminate\Http\Request;
+use Illuminate\Validation\ValidationException;
 use Inertia\Inertia;
 use Statamic\Facades\Site;
 use Statamic\Http\Controllers\CP\CpController;
@@ -33,46 +34,78 @@ public function edit()
 
     private function values(): array
     {
-        $sites = collect(Site::config())
-            ->map(fn ($site, $handle) => array_merge(['handle' => $handle], $site))
-            ->values()
-            ->all();
-
-        if (! Site::multiEnabled()) {
-            return $sites[0];
-        }
-
-        return ['sites' => $sites];
+        return Site::blueprintValues();
     }
 
     public function update(Request $request)
     {
-        $blueprint = Site::blueprint();
+        $blueprint = Site::blueprint($request->all());
 
         $fields = $blueprint
             ->fields()
             ->addValues($request->all());
 
-        $fields->validate();
+        $fields->validate($this->uniqueHandleRules($request->all()));
 
-        $values = $fields
-            ->process()
-            ->values()
-            ->all();
+        $values = $this->valuesInRequestOrder(
+            $request->all(),
+            $fields->process()->values()->all()
+        );
 
-        // Normalize form values to sites config, since we always want array of sites keyed by handle, etc.
-        $sites = collect(Site::multiEnabled() ? $values['sites'] : [$values])
-            ->keyBy('handle')
-            ->transform(function ($site) {
-                return collect($site)
-                    ->except(['id', 'handle'])
-                    ->filter()
-                    ->all();
-            })
-            ->all();
+        $sites = Site::configFromBlueprintValues($values);
+
+        if (Site::multiEnabled() && empty($sites)) {
+            throw ValidationException::withMessages([
+                'group_other_sites' => [__('This field is required.')],
+            ]);
+        }
 
         Site::setSites($sites)->save();
 
         return response('', 204);
     }
+
+    private function valuesInRequestOrder(array $request, array $values): array
+    {
+        return collect(array_keys($request))
+            ->filter(fn ($key) => array_key_exists($key, $values) || $this->isGroupNameKey($key))
+            ->mapWithKeys(fn ($key) => [$key => array_key_exists($key, $values) ? $values[$key] : $request[$key]])
+            ->union($values)
+            ->all();
+    }
+
+    private function isGroupNameKey(string $key): bool
+    {
+        return (bool) preg_match('/^group_.+_name$/', $key);
+    }
+
+    private function uniqueHandleRules(array $values): array
+    {
+        $handles = collect();
+
+        foreach ($values as $key => $sites) {
+            if (! is_array($sites) || ! preg_match('/^group_.+_sites$/', $key)) {
+                continue;
+            }
+
+            foreach ($sites as $index => $site) {
+                $handle = $site['handle'] ?? null;
+
+                if (! is_string($handle) || $handle === '') {
+                    continue;
+                }
+
+                $handles["{$key}.{$index}.handle"] = $handle;
+            }
+        }
+
+        $duplicates = $handles->countBy()->filter(fn ($count) => $count > 1)->keys();
+
+        return $handles
+            ->filter(fn ($handle) => $duplicates->contains($handle))
+            ->map(fn () => [
+                fn ($attribute, $value, $fail) => $fail(__('statamic::validation.unique')),
+            ])
+            ->all();
+    }
 }
diff --git a/src/Sites/Site.php b/src/Sites/Site.php
index 8a039c3882c..54a6be7273b 100644
--- a/src/Sites/Site.php
+++ b/src/Sites/Site.php
@@ -56,6 +56,13 @@ public function lang()
         return $this->config['lang'] ?? $this->shortLocale();
     }
 
+    public function group(): ?string
+    {
+        $group = $this->config['group'] ?? null;
+
+        return is_string($group) && $group !== '' ? $group : null;
+    }
+
     public function url()
     {
         return URL::tidy($this->config['url'], true);
@@ -154,6 +161,7 @@ public function augmentedArrayData()
             'url' => $this->url(),
             'permalink' => $this->absoluteUrl(),
             'direction' => $this->direction(),
+            'group' => $this->group(),
             'attributes' => $this->attributes(),
         ];
     }
diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index d7fc9498b80..5d2c384df9b 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -18,6 +18,8 @@
 
 class Sites
 {
+    const OTHER_GROUP_KEY = 'other';
+
     protected $sites;
     protected $current;
     protected ?Closure $currentUrlCallback = null;
@@ -56,6 +58,15 @@ public function hasMultiple()
         return $this->sites->count() > 1;
     }
 
+    public function filterByGroup($handles, ?string $siteHandle)
+    {
+        if (! $siteHandle || ! ($site = $this->get($siteHandle)) || ! ($group = $site->group())) {
+            return collect($handles);
+        }
+
+        return collect($handles)->filter(fn ($handle) => $this->get($handle)?->group() === $group);
+    }
+
     public function get($handle)
     {
         return $this->sites->get($handle);
@@ -174,9 +185,90 @@ protected function saveToStore()
         File::put($this->path(), YAML::dump($this->config()));
     }
 
-    public function blueprint()
+    public function blueprint(array $values = [])
+    {
+        $siteRowFields = $this->siteRowFields();
+
+        if ($this->multiEnabled()) {
+            return Blueprint::make()->setContents([
+                'tabs' => [
+                    'main' => [
+                        'sections' => $this->multisiteBlueprintSections($siteRowFields, $values),
+                    ],
+                ],
+            ]);
+        }
+
+        return Blueprint::make()->setContents([
+            'fields' => $siteRowFields,
+        ]);
+    }
+
+    public function blueprintValues(): array
     {
-        $siteFields = [
+        if (! $this->multiEnabled()) {
+            $site = $this->default();
+
+            return array_merge(['handle' => $site->handle()], $site->rawConfig());
+        }
+
+        $values = [];
+        $otherSites = [];
+
+        foreach ($this->groupedSites() as $group => $sites) {
+            $key = $this->groupSectionKey($group);
+            $mapped = $sites->map(fn (Site $site) => array_merge(
+                ['handle' => $site->handle()],
+                collect($site->rawConfig())->except('group')->all()
+            ))->values()->all();
+
+            if ($key === self::OTHER_GROUP_KEY) {
+                $otherSites = $mapped;
+
+                continue;
+            }
+
+            $values["group_{$key}_name"] = $group ?: null;
+            $values["group_{$key}_sites"] = $mapped;
+        }
+
+        $values['group_'.self::OTHER_GROUP_KEY.'_sites'] = $otherSites;
+
+        return $values;
+    }
+
+    public function configFromBlueprintValues(array $values): array
+    {
+        if (! $this->multiEnabled()) {
+            return [
+                $values['handle'] => collect($values)->except(['id', 'handle'])->filter()->all(),
+            ];
+        }
+
+        $sites = collect();
+
+        foreach ($values as $key => $groupSites) {
+            if (! is_array($groupSites) || ! preg_match('/^group_(.+)_sites$/', $key, $matches)) {
+                continue;
+            }
+
+            $groupName = $matches[1] === self::OTHER_GROUP_KEY
+                ? null
+                : ($values["group_{$matches[1]}_name"] ?? null);
+            $groupName = is_string($groupName) && $groupName !== '' ? $groupName : null;
+
+            $this->mergeSitesFromGrid($sites, $groupSites, $groupName);
+        }
+
+        return $sites
+            ->keyBy('handle')
+            ->map(fn ($site) => collect($site)->except(['id', 'handle'])->filter()->all())
+            ->all();
+    }
+
+    protected function siteRowFields(): array
+    {
+        return [
             [
                 'handle' => 'name',
                 'field' => [
@@ -251,39 +343,133 @@ public function blueprint()
                 ],
             ],
         ];
+    }
 
-        // If multisite, nest fields in a grid
-        if ($this->multiEnabled()) {
-            $tableWidths = [
-                'attributes' => 30,
-            ];
+    protected function multisiteBlueprintSections(array $siteRowFields, array $values = []): array
+    {
+        $sections = [];
+        $seen = [];
 
-            $siteFields = [
-                [
-                    'handle' => 'sites',
-                    'field' => [
-                        'type' => 'grid',
-                        'hide_display' => true,
-                        'actions' => false,
-                        'fullscreen' => false,
-                        'mode' => 'table',
-                        'stack_at' => 925,
-                        'add_row' => __('Add Site'),
-                        'fields' => collect($siteFields)->map(function ($field) use ($tableWidths) {
-                            $field['field']['width'] = $tableWidths[$field['handle']] ?? 14;
-                            $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
-
-                            return $field;
-                        })->all(),
-                        'required' => true,
-                    ],
+        foreach ($this->groupedSites() as $group => $sites) {
+            $key = $this->groupSectionKey($group);
+
+            if ($key === self::OTHER_GROUP_KEY) {
+                continue;
+            }
+
+            $seen[$key] = true;
+            $sections[] = $this->groupSection($key, $group ?: null, $siteRowFields);
+        }
+
+        foreach ($values as $handle => $groupSites) {
+            if (! is_array($groupSites) || ! preg_match('/^group_(.+)_sites$/', $handle, $matches)) {
+                continue;
+            }
+
+            $key = $matches[1];
+
+            if ($key === self::OTHER_GROUP_KEY || isset($seen[$key])) {
+                continue;
+            }
+
+            $name = $values["group_{$key}_name"] ?? null;
+            $name = is_string($name) && $name !== '' ? $name : null;
+            $seen[$key] = true;
+            $sections[] = $this->groupSection($key, $name, $siteRowFields);
+        }
+
+        $sections[] = $this->groupSection(self::OTHER_GROUP_KEY, null, $siteRowFields);
+
+        return $sections;
+    }
+
+    protected function groupSection(string $key, ?string $group, array $siteRowFields): array
+    {
+        $isOther = $key === self::OTHER_GROUP_KEY;
+
+        $fields = [];
+
+        if (! $isOther) {
+            $fields[] = [
+                'handle' => "group_{$key}_name",
+                'field' => [
+                    'type' => 'text',
+                    'visibility' => 'hidden',
+                    'always_save' => true,
                 ],
             ];
         }
 
-        return Blueprint::make()->setContents([
-            'fields' => $siteFields,
-        ]);
+        $fields[] = [
+            'handle' => "group_{$key}_sites",
+            'field' => $this->sitesGridField($siteRowFields, $key),
+        ];
+
+        $section = [
+            'display' => $isOther ? __('Other') : $group,
+            'fields' => $fields,
+        ];
+
+        if (! $isOther) {
+            $section['editable_title_handle'] = "group_{$key}_name";
+            $section['reorderable'] = true;
+        }
+
+        return $section;
+    }
+
+    protected function sitesGridField(array $siteRowFields, string $groupKey): array
+    {
+        $tableWidths = [
+            'attributes' => 30,
+        ];
+
+        return [
+            'type' => 'grid',
+            'hide_display' => true,
+            'actions' => false,
+            'fullscreen' => false,
+            'mode' => 'table',
+            'stack_at' => 925,
+            'reorderable' => true,
+            'headers_in_section' => true,
+            'add_row' => __('Add Site'),
+            'fields' => collect($siteRowFields)->map(function ($field) use ($tableWidths, $groupKey) {
+                $field['field']['width'] = $tableWidths[$field['handle']] ?? 14;
+                $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
+
+                if ($field['handle'] === 'handle' && $groupKey !== self::OTHER_GROUP_KEY) {
+                    $field['field']['prefix_from'] = "group_{$groupKey}_name";
+                }
+
+                return $field;
+            })->all(),
+        ];
+    }
+
+    protected function groupedSites(): Collection
+    {
+        return $this->all()->groupBy(fn (Site $site) => $site->group() ?? '');
+    }
+
+    protected function groupSectionKey(?string $group): string
+    {
+        if ($group === null || $group === '') {
+            return self::OTHER_GROUP_KEY;
+        }
+
+        return Str::slug($group);
+    }
+
+    protected function mergeSitesFromGrid(Collection $sites, array $groupSites, ?string $groupName): void
+    {
+        foreach ($groupSites as $site) {
+            if ($groupName) {
+                $site['group'] = $groupName;
+            }
+
+            $sites->put($site['handle'], $site);
+        }
     }
 
     public function config(): array
diff --git a/tests/Fields/SectionTest.php b/tests/Fields/SectionTest.php
index f617818fe45..8f1dd017e32 100644
--- a/tests/Fields/SectionTest.php
+++ b/tests/Fields/SectionTest.php
@@ -168,4 +168,40 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
             ],
         ], $section->toPublishArray());
     }
+
+    #[Test]
+    public function it_includes_reorderable_in_publish_array()
+    {
+        $section = new Section([
+            'display' => 'Test',
+            'reorderable' => true,
+            'fields' => [],
+        ]);
+
+        $this->assertTrue($section->toPublishArray()['reorderable']);
+    }
+
+    #[Test]
+    public function it_omits_reorderable_from_publish_array_when_false()
+    {
+        $section = new Section([
+            'display' => 'Test',
+            'reorderable' => false,
+            'fields' => [],
+        ]);
+
+        $this->assertArrayNotHasKey('reorderable', $section->toPublishArray());
+    }
+
+    #[Test]
+    public function it_includes_editable_title_handle_in_publish_array()
+    {
+        $section = new Section([
+            'display' => 'Test',
+            'editable_title_handle' => 'group_london_name',
+            'fields' => [],
+        ]);
+
+        $this->assertSame('group_london_name', $section->toPublishArray()['editable_title_handle']);
+    }
 }
diff --git a/tests/Sites/SiteTest.php b/tests/Sites/SiteTest.php
index b69cc9675a1..32a1a792607 100644
--- a/tests/Sites/SiteTest.php
+++ b/tests/Sites/SiteTest.php
@@ -84,6 +84,14 @@ public function gets_lang()
         $this->assertEquals('en-US', (new Site('en', ['locale' => 'en-US', 'lang' => 'en-US']))->lang());
     }
 
+    #[Test]
+    public function gets_group()
+    {
+        $this->assertNull((new Site('en', []))->group());
+        $this->assertNull((new Site('en', ['group' => '']))->group());
+        $this->assertEquals('London', (new Site('en', ['group' => 'London']))->group());
+    }
+
     #[Test]
     public function gets_is_default()
     {
diff --git a/tests/Sites/SitesConfigTest.php b/tests/Sites/SitesConfigTest.php
index 2242d1f3ad4..7dcfe0e0b66 100644
--- a/tests/Sites/SitesConfigTest.php
+++ b/tests/Sites/SitesConfigTest.php
@@ -44,6 +44,13 @@ public function setUp(): void
         Site::swap(new Sites);
     }
 
+    private function sitesField(array $section): array
+    {
+        return collect($section['fields'])->first(
+            fn ($field) => str_ends_with($field['handle'], '_sites')
+        );
+    }
+
     #[Test]
     public function it_gets_sites_from_yaml()
     {
@@ -341,7 +348,8 @@ public function it_saves_multiple_sites_through_cp_endpoint()
         $this
             ->actingAs(tap(User::make()->email('chew@bacca.com')->makeSuper())->save())
             ->patchJson(cp_route('sites.update'), [
-                'sites' => [
+                'group_other_name' => null,
+                'group_other_sites' => [
                     [
                         'id' => 'abcde', // grid fieldtypes submit id, that should get stripped out
                         'name' => 'English',
@@ -350,6 +358,9 @@ public function it_saves_multiple_sites_through_cp_endpoint()
                         'locale' => 'en_US',
                         'lang' => 'slang', // testing custom lang string, because it auto-sets itself off locale
                     ],
+                ],
+                'group_middle-east_name' => 'Middle East',
+                'group_middle-east_sites' => [
                     [
                         'id' => 'fghijk', // grid fieldtypes submit id, that should get stripped out
                         'name' => 'Arabic (Egypt)',
@@ -375,6 +386,7 @@ public function it_saves_multiple_sites_through_cp_endpoint()
                 'name' => 'Arabic (Egypt)',
                 'url' => '/ar/',
                 'locale' => 'ar_EG',
+                'group' => 'Middle East',
                 'attributes' => [
                     'theme' => 'standard',
                 ],
@@ -384,6 +396,294 @@ public function it_saves_multiple_sites_through_cp_endpoint()
         $this->assertSame($expected, YAML::file($this->yamlPath)->parse());
     }
 
+    #[Test]
+    public function it_saves_groups_in_submitted_order()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        Site::setSites([
+            'en' => [
+                'name' => 'English',
+                'url' => '/',
+                'locale' => 'en_US',
+                'group' => 'London',
+            ],
+            'paris' => [
+                'name' => 'French',
+                'url' => '/paris/',
+                'locale' => 'fr_FR',
+                'group' => 'Paris',
+            ],
+        ]);
+
+        $this
+            ->actingAs(tap(User::make()->email('chew@bacca.com')->makeSuper())->save())
+            ->patchJson(cp_route('sites.update'), [
+                'group_paris_name' => 'Paris',
+                'group_paris_sites' => [
+                    [
+                        'name' => 'French',
+                        'handle' => 'paris',
+                        'url' => '/paris/',
+                        'locale' => 'fr_FR',
+                    ],
+                ],
+                'group_london_name' => 'London',
+                'group_london_sites' => [
+                    [
+                        'name' => 'English',
+                        'handle' => 'en',
+                        'url' => '/',
+                        'locale' => 'en_US',
+                    ],
+                ],
+            ])
+            ->assertSuccessful();
+
+        $this->assertSame(['paris', 'en'], array_keys($saved = YAML::file($this->yamlPath)->parse()));
+        $this->assertSame('Paris', $saved['paris']['group']);
+        $this->assertSame('London', $saved['en']['group']);
+    }
+
+    #[Test]
+    public function it_builds_grouped_blueprint_values()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        Site::setSites([
+            'default' => [
+                'name' => 'English',
+                'url' => '/',
+                'locale' => 'en_US',
+            ],
+            'arabic' => [
+                'name' => 'Arabic (Egypt)',
+                'url' => '/ar/',
+                'locale' => 'ar_EG',
+                'group' => 'Middle East',
+            ],
+        ]);
+
+        $values = Site::blueprintValues();
+
+        $this->assertSame([
+            'group_middle-east_name',
+            'group_middle-east_sites',
+            'group_other_sites',
+        ], array_keys($values));
+        $this->assertCount(1, $values['group_other_sites']);
+        $this->assertSame('default', $values['group_other_sites'][0]['handle']);
+        $this->assertSame('Middle East', $values['group_middle-east_name']);
+        $this->assertCount(1, $values['group_middle-east_sites']);
+        $this->assertSame('arabic', $values['group_middle-east_sites'][0]['handle']);
+        $this->assertArrayNotHasKey('group', $values['group_middle-east_sites'][0]);
+    }
+
+    #[Test]
+    public function preprocessed_values_include_group_names()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        Site::setSites([
+            'default' => [
+                'name' => 'English',
+                'url' => '/',
+                'locale' => 'en_US',
+            ],
+            'arabic' => [
+                'name' => 'Arabic (Egypt)',
+                'url' => '/ar/',
+                'locale' => 'ar_EG',
+                'group' => 'Middle East',
+            ],
+        ]);
+
+        $values = Site::blueprint()
+            ->fields()
+            ->addValues(Site::blueprintValues())
+            ->preProcess()
+            ->values()
+            ->all();
+
+        $this->assertSame('Middle East', $values['group_middle-east_name']);
+        $this->assertSame('arabic', $values['group_middle-east_sites'][0]['handle']);
+        $this->assertSame('default', $values['group_other_sites'][0]['handle']);
+    }
+
+    #[Test]
+    public function it_saves_a_newly_added_group_through_cp_endpoint()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        $this
+            ->actingAs(tap(User::make()->email('chew@bacca.com')->makeSuper())->save())
+            ->patchJson(cp_route('sites.update'), [
+                'group_new-group_name' => 'Paris',
+                'group_new-group_sites' => [
+                    [
+                        'name' => 'French',
+                        'handle' => 'fr',
+                        'url' => '/fr/',
+                        'locale' => 'fr_FR',
+                    ],
+                ],
+                'group_other_sites' => [
+                    [
+                        'name' => 'English',
+                        'handle' => 'default',
+                        'url' => '/',
+                        'locale' => 'en_US',
+                    ],
+                ],
+            ])
+            ->assertSuccessful();
+
+        $saved = YAML::file($this->yamlPath)->parse();
+
+        $this->assertSame('Paris', $saved['fr']['group']);
+        $this->assertArrayNotHasKey('group', $saved['default']);
+    }
+
+    #[Test]
+    public function grouped_blueprint_sections_are_reorderable()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        Site::setSites([
+            'default' => [
+                'name' => 'English',
+                'url' => '/',
+                'locale' => 'en_US',
+            ],
+            'arabic' => [
+                'name' => 'Arabic (Egypt)',
+                'url' => '/ar/',
+                'locale' => 'ar_EG',
+                'group' => 'Middle East',
+            ],
+        ]);
+
+        $sections = Site::blueprint()->contents()['tabs']['main']['sections'];
+
+        $this->assertCount(2, $sections);
+        $this->assertTrue($sections[0]['reorderable']);
+        $this->assertArrayNotHasKey('reorderable', $sections[1]);
+        $this->assertSame('group_middle-east_name', $sections[0]['editable_title_handle']);
+        $this->assertArrayNotHasKey('editable_title_handle', $sections[1]);
+        $this->assertSame('Other', $sections[1]['display']);
+        $this->assertSame('group_middle-east_name', $sections[0]['fields'][0]['handle']);
+        $this->assertSame('hidden', $sections[0]['fields'][0]['field']['visibility']);
+        $this->assertSame('group_other_sites', $this->sitesField($sections[1])['handle']);
+        $this->assertTrue($this->sitesField($sections[0])['field']['headers_in_section']);
+        $this->assertTrue($this->sitesField($sections[1])['field']['headers_in_section']);
+        $this->assertSame(
+            'group_middle-east_name',
+            collect($this->sitesField($sections[0])['field']['fields'])->firstWhere('handle', 'handle')['field']['prefix_from']
+        );
+        $this->assertArrayNotHasKey(
+            'prefix_from',
+            collect($this->sitesField($sections[1])['field']['fields'])->firstWhere('handle', 'handle')['field']
+        );
+    }
+
+    #[Test]
+    public function the_other_group_is_always_last_even_when_empty()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        Site::setSites([
+            'en' => [
+                'name' => 'English',
+                'url' => '/',
+                'locale' => 'en_US',
+                'group' => 'London',
+            ],
+        ]);
+
+        $values = Site::blueprintValues();
+        $sections = Site::blueprint()->contents()['tabs']['main']['sections'];
+
+        $this->assertSame([
+            'group_london_name',
+            'group_london_sites',
+            'group_other_sites',
+        ], array_keys($values));
+        $this->assertSame([], $values['group_other_sites']);
+        $this->assertSame('group_london_name', $sections[0]['editable_title_handle']);
+        $this->assertSame('group_other_sites', $this->sitesField($sections[1])['handle']);
+        $this->assertArrayNotHasKey('reorderable', $sections[1]);
+        $this->assertArrayNotHasKey('editable_title_handle', $sections[1]);
+    }
+
+    #[Test]
+    public function it_includes_submitted_groups_in_the_blueprint()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        $sections = Site::blueprint([
+            'group_other_sites' => [
+                ['name' => 'English', 'handle' => 'default', 'url' => '/', 'locale' => 'en_US'],
+            ],
+            'group_paris_name' => 'Paris',
+            'group_paris_sites' => [
+                ['name' => 'French', 'handle' => 'paris', 'url' => '/paris/', 'locale' => 'fr_FR'],
+            ],
+        ])->contents()['tabs']['main']['sections'];
+
+        $this->assertSame([
+            'group_paris_name',
+            null,
+        ], collect($sections)->pluck('editable_title_handle')->all());
+        $this->assertSame('group_paris_sites', $this->sitesField($sections[0])['handle']);
+        $this->assertSame('group_other_sites', $this->sitesField($sections[1])['handle']);
+        $this->assertSame('Other', $sections[1]['display']);
+        $this->assertArrayNotHasKey('reorderable', $sections[1]);
+    }
+
+    #[Test]
+    public function it_builds_config_from_grouped_blueprint_values()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        $config = Site::configFromBlueprintValues([
+            'group_london_name' => 'London',
+            'group_london_sites' => [
+                ['name' => 'English', 'handle' => 'en', 'url' => '/', 'locale' => 'en_US'],
+                ['name' => 'French', 'handle' => 'fr', 'url' => '/fr/', 'locale' => 'fr_FR'],
+            ],
+            'group_paris_name' => 'Paris',
+            'group_paris_sites' => [
+                ['name' => 'French', 'handle' => 'paris', 'url' => '/paris/', 'locale' => 'fr_FR'],
+            ],
+        ]);
+
+        $this->assertSame('London', $config['en']['group']);
+        $this->assertSame('London', $config['fr']['group']);
+        $this->assertSame('Paris', $config['paris']['group']);
+        $this->assertArrayNotHasKey('group', $config['default'] ?? []);
+        $this->assertSame(['en', 'fr', 'paris'], array_keys($config));
+    }
+
+    #[Test]
+    public function it_preserves_group_order_from_blueprint_values()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        $config = Site::configFromBlueprintValues([
+            'group_paris_name' => 'Paris',
+            'group_paris_sites' => [
+                ['name' => 'French', 'handle' => 'paris', 'url' => '/paris/', 'locale' => 'fr_FR'],
+            ],
+            'group_london_name' => 'London',
+            'group_london_sites' => [
+                ['name' => 'English', 'handle' => 'en', 'url' => '/', 'locale' => 'en_US'],
+                ['name' => 'French', 'handle' => 'fr', 'url' => '/fr/', 'locale' => 'fr_FR'],
+            ],
+        ]);
+
+        $this->assertSame(['paris', 'en', 'fr'], array_keys($config));
+    }
+
     #[Test]
     public function it_validates_required_fields_for_site_through_cp_endpoint()
     {
@@ -400,6 +700,70 @@ public function it_validates_required_fields_for_site_through_cp_endpoint()
             ]]);
     }
 
+    #[Test]
+    public function it_validates_handles_are_unique_across_groups()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        $this
+            ->actingAs(tap(User::make()->email('chew@bacca.com')->makeSuper())->save())
+            ->patchJson(cp_route('sites.update'), [
+                'group_london_name' => 'London',
+                'group_london_sites' => [
+                    [
+                        'name' => 'English',
+                        'handle' => 'en',
+                        'url' => '/',
+                        'locale' => 'en_US',
+                    ],
+                ],
+                'group_paris_name' => 'Paris',
+                'group_paris_sites' => [
+                    [
+                        'name' => 'English',
+                        'handle' => 'en',
+                        'url' => '/paris/',
+                        'locale' => 'en_GB',
+                    ],
+                ],
+            ])
+            ->assertStatus(422)
+            ->assertJsonValidationErrors([
+                'group_london_sites.0.handle',
+                'group_paris_sites.0.handle',
+            ]);
+    }
+
+    #[Test]
+    public function it_validates_handles_are_unique_within_a_group()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        $this
+            ->actingAs(tap(User::make()->email('chew@bacca.com')->makeSuper())->save())
+            ->patchJson(cp_route('sites.update'), [
+                'group_other_sites' => [
+                    [
+                        'name' => 'English',
+                        'handle' => 'en',
+                        'url' => '/',
+                        'locale' => 'en_US',
+                    ],
+                    [
+                        'name' => 'English UK',
+                        'handle' => 'en',
+                        'url' => '/uk/',
+                        'locale' => 'en_GB',
+                    ],
+                ],
+            ])
+            ->assertStatus(422)
+            ->assertJsonValidationErrors([
+                'group_other_sites.0.handle',
+                'group_other_sites.1.handle',
+            ]);
+    }
+
     #[Test]
     public function it_validates_required_fields_for_multiple_sites_through_cp_endpoint()
     {
@@ -409,7 +773,7 @@ public function it_validates_required_fields_for_multiple_sites_through_cp_endpo
         $this
             ->actingAs(tap(User::make()->email('chew@bacca.com')->makeSuper())->save())
             ->patchJson(cp_route('sites.update'), [
-                'sites' => [
+                'group_other_sites' => [
                     [
                         'handle' => 'english', // this is a required field, so there should be only 3 failures here
                     ],
@@ -421,13 +785,13 @@ public function it_validates_required_fields_for_multiple_sites_through_cp_endpo
             ->assertStatus(422)
             ->assertJsonCount(7, 'errors')
             ->assertJson(['errors' => [
-                'sites.0.name' => ['This field is required.'],
-                'sites.0.url' => ['This field is required.'],
-                'sites.0.locale' => ['This field is required.'],
-                'sites.1.name' => ['This field is required.'],
-                'sites.1.handle' => ['This field is required.'],
-                'sites.1.url' => ['This field is required.'],
-                'sites.1.locale' => ['This field is required.'],
+                'group_other_sites.0.name' => ['This field is required.'],
+                'group_other_sites.0.url' => ['This field is required.'],
+                'group_other_sites.0.locale' => ['This field is required.'],
+                'group_other_sites.1.name' => ['This field is required.'],
+                'group_other_sites.1.handle' => ['This field is required.'],
+                'group_other_sites.1.url' => ['This field is required.'],
+                'group_other_sites.1.locale' => ['This field is required.'],
             ]]);
     }
 
@@ -435,8 +799,8 @@ public static function submitsNoSites()
     {
         return [
             'with no sites array' => [[]],
-            'sites array with no elements' => [['sites' => []]],
-            'sites null' => [['sites' => null]],
+            'sites array with no elements' => [['group_other_sites' => []]],
+            'sites null' => [['group_other_sites' => null]],
         ];
     }
 
@@ -451,10 +815,7 @@ public function it_validates_at_least_one_site_is_required_for_multiple_sites_th
             ->actingAs(tap(User::make()->email('chew@bacca.com')->makeSuper())->save())
             ->patchJson(cp_route('sites.update'), $data)
             ->assertStatus(422)
-            ->assertJsonCount(1, 'errors')
-            ->assertJson(['errors' => [
-                'sites' => ['This field is required.'],
-            ]]);
+            ->assertJsonValidationErrors(['group_other_sites']);
     }
 
     #[Test]
diff --git a/tests/Sites/SitesTest.php b/tests/Sites/SitesTest.php
index 45988d6d193..63cb2f84d4a 100644
--- a/tests/Sites/SitesTest.php
+++ b/tests/Sites/SitesTest.php
@@ -56,6 +56,24 @@ public function gets_all_sites()
         });
     }
 
+    #[Test]
+    public function filters_handles_by_group()
+    {
+        $this->sites->setSites([
+            'en' => ['url' => '/', 'group' => 'London'],
+            'fr' => ['url' => '/fr', 'group' => 'London'],
+            'de' => ['url' => '/de', 'group' => 'Paris'],
+            'nl' => ['url' => '/nl'],
+        ]);
+
+        $handles = collect(['en', 'fr', 'de', 'nl']);
+
+        $this->assertEquals(['en', 'fr'], $this->sites->filterByGroup($handles, 'en')->values()->all());
+        $this->assertEquals(['de'], $this->sites->filterByGroup($handles, 'de')->values()->all());
+        $this->assertEquals(['en', 'fr', 'de', 'nl'], $this->sites->filterByGroup($handles, 'nl')->values()->all());
+        $this->assertEquals(['en', 'fr', 'de', 'nl'], $this->sites->filterByGroup($handles, null)->values()->all());
+    }
+
     #[Test]
     public function gets_authorized_sites()
     {

From ab32844aef8c6ca7de699c6d61c6db3be8746d2a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 17:34:31 +0100
Subject: [PATCH 02/31] Opus review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Delete-group meta
Removing a group now copies each row’s grid meta into Other (same path as drag) and drops the old drop zone.

Slug-key collisions
Named groups store a stable group_handle in sites.yaml. Reload uses that id instead of re-slugging the title, so “New York” / “new york”, “Café” / “Cafe”, and a group titled “Other” stay separate from the pinned Other section. New groups also refuse the reserved other key.

Empty-sites errors
If every site is removed, the required error is attached to the group grids that were actually submitted, not always group_other_sites.
---
 .../js/components/ui/Publish/Sections.vue     |  33 ++++-
 .../Controllers/CP/Sites/SitesController.php  |  21 ++-
 src/Sites/Site.php                            |   7 +
 src/Sites/Sites.php                           | 131 +++++++++++++-----
 tests/Sites/SiteTest.php                      |   8 ++
 tests/Sites/SitesConfigTest.php               | 109 +++++++++++++++
 6 files changed, 267 insertions(+), 42 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 6867242ee73..4d5cdff0a4d 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -167,7 +167,12 @@ function insertNamedSection(section) {
 }
 
 function uniqueGroupKey(title) {
-    const base = Statamic.$slug.create(title) || 'group';
+    let base = Statamic.$slug.create(title) || 'group';
+
+    if (base === 'other') {
+        base = 'group';
+    }
+
     let key = base;
     let suffix = 2;
 
@@ -246,12 +251,13 @@ function saveGroupTitle() {
 }
 
 function removeGroup(section) {
-    const moving = values.value[sitesHandleFor(section)] || [];
+    const fromHandle = sitesHandleFor(section);
+    const moving = values.value[fromHandle] || [];
     const next = { ...values.value };
 
     next.group_other_sites = [...(next.group_other_sites || []), ...moving];
     delete next[section.editable_title_handle];
-    delete next[sitesHandleFor(section)];
+    delete next[fromHandle];
 
     const index = tab.sections.findIndex((item) => sectionKey(item) === sectionKey(section));
     if (index !== -1) {
@@ -259,6 +265,9 @@ function removeGroup(section) {
     }
 
     setValues(valuesWithOtherLast(next));
+
+    moving.forEach((row) => moveRowMeta(fromHandle, 'group_other_sites', row._id));
+    unregisterSectionRowZone(fromHandle);
 }
 
 function addGroup(title) {
@@ -430,8 +439,24 @@ function moveRowBetweenZones(event) {
     scheduleRowSortableRebuild();
 }
 
+function ensureGridMeta(handle, templateHandle) {
+    if (meta.value[handle] || !templateHandle) return;
+
+    const templateMeta = meta.value[templateHandle];
+
+    if (!templateMeta) return;
+
+    setFieldMeta(handle, {
+        defaults: deepClone(templateMeta.defaults),
+        new: deepClone(templateMeta.new),
+        existing: {},
+    });
+}
+
 function moveRowMeta(fromHandle, toHandle, rowId) {
-    if (!rowId) return;
+    if (!rowId || fromHandle === toHandle) return;
+
+    ensureGridMeta(toHandle, fromHandle);
 
     const fromMeta = meta.value[fromHandle];
     const toMeta = meta.value[toHandle];
diff --git a/src/Http/Controllers/CP/Sites/SitesController.php b/src/Http/Controllers/CP/Sites/SitesController.php
index 37ec682c7b4..50bd8e68afd 100644
--- a/src/Http/Controllers/CP/Sites/SitesController.php
+++ b/src/Http/Controllers/CP/Sites/SitesController.php
@@ -55,9 +55,9 @@ public function update(Request $request)
         $sites = Site::configFromBlueprintValues($values);
 
         if (Site::multiEnabled() && empty($sites)) {
-            throw ValidationException::withMessages([
-                'group_other_sites' => [__('This field is required.')],
-            ]);
+            throw ValidationException::withMessages(
+                $this->emptySitesError($request->all())
+            );
         }
 
         Site::setSites($sites)->save();
@@ -79,6 +79,21 @@ private function isGroupNameKey(string $key): bool
         return (bool) preg_match('/^group_.+_name$/', $key);
     }
 
+    private function emptySitesError(array $request): array
+    {
+        $keys = collect($request)
+            ->keys()
+            ->filter(fn ($key) => is_string($key) && preg_match('/^group_.+_sites$/', $key));
+
+        if ($keys->isEmpty()) {
+            $keys = collect(['group_other_sites']);
+        }
+
+        return $keys
+            ->mapWithKeys(fn ($key) => [$key => [__('This field is required.')]])
+            ->all();
+    }
+
     private function uniqueHandleRules(array $values): array
     {
         $handles = collect();
diff --git a/src/Sites/Site.php b/src/Sites/Site.php
index 54a6be7273b..2f1af8038cb 100644
--- a/src/Sites/Site.php
+++ b/src/Sites/Site.php
@@ -63,6 +63,13 @@ public function group(): ?string
         return is_string($group) && $group !== '' ? $group : null;
     }
 
+    public function groupHandle(): ?string
+    {
+        $handle = $this->config['group_handle'] ?? null;
+
+        return is_string($handle) && $handle !== '' ? $handle : null;
+    }
+
     public function url()
     {
         return URL::tidy($this->config['url'], true);
diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index 5d2c384df9b..81ac58c0f89 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -213,26 +213,19 @@ public function blueprintValues(): array
         }
 
         $values = [];
-        $otherSites = [];
 
-        foreach ($this->groupedSites() as $group => $sites) {
-            $key = $this->groupSectionKey($group);
-            $mapped = $sites->map(fn (Site $site) => array_merge(
-                ['handle' => $site->handle()],
-                collect($site->rawConfig())->except('group')->all()
-            ))->values()->all();
+        foreach ($this->namedGroupSections() as $section) {
+            $key = $section['key'];
+            $mapped = $section['sites']->map(fn (Site $site) => $this->siteToBlueprintRow($site))->values()->all();
 
-            if ($key === self::OTHER_GROUP_KEY) {
-                $otherSites = $mapped;
-
-                continue;
-            }
-
-            $values["group_{$key}_name"] = $group ?: null;
+            $values["group_{$key}_name"] = $section['name'];
             $values["group_{$key}_sites"] = $mapped;
         }
 
-        $values['group_'.self::OTHER_GROUP_KEY.'_sites'] = $otherSites;
+        $values['group_'.self::OTHER_GROUP_KEY.'_sites'] = $this->otherSites()
+            ->map(fn (Site $site) => $this->siteToBlueprintRow($site))
+            ->values()
+            ->all();
 
         return $values;
     }
@@ -252,12 +245,13 @@ public function configFromBlueprintValues(array $values): array
                 continue;
             }
 
-            $groupName = $matches[1] === self::OTHER_GROUP_KEY
+            $groupKey = $matches[1];
+            $groupName = $groupKey === self::OTHER_GROUP_KEY
                 ? null
-                : ($values["group_{$matches[1]}_name"] ?? null);
+                : ($values["group_{$groupKey}_name"] ?? null);
             $groupName = is_string($groupName) && $groupName !== '' ? $groupName : null;
 
-            $this->mergeSitesFromGrid($sites, $groupSites, $groupName);
+            $this->mergeSitesFromGrid($sites, $groupSites, $groupName, $groupKey);
         }
 
         return $sites
@@ -350,15 +344,9 @@ protected function multisiteBlueprintSections(array $siteRowFields, array $value
         $sections = [];
         $seen = [];
 
-        foreach ($this->groupedSites() as $group => $sites) {
-            $key = $this->groupSectionKey($group);
-
-            if ($key === self::OTHER_GROUP_KEY) {
-                continue;
-            }
-
-            $seen[$key] = true;
-            $sections[] = $this->groupSection($key, $group ?: null, $siteRowFields);
+        foreach ($this->namedGroupSections() as $section) {
+            $seen[$section['key']] = true;
+            $sections[] = $this->groupSection($section['key'], $section['name'], $siteRowFields);
         }
 
         foreach ($values as $handle => $groupSites) {
@@ -447,28 +435,101 @@ protected function sitesGridField(array $siteRowFields, string $groupKey): array
         ];
     }
 
-    protected function groupedSites(): Collection
+    protected function siteToBlueprintRow(Site $site): array
+    {
+        return array_merge(
+            ['handle' => $site->handle()],
+            collect($site->rawConfig())->except('group', 'group_handle')->all()
+        );
+    }
+
+    protected function otherSites(): Collection
     {
-        return $this->all()->groupBy(fn (Site $site) => $site->group() ?? '');
+        return $this->all()->filter(fn (Site $site) => ! $site->group())->values();
     }
 
-    protected function groupSectionKey(?string $group): string
+    protected function namedGroupSections(): Collection
     {
-        if ($group === null || $group === '') {
-            return self::OTHER_GROUP_KEY;
+        $buckets = [];
+
+        foreach ($this->all() as $site) {
+            $name = $site->group();
+
+            if (! $name) {
+                continue;
+            }
+
+            $storedHandle = $site->groupHandle();
+            $identity = ($storedHandle && $storedHandle !== self::OTHER_GROUP_KEY)
+                ? "handle:{$storedHandle}"
+                : "name:{$name}";
+
+            if (! isset($buckets[$identity])) {
+                $buckets[$identity] = [
+                    'name' => $name,
+                    'handle' => ($storedHandle && $storedHandle !== self::OTHER_GROUP_KEY) ? $storedHandle : null,
+                    'sites' => collect(),
+                ];
+            }
+
+            $buckets[$identity]['sites']->push($site);
         }
 
-        return Str::slug($group);
+        $seen = [];
+        $sections = collect();
+
+        foreach ($buckets as $bucket) {
+            $key = $this->uniqueGroupSectionKey($bucket['handle'], $bucket['name'], $seen);
+            $seen[$key] = true;
+            $sections->push([
+                'key' => $key,
+                'name' => $bucket['name'],
+                'sites' => $bucket['sites'],
+            ]);
+        }
+
+        return $sections;
     }
 
-    protected function mergeSitesFromGrid(Collection $sites, array $groupSites, ?string $groupName): void
+    protected function uniqueGroupSectionKey(?string $preferred, string $name, array $seen): string
+    {
+        if ($preferred && $preferred !== self::OTHER_GROUP_KEY && ! isset($seen[$preferred])) {
+            return $preferred;
+        }
+
+        $base = Str::slug($name) ?: 'group';
+
+        if ($base === self::OTHER_GROUP_KEY) {
+            $base = 'group';
+        }
+
+        $key = $base;
+        $suffix = 2;
+
+        while (isset($seen[$key])) {
+            $key = $base.'-'.$suffix++;
+        }
+
+        return $key;
+    }
+
+    protected function mergeSitesFromGrid(Collection $sites, array $groupSites, ?string $groupName, string $groupKey): void
     {
         foreach ($groupSites as $site) {
+            $handle = $site['handle'] ?? null;
+
+            if (! is_string($handle) || $handle === '') {
+                continue;
+            }
+
             if ($groupName) {
                 $site['group'] = $groupName;
+                $site['group_handle'] = $groupKey;
+            } else {
+                unset($site['group'], $site['group_handle']);
             }
 
-            $sites->put($site['handle'], $site);
+            $sites->put($handle, $site);
         }
     }
 
diff --git a/tests/Sites/SiteTest.php b/tests/Sites/SiteTest.php
index 32a1a792607..59003dcd013 100644
--- a/tests/Sites/SiteTest.php
+++ b/tests/Sites/SiteTest.php
@@ -92,6 +92,14 @@ public function gets_group()
         $this->assertEquals('London', (new Site('en', ['group' => 'London']))->group());
     }
 
+    #[Test]
+    public function gets_group_handle()
+    {
+        $this->assertNull((new Site('en', []))->groupHandle());
+        $this->assertNull((new Site('en', ['group_handle' => '']))->groupHandle());
+        $this->assertEquals('london', (new Site('en', ['group_handle' => 'london']))->groupHandle());
+    }
+
     #[Test]
     public function gets_is_default()
     {
diff --git a/tests/Sites/SitesConfigTest.php b/tests/Sites/SitesConfigTest.php
index 7dcfe0e0b66..9487b168018 100644
--- a/tests/Sites/SitesConfigTest.php
+++ b/tests/Sites/SitesConfigTest.php
@@ -387,6 +387,7 @@ public function it_saves_multiple_sites_through_cp_endpoint()
                 'url' => '/ar/',
                 'locale' => 'ar_EG',
                 'group' => 'Middle East',
+                'group_handle' => 'middle-east',
                 'attributes' => [
                     'theme' => 'standard',
                 ],
@@ -442,7 +443,9 @@ public function it_saves_groups_in_submitted_order()
 
         $this->assertSame(['paris', 'en'], array_keys($saved = YAML::file($this->yamlPath)->parse()));
         $this->assertSame('Paris', $saved['paris']['group']);
+        $this->assertSame('paris', $saved['paris']['group_handle']);
         $this->assertSame('London', $saved['en']['group']);
+        $this->assertSame('london', $saved['en']['group_handle']);
     }
 
     #[Test]
@@ -477,6 +480,7 @@ public function it_builds_grouped_blueprint_values()
         $this->assertCount(1, $values['group_middle-east_sites']);
         $this->assertSame('arabic', $values['group_middle-east_sites'][0]['handle']);
         $this->assertArrayNotHasKey('group', $values['group_middle-east_sites'][0]);
+        $this->assertArrayNotHasKey('group_handle', $values['group_middle-east_sites'][0]);
     }
 
     #[Test]
@@ -541,7 +545,9 @@ public function it_saves_a_newly_added_group_through_cp_endpoint()
         $saved = YAML::file($this->yamlPath)->parse();
 
         $this->assertSame('Paris', $saved['fr']['group']);
+        $this->assertSame('new-group', $saved['fr']['group_handle']);
         $this->assertArrayNotHasKey('group', $saved['default']);
+        $this->assertArrayNotHasKey('group_handle', $saved['default']);
     }
 
     #[Test]
@@ -658,8 +664,11 @@ public function it_builds_config_from_grouped_blueprint_values()
         ]);
 
         $this->assertSame('London', $config['en']['group']);
+        $this->assertSame('london', $config['en']['group_handle']);
         $this->assertSame('London', $config['fr']['group']);
+        $this->assertSame('london', $config['fr']['group_handle']);
         $this->assertSame('Paris', $config['paris']['group']);
+        $this->assertSame('paris', $config['paris']['group_handle']);
         $this->assertArrayNotHasKey('group', $config['default'] ?? []);
         $this->assertSame(['en', 'fr', 'paris'], array_keys($config));
     }
@@ -818,6 +827,106 @@ public function it_validates_at_least_one_site_is_required_for_multiple_sites_th
             ->assertJsonValidationErrors(['group_other_sites']);
     }
 
+    #[Test]
+    public function it_validates_empty_named_groups_when_no_sites_are_submitted()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        $this
+            ->actingAs(tap(User::make()->email('chew@bacca.com')->makeSuper())->save())
+            ->patchJson(cp_route('sites.update'), [
+                'group_london_name' => 'London',
+                'group_london_sites' => [],
+            ])
+            ->assertStatus(422)
+            ->assertJsonValidationErrors(['group_london_sites'])
+            ->assertJsonMissingValidationErrors(['group_other_sites']);
+    }
+
+    #[Test]
+    public function groups_with_the_same_slug_stay_separate()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        Site::setSites([
+            'en' => [
+                'name' => 'English',
+                'url' => '/',
+                'locale' => 'en_US',
+                'group' => 'New York',
+            ],
+            'fr' => [
+                'name' => 'French',
+                'url' => '/fr/',
+                'locale' => 'fr_FR',
+                'group' => 'new york',
+            ],
+        ]);
+
+        $values = Site::blueprintValues();
+
+        $this->assertSame('New York', $values['group_new-york_name']);
+        $this->assertSame('new york', $values['group_new-york-2_name']);
+        $this->assertSame(['en'], collect($values['group_new-york_sites'])->pluck('handle')->all());
+        $this->assertSame(['fr'], collect($values['group_new-york-2_sites'])->pluck('handle')->all());
+    }
+
+    #[Test]
+    public function a_group_named_other_does_not_merge_into_the_ungrouped_section()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        Site::setSites([
+            'en' => [
+                'name' => 'English',
+                'url' => '/',
+                'locale' => 'en_US',
+                'group' => 'Other',
+            ],
+            'fr' => [
+                'name' => 'French',
+                'url' => '/fr/',
+                'locale' => 'fr_FR',
+            ],
+        ]);
+
+        $values = Site::blueprintValues();
+
+        $this->assertSame('Other', $values['group_group_name']);
+        $this->assertSame(['en'], collect($values['group_group_sites'])->pluck('handle')->all());
+        $this->assertSame(['fr'], collect($values['group_other_sites'])->pluck('handle')->all());
+    }
+
+    #[Test]
+    public function stored_group_handles_keep_groups_stable_when_names_slug_the_same()
+    {
+        Config::set('statamic.system.multisite', true);
+
+        Site::setSites([
+            'en' => [
+                'name' => 'English',
+                'url' => '/',
+                'locale' => 'en_US',
+                'group' => 'Cafe',
+                'group_handle' => 'cafe',
+            ],
+            'fr' => [
+                'name' => 'French',
+                'url' => '/fr/',
+                'locale' => 'fr_FR',
+                'group' => 'Café',
+                'group_handle' => 'cafe-2',
+            ],
+        ]);
+
+        $values = Site::blueprintValues();
+
+        $this->assertSame('Cafe', $values['group_cafe_name']);
+        $this->assertSame('Café', $values['group_cafe-2_name']);
+        $this->assertSame(['en'], collect($values['group_cafe_sites'])->pluck('handle')->all());
+        $this->assertSame(['fr'], collect($values['group_cafe-2_sites'])->pluck('handle')->all());
+    }
+
     #[Test]
     public function it_dispatches_site_saved_events()
     {

From 2a3cf0aa65f2a43e915c48a4a232913aed68e499 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 17:52:39 +0100
Subject: [PATCH 03/31] When we initially "add groups" and no groups exist, we
 should go straight to the "add group" stack

---
 resources/js/components/ui/Publish/Sections.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 4d5cdff0a4d..57eb3741903 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -60,7 +60,14 @@ const showGroupActions = computed(() => showAddSection.value);
 const hasOnlyOtherGroup = computed(() => usesGroupEditor.value && listedSections.value.length === 0);
 
 watch(isEditingSections, (editing) => {
-    if (!editing) closeGroupEditor();
+    if (!editing) {
+        closeGroupEditor();
+        return;
+    }
+
+    if (hasOnlyOtherGroup.value && !readOnly.value) {
+        nextTick(() => openNewGroupEditor());
+    }
 });
 
 const titleSnapshots = ref({});

From a0f9301859f3f701f8980db9dc86853269ab48a9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 17:55:12 +0100
Subject: [PATCH 04/31] when you click Add site it should focus on the new row

---
 .../js/components/fieldtypes/grid/Grid.vue    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index c46e7a0c97c..33307c90abb 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -10,7 +10,7 @@
                 >
                 </publish-field-fullscreen-header>
 
-                <section :class="{ 'mt-14 p-4': fullScreenMode }">
+                <section ref="gridBody" :class="{ 'mt-14 p-4': fullScreenMode }">
 
                     <ui-error-message v-if="hasExcessRows" :text="__('Max Rows') + ': ' + maxRows" />
                     <ui-error-message v-else-if="hasNotEnoughRows" :text="__('Min Rows') + ': ' + minRows" />
@@ -207,6 +207,7 @@ export default {
 
             this.updateRowMeta(id, this.meta.new);
             this.update([...this.value, row]);
+            this.$nextTick(() => this.$nextTick(() => this.focusNewRow()));
         },
 
         updated(index, row) {
@@ -254,6 +255,23 @@ export default {
             // TODO
         },
 
+        focusNewRow() {
+            const root = this.$refs.gridBody;
+
+            if (!root) return;
+
+            const row =
+                root.querySelector('.grid-table tbody tr:last-child') ||
+                root.querySelector('.grid-stacked > :last-child');
+
+            const focusable = row?.querySelector(
+                'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])',
+            );
+
+            focusable?.focus();
+            row?.scrollIntoView({ block: 'nearest' });
+        },
+
         blurred() {
             setTimeout(() => {
                 if (!this.$el.contains(document.activeElement)) {

From 57adc4001373616c196ff13462da3e56ed81588b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 17:59:24 +0100
Subject: [PATCH 05/31] Also do that for the "other" group

---
 .../js/components/fieldtypes/grid/Grid.vue    | 26 +++++++++----------
 .../js/components/fieldtypes/grid/Row.vue     |  5 +++-
 .../components/fieldtypes/grid/StackedRow.vue |  1 +
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 33307c90abb..150ccb9eedb 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -10,7 +10,7 @@
                 >
                 </publish-field-fullscreen-header>
 
-                <section ref="gridBody" :class="{ 'mt-14 p-4': fullScreenMode }">
+                <section :class="{ 'mt-14 p-4': fullScreenMode }">
 
                     <ui-error-message v-if="hasExcessRows" :text="__('Max Rows') + ': ' + maxRows" />
                     <ui-error-message v-else-if="hasNotEnoughRows" :text="__('Min Rows') + ': ' + minRows" />
@@ -207,7 +207,7 @@ export default {
 
             this.updateRowMeta(id, this.meta.new);
             this.update([...this.value, row]);
-            this.$nextTick(() => this.$nextTick(() => this.focusNewRow()));
+            this.focusNewRow(id);
         },
 
         updated(index, row) {
@@ -255,21 +255,21 @@ export default {
             // TODO
         },
 
-        focusNewRow() {
-            const root = this.$refs.gridBody;
-
-            if (!root) return;
-
-            const row =
-                root.querySelector('.grid-table tbody tr:last-child') ||
-                root.querySelector('.grid-stacked > :last-child');
-
+        focusNewRow(id, attempts = 0) {
+            const row = document.querySelector(`[data-grid-row-id="${CSS.escape(id)}"]`);
             const focusable = row?.querySelector(
                 'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])',
             );
 
-            focusable?.focus();
-            row?.scrollIntoView({ block: 'nearest' });
+            if (focusable) {
+                focusable.focus();
+                row.scrollIntoView({ block: 'nearest' });
+                return;
+            }
+
+            if (attempts < 20) {
+                requestAnimationFrame(() => this.focusNewRow(id, attempts + 1));
+            }
         },
 
         blurred() {
diff --git a/resources/js/components/fieldtypes/grid/Row.vue b/resources/js/components/fieldtypes/grid/Row.vue
index b28b4f6f4c6..c19a5edf337 100644
--- a/resources/js/components/fieldtypes/grid/Row.vue
+++ b/resources/js/components/fieldtypes/grid/Row.vue
@@ -1,5 +1,8 @@
 <template>
-    <tr :class="[sortableItemClass, { 'opacity-50': isExcessive, 'inset-ring-1 inset-ring-red': hasError }]">
+    <tr
+        :data-grid-row-id="values._id"
+        :class="[sortableItemClass, { 'opacity-50': isExcessive, 'inset-ring-1 inset-ring-red': hasError }]"
+    >
         <td v-if="grid.isReorderable" class="drag-handle" :class="sortableHandleClass"></td>
 
         <FieldsProvider
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index d997efd1337..a23604b107e 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -2,6 +2,7 @@
     <div
         class="@container/panel bg-white dark:bg-gray-850 rounded-xl ring ring-gray-300 dark:ring-x-0 dark:ring-b-0 dark:ring-gray-700 shadow-ui-md"
         :class="[sortableItemClass, { 'opacity-50': isExcessive, 'ring-red-500': hasError }]"
+        :data-grid-row-id="values._id"
         :data-error="hasError ?? undefined"
     >
         <header class="bg-gray-50 dark:bg-gray-900 rounded-t-xl border-b border-gray-300 dark:border-gray-700 ps-4 pe-2 py-1.5 flex items-center justify-between">

From 9e4530da4bcfe410b92d9b404f7dd421fb3df2c7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 18:05:32 +0100
Subject: [PATCH 06/31] Closing the Add Group stack without saving now removes
 the leftover New Group.

Saving the title still keeps the group. Leaving edit mode (Discard/Cancel) does not try to delete it again, since that path already restores or remounts the form.
---
 .../js/components/ui/Publish/Sections.vue     | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 57eb3741903..830d88eef89 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -61,7 +61,7 @@ const hasOnlyOtherGroup = computed(() => usesGroupEditor.value && listedSections
 
 watch(isEditingSections, (editing) => {
     if (!editing) {
-        closeGroupEditor();
+        closeGroupEditor({ saved: true });
         return;
     }
 
@@ -76,6 +76,7 @@ const editingNewGroup = ref(false);
 const editingGroupHandle = ref(null);
 const editingGroupTitle = ref('');
 const groupTitleError = ref(null);
+const editingSection = ref(null);
 
 function renderInstructions(instructions) {
     return instructions ? markdown(__(instructions), { openLinksInNewTabs: true }) : '';
@@ -221,25 +222,32 @@ function openNewGroupEditor() {
 
     nextTick(() => {
         focusSection(section);
-        editGroup(section);
-        editingNewGroup.value = true;
+        editGroup(section, { isNew: true });
     });
 }
 
-function editGroup(section) {
+function editGroup(section, { isNew = false } = {}) {
     groupEditorOpen.value = true;
-    editingNewGroup.value = false;
+    editingNewGroup.value = isNew;
+    editingSection.value = section;
     editingGroupHandle.value = section.editable_title_handle;
     editingGroupTitle.value = values.value[section.editable_title_handle] || '';
     groupTitleError.value = null;
 }
 
-function closeGroupEditor() {
+function closeGroupEditor({ saved = false } = {}) {
+    const sectionToRemove = !saved && editingNewGroup.value ? editingSection.value : null;
+
     groupEditorOpen.value = false;
     editingNewGroup.value = false;
+    editingSection.value = null;
     editingGroupHandle.value = null;
     editingGroupTitle.value = '';
     groupTitleError.value = null;
+
+    if (sectionToRemove) {
+        removeGroup(sectionToRemove);
+    }
 }
 
 function saveGroupTitle() {
@@ -254,7 +262,7 @@ function saveGroupTitle() {
         setFieldValue(editingGroupHandle.value, title);
     }
 
-    closeGroupEditor();
+    closeGroupEditor({ saved: true });
 }
 
 function removeGroup(section) {

From 9a5391737c20d41134f4da4886e233c14b60ba4a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 10:11:37 +0100
Subject: [PATCH 07/31] Draft

---
 .../components/ui/Publish/Localizations.vue   | 132 +++++++++++++++++-
 .../CP/Collections/EntriesController.php      |  11 +-
 .../Collections/EntryRevisionsController.php  |   5 +-
 .../CP/Globals/GlobalVariablesController.php  |   6 +-
 .../CP/Taxonomies/TermsController.php         |  11 +-
 .../View/Composers/JavascriptComposer.php     |   2 +
 6 files changed, 156 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index 3b2d2f68957..32d6fe2a0d5 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -4,8 +4,21 @@ import {
     Combobox,
     Card,
     Panel,
+    Subheading,
+    Icon,
 } from '@ui';
-import { computed, useId } from 'vue';
+import {
+    ComboboxAnchor,
+    ComboboxContent,
+    ComboboxGroup,
+    ComboboxItem,
+    ComboboxLabel,
+    ComboboxPortal,
+    ComboboxRoot,
+    ComboboxTrigger,
+    ComboboxViewport,
+} from 'reka-ui';
+import { computed, ref, useId } from 'vue';
 import Localization from './Localization.vue';
 
 const props = defineProps({
@@ -23,21 +36,130 @@ const props = defineProps({
     },
 });
 
-defineEmits(['selected']);
+const emit = defineEmits(['selected']);
 
 const comboboxId = useId();
+const dropdownOpen = ref(false);
 
 const panelHeading = computed(() => props.heading || __('Working In'));
 
 const activeLocalization = computed(() => {
     return props.localizations.find((localization) => localization.active);
 });
+
+const localizationGroups = computed(() => {
+    const groups = [];
+    const indexByKey = new Map();
+
+    for (const localization of props.localizations) {
+        const key = localization.group_handle || localization.group || '__ungrouped__';
+        const label = localization.group || null;
+
+        if (!indexByKey.has(key)) {
+            indexByKey.set(key, groups.length);
+            groups.push({ key, label, localizations: [] });
+        }
+
+        groups[indexByKey.get(key)].localizations.push(localization);
+    }
+
+    return groups;
+});
+
+const hasNamedGroups = computed(() => localizationGroups.value.some((group) => group.label));
+
+const selectedLabel = computed(() => {
+    const active = activeLocalization.value;
+
+    if (!active) return '';
+
+    const name = __(active.name);
+
+    return active.group ? `${__(active.group)} / ${name}` : name;
+});
+
+function selectLocalization(localization) {
+    if (!localization) return;
+
+    dropdownOpen.value = false;
+    emit('selected', localization);
+}
 </script>
 
 <template>
     <Panel v-if="localizations.length > 1" :heading="panelHeading" icon="globe-arrow">
         <Card class="p-3! space-y-1">
-            <template v-if="localizations.length > 5">
+            <template v-if="hasNamedGroups">
+                <Label
+                    :for="comboboxId"
+                    :text="panelHeading"
+                    class="sr-only"
+                />
+
+                <ComboboxRoot
+                    class="w-full"
+                    :open="dropdownOpen"
+                    :model-value="activeLocalization?.handle"
+                    ignore-filter
+                    @update:open="dropdownOpen = $event"
+                    @update:model-value="(handle) => selectLocalization(localizations.find((l) => l.handle === handle))"
+                >
+                    <ComboboxAnchor class="block w-full">
+                        <ComboboxTrigger
+                            :id="comboboxId"
+                            class="flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-gray-300 bg-linear-to-b from-white to-gray-50 px-4 text-md text-gray-900 shadow-ui-sm focus-within:focus-outline dark:border-gray-700 dark:from-gray-850 dark:to-gray-900 dark:text-gray-300 dark:shadow-ui-md"
+                        >
+                            <span class="block truncate text-start">{{ selectedLabel }}</span>
+                            <Icon name="chevron-down" class="ms-1.5 size-4 text-gray-400 dark:text-white/40" aria-hidden="true" />
+                        </ComboboxTrigger>
+                    </ComboboxAnchor>
+
+                    <ComboboxPortal>
+                        <ComboboxContent
+                            position="popper"
+                            :side-offset="5"
+                            class="z-(--z-index-above) max-h-[var(--reka-combobox-content-available-height)] min-w-[var(--reka-combobox-trigger-width)] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-ui-sm dark:border-white/10 dark:bg-gray-800"
+                        >
+                            <ComboboxViewport class="max-h-[300px] space-y-1 overflow-y-auto py-2">
+                                <template
+                                    v-for="(group, groupIndex) in localizationGroups"
+                                    :key="group.key"
+                                >
+                                    <ComboboxGroup class="px-2">
+                                        <ComboboxLabel v-if="group.label" as-child>
+                                            <Subheading
+                                                size="sm"
+                                                class="px-2 py-1.5 font-semibold uppercase tracking-wide"
+                                                :text="__(group.label)"
+                                            />
+                                        </ComboboxLabel>
+
+                                        <ComboboxItem
+                                            v-for="option in group.localizations"
+                                            :key="option.handle"
+                                            :value="option.handle"
+                                            :text-value="option.name"
+                                            as="button"
+                                            class="w-full cursor-pointer rounded-lg px-2 py-2 text-sm outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-700"
+                                            :class="option.active ? 'bg-blue-100 dark:bg-gray-700' : ''"
+                                        >
+                                            <Localization :localization="option" :localizing />
+                                        </ComboboxItem>
+                                    </ComboboxGroup>
+
+                                    <div
+                                        v-if="groupIndex < localizationGroups.length - 1"
+                                        class="mx-2 my-1 border-t border-gray-200 dark:border-gray-700"
+                                        role="separator"
+                                    />
+                                </template>
+                            </ComboboxViewport>
+                        </ComboboxContent>
+                    </ComboboxPortal>
+                </ComboboxRoot>
+            </template>
+
+            <template v-else-if="localizations.length > 5">
                 <Label
                     :for="comboboxId"
                     :text="panelHeading"
@@ -51,7 +173,7 @@ const activeLocalization = computed(() => {
                     option-value="handle"
                     option-label="name"
                     :model-value="activeLocalization?.handle"
-                    @update:modelValue="$emit('selected', localizations.find(l => l.handle === $event))"
+                    @update:modelValue="(handle) => selectLocalization(localizations.find(l => l.handle === handle))"
                 >
                     <template #option="option">
                         <Localization :localization="option" :localizing />
@@ -70,7 +192,7 @@ const activeLocalization = computed(() => {
                     :key="option.handle"
                     class="w-full cursor-pointer px-4 py-2 text-sm rounded-lg"
                     :class="option.active ? 'dark:bg-gray-700 bg-blue-100' : 'dark:hover:bg-gray-800 hover:bg-gray-100'"
-                    @click="$emit('selected', option)"
+                    @click="selectLocalization(option)"
                 >
                     <Localization :localization="option" :localizing />
                 </button>
diff --git a/src/Http/Controllers/CP/Collections/EntriesController.php b/src/Http/Controllers/CP/Collections/EntriesController.php
index acd8b573d60..df0ee395eb9 100644
--- a/src/Http/Controllers/CP/Collections/EntriesController.php
+++ b/src/Http/Controllers/CP/Collections/EntriesController.php
@@ -147,10 +147,13 @@ public function edit(Request $request, $collection, $entry)
             'localizations' => $this->getAuthorizedSitesForCollection($collection)->map(function ($handle) use ($entry) {
                 $localized = $entry->in($handle);
                 $exists = $localized !== null;
+                $site = Site::get($handle);
 
                 return [
                     'handle' => $handle,
-                    'name' => Site::get($handle)->name(),
+                    'name' => $site->name(),
+                    'group' => $site->group(),
+                    'group_handle' => $site->groupHandle(),
                     'active' => $handle === $entry->locale(),
                     'exists' => $exists,
                     'root' => $exists ? $localized->isRoot() : false,
@@ -336,9 +339,13 @@ public function create(Request $request, $collection, $site)
             'published' => $collection->defaultPublishState(),
             'locale' => $site->handle(),
             'localizations' => $this->getAuthorizedSitesForCollection($collection)->map(function ($handle) use ($collection, $site, $blueprint) {
+                $localizationSite = Site::get($handle);
+
                 return [
                     'handle' => $handle,
-                    'name' => Site::get($handle)->name(),
+                    'name' => $localizationSite->name(),
+                    'group' => $localizationSite->group(),
+                    'group_handle' => $localizationSite->groupHandle(),
                     'active' => $handle === $site->handle(),
                     'exists' => false,
                     'published' => false,
diff --git a/src/Http/Controllers/CP/Collections/EntryRevisionsController.php b/src/Http/Controllers/CP/Collections/EntryRevisionsController.php
index f0e7e359b14..0d534debf5a 100644
--- a/src/Http/Controllers/CP/Collections/EntryRevisionsController.php
+++ b/src/Http/Controllers/CP/Collections/EntryRevisionsController.php
@@ -86,10 +86,13 @@ public function show(Request $request, $collection, $entry, $revision)
             'localizations' => $this->getAuthorizedSitesForCollection($entry->collection())->map(function ($handle) use ($entry) {
                 $localized = $entry->in($handle);
                 $exists = $localized !== null;
+                $site = Site::get($handle);
 
                 return [
                     'handle' => $handle,
-                    'name' => Site::get($handle)->name(),
+                    'name' => $site->name(),
+                    'group' => $site->group(),
+                    'group_handle' => $site->groupHandle(),
                     'active' => $handle === $entry->locale(),
                     'exists' => $exists,
                     'root' => $exists ? $localized->isRoot() : false,
diff --git a/src/Http/Controllers/CP/Globals/GlobalVariablesController.php b/src/Http/Controllers/CP/Globals/GlobalVariablesController.php
index d8e208ab9ff..5aa4cf5b961 100644
--- a/src/Http/Controllers/CP/Globals/GlobalVariablesController.php
+++ b/src/Http/Controllers/CP/Globals/GlobalVariablesController.php
@@ -55,9 +55,13 @@ public function edit(Request $request, $id)
             'originValues' => $originValues ?? null,
             'originMeta' => $originMeta ?? null,
             'localizations' => $this->getAuthorizedLocalizationsForVariables($variables)->map(function ($localized) use ($variables) {
+                $site = $localized->site();
+
                 return [
                     'handle' => $localized->locale(),
-                    'name' => $localized->site()->name(),
+                    'name' => $site->name(),
+                    'group' => $site->group(),
+                    'group_handle' => $site->groupHandle(),
                     'active' => $localized->locale() === $variables->locale(),
                     'origin' => ! $localized->hasOrigin(),
                     'url' => $localized->editUrl(),
diff --git a/src/Http/Controllers/CP/Taxonomies/TermsController.php b/src/Http/Controllers/CP/Taxonomies/TermsController.php
index 4479ef43b04..0b10e6f0a84 100644
--- a/src/Http/Controllers/CP/Taxonomies/TermsController.php
+++ b/src/Http/Controllers/CP/Taxonomies/TermsController.php
@@ -122,10 +122,13 @@ public function edit(Request $request, $taxonomy, $term)
             'permalink' => $term->absoluteUrl(),
             'localizations' => $this->getAuthorizedSitesForTaxonomy($taxonomy)->map(function ($handle) use ($term) {
                 $localized = $term->in($handle);
+                $site = Site::get($handle);
 
                 return [
                     'handle' => $handle,
-                    'name' => Site::get($handle)->name(),
+                    'name' => $site->name(),
+                    'group' => $site->group(),
+                    'group_handle' => $site->groupHandle(),
                     'active' => $handle === $term->locale(),
                     'exists' => true,
                     'root' => $localized->isRoot(),
@@ -241,9 +244,13 @@ public function create(Request $request, $taxonomy, $site)
             'published' => $taxonomy->defaultPublishState(),
             'locale' => $site->handle(),
             'localizations' => $this->getAuthorizedSitesForTaxonomy($taxonomy)->map(function ($handle) use ($taxonomy, $site) {
+                $localizationSite = Site::get($handle);
+
                 return [
                     'handle' => $handle,
-                    'name' => Site::get($handle)->name(),
+                    'name' => $localizationSite->name(),
+                    'group' => $localizationSite->group(),
+                    'group_handle' => $localizationSite->groupHandle(),
                     'active' => $handle === $site->handle(),
                     'exists' => false,
                     'published' => false,
diff --git a/src/Http/View/Composers/JavascriptComposer.php b/src/Http/View/Composers/JavascriptComposer.php
index 57758b35269..cf24fea6707 100644
--- a/src/Http/View/Composers/JavascriptComposer.php
+++ b/src/Http/View/Composers/JavascriptComposer.php
@@ -98,6 +98,8 @@ protected function sites()
                 'handle' => $site->handle(),
                 'lang' => $site->lang(),
                 'direction' => $site->direction(),
+                'group' => $site->group(),
+                'group_handle' => $site->groupHandle(),
             ];
         })->values();
     }

From 26b85d941af4c2cdb1033408a38bc05951af9c0d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 10:17:54 +0100
Subject: [PATCH 08/31] Improve editing positions

---
 .../js/components/ui/Publish/Sections.vue     | 44 +++++++++----------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 830d88eef89..920ee33e7fd 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -550,8 +550,6 @@ onBeforeUnmount(() => {
                             />
                             <Heading :text="sectionTitle(section)" />
                             <Subheading v-if="section.instructions" :text="renderInstructions(section.instructions)" />
-                        </div>
-                        <div class="flex shrink-0 items-center">
                             <div v-if="showGroupActions && section.reorderable" class="flex shrink-0 items-center">
                                 <Button
                                     icon="pencil-line"
@@ -568,16 +566,16 @@ onBeforeUnmount(() => {
                                     @click.prevent="removeGroup(section)"
                                 />
                             </div>
-                            <div v-if="section.collapsible" class="flex shrink-0 items-center">
-                                <Button
-                                    @click="toggleSection(section)"
-                                    class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
-                                    :icon="section.collapsed ? 'expand' : 'collapse'"
-                                    size="sm"
-                                    variant="ghost"
-                                    :aria-label="__('Toggle section visibility')"
-                                />
-                            </div>
+                        </div>
+                        <div v-if="section.collapsible" class="flex shrink-0 items-center">
+                            <Button
+                                @click="toggleSection(section)"
+                                class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
+                                :icon="section.collapsed ? 'expand' : 'collapse'"
+                                size="sm"
+                                variant="ghost"
+                                :aria-label="__('Toggle section visibility')"
+                            />
                         </div>
                     </div>
 
@@ -615,8 +613,6 @@ onBeforeUnmount(() => {
                                         />
                                     </Heading>
                                     <Subheading v-if="section.instructions" :text="renderInstructions(section.instructions)" />
-                                </div>
-                                <div class="flex shrink-0 items-center">
                                     <div v-if="showGroupActions && section.reorderable" class="flex shrink-0 items-center">
                                         <Button
                                             icon="pencil-line"
@@ -633,16 +629,16 @@ onBeforeUnmount(() => {
                                             @click.prevent="removeGroup(section)"
                                         />
                                     </div>
-                                    <div v-if="section.collapsible" class="flex shrink-0 items-center">
-                                        <Button
-                                            @click="toggleSection(section)"
-                                            class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
-                                            :icon="section.collapsed ? 'expand' : 'collapse'"
-                                            size="sm"
-                                            variant="ghost"
-                                            :aria-label="__('Toggle section visibility')"
-                                        />
-                                    </div>
+                                </div>
+                                <div v-if="section.collapsible" class="flex shrink-0 items-center">
+                                    <Button
+                                        @click="toggleSection(section)"
+                                        class="static! [&_svg]:size-3.5 rounded-xl after:content-[''] after:absolute after:inset-0"
+                                        :icon="section.collapsed ? 'expand' : 'collapse'"
+                                        size="sm"
+                                        variant="ghost"
+                                        :aria-label="__('Toggle section visibility')"
+                                    />
                                 </div>
                             </div>
                         </PanelHeader>

From a90e3ba23e3d49feafbdfee4aa6aa6c1aacbdee2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 10:34:32 +0100
Subject: [PATCH 09/31] Put other at the bottom

---
 .../js/components/ui/Publish/Localizations.vue   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index 32d6fe2a0d5..85215a1bfed 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -47,13 +47,18 @@ const activeLocalization = computed(() => {
     return props.localizations.find((localization) => localization.active);
 });
 
+const UNGROUPED_KEY = 'other';
+
 const localizationGroups = computed(() => {
     const groups = [];
     const indexByKey = new Map();
 
     for (const localization of props.localizations) {
-        const key = localization.group_handle || localization.group || '__ungrouped__';
-        const label = localization.group || null;
+        const isUngrouped = !localization.group && !localization.group_handle;
+        const key = isUngrouped
+            ? UNGROUPED_KEY
+            : (localization.group_handle || localization.group);
+        const label = isUngrouped ? __('Other') : localization.group;
 
         if (!indexByKey.has(key)) {
             indexByKey.set(key, groups.length);
@@ -63,10 +68,13 @@ const localizationGroups = computed(() => {
         groups[indexByKey.get(key)].localizations.push(localization);
     }
 
-    return groups;
+    const named = groups.filter((group) => group.key !== UNGROUPED_KEY);
+    const other = groups.filter((group) => group.key === UNGROUPED_KEY);
+
+    return [...named, ...other];
 });
 
-const hasNamedGroups = computed(() => localizationGroups.value.some((group) => group.label));
+const hasNamedGroups = computed(() => localizationGroups.value.some((group) => group.key !== UNGROUPED_KEY));
 
 const selectedLabel = computed(() => {
     const active = activeLocalization.value;

From 19f1bd69ba2d9ae260b3a66d71143b2dcff2c641 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 10:36:26 +0100
Subject: [PATCH 10/31] Fix entry grouping dropdown width

---
 resources/js/components/ui/Publish/Localizations.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index 85215a1bfed..96b57901c01 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -126,7 +126,7 @@ function selectLocalization(localization) {
                         <ComboboxContent
                             position="popper"
                             :side-offset="5"
-                            class="z-(--z-index-above) max-h-[var(--reka-combobox-content-available-height)] min-w-[var(--reka-combobox-trigger-width)] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-ui-sm dark:border-white/10 dark:bg-gray-800"
+                            class="z-(--z-index-above) w-[var(--reka-combobox-trigger-width)] max-h-[var(--reka-combobox-content-available-height)] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-ui-sm dark:border-white/10 dark:bg-gray-800"
                         >
                             <ComboboxViewport class="max-h-[300px] space-y-1 overflow-y-auto py-2">
                                 <template

From 2643032a4bac0edb570e540395b24dc5ccff6448 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 10:38:16 +0100
Subject: [PATCH 11/31] Replace / with >

---
 .../js/components/ui/Publish/Localizations.vue   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index 96b57901c01..d8fb07950bc 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -81,9 +81,13 @@ const selectedLabel = computed(() => {
 
     if (!active) return '';
 
-    const name = __(active.name);
+    return __(active.name);
+});
+
+const selectedGroup = computed(() => {
+    const active = activeLocalization.value;
 
-    return active.group ? `${__(active.group)} / ${name}` : name;
+    return active?.group ? __(active.group) : null;
 });
 
 function selectLocalization(localization) {
@@ -117,7 +121,13 @@ function selectLocalization(localization) {
                             :id="comboboxId"
                             class="flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-gray-300 bg-linear-to-b from-white to-gray-50 px-4 text-md text-gray-900 shadow-ui-sm focus-within:focus-outline dark:border-gray-700 dark:from-gray-850 dark:to-gray-900 dark:text-gray-300 dark:shadow-ui-md"
                         >
-                            <span class="block truncate text-start">{{ selectedLabel }}</span>
+                            <span class="flex min-w-0 items-center gap-1.5 text-start">
+                                <template v-if="selectedGroup">
+                                    <span class="truncate">{{ selectedGroup }}</span>
+                                    <Icon name="chevron-right" class="size-3.5 shrink-0 text-gray-400 dark:text-white/40" aria-hidden="true" />
+                                </template>
+                                <span class="truncate">{{ selectedLabel }}</span>
+                            </span>
                             <Icon name="chevron-down" class="ms-1.5 size-4 text-gray-400 dark:text-white/40" aria-hidden="true" />
                         </ComboboxTrigger>
                     </ComboboxAnchor>

From da214cb47404bfde40f13bbf45fec32381acca8d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 10:55:59 +0100
Subject: [PATCH 12/31] Fix grouped Working In Combobox layout and search

Reuse the shared Combobox for type-to-filter, and disable virtualization
when options have variable-height group headers.
---
 .../js/components/ui/Combobox/Combobox.vue    |  29 ++-
 .../components/ui/Publish/Localizations.vue   | 165 +++++++-----------
 2 files changed, 91 insertions(+), 103 deletions(-)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 9aaf4d37171..5917e19b1f0 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -71,6 +71,8 @@ const props = defineProps({
 	taggable: { type: Boolean, default: false },
 	/** Controls the appearance of the combobox. <br><br> Options: `default`, `filled`, `ghost`, `subtle` */
 	variant: { type: String, default: 'default' },
+	/** When `false`, options are rendered without virtualization. Useful for variable-height options. */
+	virtualize: { type: Boolean, default: true },
 });
 
 defineOptions({
@@ -484,7 +486,7 @@ defineExpose({
                                 </ComboboxEmpty>
 
                                 <ComboboxVirtualizer
-                                    v-if="filteredOptions.length"
+                                    v-if="virtualize && filteredOptions.length"
                                     :estimate-size="40"
                                     :options="filteredOptions"
                                     :text-content="(opt) => getOptionLabel(opt)"
@@ -510,6 +512,31 @@ defineExpose({
                                         </ComboboxItem>
                                     </div>
                                 </ComboboxVirtualizer>
+
+                                <template v-else-if="filteredOptions.length">
+                                    <div
+                                        v-for="option in filteredOptions"
+                                        :key="`${getOptionValue(option)}-${isDisabled(option)}`"
+                                        class="py-1 px-2 w-full overflow-x-hidden"
+                                    >
+                                        <ComboboxItem
+                                            as="button"
+                                            :value="getOptionValue(option)"
+                                            :text-value="getOptionLabel(option)"
+                                            :disabled="isDisabled(option)"
+                                            :class="itemClasses({ size: size, selected: isSelected(option) })"
+                                            :data-ui-combobox-item="getOptionValue(option)"
+                                            :title="getOptionLabel(option)"
+                                            @select="select"
+                                        >
+                                            <slot name="option" v-bind="option">
+                                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" :alt="getOptionLabel(option)">
+                                                <span v-if="labelHtml" class="truncate" v-html="getOptionLabel(option)" />
+                                                <span class="truncate" v-else>{{ __(getOptionLabel(option)) }}</span>
+                                            </slot>
+                                        </ComboboxItem>
+                                    </div>
+                                </template>
                             </div>
                         </FocusScope>
                     </ComboboxContent>
diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index d8fb07950bc..bae4129c17a 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -7,18 +7,8 @@ import {
     Subheading,
     Icon,
 } from '@ui';
-import {
-    ComboboxAnchor,
-    ComboboxContent,
-    ComboboxGroup,
-    ComboboxItem,
-    ComboboxLabel,
-    ComboboxPortal,
-    ComboboxRoot,
-    ComboboxTrigger,
-    ComboboxViewport,
-} from 'reka-ui';
 import { computed, ref, useId } from 'vue';
+import fuzzysort from 'fuzzysort';
 import Localization from './Localization.vue';
 
 const props = defineProps({
@@ -38,8 +28,10 @@ const props = defineProps({
 
 const emit = defineEmits(['selected']);
 
+const UNGROUPED_KEY = 'other';
+
 const comboboxId = useId();
-const dropdownOpen = ref(false);
+const searchQuery = ref('');
 
 const panelHeading = computed(() => props.heading || __('Working In'));
 
@@ -47,8 +39,6 @@ const activeLocalization = computed(() => {
     return props.localizations.find((localization) => localization.active);
 });
 
-const UNGROUPED_KEY = 'other';
-
 const localizationGroups = computed(() => {
     const groups = [];
     const indexByKey = new Map();
@@ -76,108 +66,53 @@ const localizationGroups = computed(() => {
 
 const hasNamedGroups = computed(() => localizationGroups.value.some((group) => group.key !== UNGROUPED_KEY));
 
-const selectedLabel = computed(() => {
-    const active = activeLocalization.value;
+const useCombobox = computed(() => hasNamedGroups.value || props.localizations.length > 5);
 
-    if (!active) return '';
+const comboboxOptions = computed(() => {
+    const query = searchQuery.value;
+    let isFirstVisibleOption = true;
 
-    return __(active.name);
-});
+    return localizationGroups.value.flatMap((group) => {
+        const localizations = query
+            ? fuzzysort
+                .go(query, group.localizations, { keys: ['name', 'group', 'handle'] })
+                .map((result) => result.obj)
+            : group.localizations;
 
-const selectedGroup = computed(() => {
-    const active = activeLocalization.value;
+        if (!localizations.length) {
+            return [];
+        }
 
-    return active?.group ? __(active.group) : null;
+        return localizations.map((localization, index) => {
+            const option = {
+                ...localization,
+                _groupLabel: index === 0 ? group.label : null,
+                _showGroupSeparator: index === 0 && !isFirstVisibleOption,
+            };
+
+            isFirstVisibleOption = false;
+
+            return option;
+        });
+    });
 });
 
 function selectLocalization(localization) {
     if (!localization) return;
 
-    dropdownOpen.value = false;
+    searchQuery.value = '';
     emit('selected', localization);
 }
+
+function handleSearch(query) {
+    searchQuery.value = query;
+}
 </script>
 
 <template>
     <Panel v-if="localizations.length > 1" :heading="panelHeading" icon="globe-arrow">
         <Card class="p-3! space-y-1">
-            <template v-if="hasNamedGroups">
-                <Label
-                    :for="comboboxId"
-                    :text="panelHeading"
-                    class="sr-only"
-                />
-
-                <ComboboxRoot
-                    class="w-full"
-                    :open="dropdownOpen"
-                    :model-value="activeLocalization?.handle"
-                    ignore-filter
-                    @update:open="dropdownOpen = $event"
-                    @update:model-value="(handle) => selectLocalization(localizations.find((l) => l.handle === handle))"
-                >
-                    <ComboboxAnchor class="block w-full">
-                        <ComboboxTrigger
-                            :id="comboboxId"
-                            class="flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-gray-300 bg-linear-to-b from-white to-gray-50 px-4 text-md text-gray-900 shadow-ui-sm focus-within:focus-outline dark:border-gray-700 dark:from-gray-850 dark:to-gray-900 dark:text-gray-300 dark:shadow-ui-md"
-                        >
-                            <span class="flex min-w-0 items-center gap-1.5 text-start">
-                                <template v-if="selectedGroup">
-                                    <span class="truncate">{{ selectedGroup }}</span>
-                                    <Icon name="chevron-right" class="size-3.5 shrink-0 text-gray-400 dark:text-white/40" aria-hidden="true" />
-                                </template>
-                                <span class="truncate">{{ selectedLabel }}</span>
-                            </span>
-                            <Icon name="chevron-down" class="ms-1.5 size-4 text-gray-400 dark:text-white/40" aria-hidden="true" />
-                        </ComboboxTrigger>
-                    </ComboboxAnchor>
-
-                    <ComboboxPortal>
-                        <ComboboxContent
-                            position="popper"
-                            :side-offset="5"
-                            class="z-(--z-index-above) w-[var(--reka-combobox-trigger-width)] max-h-[var(--reka-combobox-content-available-height)] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-ui-sm dark:border-white/10 dark:bg-gray-800"
-                        >
-                            <ComboboxViewport class="max-h-[300px] space-y-1 overflow-y-auto py-2">
-                                <template
-                                    v-for="(group, groupIndex) in localizationGroups"
-                                    :key="group.key"
-                                >
-                                    <ComboboxGroup class="px-2">
-                                        <ComboboxLabel v-if="group.label" as-child>
-                                            <Subheading
-                                                size="sm"
-                                                class="px-2 py-1.5 font-semibold uppercase tracking-wide"
-                                                :text="__(group.label)"
-                                            />
-                                        </ComboboxLabel>
-
-                                        <ComboboxItem
-                                            v-for="option in group.localizations"
-                                            :key="option.handle"
-                                            :value="option.handle"
-                                            :text-value="option.name"
-                                            as="button"
-                                            class="w-full cursor-pointer rounded-lg px-2 py-2 text-sm outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-700"
-                                            :class="option.active ? 'bg-blue-100 dark:bg-gray-700' : ''"
-                                        >
-                                            <Localization :localization="option" :localizing />
-                                        </ComboboxItem>
-                                    </ComboboxGroup>
-
-                                    <div
-                                        v-if="groupIndex < localizationGroups.length - 1"
-                                        class="mx-2 my-1 border-t border-gray-200 dark:border-gray-700"
-                                        role="separator"
-                                    />
-                                </template>
-                            </ComboboxViewport>
-                        </ComboboxContent>
-                    </ComboboxPortal>
-                </ComboboxRoot>
-            </template>
-
-            <template v-else-if="localizations.length > 5">
+            <template v-if="useCombobox">
                 <Label
                     :for="comboboxId"
                     :text="panelHeading"
@@ -187,14 +122,40 @@ function selectLocalization(localization) {
                 <Combobox
                     :id="comboboxId"
                     class="flex-1"
-                    :options="localizations"
+                    :options="comboboxOptions"
                     option-value="handle"
                     option-label="name"
                     :model-value="activeLocalization?.handle"
+                    :virtualize="!hasNamedGroups"
+                    ignore-filter
+                    @search="handleSearch"
                     @update:modelValue="(handle) => selectLocalization(localizations.find(l => l.handle === handle))"
                 >
+                    <template #selected-option="{ option }">
+                        <span class="flex min-w-0 items-center gap-1.5">
+                            <template v-if="option.group">
+                                <span class="truncate">{{ __(option.group) }}</span>
+                                <Icon name="chevron-right" class="size-3.5 shrink-0 text-gray-400 dark:text-white/40" aria-hidden="true" />
+                            </template>
+                            <span class="truncate">{{ __(option.name) }}</span>
+                        </span>
+                    </template>
+
                     <template #option="option">
-                        <Localization :localization="option" :localizing />
+                        <div class="flex w-full min-w-0 flex-col">
+                            <div
+                                v-if="option._showGroupSeparator"
+                                class="mb-1 border-t border-gray-200 dark:border-gray-700"
+                                role="separator"
+                            />
+                            <Subheading
+                                v-if="option._groupLabel"
+                                size="sm"
+                                class="-mx-0.5 px-0.5 pb-1.5 pt-0.5 font-semibold uppercase tracking-wide"
+                                :text="__(option._groupLabel)"
+                            />
+                            <Localization :localization="option" :localizing />
+                        </div>
                     </template>
                 </Combobox>
             </template>

From c0c391e36025b916a3c85f95f68a2a3de2462c95 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 11:28:51 +0100
Subject: [PATCH 13/31] Fiddle with aesthetics

---
 .../js/components/ui/Publish/Localization.vue      | 14 ++++++--------
 .../js/components/ui/Publish/Localizations.vue     |  6 +++---
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/ui/Publish/Localization.vue b/resources/js/components/ui/Publish/Localization.vue
index 03a08015742..874ac7b683e 100644
--- a/resources/js/components/ui/Publish/Localization.vue
+++ b/resources/js/components/ui/Publish/Localization.vue
@@ -14,8 +14,8 @@ defineProps({
 </script>
 
 <template>
-    <div class="flex items-center justify-between gap-x-2">
-        <div class="flex flex-1 items-center" :class="{ 'line-through opacity-50': !localization.exists }">
+    <div class="flex items-center gap-x-2">
+        <div class="flex min-w-0 items-center" :class="{ 'line-through opacity-50': !localization.exists }">
             <span
                 class="little-dot me-2"
                 :class="{
@@ -24,13 +24,11 @@ defineProps({
                      'bg-red-500': !localization.exists,
                 }"
             />
-            {{ __(localization.name) }}
+            <span class="truncate">{{ __(localization.name) }}</span>
             <Icon name="loading" class="ms-2" v-if="localizing === localization.handle" />
         </div>
-        <div class="flex items-center gap-1.5">
-            <Badge size="sm" color="orange" v-if="localization.origin" :text="__('Origin')" />
-            <Badge size="sm" color="blue" v-if="localization.active" :text="__('Active')" />
-            <Badge size="sm" color="purple" v-if="localization.root && !localization.origin && !localization.active" :text="__('Root')" />
-        </div>
+        <Badge size="sm" color="orange" v-if="localization.origin" :text="__('Origin')" />
+        <Badge size="sm" color="blue" v-if="localization.active" :text="__('Active')" />
+        <Badge size="sm" color="purple" v-if="localization.root && !localization.origin && !localization.active" :text="__('Root')" />
     </div>
 </template>
diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index bae4129c17a..af7cb83c0a8 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -135,7 +135,7 @@ function handleSearch(query) {
                         <span class="flex min-w-0 items-center gap-1.5">
                             <template v-if="option.group">
                                 <span class="truncate">{{ __(option.group) }}</span>
-                                <Icon name="chevron-right" class="size-3.5 shrink-0 text-gray-400 dark:text-white/40" aria-hidden="true" />
+                                <Icon name="chevron-right" class="size-3.5! text-gray-400 dark:text-white/40" aria-hidden="true" />
                             </template>
                             <span class="truncate">{{ __(option.name) }}</span>
                         </span>
@@ -145,13 +145,13 @@ function handleSearch(query) {
                         <div class="flex w-full min-w-0 flex-col">
                             <div
                                 v-if="option._showGroupSeparator"
-                                class="mb-1 border-t border-gray-200 dark:border-gray-700"
+                                class="mb-3 -mt-1.5 -mx-2 border-t border-gray-200 dark:border-gray-700"
                                 role="separator"
                             />
                             <Subheading
                                 v-if="option._groupLabel"
                                 size="sm"
-                                class="-mx-0.5 px-0.5 pb-1.5 pt-0.5 font-semibold uppercase tracking-wide"
+                                class="-mx-2 px-0.5 pb-3 pt-0.5 font-semibold uppercase text-gray-950 text-2xs"
                                 :text="__(option._groupLabel)"
                             />
                             <Localization :localization="option" :localizing />

From 324f86b711437f022e2d3f358aa420134a60f8b6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 11:32:55 +0100
Subject: [PATCH 14/31] Fix subheading also being highlighted with the active
 item

---
 .../js/components/ui/Combobox/Combobox.vue    | 37 ++++++++++---------
 .../components/ui/Publish/Localizations.vue   | 29 ++++++++-------
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 5917e19b1f0..5b5b2c595e5 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -517,24 +517,27 @@ defineExpose({
                                     <div
                                         v-for="option in filteredOptions"
                                         :key="`${getOptionValue(option)}-${isDisabled(option)}`"
-                                        class="py-1 px-2 w-full overflow-x-hidden"
+                                        class="w-full overflow-x-hidden"
                                     >
-                                        <ComboboxItem
-                                            as="button"
-                                            :value="getOptionValue(option)"
-                                            :text-value="getOptionLabel(option)"
-                                            :disabled="isDisabled(option)"
-                                            :class="itemClasses({ size: size, selected: isSelected(option) })"
-                                            :data-ui-combobox-item="getOptionValue(option)"
-                                            :title="getOptionLabel(option)"
-                                            @select="select"
-                                        >
-                                            <slot name="option" v-bind="option">
-                                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" :alt="getOptionLabel(option)">
-                                                <span v-if="labelHtml" class="truncate" v-html="getOptionLabel(option)" />
-                                                <span class="truncate" v-else>{{ __(getOptionLabel(option)) }}</span>
-                                            </slot>
-                                        </ComboboxItem>
+                                        <slot name="before-option" v-bind="option" />
+                                        <div class="py-1 px-2">
+                                            <ComboboxItem
+                                                as="button"
+                                                :value="getOptionValue(option)"
+                                                :text-value="getOptionLabel(option)"
+                                                :disabled="isDisabled(option)"
+                                                :class="itemClasses({ size: size, selected: isSelected(option) })"
+                                                :data-ui-combobox-item="getOptionValue(option)"
+                                                :title="getOptionLabel(option)"
+                                                @select="select"
+                                            >
+                                                <slot name="option" v-bind="option">
+                                                    <img v-if="option.image" :src="option.image" class="size-5 rounded-full" :alt="getOptionLabel(option)">
+                                                    <span v-if="labelHtml" class="truncate" v-html="getOptionLabel(option)" />
+                                                    <span class="truncate" v-else>{{ __(getOptionLabel(option)) }}</span>
+                                                </slot>
+                                            </ComboboxItem>
+                                        </div>
                                     </div>
                                 </template>
                             </div>
diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index af7cb83c0a8..cedea53411a 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -141,21 +141,22 @@ function handleSearch(query) {
                         </span>
                     </template>
 
+                    <template #before-option="option">
+                        <div
+                            v-if="option._showGroupSeparator"
+                            class="mx-2 mb-1 mt-1 border-t border-gray-200 dark:border-gray-700"
+                            role="separator"
+                        />
+                        <Subheading
+                            v-if="option._groupLabel"
+                            size="sm"
+                            class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                            :text="__(option._groupLabel)"
+                        />
+                    </template>
+
                     <template #option="option">
-                        <div class="flex w-full min-w-0 flex-col">
-                            <div
-                                v-if="option._showGroupSeparator"
-                                class="mb-3 -mt-1.5 -mx-2 border-t border-gray-200 dark:border-gray-700"
-                                role="separator"
-                            />
-                            <Subheading
-                                v-if="option._groupLabel"
-                                size="sm"
-                                class="-mx-2 px-0.5 pb-3 pt-0.5 font-semibold uppercase text-gray-950 text-2xs"
-                                :text="__(option._groupLabel)"
-                            />
-                            <Localization :localization="option" :localizing />
-                        </div>
+                        <Localization :localization="option" :localizing />
                     </template>
                 </Combobox>
             </template>

From f78599269a1648601e8d88cbc90a284ba653b903 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 11:59:10 +0100
Subject: [PATCH 15/31] Balance separator spacing

---
 resources/js/components/ui/Publish/Localizations.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index cedea53411a..b72a1935f87 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -144,7 +144,7 @@ function handleSearch(query) {
                     <template #before-option="option">
                         <div
                             v-if="option._showGroupSeparator"
-                            class="mx-2 mb-1 mt-1 border-t border-gray-200 dark:border-gray-700"
+                            class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
                             role="separator"
                         />
                         <Subheading

From f2669c88ae47b21fd84827ce7204abde7f013187 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 12:07:31 +0100
Subject: [PATCH 16/31] Smooth Working In selection when switching groups

Update the trigger immediately on select and keep an Other prefix so the
chevron layout does not jump while the localization loads.
---
 .../components/ui/Publish/Localizations.vue   | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index b72a1935f87..1fc34bf8b5a 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -7,7 +7,7 @@ import {
     Subheading,
     Icon,
 } from '@ui';
-import { computed, ref, useId } from 'vue';
+import { computed, ref, useId, watch } from 'vue';
 import fuzzysort from 'fuzzysort';
 import Localization from './Localization.vue';
 
@@ -32,6 +32,7 @@ const UNGROUPED_KEY = 'other';
 
 const comboboxId = useId();
 const searchQuery = ref('');
+const pendingHandle = ref(null);
 
 const panelHeading = computed(() => props.heading || __('Working In'));
 
@@ -39,6 +40,24 @@ const activeLocalization = computed(() => {
     return props.localizations.find((localization) => localization.active);
 });
 
+watch(
+    () => activeLocalization.value?.handle,
+    (handle) => {
+        if (handle && handle === pendingHandle.value) {
+            pendingHandle.value = null;
+        }
+    },
+);
+
+const selectedLocalization = computed(() => {
+    if (pendingHandle.value) {
+        return props.localizations.find((localization) => localization.handle === pendingHandle.value)
+            ?? activeLocalization.value;
+    }
+
+    return activeLocalization.value;
+});
+
 const localizationGroups = computed(() => {
     const groups = [];
     const indexByKey = new Map();
@@ -101,12 +120,21 @@ function selectLocalization(localization) {
     if (!localization) return;
 
     searchQuery.value = '';
+    pendingHandle.value = localization.handle;
     emit('selected', localization);
 }
 
 function handleSearch(query) {
     searchQuery.value = query;
 }
+
+function selectedGroupLabel(option) {
+    if (option.group) {
+        return __(option.group);
+    }
+
+    return hasNamedGroups.value ? __('Other') : null;
+}
 </script>
 
 <template>
@@ -125,7 +153,7 @@ function handleSearch(query) {
                     :options="comboboxOptions"
                     option-value="handle"
                     option-label="name"
-                    :model-value="activeLocalization?.handle"
+                    :model-value="selectedLocalization?.handle"
                     :virtualize="!hasNamedGroups"
                     ignore-filter
                     @search="handleSearch"
@@ -133,9 +161,9 @@ function handleSearch(query) {
                 >
                     <template #selected-option="{ option }">
                         <span class="flex min-w-0 items-center gap-1.5">
-                            <template v-if="option.group">
-                                <span class="truncate">{{ __(option.group) }}</span>
-                                <Icon name="chevron-right" class="size-3.5! text-gray-400 dark:text-white/40" aria-hidden="true" />
+                            <template v-if="selectedGroupLabel(option)">
+                                <span class="truncate">{{ selectedGroupLabel(option) }}</span>
+                                <Icon name="chevron-right" class="size-3.5! shrink-0 text-gray-400 dark:text-white/40" aria-hidden="true" />
                             </template>
                             <span class="truncate">{{ __(option.name) }}</span>
                         </span>

From d6dbc083734cc4b505506b643a0f4bcb98eb3226 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 12:23:27 +0100
Subject: [PATCH 17/31] Add a custom scrollbar to the combobox so there's no
 confusion about how many items there is to choose from when scrollbars
 disappear like on macOS

---
 resources/js/components/ui/Combobox/Combobox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 5b5b2c595e5..6fd58224419 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -471,7 +471,7 @@ defineExpose({
                                 event.preventDefault();
                             }"
                         >
-                            <div class="relative max-h-[300px] overflow-y-auto py-2" data-ui-combobox-viewport>
+                            <div class="relative max-h-[300px] overflow-y-auto py-2 st-custom-scrollbar" data-ui-combobox-viewport>
                                 <!-- Hidden width measurer for wide dropdown mode -->
                                 <div v-if="adaptiveWidth" aria-hidden="true" class="h-0 overflow-y-clip px-2">
                                     <div v-for="option in filteredOptions" :key="getOptionValue(option)" class="py-1.5 px-2 text-sm whitespace-nowrap">

From fa56d9b791e170b1e51ea41515f954eff4af9c27 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 13:25:39 +0100
Subject: [PATCH 18/31] Change the border radius to compensate for custom
 scrollbar

---
 resources/js/components/ui/Combobox/Combobox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 6fd58224419..c04a5717281 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -455,7 +455,7 @@ defineExpose({
                         :side-offset="5"
                         position="popper"
                         :class="[
-                            'shadow-ui-sm z-(--z-index-above) rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800',
+                            'shadow-ui-sm z-(--z-index-above) rounded-md !rounded-se-sm border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800',
                             'max-h-[var(--reka-combobox-content-available-height)] min-w-[var(--reka-combobox-trigger-width)] overflow-hidden',
                             adaptiveWidth && 'w-max max-w-md',
                         ]"

From e05acae765ae0948075bc998ff1192ed68f95e8c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 15:39:33 +0100
Subject: [PATCH 19/31] Add group to global site headr

---
 .../components/global-header/SiteSelector.vue | 22 +++++++++++++++++--
 .../components/ui/Publish/Localizations.vue   |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/global-header/SiteSelector.vue b/resources/js/components/global-header/SiteSelector.vue
index 8a5cfdc7d02..ac017ee9eff 100644
--- a/resources/js/components/global-header/SiteSelector.vue
+++ b/resources/js/components/global-header/SiteSelector.vue
@@ -14,10 +14,16 @@
             class="[&_[data-ui-combobox-trigger]]:text-white/85"
         >
             <template #selected-option="{ option }">
-                <div class="size-4">
+                <div class="size-4 shrink-0">
                     <Icon name="globe-arrow" class="text-gray-900 dark:text-white dark:opacity-50" />
                 </div>
-                <span class="block truncate">{{ __(':name Site', { name: option.name }) }}</span>
+                <span class="flex min-w-0 items-center gap-1.5">
+                    <template v-if="groupLabel(option)">
+                        <span class="truncate">{{ groupLabel(option) }}</span>
+                        <Icon name="chevron-right" class="size-3.5! opacity-75" aria-hidden="true" />
+                    </template>
+                    <span class="truncate">{{ __(':name Site', { name: option.name }) }}</span>
+                </span>
             </template>
         </Select>
     </div>
@@ -37,9 +43,21 @@ export default {
         active() {
             return Statamic.$config.get('selectedSite');
         },
+
+        hasNamedGroups() {
+            return this.sites.some((site) => site.group);
+        },
     },
 
     methods: {
+        groupLabel(option) {
+            if (option.group) {
+                return __(option.group);
+            }
+
+            return this.hasNamedGroups ? __('Other') : null;
+        },
+
         selected(siteHandle) {
             if (siteHandle !== this.active) {
                 window.location = cp_url(`select-site/${siteHandle}`);
diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index 1fc34bf8b5a..4c7574afb80 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -163,7 +163,7 @@ function selectedGroupLabel(option) {
                         <span class="flex min-w-0 items-center gap-1.5">
                             <template v-if="selectedGroupLabel(option)">
                                 <span class="truncate">{{ selectedGroupLabel(option) }}</span>
-                                <Icon name="chevron-right" class="size-3.5! shrink-0 text-gray-400 dark:text-white/40" aria-hidden="true" />
+                                <Icon name="chevron-right" class="size-3.5! text-gray-700 dark:text-white/70" aria-hidden="true" />
                             </template>
                             <span class="truncate">{{ __(option.name) }}</span>
                         </span>

From 167e9f3a487ba88245b18a577c8b61246ce11727 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 17:44:52 +0100
Subject: [PATCH 20/31] Add the group structure to the combobox when the
 "Create Localization" view appears

---
 .../js/components/entries/PublishForm.vue     | 52 +++++++++++++-
 .../components/ui/Publish/Localizations.vue   | 66 ++++-------------
 resources/js/components/ui/Select/Select.vue  |  4 ++
 resources/js/util/site-groups.js              | 72 +++++++++++++++++++
 4 files changed, 139 insertions(+), 55 deletions(-)
 create mode 100644 resources/js/util/site-groups.js

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 2c888064b35..c81e327f168 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -234,7 +234,37 @@
         >
             <div class="publish-fields">
                 <ui-field class="form-group field-w-100" :label="__('Origin')" :instructions="__('messages.entry_origin_instructions')">
-                    <Select class="w-full" v-model="selectedOrigin" :options="originOptions" placeholder="" />
+                    <Select
+                        class="w-full"
+                        v-model="selectedOrigin"
+                        :options="originOptions"
+                        :virtualize="!originHasNamedGroups"
+                        placeholder=""
+                    >
+                        <template #selected-option="{ option }">
+                            <span class="flex min-w-0 items-center gap-1.5">
+                                <template v-if="selectedOriginGroupLabel(option)">
+                                    <span class="truncate">{{ selectedOriginGroupLabel(option) }}</span>
+                                    <Icon name="chevron-right" class="size-3.5! text-gray-700 dark:text-white/70" aria-hidden="true" />
+                                </template>
+                                <span class="truncate">{{ __(option.label) }}</span>
+                            </span>
+                        </template>
+
+                        <template #before-option="option">
+                            <div
+                                v-if="option._showGroupSeparator"
+                                class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
+                                role="separator"
+                            />
+                            <Subheading
+                                v-if="option._groupLabel"
+                                size="sm"
+                                class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                                :text="__(option._groupLabel)"
+                            />
+                        </template>
+                    </Select>
                 </ui-field>
             </div>
         </confirmation-modal>
@@ -285,6 +315,12 @@ import {
 	Stack,
 } from '@ui';
 import resetValuesFromResponse from '@/util/resetValuesFromResponse.js';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+    selectedSiteGroupLabel,
+} from '@/util/site-groups.js';
 import { computed, ref } from 'vue';
 import { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks, PipelineStopped } from '@ui/Publish/SavePipeline.js';
 import { router } from '@inertiajs/vue3';
@@ -514,12 +550,20 @@ export default {
         },
 
         originOptions() {
-            return this.localizations
+            const existing = this.localizations
                 .filter((localization) => localization.exists)
                 .map((localization) => ({
                     value: localization.handle,
                     label: localization.name,
+                    group: localization.group,
+                    group_handle: localization.group_handle,
                 }));
+
+            return flatOptionsFromSiteGroups(groupItemsBySiteGroup(existing));
+        },
+
+        originHasNamedGroups() {
+            return hasNamedSiteGroups(this.originOptions);
         },
 
         direction() {
@@ -724,6 +768,10 @@ export default {
             this.localizing = false;
         },
 
+        selectedOriginGroupLabel(option) {
+            return selectedSiteGroupLabel(option, this.originHasNamedGroups);
+        },
+
         localizationStatusText(localization) {
             if (!localization.exists) return 'This entry does not exist for this site.';
 
diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index 4c7574afb80..c346ac56ffb 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -10,6 +10,12 @@ import {
 import { computed, ref, useId, watch } from 'vue';
 import fuzzysort from 'fuzzysort';
 import Localization from './Localization.vue';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+    selectedSiteGroupLabel,
+} from '@/util/site-groups.js';
 
 const props = defineProps({
     localizations: {
@@ -28,8 +34,6 @@ const props = defineProps({
 
 const emit = defineEmits(['selected']);
 
-const UNGROUPED_KEY = 'other';
-
 const comboboxId = useId();
 const searchQuery = ref('');
 const pendingHandle = ref(null);
@@ -58,61 +62,21 @@ const selectedLocalization = computed(() => {
     return activeLocalization.value;
 });
 
-const localizationGroups = computed(() => {
-    const groups = [];
-    const indexByKey = new Map();
-
-    for (const localization of props.localizations) {
-        const isUngrouped = !localization.group && !localization.group_handle;
-        const key = isUngrouped
-            ? UNGROUPED_KEY
-            : (localization.group_handle || localization.group);
-        const label = isUngrouped ? __('Other') : localization.group;
-
-        if (!indexByKey.has(key)) {
-            indexByKey.set(key, groups.length);
-            groups.push({ key, label, localizations: [] });
-        }
+const localizationGroups = computed(() => groupItemsBySiteGroup(props.localizations));
 
-        groups[indexByKey.get(key)].localizations.push(localization);
-    }
-
-    const named = groups.filter((group) => group.key !== UNGROUPED_KEY);
-    const other = groups.filter((group) => group.key === UNGROUPED_KEY);
-
-    return [...named, ...other];
-});
-
-const hasNamedGroups = computed(() => localizationGroups.value.some((group) => group.key !== UNGROUPED_KEY));
+const hasNamedGroups = computed(() => hasNamedSiteGroups(localizationGroups.value));
 
 const useCombobox = computed(() => hasNamedGroups.value || props.localizations.length > 5);
 
 const comboboxOptions = computed(() => {
     const query = searchQuery.value;
-    let isFirstVisibleOption = true;
 
-    return localizationGroups.value.flatMap((group) => {
-        const localizations = query
+    return flatOptionsFromSiteGroups(localizationGroups.value, {
+        filterItems: (localizations) => query
             ? fuzzysort
-                .go(query, group.localizations, { keys: ['name', 'group', 'handle'] })
+                .go(query, localizations, { keys: ['name', 'group', 'handle'] })
                 .map((result) => result.obj)
-            : group.localizations;
-
-        if (!localizations.length) {
-            return [];
-        }
-
-        return localizations.map((localization, index) => {
-            const option = {
-                ...localization,
-                _groupLabel: index === 0 ? group.label : null,
-                _showGroupSeparator: index === 0 && !isFirstVisibleOption,
-            };
-
-            isFirstVisibleOption = false;
-
-            return option;
-        });
+            : localizations,
     });
 });
 
@@ -129,11 +93,7 @@ function handleSearch(query) {
 }
 
 function selectedGroupLabel(option) {
-    if (option.group) {
-        return __(option.group);
-    }
-
-    return hasNamedGroups.value ? __('Other') : null;
+    return selectedSiteGroupLabel(option, hasNamedGroups.value);
 }
 </script>
 
diff --git a/resources/js/components/ui/Select/Select.vue b/resources/js/components/ui/Select/Select.vue
index 78a1f0aeebe..c23e8748402 100644
--- a/resources/js/components/ui/Select/Select.vue
+++ b/resources/js/components/ui/Select/Select.vue
@@ -40,6 +40,7 @@ const slots = useSlots();
 const usingSelectedOptionSlot = !!slots['selected-option'];
 const usingNoOptionsSlot = !!slots['no-options'];
 const usingOptionSlot = !!slots['option'];
+const usingBeforeOptionSlot = !!slots['before-option'];
 </script>
 
 <template>
@@ -67,6 +68,9 @@ const usingOptionSlot = !!slots['option'];
         <template #no-options v-if="usingNoOptionsSlot">
             <slot name="no-options" />
         </template>
+        <template #before-option="option" v-if="usingBeforeOptionSlot">
+            <slot name="before-option" v-bind="option" />
+        </template>
         <template #option="option" v-if="usingOptionSlot">
             <slot name="option" v-bind="option" />
         </template>
diff --git a/resources/js/util/site-groups.js b/resources/js/util/site-groups.js
new file mode 100644
index 00000000000..d105768d5a7
--- /dev/null
+++ b/resources/js/util/site-groups.js
@@ -0,0 +1,72 @@
+export const UNGROUPED_SITE_GROUP_KEY = 'other';
+
+/**
+ * Group sites/localizations by named site group. Ungrouped items come last under "Other".
+ */
+export function groupItemsBySiteGroup(items) {
+    const groups = [];
+    const indexByKey = new Map();
+
+    for (const item of items) {
+        const isUngrouped = !item.group && !item.group_handle;
+        const key = isUngrouped
+            ? UNGROUPED_SITE_GROUP_KEY
+            : (item.group_handle || item.group);
+        const label = isUngrouped ? __('Other') : item.group;
+
+        if (!indexByKey.has(key)) {
+            indexByKey.set(key, groups.length);
+            groups.push({ key, label, items: [] });
+        }
+
+        groups[indexByKey.get(key)].items.push(item);
+    }
+
+    const named = groups.filter((group) => group.key !== UNGROUPED_SITE_GROUP_KEY);
+    const other = groups.filter((group) => group.key === UNGROUPED_SITE_GROUP_KEY);
+
+    return [...named, ...other];
+}
+
+export function hasNamedSiteGroups(groupsOrItems) {
+    const groups = Array.isArray(groupsOrItems?.[0]?.items)
+        ? groupsOrItems
+        : groupItemsBySiteGroup(groupsOrItems ?? []);
+
+    return groups.some((group) => group.key !== UNGROUPED_SITE_GROUP_KEY);
+}
+
+/**
+ * Flatten grouped items into Combobox/Select options with header metadata.
+ */
+export function flatOptionsFromSiteGroups(groups, { filterItems = (items) => items } = {}) {
+    let isFirstVisibleOption = true;
+
+    return groups.flatMap((group) => {
+        const items = filterItems(group.items);
+
+        if (!items.length) {
+            return [];
+        }
+
+        return items.map((item, index) => {
+            const option = {
+                ...item,
+                _groupLabel: index === 0 ? group.label : null,
+                _showGroupSeparator: index === 0 && !isFirstVisibleOption,
+            };
+
+            isFirstVisibleOption = false;
+
+            return option;
+        });
+    });
+}
+
+export function selectedSiteGroupLabel(item, namedGroupsExist) {
+    if (item?.group) {
+        return __(item.group);
+    }
+
+    return namedGroupsExist ? __('Other') : null;
+}

From 07aa1febc4ea35d80135bc916b05882cbfb6541b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 17:46:40 +0100
Subject: [PATCH 21/31] "Create Localization" > Add the status dot to make
 things clearer

---
 .../js/components/entries/PublishForm.vue     | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index c81e327f168..4213d81de8c 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -243,6 +243,14 @@
                     >
                         <template #selected-option="{ option }">
                             <span class="flex min-w-0 items-center gap-1.5">
+                                <span
+                                    class="little-dot shrink-0"
+                                    :class="{
+                                        'bg-green-600': option.published,
+                                        'bg-gray-500': !option.published,
+                                        'bg-red-500': !option.exists,
+                                    }"
+                                />
                                 <template v-if="selectedOriginGroupLabel(option)">
                                     <span class="truncate">{{ selectedOriginGroupLabel(option) }}</span>
                                     <Icon name="chevron-right" class="size-3.5! text-gray-700 dark:text-white/70" aria-hidden="true" />
@@ -264,6 +272,20 @@
                                 :text="__(option._groupLabel)"
                             />
                         </template>
+
+                        <template #option="option">
+                            <div class="flex min-w-0 items-center">
+                                <span
+                                    class="little-dot me-2 shrink-0"
+                                    :class="{
+                                        'bg-green-600': option.published,
+                                        'bg-gray-500': !option.published,
+                                        'bg-red-500': !option.exists,
+                                    }"
+                                />
+                                <span class="truncate">{{ __(option.label) }}</span>
+                            </div>
+                        </template>
                     </Select>
                 </ui-field>
             </div>
@@ -557,6 +579,8 @@ export default {
                     label: localization.name,
                     group: localization.group,
                     group_handle: localization.group_handle,
+                    published: localization.published,
+                    exists: localization.exists,
                 }));
 
             return flatOptionsFromSiteGroups(groupItemsBySiteGroup(existing));

From 79c54bb3b04494c241c5aeaaff758dd9e133c682 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 10:08:33 +0100
Subject: [PATCH 22/31] Prefer a group origin when creating a localization

When a second localization in a group is created, the origin switches to the first localization in the group. If the group has none yet, keep the current active/root behaviour.
---
 .../js/components/entries/PublishForm.vue     | 50 +++++++---
 resources/js/util/site-groups.js              | 99 ++++++++++++++++++-
 .../CP/Collections/EntriesController.php      |  1 +
 3 files changed, 132 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 4213d81de8c..f9d7199f684 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -256,6 +256,7 @@
                                     <Icon name="chevron-right" class="size-3.5! text-gray-700 dark:text-white/70" aria-hidden="true" />
                                 </template>
                                 <span class="truncate">{{ __(option.label) }}</span>
+                                <Badge v-if="option.origin" class="ms-1.5" size="sm" color="orange" :text="__('Origin')" />
                             </span>
                         </template>
 
@@ -274,16 +275,19 @@
                         </template>
 
                         <template #option="option">
-                            <div class="flex min-w-0 items-center">
-                                <span
-                                    class="little-dot me-2 shrink-0"
-                                    :class="{
-                                        'bg-green-600': option.published,
-                                        'bg-gray-500': !option.published,
-                                        'bg-red-500': !option.exists,
-                                    }"
-                                />
-                                <span class="truncate">{{ __(option.label) }}</span>
+                            <div class="flex min-w-0 items-center gap-x-2">
+                                <div class="flex min-w-0 items-center">
+                                    <span
+                                        class="little-dot me-2 shrink-0"
+                                        :class="{
+                                            'bg-green-600': option.published,
+                                            'bg-gray-500': !option.published,
+                                            'bg-red-500': !option.exists,
+                                        }"
+                                    />
+                                    <span class="truncate">{{ __(option.label) }}</span>
+                                </div>
+                                <Badge v-if="option.origin" class="ms-2" size="sm" color="orange" :text="__('Origin')" />
                             </div>
                         </template>
                     </Select>
@@ -313,6 +317,7 @@ import HasActions from '../publish/HasActions';
 import striptags from 'striptags';
 import clone from '@/util/clone.js';
 import {
+    Badge,
     Button,
     Card,
     CardPanel,
@@ -341,6 +346,7 @@ import {
     flatOptionsFromSiteGroups,
     groupItemsBySiteGroup,
     hasNamedSiteGroups,
+    preferredOriginHandle,
     selectedSiteGroupLabel,
 } from '@/util/site-groups.js';
 import { computed, ref } from 'vue';
@@ -351,6 +357,7 @@ export default {
     mixins: [HasPreferences, HasActions],
 
     components: {
+        Badge,
         Button,
         Card,
         CardPanel,
@@ -571,6 +578,14 @@ export default {
             return this.getPreference('after_save') ?? 'listing';
         },
 
+        defaultOriginHandle() {
+            return preferredOriginHandle(
+                this.localizations,
+                this.localizing || null,
+                this.originBehavior,
+            );
+        },
+
         originOptions() {
             const existing = this.localizations
                 .filter((localization) => localization.exists)
@@ -581,6 +596,7 @@ export default {
                     group_handle: localization.group_handle,
                     published: localization.published,
                     exists: localization.exists,
+                    origin: localization.handle === this.defaultOriginHandle,
                 }));
 
             return flatOptionsFromSiteGroups(groupItemsBySiteGroup(existing));
@@ -722,6 +738,11 @@ export default {
             this.$dirty.remove(this.publishContainer);
 
             this.localizing = localization;
+            this.selectedOrigin = preferredOriginHandle(
+                this.localizations,
+                localization,
+                this.originBehavior,
+            );
 
             if (localization.exists) {
                 this.editLocalization(localization);
@@ -949,10 +970,11 @@ export default {
     created() {
         window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
 
-        this.selectedOrigin =
-            this.originBehavior === 'active'
-                ? this.localizations.find((l) => l.active)?.handle
-                : this.localizations.find((l) => l.root)?.handle;
+        this.selectedOrigin = preferredOriginHandle(
+            this.localizations,
+            this.localizations.find((localization) => localization.active),
+            this.originBehavior,
+        );
     },
 
     beforeUnmount() {
diff --git a/resources/js/util/site-groups.js b/resources/js/util/site-groups.js
index d105768d5a7..673f4c8e403 100644
--- a/resources/js/util/site-groups.js
+++ b/resources/js/util/site-groups.js
@@ -1,5 +1,13 @@
 export const UNGROUPED_SITE_GROUP_KEY = 'other';
 
+export function siteGroupKey(item) {
+    if (!item?.group && !item?.group_handle) {
+        return UNGROUPED_SITE_GROUP_KEY;
+    }
+
+    return item.group_handle || item.group;
+}
+
 /**
  * Group sites/localizations by named site group. Ungrouped items come last under "Other".
  */
@@ -8,10 +16,8 @@ export function groupItemsBySiteGroup(items) {
     const indexByKey = new Map();
 
     for (const item of items) {
-        const isUngrouped = !item.group && !item.group_handle;
-        const key = isUngrouped
-            ? UNGROUPED_SITE_GROUP_KEY
-            : (item.group_handle || item.group);
+        const isUngrouped = siteGroupKey(item) === UNGROUPED_SITE_GROUP_KEY;
+        const key = siteGroupKey(item);
         const label = isUngrouped ? __('Other') : item.group;
 
         if (!indexByKey.has(key)) {
@@ -70,3 +76,88 @@ export function selectedSiteGroupLabel(item, namedGroupsExist) {
 
     return namedGroupsExist ? __('Other') : null;
 }
+
+/**
+ * Prefer an existing site in the target's group as the origin.
+ * Prefer the localization that entered the group from outside (or the root).
+ * If the group has no existing sites, fall back to originBehavior.
+ */
+export function preferredOriginHandle(localizations, target, originBehavior = 'root') {
+    const existing = (localizations ?? []).filter((localization) => localization.exists);
+
+    if (!existing.length) {
+        return null;
+    }
+
+    const targetKey = target ? siteGroupKey(target) : null;
+    const sameGroup = targetKey
+        ? existingInSiteOrder(existing).filter((localization) => siteGroupKey(localization) === targetKey)
+        : [];
+
+    if (sameGroup.length) {
+        return groupOriginHandle(sameGroup);
+    }
+
+    if (originBehavior !== 'root') {
+        const active = existing.find((localization) => localization.active);
+        if (active) {
+            return active.handle;
+        }
+    }
+
+    const root = existing.find((localization) => localization.root);
+    if (root) {
+        return root.handle;
+    }
+
+    return existing[0]?.handle ?? null;
+}
+
+/**
+ * Prefer the localization that entered the group from outside, or the root.
+ * If that site leaves the group, use whichever remaining site now points outside.
+ */
+function groupOriginHandle(sameGroup) {
+    const handles = new Set(sameGroup.map((localization) => localization.handle));
+
+    const entryPoint = sameGroup.find(({ origin_handle: origin }) => {
+        if (origin === undefined) return false;
+
+        return !origin || !handles.has(origin);
+    });
+
+    if (entryPoint) {
+        return entryPoint.handle;
+    }
+
+    const tracked = sameGroup.find((localization) => localization.origin)
+        ?? sameGroup.find((localization) => localization.root);
+
+    return (tracked ?? sameGroup[0]).handle;
+}
+
+function existingInSiteOrder(existing) {
+    const byHandle = new Map(existing.map((localization) => [localization.handle, localization]));
+    const ordered = siteOrderHandles()
+        .map((handle) => byHandle.get(handle))
+        .filter(Boolean);
+
+    if (!ordered.length) {
+        return existing;
+    }
+
+    const seen = new Set(ordered.map((localization) => localization.handle));
+    const rest = existing.filter((localization) => !seen.has(localization.handle));
+
+    return [...ordered, ...rest];
+}
+
+function siteOrderHandles() {
+    const sites = typeof Statamic !== 'undefined' ? Statamic.$config?.get?.('sites') : null;
+
+    if (!Array.isArray(sites) || !sites.length) {
+        return [];
+    }
+
+    return sites.map((site) => site.handle);
+}
diff --git a/src/Http/Controllers/CP/Collections/EntriesController.php b/src/Http/Controllers/CP/Collections/EntriesController.php
index df0ee395eb9..dfcc146bea5 100644
--- a/src/Http/Controllers/CP/Collections/EntriesController.php
+++ b/src/Http/Controllers/CP/Collections/EntriesController.php
@@ -158,6 +158,7 @@ public function edit(Request $request, $collection, $entry)
                     'exists' => $exists,
                     'root' => $exists ? $localized->isRoot() : false,
                     'origin' => $exists ? $localized->id() === optional($entry->origin())->id() : null,
+                    'origin_handle' => $exists ? optional($localized->origin())->locale() : null,
                     'published' => $exists ? $localized->published() : false,
                     'status' => $exists ? $localized->status() : null,
                     'url' => $exists ? $localized->editUrl() : null,

From ff052484a97a7d48ee28bbd2cc07c1d5008fe49d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 12:56:04 +0100
Subject: [PATCH 23/31] Follow the group origin when it moves out of the group

Otherwise a remaining in-group localization gets the Origin badge and becomes the default, which is misleading.
---
 resources/js/util/site-groups.js | 78 ++++++++++++++++++++++++++------
 1 file changed, 65 insertions(+), 13 deletions(-)

diff --git a/resources/js/util/site-groups.js b/resources/js/util/site-groups.js
index 673f4c8e403..ff68ad9c27e 100644
--- a/resources/js/util/site-groups.js
+++ b/resources/js/util/site-groups.js
@@ -79,8 +79,7 @@ export function selectedSiteGroupLabel(item, namedGroupsExist) {
 
 /**
  * Prefer an existing site in the target's group as the origin.
- * Prefer the localization that entered the group from outside (or the root).
- * If the group has no existing sites, fall back to originBehavior.
+ * If the group has none yet, fall back to originBehavior.
  */
 export function preferredOriginHandle(localizations, target, originBehavior = 'root') {
     const existing = (localizations ?? []).filter((localization) => localization.exists);
@@ -95,7 +94,7 @@ export function preferredOriginHandle(localizations, target, originBehavior = 'r
         : [];
 
     if (sameGroup.length) {
-        return groupOriginHandle(sameGroup);
+        return groupOriginHandle(sameGroup, existing);
     }
 
     if (originBehavior !== 'root') {
@@ -114,26 +113,79 @@ export function preferredOriginHandle(localizations, target, originBehavior = 'r
 }
 
 /**
- * Prefer the localization that entered the group from outside, or the root.
- * If that site leaves the group, use whichever remaining site now points outside.
+ * Prefer the first localization in the group (the one that entered from outside,
+ * or the in-group root). If that site later leaves the group, follow it outside
+ * instead of promoting another in-group site to Origin.
  */
-function groupOriginHandle(sameGroup) {
-    const handles = new Set(sameGroup.map((localization) => localization.handle));
+function groupOriginHandle(sameGroup, allExisting) {
+    const inGroup = new Set(sameGroup.map((localization) => localization.handle));
+    const byHandle = new Map(allExisting.map((localization) => [localization.handle, localization]));
+
+    const chainHead = sameGroup.find((localization) => (
+        sameGroup.some((other) => other.origin_handle === localization.handle)
+    ));
+
+    if (chainHead) {
+        return chainHead.handle;
+    }
 
     const entryPoint = sameGroup.find(({ origin_handle: origin }) => {
         if (origin === undefined) return false;
 
-        return !origin || !handles.has(origin);
-    });
+        return !origin || !inGroup.has(origin);
+    }) ?? sameGroup[0];
+
+    if (!entryPoint) {
+        return null;
+    }
 
-    if (entryPoint) {
+    const parentHandle = entryPoint.origin_handle;
+
+    if (!parentHandle) {
+        return entryPoint.handle;
+    }
+
+    if (inGroup.has(parentHandle)) {
         return entryPoint.handle;
     }
 
-    const tracked = sameGroup.find((localization) => localization.origin)
-        ?? sameGroup.find((localization) => localization.root);
+    const parent = byHandle.get(parentHandle);
+
+    if (!parent) {
+        return entryPoint.handle;
+    }
+
+    // Parent is outside the group. If anything exists that isn't that parent or
+    // descended from it, the parent is a former in-group origin that moved out —
+    // keep pointing at it. Otherwise this is the first localization in the group
+    // (created from the global root/default) and it stays the group origin.
+    const hasUnrelatedLocalizations = allExisting.some((localization) => (
+        localization.handle !== parentHandle
+        && !descendsFrom(localization, parentHandle, byHandle)
+    ));
+
+    return hasUnrelatedLocalizations ? parentHandle : entryPoint.handle;
+}
+
+function descendsFrom(localization, ancestorHandle, byHandle) {
+    let current = localization;
+    const seen = new Set();
+
+    while (current?.origin_handle) {
+        if (seen.has(current.handle)) {
+            return false;
+        }
+
+        seen.add(current.handle);
+
+        if (current.origin_handle === ancestorHandle) {
+            return true;
+        }
+
+        current = byHandle.get(current.origin_handle);
+    }
 
-    return (tracked ?? sameGroup[0]).handle;
+    return false;
 }
 
 function existingInSiteOrder(existing) {

From 7c5e0c36075e271f903a2467ade7a514b3cb32dc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 13:54:02 +0100
Subject: [PATCH 24/31] Show group headers in the collection configuration too

---
 .../inputs/relationship/SelectField.vue       | 58 +++++++++++++++++--
 src/Fieldtypes/Sites.php                      |  5 +-
 2 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 628d716ae12..c1ee5f9211b 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -3,7 +3,7 @@
         <Combobox
             searchable
             :disabled="config.disabled"
-            :ignore-filter="typeahead"
+            :ignore-filter="typeahead || hasNamedGroups"
             :max-selections="maxSelections"
             :model-value="items.map((item) => item.id)"
             :multiple
@@ -13,11 +13,25 @@
             :taggable="isTaggable"
             :close-on-select="isTaggable"
             :search-keys="searchKeys"
+            :virtualize="!hasNamedGroups"
             option-label="title"
             option-value="id"
             @update:modelValue="itemsSelected"
-            @search="search"
+            @search="onSearch"
         >
+            <template #before-option="option" v-if="hasNamedGroups">
+                <div
+                    v-if="option._showGroupSeparator"
+                    class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
+                    role="separator"
+                />
+                <Subheading
+                    v-if="option._groupLabel"
+                    size="sm"
+                    class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                    :text="__(option._groupLabel)"
+                />
+            </template>
             <template #option="{ title, hint, status }">
                 <div class="flex w-full text-left items-center gap-2">
                     <StatusIndicator v-if="status" :status="status" />
@@ -40,10 +54,16 @@
 </template>
 
 <script>
-import { Combobox, StatusIndicator } from '@/components/ui';
+import { Combobox, StatusIndicator, Subheading } from '@/components/ui';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+} from '@/util/site-groups.js';
 import { ref, watch } from 'vue';
 import { router } from '@inertiajs/vue3';
 import axios from 'axios';
+import fuzzysort from 'fuzzysort';
 
 const optionsCache = ref({});
 const loaders = ref({});
@@ -52,6 +72,7 @@ export default {
     components: {
         StatusIndicator,
         Combobox,
+        Subheading,
     },
 
     props: {
@@ -70,6 +91,7 @@ export default {
         return {
             requested: false,
             options: [],
+            searchQuery: '',
             abortController: null,
             removeNavigationListener: null,
         };
@@ -102,7 +124,7 @@ export default {
 			return JSON.stringify({ ...this.parameters, url: this.url });
 	    },
 
-        comboboxOptions() {
+        rawOptions() {
             // Combobox resolves the selected label from this list, so a selected item missing
             // from it (e.g. a just-created term) would otherwise display as its raw id.
             const missing = this.items.filter((item) => !this.options.some((option) => option.id === item.id));
@@ -110,6 +132,24 @@ export default {
             return [...this.options, ...missing];
         },
 
+        hasNamedGroups() {
+            return hasNamedSiteGroups(this.rawOptions);
+        },
+
+        comboboxOptions() {
+            if (!this.hasNamedGroups) {
+                return this.rawOptions;
+            }
+
+            const query = this.searchQuery;
+
+            return flatOptionsFromSiteGroups(groupItemsBySiteGroup(this.rawOptions), {
+                filterItems: (items) => query
+                    ? fuzzysort.go(query, items, { keys: ['title', 'group', 'id'] }).map((result) => result.obj)
+                    : items,
+            });
+        },
+
         noOptionsText() {
             return this.typeahead && !this.requested ? __('Start typing to search.') : __('No options to choose from.');
         },
@@ -177,6 +217,16 @@ export default {
             this.request({ search }).then((response) => loading(false));
         },
 
+        onSearch(query, loading) {
+            if (this.typeahead) {
+                this.search(query, loading);
+
+                return;
+            }
+
+            this.searchQuery = query;
+        },
+
         itemsSelected(items) {
             if (!this.multiple) {
                 items = items === null ? [] : [items];
diff --git a/src/Fieldtypes/Sites.php b/src/Fieldtypes/Sites.php
index 86ff934cab7..2b13425a2c5 100644
--- a/src/Fieldtypes/Sites.php
+++ b/src/Fieldtypes/Sites.php
@@ -20,6 +20,8 @@ public function toItemArray($id)
             return [
                 'id' => $id,
                 'title' => $site->name(),
+                'group' => $site->group(),
+                'group_handle' => $site->groupHandle(),
             ];
         }
 
@@ -30,11 +32,12 @@ public function getIndexItems($request)
     {
         return Site::all()
             ->filter(fn ($site) => User::current()->can('view', $site))
-            ->sortBy('name')
             ->map(function ($site) {
                 return [
                     'id' => $site->handle(),
                     'title' => $site->name(),
+                    'group' => $site->group(),
+                    'group_handle' => $site->groupHandle(),
                 ];
             })->values();
     }

From 74143cd3ad7b4ce94b8845ee70a8a7bf4f49ced7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 14:14:29 +0100
Subject: [PATCH 25/31] Collection Configuration > show headers in selected
 items too

---
 .../components/inputs/relationship/Item.vue   | 61 +++++++++++++++++--
 .../inputs/relationship/ItemLabel.vue         | 22 +++++++
 2 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/components/inputs/relationship/ItemLabel.vue

diff --git a/resources/js/components/inputs/relationship/Item.vue b/resources/js/components/inputs/relationship/Item.vue
index 707a589808a..2bee30e42cb 100644
--- a/resources/js/components/inputs/relationship/Item.vue
+++ b/resources/js/components/inputs/relationship/Item.vue
@@ -9,20 +9,24 @@
             <div
                 v-if="item.invalid"
                 v-tooltip.top="__('messages.relationship_item_unavailable')"
-                v-text="__(item.title)"
                 class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400"
-            />
+            >
+                <ItemLabel :item="item" :group-label="groupLabel" />
+            </div>
 
             <a
                 v-if="!item.invalid && editable"
                 @click.prevent="edit"
-                v-text="__(item.title)"
                 class="line-clamp-1 text-sm text-gray-600 dark:text-gray-300"
-                v-tooltip="item.title"
+                v-tooltip="itemTitle"
                 :href="item.edit_url"
-            />
+            >
+                <ItemLabel :item="item" :group-label="groupLabel" />
+            </a>
 
-            <div v-if="!item.invalid && !editable" v-text="__(item.title)" />
+            <div v-if="!item.invalid && !editable" class="line-clamp-1">
+                <ItemLabel :item="item" :group-label="groupLabel" />
+            </div>
 
             <inline-edit-form
                 v-if="isEditing"
@@ -68,7 +72,9 @@
 <script>
 import { getActivePinia } from 'pinia';
 import InlineEditForm from './InlineEditForm.vue';
+import ItemLabel from './ItemLabel.vue';
 import { Button, Dropdown, DropdownMenu, DropdownItem, publishContextKey as containerContextKey } from '@/components/ui';
+import { selectedSiteGroupLabel } from '@/util/site-groups.js';
 
 export default {
     components: {
@@ -77,6 +83,7 @@ export default {
         DropdownMenu,
         Dropdown,
         InlineEditForm,
+        ItemLabel,
     },
 
     inject: {
@@ -103,6 +110,48 @@ export default {
         };
     },
 
+    computed: {
+        itemTitle() {
+            return __(this.item.title);
+        },
+
+        sitesHaveNamedGroups() {
+            if (this.config?.type !== 'sites') {
+                return false;
+            }
+
+            const sites = Statamic.$config.get('sites') || [];
+
+            return sites.some((site) => site.group);
+        },
+
+        groupLabel() {
+            if (this.config?.type !== 'sites') {
+                return null;
+            }
+
+            return selectedSiteGroupLabel(this.itemWithSiteGroup, this.sitesHaveNamedGroups);
+        },
+
+        itemWithSiteGroup() {
+            if (this.item.group || this.item.group_handle) {
+                return this.item;
+            }
+
+            const site = (Statamic.$config.get('sites') || []).find((site) => site.handle === this.item.id);
+
+            if (!site) {
+                return this.item;
+            }
+
+            return {
+                ...this.item,
+                group: site.group,
+                group_handle: site.group_handle,
+            };
+        },
+    },
+
     methods: {
         edit() {
             if (!this.editable) return;
diff --git a/resources/js/components/inputs/relationship/ItemLabel.vue b/resources/js/components/inputs/relationship/ItemLabel.vue
new file mode 100644
index 00000000000..8c028726a9e
--- /dev/null
+++ b/resources/js/components/inputs/relationship/ItemLabel.vue
@@ -0,0 +1,22 @@
+<template>
+    <span class="inline-flex min-w-0 items-center gap-1.5">
+        <template v-if="groupLabel">
+            <span class="truncate">{{ groupLabel }}</span>
+            <Icon name="chevron-right" class="size-3.5! shrink-0 text-gray-700 dark:text-white/70" aria-hidden="true" />
+        </template>
+        <span class="truncate">{{ __(item.title) }}</span>
+    </span>
+</template>
+
+<script>
+import { Icon } from '@/components/ui';
+
+export default {
+    components: { Icon },
+
+    props: {
+        item: { type: Object, required: true },
+        groupLabel: { type: String, default: null },
+    },
+};
+</script>

From 2f2920e542723181371f2c26bd4baf88624f1257 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 14:24:19 +0100
Subject: [PATCH 26/31] Show groups in the global site header

---
 .../components/global-header/SiteSelector.vue | 43 +++++++++++++++----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/global-header/SiteSelector.vue b/resources/js/components/global-header/SiteSelector.vue
index ac017ee9eff..1d0450d88a2 100644
--- a/resources/js/components/global-header/SiteSelector.vue
+++ b/resources/js/components/global-header/SiteSelector.vue
@@ -2,8 +2,9 @@
     <div v-if="sites.length > 1" class="flex h-full items-center animate-in fade-in duration-750 fill-mode-forwards" data-ui-global-site-selector>
         <Select
             :model-value="active"
-            :options="sites"
+            :options="comboboxOptions"
             :searchable="false"
+            :virtualize="!hasNamedGroups"
             @update:model-value="selected"
             option-label="name"
             option-value="handle"
@@ -25,15 +26,35 @@
                     <span class="truncate">{{ __(':name Site', { name: option.name }) }}</span>
                 </span>
             </template>
+
+            <template v-if="hasNamedGroups" #before-option="option">
+                <div
+                    v-if="option._showGroupSeparator"
+                    class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
+                    role="separator"
+                />
+                <Subheading
+                    v-if="option._groupLabel"
+                    size="sm"
+                    class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                    :text="__(option._groupLabel)"
+                />
+            </template>
         </Select>
     </div>
 </template>
 
 <script>
-import { Icon, Select } from '@/components/ui';
+import { Icon, Select, Subheading } from '@/components/ui';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+    selectedSiteGroupLabel,
+} from '@/util/site-groups.js';
 
 export default {
-    components: { Icon, Select },
+    components: { Icon, Select, Subheading },
 
     computed: {
         sites() {
@@ -45,17 +66,21 @@ export default {
         },
 
         hasNamedGroups() {
-            return this.sites.some((site) => site.group);
+            return hasNamedSiteGroups(this.sites);
+        },
+
+        comboboxOptions() {
+            if (!this.hasNamedGroups) {
+                return this.sites;
+            }
+
+            return flatOptionsFromSiteGroups(groupItemsBySiteGroup(this.sites));
         },
     },
 
     methods: {
         groupLabel(option) {
-            if (option.group) {
-                return __(option.group);
-            }
-
-            return this.hasNamedGroups ? __('Other') : null;
+            return selectedSiteGroupLabel(option, this.hasNamedGroups);
         },
 
         selected(siteHandle) {

From f69d5118789fbb0444268f688759b51897212ef1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 14:35:02 +0100
Subject: [PATCH 27/31] Tweak spacing of groups

---
 resources/js/components/ui/Combobox/Combobox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index e5ebaf66f07..cde5490c92b 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -478,7 +478,7 @@ defineExpose({
                                 event.preventDefault();
                             }"
                         >
-                            <div class="relative max-h-[300px] overflow-y-auto py-2 st-custom-scrollbar" data-ui-combobox-viewport>
+                            <div class="relative max-h-[300px] overflow-y-auto py-1.5 pb-2 st-custom-scrollbar" data-ui-combobox-viewport>
                                 <!-- Hidden width measurer for wide dropdown mode -->
                                 <div v-if="adaptiveWidth" aria-hidden="true" class="h-0 overflow-y-clip px-2">
                                     <div v-for="option in filteredOptions" :key="getOptionValue(option)" class="py-1.5 px-2 text-sm whitespace-nowrap">

From 85e2355af43db7e7f07db9dd1323f0f639d346eb Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 14:55:32 +0100
Subject: [PATCH 28/31] Add grouping to globals

---
 resources/js/components/globals/Sites.vue     | 102 ++++++++++++++----
 .../CP/Globals/GlobalsController.php          |   2 +
 2 files changed, 81 insertions(+), 23 deletions(-)

diff --git a/resources/js/components/globals/Sites.vue b/resources/js/components/globals/Sites.vue
index 2d98a2f3337..4043830fce4 100644
--- a/resources/js/components/globals/Sites.vue
+++ b/resources/js/components/globals/Sites.vue
@@ -15,30 +15,61 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="site in sites" :key="site.handle">
-                <td class="grid-cell">
-                    <div class="flex items-center gap-2">
-                        <Switch v-model="site.enabled" />
-                        <Heading :text="__(site.name)" />
-                    </div>
-                </td>
-                <td class="grid-cell">
-                    <Select
-                        class="w-full"
-                        :options="siteOriginOptions(site)"
-                        :clearable="true"
-                        :model-value="site.origin"
-                        @update:model-value="site.origin = $event"
-                    />
-                </td>
-            </tr>
+            <template v-for="group in siteGroups" :key="group.key">
+                <tr v-if="hasNamedGroups">
+                    <td colspan="2" class="bg-gray-50 dark:bg-gray-800 !py-2">
+                        <Subheading
+                            size="sm"
+                            class="px-1 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                            :text="__(group.label)"
+                        />
+                    </td>
+                </tr>
+                <tr v-for="site in group.items" :key="site.handle">
+                    <td class="grid-cell">
+                        <div class="flex items-center gap-2">
+                            <Switch v-model="site.enabled" />
+                            <Heading :text="__(site.name)" />
+                        </div>
+                    </td>
+                    <td class="grid-cell">
+                        <Select
+                            class="w-full"
+                            :options="siteOriginOptions(site)"
+                            :clearable="true"
+                            :virtualize="!hasNamedGroups"
+                            :model-value="site.origin"
+                            @update:model-value="site.origin = $event"
+                        >
+                            <template v-if="hasNamedGroups" #before-option="option">
+                                <div
+                                    v-if="option._showGroupSeparator"
+                                    class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
+                                    role="separator"
+                                />
+                                <Subheading
+                                    v-if="option._groupLabel"
+                                    size="sm"
+                                    class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                                    :text="__(option._groupLabel)"
+                                />
+                            </template>
+                        </Select>
+                    </td>
+                </tr>
+            </template>
         </tbody>
     </table>
 </template>
 
 <script>
 import Fieldtype from '../fieldtypes/Fieldtype.vue';
-import { Switch, Heading, Select } from '@/components/ui';
+import { Switch, Heading, Select, Subheading } from '@/components/ui';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+} from '@/util/site-groups.js';
 
 export default {
     mixins: [Fieldtype],
@@ -47,6 +78,7 @@ export default {
         Switch,
         Heading,
         Select,
+        Subheading,
     },
 
     data() {
@@ -55,17 +87,41 @@ export default {
         };
     },
 
+    computed: {
+        hasNamedGroups() {
+            return hasNamedSiteGroups(this.sites);
+        },
+
+        siteGroups() {
+            return groupItemsBySiteGroup(this.sites);
+        },
+    },
+
     watch: {
-        sites(sites) {
-            this.update(sites);
+        sites: {
+            deep: true,
+            handler(sites) {
+                this.update(sites);
+            },
         },
     },
 
     methods: {
         siteOriginOptions(site) {
-            return this.sites
-                .map((s) => ({ value: s.handle, label: __(s.name) }))
-                .filter((s) => s.value !== site.handle);
+            const options = this.sites
+                .filter((s) => s.handle !== site.handle)
+                .map((s) => ({
+                    value: s.handle,
+                    label: __(s.name),
+                    group: s.group,
+                    group_handle: s.group_handle,
+                }));
+
+            if (!this.hasNamedGroups) {
+                return options;
+            }
+
+            return flatOptionsFromSiteGroups(groupItemsBySiteGroup(options));
         },
     },
 };
diff --git a/src/Http/Controllers/CP/Globals/GlobalsController.php b/src/Http/Controllers/CP/Globals/GlobalsController.php
index b4d4496e714..5c310b1aa4f 100644
--- a/src/Http/Controllers/CP/Globals/GlobalsController.php
+++ b/src/Http/Controllers/CP/Globals/GlobalsController.php
@@ -72,6 +72,8 @@ public function edit($set)
                 return [
                     'name' => $site->name(),
                     'handle' => $site->handle(),
+                    'group' => $site->group(),
+                    'group_handle' => $site->groupHandle(),
                     'enabled' => $set->sites()->contains($site->handle()),
                     'origin' => $set->origins()->get($site->handle()),
                 ];

From d2c19035c459a1bde0c593ed1d4c16f62c4129ea Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 15:12:41 +0100
Subject: [PATCH 29/31] Show group in the selected global origin combobox

---
 resources/js/components/globals/Sites.vue | 58 ++++++++++++++++-------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/resources/js/components/globals/Sites.vue b/resources/js/components/globals/Sites.vue
index 4043830fce4..b55fe8650c3 100644
--- a/resources/js/components/globals/Sites.vue
+++ b/resources/js/components/globals/Sites.vue
@@ -41,18 +41,30 @@
                             :model-value="site.origin"
                             @update:model-value="site.origin = $event"
                         >
-                            <template v-if="hasNamedGroups" #before-option="option">
-                                <div
-                                    v-if="option._showGroupSeparator"
-                                    class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
-                                    role="separator"
-                                />
-                                <Subheading
-                                    v-if="option._groupLabel"
-                                    size="sm"
-                                    class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
-                                    :text="__(option._groupLabel)"
-                                />
+                            <template #selected-option="{ option }">
+                                <span v-if="option" class="flex min-w-0 items-center gap-1.5">
+                                    <template v-if="originGroupLabel(option)">
+                                        <span class="truncate">{{ originGroupLabel(option) }}</span>
+                                        <Icon name="chevron-right" class="size-3.5! shrink-0 text-gray-700 dark:text-white/70" aria-hidden="true" />
+                                    </template>
+                                    <span class="truncate">{{ option.label }}</span>
+                                </span>
+                            </template>
+
+                            <template #before-option="option">
+                                <template v-if="hasNamedGroups">
+                                    <div
+                                        v-if="option._showGroupSeparator"
+                                        class="mx-2 mb-2.25 mt-0.75 border-t border-gray-200 dark:border-gray-700"
+                                        role="separator"
+                                    />
+                                    <Subheading
+                                        v-if="option._groupLabel"
+                                        size="sm"
+                                        class="px-2.5 pb-1 pt-1.5 font-semibold uppercase tracking-wide text-gray-950 text-2xs dark:text-gray-300"
+                                        :text="__(option._groupLabel)"
+                                    />
+                                </template>
                             </template>
                         </Select>
                     </td>
@@ -64,17 +76,19 @@
 
 <script>
 import Fieldtype from '../fieldtypes/Fieldtype.vue';
-import { Switch, Heading, Select, Subheading } from '@/components/ui';
+import { Icon, Switch, Heading, Select, Subheading } from '@/components/ui';
 import {
     flatOptionsFromSiteGroups,
     groupItemsBySiteGroup,
     hasNamedSiteGroups,
+    selectedSiteGroupLabel,
 } from '@/util/site-groups.js';
 
 export default {
     mixins: [Fieldtype],
 
     components: {
+        Icon,
         Switch,
         Heading,
         Select,
@@ -83,7 +97,7 @@ export default {
 
     data() {
         return {
-            sites: this.value,
+            sites: this.value ?? [],
         };
     },
 
@@ -93,11 +107,15 @@ export default {
         },
 
         siteGroups() {
-            return groupItemsBySiteGroup(this.sites);
+            return groupItemsBySiteGroup(this.sites ?? []);
         },
     },
 
     watch: {
+        value(value) {
+            this.sites = value ?? [];
+        },
+
         sites: {
             deep: true,
             handler(sites) {
@@ -107,8 +125,16 @@ export default {
     },
 
     methods: {
+        originGroupLabel(option) {
+            if (!option || !this.hasNamedGroups) {
+                return null;
+            }
+
+            return selectedSiteGroupLabel(option, true);
+        },
+
         siteOriginOptions(site) {
-            const options = this.sites
+            const options = (this.sites ?? [])
                 .filter((s) => s.handle !== site.handle)
                 .map((s) => ({
                     value: s.handle,

From d383a7eceb4775124fd39da2222d4083cc3ba2aa Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 16:07:15 +0100
Subject: [PATCH 30/31] For "Add sites" grid button, Only auto-focus on
 Configure Sites sectioned grids, not every Grid in the CP. For grids in the
 cp, people may want to add a few rows at once so auto focusing on the row
 might be annoying

---
 resources/js/components/fieldtypes/grid/Grid.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index 150ccb9eedb..c8922f2e31c 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -207,7 +207,11 @@ export default {
 
             this.updateRowMeta(id, this.meta.new);
             this.update([...this.value, row]);
-            this.focusNewRow(id);
+
+            // Only auto-focus on Configure Sites sectioned grids, not every Grid in the CP.
+            if (this.config.headers_in_section) {
+                this.focusNewRow(id);
+            }
         },
 
         updated(index, row) {

From 6bff4ebfd92c086df3727eba6a19f0708d7a8305 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 21 Aug 2026 16:14:32 +0100
Subject: [PATCH 31/31] Fix multisite grouping review issues

Clear a stale Working In selection when a switch is aborted, restore site
group sections on Discard Changes, and tighten related grouping edge cases
with tests.
---
 .../js/components/entries/PublishForm.vue     |   1 +
 .../js/components/fieldtypes/grid/View.vue    |   9 +-
 .../components/inputs/relationship/Item.vue   |  15 +-
 resources/js/components/terms/PublishForm.vue |   1 +
 .../components/ui/Publish/Localizations.vue   |  46 +++++-
 resources/js/pages/sites/Edit.vue             |  15 +-
 resources/js/tests/util/site-groups.test.js   | 135 ++++++++++++++++++
 src/Fieldtypes/Sites.php                      |  11 +-
 .../Controllers/CP/Sites/SitesController.php  |   8 +-
 src/Sites/Site.php                            |   1 +
 src/Sites/Sites.php                           |  20 ++-
 tests/Sites/SiteTest.php                      |  15 ++
 tests/Sites/SitesTest.php                     |   9 ++
 13 files changed, 255 insertions(+), 31 deletions(-)
 create mode 100644 resources/js/tests/util/site-groups.test.js

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index f9d7199f684..c4539d657d0 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -169,6 +169,7 @@
                                 v-if="showLocalizationSelector"
                                 :localizations
                                 :localizing="localizing !== null"
+                                :confirming-switch="!!pendingLocalization"
                                 @selected="localizationSelected"
                             />
                         </div>
diff --git a/resources/js/components/fieldtypes/grid/View.vue b/resources/js/components/fieldtypes/grid/View.vue
index 2bebe303af6..bd0156143b1 100644
--- a/resources/js/components/fieldtypes/grid/View.vue
+++ b/resources/js/components/fieldtypes/grid/View.vue
@@ -10,6 +10,7 @@ export default {
     data() {
         return {
             errorsById: {},
+            sectionRowZoneEl: null,
         };
     },
 
@@ -96,13 +97,15 @@ export default {
         registerSectionRowZone() {
             if (!this.usesSectionRowSortable || !this.$refs.zone) return;
 
-            this.sectionRowSortable.register(this.$refs.zone, this.name);
+            this.sectionRowZoneEl = this.$refs.zone;
+            this.sectionRowSortable.register(this.sectionRowZoneEl, this.name);
         },
 
         unregisterSectionRowZone() {
-            if (!this.sectionRowSortable || !this.$refs.zone) return;
+            if (!this.sectionRowSortable || !this.sectionRowZoneEl) return;
 
-            this.sectionRowSortable.unregister(this.$refs.zone);
+            this.sectionRowSortable.unregister(this.sectionRowZoneEl);
+            this.sectionRowZoneEl = null;
         },
     },
 };
diff --git a/resources/js/components/inputs/relationship/Item.vue b/resources/js/components/inputs/relationship/Item.vue
index 2bee30e42cb..283ae05d923 100644
--- a/resources/js/components/inputs/relationship/Item.vue
+++ b/resources/js/components/inputs/relationship/Item.vue
@@ -74,7 +74,6 @@ import { getActivePinia } from 'pinia';
 import InlineEditForm from './InlineEditForm.vue';
 import ItemLabel from './ItemLabel.vue';
 import { Button, Dropdown, DropdownMenu, DropdownItem, publishContextKey as containerContextKey } from '@/components/ui';
-import { selectedSiteGroupLabel } from '@/util/site-groups.js';
 
 export default {
     components: {
@@ -115,22 +114,12 @@ export default {
             return __(this.item.title);
         },
 
-        sitesHaveNamedGroups() {
-            if (this.config?.type !== 'sites') {
-                return false;
-            }
-
-            const sites = Statamic.$config.get('sites') || [];
-
-            return sites.some((site) => site.group);
-        },
-
         groupLabel() {
-            if (this.config?.type !== 'sites') {
+            if (this.config?.type !== 'sites' || !this.itemWithSiteGroup.group) {
                 return null;
             }
 
-            return selectedSiteGroupLabel(this.itemWithSiteGroup, this.sitesHaveNamedGroups);
+            return __(this.itemWithSiteGroup.group);
         },
 
         itemWithSiteGroup() {
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index b5a2f60a61e..40b35372973 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -103,6 +103,7 @@
                                 v-if="showLocalizationSelector"
                                 :localizations
                                 :localizing
+                                :confirming-switch="!!pendingLocalization"
                                 @selected="localizationSelected"
                             />
                         </div>
diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
index c346ac56ffb..92797fa5f5b 100644
--- a/resources/js/components/ui/Publish/Localizations.vue
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -7,7 +7,7 @@ import {
     Subheading,
     Icon,
 } from '@ui';
-import { computed, ref, useId, watch } from 'vue';
+import { computed, ref, useId, watch, nextTick } from 'vue';
 import fuzzysort from 'fuzzysort';
 import Localization from './Localization.vue';
 import {
@@ -26,6 +26,10 @@ const props = defineProps({
         type: [Boolean, String],
         default: false,
     },
+    confirmingSwitch: {
+        type: Boolean,
+        default: false,
+    },
     heading: {
         type: String,
         default: null,
@@ -44,6 +48,17 @@ const activeLocalization = computed(() => {
     return props.localizations.find((localization) => localization.active);
 });
 
+function clearPendingIfStale() {
+    if (!pendingHandle.value) return;
+    if (pendingHandle.value === activeLocalization.value?.handle) {
+        pendingHandle.value = null;
+        return;
+    }
+    if (props.localizing || props.confirmingSwitch) return;
+
+    pendingHandle.value = null;
+}
+
 watch(
     () => activeLocalization.value?.handle,
     (handle) => {
@@ -53,6 +68,24 @@ watch(
     },
 );
 
+watch(
+    () => props.localizing,
+    (localizing, wasLocalizing) => {
+        if (wasLocalizing && !localizing) {
+            clearPendingIfStale();
+        }
+    },
+);
+
+watch(
+    () => props.confirmingSwitch,
+    (confirming, wasConfirming) => {
+        if (wasConfirming && !confirming) {
+            clearPendingIfStale();
+        }
+    },
+);
+
 const selectedLocalization = computed(() => {
     if (pendingHandle.value) {
         return props.localizations.find((localization) => localization.handle === pendingHandle.value)
@@ -86,6 +119,17 @@ function selectLocalization(localization) {
     searchQuery.value = '';
     pendingHandle.value = localization.handle;
     emit('selected', localization);
+
+    // Parent may abort without starting a switch (e.g. can't create missing localization).
+    if (!localization.exists) {
+        nextTick(() => {
+            if (pendingHandle.value !== localization.handle) return;
+            if (props.localizing || props.confirmingSwitch) return;
+            if (activeLocalization.value?.handle !== localization.handle) {
+                pendingHandle.value = null;
+            }
+        });
+    }
 }
 
 function handleSearch(query) {
diff --git a/resources/js/pages/sites/Edit.vue b/resources/js/pages/sites/Edit.vue
index 656ae71286b..0a034fa2856 100644
--- a/resources/js/pages/sites/Edit.vue
+++ b/resources/js/pages/sites/Edit.vue
@@ -26,10 +26,12 @@ function siteHandlesFromValues(values) {
 
 const container = useTemplateRef('container');
 const values = ref(props.initialValues);
+const blueprintState = ref(deepClone(props.blueprint));
 const errors = ref({});
 const saving = ref(false);
 const editingGroups = ref(false);
 const groupsSnapshot = ref(null);
+const blueprintSnapshot = ref(null);
 const containerKey = ref(0);
 
 const groupsDirty = computed(() => {
@@ -48,11 +50,11 @@ const initialHandleChanged = computed(() => initialSiteHandles.value.filter((han
 const initialHandleChangedWarning = computed(() => __('Warning! Changing a site handle may break existing site content!'));
 
 const hasOnlyOtherGroup = computed(() => {
-    if (! isMultisite.value || ! props.blueprint?.tabs) {
+    if (! isMultisite.value || ! blueprintState.value?.tabs) {
         return false;
     }
 
-    const sections = props.blueprint.tabs.flatMap((tab) => tab.sections ?? []);
+    const sections = blueprintState.value.tabs.flatMap((tab) => tab.sections ?? []);
 
     return sections.length > 0 && ! sections.some((section) => section.reorderable);
 });
@@ -61,23 +63,26 @@ const editSiteGroupsLabel = computed(() => hasOnlyOtherGroup.value ? __('Add Sit
 
 function startEditingGroups() {
     groupsSnapshot.value = deepClone(values.value);
+    blueprintSnapshot.value = deepClone(blueprintState.value);
     editingGroups.value = true;
 }
 
 function stopEditingGroups() {
     editingGroups.value = false;
     groupsSnapshot.value = null;
+    blueprintSnapshot.value = null;
 }
 
 function discardGroupChanges() {
     values.value = deepClone(groupsSnapshot.value);
+    blueprintState.value = deepClone(blueprintSnapshot.value);
     containerKey.value++;
     stopEditingGroups();
 }
 
 function groupNamesFromValues(formValues) {
     return Object.fromEntries(
-        Object.entries(formValues).filter(([key, value]) => /^group_.+_name$/.test(key) && typeof value === 'string'),
+        Object.entries(formValues).filter(([key, value]) => /^group_[A-Za-z0-9_-]+_name$/.test(key) && typeof value === 'string'),
     );
 }
 
@@ -166,12 +171,12 @@ onUnmounted(() => saveKeyBinding.destroy());
         </Header>
 
         <PublishContainer
-            v-if="blueprint"
+            v-if="blueprintState"
             :key="containerKey"
             ref="container"
             name="sites"
             reference="sites"
-            :blueprint
+            :blueprint="blueprintState"
             v-model="values"
             :meta
             :errors
diff --git a/resources/js/tests/util/site-groups.test.js b/resources/js/tests/util/site-groups.test.js
new file mode 100644
index 00000000000..0318f601cc3
--- /dev/null
+++ b/resources/js/tests/util/site-groups.test.js
@@ -0,0 +1,135 @@
+import { beforeEach, describe, expect, test } from 'vitest';
+import {
+    flatOptionsFromSiteGroups,
+    groupItemsBySiteGroup,
+    hasNamedSiteGroups,
+    preferredOriginHandle,
+    selectedSiteGroupLabel,
+    siteGroupKey,
+    UNGROUPED_SITE_GROUP_KEY,
+} from '@/util/site-groups.js';
+
+beforeEach(() => {
+    globalThis.__ = (string) => string;
+    globalThis.Statamic = {
+        $config: {
+            get: () => [
+                { handle: 'en', name: 'English', group: 'UK', group_handle: 'uk' },
+                { handle: 'fr', name: 'French', group: 'UK', group_handle: 'uk' },
+                { handle: 'de', name: 'German', group: 'EU', group_handle: 'eu' },
+                { handle: 'nl', name: 'Dutch' },
+            ],
+        },
+    };
+});
+
+describe('siteGroupKey', () => {
+    test('uses group_handle, then group, then other', () => {
+        expect(siteGroupKey({ group_handle: 'uk', group: 'UK' })).toBe('uk');
+        expect(siteGroupKey({ group: 'UK' })).toBe('UK');
+        expect(siteGroupKey({})).toBe(UNGROUPED_SITE_GROUP_KEY);
+    });
+});
+
+describe('groupItemsBySiteGroup', () => {
+    test('keeps named groups in first-seen order and Other last', () => {
+        const groups = groupItemsBySiteGroup([
+            { handle: 'en', group: 'UK', group_handle: 'uk' },
+            { handle: 'nl' },
+            { handle: 'fr', group: 'UK', group_handle: 'uk' },
+            { handle: 'de', group: 'EU', group_handle: 'eu' },
+        ]);
+
+        expect(groups.map((group) => group.key)).toEqual(['uk', 'eu', UNGROUPED_SITE_GROUP_KEY]);
+        expect(groups[0].items.map((item) => item.handle)).toEqual(['en', 'fr']);
+        expect(groups[2].label).toBe('Other');
+    });
+});
+
+describe('hasNamedSiteGroups', () => {
+    test('detects named groups from items or grouped structure', () => {
+        expect(hasNamedSiteGroups([{ handle: 'nl' }])).toBe(false);
+        expect(hasNamedSiteGroups([{ handle: 'en', group: 'UK' }])).toBe(true);
+        expect(hasNamedSiteGroups(groupItemsBySiteGroup([{ handle: 'en', group: 'UK' }]))).toBe(true);
+    });
+});
+
+describe('flatOptionsFromSiteGroups', () => {
+    test('adds headers and separators for visible groups', () => {
+        const options = flatOptionsFromSiteGroups(groupItemsBySiteGroup([
+            { handle: 'en', name: 'English', group: 'UK', group_handle: 'uk' },
+            { handle: 'de', name: 'German', group: 'EU', group_handle: 'eu' },
+        ]));
+
+        expect(options[0]._groupLabel).toBe('UK');
+        expect(options[0]._showGroupSeparator).toBe(false);
+        expect(options[1]._groupLabel).toBe('EU');
+        expect(options[1]._showGroupSeparator).toBe(true);
+    });
+
+    test('can filter items while regrouping headers', () => {
+        const options = flatOptionsFromSiteGroups(groupItemsBySiteGroup([
+            { handle: 'en', name: 'English', group: 'UK', group_handle: 'uk' },
+            { handle: 'fr', name: 'French', group: 'UK', group_handle: 'uk' },
+            { handle: 'de', name: 'German', group: 'EU', group_handle: 'eu' },
+        ]), {
+            filterItems: (items) => items.filter((item) => item.handle !== 'en'),
+        });
+
+        expect(options.map((option) => option.handle)).toEqual(['fr', 'de']);
+        expect(options[0]._groupLabel).toBe('UK');
+        expect(options[1]._groupLabel).toBe('EU');
+    });
+});
+
+describe('selectedSiteGroupLabel', () => {
+    test('returns group name, Other, or null', () => {
+        expect(selectedSiteGroupLabel({ group: 'UK' }, true)).toBe('UK');
+        expect(selectedSiteGroupLabel({}, true)).toBe('Other');
+        expect(selectedSiteGroupLabel({}, false)).toBeNull();
+    });
+});
+
+describe('preferredOriginHandle', () => {
+    test('prefers an existing site in the target group', () => {
+        const localizations = [
+            { handle: 'en', exists: true, root: true, group: 'UK', group_handle: 'uk' },
+            { handle: 'fr', exists: true, group: 'UK', group_handle: 'uk', origin_handle: 'en' },
+            { handle: 'de', exists: false, group: 'EU', group_handle: 'eu' },
+        ];
+
+        expect(preferredOriginHandle(localizations, localizations[2])).toBe('en');
+    });
+
+    test('follows a former group origin that moved outside the group', () => {
+        const localizations = [
+            { handle: 'en', exists: true, root: true, group: 'UK', group_handle: 'uk' },
+            { handle: 'fr', exists: true, group: 'EU', group_handle: 'eu', origin_handle: 'en' },
+            { handle: 'de', exists: true, group: 'EU', group_handle: 'eu', origin_handle: 'fr' },
+        ];
+
+        // Creating another EU site should still prefer fr's origin (en) once fr left... 
+        // Actually: fr is IN eu with origin en outside. de is in eu with origin fr.
+        // preferred for a new EU target should find sameGroup [fr, de], groupOriginHandle.
+        expect(preferredOriginHandle(localizations, {
+            handle: 'nl',
+            exists: false,
+            group: 'EU',
+            group_handle: 'eu',
+        })).toBe('fr');
+    });
+
+    test('falls back to root when the target group has no existing sites', () => {
+        const localizations = [
+            { handle: 'en', exists: true, root: true, group: 'UK', group_handle: 'uk' },
+            { handle: 'fr', exists: true, group: 'UK', group_handle: 'uk', origin_handle: 'en' },
+            { handle: 'de', exists: false, group: 'EU', group_handle: 'eu' },
+        ];
+
+        expect(preferredOriginHandle(localizations, localizations[2], 'root')).toBe('en');
+    });
+
+    test('returns null when nothing exists yet', () => {
+        expect(preferredOriginHandle([{ handle: 'en', exists: false }], { handle: 'fr' })).toBeNull();
+    });
+});
diff --git a/src/Fieldtypes/Sites.php b/src/Fieldtypes/Sites.php
index 2b13425a2c5..43ec32e6070 100644
--- a/src/Fieldtypes/Sites.php
+++ b/src/Fieldtypes/Sites.php
@@ -30,8 +30,15 @@ public function toItemArray($id)
 
     public function getIndexItems($request)
     {
-        return Site::all()
-            ->filter(fn ($site) => User::current()->can('view', $site))
+        $sites = Site::all()
+            ->filter(fn ($site) => User::current()->can('view', $site));
+
+        // Preserve sites.yaml order when groups exist; otherwise keep the old A–Z sort.
+        if (! $sites->contains(fn ($site) => $site->group())) {
+            $sites = $sites->sortBy->name();
+        }
+
+        return $sites
             ->map(function ($site) {
                 return [
                     'id' => $site->handle(),
diff --git a/src/Http/Controllers/CP/Sites/SitesController.php b/src/Http/Controllers/CP/Sites/SitesController.php
index 50bd8e68afd..ff666a10c65 100644
--- a/src/Http/Controllers/CP/Sites/SitesController.php
+++ b/src/Http/Controllers/CP/Sites/SitesController.php
@@ -76,21 +76,21 @@ private function valuesInRequestOrder(array $request, array $values): array
 
     private function isGroupNameKey(string $key): bool
     {
-        return (bool) preg_match('/^group_.+_name$/', $key);
+        return (bool) preg_match('/^group_[A-Za-z0-9_-]+_name$/', $key);
     }
 
     private function emptySitesError(array $request): array
     {
         $keys = collect($request)
             ->keys()
-            ->filter(fn ($key) => is_string($key) && preg_match('/^group_.+_sites$/', $key));
+            ->filter(fn ($key) => is_string($key) && preg_match('/^group_[A-Za-z0-9_-]+_sites$/', $key));
 
         if ($keys->isEmpty()) {
             $keys = collect(['group_other_sites']);
         }
 
         return $keys
-            ->mapWithKeys(fn ($key) => [$key => [__('This field is required.')]])
+            ->mapWithKeys(fn ($key) => [$key => [__('statamic::validation.required')]])
             ->all();
     }
 
@@ -99,7 +99,7 @@ private function uniqueHandleRules(array $values): array
         $handles = collect();
 
         foreach ($values as $key => $sites) {
-            if (! is_array($sites) || ! preg_match('/^group_.+_sites$/', $key)) {
+            if (! is_array($sites) || ! preg_match('/^group_[A-Za-z0-9_-]+_sites$/', $key)) {
                 continue;
             }
 
diff --git a/src/Sites/Site.php b/src/Sites/Site.php
index 2f1af8038cb..45992f195da 100644
--- a/src/Sites/Site.php
+++ b/src/Sites/Site.php
@@ -169,6 +169,7 @@ public function augmentedArrayData()
             'permalink' => $this->absoluteUrl(),
             'direction' => $this->direction(),
             'group' => $this->group(),
+            'group_handle' => $this->groupHandle(),
             'attributes' => $this->attributes(),
         ];
     }
diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index 81ac58c0f89..730de0f78d8 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -60,11 +60,25 @@ public function hasMultiple()
 
     public function filterByGroup($handles, ?string $siteHandle)
     {
-        if (! $siteHandle || ! ($site = $this->get($siteHandle)) || ! ($group = $site->group())) {
+        if (! $siteHandle || ! ($site = $this->get($siteHandle))) {
             return collect($handles);
         }
 
-        return collect($handles)->filter(fn ($handle) => $this->get($handle)?->group() === $group);
+        $groupKey = $site->groupHandle() ?? $site->group();
+
+        if (! $groupKey) {
+            return collect($handles);
+        }
+
+        return collect($handles)->filter(function ($handle) use ($groupKey) {
+            $other = $this->get($handle);
+
+            if (! $other) {
+                return false;
+            }
+
+            return ($other->groupHandle() ?? $other->group()) === $groupKey;
+        });
     }
 
     public function get($handle)
@@ -241,7 +255,7 @@ public function configFromBlueprintValues(array $values): array
         $sites = collect();
 
         foreach ($values as $key => $groupSites) {
-            if (! is_array($groupSites) || ! preg_match('/^group_(.+)_sites$/', $key, $matches)) {
+            if (! is_array($groupSites) || ! preg_match('/^group_([A-Za-z0-9_-]+)_sites$/', $key, $matches)) {
                 continue;
             }
 
diff --git a/tests/Sites/SiteTest.php b/tests/Sites/SiteTest.php
index 59003dcd013..cfa1d50b95c 100644
--- a/tests/Sites/SiteTest.php
+++ b/tests/Sites/SiteTest.php
@@ -281,6 +281,21 @@ public function gets_path()
         });
     }
 
+    #[Test]
+    public function it_augments_group_and_group_handle()
+    {
+        $site = new Site('en', [
+            'name' => 'English',
+            'group' => 'London',
+            'group_handle' => 'london',
+        ]);
+
+        $values = $site->augmented()->all()->map->value()->all();
+
+        $this->assertEquals('London', $values['group']);
+        $this->assertEquals('london', $values['group_handle']);
+    }
+
     #[Test]
     public function it_is_augmentable()
     {
diff --git a/tests/Sites/SitesTest.php b/tests/Sites/SitesTest.php
index 63cb2f84d4a..91712141ec4 100644
--- a/tests/Sites/SitesTest.php
+++ b/tests/Sites/SitesTest.php
@@ -72,6 +72,15 @@ public function filters_handles_by_group()
         $this->assertEquals(['de'], $this->sites->filterByGroup($handles, 'de')->values()->all());
         $this->assertEquals(['en', 'fr', 'de', 'nl'], $this->sites->filterByGroup($handles, 'nl')->values()->all());
         $this->assertEquals(['en', 'fr', 'de', 'nl'], $this->sites->filterByGroup($handles, null)->values()->all());
+
+        $this->sites->setSites([
+            'en' => ['url' => '/', 'group' => 'London', 'group_handle' => 'london'],
+            'fr' => ['url' => '/fr', 'group' => 'London', 'group_handle' => 'paris'],
+            'de' => ['url' => '/de', 'group' => 'London', 'group_handle' => 'london'],
+        ]);
+
+        $this->assertEquals(['en', 'de'], $this->sites->filterByGroup(['en', 'fr', 'de'], 'en')->values()->all());
+        $this->assertEquals(['fr'], $this->sites->filterByGroup(['en', 'fr', 'de'], 'fr')->values()->all());
     }
 
     #[Test]