From f53e09339012640745a76292ab05574e5dfc55ad Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 14 Mar 2023 14:14:10 -0400
Subject: [PATCH 01/40] Style them sections

---
 resources/js/components/publish/Sections.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/publish/Sections.vue b/resources/js/components/publish/Sections.vue
index bc8ec10fd65..896e0e15c28 100644
--- a/resources/js/components/publish/Sections.vue
+++ b/resources/js/components/publish/Sections.vue
@@ -1,11 +1,10 @@
 <template>
-
-    <div class="publish-sections">
+    <div class="publish-sections flex flex-col space-y-7">
         <div class="mb-5" v-for="(section, i) in sections" :key="i">
-            <div class="card p-0 mb-5">
-                <div class="p-5 border-b border-gray-400" v-if="section.display">
-                    <label v-text="section.display" class="text-lg font-bold" />
-                    <div class="help-block" v-if="section.instructions"><p v-html="section.instructions" /></div>
+            <div class="card p-0">
+                <div class="px-5 pt-4 pb-3 border-b border-gray-400" v-if="section.display">
+                    <label v-text="section.display" class="text-base font-semibold" />
+                    <div class="help-block" v-if="section.instructions"><p v-html="$options.filters.markdown(section.instructions)" /></div>
                 </div>
                 <publish-fields
                     :fields="section.fields"
@@ -22,7 +21,6 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <script>

From d247551d377668540cfb751be20fd3ac0937c378 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 14 Mar 2023 15:33:46 -0400
Subject: [PATCH 02/40] wip new tabs

---
 resources/css/components/tabs.css             | 81 +++++++------------
 resources/js/components/blueprints/Tab.vue    | 23 ++++--
 .../js/components/blueprints/TabContent.vue   | 12 +--
 resources/js/components/blueprints/Tabs.vue   | 38 +++++----
 resources/js/components/publish/Tabs.vue      |  8 +-
 5 files changed, 72 insertions(+), 90 deletions(-)

diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index b7bdf38b74c..917d0be7e16 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -2,13 +2,12 @@
    TABS
    ========================================================================== */
 
-
 .tabs-container {
-    @apply relative mb-5;
+    @apply w-full border-b text-md relative flex;
 
-    &.offset-for-sidebar {
+    /* &.offset-for-sidebar {
         width: calc(100% - 320px);
-    }
+    } */
 
    .fade-left, .fade-right {
         @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
@@ -24,70 +23,48 @@
 }
 
 .tabs {
-    @apply flex items-end overflow-hidden px-2 -ml-2;
-    height: 48px;
-
-    &-scrolled {
-        @apply pl-0 ml-0;
-    }
-
-    .tab-button {
-        @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none;
-        height: 94%;
-        min-height: 94%;
-    }
-
-    .tab-button:hover {
-        @apply bg-white;
-    }
-    .tab-button:active {
-        @apply bg-white text-blue;
-    }
+    @apply flex space-x-3 overflow-auto relative;
+}
 
-    .tab-button:focus {
-        @apply bg-white text-blue border-b-0 ring-1 ring-inset;
-    }
 
-    .tab-button.active {
-        @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
-        z-index: 1;
-    }
+/* .tabs { */
+    /* @apply flex items-end overflow-hidden px-2 -ml-2; */
+    /* @apply flex flex-wrap space-x-3; */
+    /* height: 48px; */
 
-    .tab-button:focus {
-        @apply border-t;
-    }
+    /* &-scrolled {
+        @apply pl-0 ml-0;
+    } */
 
-    .tab-button.ghost {
-        @apply bg-transparent relative h-full min-h-full shadow-none border-none text-gray-500 px-6;
-        min-width: 0;
+    .tab-button {
+        @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+        /* @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none; */
+        /* height: 94%; */
+        /* min-height: 94%; */
         &:hover {
-            @apply text-blue;
+            @apply text-gray-800;
         }
-    }
-
-    .tab-button.has-error {
-        @apply text-red-500;
-
         &.active {
-            box-shadow: theme('colors.red.400') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
+            @apply text-blue-500 border-blue-500;
         }
-    }
-}
-
+        &.has-error {
+            @apply text-red-500;
 
-@screen md {
-    .tabs .tab-button {
-        min-width: 120px;
+            &.active {
+                box-shadow: theme('colors.red.400') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
+            }
+        }
     }
-}
+
+/* } */
 
 
 /* Responsive Wangjangling
   ========================================================================== */
 
-@screen md {
+/* @screen md {
     .tabs .tab-button { @apply text-base; }
-}
+} */
 
 .pill-tab {
     @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 3880d074ece..5859576c982 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -1,16 +1,20 @@
 <template>
 
-    <div
-        class="blueprint-tab card px-5 py-2 mr-2 cursor-pointer flex"
-        :class="{ 'bg-blue-100': currentTab === tab._id }"
+    <button
+        class="tab-button"
+        role="tab"
+        :class="{ 'active': isActive }"
+        :aria-selected="isActive"
+        :aria-controls="`tab-section-${tab._id}`"
+        :id="`tab-${tab._id}`"
         @click="$emit('selected')"
         @mouseenter="$emit('mouseenter')"
     >
         {{ tab.display }}
-        <div @click="$emit('removed')">
-            <svg-icon name="delete-x" class="w-2 h-2 ml-2 text-gray-600 hover:text-gray-800" />
-        </div>
-    </div>
+        <a class="ml-1 cursor-pointer" @click="$emit('removed')" v-if="isActive">
+            <span class="-mr-2 text-gray-600 hover:text-gray-800">&times;</span>
+        </a>
+    </button>
 
 </template>
 
@@ -26,6 +30,11 @@ export default {
             type: String,
             required: true,
         },
+    },
+    computed: {
+        isActive() {
+            return this.currentTab === this.tab._id;
+        },
     }
 
 }
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index 8c785d0e375..1d9ed1a4022 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -1,23 +1,21 @@
 <template>
-
-
-    <div>
+    <div
+        role="tabpanel"
+        :aria-labelledby="`tab-${tab._id}`"
+        :id="`tab-section-${tab._id}`">
         <input type="text"
             :value="tab.display"
             @input="fieldUpdated('display', $event.target.value)"
             class="input-text" />
-
         <input type="text"
             :value="tab.handle"
             @input="fieldUpdated('handle', $event.target.value)"
             class="input-text font-mono text-sm" />
-
         <input type="text"
             :value="tab.instructions"
             @input="fieldUpdated('instructions', $event.target.value)"
             class="input-text text-sm"
             v-if="showInstructions" />
-
         <sections
             ref="sections"
             :tab-id="tab._id"
@@ -27,9 +25,7 @@
             :show-section-handle-field="showSectionHandleField"
             @updated="sectionsUpdated($event)"
         />
-
     </div>
-
 </template>
 
 <script>
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 03c1f784ab6..7ace60c33b9 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -1,20 +1,22 @@
 <template>
-
     <div>
-
-        <div ref="tabs" class="mb-5 flex">
-            <tab
-                v-for="tab in tabs"
-                :key="tab._id"
-                :tab="tab"
-                :current-tab="currentTab"
-                @selected="selectTab(tab._id)"
-                @removed="removeTab(tab._id)"
-                @mouseenter="mouseEnteredTab(tab._id)"
-            />
-            <div v-if="!singleTab" class="card px-5 py-2 cursor-pointer" @click="addTab" v-text="addTabText" />
+        <div class="tabs-container mb-5">
+            <div ref="tabs" class="tabs flex-1
+            flex space-x-3 overflow-auto" role="tablist">
+                <tab
+                    v-for="tab in tabs"
+                    :key="tab._id"
+                    :tab="tab"
+                    :current-tab="currentTab"
+                    @selected="selectTab(tab._id)"
+                    @removed="removeTab(tab._id)"
+                    @mouseenter="mouseEnteredTab(tab._id)"
+                />
+                <div class="fade-left" v-if="canScrollLeft" />
+                <div class="fade-right" :class="{ 'mr-8': showHiddenTabsDropdown }" v-if="canScrollRight" />
+            </div>
+            <button v-if="!singleTab" class="tab-button" @click="addTab" v-text="addTabText" />
         </div>
-
         <tab-content
             v-for="tab in tabs"
             ref="tabContent"
@@ -27,9 +29,7 @@
             :add-section-text="addSectionText"
             @updated="updateTab(tab._id, $event)"
         />
-
     </div>
-
 </template>
 
 <script>
@@ -88,7 +88,11 @@ export default {
         return {
             tabs: this.initialTabs,
             currentTab: this.initialTabs.length ? this.initialTabs[0]._id : null,
-            lastInteractedTab: null
+            lastInteractedTab: null,
+            hiddenTabs: [],
+            tabsAreScrolled: false,
+            canScrollLeft: false,
+            canScrollRight: false,
         }
     },
 
diff --git a/resources/js/components/publish/Tabs.vue b/resources/js/components/publish/Tabs.vue
index 06f595b7ff8..9523684a679 100644
--- a/resources/js/components/publish/Tabs.vue
+++ b/resources/js/components/publish/Tabs.vue
@@ -4,13 +4,9 @@
     <div>
 
         <!-- Tabs -->
-        <div
-            v-if="showTabs"
-            class="tabs-container flex items-center"
-            :class="{ 'offset-for-sidebar': shouldShowSidebar }"
-        >
+        <div v-if="showTabs" class="flex items-center mb-6">
             <div
-                class="publish-tabs tabs shrink"
+                class="tabs-container"
                 :class="{ 'tabs-scrolled': canScrollLeft }"
                 ref="tabs"
                 role="tablist"

From 7a84cce26b9c893528cea0057068f22217f6d7c6 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 15 Mar 2023 09:06:01 -0400
Subject: [PATCH 03/40] Get publish tabs working w/ new styles

---
 resources/css/components/tabs.css             |  2 +-
 resources/js/components/blueprints/Tab.vue    | 14 ++++++++++++--
 .../js/components/blueprints/TabContent.vue   | 19 +++++++++++++++++--
 resources/js/components/publish/Tabs.vue      |  6 +++---
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 917d0be7e16..b398bfe1b3a 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -23,7 +23,7 @@
 }
 
 .tabs {
-    @apply flex space-x-3 overflow-auto relative;
+    @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
 }
 
 
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 5859576c982..bc46fff8ec6 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -4,9 +4,10 @@
         class="tab-button"
         role="tab"
         :class="{ 'active': isActive }"
-        :aria-selected="isActive"
         :aria-controls="`tab-section-${tab._id}`"
-        :id="`tab-${tab._id}`"
+        :aria-selected="isActive"
+        :id="tabId"
+        :tabindex="isActive ? 0 : -1"
         @click="$emit('selected')"
         @mouseenter="$emit('mouseenter')"
     >
@@ -35,6 +36,15 @@ export default {
         isActive() {
             return this.currentTab === this.tab._id;
         },
+        tabId() {
+            return `${this.pascalCase(this.tab.handle)}Tab`;
+        },
+        pascalCase(handle) {
+            return handle
+                .split('_')
+                .map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
+                .join('');
+        },
     }
 
 }
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index 1d9ed1a4022..f80307e49ea 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -1,8 +1,8 @@
 <template>
     <div
         role="tabpanel"
-        :aria-labelledby="`tab-${tab._id}`"
-        :id="`tab-section-${tab._id}`">
+        :aria-labelledby="tabPanelId"
+        :id="tabPanelId">
         <input type="text"
             :value="tab.display"
             @input="fieldUpdated('display', $event.target.value)"
@@ -63,6 +63,21 @@ export default {
         }
     },
 
+    computed: {
+        tabId() {
+            return `${this.pascalCase(this.tab.handle)}Tab`;
+        },
+        tabPanelId() {
+            return `${this.pascalCase(this.tab.handle)}TabPanel`;
+        },
+        pascalCase(handle) {
+            return handle
+                .split('_')
+                .map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
+                .join('');
+        },
+    },
+
     created() {
         // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
         // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
diff --git a/resources/js/components/publish/Tabs.vue b/resources/js/components/publish/Tabs.vue
index 9523684a679..47b6dfe4e4b 100644
--- a/resources/js/components/publish/Tabs.vue
+++ b/resources/js/components/publish/Tabs.vue
@@ -4,9 +4,9 @@
     <div>
 
         <!-- Tabs -->
-        <div v-if="showTabs" class="flex items-center mb-6">
+        <div v-if="showTabs" class="tabs-container flex items-center mb-6">
             <div
-                class="tabs-container"
+                class="publish-tabs tabs"
                 :class="{ 'tabs-scrolled': canScrollLeft }"
                 ref="tabs"
                 role="tablist"
@@ -37,10 +37,10 @@
                     v-text="tab.display || `${tab.handle[0].toUpperCase()}${tab.handle.slice(1)}`"
                 />
             </div>
-
             <div class="fade-left" v-if="canScrollLeft" />
             <div class="fade-right" :class="{ 'mr-8': showHiddenTabsDropdown }" v-if="canScrollRight" />
 
+
             <dropdown-list class="ml-2" v-cloak v-if="showHiddenTabsDropdown">
                 <dropdown-item
                     v-for="(tab, index) in mainTabs"

From cd186d301375cd0d12f13a310a5e2e1414dff3d7 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 15 Mar 2023 09:11:22 -0400
Subject: [PATCH 04/40] Cleanup css and style tab focus-visible state

---
 resources/css/components/tabs.css | 45 +++++++++++++------------------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index b398bfe1b3a..35869e317e3 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -24,39 +24,30 @@
 
 .tabs {
     @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
+    &-scrolled {
+        @apply pl-0 ml-0;
+    }
 }
 
+.tab-button {
+    @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
+    &:hover {
+        @apply text-gray-800;
+    }
+    &:focus-visible {
+        @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t;
+    }
+    &.active {
+        @apply text-blue-500 border-blue-500;
+    }
+    &.has-error {
+        @apply text-red-500;
 
-/* .tabs { */
-    /* @apply flex items-end overflow-hidden px-2 -ml-2; */
-    /* @apply flex flex-wrap space-x-3; */
-    /* height: 48px; */
-
-    /* &-scrolled {
-        @apply pl-0 ml-0;
-    } */
-
-    .tab-button {
-        @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0;
-        /* @apply whitespace-nowrap bg-gray-100 py-1 px-4 shrink-0 leading-tight text-xs w-auto relative flex items-center justify-center rounded-t-md shadow border-b border-gray-300 select-none; */
-        /* height: 94%; */
-        /* min-height: 94%; */
-        &:hover {
-            @apply text-gray-800;
-        }
         &.active {
-            @apply text-blue-500 border-blue-500;
-        }
-        &.has-error {
-            @apply text-red-500;
-
-            &.active {
-                box-shadow: theme('colors.red.400') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
-            }
+            box-shadow: theme('colors.red.400') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
         }
     }
-
-/* } */
+}
 
 
 /* Responsive Wangjangling

From cbc63e0a9eb3af9d7b25865569464d4c0c6d2f2a Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Wed, 15 Mar 2023 09:13:51 -0400
Subject: [PATCH 05/40] Style Live Preview tabs

---
 resources/css/components/preview.css | 10 ----------
 resources/css/components/tabs.css    |  4 ----
 2 files changed, 14 deletions(-)

diff --git a/resources/css/components/preview.css b/resources/css/components/preview.css
index 6c9f3cf4a1f..e76a0ee5597 100644
--- a/resources/css/components/preview.css
+++ b/resources/css/components/preview.css
@@ -25,16 +25,6 @@
     z-index: 1;
 }
 
-.live-preview .publish-tabs {
-    @apply bg-gray-300 ml-0 pl-0;
-    .tab-button {
-        border-radius: 0;
-        height: 100%;
-        min-width: 100px;
-        border: none;
-    }
-}
-
 .live-preview .tabs-container {
     @apply bg-gray-300;
 }
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 35869e317e3..c1e0fad898f 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -53,10 +53,6 @@
 /* Responsive Wangjangling
   ========================================================================== */
 
-/* @screen md {
-    .tabs .tab-button { @apply text-base; }
-} */
-
 .pill-tab {
     @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
 

From 28bcbdba7b64022930c9b732a567bbadadd76b74 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Mar 2023 11:03:57 -0400
Subject: [PATCH 06/40] fix ids and a11y links between tabs and panels

---
 resources/js/components/blueprints/Tab.vue    | 13 ++-----------
 .../js/components/blueprints/TabContent.vue   | 19 ++-----------------
 2 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index bc46fff8ec6..ac01c650638 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -4,9 +4,9 @@
         class="tab-button"
         role="tab"
         :class="{ 'active': isActive }"
-        :aria-controls="`tab-section-${tab._id}`"
+        :aria-controls="`tab-panel-${tab._id}`"
         :aria-selected="isActive"
-        :id="tabId"
+        :id="`tab-${tab._id}`"
         :tabindex="isActive ? 0 : -1"
         @click="$emit('selected')"
         @mouseenter="$emit('mouseenter')"
@@ -36,15 +36,6 @@ export default {
         isActive() {
             return this.currentTab === this.tab._id;
         },
-        tabId() {
-            return `${this.pascalCase(this.tab.handle)}Tab`;
-        },
-        pascalCase(handle) {
-            return handle
-                .split('_')
-                .map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
-                .join('');
-        },
     }
 
 }
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index f80307e49ea..c7be784618f 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -1,8 +1,8 @@
 <template>
     <div
         role="tabpanel"
-        :aria-labelledby="tabPanelId"
-        :id="tabPanelId">
+        :aria-labelledby="`tab-${tab._id}`"
+        :id="`tab-panel-${tab._id}`">
         <input type="text"
             :value="tab.display"
             @input="fieldUpdated('display', $event.target.value)"
@@ -63,21 +63,6 @@ export default {
         }
     },
 
-    computed: {
-        tabId() {
-            return `${this.pascalCase(this.tab.handle)}Tab`;
-        },
-        tabPanelId() {
-            return `${this.pascalCase(this.tab.handle)}TabPanel`;
-        },
-        pascalCase(handle) {
-            return handle
-                .split('_')
-                .map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
-                .join('');
-        },
-    },
-
     created() {
         // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
         // to deal with stripping it out and making it not new, etc. Good enough for a quick win.

From 08e6ce16c377b2f16b092980dc16a06ba7de3ce3 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Mar 2023 11:07:00 -0400
Subject: [PATCH 07/40] bring back class so dragging works again

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

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index ac01c650638..b8fd3763e81 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -1,7 +1,7 @@
 <template>
 
     <button
-        class="tab-button"
+        class="blueprint-tab tab-button"
         role="tab"
         :class="{ 'active': isActive }"
         :aria-controls="`tab-panel-${tab._id}`"

From 440c7cf1e207cc412d074d1f901d523781c20078 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Mar 2023 11:14:06 -0400
Subject: [PATCH 08/40] full width

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

diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index f5081c6afdd..781b5ab662e 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -20,7 +20,7 @@
                 @deleted="deleteSection(i)"
             />
 
-            <div class="blueprint-add-section-container w-full md:w-1/2">
+            <div class="blueprint-add-section-container w-full">
                 <button class="blueprint-add-section-button outline-none" @click="addSection">
                     <div class="text-center flex items-center leading-none">
                         <div class="text-2xl mr-1">+</div>

From 90fd2aa5ef9c136ac13ec56c4b5868a0d128bb40 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Mar 2023 12:00:26 -0400
Subject: [PATCH 09/40] dont be shy

---
 resources/css/components/tabs.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index c1e0fad898f..f8c2ba37553 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -5,10 +5,6 @@
 .tabs-container {
     @apply w-full border-b text-md relative flex;
 
-    /* &.offset-for-sidebar {
-        width: calc(100% - 320px);
-    } */
-
    .fade-left, .fade-right {
         @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-10;
     }

From 018f97fb7289af7bc0e18ba6767448b46e3357eb Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Mar 2023 17:07:02 -0400
Subject: [PATCH 10/40] move tab fields into modal.

---
 resources/js/components/blueprints/Tab.vue    | 104 +++++++++++++++++-
 .../js/components/blueprints/TabContent.vue   |  45 --------
 resources/js/components/blueprints/Tabs.vue   |  11 +-
 3 files changed, 110 insertions(+), 50 deletions(-)

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index b8fd3763e81..cd03d4da0bd 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -12,9 +12,42 @@
         @mouseenter="$emit('mouseenter')"
     >
         {{ tab.display }}
-        <a class="ml-1 cursor-pointer" @click="$emit('removed')" v-if="isActive">
-            <span class="-mr-2 text-gray-600 hover:text-gray-800">&times;</span>
-        </a>
+
+        <dropdown-list v-if="isActive" ref="dropdown" scroll class="text-left">
+            <dropdown-item @click="edit" v-text="__('Edit')" />
+            <dropdown-item @click="remove" class="warning" v-text="__('Delete')" />
+        </dropdown-list>
+
+        <confirmation-modal
+            v-if="editing"
+            :title="__('Edit')"
+            @confirm="editConfirmed"
+            @cancel="editCancelled"
+        >
+            <div class="publish-fields @container">
+                <div class="form-group w-full">
+                    <label v-text="__('Title')" />
+                    <input ref="title" type="text"
+                        :value="display"
+                        @input="fieldUpdated('display', $event.target.value)"
+                        class="input-text" />
+                </div>
+                <div class="form-group w-full">
+                    <label v-text="__('Handle')" />
+                    <input type="text"
+                        :value="handle"
+                        @input="fieldUpdated('handle', $event.target.value)"
+                        class="input-text font-mono text-sm" />
+                </div>
+                <div class="form-group w-full" v-if="showInstructions">
+                    <label v-text="__('Instructions')" />
+                    <input type="text"
+                        :value="instructions"
+                        @input="fieldUpdated('instructions', $event.target.value)"
+                        class="input-text text-sm" />
+                </div>
+            </div>
+        </confirmation-modal>
     </button>
 
 </template>
@@ -31,11 +64,76 @@ export default {
             type: String,
             required: true,
         },
+        showInstructions: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    data() {
+        return {
+            handle: this.tab.handle,
+            display: this.tab.display,
+            instructions: this.tab.instructions,
+            editing: false,
+            handleSyncedWithDisplay: false,
+        }
+    },
+
+    created() {
+        // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
+        // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
+        if (!this.handle || this.handle == 'new_tab' || this.handle == 'new_set_group') {
+            this.handleSyncedWithDisplay = true;
+        }
     },
+
     computed: {
+
         isActive() {
             return this.currentTab === this.tab._id;
         },
+
+    },
+
+    methods: {
+
+        edit() {
+            this.editing = true;
+            setTimeout(() => this.$refs.title.focus(), 100); // better as an @opened event on the modal
+        },
+
+        editConfirmed() {
+            this.$emit('updated', {
+                ...this.tab,
+                handle: this.handle,
+                display: this.display,
+            });
+            this.editing = false;
+        },
+
+        editCancelled() {
+            this.editing = false;
+            this.handle = this.tab.handle;
+            this.display = this.tab.display;
+        },
+
+        fieldUpdated(handle, value) {
+            if (handle === 'display' && this.handleSyncedWithDisplay) {
+                this.handle = this.$slugify(value, '_');
+            }
+
+            if (handle === 'handle') {
+                this.handleSyncedWithDisplay = false;
+            }
+
+            this[handle] = value;
+        },
+
+        remove() {
+            this.$emit('removed');
+        }
+
     }
 
 }
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index c7be784618f..68125f57568 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -3,19 +3,6 @@
         role="tabpanel"
         :aria-labelledby="`tab-${tab._id}`"
         :id="`tab-panel-${tab._id}`">
-        <input type="text"
-            :value="tab.display"
-            @input="fieldUpdated('display', $event.target.value)"
-            class="input-text" />
-        <input type="text"
-            :value="tab.handle"
-            @input="fieldUpdated('handle', $event.target.value)"
-            class="input-text font-mono text-sm" />
-        <input type="text"
-            :value="tab.instructions"
-            @input="fieldUpdated('instructions', $event.target.value)"
-            class="input-text text-sm"
-            v-if="showInstructions" />
         <sections
             ref="sections"
             :tab-id="tab._id"
@@ -41,10 +28,6 @@ export default {
         tab: {
             type: Object,
         },
-        showInstructions: {
-            type: Boolean,
-            default: false,
-        },
         showSectionHandleField: {
             type: Boolean,
             default: false,
@@ -57,20 +40,6 @@ export default {
         },
     },
 
-    data() {
-        return {
-            handleSyncedWithDisplay: false,
-        }
-    },
-
-    created() {
-        // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
-        // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
-        if (!this.tab.handle || this.tab.handle == 'new_tab' || this.tab.handle == 'new_set_group') {
-            this.handleSyncedWithDisplay = true;
-        }
-    },
-
     methods: {
 
         addSection() {
@@ -82,20 +51,6 @@ export default {
             this.$emit('updated', tab);
         },
 
-        fieldUpdated(handle, value) {
-            let tab = {...this.tab, ...{ [handle]: value }};
-
-            if (handle === 'display' && this.handleSyncedWithDisplay) {
-                tab.handle = this.$slugify(value, '_');
-            }
-
-            if (handle === 'handle') {
-                this.handleSyncedWithDisplay = false;
-            }
-
-            this.$emit('updated', tab);
-        }
-
     }
 
 }
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 7ace60c33b9..bd9dbda6c36 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -4,18 +4,21 @@
             <div ref="tabs" class="tabs flex-1
             flex space-x-3 overflow-auto" role="tablist">
                 <tab
+                    ref="tab"
                     v-for="tab in tabs"
                     :key="tab._id"
                     :tab="tab"
                     :current-tab="currentTab"
+                    :show-instructions="showTabInstructionsField"
                     @selected="selectTab(tab._id)"
                     @removed="removeTab(tab._id)"
+                    @updated="updateTab(tab._id, $event)"
                     @mouseenter="mouseEnteredTab(tab._id)"
                 />
                 <div class="fade-left" v-if="canScrollLeft" />
                 <div class="fade-right" :class="{ 'mr-8': showHiddenTabsDropdown }" v-if="canScrollRight" />
             </div>
-            <button v-if="!singleTab" class="tab-button" @click="addTab" v-text="addTabText" />
+            <button v-if="!singleTab" class="tab-button" @click="addAndEditTab" v-text="addTabText" />
         </div>
         <tab-content
             v-for="tab in tabs"
@@ -23,7 +26,6 @@
             :key="tab._id"
             :tab="tab"
             v-show="currentTab === tab._id"
-            :show-instructions="showTabInstructionsField"
             :show-section-handle-field="showSectionHandleField"
             :new-section-text="newSectionText"
             :add-section-text="addSectionText"
@@ -264,6 +266,11 @@ export default {
             this.$nextTick(() => this.$refs.tabContent.find(vm => vm.tab._id === id).addSection());
         },
 
+        addAndEditTab() {
+            this.addTab();
+            this.$nextTick(() => this.$refs.tab.find(vm => vm.tab._id === this.currentTab).edit());
+        },
+
         removeTab(tabId) {
             this.tabs = this.tabs.filter(tab => tab._id !== tabId);
 

From 8d4c062b72515d40c6c24116ffded78aab786ade Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Fri, 17 Mar 2023 09:40:03 -0400
Subject: [PATCH 11/40] Fix blueprint form tab fade and tweak modal styles
 slightly

---
 resources/css/components/modal.css                   |  4 ++++
 resources/js/components/blueprints/Tab.vue           |  2 +-
 resources/js/components/blueprints/Tabs.vue          | 10 ++++++----
 resources/js/components/modals/ConfirmationModal.vue |  8 ++++----
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/resources/css/components/modal.css b/resources/css/components/modal.css
index c7dcf491ec6..c15e2d5611f 100644
--- a/resources/css/components/modal.css
+++ b/resources/css/components/modal.css
@@ -2,6 +2,10 @@
    MODALS
    ========================================================================== */
 
+.v--modal {
+    @apply rounded-lg !important;
+}
+
 .v--modal-overlay {
     z-index: 10000 !important;
     background: hsla(210, 20%, 10%, .15) !important;
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index cd03d4da0bd..4791d0f00cd 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -20,7 +20,7 @@
 
         <confirmation-modal
             v-if="editing"
-            :title="__('Edit')"
+            :title="__('Edit Tab')"
             @confirm="editConfirmed"
             @cancel="editCancelled"
         >
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index bd9dbda6c36..81fc1445b09 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <div class="tabs-container mb-5">
+        <div class="tabs-container mb-5 relative">
             <div ref="tabs" class="tabs flex-1
-            flex space-x-3 overflow-auto" role="tablist">
+            flex space-x-3 overflow-auto pr-6" role="tablist">
                 <tab
                     ref="tab"
                     v-for="tab in tabs"
@@ -16,9 +16,11 @@
                     @mouseenter="mouseEnteredTab(tab._id)"
                 />
                 <div class="fade-left" v-if="canScrollLeft" />
-                <div class="fade-right" :class="{ 'mr-8': showHiddenTabsDropdown }" v-if="canScrollRight" />
             </div>
-            <button v-if="!singleTab" class="tab-button" @click="addAndEditTab" v-text="addTabText" />
+            <div class="fade-right right-10" />
+            <button v-if="!singleTab" class="btn-round ml-2 flex items-center justify-center relative top-1" @click="addAndEditTab" v-tooltip="addTabText">
+                <svg-icon name="add-bold" class="w-3 h-3" />
+            </button>
         </div>
         <tab-content
             v-for="tab in tabs"
diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/modals/ConfirmationModal.vue
index a5438dfcc04..90d3668a14c 100644
--- a/resources/js/components/modals/ConfirmationModal.vue
+++ b/resources/js/components/modals/ConfirmationModal.vue
@@ -1,16 +1,16 @@
 <template>
     <modal name="confirmation-modal" :pivotY="0.1" :overflow="false">
         <div class="confirmation-modal flex flex-col h-full">
-            <div class="text-lg font-medium p-4 pb-0">
+            <header class="text-lg font-semibold p-5 pb-0 flex items-center justify-between">
                 {{ __(title) }}
-            </div>
-            <div class="flex-1 px-4 py-6 text-gray">
+            </header>
+            <div class="flex-1 px-5 py-6 text-gray">
                 <p v-if="bodyText" v-text="bodyText" />
                 <slot v-else>
                     <p>{{ __('Are you sure?') }}</p>
                 </slot>
             </div>
-            <div class="p-4 bg-gray-200 border-t flex items-center justify-end text-sm">
+            <div class="px-5 py-4 bg-gray-200 rounded-b-lg border-t flex items-center justify-end text-sm">
                 <button class="text-gray hover:text-gray-900" @click="$emit('cancel')" v-text="__(cancelText)" />
                 <button class="ml-4" :class="buttonClass" v-text="buttonText" @click="$emit('confirm')" />
             </div>

From 72ba043db97e81256da1bd9e68d99a396958a740 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 20 Mar 2023 10:17:54 -0400
Subject: [PATCH 12/40] Sticky header for Field Settings

---
 resources/js/components/fields/Settings.vue | 131 ++++++++++----------
 1 file changed, 67 insertions(+), 64 deletions(-)

diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index 43bcd4f70ab..ae14569949a 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -1,18 +1,18 @@
 <template>
 
-    <div class="h-full overflow-auto p-8 bg-gray-300 h-full">
+    <div class="h-full overflow-auto bg-gray-300 h-full">
 
-        <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">
+        <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center ">
             <loading-graphic />
         </div>
 
-        <div v-if="!loading" class="flex items-center mb-6 -mt-2">
-            <h1 class="flex-1">
-                <small class="block text-xs text-gray-700 font-medium leading-none mt-2 flex items-center">
+        <header v-if="!loading" class="flex items-center sticky top-0 inset-x-0 bg-white shadow px-8 py-2 z-10 h-13">
+            <h1 class="flex-1 flex items-center text-xl">
+                {{ values.display || config.display || config.handle }}
+                <small class="badge-pill bg-gray-100 ml-4 border text-xs text-gray-700 font-medium leading-none flex items-center">
                     <svg-icon class="h-4 w-4 mr-2 inline-block text-gray-700" :name="fieldtype.icon"></svg-icon>
-                    {{ fieldtype.title }}
+                    {{ fieldtype.title }} {{ __('Fieldtype') }}
                 </small>
-                {{ values.display || config.display || config.handle }}
             </h1>
             <button
                 class="text-gray-700 hover:text-gray-800 mr-6 text-sm"
@@ -22,70 +22,73 @@
             <button
                 class="btn-primary"
                 @click.prevent="commit"
-                v-text="__('Finish')"
+                v-text="__('Apply')"
             ></button>
-        </div>
-
-        <div class="publish-tabs tabs">
-            <button class="tab-button"
-            :class="{ 'active': activeTab === 'settings' }"
-                @click="activeTab = 'settings'"
-                v-text="__('Settings')"
-            />
-            <button class="tab-button"
-            :class="{ 'active': activeTab === 'conditions' }"
-                @click="activeTab = 'conditions'"
-                v-text="__('Conditions')"
-            />
-            <button class="tab-button"
-            :class="{ 'active': activeTab === 'validation' }"
-                @click="activeTab = 'validation'"
-                v-text="__('Validation')"
-            />
-        </div>
-
-        <div class="card rounded-tl-none" v-if="!loading">
-
-            <publish-container
-                :name="publishContainer"
-                :blueprint="blueprint"
-                :values="values"
-                :meta="meta"
-                :errors="errors"
-                :is-root="true"
-                @updated="values = $event"
-            >
-                <div v-show="activeTab === 'settings'" slot-scope="{ setFieldValue, setFieldMeta }">
-
-                    <publish-fields
-                        v-if="blueprint.tabs.length"
-                        class="w-full"
-                        :fields="blueprint.tabs[0].sections[0].fields"
-                        @updated="(handle, value) => {
-                            updateField(handle, value, setFieldValue);
-                            if (handle === 'handle') isHandleModified = true
-                        }"
-                        @meta-updated="setFieldMeta"
+        </header>
+        <section class="py-4 px-8">
+            <div class="tabs-container mb-5">
+                <div class="publish-tabs tabs">
+                    <button class="tab-button"
+                    :class="{ 'active': activeTab === 'settings' }"
+                        @click="activeTab = 'settings'"
+                        v-text="__('Settings')"
+                    />
+                    <button class="tab-button"
+                    :class="{ 'active': activeTab === 'conditions' }"
+                        @click="activeTab = 'conditions'"
+                        v-text="__('Conditions')"
+                    />
+                    <button class="tab-button"
+                    :class="{ 'active': activeTab === 'validation' }"
+                        @click="activeTab = 'validation'"
+                        v-text="__('Validation')"
                     />
-
                 </div>
-            </publish-container>
-
-            <div class="publish-fields" v-show="activeTab === 'conditions'">
-                <field-conditions-builder
-                    :config="config"
-                    :suggestable-fields="suggestableConditionFields"
-                    @updated="updateFieldConditions"
-                    @updated-always-save="updateAlwaysSave" />
             </div>
 
-            <div class="publish-fields" v-show="activeTab === 'validation'">
-                <field-validation-builder
-                    :config="config"
-                    @updated="updateField('validate', $event)" />
+            <div class="card" v-if="!loading">
+
+                <publish-container
+                    :name="publishContainer"
+                    :blueprint="blueprint"
+                    :values="values"
+                    :meta="meta"
+                    :errors="errors"
+                    :is-root="true"
+                    @updated="values = $event"
+                >
+                    <div v-show="activeTab === 'settings'" slot-scope="{ setFieldValue, setFieldMeta }">
+
+                        <publish-fields
+                            v-if="blueprint.tabs.length"
+                            class="w-full"
+                            :fields="blueprint.tabs[0].sections[0].fields"
+                            @updated="(handle, value) => {
+                                updateField(handle, value, setFieldValue);
+                                if (handle === 'handle') isHandleModified = true
+                            }"
+                            @meta-updated="setFieldMeta"
+                        />
+
+                    </div>
+                </publish-container>
+
+                <div class="publish-fields" v-show="activeTab === 'conditions'">
+                    <field-conditions-builder
+                        :config="config"
+                        :suggestable-fields="suggestableConditionFields"
+                        @updated="updateFieldConditions"
+                        @updated-always-save="updateAlwaysSave" />
+                </div>
+
+                <div class="publish-fields" v-show="activeTab === 'validation'">
+                    <field-validation-builder
+                        :config="config"
+                        @updated="updateField('validate', $event)" />
 
+                </div>
             </div>
-        </div>
+        </section>
     </div>
 
 </template>

From 43d0c946ab0f4a3f8950fd79d5744531c0f0d367 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 20 Mar 2023 12:13:31 -0400
Subject: [PATCH 13/40] Field settings can be split into sections

---
 resources/js/components/fields/Settings.vue   | 34 +++++-----
 src/Fields/Fieldtype.php                      | 66 ++++++++++++++++++-
 .../CP/Fields/FieldsController.php            | 20 ++++--
 3 files changed, 95 insertions(+), 25 deletions(-)

diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index ae14569949a..b04cdd81fbd 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -46,7 +46,7 @@
                 </div>
             </div>
 
-            <div class="card" v-if="!loading">
+            <div v-if="!loading">
 
                 <publish-container
                     :name="publishContainer"
@@ -59,10 +59,8 @@
                 >
                     <div v-show="activeTab === 'settings'" slot-scope="{ setFieldValue, setFieldMeta }">
 
-                        <publish-fields
-                            v-if="blueprint.tabs.length"
-                            class="w-full"
-                            :fields="blueprint.tabs[0].sections[0].fields"
+                        <publish-sections
+                            :sections="blueprint.tabs[0].sections"
                             @updated="(handle, value) => {
                                 updateField(handle, value, setFieldValue);
                                 if (handle === 'handle') isHandleModified = true
@@ -73,20 +71,24 @@
                     </div>
                 </publish-container>
 
-                <div class="publish-fields" v-show="activeTab === 'conditions'">
-                    <field-conditions-builder
-                        :config="config"
-                        :suggestable-fields="suggestableConditionFields"
-                        @updated="updateFieldConditions"
-                        @updated-always-save="updateAlwaysSave" />
+                <div class="card p-0" v-show="activeTab === 'conditions'">
+                    <div class="publish-fields @container">
+                        <field-conditions-builder
+                            :config="config"
+                            :suggestable-fields="suggestableConditionFields"
+                            @updated="updateFieldConditions"
+                            @updated-always-save="updateAlwaysSave" />
+                    </div>
                 </div>
 
-                <div class="publish-fields" v-show="activeTab === 'validation'">
-                    <field-validation-builder
-                        :config="config"
-                        @updated="updateField('validate', $event)" />
-
+                <div class="card p-0" v-show="activeTab === 'validation'">
+                    <div class="publish-fields @container">
+                        <field-validation-builder
+                            :config="config"
+                            @updated="updateField('validate', $event)" />
+                    </div>
                 </div>
+
             </div>
         </section>
     </div>
diff --git a/src/Fields/Fieldtype.php b/src/Fields/Fieldtype.php
index 63642f0bb37..be1cd7942e8 100644
--- a/src/Fields/Fieldtype.php
+++ b/src/Fields/Fieldtype.php
@@ -174,13 +174,75 @@ public function toArray(): array
     public function configBlueprint(): Blueprint
     {
         return (new Blueprint)->setContents([
-            'fields' => $this->configFields()->items()->all(),
+            'tabs' => [
+                'main' => [
+                    'sections' => $this->configSections(),
+                ],
+            ],
         ]);
     }
 
+    private function configSections()
+    {
+        $fields = $this->configFieldItems();
+        $extras = collect($this->extraConfigFieldItems())
+            ->map(fn ($field, $handle) => compact('handle', 'field'))
+            ->values()->all();
+
+        if (empty($fields) && empty($extras)) {
+            return [];
+        }
+
+        if ($this->configFieldsUseSections()) {
+            $sections = collect($fields)->map(function ($section) {
+                $section['fields'] = collect($section['fields'])->map(function ($field, $handle) {
+                    return compact('handle', 'field');
+                })->values()->all();
+
+                return $section;
+            });
+
+            if ($sections->containsOneItem()) {
+                $section = $sections[0];
+                $section['fields'] = array_merge($section['fields'], $extras);
+                $sections[0] = $section;
+            } else {
+                $sections['extra'] = ['fields' => $extras];
+            }
+
+            return $sections->all();
+        }
+
+        return [
+            [
+                'fields' => collect($fields)
+                    ->map(fn ($field, $handle) => compact('handle', 'field'))
+                    ->merge($extras)
+                    ->values()->all(),
+            ],
+        ];
+
+        throw new \Exception('todo: handle config sections when not using sectionsm');
+    }
+
+    private function configFieldsUseSections()
+    {
+        if (empty($fields = $this->configFieldItems())) {
+            return false;
+        }
+
+        return array_keys($fields)[0] === 0;
+    }
+
     public function configFields(): Fields
     {
-        $fields = collect($this->configFieldItems())
+        $fields = collect($this->configFieldItems());
+
+        if ($this->configFieldsUseSections()) {
+            $fields = $fields->flatMap(fn ($section) => $section['fields']);
+        }
+
+        $fields = $fields
             ->merge($this->extraConfigFieldItems())
             ->map(function ($field, $handle) {
                 return compact('handle', 'field');
diff --git a/src/Http/Controllers/CP/Fields/FieldsController.php b/src/Http/Controllers/CP/Fields/FieldsController.php
index 4bac77a4511..78839c08f30 100644
--- a/src/Http/Controllers/CP/Fields/FieldsController.php
+++ b/src/Http/Controllers/CP/Fields/FieldsController.php
@@ -4,6 +4,7 @@
 
 use Facades\Statamic\Fields\FieldtypeRepository;
 use Illuminate\Http\Request;
+use Statamic\Facades\Blueprint;
 use Statamic\Http\Controllers\CP\CpController;
 
 class FieldsController extends CpController
@@ -83,7 +84,7 @@ protected function blueprint($blueprint)
             'value', // todo: can be removed when https://github.com/statamic/cms/issues/2495 is resolved
         ];
 
-        $prepends = collect([
+        $fields = collect([
             'display' => [
                 'display' => __('Display'),
                 'instructions' => __('statamic::messages.fields_display_instructions'),
@@ -151,12 +152,17 @@ protected function blueprint($blueprint)
                 'width' => 50,
                 'default' => true,
             ],
+        ])->map(fn ($field, $handle) => compact('handle', 'field'))->values()->all();
+
+        return Blueprint::make()->setContents([
+            'tabs' => [
+                'main' => [
+                    'sections' => array_merge(
+                        [['fields' => $fields]],
+                        $blueprint->contents()['tabs']['main']['sections'],
+                    ),
+                ],
+            ],
         ]);
-
-        foreach ($prepends->reverse() as $handle => $prepend) {
-            $blueprint->ensureFieldPrepended($handle, $prepend);
-        }
-
-        return $blueprint;
     }
 }

From 0a6f98570449f32d83896e88e585835465e26ea9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 20 Mar 2023 12:13:41 -0400
Subject: [PATCH 14/40] Split config bard fields into settings as an example

---
 src/Fieldtypes/Bard.php | 368 +++++++++++++++++++++-------------------
 1 file changed, 191 insertions(+), 177 deletions(-)

diff --git a/src/Fieldtypes/Bard.php b/src/Fieldtypes/Bard.php
index ebdb3128c4a..72391d55f0e 100644
--- a/src/Fieldtypes/Bard.php
+++ b/src/Fieldtypes/Bard.php
@@ -29,188 +29,202 @@ class Bard extends Replicator
     protected function configFieldItems(): array
     {
         return [
-            'collapse' => [
-                'display' => __('Collapse'),
-                'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
-                'type' => 'select',
-                'cast_booleans' => true,
-                'width' => 50,
-                'options' => [
-                    'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
-                    'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
-                    'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
-                ],
-                'default' => false,
-            ],
-            'placeholder' => [
-                'display' => __('Placeholder'),
-                'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'character_limit' => [
-                'display' => __('Character Limit'),
-                'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'always_show_set_button' => [
-                'display' => __('Always Show Set Button'),
-                'instructions' => __('statamic::fieldtypes.bard.config.always_show_set_button'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'previews' => [
-                'display' => __('Field Previews'),
-                'instructions' => __('statamic::fieldtypes.bard.config.previews'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'smart_typography' => [
-                'display' => __('Smart Typography'),
-                'instructions' => __('statamic::fieldtypes.bard.config.smart_typography'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'sets' => [
-                'display' => __('Sets'),
-                'instructions' => __('statamic::fieldtypes.bard.config.sets'),
-                'type' => 'sets',
-                'require_set' => false,
-            ],
-            'buttons' => [
-                'display' => __('Buttons'),
-                'instructions' => __('statamic::fieldtypes.bard.config.buttons'),
-                'type' => 'bard_buttons_setting',
-                'default' => [
-                    'h2',
-                    'h3',
-                    'bold',
-                    'italic',
-                    'unorderedlist',
-                    'orderedlist',
-                    'removeformat',
-                    'quote',
-                    'anchor',
-                    'image',
-                    'table',
-                ],
-            ],
-            'container' => [
-                'display' => __('Container'),
-                'instructions' => __('statamic::fieldtypes.bard.config.container'),
-                'type' => 'asset_container',
-                'mode' => 'select',
-                'max_items' => 1,
-                'if' => [
-                    'buttons' => 'contains_any anchor, image',
+            [
+                'fields' => [
+                    'collapse' => [
+                        'display' => __('Collapse'),
+                        'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
+                        'type' => 'select',
+                        'cast_booleans' => true,
+                        'width' => 50,
+                        'options' => [
+                            'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
+                            'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
+                            'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
+                        ],
+                        'default' => false,
+                    ],
+                    'placeholder' => [
+                        'display' => __('Placeholder'),
+                        'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
+                        'type' => 'text',
+                        'width' => 50,
+                    ],
+                    'character_limit' => [
+                        'display' => __('Character Limit'),
+                        'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
+                        'type' => 'text',
+                        'width' => 50,
+                    ],
+                    'previews' => [
+                        'display' => __('Field Previews'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.previews'),
+                        'type' => 'toggle',
+                        'default' => true,
+                        'width' => 50,
+                    ],
+                    'smart_typography' => [
+                        'display' => __('Smart Typography'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.smart_typography'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                    ],
+                    'buttons' => [
+                        'display' => __('Buttons'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.buttons'),
+                        'type' => 'bard_buttons_setting',
+                        'default' => [
+                            'h2',
+                            'h3',
+                            'bold',
+                            'italic',
+                            'unorderedlist',
+                            'orderedlist',
+                            'removeformat',
+                            'quote',
+                            'anchor',
+                            'image',
+                            'table',
+                        ],
+                    ],
+                    'save_html' => [
+                        'display' => __('Save as HTML'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.save_html'),
+                        'type' => 'toggle',
+                    ],
+                    'inline' => [
+                        'display' => __('Inline'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.inline'),
+                        'type' => 'toggle',
+                        'width' => 50,
+                    ],
+                    'toolbar_mode' => [
+                        'display' => __('Toolbar Mode'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.toolbar_mode'),
+                        'type' => 'select',
+                        'default' => 'fixed',
+                        'options' => [
+                            'fixed' => __('Fixed'),
+                            'floating' => __('Floating'),
+                        ],
+                        'width' => 50,
+                    ],
+                    'reading_time' => [
+                        'display' => __('Show Reading Time'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.reading_time'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                    ],
+                    'fullscreen' => [
+                        'display' => __('Allow Fullscreen Mode'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.fullscreen'),
+                        'type' => 'toggle',
+                        'default' => true,
+                        'width' => 50,
+                    ],
+                    'allow_source' => [
+                        'display' => __('Allow Source Mode'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.allow_source'),
+                        'type' => 'toggle',
+                        'default' => true,
+                        'width' => 50,
+                    ],
+                    'enable_input_rules' => [
+                        'display' => __('Enable Input Rules'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.enable_input_rules'),
+                        'type' => 'toggle',
+                        'default' => true,
+                        'width' => 50,
+                    ],
+                    'enable_paste_rules' => [
+                        'display' => __('Enable Paste Rules'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.enable_paste_rules'),
+                        'type' => 'toggle',
+                        'default' => true,
+                        'width' => 50,
+                    ],
+                    'antlers' => [
+                        'display' => 'Antlers',
+                        'instructions' => __('statamic::fieldtypes.any.config.antlers'),
+                        'type' => 'toggle',
+                        'width' => 50,
+                    ],
+                    'remove_empty_nodes' => [
+                        'display' => __('Remove Empty Nodes'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.remove_empty_nodes'),
+                        'type' => 'select',
+                        'cast_booleans' => true,
+                        'options' => [
+                            'false' => __("Don't remove empty nodes"),
+                            'true' => __('Remove all empty nodes'),
+                            'trim' => __('Remove empty nodes at the start and end'),
+                        ],
+                        'default' => 'false',
+                        'width' => 50,
+                    ],
                 ],
             ],
-            'save_html' => [
-                'display' => __('Save as HTML'),
-                'instructions' => __('statamic::fieldtypes.bard.config.save_html'),
-                'type' => 'toggle',
-            ],
-            'inline' => [
-                'display' => __('Inline'),
-                'instructions' => __('statamic::fieldtypes.bard.config.inline'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'toolbar_mode' => [
-                'display' => __('Toolbar Mode'),
-                'instructions' => __('statamic::fieldtypes.bard.config.toolbar_mode'),
-                'type' => 'select',
-                'default' => 'fixed',
-                'options' => [
-                    'fixed' => __('Fixed'),
-                    'floating' => __('Floating'),
+            [
+                'display' => 'Sets',
+                'fields' => [
+                    'always_show_set_button' => [
+                        'display' => __('Always Show Set Button'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.always_show_set_button'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                    ],
+                    'sets' => [
+                        'display' => __('Sets'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.sets'),
+                        'type' => 'sets',
+                        'require_set' => false,
+                    ],
                 ],
-                'width' => 50,
-            ],
-            'link_noopener' => [
-                'display' => __('Link Noopener'),
-                'instructions' => __('statamic::fieldtypes.bard.config.link_noopener'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'link_noreferrer' => [
-                'display' => __('Link Noreferrer'),
-                'instructions' => __('statamic::fieldtypes.bard.config.link_noreferrer'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'target_blank' => [
-                'display' => __('Target Blank'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-                'instructions' => __('statamic::fieldtypes.bard.config.target_blank'),
-            ],
-            'reading_time' => [
-                'display' => __('Show Reading Time'),
-                'instructions' => __('statamic::fieldtypes.bard.config.reading_time'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
             ],
-            'link_collections' => [
-                'display' => __('Link Collections'),
-                'instructions' => __('statamic::fieldtypes.bard.config.link_collections'),
-                'type' => 'collections',
-                'mode' => 'select',
-            ],
-            'fullscreen' => [
-                'display' => __('Allow Fullscreen Mode'),
-                'instructions' => __('statamic::fieldtypes.bard.config.fullscreen'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'allow_source' => [
-                'display' => __('Allow Source Mode'),
-                'instructions' => __('statamic::fieldtypes.bard.config.allow_source'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'enable_input_rules' => [
-                'display' => __('Enable Input Rules'),
-                'instructions' => __('statamic::fieldtypes.bard.config.enable_input_rules'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'enable_paste_rules' => [
-                'display' => __('Enable Paste Rules'),
-                'instructions' => __('statamic::fieldtypes.bard.config.enable_paste_rules'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'antlers' => [
-                'display' => 'Antlers',
-                'instructions' => __('statamic::fieldtypes.any.config.antlers'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'remove_empty_nodes' => [
-                'display' => __('Remove Empty Nodes'),
-                'instructions' => __('statamic::fieldtypes.bard.config.remove_empty_nodes'),
-                'type' => 'select',
-                'cast_booleans' => true,
-                'options' => [
-                    'false' => __("Don't remove empty nodes"),
-                    'true' => __('Remove all empty nodes'),
-                    'trim' => __('Remove empty nodes at the start and end'),
+            [
+                'display' => 'Links',
+                'fields' => [
+                    'link_noopener' => [
+                        'display' => __('Link Noopener'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.link_noopener'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                    ],
+                    'link_noreferrer' => [
+                        'display' => __('Link Noreferrer'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.link_noreferrer'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                    ],
+                    'target_blank' => [
+                        'display' => __('Target Blank'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'width' => 50,
+                        'instructions' => __('statamic::fieldtypes.bard.config.target_blank'),
+                    ],
+                    'link_collections' => [
+                        'display' => __('Link Collections'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.link_collections'),
+                        'type' => 'collections',
+                        'mode' => 'select',
+                    ],
+                    'container' => [
+                        'display' => __('Container'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.container'),
+                        'type' => 'asset_container',
+                        'mode' => 'select',
+                        'max_items' => 1,
+                        'if' => [
+                            'buttons' => 'contains_any anchor, image',
+                        ],
+                    ],
                 ],
-                'default' => 'false',
-                'width' => 50,
             ],
         ];
     }

From 9ba2bb30bcd4e107a2b96dd6096addf378dbe558 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 20 Mar 2023 14:12:50 -0400
Subject: [PATCH 15/40] fix

---
 src/Fields/Fieldtype.php | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/Fields/Fieldtype.php b/src/Fields/Fieldtype.php
index be1cd7942e8..874437371aa 100644
--- a/src/Fields/Fieldtype.php
+++ b/src/Fields/Fieldtype.php
@@ -202,12 +202,14 @@ private function configSections()
                 return $section;
             });
 
-            if ($sections->containsOneItem()) {
-                $section = $sections[0];
-                $section['fields'] = array_merge($section['fields'], $extras);
-                $sections[0] = $section;
-            } else {
-                $sections['extra'] = ['fields' => $extras];
+            if (! empty($extras)) {
+                if ($sections->containsOneItem()) {
+                    $section = $sections[0];
+                    $section['fields'] = array_merge($section['fields'], $extras);
+                    $sections[0] = $section;
+                } else {
+                    $sections[] = ['fields' => $extras];
+                }
             }
 
             return $sections->all();

From 39216074309f9b1b9ed9ba6dfa3f2f588d5508b9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 20 Mar 2023 15:22:44 -0400
Subject: [PATCH 16/40] write test

---
 tests/Fields/FieldtypeTest.php | 124 +++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)

diff --git a/tests/Fields/FieldtypeTest.php b/tests/Fields/FieldtypeTest.php
index f973d52150f..0b6efd26299 100644
--- a/tests/Fields/FieldtypeTest.php
+++ b/tests/Fields/FieldtypeTest.php
@@ -4,6 +4,7 @@
 
 use Facades\Statamic\Fields\FieldtypeRepository;
 use Mockery;
+use Statamic\Fields\Blueprint;
 use Statamic\Fields\ConfigFields;
 use Statamic\Fields\Field;
 use Statamic\Fields\Fields;
@@ -341,6 +342,121 @@ public function it_will_only_append_config_fields_to_the_intended_fieldtype()
         $this->assertCount(1, $fieldtypeWithAppendedConfig->configFields()->all());
     }
 
+    /**
+     * @test
+     *
+     * @dataProvider configBlueprintProvider
+     */
+    public function it_gets_the_config_blueprint($property, $expectedSections, $expectedConfigFields)
+    {
+        $fieldtype = new TestFieldtypeWithConfigFieldsProperty($property);
+
+        TestFieldtypeWithConfigFieldsProperty::appendConfigField('appended', ['type' => 'text']);
+
+        $this->assertInstanceOf(Blueprint::class, $blueprint = $fieldtype->configBlueprint());
+        $this->assertEquals(['tabs' => [
+            'main' => [
+                'sections' => $expectedSections,
+            ],
+        ]], $blueprint->contents());
+
+        $this->assertEquals($expectedConfigFields, $fieldtype->configFields()->all()->map(fn ($field) => $field->type())->all());
+    }
+
+    public function configBlueprintProvider()
+    {
+        return [
+            'linear fields results in one section' => [
+                $configFields = [
+                    'alfa' => ['type' => 'bravo'],
+                    'charlie' => ['type' => 'delta'],
+                ],
+                $expectedSections = [
+                    [
+                        'fields' => [
+                            ['handle' => 'alfa', 'field' => ['type' => 'bravo']],
+                            ['handle' => 'charlie', 'field' => ['type' => 'delta']],
+                            ['handle' => 'appended', 'field' => ['type' => 'text']], // appended field to the end of line section
+                        ],
+                    ],
+                ],
+                $expectedConfigFields = [
+                    'alfa' => 'bravo',
+                    'charlie' => 'delta',
+                    'appended' => 'text',
+                ],
+            ],
+
+            'single section' => [
+                $configFields = [
+                    [
+                        'fields' => [
+                            'alfa' => ['type' => 'bravo'],
+                            'charlie' => ['type' => 'delta'],
+                        ],
+                    ],
+                ],
+                $expectedSections = [
+                    [
+                        'fields' => [
+                            ['handle' => 'alfa', 'field' => ['type' => 'bravo']],
+                            ['handle' => 'charlie', 'field' => ['type' => 'delta']],
+                            ['handle' => 'appended', 'field' => ['type' => 'text']], // appended field to the end of lone section
+                        ],
+                    ],
+                ],
+                $expectedConfigFields = [
+                    'alfa' => 'bravo',
+                    'charlie' => 'delta',
+                    'appended' => 'text',
+                ],
+            ],
+
+            'multiple sections' => [
+                $configFields = [
+                    [
+                        'fields' => [
+                            'alfa' => ['type' => 'bravo'],
+                            'charlie' => ['type' => 'delta'],
+                        ],
+                    ],
+                    [
+                        'fields' => [
+                            'echo' => ['type' => 'foxtrot'],
+                            'golf' => ['type' => 'hotel'],
+                        ],
+                    ],
+                ],
+                $expectedSections = [
+                    [
+                        'fields' => [
+                            ['handle' => 'alfa', 'field' => ['type' => 'bravo']],
+                            ['handle' => 'charlie', 'field' => ['type' => 'delta']],
+                        ],
+                    ],
+                    [
+                        'fields' => [
+                            ['handle' => 'echo', 'field' => ['type' => 'foxtrot']],
+                            ['handle' => 'golf', 'field' => ['type' => 'hotel']],
+                        ],
+                    ],
+                    [
+                        'fields' => [
+                            ['handle' => 'appended', 'field' => ['type' => 'text']], // appended field goes into its own section
+                        ],
+                    ],
+                ],
+                $expectedConfigFields = [
+                    'alfa' => 'bravo',
+                    'charlie' => 'delta',
+                    'echo' => 'foxtrot',
+                    'golf' => 'hotel',
+                    'appended' => 'text',
+                ],
+            ],
+        ];
+    }
+
     /** @test */
     public function it_can_have_an_icon()
     {
@@ -450,3 +566,11 @@ class TestAppendConfigFields extends Fieldtype
         'max_items' => ['type' => 'integer'],
     ];
 }
+
+class TestFieldtypeWithConfigFieldsProperty extends Fieldtype
+{
+    public function __construct($property)
+    {
+        $this->configFields = $property;
+    }
+}

From 2cc84bf348fec4ff87386e2fbbd9de2cc0c5a46d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 20 Mar 2023 15:28:54 -0400
Subject: [PATCH 17/40] oops leftover debug

---
 src/Fields/Fieldtype.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Fields/Fieldtype.php b/src/Fields/Fieldtype.php
index 874437371aa..c4c0a3229e6 100644
--- a/src/Fields/Fieldtype.php
+++ b/src/Fields/Fieldtype.php
@@ -223,8 +223,6 @@ private function configSections()
                     ->values()->all(),
             ],
         ];
-
-        throw new \Exception('todo: handle config sections when not using sectionsm');
     }
 
     private function configFieldsUseSections()

From 61cdbb246a22e9711071f8a7c6b58d51e77f1503 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 20 Mar 2023 15:31:53 -0400
Subject: [PATCH 18/40] wip

---
 src/Fields/Fieldtype.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Fields/Fieldtype.php b/src/Fields/Fieldtype.php
index c4c0a3229e6..a2d0d2f3c29 100644
--- a/src/Fields/Fieldtype.php
+++ b/src/Fields/Fieldtype.php
@@ -195,9 +195,9 @@ private function configSections()
 
         if ($this->configFieldsUseSections()) {
             $sections = collect($fields)->map(function ($section) {
-                $section['fields'] = collect($section['fields'])->map(function ($field, $handle) {
-                    return compact('handle', 'field');
-                })->values()->all();
+                $section['fields'] = collect($section['fields'])
+                    ->map(fn ($field, $handle) => compact('handle', 'field'))
+                    ->values()->all();
 
                 return $section;
             });

From d9aef181af66bea85ed2c6b54f7faa9ffffe97dc Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 20 Mar 2023 15:33:39 -0400
Subject: [PATCH 19/40] refactor to guard clause

---
 src/Fields/Fieldtype.php | 52 ++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/Fields/Fieldtype.php b/src/Fields/Fieldtype.php
index a2d0d2f3c29..0c1b6ae8e40 100644
--- a/src/Fields/Fieldtype.php
+++ b/src/Fields/Fieldtype.php
@@ -193,36 +193,36 @@ private function configSections()
             return [];
         }
 
-        if ($this->configFieldsUseSections()) {
-            $sections = collect($fields)->map(function ($section) {
-                $section['fields'] = collect($section['fields'])
-                    ->map(fn ($field, $handle) => compact('handle', 'field'))
-                    ->values()->all();
-
-                return $section;
-            });
+        if (! $this->configFieldsUseSections()) {
+            return [
+                [
+                    'fields' => collect($fields)
+                        ->map(fn ($field, $handle) => compact('handle', 'field'))
+                        ->merge($extras)
+                        ->values()->all(),
+                ],
+            ];
+        }
 
-            if (! empty($extras)) {
-                if ($sections->containsOneItem()) {
-                    $section = $sections[0];
-                    $section['fields'] = array_merge($section['fields'], $extras);
-                    $sections[0] = $section;
-                } else {
-                    $sections[] = ['fields' => $extras];
-                }
+        $sections = collect($fields)->map(function ($section) {
+            $section['fields'] = collect($section['fields'])
+                ->map(fn ($field, $handle) => compact('handle', 'field'))
+                ->values()->all();
+
+            return $section;
+        });
+
+        if (! empty($extras)) {
+            if ($sections->containsOneItem()) {
+                $section = $sections[0];
+                $section['fields'] = array_merge($section['fields'], $extras);
+                $sections[0] = $section;
+            } else {
+                $sections[] = ['fields' => $extras];
             }
-
-            return $sections->all();
         }
 
-        return [
-            [
-                'fields' => collect($fields)
-                    ->map(fn ($field, $handle) => compact('handle', 'field'))
-                    ->merge($extras)
-                    ->values()->all(),
-            ],
-        ];
+        return $sections->all();
     }
 
     private function configFieldsUseSections()

From 8048986a7f0edde279c431ca2cf5445e44979595 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 20 Mar 2023 15:35:04 -0400
Subject: [PATCH 20/40] avoid map if returning early

---
 src/Fields/Fieldtype.php | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Fields/Fieldtype.php b/src/Fields/Fieldtype.php
index 0c1b6ae8e40..e91e4d29e5e 100644
--- a/src/Fields/Fieldtype.php
+++ b/src/Fields/Fieldtype.php
@@ -185,14 +185,16 @@ public function configBlueprint(): Blueprint
     private function configSections()
     {
         $fields = $this->configFieldItems();
-        $extras = collect($this->extraConfigFieldItems())
-            ->map(fn ($field, $handle) => compact('handle', 'field'))
-            ->values()->all();
+        $extras = $this->extraConfigFieldItems();
 
         if (empty($fields) && empty($extras)) {
             return [];
         }
 
+        $extras = collect($extras)
+            ->map(fn ($field, $handle) => compact('handle', 'field'))
+            ->values()->all();
+
         if (! $this->configFieldsUseSections()) {
             return [
                 [

From 835bed29fc6be08562bfcb8a3cc80136dd94e81f Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 12:08:05 -0400
Subject: [PATCH 21/40] New side-by-side layout for config fields

---
 resources/css/components/publish.css          |  4 ++
 resources/css/components/settings.css         | 37 ++++++++++++++++++
 resources/css/cp.css                          |  1 +
 .../js/components/blueprints/Builder.vue      | 38 +++++++++++--------
 resources/js/components/fields/Settings.vue   |  8 +++-
 resources/js/components/publish/Field.vue     | 10 +++--
 resources/js/components/publish/Sections.vue  |  8 ++--
 7 files changed, 82 insertions(+), 24 deletions(-)
 create mode 100644 resources/css/components/settings.css

diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index e9ecaa7622f..845cb277be7 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -76,6 +76,10 @@ code.parent-url {
     @apply flex items-center;
 }
 
+.publish-section-header {
+    @apply px-5 pt-4 pb-3 border-b border-gray-400 bg-gray-100 rounded-t-lg;
+}
+
 .publish-sidebar {
     @apply shrink-0;
     margin-left: 20px;
diff --git a/resources/css/components/settings.css b/resources/css/components/settings.css
new file mode 100644
index 00000000000..0c5b8d5e56e
--- /dev/null
+++ b/resources/css/components/settings.css
@@ -0,0 +1,37 @@
+.config-field {
+    @apply md:flex border-b border-gray-400 w-full;
+    @apply p-3 @sm:p-4 m-0;
+
+    .field-inner {
+        @apply w-full md:w-1/2 md:pr-8;
+    }
+
+    .field-inner + div {
+        @apply w-full md:w-1/2;
+    }
+
+    .help-block {
+        @apply mb-0;
+    }
+
+    .help-block p:last-child {
+        @apply mb-0 !important;
+    }
+}
+
+.card .publish-fields .config-field:last-child {
+    @apply border-b-0;
+}
+
+.config-field.full-width-setting {
+    @apply md:flex-col;
+    .field-inner {
+        @apply w-full;
+    }
+    .field-inner + div {
+        @apply w-full;
+    }
+    .help-block p:last-child {
+        @apply mb-4 !important;
+    }
+}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 62a594ca5d6..7b4fa46f360 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -40,6 +40,7 @@
 @import "components/progress";
 @import "components/revisions";
 @import "components/roles";
+@import "components/settings";
 @import "components/shortcuts";
 @import "components/sortable";
 @import "components/stacks";
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index 533622b9e94..2faa33ca346 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -10,31 +10,39 @@
         </header>
 
         <div class="publish-form card p-0 @container" v-if="showTitle">
-            <div class="form-group">
-                <label class="block">{{ __('Title') }}</label>
-                <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
-                <div v-if="errors.title">
-                    <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+            <div class="form-group config-field">
+                <div class="field-inner">
+                    <label class="block">{{ __('Title') }}</label>
+                    <p class="help-block">{{ __('messages.blueprints_title_instructions') }}</p>
+                    <div v-if="errors.title">
+                        <p class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    </div>
+                </div>
+                <div>
+                    <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
                 </div>
-                <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
             </div>
 
-            <div class="form-group">
-                <label class="block">{{ __('Hidden') }}</label>
-                <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
-                <div v-if="errors.hidden">
-                    <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+            <div class="form-group config-field">
+                <div class="field-inner">
+                    <label class="block">{{ __('Hidden') }}</label>
+                    <p class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</p>
+                    <div v-if="errors.hidden">
+                        <p class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+                    </div>
+                </div>
+                <div>
+                    <toggle-input name="hidden" v-model="blueprint.hidden" />
                 </div>
-                <toggle-input name="hidden" v-model="blueprint.hidden" />
             </div>
         </div>
 
         <div class="content mt-10 mb-4" v-if="useTabs">
-            <h2>{{ __('Tabs') }}</h2>
+            <!--<h2>{{ __('Tabs') }}</h2>
             <p class="max-w-lg">{{ __('messages.tabs_instructions') }}</p>
             <div v-if="errors.tabs">
-                <small class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
-            </div>
+                <p class="help-block text-red-500" v-for="(error, i) in errors.tabs" :key="i" v-text="error" />
+            </div>-->
         </div>
 
         <tabs
diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index b04cdd81fbd..9c94320c99d 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -46,13 +46,14 @@
                 </div>
             </div>
 
-            <div v-if="!loading">
+            <div v-if="!loading" class="field-settings">
 
                 <publish-container
                     :name="publishContainer"
                     :blueprint="blueprint"
                     :values="values"
                     :meta="meta"
+                    :is-config="true"
                     :errors="errors"
                     :is-root="true"
                     @updated="values = $event"
@@ -61,6 +62,7 @@
 
                         <publish-sections
                             :sections="blueprint.tabs[0].sections"
+
                             @updated="(handle, value) => {
                                 updateField(handle, value, setFieldValue);
                                 if (handle === 'handle') isHandleModified = true
@@ -120,6 +122,10 @@ export default {
         suggestableConditionFields: Array,
     },
 
+    provide: {
+        isInsideConfigFields: true,
+    },
+
     model: {
         prop: 'config',
         event: 'input'
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index c05d289d741..fe3711e4d1a 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -6,7 +6,7 @@
         :initial-meta="meta"
     >
     <div slot-scope="{ meta, value, loading: loadingMeta }" :class="classes">
-        <div class="field-inner">
+        <div class="field-inner" v-show="! config.hide_meta">
             <label class="publish-field-label" :class="{'font-bold': config.bold}" :for="fieldId">
                 <span
                     :class="{ 'text-gray-600': syncable && isSynced }"
@@ -115,7 +115,8 @@ export default {
     },
 
     inject: {
-        storeName: { default: null }
+        storeName: { default: null },
+        isInsideConfigFields: { default: false },
     },
 
     computed: {
@@ -156,10 +157,11 @@ export default {
             return [
                 'form-group publish-field',
                 `publish-field__` + this.config.handle,
-                `${this.config.component || this.config.type}-fieldtype`,
-                `${tailwind_width_class(this.config.width)}`,
+                `${this.config.component || this.config.type}-fieldtype`,,
                 this.isReadOnly ? 'read-only-field' : '',
+                this.isInsideConfigFields ? 'config-field' : `${tailwind_width_class(this.config.width)}`,
                 this.config.classes || '',
+                this.config.full_width_setting ? 'full-width-setting' : '',
                 { 'has-error': this.hasError || this.hasNestedError }
             ];
         },
diff --git a/resources/js/components/publish/Sections.vue b/resources/js/components/publish/Sections.vue
index 896e0e15c28..19bc9b9de9d 100644
--- a/resources/js/components/publish/Sections.vue
+++ b/resources/js/components/publish/Sections.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="publish-sections flex flex-col space-y-7">
-        <div class="mb-5" v-for="(section, i) in sections" :key="i">
+    <div class="publish-sections">
+        <div class="mb-8" v-for="(section, i) in sections" :key="i">
             <div class="card p-0">
-                <div class="px-5 pt-4 pb-3 border-b border-gray-400" v-if="section.display">
+                <header class="publish-section-header" v-if="section.display">
                     <label v-text="section.display" class="text-base font-semibold" />
                     <div class="help-block" v-if="section.instructions"><p v-html="$options.filters.markdown(section.instructions)" /></div>
-                </div>
+                </header>
                 <publish-fields
                     :fields="section.fields"
                     :read-only="readOnly"

From f128b1e8d81e57d3feee5a89697d2c02b2506430 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 12:08:21 -0400
Subject: [PATCH 22/40] Prevent list fieldtype from looking derpy when empty

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

diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index bd2bf8f5259..3626b20c63f 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="table-field">
-        <table class="table-fieldtype-table">
+        <table class="table-fieldtype-table" v-if="data.length > 0">
             <sortable-list
                 v-model="data"
                 :vertical="true"

From 2e7726d847514c2348672c22dea2dcc9aedc3aa7 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 12:08:37 -0400
Subject: [PATCH 23/40] Fix checkboxes inline-mode

---
 resources/css/elements/forms.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index 97842f7b3f3..5854a87909d 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -162,6 +162,9 @@ input.input-text-minimal:read-only,
 
     .option {
         @apply mr-4 mb-3;
+        &:first-child {
+            @apply mt-3;
+        }
     }
 }
 

From b575a083ad7514357779c5807937572a6c078ee3 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 12:08:54 -0400
Subject: [PATCH 24/40] Fix vertical alignment for relationship item icons

---
 .../js/components/inputs/relationship/RelationshipInput.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 2dd581b5dd8..1fb2beaa5eb 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -54,7 +54,7 @@
                             @created="itemCreated"
                         />
                     </div>
-                    <button ref="existing" class="text-blue hover:text-gray-800 flex mb-2 outline-none" @click.prevent="isSelecting = true">
+                    <button ref="existing" class="text-blue hover:text-gray-800 flex items-center mb-2 outline-none" @click.prevent="isSelecting = true">
                         <svg-icon name="hyperlink" class="mr-1 h-4 w-4 flex items-center"></svg-icon>
                         {{ __('Link Existing Item') }}
                     </button>

From 10a2bf2f6bf364ebdf1dbd1d3529e834c1eab625 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 12:09:37 -0400
Subject: [PATCH 25/40] Improve field settings by grouping into sections and
 rewriting some helper text

---
 resources/lang/en/fieldtypes.php              |  28 ++-
 resources/lang/en/messages.php                |   2 +-
 src/Fieldtypes/Arr.php                        |  44 +++--
 src/Fieldtypes/Assets/Assets.php              | 112 +++++------
 src/Fieldtypes/Bard.php                       | 140 ++++++--------
 src/Fieldtypes/ButtonGroup.php                |  27 +--
 src/Fieldtypes/Checkboxes.php                 |  43 ++--
 src/Fieldtypes/Code.php                       | 183 +++++++++---------
 src/Fieldtypes/Color.php                      |  94 ++++-----
 src/Fieldtypes/Date.php                       | 152 ++++++++-------
 src/Fieldtypes/Entries.php                    |  50 +++--
 src/Fieldtypes/Floatval.php                   |   1 -
 src/Fieldtypes/Grid.php                       |  83 ++++----
 src/Fieldtypes/Hidden.php                     |   1 -
 src/Fieldtypes/Html.php                       |  16 +-
 src/Fieldtypes/Integer.php                    |  42 ++--
 src/Fieldtypes/Link.php                       |  31 +--
 src/Fieldtypes/Lists.php                      |   1 -
 src/Fieldtypes/Markdown.php                   | 136 +++++++------
 src/Fieldtypes/Radio.php                      |  55 +++---
 src/Fieldtypes/Range.php                      |  88 ++++-----
 src/Fieldtypes/Relationship.php               |  41 ++--
 src/Fieldtypes/Replicator.php                 |  67 ++++---
 src/Fieldtypes/Revealer.php                   |  39 ++--
 src/Fieldtypes/Select.php                     | 140 +++++++-------
 src/Fieldtypes/Slug.php                       |  31 +--
 src/Fieldtypes/Taggable.php                   |   1 -
 src/Fieldtypes/Template.php                   |  44 +++--
 src/Fieldtypes/Terms.php                      |  50 +++--
 src/Fieldtypes/Text.php                       | 116 +++++------
 src/Fieldtypes/Textarea.php                   |  53 ++---
 src/Fieldtypes/Time.php                       |  29 +--
 src/Fieldtypes/Toggle.php                     |  28 +--
 src/Fieldtypes/Users.php                      |  44 +++--
 src/Fieldtypes/Video.php                      |  27 +--
 src/Fieldtypes/Width.php                      |  29 +--
 src/Fieldtypes/Yaml.php                       |   1 -
 src/Forms/Fieldtype.php                       |   2 -
 .../CP/Fields/FieldsController.php            |  20 +-
 39 files changed, 1134 insertions(+), 957 deletions(-)

diff --git a/resources/lang/en/fieldtypes.php b/resources/lang/en/fieldtypes.php
index ffb35e96557..fe0b4ad2cdb 100644
--- a/resources/lang/en/fieldtypes.php
+++ b/resources/lang/en/fieldtypes.php
@@ -3,13 +3,14 @@
 return [
     'any.config.antlers' => "Enable Antlers parsing in this field's content.",
     'any.config.cast_booleans' => 'Options with values of true and false will be saved as booleans.',
+    'any.config.mode' => 'Choose your preferred UI style.',
     'array.config.keys' => 'Set the array keys (variables) and optional labels.',
-    'array.config.mode' => 'Dynamic mode gives the user control of the data while keyed mode does not.',
+    'array.config.mode' => 'The **dynamic** mode gives the user free control of the data, while **keyed** and **single** modes enforce strict keys.',
     'array.title' => 'Array',
     'assets.config.allow_uploads' => 'Allow new file uploads.',
     'assets.config.container' => 'Choose which asset container to use for this field.',
     'assets.config.folder' => 'The folder to begin browsing in.',
-    'assets.config.max_files' => 'The maximum number of selectable assets.',
+    'assets.config.max_files' => 'Set a maximum number of selectable assets.',
     'assets.config.mode' => 'Choose your preferred layout style.',
     'assets.config.restrict' => 'Prevent users from navigating to other folders.',
     'assets.config.show_filename' => 'Show the filename next to the preview image.',
@@ -21,7 +22,7 @@
     'bard.config.enable_input_rules' => 'Enables Markdown-style shortcuts when typing content.',
     'bard.config.enable_paste_rules' => 'Enables Markdown-style shortcuts when pasting content.',
     'bard.config.fullscreen' => 'Enable to toggle into fullscreen mode',
-    'bard.config.inline' => 'Only allow inline elements.',
+    'bard.config.inline' => 'Disable block elements like headings, images, and sets.',
     'bard.config.link_collections' => 'Entries from these collections will be available in the link selector. Leaving this empty will make all entries available.',
     'bard.config.link_noopener' => 'Set `rel="noopener"` on all links.',
     'bard.config.link_noreferrer' => 'Set `rel="noreferrer"` on all links.',
@@ -32,7 +33,10 @@
     'bard.config.sets' => 'Sets are configurable blocks of fields that can be inserted anywhere in your Bard content.',
     'bard.config.smart_typography' => 'Convert common text patterns with the proper typographic characters.',
     'bard.config.target_blank' => 'Set `target="_blank"` on all links.',
-    'bard.config.toolbar_mode' => 'Choose which style of toolbar you prefer.',
+    'bard.config.toolbar_mode' => '**Fixed** mode will keep the toolbar visible at all times, while **floating** only appears while selecting text.',
+    'bard.config.section.editor.instructions' => 'Configure the editor\'s appearance and general behavior.',
+    'bard.config.section.links.instructions' => 'Configure how links are handled in this instance of Bard.',
+    'bard.config.section.sets.instructions' => 'Configure blocks of fields that can be inserted anywhere in your Bard content.',
     'bard.title' => 'Bard',
     'button_group.title' => 'Button Group',
     'checkboxes.config.inline' => 'Show the checkboxes in a row.',
@@ -64,19 +68,21 @@
     'date.config.time_seconds_enabled' => 'Show seconds in the timepicker.',
     'date.title' => 'Date',
     'entries.config.create' => 'Allow creation of new entries.',
+    'entries.config.collections' => 'Choose which collections the user can select from.',
     'entries.title' => 'Entries',
     'float.title' => 'Float',
-    'form.config.max_items' => 'The maximum number of selectable forms.',
+    'form.config.max_items' => 'Set a maximum number of selectable forms.',
     'form.title' => 'Form',
-    'grid.config.add_row' => 'Set the label of the "Add Row" button.',
+    'grid.config.add_row' => 'Customize the label of the "Add Row" button.',
     'grid.config.fields' => 'Each field becomes a column in the grid table.',
     'grid.config.max_rows' => 'Set a maximum number of creatable rows.',
     'grid.config.min_rows' => 'Set a minimum number of creatable rows.',
     'grid.config.mode' => 'Choose your preferred layout style.',
-    'grid.config.reorderable' => 'Enable to allow row reordering.',
+    'grid.config.reorderable' => 'Enable the ability to reorder rows.',
     'grid.title' => 'Grid',
     'hidden.title' => 'Hidden',
     'html.title' => 'HTML',
+    'html.config.html_instruct' => 'Manage the HTML to be displayed in the publish form.',
     'integer.title' => 'Integer',
     'link.config.collections' => 'Entries from these collections will be available. Leaving this empty will make entries from routable collections available.',
     'link.config.container' => 'Choose which asset container to use for this field.',
@@ -112,12 +118,13 @@
     'replicator.config.collapse.accordion' => 'Only allow one set to be expanded at a time',
     'replicator.config.collapse.disabled' => 'All sets expanded by default',
     'replicator.config.collapse.enabled' => 'All sets collapsed by default',
-    'replicator.config.max_sets' => 'The maximum number of sets.',
-    'replicator.config.previews' => 'Shown when sets are collapsed.',
+    'replicator.config.max_sets' => 'Set a maximum number of sets.',
+    'replicator.config.previews' => 'Show a preview of the content inside a set while collapsed.',
+    'replicator.config.sets' => 'Sets are configurable blocks of fields that be created and reordered as desired.',
     'replicator.title' => 'Replicator',
     'revealer.title' => 'Revealer',
     'revealer.config.input_label' => 'Set a label to be shown in the button or beside the toggle.',
-    'revealer.config.mode' => 'Choose your preferred layout style.',
+    'revealer.config.mode' => 'Choose your preferred UI style.',
     'section.title' => 'Section',
     'select.config.clearable' => 'Enable to allow deselecting your option.',
     'select.config.multiple' => 'Allow multiple selections.',
@@ -140,6 +147,7 @@
     'template.config.hide_partials' => 'Partials are rarely intended to be used as templates.',
     'template.title' => 'Template',
     'terms.config.create' => 'Allow creation of new terms.',
+    'terms.config.taxonomies' => 'Choose which taxonomies to show terms from.',
     'terms.title' => 'Taxonomy Terms',
     'text.config.append' => 'Add text after (to the right of) the input.',
     'text.config.character_limit' => 'Set the maximum number of enterable characters.',
diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php
index 6ffa599c05b..1d9aea6107b 100644
--- a/resources/lang/en/messages.php
+++ b/resources/lang/en/messages.php
@@ -82,7 +82,7 @@
     'fields_duplicate_instructions' => 'Whether this field should be included when duplicating the item.',
     'fields_fieldsets_description' => 'Fieldsets are simple, flexible, and completely optional groupings of fields that help to organize reusable, pre-configured fields.',
     'fields_handle_instructions' => 'The field\'s template variable.',
-    'fields_instructions_instructions' => 'Shown under the field\'s display label, like this very text. Markdown is supported.',
+    'fields_instructions_instructions' => 'Provide additional field instructions like this very text. Markdown formatting is supported.',
     'fields_instructions_position_instructions' => 'Show instructions above or below the field.',
     'fields_listable_instructions' => 'Control the listing column visibility.',
     'fields_visibility_instructions' => 'Control field visibility on publish forms.',
diff --git a/src/Fieldtypes/Arr.php b/src/Fieldtypes/Arr.php
index 0c78786df8e..6ec5314463a 100644
--- a/src/Fieldtypes/Arr.php
+++ b/src/Fieldtypes/Arr.php
@@ -14,25 +14,31 @@ class Arr extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'mode' => [
-                'display' => __('Mode'),
-                'instructions' => __('statamic::fieldtypes.array.config.mode'),
-                'type' => 'radio',
-                'default' => 'dynamic',
-                'options' => [
-                    'dynamic' => __('Dynamic'),
-                    'keyed' => __('Keyed'),
-                    'single' => __('Single'),
-                ],
-            ],
-            'keys' => [
-                'display' => __('Keys'),
-                'instructions' => __('statamic::fieldtypes.array.config.keys'),
-                'type' => 'array',
-                'key_header' => __('Key'),
-                'value_header' => __('Label').' ('.__('Optional').')',
-                'unless' => [
-                    'mode' => 'dynamic',
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.array.config.mode'),
+                        'type' => 'radio',
+                        'default' => 'dynamic',
+                        'options' => [
+                            'dynamic' => __('Dynamic'),
+                            'keyed' => __('Keyed'),
+                            'single' => __('Single'),
+                        ],
+                    ],
+                    'keys' => [
+                        'display' => __('Keys'),
+                        'instructions' => __('statamic::fieldtypes.array.config.keys'),
+                        'type' => 'array',
+                        'key_header' => __('Key'),
+                        'value_header' => __('Label').' ('.__('Optional').')',
+                        'add_button' => __('Add Key'),
+                        'unless' => [
+                            'mode' => 'dynamic',
+                        ],
+                    ],
                 ],
             ],
         ];
diff --git a/src/Fieldtypes/Assets/Assets.php b/src/Fieldtypes/Assets/Assets.php
index d6a87e73883..1a5334edd4f 100644
--- a/src/Fieldtypes/Assets/Assets.php
+++ b/src/Fieldtypes/Assets/Assets.php
@@ -23,60 +23,64 @@ class Assets extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'mode' => [
-                'display' => __('Mode'),
-                'instructions' => __('statamic::fieldtypes.assets.config.mode'),
-                'type' => 'select',
-                'default' => 'list',
-                'options' => [
-                    'grid' => __('Grid'),
-                    'list' => __('List'),
-                ],
-                'width' => 50,
-            ],
-            'container' => [
-                'display' => __('Container'),
-                'instructions' => __('statamic::fieldtypes.assets.config.container'),
-                'type' => 'asset_container',
-                'max_items' => 1,
-                'mode' => 'select',
-                'width' => 50,
-                'default' => AssetContainer::all()->count() == 1 ? AssetContainer::all()->first()->handle() : null,
-            ],
-            'folder' => [
-                'display' => __('Folder'),
-                'instructions' => __('statamic::fieldtypes.assets.config.folder'),
-                'type' => 'asset_folder',
-                'max_items' => 1,
-                'width' => 50,
-            ],
-            'restrict' => [
-                'display' => __('Restrict'),
-                'instructions' => __('statamic::fieldtypes.assets.config.restrict'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'allow_uploads' => [
-                'display' => __('Allow Uploads'),
-                'instructions' => __('statamic::fieldtypes.assets.config.allow_uploads'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'show_filename' => [
-                'display' => __('Show Filename'),
-                'instructions' => __('statamic::fieldtypes.assets.config.show_filename'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'max_files' => [
-                'display' => __('Max Files'),
-                'instructions' => __('statamic::fieldtypes.assets.config.max_files'),
-                'min' => 1,
-                'type' => 'integer',
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'max_files' => [
+                        'display' => __('Max Files'),
+                        'instructions' => __('statamic::fieldtypes.assets.config.max_files'),
+                        'min' => 1,
+                        'type' => 'integer',
+                    ],
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.assets.config.mode'),
+                        'type' => 'select',
+                        'default' => 'list',
+                        'options' => [
+                            'grid' => __('Grid'),
+                            'list' => __('List'),
+                        ],
+                    ],
+                    'container' => [
+                        'display' => __('Container'),
+                        'instructions' => __('statamic::fieldtypes.assets.config.container'),
+                        'type' => 'asset_container',
+                        'max_items' => 1,
+                        'mode' => 'select',
+                        'default' => AssetContainer::all()->count() == 1 ? AssetContainer::all()->first()->handle() : null,
+                    ],
+                    'folder' => [
+                        'display' => __('Folder'),
+                        'instructions' => __('statamic::fieldtypes.assets.config.folder'),
+                        'type' => 'asset_folder',
+                        'max_items' => 1,
+                        'if' => [
+                            'container' => 'not empty',
+                        ],
+                    ],
+                    'restrict' => [
+                        'display' => __('Restrict to Folder'),
+                        'instructions' => __('statamic::fieldtypes.assets.config.restrict'),
+                        'type' => 'toggle',
+                        'if' => [
+                            'container' => 'not empty',
+                        ],
+                    ],
+                    'allow_uploads' => [
+                        'display' => __('Allow Uploads'),
+                        'instructions' => __('statamic::fieldtypes.assets.config.allow_uploads'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'show_filename' => [
+                        'display' => __('Show Filename'),
+                        'instructions' => __('statamic::fieldtypes.assets.config.show_filename'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Bard.php b/src/Fieldtypes/Bard.php
index 72391d55f0e..932182f1f80 100644
--- a/src/Fieldtypes/Bard.php
+++ b/src/Fieldtypes/Bard.php
@@ -30,50 +30,14 @@ protected function configFieldItems(): array
     {
         return [
             [
+                'display' => __('Editor'),
+                'instructions' => __('statamic::fieldtypes.bard.config.section.editor.instructions'),
                 'fields' => [
-                    'collapse' => [
-                        'display' => __('Collapse'),
-                        'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
-                        'type' => 'select',
-                        'cast_booleans' => true,
-                        'width' => 50,
-                        'options' => [
-                            'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
-                            'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
-                            'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
-                        ],
-                        'default' => false,
-                    ],
-                    'placeholder' => [
-                        'display' => __('Placeholder'),
-                        'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
-                        'type' => 'text',
-                        'width' => 50,
-                    ],
-                    'character_limit' => [
-                        'display' => __('Character Limit'),
-                        'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
-                        'type' => 'text',
-                        'width' => 50,
-                    ],
-                    'previews' => [
-                        'display' => __('Field Previews'),
-                        'instructions' => __('statamic::fieldtypes.bard.config.previews'),
-                        'type' => 'toggle',
-                        'default' => true,
-                        'width' => 50,
-                    ],
-                    'smart_typography' => [
-                        'display' => __('Smart Typography'),
-                        'instructions' => __('statamic::fieldtypes.bard.config.smart_typography'),
-                        'type' => 'toggle',
-                        'default' => false,
-                        'width' => 50,
-                    ],
                     'buttons' => [
                         'display' => __('Buttons'),
                         'instructions' => __('statamic::fieldtypes.bard.config.buttons'),
                         'type' => 'bard_buttons_setting',
+                        'full_width_setting' => true,
                         'default' => [
                             'h2',
                             'h3',
@@ -88,6 +52,12 @@ protected function configFieldItems(): array
                             'table',
                         ],
                     ],
+                    'smart_typography' => [
+                        'display' => __('Smart Typography'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.smart_typography'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
                     'save_html' => [
                         'display' => __('Save as HTML'),
                         'instructions' => __('statamic::fieldtypes.bard.config.save_html'),
@@ -97,7 +67,6 @@ protected function configFieldItems(): array
                         'display' => __('Inline'),
                         'instructions' => __('statamic::fieldtypes.bard.config.inline'),
                         'type' => 'toggle',
-                        'width' => 50,
                     ],
                     'toolbar_mode' => [
                         'display' => __('Toolbar Mode'),
@@ -108,48 +77,30 @@ protected function configFieldItems(): array
                             'fixed' => __('Fixed'),
                             'floating' => __('Floating'),
                         ],
-                        'width' => 50,
                     ],
                     'reading_time' => [
                         'display' => __('Show Reading Time'),
                         'instructions' => __('statamic::fieldtypes.bard.config.reading_time'),
                         'type' => 'toggle',
                         'default' => false,
-                        'width' => 50,
-                    ],
-                    'fullscreen' => [
-                        'display' => __('Allow Fullscreen Mode'),
-                        'instructions' => __('statamic::fieldtypes.bard.config.fullscreen'),
-                        'type' => 'toggle',
-                        'default' => true,
-                        'width' => 50,
                     ],
                     'allow_source' => [
                         'display' => __('Allow Source Mode'),
                         'instructions' => __('statamic::fieldtypes.bard.config.allow_source'),
                         'type' => 'toggle',
                         'default' => true,
-                        'width' => 50,
                     ],
                     'enable_input_rules' => [
                         'display' => __('Enable Input Rules'),
                         'instructions' => __('statamic::fieldtypes.bard.config.enable_input_rules'),
                         'type' => 'toggle',
                         'default' => true,
-                        'width' => 50,
                     ],
                     'enable_paste_rules' => [
                         'display' => __('Enable Paste Rules'),
                         'instructions' => __('statamic::fieldtypes.bard.config.enable_paste_rules'),
                         'type' => 'toggle',
                         'default' => true,
-                        'width' => 50,
-                    ],
-                    'antlers' => [
-                        'display' => 'Antlers',
-                        'instructions' => __('statamic::fieldtypes.any.config.antlers'),
-                        'type' => 'toggle',
-                        'width' => 50,
                     ],
                     'remove_empty_nodes' => [
                         'display' => __('Remove Empty Nodes'),
@@ -162,50 +113,44 @@ protected function configFieldItems(): array
                             'trim' => __('Remove empty nodes at the start and end'),
                         ],
                         'default' => 'false',
-                        'width' => 50,
                     ],
-                ],
-            ],
-            [
-                'display' => 'Sets',
-                'fields' => [
-                    'always_show_set_button' => [
-                        'display' => __('Always Show Set Button'),
-                        'instructions' => __('statamic::fieldtypes.bard.config.always_show_set_button'),
-                        'type' => 'toggle',
-                        'default' => false,
-                        'width' => 50,
+                    'placeholder' => [
+                        'display' => __('Placeholder'),
+                        'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
+                        'type' => 'text',
                     ],
-                    'sets' => [
-                        'display' => __('Sets'),
-                        'instructions' => __('statamic::fieldtypes.bard.config.sets'),
-                        'type' => 'sets',
-                        'require_set' => false,
+                    'character_limit' => [
+                        'display' => __('Character Limit'),
+                        'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
+                        'type' => 'integer',
+                    ],
+                    'antlers' => [
+                        'display' => 'Antlers',
+                        'instructions' => __('statamic::fieldtypes.any.config.antlers'),
+                        'type' => 'toggle',
                     ],
                 ],
             ],
             [
-                'display' => 'Links',
+                'display' => __('Links'),
+                'instructions' => __('statamic::fieldtypes.bard.config.section.links.instructions'),
                 'fields' => [
                     'link_noopener' => [
                         'display' => __('Link Noopener'),
                         'instructions' => __('statamic::fieldtypes.bard.config.link_noopener'),
                         'type' => 'toggle',
                         'default' => false,
-                        'width' => 50,
                     ],
                     'link_noreferrer' => [
                         'display' => __('Link Noreferrer'),
                         'instructions' => __('statamic::fieldtypes.bard.config.link_noreferrer'),
                         'type' => 'toggle',
                         'default' => false,
-                        'width' => 50,
                     ],
                     'target_blank' => [
                         'display' => __('Target Blank'),
                         'type' => 'toggle',
                         'default' => false,
-                        'width' => 50,
                         'instructions' => __('statamic::fieldtypes.bard.config.target_blank'),
                     ],
                     'link_collections' => [
@@ -226,6 +171,43 @@ protected function configFieldItems(): array
                     ],
                 ],
             ],
+            [
+                'display' => __('Sets'),
+                'instructions' => __('statamic::fieldtypes.bard.config.section.sets.instructions'),
+                'fields' => [
+                    'always_show_set_button' => [
+                        'display' => __('Always Show Set Button'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.always_show_set_button'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'collapse' => [
+                        'display' => __('Collapse'),
+                        'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
+                        'type' => 'select',
+                        'cast_booleans' => true,
+                        'options' => [
+                            'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
+                            'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
+                            'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
+                        ],
+                        'default' => false,
+                    ],
+                    'previews' => [
+                        'display' => __('Field Previews'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.previews'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'sets' => [
+                        'display' => __('Sets'),
+                        'instructions' => __('statamic::fieldtypes.bard.config.sets'),
+                        'type' => 'sets',
+                        'full_width_setting' => true,
+                        'require_set' => false,
+                    ],
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/ButtonGroup.php b/src/Fieldtypes/ButtonGroup.php
index bed38335832..0341de5de94 100644
--- a/src/Fieldtypes/ButtonGroup.php
+++ b/src/Fieldtypes/ButtonGroup.php
@@ -14,18 +14,23 @@ class ButtonGroup extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'options' => [
+            [
                 'display' => __('Options'),
-                'instructions' => __('statamic::fieldtypes.radio.config.options'),
-                'type' => 'array',
-                'value_header' => __('Label').' ('.__('Optional').')',
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'width' => 50,
-            ],
+                'fields' => [
+                    'options' => [
+                        'display' => __('Options'),
+                        'instructions' => __('statamic::fieldtypes.radio.config.options'),
+                        'type' => 'array',
+                        'value_header' => __('Label').' ('.__('Optional').')',
+                        'add_button' => __('Add Option'),
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                    ],
+                ]
+            ]
         ];
     }
 }
diff --git a/src/Fieldtypes/Checkboxes.php b/src/Fieldtypes/Checkboxes.php
index dcbda54eddc..b62b16652db 100644
--- a/src/Fieldtypes/Checkboxes.php
+++ b/src/Fieldtypes/Checkboxes.php
@@ -15,24 +15,33 @@ class Checkboxes extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'inline' => [
-                'display' => __('Inline'),
-                'instructions' => __('statamic::fieldtypes.checkboxes.config.inline'),
-                'type' => 'toggle',
-                'width' => 50,
+            [
+                'display' => __('Checkbox Options'),
+                'fields' => [
+                    'options' => [
+                        'display' => __('Options'),
+                        'instructions' => __('statamic::fieldtypes.checkboxes.config.options'),
+                        'type' => 'array',
+                        'field' => [
+                            'type' => 'text',
+                        ],
+                    ],
+                ],
             ],
-            'options' => [
-                'display' => __('Options'),
-                'instructions' => __('statamic::fieldtypes.checkboxes.config.options'),
-                'type' => 'array',
-                'key_header' => __('Key'),
-                'value_header' => __('Label').' ('.__('Optional').')',
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'width' => 50,
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'inline' => [
+                        'display' => __('Inline'),
+                        'instructions' => __('statamic::fieldtypes.checkboxes.config.inline'),
+                        'type' => 'toggle',
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                    ],
+                ],
             ],
         ];
     }
diff --git a/src/Fieldtypes/Code.php b/src/Fieldtypes/Code.php
index 937269543d6..f346af9e0b6 100644
--- a/src/Fieldtypes/Code.php
+++ b/src/Fieldtypes/Code.php
@@ -14,98 +14,97 @@ class Code extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'theme' => [
-                'display' => __('Display'),
-                'instructions' => __('statamic::fieldtypes.code.config.theme'),
-                'type' => 'select',
-                'default' => 'material',
-                'options' => [
-                    'material' => __('Dark'),
-                    'light' => __('Light'),
-                ],
-            ],
-            'mode' => [
-                'display' => __('Default Mode'),
-                'instructions' => __('statamic::fieldtypes.code.config.mode'),
-                'type' => 'select',
-                'default' => 'htmlmixed',
-                'width' => 50,
-                'options' => [
-                    'clike' => 'C-Like',
-                    'css' => 'CSS',
-                    'diff' => 'Diff',
-                    'go' => 'Go',
-                    'haml' => 'HAML',
-                    'handlebars' => 'Handlebars',
-                    'htmlmixed' => 'HTML',
-                    'less' => 'LESS',
-                    'markdown' => 'Markdown',
-                    'gfm' => 'Markdown (Github Flavored)',
-                    'nginx' => 'Nginx',
-                    'text/x-java' => 'Java',
-                    'javascript' => 'JavaScript',
-                    'jsx' => 'JSX',
-                    'text/x-objectivec' => 'Objective-C',
-                    'php' => 'PHP',
-                    'python' => 'Python',
-                    'ruby' => 'Ruby',
-                    'scss' => 'SCSS',
-                    'shell' => 'Shell',
-                    'sql' => 'SQL',
-                    'twig' => 'Twig',
-                    'vue' => 'Vue',
-                    'xml' => 'XML',
-                    'yaml-frontmatter' => 'YAML',
-                ],
-            ],
-            'mode_selectable' => [
-                'display' => __('Selectable Mode'),
-                'instructions' => __('statamic::fieldtypes.code.config.mode_selectable'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'indent_type' => [
-                'display' => __('Indent Type'),
-                'instructions' => __('statamic::fieldtypes.code.config.indent_type'),
-                'type' => 'select',
-                'default' => 'tabs',
-                'options' => [
-                    'tabs' => __('Tabs'),
-                    'spaces' => __('Spaces'),
-                ],
-                'width' => 50,
-            ],
-            'indent_size' => [
-                'display' => __('Indent Size'),
-                'instructions' => __('statamic::fieldtypes.code.config.indent_size'),
-                'type' => 'integer',
-                'default' => 4,
-                'width' => 50,
-            ],
-            'key_map' => [
-                'display' => __('Key Mappings'),
-                'instructions' => __('statamic::fieldtypes.code.config.key_map'),
-                'type' => 'select',
-                'default' => 'default',
-                'options' => [
-                    'default' => 'Default',
-                    'sublime' => 'Sublime',
-                    'vim' => 'Vim',
-                ],
-                'width' => 50,
-            ],
-            'line_numbers' => [
-                'display' => __('Show Line Numbers'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'line_wrapping' => [
-                'display' => __('Enable Line Wrapping'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'theme' => [
+                        'display' => __('Theme'),
+                        'instructions' => __('statamic::fieldtypes.code.config.theme'),
+                        'type' => 'select',
+                        'default' => 'material',
+                        'options' => [
+                            'material' => __('Dark'),
+                            'light' => __('Light'),
+                        ],
+                    ],
+                    'mode' => [
+                        'display' => __('Default Mode'),
+                        'instructions' => __('statamic::fieldtypes.code.config.mode'),
+                        'type' => 'select',
+                        'default' => 'htmlmixed',
+                        'options' => [
+                            'clike' => 'C-Like',
+                            'css' => 'CSS',
+                            'diff' => 'Diff',
+                            'go' => 'Go',
+                            'haml' => 'HAML',
+                            'handlebars' => 'Handlebars',
+                            'htmlmixed' => 'HTML',
+                            'less' => 'LESS',
+                            'markdown' => 'Markdown',
+                            'gfm' => 'Markdown (Github Flavored)',
+                            'nginx' => 'Nginx',
+                            'text/x-java' => 'Java',
+                            'javascript' => 'JavaScript',
+                            'jsx' => 'JSX',
+                            'text/x-objectivec' => 'Objective-C',
+                            'php' => 'PHP',
+                            'python' => 'Python',
+                            'ruby' => 'Ruby',
+                            'scss' => 'SCSS',
+                            'shell' => 'Shell',
+                            'sql' => 'SQL',
+                            'twig' => 'Twig',
+                            'vue' => 'Vue',
+                            'xml' => 'XML',
+                            'yaml-frontmatter' => 'YAML',
+                        ],
+                    ],
+                    'mode_selectable' => [
+                        'display' => __('Selectable Mode'),
+                        'instructions' => __('statamic::fieldtypes.code.config.mode_selectable'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'indent_type' => [
+                        'display' => __('Indent Type'),
+                        'instructions' => __('statamic::fieldtypes.code.config.indent_type'),
+                        'type' => 'select',
+                        'default' => 'tabs',
+                        'options' => [
+                            'tabs' => __('Tabs'),
+                            'spaces' => __('Spaces'),
+                        ],
+                    ],
+                    'indent_size' => [
+                        'display' => __('Indent Size'),
+                        'instructions' => __('statamic::fieldtypes.code.config.indent_size'),
+                        'type' => 'integer',
+                        'default' => 4,
+                    ],
+                    'key_map' => [
+                        'display' => __('Key Mappings'),
+                        'instructions' => __('statamic::fieldtypes.code.config.key_map'),
+                        'type' => 'select',
+                        'default' => 'default',
+                        'options' => [
+                            'default' => 'Default',
+                            'sublime' => 'Sublime',
+                            'vim' => 'Vim',
+                        ],
+                    ],
+                    'line_numbers' => [
+                        'display' => __('Show Line Numbers'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'line_wrapping' => [
+                        'display' => __('Enable Line Wrapping'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Color.php b/src/Fieldtypes/Color.php
index 1ae5c09da83..6e0ea2d5ef4 100644
--- a/src/Fieldtypes/Color.php
+++ b/src/Fieldtypes/Color.php
@@ -11,52 +11,54 @@ class Color extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'swatches' => [
-                'display' => __('Swatches'),
-                'instructions' => __('statamic::fieldtypes.color.config.swatches'),
-                'type' => 'list',
-            ],
-            'theme' => [
-                'display' => __('Theme'),
-                'instructions' => __('statamic::fieldtypes.color.config.theme'),
-                'type' => 'select',
-                'default' => 'classic',
-                'options' => [
-                    'classic' => __('Classic'),
-                    'nano' => __('Mini'),
-                ],
-                'width' => 50,
-            ],
-            'lock_opacity' => [
-                'display' => __('Lock Opacity'),
-                'instructions' => __('statamic::fieldtypes.color.config.lock_opacity'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'default_color_mode' => [
-                'display' => __('Default Color Mode'),
-                'instructions' => __('statamic::fieldtypes.color.config.default_color_mode'),
-                'type' => 'select',
-                'options' => ['HEXA', 'RGBA', 'HSLA', 'HSVA', 'CMYK'],
-                'default' => 'HEXA',
-                'width' => 50,
-            ],
-            'color_modes' => [
-                'display' => __('Color Modes'),
-                'instructions' => __('statamic::fieldtypes.color.config.color_modes'),
-                'type' => 'checkboxes',
-                'inline' => 'true',
-                'options' => [
-                    'hex' => 'HEXA',
-                    'rgba' => 'RGBA',
-                    'hsla' => 'HSLA',
-                    'hsva' => 'HSVA',
-                    'cmyk' => 'CMYK',
-                ],
-                'default' => 'hex',
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'swatches' => [
+                        'display' => __('Swatches'),
+                        'instructions' => __('statamic::fieldtypes.color.config.swatches'),
+                        'type' => 'list',
+                        'add_button' => __('Add Color'),
+                    ],
+                    'theme' => [
+                        'display' => __('Theme'),
+                        'instructions' => __('statamic::fieldtypes.color.config.theme'),
+                        'type' => 'select',
+                        'default' => 'classic',
+                        'options' => [
+                            'classic' => __('Classic'),
+                            'nano' => __('Mini'),
+                        ],
+                    ],
+                    'lock_opacity' => [
+                        'display' => __('Lock Opacity'),
+                        'instructions' => __('statamic::fieldtypes.color.config.lock_opacity'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'default_color_mode' => [
+                        'display' => __('Default Color Mode'),
+                        'instructions' => __('statamic::fieldtypes.color.config.default_color_mode'),
+                        'type' => 'select',
+                        'options' => ['HEXA', 'RGBA', 'HSLA', 'HSVA', 'CMYK'],
+                        'default' => 'HEXA',
+                    ],
+                    'color_modes' => [
+                        'display' => __('Color Modes'),
+                        'instructions' => __('statamic::fieldtypes.color.config.color_modes'),
+                        'type' => 'checkboxes',
+                        'inline' => 'true',
+                        'options' => [
+                            'hex' => 'HEXA',
+                            'rgba' => 'RGBA',
+                            'hsla' => 'HSLA',
+                            'hsva' => 'HSVA',
+                            'cmyk' => 'CMYK',
+                        ],
+                        'default' => 'hex',
+                    ],
+                ]
+            ]
         ];
     }
 }
diff --git a/src/Fieldtypes/Date.php b/src/Fieldtypes/Date.php
index 3611adc2277..4d7464dafe9 100644
--- a/src/Fieldtypes/Date.php
+++ b/src/Fieldtypes/Date.php
@@ -24,79 +24,91 @@ class Date extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            // @TODO hook up multiple mode
-            'mode' => [
-                'display' => __('Mode'),
-                'instructions' => __('statamic::fieldtypes.date.config.mode'),
-                'type' => 'select',
-                'default' => 'single',
-                'width' => 50,
-                'options' => [
-                    'single' => __('Single'),
-                    // 'multiple' => __('Multiple'),
-                    'range' => __('Range'),
-                ],
+            [
+                'display' => __('Appearance'),
+                'fields' => [
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.date.config.mode'),
+                        'type' => 'select',
+                        'default' => 'single',
+                        'options' => [
+                            'single' => __('Single'),
+                            // 'multiple' => __('Multiple'), // @TODO hook up
+                            'range' => __('Range'),
+                        ],
+                    ],
+                    'inline' => [
+                        'display' => __('Inline'),
+                        'instructions' => __('statamic::fieldtypes.date.config.inline'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'full_width' => [
+                        'display' => __('Full Width'),
+                        'instructions' => __('statamic::fieldtypes.date.config.full_width'),
+                        'type' => 'toggle',
+                        'default' => false,
+                        'if' => [
+                            'inline' => true,
+                        ],
+                    ],
+                    'columns' => [
+                        'display' => __('Columns'),
+                        'instructions' => __('statamic::fieldtypes.date.config.columns'),
+                        'type' => 'integer',
+                        'default' => 1,
+                    ],
+                    'rows' => [
+                        'display' => __('Rows'),
+                        'instructions' => __('statamic::fieldtypes.date.config.rows'),
+                        'type' => 'integer',
+                        'default' => 1,
+                    ],
+                ]
             ],
-            'format' => [
-                'display' => __('Format'),
-                'instructions' => __('statamic::fieldtypes.date.config.format'),
-                'type' => 'text',
-                'width' => 50,
+            [
+                'display' => __('Timepicker'),
+                'fields' => [
+                    'time_enabled'  => [
+                        'display' => __('Time Enabled'),
+                        'instructions' => __('statamic::fieldtypes.date.config.time_enabled'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'time_seconds_enabled'  => [
+                        'display' => __('Show Seconds'),
+                        'instructions' => __('statamic::fieldtypes.date.config.time_seconds_enabled'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                ]
             ],
-            'earliest_date' => [
-                'display' => __('Earliest Date'),
-                'instructions' => __('statamic::fieldtypes.date.config.earliest_date'),
-                'type' => 'date',
-                'width' => 50,
-            ],
-            'latest_date' => [
-                'display' => __('Latest Date'),
-                'instructions' => __('statamic::fieldtypes.date.config.latest_date'),
-                'type' => 'date',
-                'width' => 50,
-            ],
-            'time_enabled'  => [
-                'display' => __('Time Enabled'),
-                'instructions' => __('statamic::fieldtypes.date.config.time_enabled'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'time_seconds_enabled'  => [
-                'display' => __('Show Seconds'),
-                'instructions' => __('statamic::fieldtypes.date.config.time_seconds_enabled'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'full_width' => [
-                'display' => __('Full Width'),
-                'instructions' => __('statamic::fieldtypes.date.config.full_width'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'inline' => [
-                'display' => __('Inline'),
-                'instructions' => __('statamic::fieldtypes.date.config.inline'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'columns' => [
-                'display' => __('Columns'),
-                'instructions' => __('statamic::fieldtypes.date.config.columns'),
-                'type' => 'integer',
-                'default' => 1,
-                'width' => 50,
-            ],
-            'rows' => [
-                'display' => __('Rows'),
-                'instructions' => __('statamic::fieldtypes.date.config.rows'),
-                'type' => 'integer',
-                'default' => 1,
-                'width' => 50,
+            [
+                'display' => __('Boundaries'),
+                'fields' => [
+                    'earliest_date' => [
+                        'display' => __('Earliest Date'),
+                        'instructions' => __('statamic::fieldtypes.date.config.earliest_date'),
+                        'type' => 'date',
+                    ],
+                    'latest_date' => [
+                        'display' => __('Latest Date'),
+                        'instructions' => __('statamic::fieldtypes.date.config.latest_date'),
+                        'type' => 'date',
+                    ],
+                ]
             ],
+            [
+                'display' => __('Data Format'),
+                'fields' => [
+                    'format' => [
+                        'display' => __('Format'),
+                        'instructions' => __('statamic::fieldtypes.date.config.format'),
+                        'type' => 'text',
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Entries.php b/src/Fieldtypes/Entries.php
index 20e362a6312..a3e30a0db92 100644
--- a/src/Fieldtypes/Entries.php
+++ b/src/Fieldtypes/Entries.php
@@ -55,20 +55,42 @@ class Entries extends Relationship
 
     protected function configFieldItems(): array
     {
-        return array_merge(parent::configFieldItems(), [
-            'create' => [
-                'display' => __('Allow Creating'),
-                'instructions' => __('statamic::fieldtypes.entries.config.create'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'collections' => [
-                'display' => __('Collections'),
-                'type' => 'collections',
-                'mode' => 'select',
-            ],
-        ]);
+        return [
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'max_items' => [
+                        'display' => __('Max Items'),
+                        'instructions' => __('statamic::messages.max_items_instructions'),
+                        'min' => 1,
+                        'type' => 'integer',
+                    ],
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.relationship.config.mode'),
+                        'type' => 'radio',
+                        'default' => 'default',
+                        'options' => [
+                            'default' => __('Stack Selector'),
+                            'select' => __('Select Dropdown'),
+                            'typeahead' => __('Typeahead Field'),
+                        ],
+                    ],
+                    'create' => [
+                        'display' => __('Allow Creating'),
+                        'instructions' => __('statamic::fieldtypes.entries.config.create'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'collections' => [
+                        'display' => __('Collections'),
+                        'instructions' => __('statamic::fieldtypes.entries.config.collections'),
+                        'type' => 'collections',
+                        'mode' => 'select',
+                    ],
+                ]
+            ]
+        ];
     }
 
     public function getIndexItems($request)
diff --git a/src/Fieldtypes/Floatval.php b/src/Fieldtypes/Floatval.php
index 98d37d33f13..afc0d97e19a 100644
--- a/src/Fieldtypes/Floatval.php
+++ b/src/Fieldtypes/Floatval.php
@@ -18,7 +18,6 @@ protected function configFieldItems(): array
                 'display' => __('Default Value'),
                 'instructions' => __('statamic::messages.fields_default_instructions'),
                 'type' => 'text',
-                'width' => 50,
             ],
         ];
     }
diff --git a/src/Fieldtypes/Grid.php b/src/Fieldtypes/Grid.php
index fa6cbdc02eb..a109c56da1c 100644
--- a/src/Fieldtypes/Grid.php
+++ b/src/Fieldtypes/Grid.php
@@ -21,46 +21,53 @@ class Grid extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'fields' => [
+            [
                 'display' => __('Fields'),
-                'instructions' => __('statamic::fieldtypes.grid.config.fields'),
-                'type' => 'fields',
-            ],
-            'mode' => [
-                'display' => __('Mode'),
-                'instructions' => __('statamic::fieldtypes.grid.config.mode'),
-                'type' => 'select',
-                'options' => [
-                    'table' => __('Table'),
-                    'stacked' => __('Stacked'),
-                ],
-                'default' => 'table',
-            ],
-            'max_rows' => [
-                'display' => __('Maximum Rows'),
-                'instructions' => __('statamic::fieldtypes.grid.config.max_rows'),
-                'type' => 'integer',
-                'width' => '50',
-            ],
-            'min_rows' => [
-                'display' => __('Minimum Rows'),
-                'instructions' => __('statamic::fieldtypes.grid.config.min_rows'),
-                'type' => 'integer',
-                'width' => '50',
-            ],
-            'add_row' => [
-                'display' => __('Add Row Label'),
-                'instructions' => __('statamic::fieldtypes.grid.config.add_row'),
-                'type' => 'text',
-                'width' => '50',
-            ],
-            'reorderable' => [
-                'display' => __('Reorderable'),
-                'instructions' => __('statamic::fieldtypes.grid.config.reorderable'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => '50',
+                'fields' => [
+                    'fields' => [
+                        'display' => __('Fields'),
+                        'instructions' => __('statamic::fieldtypes.grid.config.fields'),
+                        'type' => 'fields',
+                        'full_width_setting' => true,
+                    ],
+                ]
             ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.grid.config.mode'),
+                        'type' => 'select',
+                        'options' => [
+                            'table' => __('Table'),
+                            'stacked' => __('Stacked'),
+                        ],
+                        'default' => 'table',
+                    ],
+                    'max_rows' => [
+                        'display' => __('Maximum Rows'),
+                        'instructions' => __('statamic::fieldtypes.grid.config.max_rows'),
+                        'type' => 'integer',
+                    ],
+                    'min_rows' => [
+                        'display' => __('Minimum Rows'),
+                        'instructions' => __('statamic::fieldtypes.grid.config.min_rows'),
+                        'type' => 'integer',
+                    ],
+                    'add_row' => [
+                        'display' => __('Add Row Label'),
+                        'instructions' => __('statamic::fieldtypes.grid.config.add_row'),
+                        'type' => 'text',
+                    ],
+                    'reorderable' => [
+                        'display' => __('Reorderable'),
+                        'instructions' => __('statamic::fieldtypes.grid.config.reorderable'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Hidden.php b/src/Fieldtypes/Hidden.php
index ef970a7ed63..021ce47342a 100644
--- a/src/Fieldtypes/Hidden.php
+++ b/src/Fieldtypes/Hidden.php
@@ -15,7 +15,6 @@ protected function configFieldItems(): array
                 'display' => __('Default Value'),
                 'instructions' => __('statamic::messages.fields_default_instructions'),
                 'type' => 'text',
-                'width' => 50,
             ],
         ];
     }
diff --git a/src/Fieldtypes/Html.php b/src/Fieldtypes/Html.php
index f0624d9740f..fe9a9cee7db 100644
--- a/src/Fieldtypes/Html.php
+++ b/src/Fieldtypes/Html.php
@@ -12,11 +12,17 @@ class Html extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'html' => [
-                'display' => 'HTML',
-                'type' => 'code',
-                'mode' => 'htmlmixed',
-            ],
+            [
+                'display' => __('Appearance'),
+                'fields' => [
+                    'html' => [
+                        'display' => 'HTML',
+                        'instructions' => __('statamic::fieldtypes.html.config.html_instruct'),
+                        'type' => 'code',
+                        'mode' => 'htmlmixed',
+                    ],
+                ]
+            ]
         ];
     }
 }
diff --git a/src/Fieldtypes/Integer.php b/src/Fieldtypes/Integer.php
index eb83ce2d5b2..ff101f63a15 100644
--- a/src/Fieldtypes/Integer.php
+++ b/src/Fieldtypes/Integer.php
@@ -13,24 +13,32 @@ class Integer extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'prepend' => [
-                'display' => __('Prepend'),
-                'instructions' => __('statamic::fieldtypes.text.config.prepend'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'append' => [
-                'display' => __('Append'),
-                'instructions' => __('statamic::fieldtypes.text.config.append'),
-                'type' => 'text',
-                'width' => 50,
+            [
+                'display' => __('Behavior'),
+                'fields' => [
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                    ],
+                ]
             ],
+            [
+                'display' => __('Appearance'),
+                'fields' => [
+                    'prepend' => [
+                        'display' => __('Prepend'),
+                        'instructions' => __('statamic::fieldtypes.text.config.prepend'),
+                        'type' => 'text',
+                    ],
+                    'append' => [
+                        'display' => __('Append'),
+                        'instructions' => __('statamic::fieldtypes.text.config.append'),
+                        'type' => 'text',
+                    ],
+
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Link.php b/src/Fieldtypes/Link.php
index eb96e411a77..d4f4da66ed6 100644
--- a/src/Fieldtypes/Link.php
+++ b/src/Fieldtypes/Link.php
@@ -19,19 +19,24 @@ class Link extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'collections' => [
-                'display' => __('Collections'),
-                'instructions' => __('statamic::fieldtypes.link.config.collections'),
-                'type' => 'collections',
-                'mode' => 'select',
-            ],
-            'container' => [
-                'display' => __('Container'),
-                'instructions' => __('statamic::fieldtypes.link.config.container'),
-                'type' => 'asset_container',
-                'mode' => 'select',
-                'max_items' => 1,
-            ],
+            [
+                'display' => __('Behavior'),
+                'fields' => [
+                    'collections' => [
+                        'display' => __('Collections'),
+                        'instructions' => __('statamic::fieldtypes.link.config.collections'),
+                        'type' => 'collections',
+                        'mode' => 'select',
+                    ],
+                    'container' => [
+                        'display' => __('Container'),
+                        'instructions' => __('statamic::fieldtypes.link.config.container'),
+                        'type' => 'asset_container',
+                        'mode' => 'select',
+                        'max_items' => 1,
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Lists.php b/src/Fieldtypes/Lists.php
index e65744f7da1..e42dba1433a 100644
--- a/src/Fieldtypes/Lists.php
+++ b/src/Fieldtypes/Lists.php
@@ -17,7 +17,6 @@ protected function configFieldItems(): array
                 'display' => __('Default Value'),
                 'instructions' => __('statamic::messages.fields_default_instructions'),
                 'type' => 'list',
-                'width' => 50,
             ],
         ];
     }
diff --git a/src/Fieldtypes/Markdown.php b/src/Fieldtypes/Markdown.php
index 7751ebf07cb..eedbe5527b0 100644
--- a/src/Fieldtypes/Markdown.php
+++ b/src/Fieldtypes/Markdown.php
@@ -16,73 +16,81 @@ class Markdown extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'container' => [
-                'display' => __('Container'),
-                'instructions' => __('statamic::fieldtypes.markdown.config.container'),
-                'type' => 'asset_container',
-                'mode' => 'select',
-                'max_items' => 1,
-                'width' => 50,
+            [
+                'display' => 'Editor',
+                'fields' => [
+                    'automatic_line_breaks' => [
+                        'display' => __('Automatic Line Breaks'),
+                        'instructions' => __('statamic::fieldtypes.markdown.config.automatic_line_breaks'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'automatic_links' => [
+                        'display' => __('Automatic Links'),
+                        'instructions' => __('statamic::fieldtypes.markdown.config.automatic_links'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'escape_markup' => [
+                        'display' => __('Escape Markup'),
+                        'instructions' => __('statamic::fieldtypes.markdown.config.escape_markup'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'smartypants' => [
+                        'display' => __('Smartypants'),
+                        'instructions' => __('statamic::fieldtypes.markdown.config.smartypants'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'parser' => [
+                        'display' => __('Parser'),
+                        'instructions' => __('statamic::fieldtypes.markdown.config.parser'),
+                        'type' => 'text',
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'markdown',
+                    ],
+                ]
             ],
-            'folder' => [
-                'display' => __('Folder'),
-                'instructions' => __('statamic::fieldtypes.markdown.config.folder'),
-                'type' => 'asset_folder',
-                'max_items' => 1,
-                'width' => 50,
+            [
+                'display' => 'Assets',
+                'fields' => [
+                    'container' => [
+                        'display' => __('Container'),
+                        'instructions' => __('statamic::fieldtypes.markdown.config.container'),
+                        'type' => 'asset_container',
+                        'mode' => 'select',
+                        'max_items' => 1,
+                    ],
+                    'folder' => [
+                        'display' => __('Folder'),
+                        'instructions' => __('statamic::fieldtypes.markdown.config.folder'),
+                        'type' => 'asset_folder',
+                        'max_items' => 1,
+                        'if' => [
+                            'container' => 'not empty',
+                        ],
+                    ],
+                    'restrict' => [
+                        'display' => __('Restrict'),
+                        'instructions' => __('statamic::fieldtypes.markdown.config.restrict'),
+                        'type' => 'toggle',
+                    ],
+                    ]
             ],
-            'restrict' => [
-                'display' => __('Restrict'),
-                'instructions' => __('statamic::fieldtypes.markdown.config.restrict'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'automatic_line_breaks' => [
-                'display' => __('Automatic Line Breaks'),
-                'instructions' => __('statamic::fieldtypes.markdown.config.automatic_line_breaks'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'automatic_links' => [
-                'display' => __('Automatic Links'),
-                'instructions' => __('statamic::fieldtypes.markdown.config.automatic_links'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'escape_markup' => [
-                'display' => __('Escape Markup'),
-                'instructions' => __('statamic::fieldtypes.markdown.config.escape_markup'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'smartypants' => [
-                'display' => __('Smartypants'),
-                'instructions' => __('statamic::fieldtypes.markdown.config.smartypants'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'parser' => [
-                'display' => __('Parser'),
-                'instructions' => __('statamic::fieldtypes.markdown.config.parser'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'antlers' => [
+            [
                 'display' => 'Antlers',
-                'instructions' => __('statamic::fieldtypes.any.config.antlers'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'markdown',
-                'width' => 100,
-            ],
+                'fields' => [
+                    'antlers' => [
+                        'display' => 'Allow Antlers',
+                        'instructions' => __('statamic::fieldtypes.any.config.antlers'),
+                        'type' => 'toggle',
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Radio.php b/src/Fieldtypes/Radio.php
index dd2d0d7c5fe..de6344888ba 100644
--- a/src/Fieldtypes/Radio.php
+++ b/src/Fieldtypes/Radio.php
@@ -15,30 +15,39 @@ class Radio extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'options' => [
-                'display' => __('Options'),
-                'instructions' => __('statamic::fieldtypes.radio.config.options'),
-                'type' => 'array',
-                'value_header' => __('Label').' ('.__('Optional').')',
+            [
+                'display' => __('Radio Options'),
+                'fields' => [
+                    'options' => [
+                        'display' => __('Options'),
+                        'instructions' => __('statamic::fieldtypes.radio.config.options'),
+                        'type' => 'array',
+                        'field' => [
+                            'type' => 'text',
+                        ],
+                    ],
+                ],
             ],
-            'inline' => [
-                'display' => __('Inline'),
-                'instructions' => __('statamic::fieldtypes.radio.config.inline'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'cast_booleans' => [
-                'display' => __('Cast Booleans'),
-                'instructions' => __('statamic::fieldtypes.any.config.cast_booleans'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'width' => 50,
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'inline' => [
+                        'display' => __('Inline'),
+                        'instructions' => __('statamic::fieldtypes.radio.config.inline'),
+                        'type' => 'toggle',
+                    ],
+                    'cast_booleans' => [
+                        'display' => __('Cast Booleans'),
+                        'instructions' => __('statamic::fieldtypes.any.config.cast_booleans'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                    ],
+                ],
             ],
         ];
     }
diff --git a/src/Fieldtypes/Range.php b/src/Fieldtypes/Range.php
index a1ced9d7d25..f3d372cd52a 100644
--- a/src/Fieldtypes/Range.php
+++ b/src/Fieldtypes/Range.php
@@ -12,51 +12,51 @@ class Range extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'hidden' => [
-                'type' => 'hidden',
-                'width' => 50,
-            ],
-            'min' => [
-                'display' => __('Min'),
-                'instructions' => __('statamic::fieldtypes.range.config.min'),
-                'type' => 'integer',
-                'default' => 0,
-                'width' => 50,
-            ],
-            'max' => [
-                'display' => __('Max'),
-                'instructions' => __('statamic::fieldtypes.range.config.max'),
-                'type' => 'integer',
-                'default' => 100,
-                'width' => 50,
-            ],
-            'step' => [
-                'display' => __('Step'),
-                'instructions' => __('statamic::fieldtypes.range.config.step'),
-                'type' => 'integer',
-                'default' => 1,
-                'width' => 50,
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'input_type' => 'number',
-                'default' => null,
-                'width' => 50,
-            ],
-            'prepend' => [
-                'display' => __('Prepend'),
-                'instructions' => __('statamic::fieldtypes.range.config.prepend'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'append' => [
-                'display' => __('Append'),
-                'instructions' => __('statamic::fieldtypes.range.config.append'),
-                'type' => 'text',
-                'width' => 50,
+            [
+                'display' => __('Behavior'),
+                'fields' => [
+                    'min' => [
+                        'display' => __('Min'),
+                        'instructions' => __('statamic::fieldtypes.range.config.min'),
+                        'type' => 'integer',
+                        'default' => 0,
+                    ],
+                    'max' => [
+                        'display' => __('Max'),
+                        'instructions' => __('statamic::fieldtypes.range.config.max'),
+                        'type' => 'integer',
+                        'default' => 100,
+                    ],
+                    'step' => [
+                        'display' => __('Step'),
+                        'instructions' => __('statamic::fieldtypes.range.config.step'),
+                        'type' => 'integer',
+                        'default' => 1,
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                        'input_type' => 'number',
+                        'default' => null,
+                    ],
+                ]
             ],
+            [
+                'display' => __('Appearance'),
+                'fields' => [
+                    'prepend' => [
+                        'display' => __('Prepend'),
+                        'instructions' => __('statamic::fieldtypes.range.config.prepend'),
+                        'type' => 'text',
+                    ],
+                    'append' => [
+                        'display' => __('Append'),
+                        'instructions' => __('statamic::fieldtypes.range.config.append'),
+                        'type' => 'text',
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Relationship.php b/src/Fieldtypes/Relationship.php
index 57643a06091..cf773d1d9a0 100644
--- a/src/Fieldtypes/Relationship.php
+++ b/src/Fieldtypes/Relationship.php
@@ -30,25 +30,28 @@ abstract class Relationship extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'max_items' => [
-                'display' => __('Max Items'),
-                'instructions' => __('statamic::messages.max_items_instructions'),
-                'min' => 1,
-                'type' => 'integer',
-                'width' => 50,
-            ],
-            'mode' => [
-                'display' => __('Mode'),
-                'instructions' => __('statamic::fieldtypes.relationship.config.mode'),
-                'type' => 'radio',
-                'default' => 'default',
-                'options' => [
-                    'default' => __('Stack Selector'),
-                    'select' => __('Select Dropdown'),
-                    'typeahead' => __('Typeahead Field'),
-                ],
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'max_items' => [
+                        'display' => __('Max Items'),
+                        'instructions' => __('statamic::messages.max_items_instructions'),
+                        'min' => 1,
+                        'type' => 'integer',
+                    ],
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.relationship.config.mode'),
+                        'type' => 'radio',
+                        'default' => 'default',
+                        'options' => [
+                            'default' => __('Stack Selector'),
+                            'select' => __('Select Dropdown'),
+                            'typeahead' => __('Typeahead Field'),
+                        ],
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index e7a6399c7ae..17e0937a695 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -22,35 +22,46 @@ class Replicator extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'collapse' => [
-                'display' => __('Collapse'),
-                'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
-                'type' => 'select',
-                'cast_booleans' => true,
-                'width' => 33,
-                'options' => [
-                    'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
-                    'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
-                    'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
-                ],
-                'default' => false,
-            ],
-            'previews' => [
-                'display' => __('Field Previews'),
-                'instructions' => __('statamic::fieldtypes.replicator.config.previews'),
-                'type' => 'toggle',
-                'width' => 33,
-                'default' => true,
-            ],
-            'max_sets' => [
-                'display' => __('Max Sets'),
-                'instructions' => __('statamic::fieldtypes.replicator.config.max_sets'),
-                'type' => 'integer',
-                'width' => 33,
-            ],
-            'sets' => [
-                'type' => 'sets',
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'collapse' => [
+                        'display' => __('Collapse'),
+                        'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
+                        'type' => 'select',
+                        'cast_booleans' => true,
+                        'options' => [
+                            'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
+                            'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
+                            'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
+                        ],
+                        'default' => false,
+                    ],
+                    'previews' => [
+                        'display' => __('Field Previews'),
+                        'instructions' => __('statamic::fieldtypes.replicator.config.previews'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'max_sets' => [
+                        'display' => __('Max Sets'),
+                        'instructions' => __('statamic::fieldtypes.replicator.config.max_sets'),
+                        'type' => 'integer',
+                    ],
+                ]
             ],
+            [
+                'display' => __('Manage Sets'),
+                'instructions' => __('statamic::fieldtypes.replicator.config.sets'),
+                'fields' => [
+                    'sets' => [
+                        'display' => __('Sets'),
+                        'type' => 'sets',
+                        'hide_meta' => true,
+                        'full_width_setting' => true,
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Revealer.php b/src/Fieldtypes/Revealer.php
index 9911ab5a050..779b3c76e8c 100644
--- a/src/Fieldtypes/Revealer.php
+++ b/src/Fieldtypes/Revealer.php
@@ -14,24 +14,27 @@ class Revealer extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'mode' => [
-                'display' => __('Mode'),
-                'instructions' => __('statamic::fieldtypes.revealer.config.mode'),
-                'type' => 'select',
-                'options' => [
-                    'button' => __('Button'),
-                    'toggle' => __('Toggle'),
-                ],
-                'default' => 'button',
-                'width' => 50,
-            ],
-            'input_label' => [
-                'display' => __('Input Label'),
-                'instructions' => __('statamic::fieldtypes.revealer.config.input_label'),
-                'type' => 'text',
-                'default' => '',
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance'),
+                'fields' => [
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.revealer.config.mode'),
+                        'type' => 'select',
+                        'options' => [
+                            'button' => __('Button'),
+                            'toggle' => __('Toggle'),
+                        ],
+                        'default' => 'button',
+                    ],
+                    'input_label' => [
+                        'display' => __('Input Label'),
+                        'instructions' => __('statamic::fieldtypes.revealer.config.input_label'),
+                        'type' => 'text',
+                        'default' => '',
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Select.php b/src/Fieldtypes/Select.php
index d1b2606cc60..6b930fb2e6f 100644
--- a/src/Fieldtypes/Select.php
+++ b/src/Fieldtypes/Select.php
@@ -15,76 +15,82 @@ class Select extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'placeholder' => [
-                'display' => __('Placeholder'),
-                'instructions' => __('statamic::fieldtypes.select.config.placeholder'),
-                'type' => 'text',
-                'default' => '',
-                'width' => 50,
-            ],
-            'options' => [
+            [
                 'display' => __('Options'),
-                'instructions' => __('statamic::fieldtypes.select.config.options'),
-                'type' => 'array',
-                'key_header' => __('Key'),
-                'value_header' => __('Label').' ('.__('Optional').')',
-                'add_button' => __('Add Option'),
-            ],
-            'multiple' => [
-                'display' => __('Multiple'),
-                'instructions' => __('statamic::fieldtypes.select.config.multiple'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'max_items' => [
-                'display' => __('Max Items'),
-                'instructions' => __('statamic::messages.max_items_instructions'),
-                'min' => 1,
-                'type' => 'integer',
-                'width' => 50,
-            ],
-            'clearable' => [
-                'display' => __('Clearable'),
-                'instructions' => __('statamic::fieldtypes.select.config.clearable'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'searchable' => [
-                'display' => __('Searchable'),
-                'instructions' => __('statamic::fieldtypes.select.config.searchable'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'taggable' => [
-                'display' => __('Allow additions'),
-                'instructions' => __('statamic::fieldtypes.select.config.taggable'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'push_tags' => [
-                'display' => __('Push Tags'),
-                'instructions' => __('statamic::fieldtypes.select.config.push_tags'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'cast_booleans' => [
-                'display' => __('Cast Booleans'),
-                'instructions' => __('statamic::fieldtypes.any.config.cast_booleans'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
+                'fields' => [
+                    'options' => [
+                        'display' => __('Options'),
+                        'instructions' => __('statamic::fieldtypes.select.config.options'),
+                        'type' => 'array',
+                        'key_header' => __('Key'),
+                        'value_header' => __('Label').' ('.__('Optional').')',
+                        'add_button' => __('Add Option'),
+                    ],
+                    'taggable' => [
+                        'display' => __('Allow additions'),
+                        'instructions' => __('statamic::fieldtypes.select.config.taggable'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'push_tags' => [
+                        'display' => __('Push Tags'),
+                        'instructions' => __('statamic::fieldtypes.select.config.push_tags'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                ]
             ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'width' => 50,
+            [
+                'display' => __('Selection'),
+                'fields' => [
+                    'placeholder' => [
+                        'display' => __('Placeholder'),
+                        'instructions' => __('statamic::fieldtypes.select.config.placeholder'),
+                        'type' => 'text',
+                        'default' => '',
+                    ],
+                    'multiple' => [
+                        'display' => __('Multiple'),
+                        'instructions' => __('statamic::fieldtypes.select.config.multiple'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'max_items' => [
+                        'display' => __('Max Items'),
+                        'instructions' => __('statamic::messages.max_items_instructions'),
+                        'min' => 1,
+                        'type' => 'integer',
+                    ],
+                    'clearable' => [
+                        'display' => __('Clearable'),
+                        'instructions' => __('statamic::fieldtypes.select.config.clearable'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'searchable' => [
+                        'display' => __('Searchable'),
+                        'instructions' => __('statamic::fieldtypes.select.config.searchable'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                ]
             ],
+            [
+                'display' => __('Data'),
+                'fields' => [
+                    'cast_booleans' => [
+                        'display' => __('Cast Booleans'),
+                        'instructions' => __('statamic::fieldtypes.any.config.cast_booleans'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                    ],
+                ]
+            ]
         ];
     }
 }
diff --git a/src/Fieldtypes/Slug.php b/src/Fieldtypes/Slug.php
index 9fee7931c25..59e794e7955 100644
--- a/src/Fieldtypes/Slug.php
+++ b/src/Fieldtypes/Slug.php
@@ -11,20 +11,23 @@ class Slug extends Text
     protected function configFieldItems(): array
     {
         return [
-            'from' => [
-                'display' => __('From'),
-                'type' => 'text',
-                'instructions' => __('statamic::fieldtypes.slug.config.from'),
-                'default' => 'title',
-                'width' => 50,
-            ],
-            'generate' => [
-                'display' => __('Generate'),
-                'type' => 'toggle',
-                'instructions' => __('statamic::fieldtypes.slug.config.generate'),
-                'default' => true,
-                'width' => 50,
-            ],
+            [
+                'display' => __('Behavior'),
+                'fields' => [
+                    'from' => [
+                        'display' => __('From'),
+                        'type' => 'text',
+                        'instructions' => __('statamic::fieldtypes.slug.config.from'),
+                        'default' => 'title',
+                    ],
+                    'generate' => [
+                        'display' => __('Generate'),
+                        'type' => 'toggle',
+                        'instructions' => __('statamic::fieldtypes.slug.config.generate'),
+                        'default' => true,
+                    ],
+                ]
+            ]
         ];
     }
 }
diff --git a/src/Fieldtypes/Taggable.php b/src/Fieldtypes/Taggable.php
index 661b26555b8..86d5c4bda04 100644
--- a/src/Fieldtypes/Taggable.php
+++ b/src/Fieldtypes/Taggable.php
@@ -19,7 +19,6 @@ protected function configFieldItems(): array
                 'instructions' => __('statamic::fieldtypes.select.config.placeholder'),
                 'type' => 'text',
                 'default' => '',
-                'width' => 50,
             ],
         ];
     }
diff --git a/src/Fieldtypes/Template.php b/src/Fieldtypes/Template.php
index dcb110cbe56..868f9f674fe 100644
--- a/src/Fieldtypes/Template.php
+++ b/src/Fieldtypes/Template.php
@@ -12,27 +12,29 @@ class Template extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'hide_partials' => [
-                'display' => __('Hide Partials'),
-                'instructions' => __('statamic::fieldtypes.template.config.hide_partials'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 33,
-            ],
-            'blueprint' => [
-                'display' => __('Blueprint'),
-                'instructions' => __('statamic::fieldtypes.template.config.blueprint'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 33,
-            ],
-            'folder' => [
-                'display' => __('Folder'),
-                'instructions' => __('statamic::fieldtypes.template.config.folder'),
-                'type' => 'template_folder',
-                'max_items' => 1,
-                'width' => 33,
-            ],
+            [
+                'display' => __('Behavior'),
+                'fields' => [
+                    'hide_partials' => [
+                        'display' => __('Hide Partials'),
+                        'instructions' => __('statamic::fieldtypes.template.config.hide_partials'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'blueprint' => [
+                        'display' => __('Blueprint'),
+                        'instructions' => __('statamic::fieldtypes.template.config.blueprint'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'folder' => [
+                        'display' => __('Restrict to Folder'),
+                        'instructions' => __('statamic::fieldtypes.template.config.folder'),
+                        'type' => 'template_folder',
+                        'max_items' => 1,
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Terms.php b/src/Fieldtypes/Terms.php
index 9c71b8f3d4b..e9bdd331b32 100644
--- a/src/Fieldtypes/Terms.php
+++ b/src/Fieldtypes/Terms.php
@@ -57,20 +57,42 @@ class Terms extends Relationship
 
     protected function configFieldItems(): array
     {
-        return array_merge(parent::configFieldItems(), [
-            'create' => [
-                'display' => __('Allow Creating'),
-                'instructions' => __('statamic::fieldtypes.terms.config.create'),
-                'type' => 'toggle',
-                'default' => true,
-                'width' => 50,
-            ],
-            'taxonomies' => [
-                'display' => __('Taxonomies'),
-                'type' => 'taxonomies',
-                'mode' => 'select',
-            ],
-        ]);
+        return [
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'max_items' => [
+                        'display' => __('Max Items'),
+                        'instructions' => __('statamic::messages.max_items_instructions'),
+                        'min' => 1,
+                        'type' => 'integer',
+                    ],
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.relationship.config.mode'),
+                        'type' => 'radio',
+                        'default' => 'default',
+                        'options' => [
+                            'default' => __('Stack Selector'),
+                            'select' => __('Select Dropdown'),
+                            'typeahead' => __('Typeahead Field'),
+                        ],
+                    ],
+                    'create' => [
+                        'display' => __('Allow Creating'),
+                        'instructions' => __('statamic::fieldtypes.terms.config.create'),
+                        'type' => 'toggle',
+                        'default' => true,
+                    ],
+                    'taxonomies' => [
+                        'display' => __('Taxonomies'),
+                        'instructions' => __('statamic::fieldtypes.terms.config.taxonomies'),
+                        'type' => 'taxonomies',
+                        'mode' => 'select',
+                    ],
+                ]
+            ]
+        ];
     }
 
     public function filter()
diff --git a/src/Fieldtypes/Text.php b/src/Fieldtypes/Text.php
index 6736eaf8c8e..fe537fca38e 100644
--- a/src/Fieldtypes/Text.php
+++ b/src/Fieldtypes/Text.php
@@ -13,63 +13,71 @@ class Text extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'placeholder' => [
-                'display' => __('Placeholder'),
-                'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
-                'type' => 'text',
-                'width' => 50,
+            [
+                'display' => 'Input Behavior',
+                'fields' => [
+                    'input_type' => [
+                        'display' => __('Input Type'),
+                        'instructions' => __('statamic::fieldtypes.text.config.input_type'),
+                        'type' => 'select',
+                        'default' => 'text',
+                        'options' => [
+                            'color',
+                            'date',
+                            'email',
+                            'hidden',
+                            'month',
+                            'number',
+                            'password',
+                            'tel',
+                            'text',
+                            'time',
+                            'url',
+                            'week',
+                        ],
+                    ],
+                    'placeholder' => [
+                        'display' => __('Placeholder'),
+                        'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
+                        'type' => 'text',
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                    ],
+                    'character_limit' => [
+                        'display' => __('Character Limit'),
+                        'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
+                        'type' => 'integer',
+                    ],
+                ]
             ],
-            'input_type' => [
-                'display' => __('Input Type'),
-                'instructions' => __('statamic::fieldtypes.text.config.input_type'),
-                'type' => 'select',
-                'default' => 'text',
-                'width' => 50,
-                'options' => [
-                    'color',
-                    'date',
-                    'email',
-                    'hidden',
-                    'month',
-                    'number',
-                    'password',
-                    'tel',
-                    'text',
-                    'time',
-                    'url',
-                    'week',
-                ],
+            [
+                'display' => 'Appearance',
+                'fields' => [
+                    'prepend' => [
+                        'display' => __('Prepend'),
+                        'instructions' => __('statamic::fieldtypes.text.config.prepend'),
+                        'type' => 'text',
+                    ],
+                    'append' => [
+                        'display' => __('Append'),
+                        'instructions' => __('statamic::fieldtypes.text.config.append'),
+                        'type' => 'text',
+                    ],
+                ]
             ],
-            'character_limit' => [
-                'display' => __('Character Limit'),
-                'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
-                'type' => 'integer',
-                'width' => 50,
-            ],
-            'prepend' => [
-                'display' => __('Prepend'),
-                'instructions' => __('statamic::fieldtypes.text.config.prepend'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'append' => [
-                'display' => __('Append'),
-                'instructions' => __('statamic::fieldtypes.text.config.append'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'antlers' => [
+            [
                 'display' => 'Antlers',
-                'instructions' => __('statamic::fieldtypes.any.config.antlers'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'width' => 50,
-            ],
+                'fields' => [
+                    'antlers' => [
+                        'display' => 'Allow Antlers',
+                        'instructions' => __('statamic::fieldtypes.any.config.antlers'),
+                        'type' => 'toggle',
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Textarea.php b/src/Fieldtypes/Textarea.php
index bd1c5e2ad23..84f8c83693c 100644
--- a/src/Fieldtypes/Textarea.php
+++ b/src/Fieldtypes/Textarea.php
@@ -13,29 +13,38 @@ class Textarea extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'placeholder' => [
-                'display' => __('Placeholder'),
-                'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'character_limit' => [
-                'display' => __('Character Limit'),
-                'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
-                'type' => 'text',
-            ],
-            'antlers' => [
-                'display' => 'Antlers',
-                'instructions' => __('statamic::fieldtypes.any.config.antlers'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'textarea',
-                'width' => 100,
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'placeholder' => [
+                        'display' => __('Placeholder'),
+                        'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
+                        'type' => 'text',
+                    ],
+                    'character_limit' => [
+                        'display' => __('Character Limit'),
+                        'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
+                        'type' => 'text',
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'textarea',
+                    ],
+
+                ]
             ],
+            [
+                'display' => __('Antlers'),
+                'fields' => [
+                    'antlers' => [
+                        'display' => __('Allow Antlers'),
+                        'instructions' => __('statamic::fieldtypes.any.config.antlers'),
+                        'type' => 'toggle',
+                    ],
+
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Time.php b/src/Fieldtypes/Time.php
index 1a0bb06598c..faba1f5cb96 100644
--- a/src/Fieldtypes/Time.php
+++ b/src/Fieldtypes/Time.php
@@ -11,19 +11,22 @@ class Time extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'seconds_enabled' => [
-                'display' => __('Show Seconds'),
-                'instructions' => __('statamic::fieldtypes.time.config.seconds_enabled'),
-                'type' => 'toggle',
-                'default' => false,
-                'width' => 50,
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'seconds_enabled' => [
+                        'display' => __('Show Seconds'),
+                        'instructions' => __('statamic::fieldtypes.time.config.seconds_enabled'),
+                        'type' => 'toggle',
+                        'default' => false,
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                    ],
+                ]
+            ]
         ];
     }
 }
diff --git a/src/Fieldtypes/Toggle.php b/src/Fieldtypes/Toggle.php
index c5fe5235a9c..7d4be0a8712 100644
--- a/src/Fieldtypes/Toggle.php
+++ b/src/Fieldtypes/Toggle.php
@@ -15,18 +15,22 @@ class Toggle extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'inline_label' => [
-                'display' => __('Inline Label'),
-                'instructions' => __('statamic::fieldtypes.toggle.config.inline_label'),
-                'type' => 'text',
-                'default' => '',
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'toggle',
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'inline_label' => [
+                        'display' => __('Inline Label'),
+                        'instructions' => __('statamic::fieldtypes.toggle.config.inline_label'),
+                        'type' => 'text',
+                        'default' => '',
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'toggle',
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Users.php b/src/Fieldtypes/Users.php
index 80341337220..bea18c06088 100644
--- a/src/Fieldtypes/Users.php
+++ b/src/Fieldtypes/Users.php
@@ -30,23 +30,33 @@ class Users extends Relationship
     protected function configFieldItems(): array
     {
         return [
-            'max_items' => [
-                'display' => __('Max Items'),
-                'instructions' => __('statamic::messages.max_items_instructions'),
-                'type' => 'integer',
-                'min' => 1,
-            ],
-            'mode' => [
-                'display' => __('Mode'),
-                'type' => 'radio',
-                'options' => [
-                    'default' => __('Stack Selector'),
-                    'select' => __('Select Dropdown'),
-                    'typeahead' => __('Typeahead Field'),
-                ],
-                'default' => 'select',
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'max_items' => [
+                        'display' => __('Max Items'),
+                        'instructions' => __('statamic::messages.max_items_instructions'),
+                        'type' => 'integer',
+                        'min' => 1,
+                    ],
+                    'mode' => [
+                        'display' => __('UI Mode'),
+                        'instructions' => __('statamic::fieldtypes.any.config.mode'),
+                        'type' => 'radio',
+                        'options' => [
+                            'default' => __('Stack Selector'),
+                            'select' => __('Select Dropdown'),
+                            'typeahead' => __('Typeahead Field'),
+                        ],
+                        'default' => 'select',
+                    ],
+                    'default' => [
+                        'display' => __('Default'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'users',
+                    ],
+                ]
+            ]
         ];
     }
 
diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index b212c6329c9..10416493648 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -11,18 +11,21 @@ class Video extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'width' => 50,
-            ],
-            'placeholder' => [
-                'display' => __('Placeholder'),
-                'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
-                'type' => 'text',
-                'width' => 50,
-            ],
+            [
+                'display' => __('Appearance & Behavior'),
+                'fields' => [
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                    ],
+                    'placeholder' => [
+                        'display' => __('Placeholder'),
+                        'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
+                        'type' => 'text',
+                    ],
+                ]
+            ]
         ];
     }
 }
diff --git a/src/Fieldtypes/Width.php b/src/Fieldtypes/Width.php
index 27a441877d0..8851158a1b2 100644
--- a/src/Fieldtypes/Width.php
+++ b/src/Fieldtypes/Width.php
@@ -14,19 +14,24 @@ class Width extends Fieldtype
     protected function configFieldItems(): array
     {
         return [
-            'options' => [
+            [
                 'display' => __('Options'),
-                'instructions' => __('statamic::fieldtypes.width.config.options'),
-                'type' => 'list',
-                'default' => [25, 33, 50, 66, 75, 100],
-            ],
-            'default' => [
-                'display' => __('Default Value'),
-                'instructions' => __('statamic::messages.fields_default_instructions'),
-                'type' => 'text',
-                'default' => 100,
-                'width' => 50,
-            ],
+                'fields' => [
+                    'options' => [
+                        'display' => __('Options'),
+                        'instructions' => __('statamic::fieldtypes.width.config.options'),
+                        'type' => 'list',
+                        'default' => [25, 33, 50, 66, 75, 100],
+                    ],
+                    'default' => [
+                        'display' => __('Default Value'),
+                        'instructions' => __('statamic::messages.fields_default_instructions'),
+                        'type' => 'text',
+                        'default' => 100,
+                        'width' => 50,
+                    ],
+                ]
+            ]
         ];
     }
 }
diff --git a/src/Fieldtypes/Yaml.php b/src/Fieldtypes/Yaml.php
index 7ed7f1e64e7..a54eaeee1d7 100644
--- a/src/Fieldtypes/Yaml.php
+++ b/src/Fieldtypes/Yaml.php
@@ -16,7 +16,6 @@ protected function configFieldItems(): array
                 'display' => __('Default Value'),
                 'instructions' => __('statamic::messages.fields_default_instructions'),
                 'type' => 'yaml',
-                'width' => 100,
             ],
         ];
     }
diff --git a/src/Forms/Fieldtype.php b/src/Forms/Fieldtype.php
index 90d953b939e..8977c65767b 100644
--- a/src/Forms/Fieldtype.php
+++ b/src/Forms/Fieldtype.php
@@ -23,7 +23,6 @@ protected function configFieldItems(): array
                 'display' => __('Placeholder'),
                 'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
                 'type' => 'text',
-                'width' => 50,
             ],
             'max_items' => [
                 'type' => 'integer',
@@ -31,7 +30,6 @@ protected function configFieldItems(): array
                 'default' => 1,
                 'instructions' => __('statamic::fieldtypes.form.config.max_items'),
                 'min' => 1,
-                'width' => 50,
             ],
         ];
     }
diff --git a/src/Http/Controllers/CP/Fields/FieldsController.php b/src/Http/Controllers/CP/Fields/FieldsController.php
index 78839c08f30..df4fe8973e9 100644
--- a/src/Http/Controllers/CP/Fields/FieldsController.php
+++ b/src/Http/Controllers/CP/Fields/FieldsController.php
@@ -86,23 +86,21 @@ protected function blueprint($blueprint)
 
         $fields = collect([
             'display' => [
-                'display' => __('Display'),
+                'display' => __('Display Label'),
                 'instructions' => __('statamic::messages.fields_display_instructions'),
                 'type' => 'text',
-                'width' => 50,
                 'autoselect' => true,
             ],
             'handle' => [
                 'display' => __('Handle'),
                 'instructions' => __('statamic::messages.fields_handle_instructions'),
-                'type' => 'text',
+                'type' => 'slug',
                 'validate' => 'required|not_in:'.implode(',', $reserved),
-                'width' => 50,
             ],
             'instructions' => [
                 'display' => __('Instructions'),
                 'instructions' => __('statamic::messages.fields_instructions_instructions'),
-                'type' => 'text',
+                'type' => 'textarea',
             ],
             'instructions_position' => [
                 'display' => __('Instructions Position'),
@@ -113,7 +111,9 @@ protected function blueprint($blueprint)
                     'below' => __('Below'),
                 ],
                 'default' => 'above',
-                'width' => 33,
+                'if' => [
+                    'instructions' => 'not null',
+                ],
             ],
             'listable' => [
                 'display' => __('Listable'),
@@ -126,7 +126,6 @@ protected function blueprint($blueprint)
                     'false' => __('Not listable'),
                 ],
                 'default' => 'hidden',
-                'width' => 33,
                 'unless' => [
                     'type' => 'section',
                 ],
@@ -142,14 +141,12 @@ protected function blueprint($blueprint)
                 ],
                 'default' => 'visible',
                 'type' => 'select',
-                'width' => 33,
             ],
             'duplicate' => [
                 'display' => __('Duplicate'),
                 'instructions' => __('statamic::messages.fields_duplicate_instructions'),
                 'type' => 'toggle',
                 'validate' => 'boolean',
-                'width' => 50,
                 'default' => true,
             ],
         ])->map(fn ($field, $handle) => compact('handle', 'field'))->values()->all();
@@ -158,7 +155,10 @@ protected function blueprint($blueprint)
             'tabs' => [
                 'main' => [
                     'sections' => array_merge(
-                        [['fields' => $fields]],
+                        [[
+                            'fields' => $fields,
+                            'display' => __('Common'),
+                        ]],
                         $blueprint->contents()['tabs']['main']['sections'],
                     ),
                 ],

From a1e29b52fc2e5f3d47c755081a49dfc1a0869f4f Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Tue, 21 Mar 2023 16:09:55 +0000
Subject: [PATCH 26/40] Apply fixes from StyleCI

---
 src/Fieldtypes/Assets/Assets.php |  4 ++--
 src/Fieldtypes/ButtonGroup.php   |  4 ++--
 src/Fieldtypes/Code.php          |  4 ++--
 src/Fieldtypes/Color.php         |  4 ++--
 src/Fieldtypes/Date.php          | 10 +++++-----
 src/Fieldtypes/Entries.php       |  4 ++--
 src/Fieldtypes/Grid.php          |  6 +++---
 src/Fieldtypes/Html.php          |  4 ++--
 src/Fieldtypes/Integer.php       |  6 +++---
 src/Fieldtypes/Link.php          |  4 ++--
 src/Fieldtypes/Markdown.php      |  8 ++++----
 src/Fieldtypes/Range.php         |  6 +++---
 src/Fieldtypes/Relationship.php  |  4 ++--
 src/Fieldtypes/Replicator.php    |  6 +++---
 src/Fieldtypes/Revealer.php      |  4 ++--
 src/Fieldtypes/Select.php        |  8 ++++----
 src/Fieldtypes/Slug.php          |  4 ++--
 src/Fieldtypes/Template.php      |  4 ++--
 src/Fieldtypes/Terms.php         |  4 ++--
 src/Fieldtypes/Text.php          |  8 ++++----
 src/Fieldtypes/Textarea.php      |  6 +++---
 src/Fieldtypes/Time.php          |  4 ++--
 src/Fieldtypes/Toggle.php        |  4 ++--
 src/Fieldtypes/Users.php         |  4 ++--
 src/Fieldtypes/Video.php         |  4 ++--
 src/Fieldtypes/Width.php         |  4 ++--
 26 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/src/Fieldtypes/Assets/Assets.php b/src/Fieldtypes/Assets/Assets.php
index 1a5334edd4f..3240ae9efbd 100644
--- a/src/Fieldtypes/Assets/Assets.php
+++ b/src/Fieldtypes/Assets/Assets.php
@@ -79,8 +79,8 @@ protected function configFieldItems(): array
                         'type' => 'toggle',
                         'default' => true,
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/ButtonGroup.php b/src/Fieldtypes/ButtonGroup.php
index 0341de5de94..f071746b20b 100644
--- a/src/Fieldtypes/ButtonGroup.php
+++ b/src/Fieldtypes/ButtonGroup.php
@@ -29,8 +29,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::messages.fields_default_instructions'),
                         'type' => 'text',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 }
diff --git a/src/Fieldtypes/Code.php b/src/Fieldtypes/Code.php
index f346af9e0b6..922b75d8d70 100644
--- a/src/Fieldtypes/Code.php
+++ b/src/Fieldtypes/Code.php
@@ -103,8 +103,8 @@ protected function configFieldItems(): array
                         'type' => 'toggle',
                         'default' => true,
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Color.php b/src/Fieldtypes/Color.php
index 6e0ea2d5ef4..ba697be4eb4 100644
--- a/src/Fieldtypes/Color.php
+++ b/src/Fieldtypes/Color.php
@@ -57,8 +57,8 @@ protected function configFieldItems(): array
                         ],
                         'default' => 'hex',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 }
diff --git a/src/Fieldtypes/Date.php b/src/Fieldtypes/Date.php
index 4d7464dafe9..77669d54395 100644
--- a/src/Fieldtypes/Date.php
+++ b/src/Fieldtypes/Date.php
@@ -65,7 +65,7 @@ protected function configFieldItems(): array
                         'type' => 'integer',
                         'default' => 1,
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Timepicker'),
@@ -82,7 +82,7 @@ protected function configFieldItems(): array
                         'type' => 'toggle',
                         'default' => false,
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Boundaries'),
@@ -97,7 +97,7 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.date.config.latest_date'),
                         'type' => 'date',
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Data Format'),
@@ -107,8 +107,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.date.config.format'),
                         'type' => 'text',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Entries.php b/src/Fieldtypes/Entries.php
index a3e30a0db92..70a97f2a440 100644
--- a/src/Fieldtypes/Entries.php
+++ b/src/Fieldtypes/Entries.php
@@ -88,8 +88,8 @@ protected function configFieldItems(): array
                         'type' => 'collections',
                         'mode' => 'select',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Grid.php b/src/Fieldtypes/Grid.php
index a109c56da1c..bc4ced5957d 100644
--- a/src/Fieldtypes/Grid.php
+++ b/src/Fieldtypes/Grid.php
@@ -30,7 +30,7 @@ protected function configFieldItems(): array
                         'type' => 'fields',
                         'full_width_setting' => true,
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Appearance & Behavior'),
@@ -66,8 +66,8 @@ protected function configFieldItems(): array
                         'type' => 'toggle',
                         'default' => true,
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Html.php b/src/Fieldtypes/Html.php
index fe9a9cee7db..52ee8944f29 100644
--- a/src/Fieldtypes/Html.php
+++ b/src/Fieldtypes/Html.php
@@ -21,8 +21,8 @@ protected function configFieldItems(): array
                         'type' => 'code',
                         'mode' => 'htmlmixed',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 }
diff --git a/src/Fieldtypes/Integer.php b/src/Fieldtypes/Integer.php
index ff101f63a15..aaebf7209fb 100644
--- a/src/Fieldtypes/Integer.php
+++ b/src/Fieldtypes/Integer.php
@@ -21,7 +21,7 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::messages.fields_default_instructions'),
                         'type' => 'text',
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Appearance'),
@@ -37,8 +37,8 @@ protected function configFieldItems(): array
                         'type' => 'text',
                     ],
 
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Link.php b/src/Fieldtypes/Link.php
index d4f4da66ed6..816c4c2e2a0 100644
--- a/src/Fieldtypes/Link.php
+++ b/src/Fieldtypes/Link.php
@@ -35,8 +35,8 @@ protected function configFieldItems(): array
                         'mode' => 'select',
                         'max_items' => 1,
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Markdown.php b/src/Fieldtypes/Markdown.php
index eedbe5527b0..ef72316acb0 100644
--- a/src/Fieldtypes/Markdown.php
+++ b/src/Fieldtypes/Markdown.php
@@ -53,7 +53,7 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::messages.fields_default_instructions'),
                         'type' => 'markdown',
                     ],
-                ]
+                ],
             ],
             [
                 'display' => 'Assets',
@@ -79,7 +79,7 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.markdown.config.restrict'),
                         'type' => 'toggle',
                     ],
-                    ]
+                ],
             ],
             [
                 'display' => 'Antlers',
@@ -89,8 +89,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.any.config.antlers'),
                         'type' => 'toggle',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Range.php b/src/Fieldtypes/Range.php
index f3d372cd52a..a31482f6bc8 100644
--- a/src/Fieldtypes/Range.php
+++ b/src/Fieldtypes/Range.php
@@ -40,7 +40,7 @@ protected function configFieldItems(): array
                         'input_type' => 'number',
                         'default' => null,
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Appearance'),
@@ -55,8 +55,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.range.config.append'),
                         'type' => 'text',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Relationship.php b/src/Fieldtypes/Relationship.php
index cf773d1d9a0..a8d62b9cc3a 100644
--- a/src/Fieldtypes/Relationship.php
+++ b/src/Fieldtypes/Relationship.php
@@ -50,8 +50,8 @@ protected function configFieldItems(): array
                             'typeahead' => __('Typeahead Field'),
                         ],
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 17e0937a695..bbf9b8aef9d 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -48,7 +48,7 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.replicator.config.max_sets'),
                         'type' => 'integer',
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Manage Sets'),
@@ -60,8 +60,8 @@ protected function configFieldItems(): array
                         'hide_meta' => true,
                         'full_width_setting' => true,
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Revealer.php b/src/Fieldtypes/Revealer.php
index 779b3c76e8c..c991bf4299d 100644
--- a/src/Fieldtypes/Revealer.php
+++ b/src/Fieldtypes/Revealer.php
@@ -33,8 +33,8 @@ protected function configFieldItems(): array
                         'type' => 'text',
                         'default' => '',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Select.php b/src/Fieldtypes/Select.php
index 6b930fb2e6f..8e0d45f3b66 100644
--- a/src/Fieldtypes/Select.php
+++ b/src/Fieldtypes/Select.php
@@ -38,7 +38,7 @@ protected function configFieldItems(): array
                         'type' => 'toggle',
                         'default' => false,
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Selection'),
@@ -73,7 +73,7 @@ protected function configFieldItems(): array
                         'type' => 'toggle',
                         'default' => true,
                     ],
-                ]
+                ],
             ],
             [
                 'display' => __('Data'),
@@ -89,8 +89,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::messages.fields_default_instructions'),
                         'type' => 'text',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 }
diff --git a/src/Fieldtypes/Slug.php b/src/Fieldtypes/Slug.php
index 59e794e7955..aa8ddab24f5 100644
--- a/src/Fieldtypes/Slug.php
+++ b/src/Fieldtypes/Slug.php
@@ -26,8 +26,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.slug.config.generate'),
                         'default' => true,
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 }
diff --git a/src/Fieldtypes/Template.php b/src/Fieldtypes/Template.php
index 868f9f674fe..38fe31f8d5f 100644
--- a/src/Fieldtypes/Template.php
+++ b/src/Fieldtypes/Template.php
@@ -33,8 +33,8 @@ protected function configFieldItems(): array
                         'type' => 'template_folder',
                         'max_items' => 1,
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Terms.php b/src/Fieldtypes/Terms.php
index e9bdd331b32..41d096c754d 100644
--- a/src/Fieldtypes/Terms.php
+++ b/src/Fieldtypes/Terms.php
@@ -90,8 +90,8 @@ protected function configFieldItems(): array
                         'type' => 'taxonomies',
                         'mode' => 'select',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Text.php b/src/Fieldtypes/Text.php
index fe537fca38e..d9f6f43269e 100644
--- a/src/Fieldtypes/Text.php
+++ b/src/Fieldtypes/Text.php
@@ -51,7 +51,7 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.text.config.character_limit'),
                         'type' => 'integer',
                     ],
-                ]
+                ],
             ],
             [
                 'display' => 'Appearance',
@@ -66,7 +66,7 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.text.config.append'),
                         'type' => 'text',
                     ],
-                ]
+                ],
             ],
             [
                 'display' => 'Antlers',
@@ -76,8 +76,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.any.config.antlers'),
                         'type' => 'toggle',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Textarea.php b/src/Fieldtypes/Textarea.php
index 84f8c83693c..742655cd933 100644
--- a/src/Fieldtypes/Textarea.php
+++ b/src/Fieldtypes/Textarea.php
@@ -32,7 +32,7 @@ protected function configFieldItems(): array
                         'type' => 'textarea',
                     ],
 
-                ]
+                ],
             ],
             [
                 'display' => __('Antlers'),
@@ -43,8 +43,8 @@ protected function configFieldItems(): array
                         'type' => 'toggle',
                     ],
 
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Time.php b/src/Fieldtypes/Time.php
index faba1f5cb96..8889cf43aa3 100644
--- a/src/Fieldtypes/Time.php
+++ b/src/Fieldtypes/Time.php
@@ -25,8 +25,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::messages.fields_default_instructions'),
                         'type' => 'text',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 }
diff --git a/src/Fieldtypes/Toggle.php b/src/Fieldtypes/Toggle.php
index 7d4be0a8712..e100fd3f5e5 100644
--- a/src/Fieldtypes/Toggle.php
+++ b/src/Fieldtypes/Toggle.php
@@ -29,8 +29,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::messages.fields_default_instructions'),
                         'type' => 'toggle',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Users.php b/src/Fieldtypes/Users.php
index bea18c06088..f868a3ccb34 100644
--- a/src/Fieldtypes/Users.php
+++ b/src/Fieldtypes/Users.php
@@ -55,8 +55,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::messages.fields_default_instructions'),
                         'type' => 'users',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 
diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index 10416493648..c395e5f6882 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -24,8 +24,8 @@ protected function configFieldItems(): array
                         'instructions' => __('statamic::fieldtypes.text.config.placeholder'),
                         'type' => 'text',
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 }
diff --git a/src/Fieldtypes/Width.php b/src/Fieldtypes/Width.php
index 8851158a1b2..967247555e2 100644
--- a/src/Fieldtypes/Width.php
+++ b/src/Fieldtypes/Width.php
@@ -30,8 +30,8 @@ protected function configFieldItems(): array
                         'default' => 100,
                         'width' => 50,
                     ],
-                ]
-            ]
+                ],
+            ],
         ];
     }
 }

From c6992e4eb1aabc4cc4763b1223ffe5a971c5597c Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 12:24:15 -0400
Subject: [PATCH 27/40] Reorganize Bard configs a little more

---
 resources/lang/en/fieldtypes.php |  1 -
 src/Fieldtypes/Bard.php          | 55 +++++++++++++++++---------------
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/resources/lang/en/fieldtypes.php b/resources/lang/en/fieldtypes.php
index fe0b4ad2cdb..7bab395d586 100644
--- a/resources/lang/en/fieldtypes.php
+++ b/resources/lang/en/fieldtypes.php
@@ -30,7 +30,6 @@
     'bard.config.reading_time' => 'Show estimated reading time at the bottom of the field.',
     'bard.config.remove_empty_nodes' => 'Choose how to deal with empty nodes.',
     'bard.config.save_html' => 'Save HTML instead of structured data. This simplifies but limits control of your template markup.',
-    'bard.config.sets' => 'Sets are configurable blocks of fields that can be inserted anywhere in your Bard content.',
     'bard.config.smart_typography' => 'Convert common text patterns with the proper typographic characters.',
     'bard.config.target_blank' => 'Set `target="_blank"` on all links.',
     'bard.config.toolbar_mode' => '**Fixed** mode will keep the toolbar visible at all times, while **floating** only appears while selecting text.',
diff --git a/src/Fieldtypes/Bard.php b/src/Fieldtypes/Bard.php
index 932182f1f80..b4c2c40249a 100644
--- a/src/Fieldtypes/Bard.php
+++ b/src/Fieldtypes/Bard.php
@@ -175,38 +175,43 @@ protected function configFieldItems(): array
                 'display' => __('Sets'),
                 'instructions' => __('statamic::fieldtypes.bard.config.section.sets.instructions'),
                 'fields' => [
-                    'always_show_set_button' => [
-                        'display' => __('Always Show Set Button'),
-                        'instructions' => __('statamic::fieldtypes.bard.config.always_show_set_button'),
-                        'type' => 'toggle',
-                        'default' => false,
-                    ],
-                    'collapse' => [
-                        'display' => __('Collapse'),
-                        'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
-                        'type' => 'select',
-                        'cast_booleans' => true,
-                        'options' => [
-                            'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
-                            'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
-                            'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
-                        ],
-                        'default' => false,
-                    ],
-                    'previews' => [
-                        'display' => __('Field Previews'),
-                        'instructions' => __('statamic::fieldtypes.bard.config.previews'),
-                        'type' => 'toggle',
-                        'default' => true,
-                    ],
                     'sets' => [
                         'display' => __('Sets'),
-                        'instructions' => __('statamic::fieldtypes.bard.config.sets'),
+                        'hide_meta' => true,
                         'type' => 'sets',
                         'full_width_setting' => true,
                         'require_set' => false,
                     ],
                 ],
+                [
+                    'display' => __('Set Behavior'),
+                    'fields' => [
+                        'always_show_set_button' => [
+                            'display' => __('Always Show Set Button'),
+                            'instructions' => __('statamic::fieldtypes.bard.config.always_show_set_button'),
+                            'type' => 'toggle',
+                            'default' => false,
+                        ],
+                        'collapse' => [
+                            'display' => __('Collapse'),
+                            'instructions' => __('statamic::fieldtypes.replicator.config.collapse'),
+                            'type' => 'select',
+                            'cast_booleans' => true,
+                            'options' => [
+                                'false' => __('statamic::fieldtypes.replicator.config.collapse.disabled'),
+                                'true' => __('statamic::fieldtypes.replicator.config.collapse.enabled'),
+                                'accordion' => __('statamic::fieldtypes.replicator.config.collapse.accordion'),
+                            ],
+                            'default' => false,
+                        ],
+                        'previews' => [
+                            'display' => __('Field Previews'),
+                            'instructions' => __('statamic::fieldtypes.bard.config.previews'),
+                            'type' => 'toggle',
+                            'default' => true,
+                        ],
+                    ]
+                ]
             ],
         ];
     }

From ad29e3626d28b38434126fe00b4a34a3172d78e0 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 12:24:29 -0400
Subject: [PATCH 28/40] Make sure tabs inside cards fade to white instead of
 gray

---
 resources/css/components/tabs.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index f8c2ba37553..d7c87c90436 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -18,6 +18,10 @@
     }
 }
 
+.card .tabs-container .fade-left, .card .tabs-container .fade-right {
+    @apply from-white;
+}
+
 .tabs {
     @apply flex space-x-2 overflow-hidden relative w-full max-w-full;
     &-scrolled {

From 00b024196490c8fc9d19c9deffdd30b8af6edcda Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Tue, 21 Mar 2023 16:25:17 +0000
Subject: [PATCH 29/40] Apply fixes from StyleCI

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

diff --git a/src/Fieldtypes/Bard.php b/src/Fieldtypes/Bard.php
index b4c2c40249a..61e9424b24c 100644
--- a/src/Fieldtypes/Bard.php
+++ b/src/Fieldtypes/Bard.php
@@ -210,8 +210,8 @@ protected function configFieldItems(): array
                             'type' => 'toggle',
                             'default' => true,
                         ],
-                    ]
-                ]
+                    ],
+                ],
             ],
         ];
     }

From 65f3be363770263fae924ac6bb01b0be54e81adb Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 12:56:19 -0400
Subject: [PATCH 30/40] fix asset fields not showing up

---
 resources/js/components/assets/Editor/Editor.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 854dca25e1a..c40fbeee29e 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -307,7 +307,9 @@ export default {
 
                 this.fieldset = data.blueprint;
                 this.fields = _.chain(this.fieldset.tabs)
-                    .map(tab => tab.fields)
+                    .map(tab => tab.sections)
+                    .flatten(true)
+                    .map(section => section.fields)
                     .flatten(true)
                     .value();
 

From 6dc7c8f3d108ca937beea167f7643b50a7f4a3e3 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 13:04:48 -0400
Subject: [PATCH 31/40] asset editor uses sections

---
 .../js/components/assets/Editor/Editor.vue      | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index c40fbeee29e..f834b58875b 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -126,15 +126,14 @@
                             <loading-graphic text="Saving" />
                         </div>
 
-                        <div class="card p-0">
-                            <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
-                            <publish-fields
-                                :fields="fields"
-                                :read-only="readOnly"
-                                @updated="setFieldValue"
-                                @meta-updated="setFieldMeta"
-                            />
-                        </div>
+                        <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
+
+                        <publish-sections
+                            :sections="fieldset.tabs[0].sections"
+                            @updated="setFieldValue"
+                            @meta-updated="setFieldMeta"
+                        />
+
                     </div>
                 </publish-container>
             </div>

From 15a4fd4abbe6ad57ca13e7d075df9f5247701a0b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 13:04:58 -0400
Subject: [PATCH 32/40] bring back asset editor errors

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

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index f834b58875b..468fdb71f30 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -117,7 +117,7 @@
                     :blueprint="fieldset"
                     :values="values"
                     :meta="meta"
-
+                    :errors="errors"
                     @updated="values = { ...$event, focus: values.focus }"
                 >
                     <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">

From 116c7ea1b66ff600a2e5853396e319c4e443d063 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 13:22:46 -0400
Subject: [PATCH 33/40] fix nav page editor not loading by looking into the
 section

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

diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index 894cf4b457f..3ac414c9d77 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -114,7 +114,7 @@ export default {
 
             // This UI only supports the first tab
             const blueprint = clone(this.blueprint);
-            const fields = blueprint.tabs[0].fields;
+            const fields = blueprint.tabs[0].sections[0].fields;
 
             if (this.type == 'url' && isMissingField(fields, 'url')) {
                 fields.unshift({

From 3cbbd2a7b084211d700e683091b9eb2ba2e3bbb4 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 13:23:08 -0400
Subject: [PATCH 34/40] Don't remove fields if its empty

---
 src/Fields/Section.php                               | 3 ++-
 src/Http/Controllers/CP/Fields/ManagesBlueprints.php | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Fields/Section.php b/src/Fields/Section.php
index bb79a7eeeda..b80d51fbd90 100644
--- a/src/Fields/Section.php
+++ b/src/Fields/Section.php
@@ -33,7 +33,8 @@ public function toPublishArray()
         return Arr::removeNullValues([
             'display' => $this->contents['display'] ?? null,
             'instructions' => $this->contents['instructions'] ?? null,
+        ]) + [
             'fields' => (new Fields(Arr::get($this->contents, 'fields', [])))->toPublishArray(),
-        ]);
+        ];
     }
 }
diff --git a/src/Http/Controllers/CP/Fields/ManagesBlueprints.php b/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
index 6c5b41b7493..e8ac7ebf44d 100644
--- a/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
+++ b/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
@@ -110,10 +110,11 @@ private function sectionToVue($section, $sectionIndex, $tab): array
         return Arr::removeNullValues([
             'display' => $section->display(),
             'instructions' => $section->instructions(),
+        ]) + [
             'fields' => collect($section->contents()['fields'])->map(function ($field, $i) use ($tab, $sectionIndex) {
                 return array_merge(FieldTransformer::toVue($field), ['_id' => $tab->handle().'-'.$sectionIndex.'-'.$i]);
             })->all(),
-        ]);
+        ];
     }
 
     private function storeBlueprint(Request $request, string $namespace)

From b7fcb5d0e0e88245bf292368cda0e9e8ecc9b46d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 13:27:46 -0400
Subject: [PATCH 35/40] fix field not moving to new section when dropping over
 the add section button

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

diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index 68125f57568..ab35b1c5b4b 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -43,7 +43,7 @@ export default {
     methods: {
 
         addSection() {
-            this.$refs.sections.addSection();
+            return this.$refs.sections.addSection();
         },
 
         sectionsUpdated(sections) {

From 895f5a0439562a2e8bac230c8b696a3c9a47935f Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 13:28:20 -0400
Subject: [PATCH 36/40] Slightly nicer Add Section button

---
 resources/css/components/blueprints.css         | 2 +-
 resources/js/components/blueprints/Sections.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
index 461ca55f750..d9f8d9e156d 100644
--- a/resources/css/components/blueprints.css
+++ b/resources/css/components/blueprints.css
@@ -63,7 +63,7 @@
 }
 
 .blueprint-add-section-button {
-    @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
+    @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700;
 
     &:hover {
         @apply border-gray text-gray-950;
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index 781b5ab662e..7eb71c65a4d 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -23,7 +23,7 @@
             <div class="blueprint-add-section-container w-full">
                 <button class="blueprint-add-section-button outline-none" @click="addSection">
                     <div class="text-center flex items-center leading-none">
-                        <div class="text-2xl mr-1">+</div>
+                        <svg-icon name="micro-plus" class="h-3 w-3 mr-2" />
                         <div v-text="addSectionText" />
                     </div>
 

From a4f1d7d407fbb939ad7d562873897e3ab8de5dd2 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 13:31:18 -0400
Subject: [PATCH 37/40] Don't show tab bar at all if you're in single tab mode

---
 resources/js/components/blueprints/Tabs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 81fc1445b09..f9e1cd694d0 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="tabs-container mb-5 relative">
+        <div v-if="!singleTab" class="tabs-container mb-5 relative">
             <div ref="tabs" class="tabs flex-1
             flex space-x-3 overflow-auto pr-6" role="tablist">
                 <tab
@@ -18,7 +18,7 @@
                 <div class="fade-left" v-if="canScrollLeft" />
             </div>
             <div class="fade-right right-10" />
-            <button v-if="!singleTab" class="btn-round ml-2 flex items-center justify-center relative top-1" @click="addAndEditTab" v-tooltip="addTabText">
+            <button class="btn-round ml-2 flex items-center justify-center relative top-1" @click="addAndEditTab" v-tooltip="addTabText">
                 <svg-icon name="add-bold" class="w-3 h-3" />
             </button>
         </div>

From afac0f2f95e37ecb49ee55bc159e70557b0baef1 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 13:41:10 -0400
Subject: [PATCH 38/40] fix grid fields not being draggable

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

diff --git a/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue b/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue
index 9a2dc6edc15..1f1220517b6 100644
--- a/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue
+++ b/resources/js/components/fieldtypes/grid/FieldsFieldtype.vue
@@ -64,8 +64,8 @@ export default {
         },
 
         makeSortable() {
-            new Sortable(this.$el.querySelector('.blueprint-tab-draggable-zone'), {
-                draggable: '.blueprint-tab-field',
+            new Sortable(this.$el.querySelector('.blueprint-section-draggable-zone'), {
+                draggable: '.blueprint-section-field',
                 handle: '.blueprint-drag-handle',
                 mirror: { constrainDimensions: true },
                 plugins: [Plugins.SwapAnimation]

From ac74d8d4ba36879f2c23323abdb8b7f031951e8a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 21 Mar 2023 13:44:18 -0400
Subject: [PATCH 39/40] fix bard not getting saved because instructions are
 empty

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

diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
index 42838f31318..8856e45c70d 100644
--- a/src/Fieldtypes/Sets.php
+++ b/src/Fieldtypes/Sets.php
@@ -98,7 +98,7 @@ public function process($tabs)
             return [
                 $tab['handle'] => [
                     'display' => $tab['display'],
-                    'instructions' => $tab['instructions'],
+                    'instructions' => $tab['instructions'] ?? null,
                     'sets' => collect($tab['sections'])->mapWithKeys(function ($section) {
                         return [
                             $section['handle'] => [

From 091a143213b817cff3a036626fe87c3ab3403f0d Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 21 Mar 2023 13:46:44 -0400
Subject: [PATCH 40/40] Handle empty tabs state

---
 resources/js/components/blueprints/Tabs.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index f9e1cd694d0..8844f4bd770 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -1,8 +1,7 @@
 <template>
     <div>
-        <div v-if="!singleTab" class="tabs-container mb-5 relative">
-            <div ref="tabs" class="tabs flex-1
-            flex space-x-3 overflow-auto pr-6" role="tablist">
+        <div v-if="!singleTab && tabs.length > 0" class="tabs-container mb-5 relative">
+            <div ref="tabs" class="tabs flex-1 flex space-x-3 overflow-auto pr-6" role="tablist">
                 <tab
                     ref="tab"
                     v-for="tab in tabs"
@@ -22,6 +21,7 @@
                 <svg-icon name="add-bold" class="w-3 h-3" />
             </button>
         </div>
+        <button class="btn" @click="addAndEditTab" v-text="addTabText" v-else></button>
         <tab-content
             v-for="tab in tabs"
             ref="tabContent"