From 14d7171dbecdfae81fe7a56dc511a3a14bef874c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 3 Mar 2023 15:40:18 -0500
Subject: [PATCH 01/46] publish form wip

---
 resources/css/components/publish.css         |  4 --
 resources/css/components/tabs.css            |  2 +-
 resources/js/bootstrap/components.js         |  2 +
 resources/js/components/configure/Tabs.vue   |  6 +--
 resources/js/components/publish/Sections.vue | 44 ++++++++++++++++++++
 resources/js/components/publish/Tabs.vue     | 12 +++---
 src/Fields/Section.php                       | 24 +++++++++++
 src/Fields/Tab.php                           | 40 +++++++++++++++++-
 8 files changed, 118 insertions(+), 16 deletions(-)
 create mode 100644 resources/js/components/publish/Sections.vue
 create mode 100644 src/Fields/Section.php

diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 52912c183b4..1748061c71f 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -99,7 +99,3 @@ code.parent-url {
     top: 0;
     z-index: 1000;
 }
-
-.publish-tab:not(:empty) {
-    @apply shadow bg-white rounded-md w-full;
-}
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 22c9b7f2ca4..3716e83495b 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -4,7 +4,7 @@
 
 
 .tabs-container {
-    @apply relative;
+    @apply relative mb-5;
 
     &.offset-for-sidebar {
         width: calc(100% - 320px);
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 470be73ed7d..01060e3d6a6 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -12,6 +12,7 @@ import Field from '../components/publish/Field.vue';
 import FieldMeta from '../components/publish/FieldMeta.vue';
 import ConfigureTabs from '../components/configure/Tabs.vue';
 import PublishTabs from '../components/publish/Tabs.vue';
+import PublishSections from '../components/publish/Sections.vue';
 import PublishValidationErrors from '../components/publish/ValidationErrors.vue';
 import FormGroup from '../components/publish/FormGroup.vue';
 import LivePreview from '../components/live-preview/LivePreview.vue';
@@ -79,6 +80,7 @@ Vue.component('publish-field', Field);
 Vue.component('publish-field-meta', FieldMeta);
 Vue.component('configure-tabs', ConfigureTabs);
 Vue.component('publish-tabs', PublishTabs);
+Vue.component('publish-sections', PublishSections);
 Vue.component('publish-validation-errors', PublishValidationErrors);
 Vue.component('form-group', FormGroup);
 
diff --git a/resources/js/components/configure/Tabs.vue b/resources/js/components/configure/Tabs.vue
index 5ac015f6892..55e9bf5d13f 100644
--- a/resources/js/components/configure/Tabs.vue
+++ b/resources/js/components/configure/Tabs.vue
@@ -6,9 +6,9 @@
                     <h2 v-text="tab.display" class="text-base" />
                     <p v-html="tab.instructions" />
                 </div>
-                <div class="card p-0 mb-10 configure-tab">
-                    <publish-fields
-                        :fields="tab.fields"
+                <div class="">
+                    <publish-sections
+                        :sections="tab.sections"
                         :read-only="readOnly"
                         :syncable="syncable"
                         @updated="(handle, value) => $emit('updated', handle, value)"
diff --git a/resources/js/components/publish/Sections.vue b/resources/js/components/publish/Sections.vue
new file mode 100644
index 00000000000..bc8ec10fd65
--- /dev/null
+++ b/resources/js/components/publish/Sections.vue
@@ -0,0 +1,44 @@
+<template>
+
+    <div class="publish-sections">
+        <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>
+                <publish-fields
+                    :fields="section.fields"
+                    :read-only="readOnly"
+                    :syncable="syncable"
+                    :can-toggle-labels="canToggleLabels"
+                    @updated="(handle, value) => $emit('updated', handle, value)"
+                    @meta-updated="(handle, value) => $emit('meta-updated', handle, value)"
+                    @synced="$emit('synced', $event)"
+                    @desynced="$emit('desynced', $event)"
+                    @focus="$emit('focus', $event)"
+                    @blur="$emit('blur', $event)"
+                />
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+
+    props: {
+        sections: {
+            type: Array,
+            required: true
+        },
+        readOnly: Boolean,
+        syncable: Boolean,
+        syncableFields: Array,
+        canToggleLabels: Boolean,
+        namePrefix: String,
+    }
+
+}
+</script>
diff --git a/resources/js/components/publish/Tabs.vue b/resources/js/components/publish/Tabs.vue
index 8050ca09bd6..baee5f6ad9f 100644
--- a/resources/js/components/publish/Tabs.vue
+++ b/resources/js/components/publish/Tabs.vue
@@ -63,7 +63,7 @@
             <div ref="publishTabWrapper" class="publish-tab-wrapper w-full min-w-0">
                 <div
                     class="publish-tab tab-panel w-full"
-                    :class="showTabs && 'rounded-tl-none'"
+                    :class="showTabs"
                     :role="showTabs && 'tabpanel'"
                     :id="showTabs && tabPanelId(tab.handle)"
                     :aria-labelledby="showTabs && tabId(tab.handle)"
@@ -72,8 +72,8 @@
                     v-for="tab in mainTabs"
                     v-show="isActive(tab.handle)"
                 >
-                    <publish-fields
-                        :fields="tab.fields"
+                    <publish-sections
+                        :sections="tab.sections"
                         :read-only="readOnly"
                         :syncable="syncable"
                         :can-toggle-labels="canToggleLabels"
@@ -90,15 +90,15 @@
             <!-- Sidebar(ish) -->
             <div :class="{ 'publish-sidebar': shouldShowSidebar }">
                 <div class="publish-tab">
-                    <div class="publish-tab-actions" :class="{ 'as-sidebar': shouldShowSidebar }">
+                    <div class="publish-tab-actions card p-0 mb-5" :class="{ 'as-sidebar': shouldShowSidebar }">
                         <portal :to="actionsPortal" :disabled="shouldShowSidebar">
                             <slot name="actions" :should-show-sidebar="shouldShowSidebar" />
                         </portal>
                     </div>
 
-                    <publish-fields
+                    <publish-sections
                         v-if="layoutReady && shouldShowSidebar && sidebarTab"
-                        :fields="sidebarTab.fields"
+                        :sections="sidebarTab.sections"
                         :read-only="readOnly"
                         :syncable="syncable"
                         :can-toggle-labels="canToggleLabels"
diff --git a/src/Fields/Section.php b/src/Fields/Section.php
new file mode 100644
index 00000000000..6328f1f1789
--- /dev/null
+++ b/src/Fields/Section.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Statamic\Fields;
+
+use Statamic\Support\Arr;
+
+class Section
+{
+    protected $contents;
+
+    public function __construct($contents)
+    {
+        $this->contents = $contents;
+    }
+
+    public function toPublishArray()
+    {
+        return [
+            'display' => $this->contents['display'] ?? null,
+            'instructions' => $this->contents['instructions'] ?? null,
+            'fields' => (new Fields(Arr::get($this->contents, 'fields', [])))->toPublishArray(),
+        ];
+    }
+}
diff --git a/src/Fields/Tab.php b/src/Fields/Tab.php
index 5ac1b02e46f..c8c01201a37 100644
--- a/src/Fields/Tab.php
+++ b/src/Fields/Tab.php
@@ -34,7 +34,43 @@ public function contents(): array
 
     public function fields(): Fields
     {
-        return new Fields(Arr::get($this->contents, 'fields', []));
+        $sections = Arr::get($this->contents, 'sections');
+
+        // Handle situation where there's only fields defined, and not nested under sections.
+        // Temporary?
+        if (! $sections) {
+            $sections = [
+                [
+                    'fields' => Arr::get($this->contents, 'fields', []),
+                ],
+            ];
+        }
+
+        $fields = collect($sections)->reduce(function ($carry, $section) {
+            return array_merge($carry, Arr::get($section, 'fields', []));
+        }, []);
+
+        return new Fields($fields);
+    }
+
+    public function sections()
+    {
+        $sections = Arr::get($this->contents, 'sections');
+
+        // Handle situation where there's only fields defined, and not nested under sections.
+        // Temporary?
+        if (! $sections) {
+            $sections = [
+                [
+                    'fields' => Arr::get($this->contents, 'fields', []),
+                ],
+            ];
+        }
+
+        return collect($sections)
+            ->map(function ($section) {
+                return new Section($section);
+            });
     }
 
     public function toPublishArray()
@@ -43,7 +79,7 @@ public function toPublishArray()
             'display' => $this->display(),
             'instructions' => $this->instructions(),
             'handle' => $this->handle,
-            'fields' => $this->fields()->toPublishArray(),
+            'sections' => $this->sections()->map->toPublishArray(),
         ];
     }
 

From 798012c23e9c2ef5daf38fc6231b33bca6aaa107 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 3 Mar 2023 17:30:07 -0500
Subject: [PATCH 02/46] remove sometimes-half-width logic

---
 resources/js/components/blueprints/Field.vue  |  3 +--
 resources/js/components/blueprints/Fields.vue |  2 --
 .../js/components/blueprints/RegularField.vue |  2 --
 resources/js/components/blueprints/Tab.vue    | 20 +++----------------
 .../js/components/fieldsets/EditForm.vue      |  1 -
 5 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/resources/js/components/blueprints/Field.vue b/resources/js/components/blueprints/Field.vue
index 0f9789eaaca..ad1b97710f8 100644
--- a/resources/js/components/blueprints/Field.vue
+++ b/resources/js/components/blueprints/Field.vue
@@ -10,8 +10,7 @@ export default {
             type: Boolean,
             default: true
         },
-        isEditing: Boolean,
-        isTabExpanded: Boolean
+        isEditing: Boolean
     }
 
 }
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index f32b8f13bbe..7a4a3f7a8d0 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -13,7 +13,6 @@
                 :key="field._id"
                 :field="field"
                 :is-editing="editingField === field._id"
-                :is-tab-expanded="isTabExpanded"
                 :suggestable-condition-fields="suggestableConditionFields"
                 :can-define-localizable="canDefineLocalizable"
                 @edit="$emit('field-editing', field._id)"
@@ -88,7 +87,6 @@ export default {
     props: {
         fields: Array,
         editingField: {},
-        isTabExpanded: Boolean,
         suggestableConditionFields: Array,
         excludeFieldset: String,
     },
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index 941493ee164..4efb08a973b 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -111,8 +111,6 @@ export default {
         },
 
         widthClass() {
-            if (! this.isTabExpanded) return 'blueprint-tab-field-w-full';
-
             return `blueprint-tab-field-${tailwind_width_class(this.width)}`;
         },
 
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index f8068b32d8c..88d88168586 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -1,14 +1,9 @@
 <template>
 
-    <div class="blueprint-tab @container"
-        :class="{
-            'w-full md:w-1/2': !isEditing && !isSingle,
-            'w-full': isEditing || isSingle
-        }"
-    >
+    <div class="blueprint-tab @container w-full">
         <div class="blueprint-tab-card card p-0 h-full flex rounded-t flex-col">
 
-            <div class="bg-gray-200 border-b text-sm flex rounded-t" v-if="!isSingle">
+            <div class="bg-gray-200 border-b text-sm flex rounded-t">
                 <div class="blueprint-drag-handle blueprint-tab-drag-handle w-4 border-r"></div>
                 <div class="p-3 py-2 flex-1">
                     <span class="font-medium mr-2">
@@ -19,9 +14,6 @@
                     </span>
                 </div>
                 <div class="flex items-center px-3">
-                    <button @click.prevent="toggleEditing" class="flex items-center text-gray-600 hover:text-gray-950 mr-2">
-                        <svg-icon class="h-4 w-4" :name="isEditing ? 'shrink' : 'expand'" />
-                    </button>
                     <button @click.prevent="$emit('deleted')" class="flex items-center text-gray-600 hover:text-gray-950" v-if="deletable">
                         <svg-icon class="h-4 w-4" name="trash" />
                     </button>
@@ -33,7 +25,6 @@
                 class="p-4"
                 :fields="tab.fields"
                 :editing-field="editingField"
-                :is-tab-expanded="isEditing || isSingle"
                 :suggestable-condition-fields="suggestableConditionFields"
                 :can-define-localizable="canDefineLocalizable"
                 @field-created="fieldCreated"
@@ -73,7 +64,7 @@ export default {
             type: Object,
             required: true
         },
-        isSingle: {
+        isSingle: { // was used for sections, but will be used for tabs in the future
             type: Boolean,
             default: false
         },
@@ -85,7 +76,6 @@ export default {
 
     data() {
         return {
-            isEditing: false,
             editingField: null,
             handleSyncedWithDisplay: false
         }
@@ -149,10 +139,6 @@ export default {
             if (this.$refs.displayInput) {
                 this.$refs.displayInput.select();
             }
-        },
-
-        toggleEditing() {
-            this.isEditing = ! this.isEditing
         }
 
     }
diff --git a/resources/js/components/fieldsets/EditForm.vue b/resources/js/components/fieldsets/EditForm.vue
index 809f943dd71..57e33d39d79 100644
--- a/resources/js/components/fieldsets/EditForm.vue
+++ b/resources/js/components/fieldsets/EditForm.vue
@@ -32,7 +32,6 @@
                 :fields="fieldset.fields"
                 :editing-field="editingField"
                 :exclude-fieldset="fieldset.handle"
-                :is-tab-expanded="true"
                 @field-created="fieldCreated"
                 @field-updated="fieldUpdated"
                 @field-linked="fieldLinked"

From e4c2902957cd338c1529ea1b5fb7e9d21f12f300 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 3 Mar 2023 17:32:20 -0500
Subject: [PATCH 03/46] avoid comically oversized buttons

---
 resources/css/components/blueprints.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
index 8a61735bce0..9f3825cb322 100644
--- a/resources/css/components/blueprints.css
+++ b/resources/css/components/blueprints.css
@@ -37,12 +37,6 @@
     }
 }
 
-/*  Use specific selector because we don't want it to happen */
-/*  when used inside  a grid field configuratormajig. */
-.blueprint-tab .blueprint-tab-field-actions > div {
-    @apply w-1/2;
-}
-
 .blueprint-tab-import {
     &:before {
         content: '';
@@ -88,5 +82,3 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 }
-
-

From 11992642fcca579c6fc70bb08dae25b096d77e97 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 3 Mar 2023 17:32:25 -0500
Subject: [PATCH 04/46] fix mirror

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

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 79526776e6b..ae122e594ca 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -120,7 +120,7 @@ export default {
             sortableFields = new Sortable(document.querySelectorAll('.blueprint-tab-draggable-zone'), {
                 draggable: '.blueprint-tab-field',
                 handle: '.blueprint-drag-handle',
-                mirror: { constrainDimensions: true },
+                mirror: { constrainDimensions: true, appendTo: 'body' },
                 plugins: [Plugins.SwapAnimation]
             }).on('sortable:stop', e => {
                 if (e.newContainer.parentElement.classList.contains('blueprint-add-tab-button')) {

From 86f3127f0f4c311b348ded82e9ad53f1adde6c34 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Sat, 4 Mar 2023 17:15:41 -0500
Subject: [PATCH 05/46] rename back to sections

---
 resources/js/components/blueprints/Tab.vue  |  36 ++---
 resources/js/components/blueprints/Tabs.vue | 146 ++++++++++----------
 2 files changed, 91 insertions(+), 91 deletions(-)

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 88d88168586..0987ddf09ee 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -1,16 +1,16 @@
 <template>
 
-    <div class="blueprint-tab @container w-full">
-        <div class="blueprint-tab-card card p-0 h-full flex rounded-t flex-col">
+    <div class="blueprint-section @container w-full">
+        <div class="blueprint-section-card card p-0 h-full flex rounded-t flex-col">
 
             <div class="bg-gray-200 border-b text-sm flex rounded-t">
-                <div class="blueprint-drag-handle blueprint-tab-drag-handle w-4 border-r"></div>
+                <div class="blueprint-drag-handle blueprint-section-drag-handle w-4 border-r"></div>
                 <div class="p-3 py-2 flex-1">
                     <span class="font-medium mr-2">
-                        <input ref="displayInput" type="text" v-model="tab.display" class="bg-transparent w-full outline-none" />
+                        <input ref="displayInput" type="text" v-model="section.display" class="bg-transparent w-full outline-none" />
                     </span>
                     <span class="font-mono text-xs text-gray-700 mr-2">
-                        <input type="text" v-model="tab.handle" @input="handleSyncedWithDisplay = false" class="bg-transparent w-full outline-none" />
+                        <input type="text" v-model="section.handle" @input="handleSyncedWithDisplay = false" class="bg-transparent w-full outline-none" />
                     </span>
                 </div>
                 <div class="flex items-center px-3">
@@ -23,7 +23,7 @@
 
             <fields
                 class="p-4"
-                :fields="tab.fields"
+                :fields="section.fields"
                 :editing-field="editingField"
                 :suggestable-condition-fields="suggestableConditionFields"
                 :can-define-localizable="canDefineLocalizable"
@@ -60,7 +60,7 @@ export default {
     },
 
     props: {
-        tab: {
+        section: {
             type: Object,
             required: true
         },
@@ -83,22 +83,22 @@ export default {
 
     computed: {
         suggestableConditionFields() {
-            return this.tab.fields.map(field => field.handle);
+            return this.section.fields.map(field => field.handle);
         }
     },
 
     watch: {
 
-        tab: {
+        section: {
             deep: true,
-            handler(tab) {
-                this.$emit('updated', tab);
+            handler(section) {
+                this.$emit('updated', section);
             }
         },
 
-        'tab.display': function(display) {
+        'section.display': function(display) {
             if (this.handleSyncedWithDisplay) {
-                this.tab.handle = this.$slugify(display, '_');
+                this.section.handle = this.$slugify(display, '_');
             }
         }
 
@@ -107,7 +107,7 @@ export default {
     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') {
+        if (!this.section.handle || this.section.handle == 'new_section' || this.section.handle == 'new_set') {
             this.handleSyncedWithDisplay = true;
         }
     },
@@ -115,7 +115,7 @@ export default {
     methods: {
 
         fieldLinked(field) {
-            this.tab.fields.push(field);
+            this.section.fields.push(field);
             this.$toast.success(__('Field added'));
 
             if (field.type === 'reference') {
@@ -124,15 +124,15 @@ export default {
         },
 
         fieldCreated(field) {
-            this.tab.fields.push(field);
+            this.section.fields.push(field);
         },
 
         fieldUpdated(i, field) {
-            this.tab.fields.splice(i, 1, field);
+            this.section.fields.splice(i, 1, field);
         },
 
         deleteField(i) {
-            this.tab.fields.splice(i, 1);
+            this.section.fields.splice(i, 1);
         },
 
         focus() {
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index ae122e594ca..3daa4c95f09 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -2,28 +2,28 @@
 
     <div>
 
-        <div ref="tabs" class="blueprint-tabs flex flex-wrap -mx-2 outline-none">
-
-            <blueprint-tab
-                ref="tab"
-                v-for="(tab, i) in tabs"
-                :key="tab._id"
-                :tab="tab"
-                :is-single="singleTab"
+        <div ref="sections" class="blueprint-sections flex flex-wrap -mx-2 outline-none">
+
+            <blueprint-section
+                ref="section"
+                v-for="(section, i) in sections"
+                :key="section._id"
+                :section="section"
+                :is-single="singleSection"
                 :can-define-localizable="canDefineLocalizable"
-                :deletable="isTabDeletable(i)"
-                @updated="updateTab(i, $event)"
-                @deleted="deleteTab(i)"
+                :deletable="isSectionDeletable(i)"
+                @updated="updateSection(i, $event)"
+                @deleted="deleteSection(i)"
             />
 
-            <div class="blueprint-add-tab-container w-full md:w-1/2" v-if="!singleTab">
-                <button class="blueprint-add-tab-button outline-none" @click="addTab">
+            <div class="blueprint-add-section-container w-full md:w-1/2" v-if="!singleSection">
+                <button class="blueprint-add-section-button outline-none" @click="addSection">
                     <div class="text-center flex items-center leading-none">
-                        <div class="text-2xl mr-2">+</div>
-                        <div v-text="addTabText" />
+                        <div class="text-2xl mr-1">+</div>
+                        <div v-text="addSectionText" />
                     </div>
 
-                    <div class="blueprint-tab-draggable-zone outline-none"></div>
+                    <div class="blueprint-section-draggable-zone outline-none"></div>
                 </button>
             </div>
 
@@ -35,38 +35,38 @@
 
 <script>
 import uniqid from 'uniqid';
-import BlueprintTab from './Tab.vue';
+import BlueprintSection from './Section.vue';
 import {Sortable, Plugins} from '@shopify/draggable';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 
-let sortableTabs, sortableFields;
+let sortableSections, sortableFields;
 
 export default {
 
     mixins: [CanDefineLocalizable],
 
     components: {
-        BlueprintTab
+        BlueprintSection
     },
 
     props: {
-        initialTabs: {
+        initialSections: {
             type: Array,
             required: true
         },
-        addTabText: {
+        addSectionText: {
             type: String,
-            default: () => __('Add Tab')
+            default: () => __('Add Section')
         },
-        newTabText: {
+        newSectionText: {
             type: String,
-            default: () => __('New Tab')
+            default: () => __('New Section')
         },
-        singleTab: {
+        singleSection: {
             type: Boolean,
             default: false
         },
-        requireTab: {
+        requireSection: {
             type: Boolean,
             default: true
         }
@@ -74,19 +74,19 @@ export default {
 
     data() {
         return {
-            tabs: this.initialTabs
+            sections: this.initialSections
         }
     },
 
     mounted() {
-        this.ensureTab();
+        this.ensureSection();
         this.makeSortable();
     },
 
     watch: {
 
-        tabs(tabs) {
-            this.$emit('updated', tabs);
+        sections(sections) {
+            this.$emit('updated', sections);
             this.makeSortable();
         }
 
@@ -95,105 +95,105 @@ export default {
     methods: {
 
         makeSortable() {
-            if (! this.singleTab) this.makeTabsSortable();
+            if (! this.singleSection) this.makeSectionsSortable();
 
             this.makeFieldsSortable();
         },
 
-        makeTabsSortable() {
-            if (sortableTabs) sortableTabs.destroy();
+        makeSectionsSortable() {
+            if (sortableSections) sortableSections.destroy();
 
-            sortableTabs = new Sortable(this.$refs.tabs, {
-                draggable: '.blueprint-tab',
-                handle: '.blueprint-tab-drag-handle',
+            sortableSections = new Sortable(this.$refs.sections, {
+                draggable: '.blueprint-section',
+                handle: '.blueprint-section-drag-handle',
                 mirror: { constrainDimensions: true },
                 swapAnimation: { horizontal: true },
                 plugins: [Plugins.SwapAnimation]
             }).on('sortable:stop', e => {
-                this.tabs.splice(e.newIndex, 0, this.tabs.splice(e.oldIndex, 1)[0]);
+                this.sections.splice(e.newIndex, 0, this.sections.splice(e.oldIndex, 1)[0]);
             });
         },
 
         makeFieldsSortable() {
             if (sortableFields) sortableFields.destroy();
 
-            sortableFields = new Sortable(document.querySelectorAll('.blueprint-tab-draggable-zone'), {
-                draggable: '.blueprint-tab-field',
+            sortableFields = new Sortable(document.querySelectorAll('.blueprint-section-draggable-zone'), {
+                draggable: '.blueprint-section-field',
                 handle: '.blueprint-drag-handle',
                 mirror: { constrainDimensions: true, appendTo: 'body' },
                 plugins: [Plugins.SwapAnimation]
             }).on('sortable:stop', e => {
-                if (e.newContainer.parentElement.classList.contains('blueprint-add-tab-button')) {
-                    this.moveFieldToNewTab(e);
+                if (e.newContainer.parentElement.classList.contains('blueprint-add-section-button')) {
+                    this.moveFieldToNewSection(e);
                 } else {
-                    this.moveFieldToExistingTab(e);
+                    this.moveFieldToExistingSection(e);
                 }
             });
         },
 
-        moveFieldToExistingTab(e) {
-            const oldTabIndex = Array.prototype.indexOf.call(this.$refs.tabs.children, e.oldContainer.closest('.blueprint-tab'));
-            const newTabIndex = Array.prototype.indexOf.call(this.$refs.tabs.children, e.newContainer.closest('.blueprint-tab'));
-            const field = this.tabs[oldTabIndex].fields[e.oldIndex];
+        moveFieldToExistingSection(e) {
+            const oldSectionIndex = Array.prototype.indexOf.call(this.$refs.sections.children, e.oldContainer.closest('.blueprint-section'));
+            const newSectionIndex = Array.prototype.indexOf.call(this.$refs.sections.children, e.newContainer.closest('.blueprint-section'));
+            const field = this.sections[oldSectionIndex].fields[e.oldIndex];
 
-            if (oldTabIndex === newTabIndex) {
-                let fields = this.tabs[newTabIndex].fields
+            if (oldSectionIndex === newSectionIndex) {
+                let fields = this.sections[newSectionIndex].fields
                 fields.splice(e.newIndex, 0, fields.splice(e.oldIndex, 1)[0]);
             } else {
-                this.tabs[newTabIndex].fields.splice(e.newIndex, 0, field);
-                this.tabs[oldTabIndex].fields.splice(e.oldIndex, 1);
+                this.sections[newSectionIndex].fields.splice(e.newIndex, 0, field);
+                this.sections[oldSectionIndex].fields.splice(e.oldIndex, 1);
             }
         },
 
-        moveFieldToNewTab(e) {
-            this.addTab();
+        moveFieldToNewSection(e) {
+            this.addSection();
 
-            const newTabIndex = this.tabs.length - 1;
-            const oldTabIndex = Array.prototype.indexOf.call(this.$refs.tabs.children, e.oldContainer.closest('.blueprint-tab'));
-            const field = this.tabs[oldTabIndex].fields[e.oldIndex];
+            const newSectionIndex = this.sections.length - 1;
+            const oldSectionIndex = Array.prototype.indexOf.call(this.$refs.sections.children, e.oldContainer.closest('.blueprint-section'));
+            const field = this.sections[oldSectionIndex].fields[e.oldIndex];
 
-            this.tabs[newTabIndex].fields.splice(e.newIndex, 0, field);
-            this.tabs[oldTabIndex].fields.splice(e.oldIndex, 1);
+            this.sections[newSectionIndex].fields.splice(e.newIndex, 0, field);
+            this.sections[oldSectionIndex].fields.splice(e.oldIndex, 1);
 
             this.$nextTick(() => this.makeFieldsSortable());
         },
 
-        addTab() {
-            this.tabs.push({
+        addSection() {
+            this.sections.push({
                 _id: uniqid(),
-                display: this.newTabText,
-                handle: this.$slugify(this.newTabText, '_'),
+                display: this.newSectionText,
+                handle: this.$slugify(this.newSectionText, '_'),
                 fields: []
             });
 
             this.$nextTick(() => {
-                this.$refs.tab[this.tabs.length-1].focus();
+                this.$refs.section[this.sections.length-1].focus();
                 this.makeSortable();
             })
         },
 
-        deleteTab(i) {
-            this.tabs.splice(i, 1);
+        deleteSection(i) {
+            this.sections.splice(i, 1);
 
-            this.ensureTab();
+            this.ensureSection();
         },
 
-        updateTab(i, tab) {
-            this.tabs.splice(i, 1, tab);
+        updateSection(i, section) {
+            this.sections.splice(i, 1, section);
         },
 
-        ensureTab() {
-            if (this.requireTab && this.tabs.length === 0) {
-                this.addTab();
+        ensureSection() {
+            if (this.requireSection && this.sections.length === 0) {
+                this.addSection();
             }
         },
 
-        isTabDeletable(i) {
-            if (this.tabs.length > 1) return true;
+        isSectionDeletable(i) {
+            if (this.sections.length > 1) return true;
 
             if (i > 0) return true;
 
-            return !this.requireTab;
+            return !this.requireSection;
         }
 
     }

From 5cb27c7f3e5cdd957eca82806df8a586c470f355 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Sat, 4 Mar 2023 17:15:57 -0500
Subject: [PATCH 06/46] rename files

---
 resources/js/components/blueprints/{Tab.vue => Section.vue}   | 0
 resources/js/components/blueprints/{Tabs.vue => Sections.vue} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename resources/js/components/blueprints/{Tab.vue => Section.vue} (100%)
 rename resources/js/components/blueprints/{Tabs.vue => Sections.vue} (100%)

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Section.vue
similarity index 100%
rename from resources/js/components/blueprints/Tab.vue
rename to resources/js/components/blueprints/Section.vue
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Sections.vue
similarity index 100%
rename from resources/js/components/blueprints/Tabs.vue
rename to resources/js/components/blueprints/Sections.vue

From a701639b89b72591b894c53f570701e63a63908a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Sat, 4 Mar 2023 17:25:40 -0500
Subject: [PATCH 07/46] more

---
 resources/css/components/blueprints.css       | 32 +++++++++----------
 .../js/components/blueprints/Builder.vue      |  8 ++---
 resources/js/components/blueprints/Fields.vue |  4 +--
 .../js/components/blueprints/RegularField.vue |  6 ++--
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
index 9f3825cb322..37476093f0b 100644
--- a/resources/css/components/blueprints.css
+++ b/resources/css/components/blueprints.css
@@ -2,14 +2,14 @@
    BLUEPRINTS
    ========================================================================== */
 
-.blueprint-tab {
+.blueprint-section {
     @apply p-2 min-h-40 outline-none;
 
     &.draggable-source--is-dragging {
         opacity: 0.5;
     }
 
-    &.draggable-mirror .blueprint-tab-card {
+    &.draggable-mirror .blueprint-section-card {
         @apply shadow-lg;
     }
 }
@@ -21,10 +21,10 @@
     background-size: 7px 17px;
 }
 
-.blueprint-tab-field {
+.blueprint-section-field {
     @apply relative mb-2 px-1 z-10 outline-none text-sm;
 
-    .blueprint-tab-field-inner {
+    .blueprint-section-field-inner {
         @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10;
     }
 
@@ -37,7 +37,7 @@
     }
 }
 
-.blueprint-tab-import {
+.blueprint-section-import {
     &:before {
         content: '';
         @apply border rounded absolute bg-gray-200 shadow-sm;
@@ -47,14 +47,14 @@
 
 /*  These are applied here rather than the utility classes so they don't override */
 /*  the inline widths defined by the draggable library. */
-.blueprint-tab-field-w-1\/4 { @apply w-1/4 };
-.blueprint-tab-field-w-1\/3 { @apply w-1/3 };
-.blueprint-tab-field-w-1\/2 { @apply w-1/2 };
-.blueprint-tab-field-w-2\/3 { @apply w-2/3 };
-.blueprint-tab-field-w-3\/4 { @apply w-3/4 };
-.blueprint-tab-field-w-full { @apply w-full };
-
-.blueprint-add-tab-container {
+.blueprint-section-field-w-1\/4 { @apply w-1/4 };
+.blueprint-section-field-w-1\/3 { @apply w-1/3 };
+.blueprint-section-field-w-1\/2 { @apply w-1/2 };
+.blueprint-section-field-w-2\/3 { @apply w-2/3 };
+.blueprint-section-field-w-3\/4 { @apply w-3/4 };
+.blueprint-section-field-w-full { @apply w-full };
+
+.blueprint-add-section-container {
     @apply p-2 flex min-h-40;
 
     .draggable-container--is-dragging & {
@@ -62,18 +62,18 @@
     }
 }
 
-.blueprint-add-tab-button {
+.blueprint-add-section-button {
     @apply relative w-full border border-gray-500 border-dashed rounded flex justify-center items-center text-gray-700;
 
     &:hover {
         @apply border-gray text-gray-950;
     }
 
-    .blueprint-tab-draggable-zone {
+    .blueprint-section-draggable-zone {
         @apply absolute inset-0 p-4;
     }
 
-    .blueprint-tab-field {
+    .blueprint-section-field {
         @apply bg-white;
     }
 }
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index 1f7b20eb211..a2a07cfa6ad 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -37,9 +37,9 @@
             </div>
         </div>
 
-        <tabs
+        <sections
             :single-tab="!useTabs"
-            :initial-tabs="blueprint.tabs"
+            :initial-sections="blueprint.tabs"
             @updated="tabsUpdated"
         />
 
@@ -48,12 +48,12 @@
 </template>
 
 <script>
-import Tabs from './Tabs.vue';
+import Sections from './Sections.vue';
 
 export default {
 
     components: {
-        Tabs,
+        Sections,
     },
 
     props: {
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index 7a4a3f7a8d0..c38f1d8a107 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -2,7 +2,7 @@
 
     <div class="flex flex-col text-sm">
 
-        <div class="blueprint-tab-draggable-zone -mx-1"
+        <div class="blueprint-section-draggable-zone -mx-1"
             :class="{ 'flex flex-wrap flex-1': fields.length }"
         >
             <slot name="empty-state" v-if="!fields.length" />
@@ -22,7 +22,7 @@
             />
         </div>
 
-        <div class="blueprint-tab-field-actions flex mt-2 -mx-1">
+        <div class="blueprint-section-field-actions flex mt-2 -mx-1">
             <div class="px-1">
                 <link-fields
                     :exclude-fieldset="excludeFieldset"
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index 4efb08a973b..d5197c6d73d 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -1,7 +1,7 @@
 <template>
 
-    <div class="blueprint-tab-field" :class="widthClass">
-        <div class="blueprint-tab-field-inner">
+    <div class="blueprint-section-field" :class="widthClass">
+        <div class="blueprint-section-field-inner">
             <div class="blueprint-drag-handle w-4 border-r"></div>
             <div class="flex flex-1 items-center justify-between">
                 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
@@ -111,7 +111,7 @@ export default {
         },
 
         widthClass() {
-            return `blueprint-tab-field-${tailwind_width_class(this.width)}`;
+            return `blueprint-section-field-${tailwind_width_class(this.width)}`;
         },
 
         localizable: {

From 9b4ab6fabfe0463aa9bd4917f4b92b80702023e7 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 12:19:41 -0500
Subject: [PATCH 08/46] initial blueprint builder switch to tabs

---
 resources/css/components/blueprints.css       |   2 +-
 .../js/components/blueprints/Builder.vue      |  11 +-
 resources/js/components/blueprints/Fields.vue |   4 +
 .../js/components/blueprints/ImportField.vue  |   4 +-
 .../js/components/blueprints/Section.vue      |   7 +-
 .../js/components/blueprints/Sections.vue     | 105 ++--------
 resources/js/components/blueprints/Tabs.vue   | 185 ++++++++++++++++++
 src/Fields/Section.php                        |  15 ++
 .../CP/Fields/ManagesBlueprints.php           |  15 +-
 9 files changed, 249 insertions(+), 99 deletions(-)
 create mode 100644 resources/js/components/blueprints/Tabs.vue

diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css
index 37476093f0b..461ca55f750 100644
--- a/resources/css/components/blueprints.css
+++ b/resources/css/components/blueprints.css
@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .blueprint-section {
-    @apply p-2 min-h-40 outline-none;
+    @apply p-2 min-h-40 outline-none w-full;
 
     &.draggable-source--is-dragging {
         opacity: 0.5;
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index a2a07cfa6ad..a0f2fe2451c 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -37,10 +37,9 @@
             </div>
         </div>
 
-        <sections
-            :single-tab="!useTabs"
-            :initial-sections="blueprint.tabs"
-            @updated="tabsUpdated"
+        <tabs
+            v-if="useTabs"
+            :initial-tabs="blueprint.tabs"
         />
 
     </div>
@@ -48,12 +47,12 @@
 </template>
 
 <script>
-import Sections from './Sections.vue';
+import Tabs from './Tabs.vue';
 
 export default {
 
     components: {
-        Sections,
+        Tabs,
     },
 
     props: {
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index c38f1d8a107..053fb7fafcb 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -4,6 +4,8 @@
 
         <div class="blueprint-section-draggable-zone -mx-1"
             :class="{ 'flex flex-wrap flex-1': fields.length }"
+            :data-tab="tabId"
+            :data-section="sectionId"
         >
             <slot name="empty-state" v-if="!fields.length" />
 
@@ -85,6 +87,8 @@ export default {
     },
 
     props: {
+        tabId: String,
+        sectionId: String,
         fields: Array,
         editingField: {},
         suggestableConditionFields: Array,
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 2d5f9f8cddc..190370e4aa5 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -1,7 +1,7 @@
 <template>
 
-    <div class="blueprint-tab-field blueprint-tab-import blueprint-tab-field-w-full">
-        <div class="blueprint-tab-field-inner">
+    <div class="blueprint-section-field blueprint-section-import blueprint-section-field-w-full">
+        <div class="blueprint-section-field-inner">
             <div class="blueprint-drag-handle w-4 border-r"></div>
             <div class="flex flex-1 items-center justify-between">
                 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 0987ddf09ee..5416a406b53 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="blueprint-section @container w-full">
+    <div class="blueprint-section @container">
         <div class="blueprint-section-card card p-0 h-full flex rounded-t flex-col">
 
             <div class="bg-gray-200 border-b text-sm flex rounded-t">
@@ -23,6 +23,8 @@
 
             <fields
                 class="p-4"
+                :tab-id="tabId"
+                :section-id="section._id"
                 :fields="section.fields"
                 :editing-field="editingField"
                 :suggestable-condition-fields="suggestableConditionFields"
@@ -60,6 +62,9 @@ export default {
     },
 
     props: {
+        tabId: {
+            type: String
+        },
         section: {
             type: Object,
             required: true
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index 3daa4c95f09..0941b106641 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -2,7 +2,11 @@
 
     <div>
 
-        <div ref="sections" class="blueprint-sections flex flex-wrap -mx-2 outline-none">
+        <div
+            ref="sections"
+            class="blueprint-sections flex flex-wrap -mx-2 outline-none"
+            :data-tab="tabId"
+        >
 
             <blueprint-section
                 ref="section"
@@ -12,6 +16,7 @@
                 :is-single="singleSection"
                 :can-define-localizable="canDefineLocalizable"
                 :deletable="isSectionDeletable(i)"
+                :tab-id="tabId"
                 @updated="updateSection(i, $event)"
                 @deleted="deleteSection(i)"
             />
@@ -23,7 +28,10 @@
                         <div v-text="addSectionText" />
                     </div>
 
-                    <div class="blueprint-section-draggable-zone outline-none"></div>
+                    <div
+                        class="blueprint-section-draggable-zone outline-none"
+                        :data-tab="tabId"
+                    />
                 </button>
             </div>
 
@@ -36,11 +44,8 @@
 <script>
 import uniqid from 'uniqid';
 import BlueprintSection from './Section.vue';
-import {Sortable, Plugins} from '@shopify/draggable';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 
-let sortableSections, sortableFields;
-
 export default {
 
     mixins: [CanDefineLocalizable],
@@ -50,6 +55,9 @@ export default {
     },
 
     props: {
+        tabId: {
+            type: String,
+        },
         initialSections: {
             type: Array,
             required: true
@@ -78,98 +86,27 @@ export default {
         }
     },
 
-    mounted() {
-        this.ensureSection();
-        this.makeSortable();
-    },
-
     watch: {
 
         sections(sections) {
             this.$emit('updated', sections);
-            this.makeSortable();
         }
 
     },
 
     methods: {
 
-        makeSortable() {
-            if (! this.singleSection) this.makeSectionsSortable();
-
-            this.makeFieldsSortable();
-        },
-
-        makeSectionsSortable() {
-            if (sortableSections) sortableSections.destroy();
-
-            sortableSections = new Sortable(this.$refs.sections, {
-                draggable: '.blueprint-section',
-                handle: '.blueprint-section-drag-handle',
-                mirror: { constrainDimensions: true },
-                swapAnimation: { horizontal: true },
-                plugins: [Plugins.SwapAnimation]
-            }).on('sortable:stop', e => {
-                this.sections.splice(e.newIndex, 0, this.sections.splice(e.oldIndex, 1)[0]);
-            });
-        },
-
-        makeFieldsSortable() {
-            if (sortableFields) sortableFields.destroy();
-
-            sortableFields = new Sortable(document.querySelectorAll('.blueprint-section-draggable-zone'), {
-                draggable: '.blueprint-section-field',
-                handle: '.blueprint-drag-handle',
-                mirror: { constrainDimensions: true, appendTo: 'body' },
-                plugins: [Plugins.SwapAnimation]
-            }).on('sortable:stop', e => {
-                if (e.newContainer.parentElement.classList.contains('blueprint-add-section-button')) {
-                    this.moveFieldToNewSection(e);
-                } else {
-                    this.moveFieldToExistingSection(e);
-                }
-            });
-        },
-
-        moveFieldToExistingSection(e) {
-            const oldSectionIndex = Array.prototype.indexOf.call(this.$refs.sections.children, e.oldContainer.closest('.blueprint-section'));
-            const newSectionIndex = Array.prototype.indexOf.call(this.$refs.sections.children, e.newContainer.closest('.blueprint-section'));
-            const field = this.sections[oldSectionIndex].fields[e.oldIndex];
-
-            if (oldSectionIndex === newSectionIndex) {
-                let fields = this.sections[newSectionIndex].fields
-                fields.splice(e.newIndex, 0, fields.splice(e.oldIndex, 1)[0]);
-            } else {
-                this.sections[newSectionIndex].fields.splice(e.newIndex, 0, field);
-                this.sections[oldSectionIndex].fields.splice(e.oldIndex, 1);
-            }
-        },
-
-        moveFieldToNewSection(e) {
-            this.addSection();
-
-            const newSectionIndex = this.sections.length - 1;
-            const oldSectionIndex = Array.prototype.indexOf.call(this.$refs.sections.children, e.oldContainer.closest('.blueprint-section'));
-            const field = this.sections[oldSectionIndex].fields[e.oldIndex];
-
-            this.sections[newSectionIndex].fields.splice(e.newIndex, 0, field);
-            this.sections[oldSectionIndex].fields.splice(e.oldIndex, 1);
-
-            this.$nextTick(() => this.makeFieldsSortable());
-        },
-
         addSection() {
-            this.sections.push({
+            const section = {
                 _id: uniqid(),
                 display: this.newSectionText,
                 handle: this.$slugify(this.newSectionText, '_'),
                 fields: []
-            });
+            };
+
+            this.sections.push(section);
 
-            this.$nextTick(() => {
-                this.$refs.section[this.sections.length-1].focus();
-                this.makeSortable();
-            })
+            return section;
         },
 
         deleteSection(i) {
@@ -182,12 +119,6 @@ export default {
             this.sections.splice(i, 1, section);
         },
 
-        ensureSection() {
-            if (this.requireSection && this.sections.length === 0) {
-                this.addSection();
-            }
-        },
-
         isSectionDeletable(i) {
             if (this.sections.length > 1) return true;
 
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
new file mode 100644
index 00000000000..ee4564228e3
--- /dev/null
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -0,0 +1,185 @@
+<template>
+
+    <div>
+
+        <div ref="tabs" class="mb-5 flex">
+            <div
+                v-for="tab in tabs"
+                :key="tab._id"
+                class="blueprint-tab card py-2 mr-2"
+                @click="currentTab = tab._id"
+            >
+                {{ tab.display }}
+                ({{ tab._id }})
+            </div>
+        </div>
+
+        <div
+            v-for="(tab, i) in tabs"
+            class="card mb-5"
+        >
+
+            <div v-if="currentTab === tab._id">
+                (Current tab)
+            </div>
+            <h3>{{ tab.display }}</h3>
+            <h3>{{ tab.handle }}</h3>
+
+            <sections
+                ref="sections"
+                :tab-id="tab._id"
+                :initial-sections="tab.sections"
+                @updated="sectionsUpdated(tab._id, $event)"
+            />
+
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+import {Sortable, Plugins} from '@shopify/draggable';
+import Sections from './Sections.vue';
+
+let sortableTabs, sortableSections, sortableFields;
+
+export default {
+
+    components: {
+        Sections
+    },
+
+    props: {
+        initialTabs: {
+            type: Array,
+            required: true
+        },
+    },
+
+    data() {
+        return {
+            tabs: this.initialTabs,
+            currentTab: this.initialTabs[0]._id,
+        }
+    },
+
+    mounted() {
+        // this.ensureTab();
+        this.makeSortable();
+    },
+
+    methods: {
+
+        ensureTab() {
+            if (this.requireTab && this.tabs.length === 0) {
+                this.addTab();
+            }
+        },
+
+        makeSortable() {
+            if (! this.singleTab) this.makeTabsSortable();
+
+            // if (! this.singleSection) { // can/should sections be singular now?
+                this.makeSectionsSortable();
+            // }
+
+            this.makeFieldsSortable();
+        },
+
+        makeTabsSortable() {
+            if (sortableTabs) sortableTabs.destroy();
+
+            sortableTabs = new Sortable(this.$refs.tabs, {
+                draggable: '.blueprint-tab',
+                mirror: { constrainDimensions: true },
+                swapAnimation: { horizontal: true },
+                plugins: [Plugins.SwapAnimation]
+            }).on('sortable:stop', e => {
+                this.tabs.splice(e.newIndex, 0, this.tabs.splice(e.oldIndex, 1)[0]);
+            }).on('mirror:create', (e) => e.cancel());
+        },
+
+        makeSectionsSortable() {
+            if (sortableSections) sortableSections.destroy();
+
+            sortableSections = new Sortable(document.querySelectorAll('.blueprint-sections'), {
+                draggable: '.blueprint-section',
+                handle: '.blueprint-section-drag-handle',
+                mirror: { constrainDimensions: true },
+                plugins: [Plugins.SwapAnimation]
+            }).on('sortable:stop', e => this.sectionHasBeenDropped(e));
+        },
+
+
+        makeFieldsSortable() {
+            if (sortableFields) sortableFields.destroy();
+
+            sortableFields = new Sortable(this.$el.querySelectorAll('.blueprint-section-draggable-zone'), {
+                draggable: '.blueprint-section-field',
+                handle: '.blueprint-drag-handle',
+                mirror: { constrainDimensions: true, appendTo: 'body' },
+                plugins: [Plugins.SwapAnimation]
+            }).on('sortable:stop', e => this.fieldHasBeenDropped(e));
+        },
+
+        sectionsUpdated(tabId, sections) {
+            const tab = this.tabs.find(tab => tab._id === tabId);
+            this.updateTab(tabId, {...tab, sections});
+        },
+
+        sectionHasBeenDropped(e) {
+            const oldTabId = e.oldContainer.dataset.tab;
+            const newTabId = e.newContainer.dataset.tab;
+            const oldIndex = e.oldIndex;
+            const newIndex = e.newIndex;
+            const hasMovedTabs = oldTabId !== newTabId;
+
+            if (hasMovedTabs) {
+                // Rearrange sections within the tabs.
+                const oldTab = this.tabs.find(tab => tab._id === oldTabId);
+                const newTab = this.tabs.find(tab => tab._id === newTabId);
+                const section = oldTab.sections.splice(oldIndex, 1)[0];
+                newTab.sections.splice(newIndex, 0, section);
+                this.updateTab(oldTabId, oldTab);
+                this.updateTab(newTabId, newTab);
+            } else {
+                // Update the section within the tab.
+                const tab = this.tabs.find(tab => tab._id === oldTabId);
+                tab.sections.splice(newIndex, 0, tab.sections.splice(oldIndex, 1)[0]);
+                this.updateTab(oldTabId, tab);
+            }
+        },
+
+        fieldHasBeenDropped(e) {
+            const oldTabId = e.oldContainer.dataset.tab;
+            const newTabId = e.newContainer.dataset.tab;
+            const oldTab = this.tabs.find(tab => tab._id === oldTabId);
+            const newTab = this.tabs.find(tab => tab._id === newTabId);
+            const oldSection = oldTab.sections.find(section => section._id === e.oldContainer.dataset.section);
+            let newSection;
+
+            if (e.newContainer.parentElement.classList.contains('blueprint-add-section-button')) {
+                newSection = this.$refs.sections.find(vm => vm.tabId === newTabId).addSection();
+            } else {
+                newSection = newTab.sections.find(section => section._id === e.newContainer.dataset.section);
+            }
+
+            const field = oldSection.fields.splice(e.oldIndex, 1)[0];
+            newSection.fields.splice(e.newIndex, 0, field);
+
+            this.updateTab(oldTabId, oldTab);
+            this.updateTab(newTabId, newTab);
+
+            this.$nextTick(() => this.makeFieldsSortable());
+        },
+
+        updateTab(tabId, tab) {
+            const index = this.tabs.findIndex(tab => tab._id === tabId);
+            this.tabs.splice(index, 1, tab);
+        }
+
+    }
+
+}
+</script>
diff --git a/src/Fields/Section.php b/src/Fields/Section.php
index 6328f1f1789..33d3b917714 100644
--- a/src/Fields/Section.php
+++ b/src/Fields/Section.php
@@ -13,6 +13,21 @@ public function __construct($contents)
         $this->contents = $contents;
     }
 
+    public function display()
+    {
+        return $this->contents['display'] ?? null;
+    }
+
+    public function instructions()
+    {
+        return $this->contents['instructions'] ?? null;
+    }
+
+    public function contents(): array
+    {
+        return $this->contents;
+    }
+
     public function toPublishArray()
     {
         return [
diff --git a/src/Http/Controllers/CP/Fields/ManagesBlueprints.php b/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
index 1ff7f870c68..de4665923a1 100644
--- a/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
+++ b/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
@@ -92,8 +92,19 @@ private function tabToVue($tab): array
         return [
             'handle' => $tab->handle(),
             'display' => $tab->display(),
-            'fields' => collect($tab->contents()['fields'])->map(function ($field, $i) {
-                return array_merge(FieldTransformer::toVue($field), ['_id' => $i]);
+            'sections' => $tab->sections()->map(function ($section, $i) use ($tab) {
+                return array_merge($this->sectionToVue($section, $i, $tab), ['_id' => $tab->handle().'-'.$i]);
+            })->values()->all(),
+        ];
+    }
+
+    private function sectionToVue($section, $sectionIndex, $tab): array
+    {
+        return [
+            '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(),
         ];
     }

From c6f7c0ae5e47dc2706e86cc289b870538713fdfe Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 12:59:19 -0500
Subject: [PATCH 09/46] One tab is visible at a time. You can drag sections
 into other tabs.

---
 resources/js/components/blueprints/Tabs.vue | 47 +++++++++++++++------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index ee4564228e3..16d05fef6f0 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -7,7 +7,8 @@
                 v-for="tab in tabs"
                 :key="tab._id"
                 class="blueprint-tab card py-2 mr-2"
-                @click="currentTab = tab._id"
+                @click="selectTab(tab._id)"
+                @mouseenter="mouseEnteredTab(tab._id)"
             >
                 {{ tab.display }}
                 ({{ tab._id }})
@@ -16,12 +17,9 @@
 
         <div
             v-for="(tab, i) in tabs"
-            class="card mb-5"
+            :key="tab._id"
+            v-show="currentTab === tab._id"
         >
-
-            <div v-if="currentTab === tab._id">
-                (Current tab)
-            </div>
             <h3>{{ tab.display }}</h3>
             <h3>{{ tab.handle }}</h3>
 
@@ -61,6 +59,7 @@ export default {
         return {
             tabs: this.initialTabs,
             currentTab: this.initialTabs[0]._id,
+            lastInteractedTab: null
         }
     },
 
@@ -106,9 +105,13 @@ export default {
             sortableSections = new Sortable(document.querySelectorAll('.blueprint-sections'), {
                 draggable: '.blueprint-section',
                 handle: '.blueprint-section-drag-handle',
-                mirror: { constrainDimensions: true },
+                mirror: { constrainDimensions: true, appendTo: 'body' },
                 plugins: [Plugins.SwapAnimation]
-            }).on('sortable:stop', e => this.sectionHasBeenDropped(e));
+            })
+            .on('drag:start', e => this.lastInteractedTab = this.currentTab)
+            .on('drag:stop', e => this.lastInteractedTab = null)
+            .on('sortable:sort', e => this.lastInteractedTab = this.currentTab)
+            .on('sortable:stop', e => this.sectionHasBeenDropped(e));
         },
 
 
@@ -120,7 +123,10 @@ export default {
                 handle: '.blueprint-drag-handle',
                 mirror: { constrainDimensions: true, appendTo: 'body' },
                 plugins: [Plugins.SwapAnimation]
-            }).on('sortable:stop', e => this.fieldHasBeenDropped(e));
+            })
+            .on('drag:start', e => this.lastInteractedTab = this.currentTab)
+            .on('drag:stop', e => this.lastInteractedTab = null)
+            .on('sortable:stop', e => this.fieldHasBeenDropped(e));
         },
 
         sectionsUpdated(tabId, sections) {
@@ -130,9 +136,18 @@ export default {
 
         sectionHasBeenDropped(e) {
             const oldTabId = e.oldContainer.dataset.tab;
-            const newTabId = e.newContainer.dataset.tab;
             const oldIndex = e.oldIndex;
-            const newIndex = e.newIndex;
+            let newTabId = e.newContainer.dataset.tab;
+            let newIndex = e.newIndex;
+
+            if (this.lastInteractedTab !== this.currentTab
+            && this.currentTab !== newTabId) {
+                // Dragged over tab but haven't dragged into a droppable spot yet.
+                // In this case we'll assume they want to drop it at the top of the tab.
+                newTabId = this.currentTab;
+                newIndex = 0;
+            }
+
             const hasMovedTabs = oldTabId !== newTabId;
 
             if (hasMovedTabs) {
@@ -177,7 +192,15 @@ export default {
         updateTab(tabId, tab) {
             const index = this.tabs.findIndex(tab => tab._id === tabId);
             this.tabs.splice(index, 1, tab);
-        }
+        },
+
+        selectTab(tabId) {
+            this.currentTab = tabId;
+        },
+
+        mouseEnteredTab(tabId) {
+            if (this.lastInteractedTab) this.selectTab(tabId);
+        },
 
     }
 

From 7b62ae0ca22ae7cffb056b3a43eec24493b3f03e Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 15:24:19 -0500
Subject: [PATCH 10/46] Dropping a field onto a tab puts it at the top of the
 first section

---
 resources/js/components/blueprints/Tabs.vue | 22 ++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 16d05fef6f0..27e87f7679f 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -168,10 +168,9 @@ export default {
 
         fieldHasBeenDropped(e) {
             const oldTabId = e.oldContainer.dataset.tab;
-            const newTabId = e.newContainer.dataset.tab;
-            const oldTab = this.tabs.find(tab => tab._id === oldTabId);
-            const newTab = this.tabs.find(tab => tab._id === newTabId);
-            const oldSection = oldTab.sections.find(section => section._id === e.oldContainer.dataset.section);
+            let newTabId = e.newContainer.dataset.tab;
+            let newTab = this.tabs.find(tab => tab._id === newTabId);
+            let newIndex = e.newIndex
             let newSection;
 
             if (e.newContainer.parentElement.classList.contains('blueprint-add-section-button')) {
@@ -180,8 +179,21 @@ export default {
                 newSection = newTab.sections.find(section => section._id === e.newContainer.dataset.section);
             }
 
+            if (this.lastInteractedTab !== this.currentTab
+            && this.currentTab !== newTabId) {
+                // Dragged over tab but haven't dragged into a droppable spot yet.
+                // In this case we'll assume they want to dropped into the first section of that tab.
+                newTabId = this.currentTab;
+                newTab = this.tabs.find(tab => tab._id === newTabId);
+                newSection = newTab.sections[0];
+                newIndex = 0;
+            }
+
+            const oldTab = this.tabs.find(tab => tab._id === oldTabId);
+            const oldSection = oldTab.sections.find(section => section._id === e.oldContainer.dataset.section);
+
             const field = oldSection.fields.splice(e.oldIndex, 1)[0];
-            newSection.fields.splice(e.newIndex, 0, field);
+            newSection.fields.splice(newIndex, 0, field);
 
             this.updateTab(oldTabId, oldTab);
             this.updateTab(newTabId, newTab);

From 525cd8695039ab4c621458fde0fcdf23577ac1b4 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 15:42:48 -0500
Subject: [PATCH 11/46] Update so blueprints can be saved

---
 resources/js/components/blueprints/Builder.vue     |  1 +
 resources/js/components/blueprints/Tabs.vue        |  8 ++++++++
 .../Controllers/CP/Fields/ManagesBlueprints.php    | 14 ++++++++++----
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index a0f2fe2451c..17c2a947f77 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -40,6 +40,7 @@
         <tabs
             v-if="useTabs"
             :initial-tabs="blueprint.tabs"
+            @updated="tabsUpdated"
         />
 
     </div>
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 27e87f7679f..86803dbbaf5 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -63,6 +63,14 @@ export default {
         }
     },
 
+    watch: {
+
+        tabs(tabs) {
+            this.$emit('updated', tabs);
+        }
+
+    },
+
     mounted() {
         // this.ensureTab();
         this.makeSortable();
diff --git a/src/Http/Controllers/CP/Fields/ManagesBlueprints.php b/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
index de4665923a1..73c2bb23ad7 100644
--- a/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
+++ b/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
@@ -34,7 +34,7 @@ private function setBlueprintContents(Request $request, Blueprint $blueprint)
         $tabs = collect($request->tabs)->mapWithKeys(function ($tab) {
             return [array_pull($tab, 'handle') => [
                 'display' => $tab['display'],
-                'fields' => $this->tabFields($tab['fields']),
+                'sections' => $this->tabSections($tab['sections']),
             ]];
         })->all();
 
@@ -68,10 +68,16 @@ private function updateBlueprint($request, $blueprint)
         $blueprint->save();
     }
 
-    private function tabFields(array $fields)
+    private function tabSections(array $sections)
     {
-        return collect($fields)->map(function ($field) {
-            return FieldTransformer::fromVue($field);
+        return collect($sections)->map(function ($section) {
+            return [
+                'display' => $section['display'] ?? null,
+                'instructions' => $section['instructions'] ?? null,
+                'fields' => collect($section['fields'])
+                    ->map(fn ($field) => FieldTransformer::fromVue($field))
+                    ->all(),
+            ];
         })->all();
     }
 

From 99918087a269983558ff2c029d2444af9b38fd05 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 15:49:21 -0500
Subject: [PATCH 12/46] Swap section handles for instructions

---
 .../js/components/blueprints/Section.vue      | 21 +++----------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 5416a406b53..205a29715a9 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -7,10 +7,10 @@
                 <div class="blueprint-drag-handle blueprint-section-drag-handle w-4 border-r"></div>
                 <div class="p-3 py-2 flex-1">
                     <span class="font-medium mr-2">
-                        <input ref="displayInput" type="text" v-model="section.display" class="bg-transparent w-full outline-none" />
+                        <input ref="displayInput" type="text" v-model="section.display" class="bg-transparent w-full outline-none" :placeholder="`${__('Title')} (${__('Optional')})`" />
                     </span>
-                    <span class="font-mono text-xs text-gray-700 mr-2">
-                        <input type="text" v-model="section.handle" @input="handleSyncedWithDisplay = false" class="bg-transparent w-full outline-none" />
+                    <span class="text-xs text-gray-700 mr-2">
+                        <input type="text" v-model="section.instructions" class="bg-transparent w-full outline-none" :placeholder="`${__('Instructions')} (${__('Optional')})`" />
                     </span>
                 </div>
                 <div class="flex items-center px-3">
@@ -82,7 +82,6 @@ export default {
     data() {
         return {
             editingField: null,
-            handleSyncedWithDisplay: false
         }
     },
 
@@ -99,24 +98,10 @@ export default {
             handler(section) {
                 this.$emit('updated', section);
             }
-        },
-
-        'section.display': function(display) {
-            if (this.handleSyncedWithDisplay) {
-                this.section.handle = this.$slugify(display, '_');
-            }
         }
 
     },
 
-    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.section.handle || this.section.handle == 'new_section' || this.section.handle == 'new_set') {
-            this.handleSyncedWithDisplay = true;
-        }
-    },
-
     methods: {
 
         fieldLinked(field) {

From b67c1edbb62e7c66c451a6520d8b15835f417a75 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 16:36:14 -0500
Subject: [PATCH 13/46] bind tab display and handle as inputs

---
 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 86803dbbaf5..821609ede90 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -20,8 +20,8 @@
             :key="tab._id"
             v-show="currentTab === tab._id"
         >
-            <h3>{{ tab.display }}</h3>
-            <h3>{{ tab.handle }}</h3>
+            <input type="text" v-model="tab.display" class="input-text" />
+            <input type="text" v-model="tab.handle" class="input-text font-mono text-sm" />
 
             <sections
                 ref="sections"

From 4e7896095ba54ff3dbe947125427bb3cd0dcc509 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 16:36:24 -0500
Subject: [PATCH 14/46] make tabs a tiny bit better

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

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 821609ede90..beef1f3042a 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -6,12 +6,12 @@
             <div
                 v-for="tab in tabs"
                 :key="tab._id"
-                class="blueprint-tab card py-2 mr-2"
+                class="blueprint-tab card px-5 py-2 mr-2 cursor-pointer"
+                :class="{ 'bg-blue-100': currentTab === tab._id }"
                 @click="selectTab(tab._id)"
                 @mouseenter="mouseEnteredTab(tab._id)"
             >
                 {{ tab.display }}
-                ({{ tab._id }})
             </div>
         </div>
 
@@ -101,7 +101,8 @@ export default {
                 draggable: '.blueprint-tab',
                 mirror: { constrainDimensions: true },
                 swapAnimation: { horizontal: true },
-                plugins: [Plugins.SwapAnimation]
+                plugins: [Plugins.SwapAnimation],
+                distance: 10,
             }).on('sortable:stop', e => {
                 this.tabs.splice(e.newIndex, 0, this.tabs.splice(e.oldIndex, 1)[0]);
             }).on('mirror:create', (e) => e.cancel());

From 267dd2d0c5494ea6d4d485637a4618896db219b9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 16:37:48 -0500
Subject: [PATCH 15/46] upgrade draggable so we can use the distance option ...

If you click a tab and slightly move your mouse, it thinks its a drag, so itll start moving instead of selecting the tab.
The distance option will only trigger the drag after moving that many pixels.
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1b320a4dca8..4b7772252c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
       "name": "statamic",
       "dependencies": {
         "@popperjs/core": "^2.5.3",
-        "@shopify/draggable": "^1.0.0-beta.8",
+        "@shopify/draggable": "^1.0.0-beta.12",
         "@simonwep/pickr": "^1.7.4",
         "@tiptap/core": "^2.0.0-beta.217",
         "@tiptap/extension-blockquote": "^2.0.0-beta.217",
@@ -4003,9 +4003,9 @@
       }
     },
     "node_modules/@shopify/draggable": {
-      "version": "1.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/@shopify/draggable/-/draggable-1.0.0-beta.8.tgz",
-      "integrity": "sha512-9IeBPQM93Ad4qFKUopwuTClzoST/1OId4MaSd/8FB5ScCL2tl25UaOGNR8E2hjiL7xK4LN5+I1Ews6amS7YAiA=="
+      "version": "1.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@shopify/draggable/-/draggable-1.0.0-beta.12.tgz",
+      "integrity": "sha512-Un/Dn61sv2er9yjDXLGWMauCOWBb0BMbm0yzmmrD+oUX2/x50yhNJASTsCRdndUCpWlqYfZH8jEfaOgTPsKc/g=="
     },
     "node_modules/@simonwep/pickr": {
       "version": "1.8.2",
diff --git a/package.json b/package.json
index 94e4c2bf683..ff09def7fe0 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.5.3",
-    "@shopify/draggable": "^1.0.0-beta.8",
+    "@shopify/draggable": "^1.0.0-beta.12",
     "@simonwep/pickr": "^1.7.4",
     "@tiptap/core": "^2.0.0-beta.217",
     "@tiptap/extension-blockquote": "^2.0.0-beta.217",

From e7d68b6cca654a69edc29c3271a14ce0a640f354 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 7 Mar 2023 17:03:30 -0500
Subject: [PATCH 16/46] fix tab error states

---
 resources/js/components/publish/Tabs.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/publish/Tabs.vue b/resources/js/components/publish/Tabs.vue
index baee5f6ad9f..06f595b7ff8 100644
--- a/resources/js/components/publish/Tabs.vue
+++ b/resources/js/components/publish/Tabs.vue
@@ -121,6 +121,8 @@
 </template>
 
 <script>
+import { uniq } from 'underscore';
+
 export default {
 
     inject: ['storeName'],
@@ -190,16 +192,21 @@ export default {
         },
 
         tabsWithErrors() {
-            const handles = Object.keys(this.errors).map((fieldHandle) => {
-                const topFieldHandle = fieldHandle.split('.')[0];
-                const tab = this.tabs.find(tab =>
-                    tab.fields.some(field => field.handle === topFieldHandle)
-                );
-
-                return tab && tab.handle
+            let fields = {};
+            Object.values(this.tabs).forEach(tab => {
+                tab.sections.forEach(section => {
+                    section.fields.forEach(field => {
+                        fields[field.handle] = tab.handle;
+                    });
+                });
             });
 
-            return _.uniq(handles);
+            let tabs = Object.keys(this.errors)
+                .map(handle => handle.split('.')[0])
+                .filter(handle => fields[handle])
+                .map(handle => fields[handle]);
+
+            return uniq(tabs);
         },
 
         actionsPortal() {

From 8a5193812a86e988f10078d9d0b815741fd10ea3 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Mar 2023 10:11:40 -0500
Subject: [PATCH 17/46] update tests ...

Mostly just indenting "fields" in tabs under "sections".
But also tweaking a couple tests to make sure that ensuring fields can handle sections appropriately.
---
 tests/Auth/AugmentedUserTest.php              |   2 +-
 .../Blueprints/UpdateBlueprintTest.php        | 351 +++++++------
 .../Blueprints/UpdateBlueprintTest.php        | 225 ++++----
 tests/Fields/BlueprintTest.php                | 493 ++++++++++++------
 tests/Fields/SectionTest.php                  | 175 -------
 tests/Fields/TabTest.php                      | 183 +++++++
 6 files changed, 838 insertions(+), 591 deletions(-)
 delete mode 100644 tests/Fields/SectionTest.php
 create mode 100644 tests/Fields/TabTest.php

diff --git a/tests/Auth/AugmentedUserTest.php b/tests/Auth/AugmentedUserTest.php
index fedb37186c5..9654cb48ecc 100644
--- a/tests/Auth/AugmentedUserTest.php
+++ b/tests/Auth/AugmentedUserTest.php
@@ -22,7 +22,7 @@ public function it_gets_values()
 
         $blueprint = User::blueprint();
         $contents = $blueprint->contents();
-        $contents['tabs']['main']['fields'] = array_merge($contents['tabs']['main']['fields'], [
+        $contents['tabs']['main']['sections'][0]['fields'] = array_merge($contents['tabs']['main']['sections'][0]['fields'], [
             ['handle' => 'two', 'field' => ['type' => 'text']],
             ['handle' => 'four', 'field' => ['type' => 'text']],
             ['handle' => 'unused_in_bp', 'field' => ['type' => 'text']],
diff --git a/tests/Feature/Collections/Blueprints/UpdateBlueprintTest.php b/tests/Feature/Collections/Blueprints/UpdateBlueprintTest.php
index 77785abde40..b8871ed8ac5 100644
--- a/tests/Feature/Collections/Blueprints/UpdateBlueprintTest.php
+++ b/tests/Feature/Collections/Blueprints/UpdateBlueprintTest.php
@@ -76,25 +76,30 @@ public function blueprint_gets_saved()
                         '_id' => 'id-one',
                         'handle' => 'one',
                         'display' => 'Tab One',
-                        'fields' => [
+                        'sections' => [
                             [
-                                '_id' => 'id-s1-f1',
-                                'handle' => 'one-one',
-                                'type' => 'reference',
-                                'field_reference' => 'somefieldset.somefield',
-                                'config' => [
-                                    'foo' => 'bar',
-                                    'baz' => 'qux', // not in config_overrides so it shouldn't get saved
-                                ],
-                                'config_overrides' => ['foo'],
-                            ],
-                            [
-                                '_id' => 'id-s1-f1',
-                                'handle' => 'one-two',
-                                'type' => 'inline',
-                                'config' => [
-                                    'type' => 'text',
-                                    'foo' => 'bar',
+                                '_id' => 'id-t1-s1',
+                                'fields' => [
+                                    [
+                                        '_id' => 'id-s1-f1',
+                                        'handle' => 'one-one',
+                                        'type' => 'reference',
+                                        'field_reference' => 'somefieldset.somefield',
+                                        'config' => [
+                                            'foo' => 'bar',
+                                            'baz' => 'qux', // not in config_overrides so it shouldn't get saved
+                                        ],
+                                        'config_overrides' => ['foo'],
+                                    ],
+                                    [
+                                        '_id' => 'id-s1-f1',
+                                        'handle' => 'one-two',
+                                        'type' => 'inline',
+                                        'config' => [
+                                            'type' => 'text',
+                                            'foo' => 'bar',
+                                        ],
+                                    ],
                                 ],
                             ],
                         ],
@@ -109,37 +114,45 @@ public function blueprint_gets_saved()
             'tabs' => [
                 'one' => [
                     'display' => 'Tab One',
-                    'fields' => [
-                        [
-                            'handle' => 'title',
-                            'field' => [
-                                'type' => 'text',
-                                'required' => true,
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-one',
-                            'field' => 'somefieldset.somefield',
-                            'config' => [
-                                'foo' => 'bar',
-                            ],
-                        ],
+                    'sections' => [
                         [
-                            'handle' => 'one-two',
-                            'field' => [
-                                'type' => 'text',
-                                'foo' => 'bar',
+                            'fields' => [
+                                [
+                                    'handle' => 'title',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'required' => true,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-one',
+                                    'field' => 'somefieldset.somefield',
+                                    'config' => [
+                                        'foo' => 'bar',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-two',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'foo' => 'bar',
+                                    ],
+                                ],
                             ],
                         ],
                     ],
                 ],
                 'sidebar' => [
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'slug',
-                            'field' => [
-                                'type' => 'slug',
-                                'localizable' => true,
+                            'fields' => [
+                                [
+                                    'handle' => 'slug',
+                                    'field' => [
+                                        'type' => 'slug',
+                                        'localizable' => true,
+                                    ],
+                                ],
                             ],
                         ],
                     ],
@@ -237,34 +250,39 @@ public function width_of_100_gets_stripped_out_for_inline_fields_but_left_in_for
                         '_id' => 'id-one',
                         'handle' => 'one',
                         'display' => 'Tab One',
-                        'fields' => [
+                        'sections' => [
                             [
-                                '_id' => 'id-s1-f1',
-                                'handle' => 'one-one',
-                                'type' => 'reference',
-                                'field_reference' => 'somefieldset.somefield',
-                                'config' => [
-                                    'foo' => 'bar',
-                                    'width' => 100,
-                                ],
-                                'config_overrides' => ['width'],
-                            ],
-                            [
-                                '_id' => 'id-s1-f2',
-                                'handle' => 'one-two',
-                                'type' => 'inline',
-                                'config' => [
-                                    'type' => 'text',
-                                    'width' => 100,
-                                ],
-                            ],
-                            [
-                                '_id' => 'id-s1-f3',
-                                'handle' => 'one-three',
-                                'type' => 'inline',
-                                'config' => [
-                                    'type' => 'text',
-                                    'width' => 50,
+                                '_id' => 'id-s1',
+                                'fields' => [
+                                    [
+                                        '_id' => 'id-s1-f1',
+                                        'handle' => 'one-one',
+                                        'type' => 'reference',
+                                        'field_reference' => 'somefieldset.somefield',
+                                        'config' => [
+                                            'foo' => 'bar',
+                                            'width' => 100,
+                                        ],
+                                        'config_overrides' => ['width'],
+                                    ],
+                                    [
+                                        '_id' => 'id-s1-f2',
+                                        'handle' => 'one-two',
+                                        'type' => 'inline',
+                                        'config' => [
+                                            'type' => 'text',
+                                            'width' => 100,
+                                        ],
+                                    ],
+                                    [
+                                        '_id' => 'id-s1-f3',
+                                        'handle' => 'one-three',
+                                        'type' => 'inline',
+                                        'config' => [
+                                            'type' => 'text',
+                                            'width' => 50,
+                                        ],
+                                    ],
                                 ],
                             ],
                         ],
@@ -278,43 +296,51 @@ public function width_of_100_gets_stripped_out_for_inline_fields_but_left_in_for
             'tabs' => [
                 'one' => [
                     'display' => 'Tab One',
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'title',
-                            'field' => [
-                                'type' => 'text',
-                                'required' => true,
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-one',
-                            'field' => 'somefieldset.somefield',
-                            'config' => [
-                                'width' => 100,
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-two',
-                            'field' => [
-                                'type' => 'text',
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-three',
-                            'field' => [
-                                'type' => 'text',
-                                'width' => 50,
+                            'fields' => [
+                                [
+                                    'handle' => 'title',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'required' => true,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-one',
+                                    'field' => 'somefieldset.somefield',
+                                    'config' => [
+                                        'width' => 100,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-two',
+                                    'field' => [
+                                        'type' => 'text',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-three',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'width' => 50,
+                                    ],
+                                ],
                             ],
                         ],
                     ],
                 ],
                 'sidebar' => [
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'slug',
-                            'field' => [
-                                'type' => 'slug',
-                                'localizable' => true,
+                            'fields' => [
+                                [
+                                    'handle' => 'slug',
+                                    'field' => [
+                                        'type' => 'slug',
+                                        'localizable' => true,
+                                    ],
+                                ],
                             ],
                         ],
                     ],
@@ -353,34 +379,39 @@ public function localizable_of_false_gets_stripped_out_for_inline_fields_but_lef
                         '_id' => 'id-one',
                         'handle' => 'one',
                         'display' => 'Tab One',
-                        'fields' => [
+                        'sections' => [
                             [
-                                '_id' => 'id-s1-f1',
-                                'handle' => 'one-one',
-                                'type' => 'reference',
-                                'field_reference' => 'somefieldset.somefield',
-                                'config' => [
-                                    'foo' => 'bar',
-                                    'localizable' => false,
-                                ],
-                                'config_overrides' => ['localizable'],
-                            ],
-                            [
-                                '_id' => 'id-s1-f2',
-                                'handle' => 'one-two',
-                                'type' => 'inline',
-                                'config' => [
-                                    'type' => 'text',
-                                    'localizable' => false,
-                                ],
-                            ],
-                            [
-                                '_id' => 'id-s1-f3',
-                                'handle' => 'one-three',
-                                'type' => 'inline',
-                                'config' => [
-                                    'type' => 'text',
-                                    'localizable' => true,
+                                '_id' => 'id-t1-s1',
+                                'fields' => [
+                                    [
+                                        '_id' => 'id-s1-f1',
+                                        'handle' => 'one-one',
+                                        'type' => 'reference',
+                                        'field_reference' => 'somefieldset.somefield',
+                                        'config' => [
+                                            'foo' => 'bar',
+                                            'localizable' => false,
+                                        ],
+                                        'config_overrides' => ['localizable'],
+                                    ],
+                                    [
+                                        '_id' => 'id-s1-f2',
+                                        'handle' => 'one-two',
+                                        'type' => 'inline',
+                                        'config' => [
+                                            'type' => 'text',
+                                            'localizable' => false,
+                                        ],
+                                    ],
+                                    [
+                                        '_id' => 'id-s1-f3',
+                                        'handle' => 'one-three',
+                                        'type' => 'inline',
+                                        'config' => [
+                                            'type' => 'text',
+                                            'localizable' => true,
+                                        ],
+                                    ],
                                 ],
                             ],
                         ],
@@ -394,43 +425,51 @@ public function localizable_of_false_gets_stripped_out_for_inline_fields_but_lef
             'tabs' => [
                 'one' => [
                     'display' => 'Tab One',
-                    'fields' => [
-                        [
-                            'handle' => 'title',
-                            'field' => [
-                                'type' => 'text',
-                                'required' => true,
-                            ],
-                        ],
+                    'sections' => [
                         [
-                            'handle' => 'one-one',
-                            'field' => 'somefieldset.somefield',
-                            'config' => [
-                                'localizable' => false,
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-two',
-                            'field' => [
-                                'type' => 'text',
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-three',
-                            'field' => [
-                                'type' => 'text',
-                                'localizable' => true,
+                            'fields' => [
+                                [
+                                    'handle' => 'title',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'required' => true,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-one',
+                                    'field' => 'somefieldset.somefield',
+                                    'config' => [
+                                        'localizable' => false,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-two',
+                                    'field' => [
+                                        'type' => 'text',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-three',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'localizable' => true,
+                                    ],
+                                ],
                             ],
                         ],
                     ],
                 ],
                 'sidebar' => [
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'slug',
-                            'field' => [
-                                'type' => 'slug',
-                                'localizable' => true,
+                            'fields' => [
+                                [
+                                    'handle' => 'slug',
+                                    'field' => [
+                                        'type' => 'slug',
+                                        'localizable' => true,
+                                    ],
+                                ],
                             ],
                         ],
                     ],
diff --git a/tests/Feature/Taxonomies/Blueprints/UpdateBlueprintTest.php b/tests/Feature/Taxonomies/Blueprints/UpdateBlueprintTest.php
index 4602eefca17..4557eedf52d 100644
--- a/tests/Feature/Taxonomies/Blueprints/UpdateBlueprintTest.php
+++ b/tests/Feature/Taxonomies/Blueprints/UpdateBlueprintTest.php
@@ -76,25 +76,32 @@ public function blueprint_gets_saved()
                         '_id' => 'id-one',
                         'handle' => 'one',
                         'display' => 'Tab One',
-                        'fields' => [
+                        'sections' => [
                             [
-                                '_id' => 'id-s1-f1',
-                                'handle' => 'one-one',
-                                'type' => 'reference',
-                                'field_reference' => 'somefieldset.somefield',
-                                'config' => [
-                                    'foo' => 'bar',
-                                    'baz' => 'qux', // not in config_overrides so it shouldn't get saved
-                                ],
-                                'config_overrides' => ['foo'],
-                            ],
-                            [
-                                '_id' => 'id-s1-f1',
-                                'handle' => 'one-two',
-                                'type' => 'inline',
-                                'config' => [
-                                    'type' => 'text',
-                                    'foo' => 'bar',
+                                '_id' => 'id-t1-s1',
+                                'display' => null,
+                                'instructions' => null,
+                                'fields' => [
+                                    [
+                                        '_id' => 'id-s1-f1',
+                                        'handle' => 'one-one',
+                                        'type' => 'reference',
+                                        'field_reference' => 'somefieldset.somefield',
+                                        'config' => [
+                                            'foo' => 'bar',
+                                            'baz' => 'qux', // not in config_overrides so it shouldn't get saved
+                                        ],
+                                        'config_overrides' => ['foo'],
+                                    ],
+                                    [
+                                        '_id' => 'id-s1-f1',
+                                        'handle' => 'one-two',
+                                        'type' => 'inline',
+                                        'config' => [
+                                            'type' => 'text',
+                                            'foo' => 'bar',
+                                        ],
+                                    ],
                                 ],
                             ],
                         ],
@@ -109,37 +116,45 @@ public function blueprint_gets_saved()
             'tabs' => [
                 'one' => [
                     'display' => 'Tab One',
-                    'fields' => [
-                        [
-                            'handle' => 'title',
-                            'field' => [
-                                'type' => 'text',
-                                'required' => true,
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-one',
-                            'field' => 'somefieldset.somefield',
-                            'config' => [
-                                'foo' => 'bar',
-                            ],
-                        ],
+                    'sections' => [
                         [
-                            'handle' => 'one-two',
-                            'field' => [
-                                'type' => 'text',
-                                'foo' => 'bar',
+                            'fields' => [
+                                [
+                                    'handle' => 'title',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'required' => true,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-one',
+                                    'field' => 'somefieldset.somefield',
+                                    'config' => [
+                                        'foo' => 'bar',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-two',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'foo' => 'bar',
+                                    ],
+                                ],
                             ],
                         ],
                     ],
                 ],
                 'sidebar' => [
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'slug',
-                            'field' => [
-                                'type' => 'slug',
-                                'required' => true,
+                            'fields' => [
+                                [
+                                    'handle' => 'slug',
+                                    'field' => [
+                                        'type' => 'slug',
+                                        'required' => true,
+                                    ],
+                                ],
                             ],
                         ],
                     ],
@@ -237,34 +252,38 @@ public function width_of_100_gets_stripped_out_for_inline_fields_but_left_in_for
                         '_id' => 'id-one',
                         'handle' => 'one',
                         'display' => 'Tab One',
-                        'fields' => [
+                        'sections' => [
                             [
-                                '_id' => 'id-s1-f1',
-                                'handle' => 'one-one',
-                                'type' => 'reference',
-                                'field_reference' => 'somefieldset.somefield',
-                                'config' => [
-                                    'foo' => 'bar',
-                                    'width' => 100,
-                                ],
-                                'config_overrides' => ['width'],
-                            ],
-                            [
-                                '_id' => 'id-s1-f2',
-                                'handle' => 'one-two',
-                                'type' => 'inline',
-                                'config' => [
-                                    'type' => 'text',
-                                    'width' => 100,
-                                ],
-                            ],
-                            [
-                                '_id' => 'id-s1-f3',
-                                'handle' => 'one-three',
-                                'type' => 'inline',
-                                'config' => [
-                                    'type' => 'text',
-                                    'width' => 50,
+                                'fields' => [
+                                    [
+                                        '_id' => 'id-s1-f1',
+                                        'handle' => 'one-one',
+                                        'type' => 'reference',
+                                        'field_reference' => 'somefieldset.somefield',
+                                        'config' => [
+                                            'foo' => 'bar',
+                                            'width' => 100,
+                                        ],
+                                        'config_overrides' => ['width'],
+                                    ],
+                                    [
+                                        '_id' => 'id-s1-f2',
+                                        'handle' => 'one-two',
+                                        'type' => 'inline',
+                                        'config' => [
+                                            'type' => 'text',
+                                            'width' => 100,
+                                        ],
+                                    ],
+                                    [
+                                        '_id' => 'id-s1-f3',
+                                        'handle' => 'one-three',
+                                        'type' => 'inline',
+                                        'config' => [
+                                            'type' => 'text',
+                                            'width' => 50,
+                                        ],
+                                    ],
                                 ],
                             ],
                         ],
@@ -278,43 +297,51 @@ public function width_of_100_gets_stripped_out_for_inline_fields_but_left_in_for
             'tabs' => [
                 'one' => [
                     'display' => 'Tab One',
-                    'fields' => [
-                        [
-                            'handle' => 'title',
-                            'field' => [
-                                'type' => 'text',
-                                'required' => true,
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-one',
-                            'field' => 'somefieldset.somefield',
-                            'config' => [
-                                'width' => 100,
-                            ],
-                        ],
+                    'sections' => [
                         [
-                            'handle' => 'one-two',
-                            'field' => [
-                                'type' => 'text',
-                            ],
-                        ],
-                        [
-                            'handle' => 'one-three',
-                            'field' => [
-                                'type' => 'text',
-                                'width' => 50,
+                            'fields' => [
+                                [
+                                    'handle' => 'title',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'required' => true,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-one',
+                                    'field' => 'somefieldset.somefield',
+                                    'config' => [
+                                        'width' => 100,
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-two',
+                                    'field' => [
+                                        'type' => 'text',
+                                    ],
+                                ],
+                                [
+                                    'handle' => 'one-three',
+                                    'field' => [
+                                        'type' => 'text',
+                                        'width' => 50,
+                                    ],
+                                ],
                             ],
                         ],
                     ],
                 ],
                 'sidebar' => [
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'slug',
-                            'field' => [
-                                'type' => 'slug',
-                                'required' => true,
+                            'fields' => [
+                                [
+                                    'handle' => 'slug',
+                                    'field' => [
+                                        'type' => 'slug',
+                                        'required' => true,
+                                    ],
+                                ],
                             ],
                         ],
                     ],
diff --git a/tests/Fields/BlueprintTest.php b/tests/Fields/BlueprintTest.php
index 6ee286337f9..8b959038028 100644
--- a/tests/Fields/BlueprintTest.php
+++ b/tests/Fields/BlueprintTest.php
@@ -140,10 +140,14 @@ public function it_puts_top_level_fields_into_a_main_tab()
         $this->assertEquals([
             'tabs' => [
                 'main' => [
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'one',
-                            'field' => ['type' => 'text'],
+                            'fields' => [
+                                [
+                                    'handle' => 'one',
+                                    'field' => ['type' => 'text'],
+                                ],
+                            ],
                         ],
                     ],
                 ],
@@ -320,18 +324,26 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
             'tabs' => [
                 'tab_one' => [
                     'instructions' => 'Does stuff',
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'one',
-                            'field' => 'fieldset_one.field_one',
+                            'fields' => [
+                                [
+                                    'handle' => 'one',
+                                    'field' => 'fieldset_one.field_one',
+                                ],
+                            ],
                         ],
                     ],
                 ],
                 'tab_two' => [
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'two',
-                            'field' => 'fieldset_one.field_two',
+                            'fields' => [
+                                [
+                                    'handle' => 'two',
+                                    'field' => 'fieldset_one.field_two',
+                                ],
+                            ],
                         ],
                     ],
                 ],
@@ -346,26 +358,30 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
                     'display' => 'Tab one',
                     'handle' => 'tab_one',
                     'instructions' => 'Does stuff',
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'one',
-                            'prefix' => null,
-                            'type' => 'text',
-                            'display' => 'One',
-                            'instructions' => 'One instructions',
-                            'required' => true,
-                            'validate' => 'required|min:2',
-                            'component' => 'text',
-                            'placeholder' => null,
-                            'character_limit' => 0,
-                            'input_type' => 'text',
-                            'prepend' => null,
-                            'append' => null,
-                            'antlers' => false,
-                            'default' => null,
-                            'visibility' => 'visible',
-                            'read_only' => false, // deprecated
-                            'always_save' => false,
+                            'fields' => [
+                                [
+                                    'handle' => 'one',
+                                    'prefix' => null,
+                                    'type' => 'text',
+                                    'display' => 'One',
+                                    'instructions' => 'One instructions',
+                                    'required' => true,
+                                    'validate' => 'required|min:2',
+                                    'component' => 'text',
+                                    'placeholder' => null,
+                                    'character_limit' => 0,
+                                    'input_type' => 'text',
+                                    'prepend' => null,
+                                    'append' => null,
+                                    'antlers' => false,
+                                    'default' => null,
+                                    'visibility' => 'visible',
+                                    'read_only' => false, // deprecated
+                                    'always_save' => false,
+                                ],
+                            ],
                         ],
                     ],
                 ],
@@ -373,23 +389,27 @@ public function converts_to_array_suitable_for_rendering_fields_in_publish_compo
                     'display' => 'Tab two',
                     'handle' => 'tab_two',
                     'instructions' => null,
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'two',
-                            'prefix' => null,
-                            'type' => 'textarea',
-                            'display' => 'Two',
-                            'instructions' => 'Two instructions',
-                            'required' => false,
-                            'validate' => 'min:2',
-                            'placeholder' => null,
-                            'character_limit' => null,
-                            'component' => 'textarea',
-                            'antlers' => false,
-                            'default' => null,
-                            'visibility' => 'visible',
-                            'read_only' => false, // deprecated
-                            'always_save' => false,
+                            'fields' => [
+                                [
+                                    'handle' => 'two',
+                                    'prefix' => null,
+                                    'type' => 'textarea',
+                                    'display' => 'Two',
+                                    'instructions' => 'Two instructions',
+                                    'required' => false,
+                                    'validate' => 'min:2',
+                                    'placeholder' => null,
+                                    'character_limit' => null,
+                                    'component' => 'textarea',
+                                    'antlers' => false,
+                                    'default' => null,
+                                    'visibility' => 'visible',
+                                    'read_only' => false, // deprecated
+                                    'always_save' => false,
+                                ],
+                            ],
                         ],
                     ],
                 ],
@@ -433,8 +453,12 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi
             'title' => 'Test',
             'tabs' => [
                 'tab_one' => [
-                    'fields' => [
-                        ['import' => 'partial', 'prefix' => 'nested_'],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['import' => 'partial', 'prefix' => 'nested_'],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -448,44 +472,48 @@ public function converts_to_array_suitable_for_rendering_prefixed_conditional_fi
                     'display' => 'Tab one',
                     'handle' => 'tab_one',
                     'instructions' => null,
-                    'fields' => [
+                    'sections' => [
                         [
-                            'handle' => 'nested_one',
-                            'prefix' => 'nested_',
-                            'type' => 'text',
-                            'display' => 'Nested One',
-                            'placeholder' => null,
-                            'input_type' => 'text',
-                            'character_limit' => 0,
-                            'prepend' => null,
-                            'append' => null,
-                            'component' => 'text',
-                            'instructions' => null,
-                            'required' => false,
-                            'antlers' => false,
-                            'default' => null,
-                            'visibility' => 'visible',
-                            'read_only' => false, // deprecated
-                            'always_save' => false,
-                        ],
-                        [
-                            'handle' => 'nested_deeper_two',
-                            'prefix' => 'nested_deeper_',
-                            'type' => 'text',
-                            'display' => 'Nested Deeper Two',
-                            'placeholder' => null,
-                            'input_type' => 'text',
-                            'character_limit' => 0,
-                            'prepend' => null,
-                            'append' => null,
-                            'component' => 'text',
-                            'instructions' => null,
-                            'required' => false,
-                            'antlers' => false,
-                            'default' => null,
-                            'visibility' => 'visible',
-                            'read_only' => false, // deprecated
-                            'always_save' => false,
+                            'fields' => [
+                                [
+                                    'handle' => 'nested_one',
+                                    'prefix' => 'nested_',
+                                    'type' => 'text',
+                                    'display' => 'Nested One',
+                                    'placeholder' => null,
+                                    'input_type' => 'text',
+                                    'character_limit' => 0,
+                                    'prepend' => null,
+                                    'append' => null,
+                                    'component' => 'text',
+                                    'instructions' => null,
+                                    'required' => false,
+                                    'antlers' => false,
+                                    'default' => null,
+                                    'visibility' => 'visible',
+                                    'read_only' => false, // deprecated
+                                    'always_save' => false,
+                                ],
+                                [
+                                    'handle' => 'nested_deeper_two',
+                                    'prefix' => 'nested_deeper_',
+                                    'type' => 'text',
+                                    'display' => 'Nested Deeper Two',
+                                    'placeholder' => null,
+                                    'input_type' => 'text',
+                                    'character_limit' => 0,
+                                    'prepend' => null,
+                                    'append' => null,
+                                    'component' => 'text',
+                                    'instructions' => null,
+                                    'required' => false,
+                                    'antlers' => false,
+                                    'default' => null,
+                                    'visibility' => 'visible',
+                                    'read_only' => false, // deprecated
+                                    'always_save' => false,
+                                ],
+                            ],
                         ],
                     ],
                 ],
@@ -584,8 +612,17 @@ public function it_ensures_a_field_exists()
     {
         $blueprint = (new Blueprint)->setContents(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'existing', 'field' => ['type' => 'text']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'existing_in_section_one', 'field' => ['type' => 'text']],
+                        ],
+                    ],
+                    [
+                        'fields' => [
+                            ['handle' => 'existing_in_section_two', 'field' => ['type' => 'text']],
+                        ],
+                    ],
                 ],
             ],
         ]]);
@@ -593,13 +630,23 @@ public function it_ensures_a_field_exists()
         $return = $blueprint->ensureField('new', ['type' => 'textarea']);
 
         $this->assertEquals($blueprint, $return);
-        $this->assertTrue($blueprint->hasField('existing'));
+        $this->assertTrue($blueprint->hasField('existing_in_section_one'));
+        $this->assertTrue($blueprint->hasField('existing_in_section_two'));
         $this->assertTrue($blueprint->hasField('new'));
         $this->assertEquals(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'existing', 'field' => ['type' => 'text']],
-                    ['handle' => 'new', 'field' => ['type' => 'textarea']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'existing_in_section_one', 'field' => ['type' => 'text']],
+                        ],
+                    ],
+                    [
+                        'fields' => [
+                            ['handle' => 'existing_in_section_two', 'field' => ['type' => 'text']],
+                            ['handle' => 'new', 'field' => ['type' => 'textarea']],
+                        ],
+                    ],
                 ],
             ],
         ]], $blueprint->contents());
@@ -611,8 +658,12 @@ public function it_ensures_a_field_exists_in_a_specific_tab()
     {
         $blueprint = (new Blueprint)->setContents(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'existing', 'field' => ['type' => 'text']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'existing', 'field' => ['type' => 'text']],
+                        ],
+                    ],
                 ],
             ],
         ]]);
@@ -624,13 +675,21 @@ public function it_ensures_a_field_exists_in_a_specific_tab()
         $this->assertTrue($blueprint->hasField('new'));
         $this->assertEquals(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'existing', 'field' => ['type' => 'text']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'existing', 'field' => ['type' => 'text']],
+                        ],
+                    ],
                 ],
             ],
             'tab_two' => [
-                'fields' => [
-                    ['handle' => 'new', 'field' => ['type' => 'textarea']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'new', 'field' => ['type' => 'textarea']],
+                        ],
+                    ],
                 ],
             ],
         ]], $blueprint->contents());
@@ -642,14 +701,26 @@ public function it_ensures_a_field_has_config()
     {
         $blueprint = (new Blueprint)->setContents(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'title', 'field' => ['type' => 'text']],
-                    ['handle' => 'author', 'field' => ['type' => 'text', 'do_not_touch_other_config' => true]],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'title', 'field' => ['type' => 'text']],
+                        ],
+                    ],
+                    [
+                        'fields' => [
+                            ['handle' => 'author', 'field' => ['type' => 'text', 'do_not_touch_other_config' => true]],
+                        ],
+                    ],
                 ],
             ],
             'tab_two' => [
-                'fields' => [
-                    ['handle' => 'content', 'field' => ['type' => 'text']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'content', 'field' => ['type' => 'text']],
+                        ],
+                    ],
                 ],
             ],
         ]]);
@@ -668,13 +739,19 @@ public function it_ensures_a_field_has_config()
         $this->assertEquals($expectedConfig, $fields->get('author')->config());
     }
 
+    // todo: duplicate or tweak above test but make the target field not in the first section.
+
     /** @test */
     public function it_merges_previously_undefined_keys_into_the_config_when_ensuring_a_field_exists_and_it_already_exists()
     {
         $blueprint = (new Blueprint)->setContents(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'existing', 'field' => ['type' => 'text']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'existing', 'field' => ['type' => 'text']],
+                        ],
+                    ],
                 ],
             ],
         ]]);
@@ -685,8 +762,12 @@ public function it_merges_previously_undefined_keys_into_the_config_when_ensurin
         $this->assertTrue($blueprint->hasField('existing'));
         $this->assertEquals(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'existing', 'field' => ['type' => 'text', 'foo' => 'bar']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'existing', 'field' => ['type' => 'text', 'foo' => 'bar']],
+                        ],
+                    ],
                 ],
             ],
         ]], $blueprint->contents());
@@ -698,9 +779,13 @@ public function it_merges_previously_undefined_keys_into_the_config_when_ensurin
     {
         $blueprint = (new Blueprint)->setContents(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'first', 'field' => ['type' => 'text']],
-                    ['handle' => 'existing', 'field' => ['type' => 'text']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'first', 'field' => ['type' => 'text']],
+                            ['handle' => 'existing', 'field' => ['type' => 'text']],
+                        ],
+                    ],
                 ],
             ],
         ]]);
@@ -711,9 +796,13 @@ public function it_merges_previously_undefined_keys_into_the_config_when_ensurin
         $this->assertTrue($blueprint->hasField('existing'));
         $this->assertEquals(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'first', 'field' => ['type' => 'text']],
-                    ['handle' => 'existing', 'field' => ['type' => 'text', 'foo' => 'bar']],
+                'sections'=> [
+                    [
+                        'fields' => [
+                            ['handle' => 'first', 'field' => ['type' => 'text']],
+                            ['handle' => 'existing', 'field' => ['type' => 'text', 'foo' => 'bar']],
+                        ],
+                    ],
                 ],
             ],
         ]], $blueprint->contents());
@@ -725,8 +814,12 @@ public function it_merges_previously_undefined_keys_into_the_config_when_ensurin
     {
         $blueprint = (new Blueprint)->setContents(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'existing', 'field' => ['type' => 'text']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'existing', 'field' => ['type' => 'text']],
+                        ],
+                    ],
                 ],
             ],
         ]]);
@@ -737,8 +830,12 @@ public function it_merges_previously_undefined_keys_into_the_config_when_ensurin
         $this->assertTrue($blueprint->hasField('existing'));
         $this->assertEquals(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'existing', 'field' => ['type' => 'text', 'foo' => 'bar']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'existing', 'field' => ['type' => 'text', 'foo' => 'bar']],
+                        ],
+                    ],
                 ],
             ],
         ]], $blueprint->contents());
@@ -759,8 +856,12 @@ public function it_merges_config_overrides_for_previously_undefined_keys_when_en
 
         $blueprint = (new Blueprint)->setContents(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'from_partial', 'field' => 'the_partial.the_field'],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'from_partial', 'field' => 'the_partial.the_field'],
+                        ],
+                    ],
                 ],
             ],
         ]]);
@@ -771,8 +872,12 @@ public function it_merges_config_overrides_for_previously_undefined_keys_when_en
         $this->assertTrue($blueprint->hasField('from_partial'));
         $this->assertEquals(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['handle' => 'from_partial', 'field' => 'the_partial.the_field', 'config' => ['foo' => 'bar']],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['handle' => 'from_partial', 'field' => 'the_partial.the_field', 'config' => ['foo' => 'bar']],
+                        ],
+                    ],
                 ],
             ],
         ]], $blueprint->contents());
@@ -793,8 +898,12 @@ public function it_merges_undefined_config_overrides_when_ensuring_a_field_that_
 
         $blueprint = (new Blueprint)->setContents(['tabs' => [
             'tab_one' => [
-                'fields' => [
-                    ['import' => 'the_partial'],
+                'sections' => [
+                    [
+                        'fields' => [
+                            ['import' => 'the_partial'],
+                        ],
+                    ],
                 ],
             ],
         ]]);
@@ -805,11 +914,15 @@ public function it_merges_undefined_config_overrides_when_ensuring_a_field_that_
         $this->assertTrue($blueprint->hasField('one'));
         $this->assertEquals(['tabs' => [
             'tab_one' => [
-                'fields' => [
+                'sections' => [
                     [
-                        'import' => 'the_partial',
-                        'config' => [
-                            'one' => ['foo' => 'bar'],
+                        'fields' => [
+                            [
+                                'import' => 'the_partial',
+                                'config' => [
+                                    'one' => ['foo' => 'bar'],
+                                ],
+                            ],
                         ],
                     ],
                 ],
@@ -825,13 +938,21 @@ public function it_ensures_a_field_exists_if_it_doesnt_and_prepends_it()
             'title' => 'Test',
             'tabs' => [
                 'tab_one' => [
-                    'fields' => [
-                        ['handle' => 'one', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'one', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
                 'tab_two' => [
-                    'fields' => [
-                        ['handle' => 'two', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'two', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -858,13 +979,21 @@ public function it_ensures_a_field_exists_in_a_given_tab_if_it_doesnt_exist_at_a
             'title' => 'Test',
             'tabs' => [
                 'tab_one' => [
-                    'fields' => [
-                        ['handle' => 'one', 'field' => ['type' => 'text']],
+                    'sections'=> [
+                        [
+                            'fields' => [
+                                ['handle' => 'one', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
                 'tab_two' => [
-                    'fields' => [
-                        ['handle' => 'two', 'field' => ['type' => 'text', 'foo' => 'bar']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'two', 'field' => ['type' => 'text', 'foo' => 'bar']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -901,14 +1030,22 @@ public function it_removes_a_field()
             'title' => 'Test',
             'tabs' => [
                 'tab_one' => [
-                    'fields' => [
-                        ['handle' => 'one', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'one', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
                 'tab_two' => [
-                    'fields' => [
-                        ['handle' => 'two', 'field' => ['type' => 'text']],
-                        ['handle' => 'three', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'two', 'field' => ['type' => 'text']],
+                                ['handle' => 'three', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -937,15 +1074,23 @@ public function it_removes_a_field_from_a_specific_tab()
             'title' => 'Test',
             'tabs' => [
                 'tab_one' => [
-                    'fields' => [
-                        ['handle' => 'one', 'field' => ['type' => 'text']],
-                        ['handle' => 'two', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'one', 'field' => ['type' => 'text']],
+                                ['handle' => 'two', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
                 'tab_two' => [
-                    'fields' => [
-                        ['handle' => 'three', 'field' => ['type' => 'text']],
-                        ['handle' => 'four', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'three', 'field' => ['type' => 'text']],
+                                ['handle' => 'four', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -979,15 +1124,23 @@ public function it_removes_a_specific_tab()
             'title' => 'Test',
             'tabs' => [
                 'tab_one' => [
-                    'fields' => [
-                        ['handle' => 'one', 'field' => ['type' => 'text']],
-                        ['handle' => 'two', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'one', 'field' => ['type' => 'text']],
+                                ['handle' => 'two', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
                 'tab_two' => [
-                    'fields' => [
-                        ['handle' => 'three', 'field' => ['type' => 'text']],
-                        ['handle' => 'four', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'three', 'field' => ['type' => 'text']],
+                                ['handle' => 'four', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -1019,13 +1172,21 @@ public function it_validates_unique_handles()
             'title' => 'Test',
             'tabs' => [
                 'tab_one' => [
-                    'fields' => [
-                        ['handle' => 'one', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'one', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
                 'tab_two' => [
-                    'fields' => [
-                        ['handle' => 'one', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'one', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -1054,13 +1215,21 @@ public function it_validates_unique_handles_between_blueprint_and_imported_field
             'title' => 'Test',
             'tabs' => [
                 'tab_one' => [
-                    'fields' => [
-                        ['import' => 'test'],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['import' => 'test'],
+                            ],
+                        ],
                     ],
                 ],
                 'tab_two' => [
-                    'fields' => [
-                        ['handle' => 'one', 'field' => ['type' => 'text']],
+                    'sections' => [
+                        [
+                            'fields' => [
+                                ['handle' => 'one', 'field' => ['type' => 'text']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -1090,9 +1259,13 @@ public function it_can_import_the_same_fieldset_twice_with_different_prefixes()
                 'title' => 'Test',
                 'tabs' => [
                     'tab_one' => [
-                        'fields' => [
-                            ['import' => 'test', 'prefix' => 'first_'],
-                            ['import' => 'test', 'prefix' => 'second_'],
+                        'sections' => [
+                            [
+                                'fields' => [
+                                    ['import' => 'test', 'prefix' => 'first_'],
+                                    ['import' => 'test', 'prefix' => 'second_'],
+                                ],
+                            ],
                         ],
                     ],
                 ],
diff --git a/tests/Fields/SectionTest.php b/tests/Fields/SectionTest.php
deleted file mode 100644
index 63acdb924be..00000000000
--- a/tests/Fields/SectionTest.php
+++ /dev/null
@@ -1,175 +0,0 @@
-<?php
-
-namespace Tests\Fields;
-
-use Facades\Statamic\Fields\FieldRepository;
-use Statamic\Fields\Field;
-use Statamic\Fields\Fields;
-use Statamic\Fields\Tab;
-use Tests\TestCase;
-
-class TabTest extends TestCase
-{
-    /** @test */
-    public function it_gets_the_handle()
-    {
-        $section = new Tab('test');
-
-        $this->assertEquals('test', $section->handle());
-    }
-
-    /** @test */
-    public function it_gets_contents()
-    {
-        $section = new Tab('test');
-        $this->assertEquals([], $section->contents());
-
-        $contents = [
-            'fields' => ['one' => ['type' => 'text']],
-        ];
-
-        $return = $section->setContents($contents);
-
-        $this->assertEquals($section, $return);
-        $this->assertEquals($contents, $section->contents());
-    }
-
-    /** @test */
-    public function it_gets_the_display_text()
-    {
-        $section = (new Tab('test'))->setContents([
-            'display' => 'The Display Text',
-        ]);
-
-        $this->assertEquals('The Display Text', $section->display());
-    }
-
-    /** @test */
-    public function the_display_text_falls_back_to_a_humanized_handle()
-    {
-        $section = new Tab('the_section_handle');
-
-        $this->assertEquals('The section handle', $section->display());
-    }
-
-    /** @test */
-    public function it_gets_fields()
-    {
-        $section = new Tab('test');
-        tap($section->fields(), function ($fields) {
-            $this->assertInstanceOf(Fields::class, $fields);
-            $this->assertCount(0, $fields->all());
-        });
-
-        FieldRepository::shouldReceive('find')
-            ->with('fieldset_one.field_one')
-            ->andReturn(new Field('field_one', ['type' => 'text']));
-        FieldRepository::shouldReceive('find')
-            ->with('fieldset_one.field_two')
-            ->andReturn(new Field('field_one', ['type' => 'textarea']));
-
-        $section->setContents($contents = [
-            'fields' => [
-                [
-                    'handle' => 'one',
-                    'field' => 'fieldset_one.field_one',
-                ],
-                [
-                    'handle' => 'two',
-                    'field' => 'fieldset_one.field_two',
-                ],
-            ],
-        ]);
-
-        tap($section->fields(), function ($fields) {
-            $this->assertInstanceOf(Fields::class, $fields);
-            tap($fields->all(), function ($items) {
-                $this->assertCount(2, $items->all());
-                $this->assertEveryItemIsInstanceOf(Field::class, $items);
-                $this->assertEquals(['one', 'two'], $items->map->handle()->values()->all());
-                $this->assertEquals(['text', 'textarea'], $items->map->type()->values()->all());
-            });
-        });
-    }
-
-    /** @test */
-    public function converts_to_array_suitable_for_rendering_fields_in_publish_component()
-    {
-        FieldRepository::shouldReceive('find')
-            ->with('fieldset_one.field_one')
-            ->andReturn(new Field('field_one', [
-                'type' => 'text',
-                'display' => 'One',
-                'instructions' => 'One instructions',
-                'validate' => 'required|min:2',
-            ]));
-        FieldRepository::shouldReceive('find')
-            ->with('fieldset_one.field_two')
-            ->andReturn(new Field('field_two', [
-                'type' => 'textarea',
-                'display' => 'Two',
-                'instructions' => 'Two instructions',
-                'validate' => 'min:2',
-            ]));
-
-        $section = (new Tab('test'))->setContents([
-            'display' => 'Test Tab',
-            'instructions' => 'Does stuff',
-            'fields' => [
-                [
-                    'handle' => 'one',
-                    'field' => 'fieldset_one.field_one',
-                ],
-                [
-                    'handle' => 'two',
-                    'field' => 'fieldset_one.field_two',
-                ],
-            ],
-        ]);
-
-        $this->assertEquals([
-            'display' => 'Test Tab',
-            'handle' => 'test',
-            'instructions' => 'Does stuff',
-            'fields' => [
-                [
-                    'handle' => 'one',
-                    'prefix' => null,
-                    'type' => 'text',
-                    'display' => 'One',
-                    'instructions' => 'One instructions',
-                    'required' => true,
-                    'validate' => 'required|min:2',
-                    'component' => 'text',
-                    'placeholder' => null,
-                    'input_type' => 'text',
-                    'character_limit' => 0,
-                    'prepend' => null,
-                    'append' => null,
-                    'antlers' => false,
-                    'default' => null,
-                    'visibility' => 'visible',
-                    'read_only' => false, // deprecated
-                    'always_save' => false,
-                ],
-                [
-                    'handle' => 'two',
-                    'prefix' => null,
-                    'type' => 'textarea',
-                    'display' => 'Two',
-                    'instructions' => 'Two instructions',
-                    'required' => false,
-                    'validate' => 'min:2',
-                    'character_limit' => null,
-                    'component' => 'textarea',
-                    'antlers' => false,
-                    'placeholder' => null,
-                    'default' => null,
-                    'visibility' => 'visible',
-                    'read_only' => false, // deprecated
-                    'always_save' => false,
-                ],
-            ],
-        ], $section->toPublishArray());
-    }
-}
diff --git a/tests/Fields/TabTest.php b/tests/Fields/TabTest.php
new file mode 100644
index 00000000000..7bbb76ee0df
--- /dev/null
+++ b/tests/Fields/TabTest.php
@@ -0,0 +1,183 @@
+<?php
+
+namespace Tests\Fields;
+
+use Facades\Statamic\Fields\FieldRepository;
+use Statamic\Fields\Field;
+use Statamic\Fields\Fields;
+use Statamic\Fields\Tab;
+use Tests\TestCase;
+
+class TabTest extends TestCase
+{
+    /** @test */
+    public function it_gets_the_handle()
+    {
+        $tab = new Tab('test');
+
+        $this->assertEquals('test', $tab->handle());
+    }
+
+    /** @test */
+    public function it_gets_contents()
+    {
+        $tab = new Tab('test');
+        $this->assertEquals([], $tab->contents());
+
+        $contents = [
+            'fields' => ['one' => ['type' => 'text']],
+        ];
+
+        $return = $tab->setContents($contents);
+
+        $this->assertEquals($tab, $return);
+        $this->assertEquals($contents, $tab->contents());
+    }
+
+    /** @test */
+    public function it_gets_the_display_text()
+    {
+        $tab = (new Tab('test'))->setContents([
+            'display' => 'The Display Text',
+        ]);
+
+        $this->assertEquals('The Display Text', $tab->display());
+    }
+
+    /** @test */
+    public function the_display_text_falls_back_to_a_humanized_handle()
+    {
+        $tab = new Tab('the_tab_handle');
+
+        $this->assertEquals('The tab handle', $tab->display());
+    }
+
+    /** @test */
+    public function it_gets_fields()
+    {
+        $tab = new Tab('test');
+        tap($tab->fields(), function ($fields) {
+            $this->assertInstanceOf(Fields::class, $fields);
+            $this->assertCount(0, $fields->all());
+        });
+
+        FieldRepository::shouldReceive('find')
+            ->with('fieldset_one.field_one')
+            ->andReturn(new Field('field_one', ['type' => 'text']));
+        FieldRepository::shouldReceive('find')
+            ->with('fieldset_one.field_two')
+            ->andReturn(new Field('field_one', ['type' => 'textarea']));
+
+        $tab->setContents($contents = [
+            'fields' => [
+                [
+                    'handle' => 'one',
+                    'field' => 'fieldset_one.field_one',
+                ],
+                [
+                    'handle' => 'two',
+                    'field' => 'fieldset_one.field_two',
+                ],
+            ],
+        ]);
+
+        tap($tab->fields(), function ($fields) {
+            $this->assertInstanceOf(Fields::class, $fields);
+            tap($fields->all(), function ($items) {
+                $this->assertCount(2, $items->all());
+                $this->assertEveryItemIsInstanceOf(Field::class, $items);
+                $this->assertEquals(['one', 'two'], $items->map->handle()->values()->all());
+                $this->assertEquals(['text', 'textarea'], $items->map->type()->values()->all());
+            });
+        });
+    }
+
+    /** @test */
+    public function converts_to_array_suitable_for_rendering_fields_in_publish_component()
+    {
+        FieldRepository::shouldReceive('find')
+            ->with('fieldset_one.field_one')
+            ->andReturn(new Field('field_one', [
+                'type' => 'text',
+                'display' => 'One',
+                'instructions' => 'One instructions',
+                'validate' => 'required|min:2',
+            ]));
+        FieldRepository::shouldReceive('find')
+            ->with('fieldset_one.field_two')
+            ->andReturn(new Field('field_two', [
+                'type' => 'textarea',
+                'display' => 'Two',
+                'instructions' => 'Two instructions',
+                'validate' => 'min:2',
+            ]));
+
+        $tab = (new Tab('test'))->setContents([
+            'display' => 'Test Tab',
+            'instructions' => 'Does stuff',
+            'sections' => [
+                [
+                    'fields' => [
+                        [
+                            'handle' => 'one',
+                            'field' => 'fieldset_one.field_one',
+                        ],
+                        [
+                            'handle' => 'two',
+                            'field' => 'fieldset_one.field_two',
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+
+        $this->assertEquals([
+            'display' => 'Test Tab',
+            'handle' => 'test',
+            'instructions' => 'Does stuff',
+            'sections' => [
+                [
+                    'fields' => [
+                        [
+                            'handle' => 'one',
+                            'prefix' => null,
+                            'type' => 'text',
+                            'display' => 'One',
+                            'instructions' => 'One instructions',
+                            'required' => true,
+                            'validate' => 'required|min:2',
+                            'component' => 'text',
+                            'placeholder' => null,
+                            'input_type' => 'text',
+                            'character_limit' => 0,
+                            'prepend' => null,
+                            'append' => null,
+                            'antlers' => false,
+                            'default' => null,
+                            'visibility' => 'visible',
+                            'read_only' => false, // deprecated
+                            'always_save' => false,
+                        ],
+                        [
+                            'handle' => 'two',
+                            'prefix' => null,
+                            'type' => 'textarea',
+                            'display' => 'Two',
+                            'instructions' => 'Two instructions',
+                            'required' => false,
+                            'validate' => 'min:2',
+                            'character_limit' => null,
+                            'component' => 'textarea',
+                            'antlers' => false,
+                            'placeholder' => null,
+                            'default' => null,
+                            'visibility' => 'visible',
+                            'read_only' => false, // deprecated
+                            'always_save' => false,
+                        ],
+                    ],
+                ],
+            ],
+        ], $tab->toPublishArray());
+    }
+}

From 799cafb49dd37da293322ea9735777fe61024971 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Mar 2023 10:34:08 -0500
Subject: [PATCH 18/46] fix ensuring and removing field logic

---
 src/Fields/Blueprint.php | 87 ++++++++++++++++++++++++++++------------
 1 file changed, 61 insertions(+), 26 deletions(-)

diff --git a/src/Fields/Blueprint.php b/src/Fields/Blueprint.php
index 89765c0adc4..6df252f2770 100644
--- a/src/Fields/Blueprint.php
+++ b/src/Fields/Blueprint.php
@@ -179,17 +179,27 @@ private function addEnsuredFieldToContents($contents, $ensured)
         $config = $ensured['config'];
         $tab = $ensured['tab'] ?? array_keys($contents['tabs'])[0] ?? 'main';
         $prepend = $ensured['prepend'];
+        $addedTab = false;
 
-        $tabs = collect($contents['tabs']);
+        // If ensuring into a new tab, make sure it exists.
+        if (! isset($contents['tabs'][$tab])) {
+            $addedTab = true;
+            $contents['tabs'][$tab] = ['sections' => [['fields' => []]]];
+        }
+
+        $tabs = collect($contents['tabs'] ?? []);
 
         // Get all the fields, and mark which tab they're in.
         $allFields = $tabs->flatMap(function ($tab, $tabHandle) {
-            return collect($tab['fields'] ?? [])->keyBy(function ($field) {
-                return (isset($field['import'])) ? 'import:'.($field['prefix'] ?? null).$field['import'] : $field['handle'];
-            })->map(function ($field) use ($tabHandle) {
-                $field['tab'] = $tabHandle;
-
-                return $field;
+            return collect($tab['sections'] ?? [])->flatMap(function ($section, $sectionIndex) use ($tabHandle) {
+                return collect($section['fields'] ?? [])->keyBy(function ($field) {
+                    return (isset($field['import'])) ? 'import:'.($field['prefix'] ?? null).$field['import'] : $field['handle'];
+                })->map(function ($field) use ($tabHandle, $sectionIndex) {
+                    $field['tab'] = $tabHandle;
+                    $field['section'] = $sectionIndex;
+
+                    return $field;
+                });
             });
         });
 
@@ -206,6 +216,13 @@ private function addEnsuredFieldToContents($contents, $ensured)
         // If a field with that handle is in the contents, its either an inline field or a referenced field...
         $existingField = $allFields->get($handle);
         if ($exists = $existingField !== null) {
+            // If we added the tab early but it turns out this field already existed, remove the tab so it
+            // it doesn't end up in the contents.
+            if ($addedTab) {
+                $tabs->forget($tab);
+                unset($contents['tabs'][$tab]);
+            }
+
             // Since it already exists, maintain the position in that tab.
             $tab = $existingField['tab'];
 
@@ -224,7 +241,11 @@ private function addEnsuredFieldToContents($contents, $ensured)
                 $field = ['handle' => $handle, 'field' => $config];
             }
         }
-        $fields = collect($tabs[$tab]['fields'] ?? [])->keyBy(function ($field) {
+
+        $targetSectionIndex = $existingField['section']
+            ?? ($prepend ? 0 : count($contents['tabs'][$tab]['sections']) - 1);
+
+        $fields = collect($tabs[$tab]['sections'][$targetSectionIndex]['fields'] ?? [])->keyBy(function ($field) {
             return (isset($field['import'])) ? 'import:'.($field['prefix'] ?? null).$field['import'] : $field['handle'];
         });
 
@@ -233,7 +254,7 @@ private function addEnsuredFieldToContents($contents, $ensured)
                 $importKey = 'import:'.$importedField['partial'];
                 $field = $allFields->get($importKey);
                 $tab = $field['tab'];
-                $fields = collect($tabs[$tab]['fields'])->keyBy(function ($field) {
+                $fields = collect($tabs[$tab]['sections'][$targetSectionIndex]['fields'])->keyBy(function ($field) {
                     return (isset($field['import'])) ? 'import:'.$field['import'] : $field['handle'];
                 });
                 $importedConfig = $importedField['field']->config();
@@ -241,6 +262,7 @@ private function addEnsuredFieldToContents($contents, $ensured)
                 $config = Arr::except($config, array_keys($importedConfig));
                 $field['config'][$handle] = $config;
                 unset($field['tab']);
+                unset($field['section']);
                 $fields->put($importKey, $field);
                 $imported = true;
             } else {
@@ -259,7 +281,7 @@ private function addEnsuredFieldToContents($contents, $ensured)
             }
         }
 
-        $contents['tabs'][$tab]['fields'] = $fields->values()->all();
+        $contents['tabs'][$tab]['sections'][$targetSectionIndex]['fields'] = $fields->values()->all();
 
         return $contents;
     }
@@ -510,41 +532,48 @@ public function removeTab($handle)
 
     public function removeFieldFromTab($handle, $tab)
     {
-        $fields = collect($this->contents['tabs'][$tab]['fields'] ?? []);
+        $fields = $this->getTabFields($tab);
 
         // See if field already exists in tab.
-        if ($this->hasFieldInTab($handle, $tab)) {
-            $fieldKey = $fields->search(function ($field) use ($handle) {
-                return Arr::get($field, 'handle') === $handle;
-            });
-        } else {
+        if (! $this->hasFieldInTab($handle, $tab)) {
             return $this;
         }
 
+        $fieldKey = $fields[$handle]['fieldIndex'];
+        $sectionIndex = $fields[$handle]['sectionIndex'];
+
         // Pull it out.
-        Arr::pull($this->contents['tabs'][$tab]['fields'], $fieldKey);
+        Arr::pull($this->contents['tabs'][$tab]['sections'][$sectionIndex]['fields'], $fieldKey);
 
         return $this->resetFieldsCache();
     }
 
+    private function getTabFields($tab)
+    {
+        return collect($this->contents['tabs'][$tab]['sections'])->flatMap(function ($section, $sectionIndex) {
+            return collect($section['fields'])->map(function ($field, $fieldIndex) use ($sectionIndex) {
+                return ['fieldIndex' => $fieldIndex, 'sectionIndex' => $sectionIndex, ...$field];
+            });
+        })->keyBy('handle');
+    }
+
     protected function ensureFieldInTabHasConfig($handle, $tab, $config)
     {
-        $fields = collect($this->contents['tabs'][$tab]['fields'] ?? []);
+        $fields = $this->getTabFields($tab);
 
         // See if field already exists in tab.
-        if ($this->hasFieldInTab($handle, $tab)) {
-            $fieldKey = $fields->search(function ($field) use ($handle) {
-                return Arr::get($field, 'handle') === $handle;
-            });
-        } else {
+        if (! $this->hasFieldInTab($handle, $tab)) {
             return $this;
         }
 
+        $fieldKey = $fields[$handle]['fieldIndex'];
+        $sectionKey = $fields[$handle]['sectionIndex'];
+
         // Get existing field config.
-        $existingConfig = Arr::get($this->contents['tabs'][$tab]['fields'][$fieldKey], 'field', []);
+        $existingConfig = Arr::get($this->contents['tabs'][$tab]['sections'][$sectionKey]['fields'][$fieldKey], 'field', []);
 
         // Merge in new field config.
-        $this->contents['tabs'][$tab]['fields'][$fieldKey]['field'] = array_merge($existingConfig, $config);
+        $this->contents['tabs'][$tab]['sections'][$sectionKey]['fields'][$fieldKey]['field'] = array_merge($existingConfig, $config);
 
         return $this->resetFieldsCache();
     }
@@ -597,7 +626,13 @@ protected function normalizeTabs()
     {
         if ($fields = Arr::pull($this->contents, 'fields')) {
             $this->contents['tabs'] = [
-                'main' => ['fields' => $fields],
+                'main' => [
+                    'sections' => [
+                        [
+                            'fields' => $fields,
+                        ],
+                    ],
+                ],
             ];
         }
 

From 8fc704881e292375debdab852e0508cb431159a6 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Mar 2023 10:34:23 -0500
Subject: [PATCH 19/46] strip out empty display and instructions

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

diff --git a/src/Fields/Section.php b/src/Fields/Section.php
index 33d3b917714..bb79a7eeeda 100644
--- a/src/Fields/Section.php
+++ b/src/Fields/Section.php
@@ -30,10 +30,10 @@ public function contents(): array
 
     public function toPublishArray()
     {
-        return [
+        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 73c2bb23ad7..6c5b41b7493 100644
--- a/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
+++ b/src/Http/Controllers/CP/Fields/ManagesBlueprints.php
@@ -9,6 +9,7 @@
 use Statamic\Facades;
 use Statamic\Fields\Blueprint;
 use Statamic\Fields\FieldTransformer;
+use Statamic\Support\Arr;
 use Statamic\Support\Str;
 
 trait ManagesBlueprints
@@ -71,13 +72,13 @@ private function updateBlueprint($request, $blueprint)
     private function tabSections(array $sections)
     {
         return collect($sections)->map(function ($section) {
-            return [
+            return Arr::removeNullValues([
                 'display' => $section['display'] ?? null,
                 'instructions' => $section['instructions'] ?? null,
                 'fields' => collect($section['fields'])
                     ->map(fn ($field) => FieldTransformer::fromVue($field))
                     ->all(),
-            ];
+            ]);
         })->all();
     }
 
@@ -106,13 +107,13 @@ private function tabToVue($tab): array
 
     private function sectionToVue($section, $sectionIndex, $tab): array
     {
-        return [
+        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 46f0c6435939fb68bbfb63e6e742d5c8cdcce2ae Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Mar 2023 10:34:53 -0500
Subject: [PATCH 20/46] more fixes

---
 src/Fields/BlueprintRepository.php | 12 +++++++++++-
 src/Fields/Tab.php                 |  6 +++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/Fields/BlueprintRepository.php b/src/Fields/BlueprintRepository.php
index b940bf8487e..d7a01854d9d 100644
--- a/src/Fields/BlueprintRepository.php
+++ b/src/Fields/BlueprintRepository.php
@@ -104,7 +104,17 @@ public function makeFromFields($fields)
             return compact('handle', 'field');
         })->values()->all();
 
-        return $this->make()->setContents(['fields' => $fields]);
+        return $this->make()->setContents([
+            'tabs' => [
+                'main' => [
+                    'sections' => [
+                        [
+                            'fields' => $fields,
+                        ],
+                    ],
+                ],
+            ],
+        ]);
     }
 
     public function makeFromTabs($tabs)
diff --git a/src/Fields/Tab.php b/src/Fields/Tab.php
index c8c01201a37..80c2aee11f7 100644
--- a/src/Fields/Tab.php
+++ b/src/Fields/Tab.php
@@ -47,8 +47,8 @@ public function fields(): Fields
         }
 
         $fields = collect($sections)->reduce(function ($carry, $section) {
-            return array_merge($carry, Arr::get($section, 'fields', []));
-        }, []);
+            return $carry->merge(Arr::get($section, 'fields', []));
+        }, collect())->all();
 
         return new Fields($fields);
     }
@@ -79,7 +79,7 @@ public function toPublishArray()
             'display' => $this->display(),
             'instructions' => $this->instructions(),
             'handle' => $this->handle,
-            'sections' => $this->sections()->map->toPublishArray(),
+            'sections' => $this->sections()->map->toPublishArray()->all(),
         ];
     }
 

From a0443c57e1696030e5f69aaf23972a06aa57e551 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Mar 2023 13:38:20 -0500
Subject: [PATCH 21/46] more fixies

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

diff --git a/src/Fields/Blueprint.php b/src/Fields/Blueprint.php
index 6df252f2770..4a294b63998 100644
--- a/src/Fields/Blueprint.php
+++ b/src/Fields/Blueprint.php
@@ -243,7 +243,7 @@ private function addEnsuredFieldToContents($contents, $ensured)
         }
 
         $targetSectionIndex = $existingField['section']
-            ?? ($prepend ? 0 : count($contents['tabs'][$tab]['sections']) - 1);
+            ?? ($prepend ? 0 : count($contents['tabs'][$tab]['sections'] ?? []) - 1);
 
         $fields = collect($tabs[$tab]['sections'][$targetSectionIndex]['fields'] ?? [])->keyBy(function ($field) {
             return (isset($field['import'])) ? 'import:'.($field['prefix'] ?? null).$field['import'] : $field['handle'];

From c7a775af672621ea71e84e65b503a21afcdc598d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Mar 2023 13:48:28 -0500
Subject: [PATCH 22/46] allow old blueprints to continue to work

---
 src/Fields/Blueprint.php       | 13 ++++++++
 tests/Fields/BlueprintTest.php | 59 ++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/src/Fields/Blueprint.php b/src/Fields/Blueprint.php
index 4a294b63998..e559028d250 100644
--- a/src/Fields/Blueprint.php
+++ b/src/Fields/Blueprint.php
@@ -636,6 +636,19 @@ protected function normalizeTabs()
             ];
         }
 
+        if ($sections = Arr::pull($this->contents, 'sections')) {
+            $this->contents['tabs'] = collect($sections)->map(function ($section) {
+                return array_filter([
+                    'display' => $section['display'] ?? null,
+                    'sections' => [
+                        [
+                            'fields' => $section['fields'],
+                        ],
+                    ],
+                ]);
+            })->all();
+        }
+
         return $this;
     }
 
diff --git a/tests/Fields/BlueprintTest.php b/tests/Fields/BlueprintTest.php
index 8b959038028..9699c9ca72c 100644
--- a/tests/Fields/BlueprintTest.php
+++ b/tests/Fields/BlueprintTest.php
@@ -155,6 +155,65 @@ public function it_puts_top_level_fields_into_a_main_tab()
         ], $blueprint->contents());
     }
 
+    /** @test */
+    public function it_converts_top_level_sections_into_tabs()
+    {
+        $blueprint = new Blueprint;
+        $this->assertEquals(['tabs' => ['main' => ['fields' => []]]], $blueprint->contents());
+
+        $blueprint->setContents([
+            'sections' => [
+                'one' => [
+                    'display' => 'One',
+                    'fields' => [
+                        [
+                            'handle' => 'alfa',
+                            'field' => ['type' => 'text'],
+                        ],
+                    ],
+                ],
+                'two' => [
+                    'fields' => [
+                        [
+                            'handle' => 'bravo',
+                            'field' => ['type' => 'text'],
+                        ],
+                    ],
+                ],
+            ],
+        ]);
+
+        $this->assertEquals([
+            'tabs' => [
+                'one' => [
+                    'display' => 'One',
+                    'sections' => [
+                        [
+                            'fields' => [
+                                [
+                                    'handle' => 'alfa',
+                                    'field' => ['type' => 'text'],
+                                ],
+                            ],
+                        ],
+                    ],
+                ],
+                'two' => [
+                    'sections' => [
+                        [
+                            'fields' => [
+                                [
+                                    'handle' => 'bravo',
+                                    'field' => ['type' => 'text'],
+                                ],
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ], $blueprint->contents());
+    }
+
     /** @test */
     public function it_can_check_if_has_field()
     {

From 8862cc23fa8ec54abf944085043cbece69948c7b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Mar 2023 13:58:53 -0500
Subject: [PATCH 23/46] old faithful

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

diff --git a/src/Fields/Blueprint.php b/src/Fields/Blueprint.php
index e559028d250..c3e130a9f20 100644
--- a/src/Fields/Blueprint.php
+++ b/src/Fields/Blueprint.php
@@ -552,7 +552,7 @@ private function getTabFields($tab)
     {
         return collect($this->contents['tabs'][$tab]['sections'])->flatMap(function ($section, $sectionIndex) {
             return collect($section['fields'])->map(function ($field, $fieldIndex) use ($sectionIndex) {
-                return ['fieldIndex' => $fieldIndex, 'sectionIndex' => $sectionIndex, ...$field];
+                return $field + ['fieldIndex' => $fieldIndex, 'sectionIndex' => $sectionIndex];
             });
         })->keyBy('handle');
     }

From 6be4945394359f125817e9f8241e398a6b467ea3 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Mar 2023 14:10:19 -0500
Subject: [PATCH 24/46] make field settings work

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

diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index 9f76405eb11..43bcd4f70ab 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -60,7 +60,7 @@
                     <publish-fields
                         v-if="blueprint.tabs.length"
                         class="w-full"
-                        :fields="blueprint.tabs[0].fields"
+                        :fields="blueprint.tabs[0].sections[0].fields"
                         @updated="(handle, value) => {
                             updateField(handle, value, setFieldValue);
                             if (handle === 'handle') isHandleModified = true

From 4541384a5ba1fb98abc5ae0235c3972759b5955f Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 13:47:18 -0500
Subject: [PATCH 25/46] wire up new stuff to replicator and bard

---
 .../js/components/blueprints/Section.vue      |  3 +
 resources/js/components/blueprints/Tabs.vue   | 33 +++++++-
 .../fieldtypes/bard/BardFieldtype.vue         | 35 ++++++--
 .../js/components/fieldtypes/bard/Set.vue     | 10 ++-
 .../fieldtypes/replicator/Replicator.vue      |  7 ++
 .../fieldtypes/replicator/SetsFieldtype.vue   |  6 +-
 src/Fieldtypes/Bard.php                       |  4 +-
 src/Fieldtypes/Replicator.php                 | 11 ++-
 src/Fieldtypes/Sets.php                       | 84 ++++++++++++-------
 tests/Fieldtypes/BardTest.php                 | 32 ++++---
 tests/Fieldtypes/ReplicatorTest.php           | 32 ++++---
 11 files changed, 186 insertions(+), 71 deletions(-)

diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 205a29715a9..099479c0f12 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -9,6 +9,9 @@
                     <span class="font-medium mr-2">
                         <input ref="displayInput" type="text" v-model="section.display" class="bg-transparent w-full outline-none" :placeholder="`${__('Title')} (${__('Optional')})`" />
                     </span>
+                    <span class="font-mono text-xs text-gray-700 mr-2"><!-- should only be shown if a prop is passed saying handle is necessary -->
+                        <input type="text" v-model="section.handle" class="bg-transparent w-full outline-none" :placeholder="`${__('Handle')}`" />
+                    </span>
                     <span class="text-xs text-gray-700 mr-2">
                         <input type="text" v-model="section.instructions" class="bg-transparent w-full outline-none" :placeholder="`${__('Instructions')} (${__('Optional')})`" />
                     </span>
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index beef1f3042a..72363a24af5 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -13,6 +13,7 @@
             >
                 {{ tab.display }}
             </div>
+            <div class="card px-5 py-2 cursor-pointer" @click="addTab" v-text="addTabText" />
         </div>
 
         <div
@@ -27,6 +28,8 @@
                 ref="sections"
                 :tab-id="tab._id"
                 :initial-sections="tab.sections"
+                :new-section-text="newSectionText"
+                :add-section-text="addSectionText"
                 @updated="sectionsUpdated(tab._id, $event)"
             />
 
@@ -39,6 +42,7 @@
 <script>
 import {Sortable, Plugins} from '@shopify/draggable';
 import Sections from './Sections.vue';
+import uniqid from 'uniqid';
 
 let sortableTabs, sortableSections, sortableFields;
 
@@ -53,12 +57,26 @@ export default {
             type: Array,
             required: true
         },
+        addSectionText: {
+            type: String,
+        },
+        newSectionText: {
+            type: String,
+        },
+        addTabText: {
+            type: String,
+            default: () => __('Add Tab')
+        },
+        newTabText: {
+            type: String,
+            default: () => __('New Tab')
+        },
     },
 
     data() {
         return {
             tabs: this.initialTabs,
-            currentTab: this.initialTabs[0]._id,
+            currentTab: this.initialTabs.length ? this.initialTabs[0]._id : null,
             lastInteractedTab: null
         }
     },
@@ -223,6 +241,19 @@ export default {
             if (this.lastInteractedTab) this.selectTab(tabId);
         },
 
+        addTab() {
+            const id = uniqid();
+
+            this.tabs.push({
+                _id: id,
+                display: this.newTabText,
+                handle: this.$slugify(this.newTabText, '_'),
+                sections: []
+            });
+
+            this.selectTab(id);
+        }
+
     }
 
 }
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 890b74b507f..a4a2ea3d818 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -28,7 +28,7 @@
                     <button class="bard-toolbar-button" @click="showSource = !showSource" v-if="allowSource" v-tooltip="__('Show HTML Source')" :aria-label="__('Show HTML Source')">
                         <svg-icon name="show-source" class="w-4 h-4 "/>
                     </button>
-                    <button class="bard-toolbar-button" @click="toggleCollapseSets" v-tooltip="__('Expand/Collapse Sets')" :aria-label="__('Expand/Collapse Sets')" v-if="config.collapse !== 'accordion' && config.sets.length > 0">
+                    <button class="bard-toolbar-button" @click="toggleCollapseSets" v-tooltip="__('Expand/Collapse Sets')" :aria-label="__('Expand/Collapse Sets')" v-if="config.collapse !== 'accordion' && setConfigs.length > 0">
                         <svg-icon name="expand-collapse-vertical-2" class="w-4 h-4" />
                     </button>
                     <button class="bard-toolbar-button" @click="toggleFullscreen" v-tooltip="__('Toggle Fullscreen Mode')" aria-label="__('Toggle Fullscreen Mode')" v-if="config.fullscreen">
@@ -59,7 +59,7 @@
                         </button>
                     </template>
 
-                    <div v-for="set in config.sets" :key="set.handle">
+                    <div v-for="set in setConfigs" :key="set.handle">
                         <dropdown-item :text="set.display || set.handle" @click="addSet(set.handle)" />
                     </div>
                 </dropdown-list>
@@ -84,6 +84,7 @@
 
 <script>
 import uniqid from 'uniqid';
+import reduce from 'underscore/modules/reduce';
 import { BubbleMenu, Editor, EditorContent, FloatingMenu } from '@tiptap/vue-2';
 import Blockquote from '@tiptap/extension-blockquote';
 import Bold from '@tiptap/extension-bold';
@@ -156,8 +157,7 @@ export default {
             pageHeader: null,
             escBinding: null,
             provide: {
-                setConfigs: this.config.sets,
-                isReadOnly: this.readOnly,
+                bard: this.makeBardProvide(),
                 storeName: this.storeName
             }
         }
@@ -182,7 +182,7 @@ export default {
         },
 
         hasExtraButtons() {
-            return this.allowSource || this.config.sets.length > 0 || this.config.fullscreen;
+            return this.allowSource || this.setConfigs.length > 0 || this.config.fullscreen;
         },
 
         readingTime() {
@@ -255,7 +255,7 @@ export default {
                     text += ` ${node.text || ''}`;
                 } else if (node.type === 'set') {
                     const handle = node.attrs.values.type;
-                    const set = this.config.sets.find(set => set.handle === handle);
+                    const set = this.setConfigs.find(set => set.handle === handle);
                     text += ` [${set ? set.display : handle}]`;
                 }
                 if (text.length > 150) {
@@ -274,7 +274,17 @@ export default {
 
         wrapperClasses() {
             return `form-group publish-field publish-field__${this.handle} bard-fieldtype`;
-        }
+        },
+
+        setConfigs() {
+            return reduce(this.groupConfigs, (sets, group) => {
+                return sets.concat(group.sets);
+            }, []);
+        },
+
+        groupConfigs() {
+            return this.config.sets;
+        },
 
     },
 
@@ -469,7 +479,7 @@ export default {
             const isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent;
 
             const isActive = view.hasFocus() && empty && isRootDepth && isEmptyTextBlock;
-            return this.config.sets.length && (this.config.always_show_set_button || isActive);
+            return this.setConfigs.length && (this.config.always_show_set_button || isActive);
         },
 
         calcFloatingOffset({ reference }) {
@@ -669,6 +679,15 @@ export default {
             if (this.pageHeader) {
                 this.pageHeader.style['pointer-events'] = ignore ? 'none' : 'all';
             }
+        },
+
+        makeBardProvide() {
+            const bard = {};
+            Object.defineProperties(bard, {
+                setConfigs: { get: () => this.setConfigs },
+                isReadOnly: { get: () => this.readOnly },
+            });
+            return bard;
         }
 
     }
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 03109353695..401daa95c3c 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -82,7 +82,7 @@ export default {
 
     mixins: [ValidatesFieldConditions, ManagesPreviewText],
 
-    inject: ['setConfigs', 'isReadOnly'],
+    inject: ['bard'],
 
     computed: {
 
@@ -114,6 +114,14 @@ export default {
             return _.findWhere(this.setConfigs, { handle: this.values.type }) || {};
         },
 
+        setConfigs() {
+            return this.bard.setConfigs;
+        },
+
+        isReadOnly() {
+            return this.bard.isReadOnly;
+        },
+
         enabled: {
             get() {
                 return this.node.attrs.enabled;
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index a3d96efaddd..3c3065b06a8 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -101,6 +101,7 @@ import ReplicatorSet from './Set.vue';
 import SetPicker from './SetPicker.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
+import reduce from 'underscore/modules/reduce';
 
 export default {
 
@@ -138,6 +139,12 @@ export default {
         },
 
         setConfigs() {
+            return reduce(this.groupConfigs, (sets, group) => {
+                return sets.concat(group.sets);
+            }, []);
+        },
+
+        groupConfigs() {
             return this.config.sets;
         },
 
diff --git a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
index 7929e635f20..223dbad9818 100644
--- a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
@@ -6,8 +6,10 @@
             :initial-tabs="tabs"
             :require-tab="config.require_tab"
             :can-define-localizable="false"
-            :add-tab-text="__('Add Set')"
-            :new-tab-text="__('New Set')"
+            :add-tab-text="__('Add Set Group')"
+            :new-tab-text="__('New Set Group')"
+            :add-section-text="__('Add Set')"
+            :new-section-text="__('New Set')"
             @updated="tabsUpdated"
         />
 
diff --git a/src/Fieldtypes/Bard.php b/src/Fieldtypes/Bard.php
index 69eddcd47a4..e89f0eddd1a 100644
--- a/src/Fieldtypes/Bard.php
+++ b/src/Fieldtypes/Bard.php
@@ -519,13 +519,13 @@ public function preload()
             return [$set['attrs']['id'] => (new Fields($config))->addValues($values)->meta()->put('_', '_')];
         })->toArray();
 
-        $defaults = collect($this->config('sets'))->map(function ($set) {
+        $defaults = collect($this->flattenedSetsConfig())->map(function ($set) {
             return (new Fields($set['fields']))->all()->map(function ($field) {
                 return $field->fieldtype()->preProcess($field->defaultValue());
             })->all();
         })->all();
 
-        $new = collect($this->config('sets'))->map(function ($set, $handle) use ($defaults) {
+        $new = collect($this->flattenedSetsConfig())->map(function ($set, $handle) use ($defaults) {
             return (new Fields($set['fields']))->addValues($defaults[$handle])->meta()->put('_', '_');
         })->toArray();
 
diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 13ad4f2914c..30968971e16 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -186,13 +186,13 @@ public function preload()
             return [$set['_id'] => (new Fields($config))->addValues($set)->meta()->put('_', '_')];
         })->toArray();
 
-        $defaults = collect($this->config('sets'))->map(function ($set) {
+        $defaults = collect($this->flattenedSetsConfig())->map(function ($set) {
             return (new Fields($set['fields']))->all()->map(function ($field) {
                 return $field->fieldtype()->preProcess($field->defaultValue());
             })->all();
         })->all();
 
-        $new = collect($this->config('sets'))->map(function ($set, $handle) use ($defaults) {
+        $new = collect($this->flattenedSetsConfig())->map(function ($set, $handle) use ($defaults) {
             return (new Fields($set['fields']))->addValues($defaults[$handle])->meta()->put('_', '_');
         })->toArray();
 
@@ -211,6 +211,13 @@ public function preload()
         ];
     }
 
+    protected function flattenedSetsConfig()
+    {
+        return collect($this->config('sets'))->flatMap(function ($section) {
+            return $section['sets'];
+        });
+    }
+
     public function toGqlType()
     {
         return GraphQL::listOf(GraphQL::type($this->gqlSetsTypeName()));
diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
index 56b26a0222d..ca4fd2a5a72 100644
--- a/src/Fieldtypes/Sets.php
+++ b/src/Fieldtypes/Sets.php
@@ -6,7 +6,6 @@
 use Statamic\Fields\Fieldset;
 use Statamic\Fields\FieldTransformer;
 use Statamic\Fields\Fieldtype;
-use Statamic\Support\Arr;
 
 class Sets extends Fieldtype
 {
@@ -19,14 +18,25 @@ class Sets extends Fieldtype
      */
     public function preProcess($data)
     {
-        return collect($data)->map(function ($set, $handle) {
-            $set['_id'] = $handle;
-            $set['handle'] = $handle;
-            $set['fields'] = collect($set['fields'])->map(function ($field, $i) {
-                return array_merge(FieldTransformer::toVue($field), ['_id' => $i]);
-            })->all();
-
-            return $set;
+        // todo: handle converting old format of sets to new format
+
+        return collect($data)->map(function ($group, $groupHandle) {
+            return [
+                '_id' => $groupId = 'group-'.$groupHandle,
+                'handle' => $groupHandle,
+                'display' => $group['display'] ?? null,
+                'sections' => collect($group['sets'] ?? [])->map(function ($set, $setHandle) use ($groupId) {
+                    return [
+                        '_id' => $setId = $groupId.'-section-'.$setHandle,
+                        'handle' => $setHandle,
+                        'display' => $set['display'] ?? null,
+                        'instructions' => $set['instructions'] ?? null,
+                        'fields' => collect($set['fields'])->map(function ($field, $i) use ($setId) {
+                            return array_merge(FieldTransformer::toVue($field), ['_id' => $setId.'-'.$i]);
+                        })->all(),
+                    ];
+                })->values()->all(),
+            ];
         })->values()->all();
     }
 
@@ -36,16 +46,20 @@ public function preProcess($data)
      */
     public function preProcessConfig($data)
     {
-        return collect($data)
-            ->map(function ($config, $name) {
-                return array_merge($config, [
-                    'handle' => $name,
-                    'id' => $name,
-                    'fields' => (new NestedFields)->preProcessConfig(array_get($config, 'fields', [])),
-                ]);
-            })
-            ->values()
-            ->all();
+        return collect($data)->map(function ($group, $groupHandle) {
+            return array_merge($group, [
+                'handle' => $groupHandle,
+                'sets' => collect($group['sets'])->map(function ($config, $name) {
+                    return array_merge($config, [
+                        'handle' => $name,
+                        'id' => $name,
+                        'fields' => (new NestedFields)->preProcessConfig(array_get($config, 'fields', [])),
+                    ]);
+                })
+                ->values()
+                ->all(),
+            ]);
+        })->values()->all();
     }
 
     /**
@@ -53,19 +67,27 @@ public function preProcessConfig($data)
      * Replicator's "sets" array into what should be saved to the Blueprint/Fieldset's YAML.
      * Triggered in the AJAX request when you click "finish" when editing a Replicator field.
      */
-    public function process($sets)
+    public function process($tabs)
     {
-        return collect($sets)
-            ->mapWithKeys(function ($set) {
-                $handle = Arr::pull($set, 'handle');
-                $set = Arr::except($set, '_id');
-                $set['fields'] = collect($set['fields'])->map(function ($field) {
-                    return FieldTransformer::fromVue($field);
-                })->all();
-
-                return [$handle => $set];
-            })
-            ->all();
+        return collect($tabs)->mapWithKeys(function ($tab) {
+            return [
+                $tab['handle'] => [
+                    'display' => $tab['display'],
+                    'sets' => collect($tab['sections'])->mapWithKeys(function ($section) {
+                        return [
+                            $section['handle'] => [
+                                'display' => $section['display'],
+                                'instructions' => $section['instructions'] ?? null,
+                                'fields' => collect($section['fields'])->map(function ($field) {
+                                    return FieldTransformer::fromVue($field);
+                                })->all(),
+                            ],
+                        ];
+                    })->all(),
+                ],
+            ];
+        })
+        ->all();
     }
 
     private function moveOutNameKey($fields)
diff --git a/tests/Fieldtypes/BardTest.php b/tests/Fieldtypes/BardTest.php
index 2fc1e13534b..0e55e15ba99 100644
--- a/tests/Fieldtypes/BardTest.php
+++ b/tests/Fieldtypes/BardTest.php
@@ -577,9 +577,13 @@ public function it_preloads_preprocessed_default_values()
         $field = (new Field('test', [
             'type' => 'bard',
             'sets' => [
-                'main' => [
-                    'fields' => [
-                        ['handle' => 'things', 'field' => ['type' => 'array']],
+                'group_one' => [
+                    'sets' => [
+                        'main' => [
+                            'fields' => [
+                                ['handle' => 'things', 'field' => ['type' => 'array']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -605,15 +609,19 @@ public function it_preloads_new_meta_with_preprocessed_values()
         $field = (new Field('test', [
             'type' => 'bard',
             'sets' => [
-                'main' => [
-                    'fields' => [
-                        [
-                            'handle' => 'things',
-                            'field' => [
-                                'type' => 'grid',
-                                'min_rows' => 2,
-                                'fields' => [
-                                    ['handle' => 'one', 'field' => ['type' => 'text']],
+                'group_one' => [
+                    'sets' => [
+                        'main' => [
+                            'fields' => [
+                                [
+                                    'handle' => 'things',
+                                    'field' => [
+                                        'type' => 'grid',
+                                        'min_rows' => 2,
+                                        'fields' => [
+                                            ['handle' => 'one', 'field' => ['type' => 'text']],
+                                        ],
+                                    ],
                                 ],
                             ],
                         ],
diff --git a/tests/Fieldtypes/ReplicatorTest.php b/tests/Fieldtypes/ReplicatorTest.php
index 60522951eca..de2b3e5b807 100644
--- a/tests/Fieldtypes/ReplicatorTest.php
+++ b/tests/Fieldtypes/ReplicatorTest.php
@@ -280,9 +280,13 @@ public function it_preloads_preprocessed_default_values()
         $field = (new Field('test', [
             'type' => 'replicator',
             'sets' => [
-                'main' => [
-                    'fields' => [
-                        ['handle' => 'things', 'field' => ['type' => 'array']],
+                'group_one' => [
+                    'sets' => [
+                        'main' => [
+                            'fields' => [
+                                ['handle' => 'things', 'field' => ['type' => 'array']],
+                            ],
+                        ],
                     ],
                 ],
             ],
@@ -308,15 +312,19 @@ public function it_preloads_new_meta_with_preprocessed_values()
         $field = (new Field('test', [
             'type' => 'replicator',
             'sets' => [
-                'main' => [
-                    'fields' => [
-                        [
-                            'handle' => 'things',
-                            'field' => [
-                                'type' => 'grid',
-                                'min_rows' => 2,
-                                'fields' => [
-                                    ['handle' => 'one', 'field' => ['type' => 'text']],
+                'group_one' => [
+                    'sets' => [
+                        'main' => [
+                            'fields' => [
+                                [
+                                    'handle' => 'things',
+                                    'field' => [
+                                        'type' => 'grid',
+                                        'min_rows' => 2,
+                                        'fields' => [
+                                            ['handle' => 'one', 'field' => ['type' => 'text']],
+                                        ],
+                                    ],
                                 ],
                             ],
                         ],

From 7185d004a59243b64121a9ccc02cd61d5ead1ce6 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 14:42:38 -0500
Subject: [PATCH 26/46] initial switch to new set selector styling

---
 resources/css/components/fieldtypes/bard.css  |  4 ++
 .../css/components/fieldtypes/replicator.css  |  2 +-
 .../fieldtypes/bard/BardFieldtype.vue         | 12 ++--
 .../fieldtypes/replicator/AddSetButton.vue    | 48 ++++++++++++++++
 .../fieldtypes/replicator/Replicator.vue      |  8 +--
 .../fieldtypes/replicator/SetPicker.vue       | 57 ++++++++++++-------
 resources/svg/chevron-right-thin.svg          |  1 +
 7 files changed, 100 insertions(+), 32 deletions(-)
 create mode 100644 resources/js/components/fieldtypes/replicator/AddSetButton.vue
 create mode 100644 resources/svg/chevron-right-thin.svg

diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 737daa8fdf5..e9a4db1a20e 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -202,6 +202,10 @@
     }
 }
 
+.set-picker .popover .popover-content {
+    min-width: 320px !important;
+}
+
 
 /* Fullscreen mode
    ========================================================================== */
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 34a8c75d682..8adc71e33c0 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -57,7 +57,7 @@
 }
 
 .replicator-set-picker-between {
-    @apply absolute top-0 -mt-8 w-full text-center;
+    @apply absolute top-0 -mt-8 w-full;
 }
 
 /*  Extra contrast when full width */
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index a4a2ea3d818..005d444958c 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -52,17 +52,13 @@
             </bubble-menu>
 
             <floating-menu class="bard-set-selector" :editor="editor" :tippy-options="{ offset: calcFloatingOffset, zIndex: 6 }" :should-show="shouldShowSetButton" v-if="editor">
-                <dropdown-list>
-                    <template v-slot:trigger>
+                <set-picker :sets="setConfigs" @added="addSet">
+                    <template #trigger>
                         <button type="button" class="btn-round group flex items-center justify-center" :aria-label="__('Add Set')" v-tooltip="__('Add Set')">
                             <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
                         </button>
                     </template>
-
-                    <div v-for="set in setConfigs" :key="set.handle">
-                        <dropdown-item :text="set.display || set.handle" @click="addSet(set.handle)" />
-                    </div>
-                </dropdown-list>
+                </set-picker>
             </floating-menu>
 
             <div class="bard-invalid" v-if="invalid" v-html="__('Invalid content')"></div>
@@ -115,6 +111,7 @@ import TextAlign from '@tiptap/extension-text-align';
 import Typography from '@tiptap/extension-typography';
 import Underline from '@tiptap/extension-underline';
 import BardSource from './Source.vue';
+import SetPicker from '../replicator/SetPicker.vue';
 import { DocumentBlock, DocumentInline } from './Document';
 import { Set } from './Set'
 import { Small } from './Small';
@@ -135,6 +132,7 @@ export default {
         BubbleMenu,
         BardSource,
         BardToolbarButton,
+        SetPicker,
         EditorContent,
         FloatingMenu,
         LinkToolbarButton,
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
new file mode 100644
index 00000000000..6d3e84761dc
--- /dev/null
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -0,0 +1,48 @@
+<template>
+
+    <div class="replicator-set-picker">
+        <set-picker v-if="sets.length > 1" :sets="sets" :placement="last ? 'bottom-start' : 'auto'" @added="addSet">
+            <template #trigger>
+                <div class="text-center">
+                    <button v-if="last" class="btn-round flex items-center justify-center" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')">
+                        <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
+                    </button>
+                    <button v-else class="dropdown-icon group" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')">
+                        <svg-icon name="micro-plus" class="w-2.5 h-2.5 text-gray-600 group-hover:text-gray-900 transition duration-150" />
+                    </button>
+                </div>
+            </template>
+        </set-picker>
+
+        <button v-else :class="{'btn-round flex items-center justify-center': last, 'dropdown-icon': !last }" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')" @click="addSet(sets[0].handle)">
+            <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
+        </button>
+    </div>
+
+</template>
+
+<script>
+import SetPicker from './SetPicker.vue';
+
+export default {
+
+    components: {
+        SetPicker,
+    },
+
+    props: {
+        sets: Array,
+        index: Number,
+        last: Boolean,
+    },
+
+    methods: {
+
+        addSet(handle) {
+            this.$emit('added', handle, this.index);
+        }
+
+    }
+
+}
+</script>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 3c3065b06a8..c435e54d1a2 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -70,7 +70,7 @@
                     @previews-updated="updateSetPreviews(set._id, $event)"
                 >
                     <template v-slot:picker v-if="canAddSet">
-                        <set-picker
+                        <add-set-button
                             class="replicator-set-picker-between"
                             :sets="setConfigs"
                             :index="index"
@@ -80,7 +80,7 @@
             </div>
         </sortable-list>
 
-        <set-picker v-if="canAddSet"
+        <add-set-button v-if="canAddSet"
             :last="true"
             :sets="setConfigs"
             :index="value.length"
@@ -98,7 +98,7 @@
 <script>
 import uniqid from 'uniqid';
 import ReplicatorSet from './Set.vue';
-import SetPicker from './SetPicker.vue';
+import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
 import reduce from 'underscore/modules/reduce';
@@ -110,7 +110,7 @@ export default {
     components: {
         ReplicatorSet,
         SortableList,
-        SetPicker,
+        AddSetButton,
     },
 
     inject: ['storeName'],
diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 6bee638da88..b33248aee91 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -1,24 +1,33 @@
 <template>
 
-    <div class="replicator-set-picker">
-        <dropdown-list class="align-left inline-block" placement="bottom-start" v-if="sets.length > 1" :scroll="true">
-            <template v-slot:trigger>
-                <button v-if="last" class="btn-round flex items-center justify-center" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')">
-                    <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
+    <popover class="set-picker" :scroll="true" :autoclose="false" :placement="placement">
+        <template #trigger>
+            <slot name="trigger" />
+        </template>
+        <template #default>
+            <div class="set-picker-header p-3 border-b text-xs flex items-center">
+                <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" />
+                <button v-show="!showSearch" class="text-gray-700 hover:text-gray-900">
+                    <svg-icon name="chevron-left" class="w-2 h-2 mx-1" />
+                    {{ __('Set Group Name')}}
                 </button>
-                <button v-else class="dropdown-icon group" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')">
-                    <svg-icon name="micro-plus" class="w-2.5 h-2.5 text-gray-600 group-hover:text-gray-900 transition duration-150" />
-                </button>
-            </template>
-
-            <div v-for="set in sets" :key="set.handle">
-                <dropdown-item :text="set.display || set.handle" @click="addSet(set.handle)" />
             </div>
-        </dropdown-list>
-        <button v-else :class="{'btn-round flex items-center justify-center': last, 'dropdown-icon': !last }" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')" @click="addSet(sets[0].handle)">
-            <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
-        </button>
-    </div>
+            <div class="p-1">
+                <div v-for="set in sets" :key="set.handle" class="rounded">
+                    <dropdown-item @click="addSet(set.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                        <div class="h-10 w-10 rounded bg-white border border-gray-600 mr-2 p-2.5">
+                            <svg-icon name="folder-generic" class="text-gray-800" />
+                        </div>
+                        <div class="flex-1">
+                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ set.display || set.handle }}</div>
+                            <div v-if="set.instructions" class="text-2xs text-gray-700 truncate w-52">{{ set.instructions }}</div>
+                        </div>
+                        <svg-icon name="chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
+                    </dropdown-item>
+                </div>
+            </div>
+        </template>
+    </popover>
 
 </template>
 
@@ -27,14 +36,22 @@ export default {
 
     props: {
         sets: Array,
-        index: Number,
-        last: Boolean,
+        placement: {
+            type: String,
+            default: 'bottom-start',
+        }
+    },
+
+    data() {
+        return {
+            showSearch: true,
+        }
     },
 
     methods: {
 
         addSet(handle) {
-            this.$emit('added', handle, this.index);
+            this.$emit('added', handle);
         }
 
     }
diff --git a/resources/svg/chevron-right-thin.svg b/resources/svg/chevron-right-thin.svg
new file mode 100644
index 00000000000..ab8f22d3289
--- /dev/null
+++ b/resources/svg/chevron-right-thin.svg
@@ -0,0 +1 @@
+<svg width="7" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l5.468-4.837a.217.217 0 000-.326L0 1" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>

From 4ae7920adf64e975be856cab3953841a1883e905 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 15:01:33 -0500
Subject: [PATCH 27/46] hook up groups to set picker

---
 .../fieldtypes/bard/BardFieldtype.vue         |  2 +-
 .../fieldtypes/replicator/AddSetButton.vue    |  3 +-
 .../fieldtypes/replicator/Replicator.vue      |  2 +
 .../fieldtypes/replicator/SetPicker.vue       | 52 +++++++++++++++----
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 005d444958c..f2f4ccaa998 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -52,7 +52,7 @@
             </bubble-menu>
 
             <floating-menu class="bard-set-selector" :editor="editor" :tippy-options="{ offset: calcFloatingOffset, zIndex: 6 }" :should-show="shouldShowSetButton" v-if="editor">
-                <set-picker :sets="setConfigs" @added="addSet">
+                <set-picker :sets="groupConfigs" @added="addSet">
                     <template #trigger>
                         <button type="button" class="btn-round group flex items-center justify-center" :aria-label="__('Add Set')" v-tooltip="__('Add Set')">
                             <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index 6d3e84761dc..5ad04333977 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -1,7 +1,7 @@
 <template>
 
     <div class="replicator-set-picker">
-        <set-picker v-if="sets.length > 1" :sets="sets" :placement="last ? 'bottom-start' : 'auto'" @added="addSet">
+        <set-picker v-if="sets.length > 1" :sets="groups" :placement="last ? 'bottom-start' : 'auto'" @added="addSet">
             <template #trigger>
                 <div class="text-center">
                     <button v-if="last" class="btn-round flex items-center justify-center" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')">
@@ -32,6 +32,7 @@ export default {
 
     props: {
         sets: Array,
+        groups: Array,
         index: Number,
         last: Boolean,
     },
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index c435e54d1a2..a001a78b2ff 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -72,6 +72,7 @@
                     <template v-slot:picker v-if="canAddSet">
                         <add-set-button
                             class="replicator-set-picker-between"
+                            :groups="groupConfigs"
                             :sets="setConfigs"
                             :index="index"
                             @added="addSet" />
@@ -82,6 +83,7 @@
 
         <add-set-button v-if="canAddSet"
             :last="true"
+            :groups="groupConfigs"
             :sets="setConfigs"
             :index="value.length"
             @added="addSet" />
diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index b33248aee91..6f8d38e17ab 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -1,30 +1,40 @@
 <template>
 
-    <popover class="set-picker" :scroll="true" :autoclose="false" :placement="placement">
+    <popover ref="popover" class="set-picker" :scroll="true" :autoclose="false" :placement="placement">
         <template #trigger>
             <slot name="trigger" />
         </template>
         <template #default>
             <div class="set-picker-header p-3 border-b text-xs flex items-center">
-                <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" />
-                <button v-show="!showSearch" class="text-gray-700 hover:text-gray-900">
+                <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="!selectedGroup" />
+                <button v-show="selectedGroup" @click="unselectGroup" class="text-gray-700 hover:text-gray-900">
                     <svg-icon name="chevron-left" class="w-2 h-2 mx-1" />
-                    {{ __('Set Group Name')}}
+                    {{ selectedGroupDisplayText }}
                 </button>
             </div>
             <div class="p-1">
-                <div v-for="set in sets" :key="set.handle" class="rounded">
-                    <dropdown-item @click="addSet(set.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                <div v-if="!selectedGroup" v-for="group in sets" :key="group.handle" class="cursor-pointer rounded">
+                    <div @click="selectGroup(group.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
                         <div class="h-10 w-10 rounded bg-white border border-gray-600 mr-2 p-2.5">
                             <svg-icon name="folder-generic" class="text-gray-800" />
                         </div>
                         <div class="flex-1">
-                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ set.display || set.handle }}</div>
-                            <div v-if="set.instructions" class="text-2xs text-gray-700 truncate w-52">{{ set.instructions }}</div>
+                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ group.display || group.handle }}</div>
+                            <div v-if="group.instructions" class="text-2xs text-gray-700 truncate w-52">{{ group.instructions }}</div>
                         </div>
                         <svg-icon name="chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
-                    </dropdown-item>
+                    </div>
                 </div>
+                <template v-for="group in sets">
+                    <div v-for="set in group.sets" :key="set.handle" v-show="group.handle === selectedGroupHandle" class="cursor-pointer rounded">
+                        <div @click="addSet(set.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                            <div class="flex-1">
+                                <div class="text-md font-medium text-gray-800 truncate w-52">{{ set.display || set.handle }}</div>
+                                <div v-if="set.instructions" class="text-2xs text-gray-700 truncate w-52">{{ set.instructions }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
             </div>
         </template>
     </popover>
@@ -44,14 +54,36 @@ export default {
 
     data() {
         return {
-            showSearch: true,
+            selectedGroupHandle: null
         }
     },
 
+    computed: {
+
+        selectedGroup() {
+            return this.sets.find(group => group.handle === this.selectedGroupHandle);
+        },
+
+        selectedGroupDisplayText() {
+            return this.selectedGroup ? this.selectedGroup.display || this.selectedGroup.handle : null;
+        }
+
+    },
+
     methods: {
 
         addSet(handle) {
             this.$emit('added', handle);
+            this.unselectGroup();
+            this.$refs.popover.close();
+        },
+
+        selectGroup(handle) {
+            this.selectedGroupHandle = handle;
+        },
+
+        unselectGroup() {
+            this.selectedGroupHandle = null;
         }
 
     }

From 7c840896d1a22c49c43cacb9ffd4befd8c182d89 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 15:12:13 -0500
Subject: [PATCH 28/46] When a single group is configured, dont show the group
 list

---
 .../fieldtypes/replicator/SetPicker.vue       | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 6f8d38e17ab..eebb69e7a51 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -6,8 +6,8 @@
         </template>
         <template #default>
             <div class="set-picker-header p-3 border-b text-xs flex items-center">
-                <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="!selectedGroup" />
-                <button v-show="selectedGroup" @click="unselectGroup" class="text-gray-700 hover:text-gray-900">
+                <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" />
+                <button v-show="showGroupBreadcrumb" @click="unselectGroup" class="text-gray-700 hover:text-gray-900">
                     <svg-icon name="chevron-left" class="w-2 h-2 mx-1" />
                     {{ selectedGroupDisplayText }}
                 </button>
@@ -60,6 +60,18 @@ export default {
 
     computed: {
 
+        showSearch() {
+            return !this.hasMultipleGroups || !this.selectedGroup;
+        },
+
+        showGroupBreadcrumb() {
+            return this.hasMultipleGroups && this.selectedGroup;
+        },
+
+        hasMultipleGroups() {
+            return this.sets.length > 1;
+        },
+
         selectedGroup() {
             return this.sets.find(group => group.handle === this.selectedGroupHandle);
         },
@@ -70,6 +82,12 @@ export default {
 
     },
 
+    created() {
+        if (this.sets.length === 1) {
+            this.selectedGroupHandle = this.sets[0].handle;
+        }
+    },
+
     methods: {
 
         addSet(handle) {

From 91d10cfae38f5a9ffb4e87900e6e0a821859f034 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 15:21:04 -0500
Subject: [PATCH 29/46] search

---
 .../fieldtypes/replicator/SetPicker.vue       | 42 ++++++++++++++-----
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index eebb69e7a51..2babd5d473a 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -6,14 +6,14 @@
         </template>
         <template #default>
             <div class="set-picker-header p-3 border-b text-xs flex items-center">
-                <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" />
+                <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
                 <button v-show="showGroupBreadcrumb" @click="unselectGroup" class="text-gray-700 hover:text-gray-900">
                     <svg-icon name="chevron-left" class="w-2 h-2 mx-1" />
                     {{ selectedGroupDisplayText }}
                 </button>
             </div>
             <div class="p-1">
-                <div v-if="!selectedGroup" v-for="group in sets" :key="group.handle" class="cursor-pointer rounded">
+                <div v-if="showGroups" v-for="group in sets" :key="group.handle" class="cursor-pointer rounded">
                     <div @click="selectGroup(group.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
                         <div class="h-10 w-10 rounded bg-white border border-gray-600 mr-2 p-2.5">
                             <svg-icon name="folder-generic" class="text-gray-800" />
@@ -25,16 +25,14 @@
                         <svg-icon name="chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
                     </div>
                 </div>
-                <template v-for="group in sets">
-                    <div v-for="set in group.sets" :key="set.handle" v-show="group.handle === selectedGroupHandle" class="cursor-pointer rounded">
-                        <div @click="addSet(set.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
-                            <div class="flex-1">
-                                <div class="text-md font-medium text-gray-800 truncate w-52">{{ set.display || set.handle }}</div>
-                                <div v-if="set.instructions" class="text-2xs text-gray-700 truncate w-52">{{ set.instructions }}</div>
-                            </div>
+                <div v-for="set in visibleSets" :key="set.handle" class="cursor-pointer rounded">
+                    <div @click="addSet(set.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                        <div class="flex-1">
+                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ set.display || set.handle }}</div>
+                            <div v-if="set.instructions" class="text-2xs text-gray-700 truncate w-52">{{ set.instructions }}</div>
                         </div>
                     </div>
-                </template>
+                </div>
             </div>
         </template>
     </popover>
@@ -54,7 +52,8 @@ export default {
 
     data() {
         return {
-            selectedGroupHandle: null
+            selectedGroupHandle: null,
+            search: null
         }
     },
 
@@ -68,6 +67,10 @@ export default {
             return this.hasMultipleGroups && this.selectedGroup;
         },
 
+        showGroups() {
+            return this.hasMultipleGroups && !this.selectedGroup && !this.search;
+        },
+
         hasMultipleGroups() {
             return this.sets.length > 1;
         },
@@ -78,6 +81,23 @@ export default {
 
         selectedGroupDisplayText() {
             return this.selectedGroup ? this.selectedGroup.display || this.selectedGroup.handle : null;
+        },
+
+        visibleSets() {
+            if (!this.selectedGroup && !this.search) return [];
+
+            let sets = this.selectedGroup ? this.selectedGroup.sets : this.sets.reduce((sets, group) => {
+                return sets.concat(group.sets);
+            }, []);
+
+            if (this.search) {
+                return sets.filter(set => {
+                    return set.display.toLowerCase().includes(this.search.toLowerCase())
+                        || set.handle.toLowerCase().includes(this.search.toLowerCase());
+                });
+            }
+
+            return sets;
         }
 
     },

From 822f1eea1d811492140ed44163a3657b4bbdf508 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 15:36:36 -0500
Subject: [PATCH 30/46] no results

---
 .../js/components/fieldtypes/replicator/SetPicker.vue      | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 2babd5d473a..3fd843adcee 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -33,6 +33,9 @@
                         </div>
                     </div>
                 </div>
+                <div v-if="noSearchResults" class="text-center text-gray-600 text-xs p-3">
+                    {{ __('No results') }}
+                </div>
             </div>
         </template>
     </popover>
@@ -98,6 +101,10 @@ export default {
             }
 
             return sets;
+        },
+
+        noSearchResults() {
+            return this.search && this.visibleSets.length === 0;
         }
 
     },

From d5c86582d18662ed7c6d8f007e252f83ff926a5d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 16:16:50 -0500
Subject: [PATCH 31/46] focus search on open

---
 resources/js/components/Popover.vue                       | 4 +++-
 .../js/components/fieldtypes/replicator/SetPicker.vue     | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index ee15514833e..4edc1e395f5 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -86,7 +86,9 @@ export default {
         open() {
             this.isOpen = true;
             this.escBinding = this.$keys.bind('esc', e => this.close())
-            this.popper && this.popper.update();
+            this.popper && this.popper.update().then(() => {
+                setTimeout(() => this.$emit('opened'), 100); // after animation. there's probably a better way to do this.
+            })
         },
         close() {
             this.isOpen = false;
diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 3fd843adcee..9f45bd88ca2 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -1,12 +1,12 @@
 <template>
 
-    <popover ref="popover" class="set-picker" :scroll="true" :autoclose="false" :placement="placement">
+    <popover ref="popover" class="set-picker" :scroll="true" :autoclose="false" :placement="placement" @opened="opened">
         <template #trigger>
             <slot name="trigger" />
         </template>
         <template #default>
             <div class="set-picker-header p-3 border-b text-xs flex items-center">
-                <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
+                <input ref="search" type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
                 <button v-show="showGroupBreadcrumb" @click="unselectGroup" class="text-gray-700 hover:text-gray-900">
                     <svg-icon name="chevron-left" class="w-2 h-2 mx-1" />
                     {{ selectedGroupDisplayText }}
@@ -129,6 +129,10 @@ export default {
 
         unselectGroup() {
             this.selectedGroupHandle = null;
+        },
+
+        opened() {
+            this.$refs.search.focus();
         }
 
     }

From df748d729903be00e94df1e893f2881d3cd3a9f3 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 16:21:59 -0500
Subject: [PATCH 32/46] refactor to a single loop for all groups and set
 together

---
 .../fieldtypes/replicator/SetPicker.vue       | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 9f45bd88ca2..fe3095adfbd 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -13,23 +13,21 @@
                 </button>
             </div>
             <div class="p-1">
-                <div v-if="showGroups" v-for="group in sets" :key="group.handle" class="cursor-pointer rounded">
-                    <div @click="selectGroup(group.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                <div v-for="item in items" :key="item.handle" class="cursor-pointer rounded">
+                    <div v-if="item.type === 'group'" @click="selectGroup(item.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
                         <div class="h-10 w-10 rounded bg-white border border-gray-600 mr-2 p-2.5">
                             <svg-icon name="folder-generic" class="text-gray-800" />
                         </div>
                         <div class="flex-1">
-                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ group.display || group.handle }}</div>
-                            <div v-if="group.instructions" class="text-2xs text-gray-700 truncate w-52">{{ group.instructions }}</div>
+                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ item.display || item.handle }}</div>
+                            <div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ item.instructions }}</div>
                         </div>
                         <svg-icon name="chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
                     </div>
-                </div>
-                <div v-for="set in visibleSets" :key="set.handle" class="cursor-pointer rounded">
-                    <div @click="addSet(set.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                    <div v-if="item.type === 'set'" @click="addSet(item.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
                         <div class="flex-1">
-                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ set.display || set.handle }}</div>
-                            <div v-if="set.instructions" class="text-2xs text-gray-700 truncate w-52">{{ set.instructions }}</div>
+                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ item.display || item.handle }}</div>
+                            <div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ item.instructions }}</div>
                         </div>
                     </div>
                 </div>
@@ -103,6 +101,23 @@ export default {
             return sets;
         },
 
+        items() {
+            let items = [];
+
+            if (this.showGroups) {
+                this.sets.forEach(group => {
+                    items.push({ ...group, type: 'group' });
+                });
+            }
+
+            this.visibleSets.forEach(set => {
+                items.push({ ...set, type: 'set' });
+            });
+
+            return items;
+
+        },
+
         noSearchResults() {
             return this.search && this.visibleSets.length === 0;
         }

From 16f01dd5bd21b1c5ea4478b3f6e654a9a50bcf78 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 17:05:11 -0500
Subject: [PATCH 33/46] keyboard navigation

---
 resources/js/components/Popover.vue           |  1 +
 .../fieldtypes/replicator/SetPicker.vue       | 56 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index 4edc1e395f5..738aff413f2 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -95,6 +95,7 @@ export default {
             if (this.escBinding) {
                 this.escBinding.destroy();
             }
+            this.$emit('closed');
         },
         leave() {
             if (this.autoclose) {
diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index fe3095adfbd..82a05972d2e 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <popover ref="popover" class="set-picker" :scroll="true" :autoclose="false" :placement="placement" @opened="opened">
+    <popover ref="popover" class="set-picker" :scroll="true" :autoclose="false" :placement="placement" @opened="opened" @closed="closed">
         <template #trigger>
             <slot name="trigger" />
         </template>
@@ -13,7 +13,7 @@
                 </button>
             </div>
             <div class="p-1">
-                <div v-for="item in items" :key="item.handle" class="cursor-pointer rounded">
+                <div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-300': selectionIndex === i }">
                     <div v-if="item.type === 'group'" @click="selectGroup(item.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
                         <div class="h-10 w-10 rounded bg-white border border-gray-600 mr-2 p-2.5">
                             <svg-icon name="folder-generic" class="text-gray-800" />
@@ -54,7 +54,9 @@ export default {
     data() {
         return {
             selectedGroupHandle: null,
-            search: null
+            search: null,
+            selectionIndex: 0,
+            keybindings: [],
         }
     },
 
@@ -124,6 +126,14 @@ export default {
 
     },
 
+    watch: {
+
+        search() {
+            this.selectionIndex = 0;
+        }
+
+    },
+
     created() {
         if (this.sets.length === 1) {
             this.selectedGroupHandle = this.sets[0].handle;
@@ -135,11 +145,13 @@ export default {
         addSet(handle) {
             this.$emit('added', handle);
             this.unselectGroup();
+            this.search = null;
             this.$refs.popover.close();
         },
 
         selectGroup(handle) {
             this.selectedGroupHandle = handle;
+            this.selectionIndex = 0;
         },
 
         unselectGroup() {
@@ -148,6 +160,44 @@ export default {
 
         opened() {
             this.$refs.search.focus();
+            this.bindKeys();
+        },
+
+        closed() {
+            this.unbindKeys();
+        },
+
+        bindKeys() {
+            this.keybindings = [
+                this.$keys.bindGlobal('up', e => this.keypressUp(e)),
+                this.$keys.bindGlobal('down', e => this.keypressDown(e)),
+                this.$keys.bindGlobal('enter', e => this.keypressEnter(e)),
+            ];
+        },
+
+        unbindKeys() {
+            this.keybindings.forEach(binding => binding.destroy());
+            this.keybindings = [];
+        },
+
+        keypressUp(e) {
+            e.preventDefault();
+            this.selectionIndex = this.selectionIndex === 0 ? this.items.length - 1 : this.selectionIndex - 1;
+        },
+
+        keypressDown(e) {
+            e.preventDefault();
+            this.selectionIndex = this.selectionIndex === this.items.length-1 ? 0 : this.selectionIndex + 1;
+        },
+
+        keypressEnter(e) {
+            e.preventDefault();
+            const item = this.items[this.selectionIndex];
+            if (item.type === 'group') {
+                this.selectGroup(item.handle);
+            } else {
+                this.addSet(item.handle);
+            }
         }
 
     }

From bade0e1dff8c80d6a5292e7bcc3afc4499604371 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 17:17:30 -0500
Subject: [PATCH 34/46] mouse works with keyboard

---
 resources/js/components/fieldtypes/replicator/SetPicker.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 82a05972d2e..43890b6e8a5 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -13,8 +13,8 @@
                 </button>
             </div>
             <div class="p-1">
-                <div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-300': selectionIndex === i }">
-                    <div v-if="item.type === 'group'" @click="selectGroup(item.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                <div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-200': selectionIndex === i }" @mouseover="selectionIndex = i">
+                    <div v-if="item.type === 'group'" @click="selectGroup(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
                         <div class="h-10 w-10 rounded bg-white border border-gray-600 mr-2 p-2.5">
                             <svg-icon name="folder-generic" class="text-gray-800" />
                         </div>
@@ -24,7 +24,7 @@
                         </div>
                         <svg-icon name="chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
                     </div>
-                    <div v-if="item.type === 'set'" @click="addSet(item.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                    <div v-if="item.type === 'set'" @click="addSet(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
                         <div class="flex-1">
                             <div class="text-md font-medium text-gray-800 truncate w-52">{{ item.display || item.handle }}</div>
                             <div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ item.instructions }}</div>

From d4c25da5020990a887201f6c453e7504a7c65c7a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 17:21:41 -0500
Subject: [PATCH 35/46] ability to delete tabs

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

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 72363a24af5..a2bde96182e 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -6,12 +6,15 @@
             <div
                 v-for="tab in tabs"
                 :key="tab._id"
-                class="blueprint-tab card px-5 py-2 mr-2 cursor-pointer"
+                class="blueprint-tab card px-5 py-2 mr-2 cursor-pointer flex"
                 :class="{ 'bg-blue-100': currentTab === tab._id }"
                 @click="selectTab(tab._id)"
                 @mouseenter="mouseEnteredTab(tab._id)"
             >
                 {{ tab.display }}
+                <div @click="removeTab(tab._id)">
+                    <svg-icon name="delete-x" class="w-2 h-2 ml-2 text-gray-600 hover:text-gray-800" />
+                </div>
             </div>
             <div class="card px-5 py-2 cursor-pointer" @click="addTab" v-text="addTabText" />
         </div>
@@ -252,7 +255,13 @@ export default {
             });
 
             this.selectTab(id);
-        }
+        },
+
+        removeTab(tabId) {
+            this.tabs = this.tabs.filter(tab => tab._id !== tabId);
+
+            this.selectTab(this.tabs.length ? this.tabs[0]._id : null);
+        },
 
     }
 

From 18ffead0c6c873ae83fe6f0e22c51192df0e5e84 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 9 Mar 2023 17:48:46 -0500
Subject: [PATCH 36/46] bring back tab requirement

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

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index a2bde96182e..7b1efbeb5b0 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -74,6 +74,10 @@ export default {
             type: String,
             default: () => __('New Tab')
         },
+        requireTab: {
+            type: Boolean,
+            default: true
+        }
     },
 
     data() {
@@ -93,7 +97,7 @@ export default {
     },
 
     mounted() {
-        // this.ensureTab();
+        this.ensureTab();
         this.makeSortable();
     },
 

From 6d1b9c96a337bbeb6cfcfdcbb5d455d7024ba87f Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 13 Mar 2023 10:45:41 -0400
Subject: [PATCH 37/46] add tab instructions for replicator only

---
 resources/js/components/blueprints/Tabs.vue                  | 5 +++++
 .../js/components/fieldtypes/replicator/SetsFieldtype.vue    | 1 +
 src/Fieldtypes/Sets.php                                      | 2 ++
 3 files changed, 8 insertions(+)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 7b1efbeb5b0..492eaa7b519 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -26,6 +26,7 @@
         >
             <input type="text" v-model="tab.display" class="input-text" />
             <input type="text" v-model="tab.handle" class="input-text font-mono text-sm" />
+            <input type="text" v-model="tab.instructions" class="input-text text-sm" v-if="showTabInstructionsField" />
 
             <sections
                 ref="sections"
@@ -77,6 +78,10 @@ export default {
         requireTab: {
             type: Boolean,
             default: true
+        },
+        showTabInstructionsField: {
+            type: Boolean,
+            default: false
         }
     },
 
diff --git a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
index 223dbad9818..905fcd3e949 100644
--- a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
@@ -10,6 +10,7 @@
             :new-tab-text="__('New Set Group')"
             :add-section-text="__('Add Set')"
             :new-section-text="__('New Set')"
+            show-tab-instructions-field
             @updated="tabsUpdated"
         />
 
diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
index ca4fd2a5a72..da00eb12ffe 100644
--- a/src/Fieldtypes/Sets.php
+++ b/src/Fieldtypes/Sets.php
@@ -25,6 +25,7 @@ public function preProcess($data)
                 '_id' => $groupId = 'group-'.$groupHandle,
                 'handle' => $groupHandle,
                 'display' => $group['display'] ?? null,
+                'instructions' => $group['instructions'] ?? null,
                 'sections' => collect($group['sets'] ?? [])->map(function ($set, $setHandle) use ($groupId) {
                     return [
                         '_id' => $setId = $groupId.'-section-'.$setHandle,
@@ -73,6 +74,7 @@ public function process($tabs)
             return [
                 $tab['handle'] => [
                     'display' => $tab['display'],
+                    'instructions' => $tab['instructions'],
                     'sets' => collect($tab['sections'])->mapWithKeys(function ($section) {
                         return [
                             $section['handle'] => [

From 1bf44394700289bd33fbb544ba5b7c61a03b17f8 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 13 Mar 2023 10:49:29 -0400
Subject: [PATCH 38/46] add section handle for replicator only

---
 resources/js/components/blueprints/Section.vue             | 6 +++++-
 resources/js/components/blueprints/Sections.vue            | 5 +++++
 resources/js/components/blueprints/Tabs.vue                | 7 ++++++-
 .../js/components/fieldtypes/replicator/SetsFieldtype.vue  | 1 +
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 099479c0f12..71f3722d4f0 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -9,7 +9,7 @@
                     <span class="font-medium mr-2">
                         <input ref="displayInput" type="text" v-model="section.display" class="bg-transparent w-full outline-none" :placeholder="`${__('Title')} (${__('Optional')})`" />
                     </span>
-                    <span class="font-mono text-xs text-gray-700 mr-2"><!-- should only be shown if a prop is passed saying handle is necessary -->
+                    <span class="font-mono text-xs text-gray-700 mr-2" v-if="showHandleField">
                         <input type="text" v-model="section.handle" class="bg-transparent w-full outline-none" :placeholder="`${__('Handle')}`" />
                     </span>
                     <span class="text-xs text-gray-700 mr-2">
@@ -79,6 +79,10 @@ export default {
         deletable: {
             type: Boolean,
             default: true
+        },
+        showHandleField: {
+            type: Boolean,
+            default: false
         }
     },
 
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index 0941b106641..78f60940519 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -17,6 +17,7 @@
                 :can-define-localizable="canDefineLocalizable"
                 :deletable="isSectionDeletable(i)"
                 :tab-id="tabId"
+                :show-handle-field="showSectionHandleField"
                 @updated="updateSection(i, $event)"
                 @deleted="deleteSection(i)"
             />
@@ -77,6 +78,10 @@ export default {
         requireSection: {
             type: Boolean,
             default: true
+        },
+        showSectionHandleField: {
+            type: Boolean,
+            default: false
         }
     },
 
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 492eaa7b519..77e5f1ed2b1 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -34,6 +34,7 @@
                 :initial-sections="tab.sections"
                 :new-section-text="newSectionText"
                 :add-section-text="addSectionText"
+                :show-section-handle-field="showSectionHandleField"
                 @updated="sectionsUpdated(tab._id, $event)"
             />
 
@@ -82,7 +83,11 @@ export default {
         showTabInstructionsField: {
             type: Boolean,
             default: false
-        }
+        },
+        showSectionHandleField: {
+            type: Boolean,
+            default: false
+        },
     },
 
     data() {
diff --git a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
index 905fcd3e949..d1db76f55b3 100644
--- a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
@@ -11,6 +11,7 @@
             :add-section-text="__('Add Set')"
             :new-section-text="__('New Set')"
             show-tab-instructions-field
+            show-section-handle-field
             @updated="tabsUpdated"
         />
 

From 88cfd6073d324076dc77ef4846c7bc7d7c26fa9a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 13 Mar 2023 11:25:30 -0400
Subject: [PATCH 39/46] improve section/tab handling

---
 resources/js/components/blueprints/Builder.vue |  2 +-
 resources/js/components/blueprints/Section.vue | 10 +---------
 .../js/components/blueprints/Sections.vue      | 14 +++++---------
 resources/js/components/blueprints/Tabs.vue    | 18 ++++++++++++------
 .../fieldtypes/replicator/SetsFieldtype.vue    |  2 +-
 src/Fieldtypes/Bard.php                        |  2 +-
 6 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index 17c2a947f77..1f7b20eb211 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -38,7 +38,7 @@
         </div>
 
         <tabs
-            v-if="useTabs"
+            :single-tab="!useTabs"
             :initial-tabs="blueprint.tabs"
             @updated="tabsUpdated"
         />
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 71f3722d4f0..03b8605044b 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -17,7 +17,7 @@
                     </span>
                 </div>
                 <div class="flex items-center px-3">
-                    <button @click.prevent="$emit('deleted')" class="flex items-center text-gray-600 hover:text-gray-950" v-if="deletable">
+                    <button @click.prevent="$emit('deleted')" class="flex items-center text-gray-600 hover:text-gray-950">
                         <svg-icon class="h-4 w-4" name="trash" />
                     </button>
                 </div>
@@ -72,14 +72,6 @@ export default {
             type: Object,
             required: true
         },
-        isSingle: { // was used for sections, but will be used for tabs in the future
-            type: Boolean,
-            default: false
-        },
-        deletable: {
-            type: Boolean,
-            default: true
-        },
         showHandleField: {
             type: Boolean,
             default: false
diff --git a/resources/js/components/blueprints/Sections.vue b/resources/js/components/blueprints/Sections.vue
index 78f60940519..f5081c6afdd 100644
--- a/resources/js/components/blueprints/Sections.vue
+++ b/resources/js/components/blueprints/Sections.vue
@@ -13,16 +13,14 @@
                 v-for="(section, i) in sections"
                 :key="section._id"
                 :section="section"
-                :is-single="singleSection"
                 :can-define-localizable="canDefineLocalizable"
-                :deletable="isSectionDeletable(i)"
                 :tab-id="tabId"
                 :show-handle-field="showSectionHandleField"
                 @updated="updateSection(i, $event)"
                 @deleted="deleteSection(i)"
             />
 
-            <div class="blueprint-add-section-container w-full md:w-1/2" v-if="!singleSection">
+            <div class="blueprint-add-section-container w-full md:w-1/2">
                 <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>
@@ -124,12 +122,10 @@ export default {
             this.sections.splice(i, 1, section);
         },
 
-        isSectionDeletable(i) {
-            if (this.sections.length > 1) return true;
-
-            if (i > 0) return true;
-
-            return !this.requireSection;
+        ensureSection() {
+            if (this.requireSection && this.sections.length === 0) {
+                this.addSection();
+            }
         }
 
     }
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 77e5f1ed2b1..c2d9e8e446b 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -16,7 +16,7 @@
                     <svg-icon name="delete-x" class="w-2 h-2 ml-2 text-gray-600 hover:text-gray-800" />
                 </div>
             </div>
-            <div class="card px-5 py-2 cursor-pointer" @click="addTab" v-text="addTabText" />
+            <div v-if="!singleTab" class="card px-5 py-2 cursor-pointer" @click="addTab" v-text="addTabText" />
         </div>
 
         <div
@@ -76,7 +76,11 @@ export default {
             type: String,
             default: () => __('New Tab')
         },
-        requireTab: {
+        singleTab: {
+            type: Boolean,
+            default: false
+        },
+        requireSection: {
             type: Boolean,
             default: true
         },
@@ -114,7 +118,7 @@ export default {
     methods: {
 
         ensureTab() {
-            if (this.requireTab && this.tabs.length === 0) {
+            if (this.requireSection && this.tabs.length === 0) {
                 this.addTab();
             }
         },
@@ -122,9 +126,7 @@ export default {
         makeSortable() {
             if (! this.singleTab) this.makeTabsSortable();
 
-            // if (! this.singleSection) { // can/should sections be singular now?
-                this.makeSectionsSortable();
-            // }
+            this.makeSectionsSortable();
 
             this.makeFieldsSortable();
         },
@@ -269,12 +271,16 @@ export default {
             });
 
             this.selectTab(id);
+
+            this.$nextTick(() => this.$refs.sections.find(vm => vm.tabId === id).addSection());
         },
 
         removeTab(tabId) {
             this.tabs = this.tabs.filter(tab => tab._id !== tabId);
 
             this.selectTab(this.tabs.length ? this.tabs[0]._id : null);
+
+            this.ensureTab();
         },
 
     }
diff --git a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
index d1db76f55b3..23ec336140c 100644
--- a/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/replicator/SetsFieldtype.vue
@@ -4,7 +4,7 @@
 
         <tabs
             :initial-tabs="tabs"
-            :require-tab="config.require_tab"
+            :require-section="config.require_set"
             :can-define-localizable="false"
             :add-tab-text="__('Add Set Group')"
             :new-tab-text="__('New Set Group')"
diff --git a/src/Fieldtypes/Bard.php b/src/Fieldtypes/Bard.php
index e89f0eddd1a..ebdb3128c4a 100644
--- a/src/Fieldtypes/Bard.php
+++ b/src/Fieldtypes/Bard.php
@@ -79,7 +79,7 @@ protected function configFieldItems(): array
                 'display' => __('Sets'),
                 'instructions' => __('statamic::fieldtypes.bard.config.sets'),
                 'type' => 'sets',
-                'require_tab' => false,
+                'require_set' => false,
             ],
             'buttons' => [
                 'display' => __('Buttons'),

From 9cc42a6ca0e0470fe3eac578328e9dc75a4aa972 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 13 Mar 2023 15:02:35 -0400
Subject: [PATCH 40/46] support old config for replicator/bard sets

---
 src/Fieldtypes/Replicator.php       | 15 ++++++++++++-
 src/Fieldtypes/Sets.php             | 34 ++++++++++++++++++++++++-----
 tests/Fieldtypes/ReplicatorTest.php | 21 ++++++++++++++++++
 3 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index 30968971e16..e7a6399c7ae 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -213,7 +213,20 @@ public function preload()
 
     protected function flattenedSetsConfig()
     {
-        return collect($this->config('sets'))->flatMap(function ($section) {
+        $sets = collect($this->config('sets'));
+
+        // If the first set has a "fields" key, it would be the legacy format.
+        // We'll put it in a "main" group so it's compatible with the new format.
+        // This also happens in the "sets" fieldtype.
+        if (Arr::has($sets->first(), 'fields')) {
+            $sets = collect([
+                'main' => [
+                    'sets' => $sets->all(),
+                ],
+            ]);
+        }
+
+        return $sets->flatMap(function ($section) {
             return $section['sets'];
         });
     }
diff --git a/src/Fieldtypes/Sets.php b/src/Fieldtypes/Sets.php
index da00eb12ffe..42838f31318 100644
--- a/src/Fieldtypes/Sets.php
+++ b/src/Fieldtypes/Sets.php
@@ -6,6 +6,7 @@
 use Statamic\Fields\Fieldset;
 use Statamic\Fields\FieldTransformer;
 use Statamic\Fields\Fieldtype;
+use Statamic\Support\Arr;
 
 class Sets extends Fieldtype
 {
@@ -16,11 +17,22 @@ class Sets extends Fieldtype
      * <sets-fieldtype> Vue component is expecting, within either the Blueprint
      * or Fieldset builders in the AJAX request performed when opening the field.
      */
-    public function preProcess($data)
+    public function preProcess($sets)
     {
-        // todo: handle converting old format of sets to new format
+        $sets = collect($sets);
 
-        return collect($data)->map(function ($group, $groupHandle) {
+        // If the first set has a "fields" key, it would be the legacy format.
+        // We'll put it in a "main" group so it's compatible with the new format.
+        if (Arr::has($sets->first(), 'fields')) {
+            $sets = collect([
+                'main' => [
+                    'display' => __('Main'),
+                    'sets' => $sets->all(),
+                ],
+            ]);
+        }
+
+        return collect($sets)->map(function ($group, $groupHandle) {
             return [
                 '_id' => $groupId = 'group-'.$groupHandle,
                 'handle' => $groupHandle,
@@ -45,9 +57,21 @@ public function preProcess($data)
      * Converts the "sets" array of a Replicator (or Bard) field into what
      * the <replicator-fieldtype> is expecting in its config.sets array.
      */
-    public function preProcessConfig($data)
+    public function preProcessConfig($sets)
     {
-        return collect($data)->map(function ($group, $groupHandle) {
+        $sets = collect($sets);
+
+        // If the first set has a "fields" key, it would be the legacy format.
+        // We'll put it in a "main" group so it's compatible with the new format.
+        if (Arr::has($sets->first(), 'fields')) {
+            $sets = collect([
+                'main' => [
+                    'sets' => $sets->all(),
+                ],
+            ]);
+        }
+
+        return collect($sets)->map(function ($group, $groupHandle) {
             return array_merge($group, [
                 'handle' => $groupHandle,
                 'sets' => collect($group['sets'])->map(function ($config, $name) {
diff --git a/tests/Fieldtypes/ReplicatorTest.php b/tests/Fieldtypes/ReplicatorTest.php
index de2b3e5b807..03f382005b0 100644
--- a/tests/Fieldtypes/ReplicatorTest.php
+++ b/tests/Fieldtypes/ReplicatorTest.php
@@ -299,6 +299,27 @@ public function it_preloads_preprocessed_default_values()
         $this->assertEquals($expected, $field->fieldtype()->preload()['defaults']['main']);
     }
 
+    /** @test */
+    public function it_preloads_preprocessed_default_values_with_old_config()
+    {
+        $field = (new Field('test', [
+            'type' => 'replicator',
+            'sets' => [
+                'main' => [
+                    'fields' => [
+                        ['handle' => 'things', 'field' => ['type' => 'array']],
+                    ],
+                ],
+            ],
+        ]));
+
+        $expected = [
+            'things' => [],
+        ];
+
+        $this->assertEquals($expected, $field->fieldtype()->preload()['defaults']['main']);
+    }
+
     /** @test */
     public function it_preloads_new_meta_with_preprocessed_values()
     {

From e050c745bf3808bd1e3d860e41badf8626044d0a Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Mon, 13 Mar 2023 19:11:34 +0000
Subject: [PATCH 41/46] Apply fixes from StyleCI

---
 src/Assets/Asset.php                             | 16 ++++++++--------
 src/CP/Utilities/CoreUtilities.php               |  1 +
 src/Modifiers/CoreModifiers.php                  |  4 ++--
 src/Query/IteratorBuilder.php                    | 10 +++++-----
 src/Search/Comb/Comb.php                         |  6 +++---
 src/Stache/Query/Builder.php                     | 10 +++++-----
 src/Tags/GetContent.php                          |  2 +-
 .../Language/Analyzers/ConditionPairAnalyzer.php |  2 +-
 src/View/Antlers/Language/Lexer/AntlersLexer.php |  4 ++--
 .../Language/Parser/AntlersNodeParser.php        | 10 +++++-----
 .../Antlers/Language/Parser/DocumentParser.php   |  2 +-
 src/View/Antlers/Language/Parser/PathParser.php  |  6 +++---
 .../Antlers/Language/Runtime/NodeProcessor.php   |  3 +--
 .../Antlers/Language/Runtime/PathDataManager.php |  4 +---
 src/View/Antlers/Parser.php                      |  3 ---
 tests/API/APITest.php                            |  3 +++
 tests/API/CacherTest.php                         |  3 +++
 tests/Antlers/ContainerTest.php                  |  4 ++++
 tests/Antlers/Parser/ParserErrorsTest.php        |  4 ++--
 tests/Antlers/Runtime/InterpolationTest.php      |  2 +-
 tests/Antlers/Runtime/RecursiveNodesTest.php     |  2 +-
 tests/Antlers/Runtime/TemplateTest.php           |  3 +--
 tests/Assets/AssetTest.php                       |  2 ++
 tests/Auth/Eloquent/EloquentUserTest.php         |  2 +-
 tests/Auth/Protect/ProtectionTest.php            |  3 +--
 tests/Auth/UserContractTests.php                 |  1 +
 .../Navigation/NavPreferencesNormalizerTest.php  |  1 +
 tests/Composer/ComposerTest.php                  |  7 +++++++
 tests/Data/AugmentedTest.php                     |  9 +++------
 tests/Data/DataRepositoryTest.php                |  2 ++
 tests/Data/Entries/CollectionTest.php            |  1 +
 tests/Data/Entries/EntryTest.php                 |  2 ++
 tests/Data/Entries/GetDateFromPathTest.php       |  1 +
 tests/Data/Entries/GetSlugFromPathTest.php       |  1 +
 tests/Data/Entries/GetSuffixFromPathTest.php     |  1 +
 tests/Data/Entries/RemoveSuffixFromPathTest.php  |  1 +
 tests/Data/Globals/VariablesTest.php             |  1 +
 tests/Data/Taxonomies/LocalizedTermTest.php      |  1 +
 tests/Data/Taxonomies/TaxonomyTest.php           |  1 +
 tests/Extend/AddonTest.php                       |  1 +
 tests/Facades/PathTest.php                       |  1 +
 tests/Facades/UrlTest.php                        |  2 ++
 .../Collections/UpdateCollectionTreeTest.php     |  1 +
 tests/Feature/Fieldtypes/FilesTest.php           |  1 +
 tests/Feature/GraphQL/AssetContainerTest.php     |  1 +
 tests/Feature/GraphQL/AssetContainersTest.php    |  1 +
 tests/Feature/GraphQL/AssetTest.php              |  1 +
 tests/Feature/GraphQL/AssetsTest.php             |  1 +
 tests/Feature/GraphQL/CollectionTest.php         |  1 +
 tests/Feature/GraphQL/CollectionsTest.php        |  1 +
 tests/Feature/GraphQL/CustomMiddlewareTest.php   |  2 ++
 tests/Feature/GraphQL/CustomQueryTest.php        |  2 ++
 tests/Feature/GraphQL/EntriesTest.php            |  1 +
 tests/Feature/GraphQL/EntryTest.php              |  1 +
 tests/Feature/GraphQL/FormTest.php               |  1 +
 tests/Feature/GraphQL/FormsTest.php              |  1 +
 tests/Feature/GraphQL/GlobalTest.php             |  1 +
 tests/Feature/GraphQL/GlobalsTest.php            |  1 +
 tests/Feature/GraphQL/NavTest.php                |  1 +
 tests/Feature/GraphQL/NavigationsTest.php        |  1 +
 tests/Feature/GraphQL/RequestCacheTest.php       |  2 ++
 tests/Feature/GraphQL/SitesTest.php              |  1 +
 tests/Feature/GraphQL/TaxonomiesTest.php         |  1 +
 tests/Feature/GraphQL/TaxonomyTest.php           |  1 +
 tests/Feature/GraphQL/TermTest.php               |  1 +
 tests/Feature/GraphQL/TermsTest.php              |  1 +
 tests/Feature/GraphQL/UserTest.php               |  1 +
 tests/Feature/GraphQL/UsersTest.php              |  2 ++
 tests/Fields/FieldTest.php                       |  5 +++--
 tests/Fields/FieldsTest.php                      |  1 +
 tests/Fields/FieldsetRepositoryTest.php          |  1 +
 tests/Fields/FieldsetTest.php                    |  1 +
 tests/Fields/FieldtypeTest.php                   |  7 +++----
 tests/Fields/ValueTest.php                       |  1 +
 tests/Fields/ValuesTest.php                      |  2 ++
 tests/Fieldtypes/CodeTest.php                    |  2 ++
 tests/Fieldtypes/EntriesTest.php                 | 12 ++++--------
 tests/Fieldtypes/LabeledValueTests.php           |  1 +
 tests/Fieldtypes/MultipleLabeledValueTests.php   |  1 +
 tests/Fieldtypes/TermsTest.php                   | 16 ++++++----------
 tests/Fieldtypes/TextTest.php                    |  1 +
 tests/Filesystem/FilesystemAdapterTests.php      |  4 ++--
 tests/Forms/EmailTest.php                        |  5 +++++
 tests/Forms/SendEmailsTest.php                   |  1 +
 tests/FrontendTest.php                           |  1 +
 tests/Git/GitProcessTest.php                     |  4 ++++
 tests/Http/Middleware/AddViewPathsTest.php       |  2 ++
 tests/Imaging/GlideImageManipulatorTest.php      |  3 +++
 tests/Imaging/ImageGeneratorTest.php             |  1 +
 tests/Listeners/UpdateAssetReferencesTest.php    |  1 +
 tests/Listeners/UpdateTermReferencesTest.php     |  1 +
 tests/MiscTest.php                               |  1 +
 tests/Modifiers/BackgroundPositionTest.php       |  1 +
 tests/Modifiers/CamelizeTest.php                 |  1 +
 tests/Modifiers/CeilTest.php                     |  1 +
 tests/Modifiers/CollapseWhitespaceTest.php       |  1 +
 tests/Modifiers/CountTest.php                    |  1 +
 tests/Modifiers/DashifyTest.php                  |  1 +
 tests/Modifiers/DecodeTest.php                   |  1 +
 tests/Modifiers/DeslugifyTest.php                |  1 +
 tests/Modifiers/EntitiesTest.php                 |  1 +
 tests/Modifiers/ExtensionTest.php                |  1 +
 tests/Modifiers/FirstTest.php                    |  2 ++
 tests/Modifiers/FloorTest.php                    |  1 +
 tests/Modifiers/HasLowerCaseTest.php             |  1 +
 tests/Modifiers/HasUpperCaseTest.php             |  1 +
 tests/Modifiers/IsAlphaTest.php                  |  1 +
 tests/Modifiers/IsAlphanumericTest.php           |  1 +
 tests/Modifiers/IsArrayTest.php                  |  1 +
 tests/Modifiers/IsEmailTest.php                  |  1 +
 tests/Modifiers/IsEmbeddableTest.php             |  1 +
 tests/Modifiers/IsFutureTest.php                 |  1 +
 tests/Modifiers/IsIterableTest.php               |  1 +
 tests/Modifiers/IsJsonTest.php                   |  1 +
 tests/Modifiers/IsLowercaseTest.php              |  1 +
 tests/Modifiers/IsNumberwangTest.php             |  1 +
 tests/Modifiers/IsNumericTest.php                |  1 +
 tests/Modifiers/IsPastTest.php                   |  1 +
 tests/Modifiers/IsTodayTest.php                  |  1 +
 tests/Modifiers/IsTomorrowTest.php               |  1 +
 tests/Modifiers/IsUppercaseTest.php              |  1 +
 tests/Modifiers/IsUrlTest.php                    |  1 +
 tests/Modifiers/IsWeekdayTest.php                |  1 +
 tests/Modifiers/IsWeekendTest.php                |  1 +
 tests/Modifiers/IsYesterdayTest.php              |  1 +
 tests/Modifiers/KebabTest.php                    |  1 +
 tests/Modifiers/LastTest.php                     |  2 ++
 tests/Modifiers/Nl2brTest.php                    |  1 +
 tests/Modifiers/PluralTest.php                   |  1 +
 tests/Modifiers/ReverseTest.php                  |  2 ++
 tests/Modifiers/SetQueryParamTest.php            |  2 ++
 tests/Modifiers/ShuffleTest.php                  |  2 ++
 tests/Modifiers/SingularTest.php                 |  1 +
 tests/Modifiers/SlugifyTest.php                  |  1 +
 tests/Modifiers/SmartypantsTest.php              |  1 +
 tests/Modifiers/SnakeTest.php                    |  1 +
 tests/Modifiers/SpacelessTest.php                |  1 +
 tests/Modifiers/StrPadBothTest.php               |  1 +
 tests/Modifiers/StrPadLeftTest.php               |  1 +
 tests/Modifiers/StrPadRightTest.php              |  1 +
 tests/Modifiers/StrPadTest.php                   |  1 +
 tests/Modifiers/SumTest.php                      |  1 +
 tests/Query/OrderByTest.php                      |  1 +
 tests/Query/ResolveValueTest.php                 |  2 ++
 tests/Routing/RoutesTest.php                     |  1 +
 tests/Search/CombTest.php                        |  1 +
 tests/StarterKits/ExportTest.php                 |  6 +++---
 tests/StatamicTest.php                           |  7 +++++++
 .../HalfMeasureStaticCachingTest.php             |  1 +
 tests/Support/ArrTest.php                        |  1 +
 tests/Support/DateFormatTest.php                 |  1 +
 tests/Tags/Concerns/RendersFormsTest.php         |  8 ++++++++
 tests/Tags/FluentTagTest.php                     |  1 +
 tests/Tags/Form/FormCreateTest.php               |  2 +-
 tests/Tags/GetErrorsTest.php                     |  3 +++
 tests/Tags/GlideTest.php                         |  3 +++
 tests/Tags/User/PasswordFormTest.php             |  2 +-
 tests/Tags/User/ProfileFormTest.php              |  4 ++--
 tests/Tags/User/RegisterFormTest.php             |  4 ++--
 tests/Tokens/HandleTokenMiddlewareTest.php       |  2 ++
 tests/View/Antlers/ParserTests.php               | 13 +++++--------
 161 files changed, 266 insertions(+), 102 deletions(-)

diff --git a/src/Assets/Asset.php b/src/Assets/Asset.php
index fb4f02734ad..d70ce5fb45a 100644
--- a/src/Assets/Asset.php
+++ b/src/Assets/Asset.php
@@ -42,14 +42,14 @@
 class Asset implements AssetContract, Augmentable, ArrayAccess, Arrayable, ContainsQueryableValues, SearchableContract
 {
     use HasAugmentedInstance, FluentlyGetsAndSets, TracksQueriedColumns,
-    TracksQueriedRelations,
-    Searchable, ContainsData {
-        set as traitSet;
-        get as traitGet;
-        remove as traitRemove;
-        data as traitData;
-        merge as traitMerge;
-    }
+        TracksQueriedRelations,
+        Searchable, ContainsData {
+            set as traitSet;
+            get as traitGet;
+            remove as traitRemove;
+            data as traitData;
+            merge as traitMerge;
+        }
 
     protected $container;
     protected $path;
diff --git a/src/CP/Utilities/CoreUtilities.php b/src/CP/Utilities/CoreUtilities.php
index 0c51043e372..3f284daca15 100644
--- a/src/CP/Utilities/CoreUtilities.php
+++ b/src/CP/Utilities/CoreUtilities.php
@@ -10,6 +10,7 @@
 use Statamic\Http\Controllers\CP\Utilities\PhpInfoController;
 use Statamic\Http\Controllers\CP\Utilities\UpdateSearchController;
 use Statamic\Statamic;
+
 use function Statamic\trans as __;
 
 class CoreUtilities
diff --git a/src/Modifiers/CoreModifiers.php b/src/Modifiers/CoreModifiers.php
index 03f49b1b517..37c6418c2aa 100644
--- a/src/Modifiers/CoreModifiers.php
+++ b/src/Modifiers/CoreModifiers.php
@@ -1113,8 +1113,8 @@ public function isBefore($value, $params, $context)
     public function isBetween($value, $params, $context)
     {
         return $this->carbon($value)->between(
-                $this->carbon($this->getFromContext($context, $params, 0)),
-                $this->carbon($this->getFromContext($context, $params, 1))
+            $this->carbon($this->getFromContext($context, $params, 0)),
+            $this->carbon($this->getFromContext($context, $params, 1))
         );
     }
 
diff --git a/src/Query/IteratorBuilder.php b/src/Query/IteratorBuilder.php
index 67912b2f408..4abebbd5c76 100644
--- a/src/Query/IteratorBuilder.php
+++ b/src/Query/IteratorBuilder.php
@@ -297,23 +297,23 @@ protected function operatorToCarbonMethod($operator)
             case '<>':
             case '!=':
                 $method = 'neq';
-            break;
+                break;
 
             case '>':
                 $method = 'gt';
-            break;
+                break;
 
             case '>=':
                 $method = 'gte';
-            break;
+                break;
 
             case '<':
                 $method = 'lt';
-            break;
+                break;
 
             case '<=':
                 $method = 'lte';
-            break;
+                break;
         }
 
         return $method;
diff --git a/src/Search/Comb/Comb.php b/src/Search/Comb/Comb.php
index 7c7fa2c4b99..9796f5e57b9 100644
--- a/src/Search/Comb/Comb.php
+++ b/src/Search/Comb/Comb.php
@@ -434,7 +434,7 @@ private function prepareData()
                 array_push($output, $record);
             }
 
-            // find categorized data
+        // find categorized data
         } else {
             foreach ($this->haystack as $category => $records) {
                 foreach ($records as $item) {
@@ -870,7 +870,7 @@ private function parseSearchParameters($query)
                 array_push($parts['chunks'], $query);
             }
 
-            // perform a boolean search -- require words, disallow words
+        // perform a boolean search -- require words, disallow words
         } elseif ($this->query_mode === self::QUERY_BOOLEAN) {
             $words = preg_split("/\s+/i", $query);
 
@@ -903,7 +903,7 @@ private function parseSearchParameters($query)
                 array_push($parts['chunks'], $query);
             }
 
-            // search for the entire query as one thing
+        // search for the entire query as one thing
         } else {
             $parts['chunks'] = [strtolower($query)];
         }
diff --git a/src/Stache/Query/Builder.php b/src/Stache/Query/Builder.php
index 40b2629bca1..73e4a449727 100644
--- a/src/Stache/Query/Builder.php
+++ b/src/Stache/Query/Builder.php
@@ -243,23 +243,23 @@ protected function operatorToCarbonMethod($operator)
             case '<>':
             case '!=':
                 $method = 'neq';
-            break;
+                break;
 
             case '>':
                 $method = 'gt';
-            break;
+                break;
 
             case '>=':
                 $method = 'gte';
-            break;
+                break;
 
             case '<':
                 $method = 'lt';
-            break;
+                break;
 
             case '<=':
                 $method = 'lte';
-            break;
+                break;
         }
 
         return $method;
diff --git a/src/Tags/GetContent.php b/src/Tags/GetContent.php
index 7653cfd78e5..b5c4a37ef59 100644
--- a/src/Tags/GetContent.php
+++ b/src/Tags/GetContent.php
@@ -18,7 +18,7 @@ class GetContent extends Tags
     public function wildcard($tag)
     {
         return $this->entries(
-           $this->context->value($tag)
+            $this->context->value($tag)
         );
     }
 
diff --git a/src/View/Antlers/Language/Analyzers/ConditionPairAnalyzer.php b/src/View/Antlers/Language/Analyzers/ConditionPairAnalyzer.php
index a4437cf0d87..817b85c6cc6 100644
--- a/src/View/Antlers/Language/Analyzers/ConditionPairAnalyzer.php
+++ b/src/View/Antlers/Language/Analyzers/ConditionPairAnalyzer.php
@@ -128,7 +128,7 @@ protected static function findClosestStructurePair($nodes, $node, $index)
 
                         if ($subNode->ref == 0 && (($subNode->isClosingTag && $subNode->name->name == 'if') ||
                                 array_key_exists($subNode->name->name, $thisValidPairs)
-                            )) {
+                        )) {
                             $canClose = true;
                         }
 
diff --git a/src/View/Antlers/Language/Lexer/AntlersLexer.php b/src/View/Antlers/Language/Lexer/AntlersLexer.php
index 893096ba5de..2b42d6d6ef6 100644
--- a/src/View/Antlers/Language/Lexer/AntlersLexer.php
+++ b/src/View/Antlers/Language/Lexer/AntlersLexer.php
@@ -678,8 +678,8 @@ public function tokenize(AntlersNode $node, $input)
                 // -
                 if ($this->isParsingModifierName == false && $this->cur == DocumentParser::Punctuation_Minus) {
                     if (ctype_digit($this->next) && (
-                            ctype_digit((string) $this->prev) == false &&
-                            $this->prev != DocumentParser::RightParent) && $this->isRightOfInterpolationRegion() == false) {
+                        ctype_digit((string) $this->prev) == false &&
+                        $this->prev != DocumentParser::RightParent) && $this->isRightOfInterpolationRegion() == false) {
                         $this->currentContent[] = $this->cur;
                         continue;
                     }
diff --git a/src/View/Antlers/Language/Parser/AntlersNodeParser.php b/src/View/Antlers/Language/Parser/AntlersNodeParser.php
index 7d5e010d8db..04abf015ee4 100644
--- a/src/View/Antlers/Language/Parser/AntlersNodeParser.php
+++ b/src/View/Antlers/Language/Parser/AntlersNodeParser.php
@@ -162,8 +162,8 @@ public function parseNode(AntlersNode $node)
 
             if ($hasFoundName == false) {
                 if ($isParsingString == false && (
-                        $this->cur == DocumentParser::String_Terminator_DoubleQuote ||
-                        $this->cur == DocumentParser::String_Terminator_SingleQuote)) {
+                    $this->cur == DocumentParser::String_Terminator_DoubleQuote ||
+                    $this->cur == DocumentParser::String_Terminator_SingleQuote)) {
                     $terminator = $this->cur;
                     $isParsingString = true;
                     $nameContent[] = $this->cur;
@@ -535,9 +535,9 @@ private function getParameters(AntlersNode $node)
             }
 
             if ($hasFoundName && (
-                    ($terminator != null && $current == $terminator) ||
-                    ($terminator == null && ctype_space($current))
-                )) {
+                ($terminator != null && $current == $terminator) ||
+                ($terminator == null && ctype_space($current))
+            )) {
                 $content = implode($currentChars);
                 $hasFoundName = false;
                 $terminator = null;
diff --git a/src/View/Antlers/Language/Parser/DocumentParser.php b/src/View/Antlers/Language/Parser/DocumentParser.php
index c3627ddf1e0..d57b896f13c 100644
--- a/src/View/Antlers/Language/Parser/DocumentParser.php
+++ b/src/View/Antlers/Language/Parser/DocumentParser.php
@@ -122,7 +122,7 @@ public function __construct()
 
     public function getText($start, $end)
     {
-        return StringUtilities::substr($this->content, $start, ($end - $start));
+        return StringUtilities::substr($this->content, $start, $end - $start);
     }
 
     public function setIsInterpolatedParser($isInterpolation)
diff --git a/src/View/Antlers/Language/Parser/PathParser.php b/src/View/Antlers/Language/Parser/PathParser.php
index 147b32826be..c75b1a6ab75 100644
--- a/src/View/Antlers/Language/Parser/PathParser.php
+++ b/src/View/Antlers/Language/Parser/PathParser.php
@@ -354,9 +354,9 @@ private function locateEndOfAccessor()
             }
 
             if ($isParsingString == false && (
-                    $cur == DocumentParser::String_Terminator_SingleQuote ||
-                    $cur == DocumentParser::String_Terminator_DoubleQuote
-                )) {
+                $cur == DocumentParser::String_Terminator_SingleQuote ||
+                $cur == DocumentParser::String_Terminator_DoubleQuote
+            )) {
                 $isParsingString = true;
                 $terminator = $cur;
                 $nestedChars[] = $cur;
diff --git a/src/View/Antlers/Language/Runtime/NodeProcessor.php b/src/View/Antlers/Language/Runtime/NodeProcessor.php
index 8012d528a4a..164197c4bcb 100644
--- a/src/View/Antlers/Language/Runtime/NodeProcessor.php
+++ b/src/View/Antlers/Language/Runtime/NodeProcessor.php
@@ -569,7 +569,6 @@ private function shouldProcessAsTag(AntlersNode $node)
 
         if ($managerResults[0] === true) {
             if ($node->isPaired() && ! $this->isLoopable($resolvedValue)) {
-
                 // Safe to do this since there is no ambiguity here.
                 return $node->isTagNode;
             }
@@ -987,7 +986,7 @@ public function evaluateDeferredVariable(AbstractNode $deferredNode)
     {
         $environment = new Environment();
         $environment->setProcessor($this);
-        $environment->cascade($this->cascade)->setData(($this->getActiveData()));
+        $environment->cascade($this->cascade)->setData($this->getActiveData());
 
         return $environment->evaluate([$deferredNode]);
     }
diff --git a/src/View/Antlers/Language/Runtime/PathDataManager.php b/src/View/Antlers/Language/Runtime/PathDataManager.php
index f6aec6d1a14..e024c9b16a3 100644
--- a/src/View/Antlers/Language/Runtime/PathDataManager.php
+++ b/src/View/Antlers/Language/Runtime/PathDataManager.php
@@ -606,7 +606,6 @@ public function getData(VariableReference $path, $data, $isForArrayIndex = false
                         }
 
                         if (count($path->pathParts) > 1 && $this->isPair == false) {
-
                             // If we have more steps in the path to take, but we are
                             // not a tag pair, we need to reduce anyway so we
                             // can descend further into the nested values.
@@ -630,7 +629,6 @@ public function getData(VariableReference $path, $data, $isForArrayIndex = false
                                 }
 
                                 if (count($path->pathParts) > 1 && $this->isPair == false) {
-
                                     // If we have more steps in the path to take, but we are
                                     // not a tag pair, we need to reduce anyway so we
                                     // can descend further into the nested values.
@@ -1005,7 +1003,7 @@ public static function reduceForAntlers($value, Parser $parser, $data, $isPair =
             if (! $isPair) {
                 $returnValue = $value->antlersValue($parser, $data);
             } else {
-                $returnValue = self::reduce(($value->antlersValue($parser, $data)));
+                $returnValue = self::reduce($value->antlersValue($parser, $data));
             }
             $returnValue = self::guardRuntimeReturnValue($returnValue);
 
diff --git a/src/View/Antlers/Parser.php b/src/View/Antlers/Parser.php
index 8032fdd2aa9..cf72a94cede 100644
--- a/src/View/Antlers/Parser.php
+++ b/src/View/Antlers/Parser.php
@@ -592,12 +592,10 @@ public function parseCallbackTags($text, $data)
 
             // look for tag pairs and (plugin) callbacks
             if ($name != 'content' && ! $replacement) {
-
                 // is the callback a variable in our data set?
                 [$exists, $values] = $this->getVariableExistenceAndValue($name, $data);
 
                 if ($exists) {
-
                     // is this a tag-pair?
                     if ($this->isLoopable($values)) {
                         // yes it is
@@ -761,7 +759,6 @@ public function parseTernaries($text, $data)
 
                 // Regular old ternary
                 } else {
-
                     // Split the tag up
                     $bits = explode('? ', $match[1]);
 
diff --git a/tests/API/APITest.php b/tests/API/APITest.php
index 18bcb897c1e..96f817cc43b 100644
--- a/tests/API/APITest.php
+++ b/tests/API/APITest.php
@@ -25,6 +25,7 @@ public function not_found_responses_are_formatted_with_json()
 
     /**
      * @test
+     *
      * @dataProvider entryNotFoundProvider
      */
     public function it_handles_not_found_entries($url, $requestShouldSucceed)
@@ -280,6 +281,7 @@ public function relationships_are_shallow_augmented()
 
     /**
      * @test
+     *
      * @dataProvider userPasswordFilterProvider
      */
     public function it_doesnt_allow_filtering_users_by_password($filter)
@@ -361,6 +363,7 @@ public function userPasswordFilterProvider()
 
     /**
      * @test
+     *
      * @dataProvider termNotFoundProvider
      */
     public function it_handles_not_found_terms($url, $requestShouldSucceed)
diff --git a/tests/API/CacherTest.php b/tests/API/CacherTest.php
index b742d5bc2e0..ec5b056db7b 100644
--- a/tests/API/CacherTest.php
+++ b/tests/API/CacherTest.php
@@ -62,6 +62,7 @@ public function it_caches_endpoint_using_default_cacher()
 
     /**
      * @test
+     *
      * @dataProvider bypassCacheProvider
      */
     public function it_bypasses_cache_when_using_a_valid_token($endpoint, $headers)
@@ -83,6 +84,7 @@ public function it_bypasses_cache_when_using_a_valid_token($endpoint, $headers)
 
     /**
      * @test
+     *
      * @dataProvider bypassCacheProvider
      */
     public function it_doesnt_bypass_cache_when_using_an_invalid_token($endpoint, $headers)
@@ -115,6 +117,7 @@ public function bypassCacheProvider()
 
     /**
      * @test
+     *
      * @environment-setup setCustomExpiry
      */
     public function it_caches_endpoint_using_configured_expiry()
diff --git a/tests/Antlers/ContainerTest.php b/tests/Antlers/ContainerTest.php
index f701c51cda4..2aba5ffdbb4 100644
--- a/tests/Antlers/ContainerTest.php
+++ b/tests/Antlers/ContainerTest.php
@@ -23,6 +23,7 @@ protected function useRuntimeParser($app)
 
     /**
      * @test
+     *
      * @define-env useRegexParser
      **/
     public function it_resolves_regex_parser_using_contract()
@@ -32,6 +33,7 @@ public function it_resolves_regex_parser_using_contract()
 
     /**
      * @test
+     *
      * @define-env useRuntimeParser
      **/
     public function it_resolves_runtime_parser_using_contract()
@@ -41,6 +43,7 @@ public function it_resolves_runtime_parser_using_contract()
 
     /**
      * @test
+     *
      * @define-env useRegexParser
      **/
     public function it_resolves_regex_parser_using_class()
@@ -50,6 +53,7 @@ public function it_resolves_regex_parser_using_class()
 
     /**
      * @test
+     *
      * @define-env useRuntimeParser
      **/
     public function it_resolves_runtime_parser_using_class()
diff --git a/tests/Antlers/Parser/ParserErrorsTest.php b/tests/Antlers/Parser/ParserErrorsTest.php
index aa7b0e628b0..c6b21838676 100644
--- a/tests/Antlers/Parser/ParserErrorsTest.php
+++ b/tests/Antlers/Parser/ParserErrorsTest.php
@@ -117,7 +117,7 @@ public function test_incorrectly_chained_methods_throws_error_colon_syntax()
             toAtomString()
 }}
 EOT
-);
+        );
     }
 
     public function test_incorrectly_chained_methods_throws_error_dot_syntax()
@@ -148,7 +148,7 @@ public function test_neighboring_strings_throws_parser_error_in_modifiers()
         $this->assertThrowsParserError(<<<'EOT'
 {{ some_value | modifier: "string" "string" }}
 EOT
-);
+        );
     }
 
     public function test_neighboring_numeric_throws_parser_error_in_modifiers()
diff --git a/tests/Antlers/Runtime/InterpolationTest.php b/tests/Antlers/Runtime/InterpolationTest.php
index bcaed4e152c..134a100d0e0 100644
--- a/tests/Antlers/Runtime/InterpolationTest.php
+++ b/tests/Antlers/Runtime/InterpolationTest.php
@@ -32,7 +32,7 @@ public function test_augmented_values_do_not_get_lost_when_inside_nested_partial
             'condition' => true,
         ];
 
-        $this->assertSame('<The Title>', trim(($this->renderString($template, $data, true))));
+        $this->assertSame('<The Title>', trim($this->renderString($template, $data, true)));
     }
 
     public function test_interpolation_inside_dynamic_access()
diff --git a/tests/Antlers/Runtime/RecursiveNodesTest.php b/tests/Antlers/Runtime/RecursiveNodesTest.php
index dd6e34672b2..884d25883ca 100644
--- a/tests/Antlers/Runtime/RecursiveNodesTest.php
+++ b/tests/Antlers/Runtime/RecursiveNodesTest.php
@@ -1024,7 +1024,7 @@ public function test_recursive_node_can_be_root()
     {{ /children }}
 {{ /records }}
 EOT
-);
+        );
 
         // The parseNodes will throw an exception if it fails to parse correctly.
         // We will just assert true is true to shut up the risky assertions warning.
diff --git a/tests/Antlers/Runtime/TemplateTest.php b/tests/Antlers/Runtime/TemplateTest.php
index 94c03fe0a65..27cb51b40de 100644
--- a/tests/Antlers/Runtime/TemplateTest.php
+++ b/tests/Antlers/Runtime/TemplateTest.php
@@ -80,8 +80,7 @@ public function it_doesnt_output_anything_if_object_cannot_be_cast_to_a_string()
                 'line' => 1, 'file' => '',
             ]);
 
-        $object = new class
-        {
+        $object = new class {
         };
 
         $this->assertEquals('', $this->renderString('{{ object }}', compact('object')));
diff --git a/tests/Assets/AssetTest.php b/tests/Assets/AssetTest.php
index d9f4e09188c..048534efcac 100644
--- a/tests/Assets/AssetTest.php
+++ b/tests/Assets/AssetTest.php
@@ -296,6 +296,7 @@ public function it_removes_data_values()
 
     /**
      * @test
+     *
      * @dataProvider reAddRemovedData
      **/
     public function it_doesnt_try_to_re_remove_newly_added_data_from_meta($reAddRemovedData)
@@ -382,6 +383,7 @@ public function augment($value)
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
diff --git a/tests/Auth/Eloquent/EloquentUserTest.php b/tests/Auth/Eloquent/EloquentUserTest.php
index 3b956397c81..edfde3a2bd6 100644
--- a/tests/Auth/Eloquent/EloquentUserTest.php
+++ b/tests/Auth/Eloquent/EloquentUserTest.php
@@ -98,7 +98,7 @@ public function makeUser()
                 // 'password' => '$2y$10$TKh8H1.PfQx37YgCzwiKb.KjNyWgaHb9cbcoQgdIVFlYg7B77UdFm', // secret
                 'remember_token' => str_random(10),
             ])
-        );
+            );
     }
 
     public function createPermissible()
diff --git a/tests/Auth/Protect/ProtectionTest.php b/tests/Auth/Protect/ProtectionTest.php
index b3339e98ae5..198b259a847 100644
--- a/tests/Auth/Protect/ProtectionTest.php
+++ b/tests/Auth/Protect/ProtectionTest.php
@@ -53,8 +53,7 @@ public function if_the_data_isnt_protectable_it_doesnt_get_a_scheme()
     {
         $this->assertNull($this->protection->scheme());
 
-        $this->protection->setData(new class
-        {
+        $this->protection->setData(new class {
             //
         });
 
diff --git a/tests/Auth/UserContractTests.php b/tests/Auth/UserContractTests.php
index db86657060e..4b635725783 100644
--- a/tests/Auth/UserContractTests.php
+++ b/tests/Auth/UserContractTests.php
@@ -148,6 +148,7 @@ public function additionalDataValues()
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
diff --git a/tests/CP/Navigation/NavPreferencesNormalizerTest.php b/tests/CP/Navigation/NavPreferencesNormalizerTest.php
index fe4a176bb8d..9d3abf298ab 100644
--- a/tests/CP/Navigation/NavPreferencesNormalizerTest.php
+++ b/tests/CP/Navigation/NavPreferencesNormalizerTest.php
@@ -256,6 +256,7 @@ public function it_doesnt_remove_inherit_action_items_when_actually_reordering()
 
     /**
      * @test
+     *
      * @dataProvider modifiers
      **/
     public function it_defaults_action_to_modify_when_modifying_in_original_section($modifier)
diff --git a/tests/Composer/ComposerTest.php b/tests/Composer/ComposerTest.php
index ada0d140d25..e3df5c1a5e0 100644
--- a/tests/Composer/ComposerTest.php
+++ b/tests/Composer/ComposerTest.php
@@ -46,6 +46,7 @@ public function tearDown(): void
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_list_installed_packages_with_details()
@@ -65,6 +66,7 @@ public function it_can_list_installed_packages_with_details()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_installed_version_of_a_package_directly_from_composer_lock()
@@ -74,6 +76,7 @@ public function it_can_get_installed_version_of_a_package_directly_from_composer
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_check_if_package_is_installed()
@@ -84,6 +87,7 @@ public function it_can_check_if_package_is_installed()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_installed_path_of_a_package()
@@ -101,6 +105,7 @@ public function it_can_get_installed_path_of_a_package()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_gracefully_fails_when_lock_file_does_not_exist()
@@ -119,6 +124,7 @@ public function it_gracefully_fails_when_lock_file_does_not_exist()
      *
      * @group integration
      * @group slow
+     *
      * @test
      */
     public function it_can_require_update_downgrade_and_remove_a_package()
@@ -219,6 +225,7 @@ public function it_can_require_update_downgrade_and_remove_a_package()
      *
      * @group integration
      * @group slow
+     *
      * @test
      */
     public function it_can_require_and_remove_multiple_packages_in_one_shot()
diff --git a/tests/Data/AugmentedTest.php b/tests/Data/AugmentedTest.php
index fc5a709b193..35fae7cc870 100644
--- a/tests/Data/AugmentedTest.php
+++ b/tests/Data/AugmentedTest.php
@@ -43,8 +43,7 @@ private function assertNullValue($actual)
     /** @test */
     public function it_gets_a_single_value_by_key()
     {
-        $augmented = new class($this->thing) extends BaseAugmentedThing
-        {
+        $augmented = new class($this->thing) extends BaseAugmentedThing {
             //
         };
 
@@ -55,8 +54,7 @@ public function it_gets_a_single_value_by_key()
     /** @test */
     public function it_can_use_null_as_a_supplement_value()
     {
-        $augmented = new class($this->thing) extends BaseAugmentedThing
-        {
+        $augmented = new class($this->thing) extends BaseAugmentedThing {
             //
         };
 
@@ -78,8 +76,7 @@ public function value($key)
             }
         };
 
-        $augmented = new class($thingWithValueMethod) extends BaseAugmentedThing
-        {
+        $augmented = new class($thingWithValueMethod) extends BaseAugmentedThing {
             //
         };
 
diff --git a/tests/Data/DataRepositoryTest.php b/tests/Data/DataRepositoryTest.php
index 4a93f081df0..abfc51cd761 100644
--- a/tests/Data/DataRepositoryTest.php
+++ b/tests/Data/DataRepositoryTest.php
@@ -113,6 +113,7 @@ public function when_a_repository_key_isnt_provided_it_will_loop_through_reposit
 
     /**
      * @test
+     *
      * @dataProvider findByRequestUrlProvider
      */
     public function it_finds_by_request_url($requestUrl, $entryId)
@@ -127,6 +128,7 @@ public function it_finds_by_request_url($requestUrl, $entryId)
 
     /**
      * @test
+     *
      * @dataProvider findByRequestUrlNoRootSiteProvider
      */
     public function it_finds_by_request_url_with_no_root_site($requestUrl, $entryId)
diff --git a/tests/Data/Entries/CollectionTest.php b/tests/Data/Entries/CollectionTest.php
index cf63570a27f..3a5c889c5d6 100644
--- a/tests/Data/Entries/CollectionTest.php
+++ b/tests/Data/Entries/CollectionTest.php
@@ -713,6 +713,7 @@ public function it_updates_entry_uris_through_the_repository()
 
     /**
      * @test
+     *
      * @dataProvider additionalPreviewTargetProvider
      */
     public function it_gets_and_sets_preview_targets($throughFacade)
diff --git a/tests/Data/Entries/EntryTest.php b/tests/Data/Entries/EntryTest.php
index 7e6e43074d3..beee13d59e4 100644
--- a/tests/Data/Entries/EntryTest.php
+++ b/tests/Data/Entries/EntryTest.php
@@ -204,6 +204,7 @@ public function augment($value)
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
@@ -1885,6 +1886,7 @@ public function no_page_is_returned_when_the_collection_isnt_using_a_structure()
 
     /**
      * @test
+     *
      * @dataProvider autoGeneratedTitleProvider
      */
     public function it_gets_the_auto_generated_title($format)
diff --git a/tests/Data/Entries/GetDateFromPathTest.php b/tests/Data/Entries/GetDateFromPathTest.php
index 5cb83d8f0a3..ab72d4957bc 100644
--- a/tests/Data/Entries/GetDateFromPathTest.php
+++ b/tests/Data/Entries/GetDateFromPathTest.php
@@ -9,6 +9,7 @@ class GetDateFromPathTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider paths
      **/
     public function it_gets_the_date_from_a_path($expected, $path)
diff --git a/tests/Data/Entries/GetSlugFromPathTest.php b/tests/Data/Entries/GetSlugFromPathTest.php
index fee7b91814d..a329619730e 100644
--- a/tests/Data/Entries/GetSlugFromPathTest.php
+++ b/tests/Data/Entries/GetSlugFromPathTest.php
@@ -9,6 +9,7 @@ class GetSlugFromPathTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider paths
      **/
     public function it_gets_the_slug_from_a_path($expected, $path)
diff --git a/tests/Data/Entries/GetSuffixFromPathTest.php b/tests/Data/Entries/GetSuffixFromPathTest.php
index fb51ed27f5c..2caf61c5328 100644
--- a/tests/Data/Entries/GetSuffixFromPathTest.php
+++ b/tests/Data/Entries/GetSuffixFromPathTest.php
@@ -9,6 +9,7 @@ class GetSuffixFromPathTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider paths
      **/
     public function it_gets_the_suffix_from_a_path($expected, $path)
diff --git a/tests/Data/Entries/RemoveSuffixFromPathTest.php b/tests/Data/Entries/RemoveSuffixFromPathTest.php
index 33adb444691..8b20dafa5a4 100644
--- a/tests/Data/Entries/RemoveSuffixFromPathTest.php
+++ b/tests/Data/Entries/RemoveSuffixFromPathTest.php
@@ -9,6 +9,7 @@ class RemoveSuffixFromPathTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider paths
      **/
     public function it_removes_the_suffix_from_a_path($expected, $path)
diff --git a/tests/Data/Globals/VariablesTest.php b/tests/Data/Globals/VariablesTest.php
index 58b31a8ffda..259e49ba8ba 100644
--- a/tests/Data/Globals/VariablesTest.php
+++ b/tests/Data/Globals/VariablesTest.php
@@ -224,6 +224,7 @@ public function augment($value)
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
diff --git a/tests/Data/Taxonomies/LocalizedTermTest.php b/tests/Data/Taxonomies/LocalizedTermTest.php
index 092cc489b33..03d693e4b8b 100644
--- a/tests/Data/Taxonomies/LocalizedTermTest.php
+++ b/tests/Data/Taxonomies/LocalizedTermTest.php
@@ -111,6 +111,7 @@ public function augment($value)
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_has_magic_property_and_methods_for_fields_that_augment_to_query_builders($builder)
diff --git a/tests/Data/Taxonomies/TaxonomyTest.php b/tests/Data/Taxonomies/TaxonomyTest.php
index e9c90b7a24f..2d0fba6eaad 100644
--- a/tests/Data/Taxonomies/TaxonomyTest.php
+++ b/tests/Data/Taxonomies/TaxonomyTest.php
@@ -179,6 +179,7 @@ public function it_is_arrayable()
 
     /**
      * @test
+     *
      * @dataProvider additionalPreviewTargetProvider
      */
     public function it_gets_and_sets_preview_targets($throughFacade)
diff --git a/tests/Extend/AddonTest.php b/tests/Extend/AddonTest.php
index 630713ae819..229cd8ec416 100644
--- a/tests/Extend/AddonTest.php
+++ b/tests/Extend/AddonTest.php
@@ -243,6 +243,7 @@ public function it_gets_the_license()
 
     /**
      * @test
+     *
      * @dataProvider isLatestVersionProvider
      **/
     public function it_checks_if_its_the_latest_version($version, $latest, $isLatest)
diff --git a/tests/Facades/PathTest.php b/tests/Facades/PathTest.php
index c4cadd540ba..1e98a05ff1b 100644
--- a/tests/Facades/PathTest.php
+++ b/tests/Facades/PathTest.php
@@ -15,6 +15,7 @@ public function makes_paths_relative()
 
     /**
      * @test
+     *
      * @dataProvider extensionProvider
      */
     public function it_gets_the_extension($path, $extension)
diff --git a/tests/Facades/UrlTest.php b/tests/Facades/UrlTest.php
index c9ae87d4f5b..ae2ba39e149 100644
--- a/tests/Facades/UrlTest.php
+++ b/tests/Facades/UrlTest.php
@@ -80,6 +80,7 @@ public function testDeterminesExternalUrlWhenUsingRelativeInConfig()
 
     /**
      * @test
+     *
      * @dataProvider ancestorProvider
      **/
     public function it_checks_whether_a_url_is_an_ancestor_of_another($child, $parent, $isAncestor)
@@ -119,6 +120,7 @@ public function ancestorProvider()
 
     /**
      * @test
+     *
      * @dataProvider relativeProvider
      **/
     public function makes_urls_relative($url, $expected)
diff --git a/tests/Feature/Collections/UpdateCollectionTreeTest.php b/tests/Feature/Collections/UpdateCollectionTreeTest.php
index ab801e5ff41..d5a4f03a320 100644
--- a/tests/Feature/Collections/UpdateCollectionTreeTest.php
+++ b/tests/Feature/Collections/UpdateCollectionTreeTest.php
@@ -17,6 +17,7 @@ class UpdateCollectionTreeTest extends TestCase
 
     /**
      * @test
+     *
      * @dataProvider collectionTreeDataProvider
      */
     public function it_updates_the_tree($collectionHandle)
diff --git a/tests/Feature/Fieldtypes/FilesTest.php b/tests/Feature/Fieldtypes/FilesTest.php
index b4075b10f02..8f3996daea5 100644
--- a/tests/Feature/Fieldtypes/FilesTest.php
+++ b/tests/Feature/Fieldtypes/FilesTest.php
@@ -33,6 +33,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @dataProvider uploadProvider
      */
     public function it_uploads_a_file($container, $isImage, $expectedPath, $expectedWidth, $expectedHeight)
diff --git a/tests/Feature/GraphQL/AssetContainerTest.php b/tests/Feature/GraphQL/AssetContainerTest.php
index c3d3a7a9ba1..3a04616823d 100644
--- a/tests/Feature/GraphQL/AssetContainerTest.php
+++ b/tests/Feature/GraphQL/AssetContainerTest.php
@@ -16,6 +16,7 @@ class AssetContainerTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/AssetContainersTest.php b/tests/Feature/GraphQL/AssetContainersTest.php
index f02dd9acb9b..065dce79ff5 100644
--- a/tests/Feature/GraphQL/AssetContainersTest.php
+++ b/tests/Feature/GraphQL/AssetContainersTest.php
@@ -16,6 +16,7 @@ class AssetContainersTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/AssetTest.php b/tests/Feature/GraphQL/AssetTest.php
index 5d224672168..5fc444d915b 100644
--- a/tests/Feature/GraphQL/AssetTest.php
+++ b/tests/Feature/GraphQL/AssetTest.php
@@ -29,6 +29,7 @@ protected function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/AssetsTest.php b/tests/Feature/GraphQL/AssetsTest.php
index 43fca422242..06cbdb25083 100644
--- a/tests/Feature/GraphQL/AssetsTest.php
+++ b/tests/Feature/GraphQL/AssetsTest.php
@@ -26,6 +26,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/CollectionTest.php b/tests/Feature/GraphQL/CollectionTest.php
index 582400d351d..05ef821f8ac 100644
--- a/tests/Feature/GraphQL/CollectionTest.php
+++ b/tests/Feature/GraphQL/CollectionTest.php
@@ -22,6 +22,7 @@ class CollectionTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/CollectionsTest.php b/tests/Feature/GraphQL/CollectionsTest.php
index 590eb09d467..34962af914c 100644
--- a/tests/Feature/GraphQL/CollectionsTest.php
+++ b/tests/Feature/GraphQL/CollectionsTest.php
@@ -16,6 +16,7 @@ class CollectionsTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/CustomMiddlewareTest.php b/tests/Feature/GraphQL/CustomMiddlewareTest.php
index 2ae97421e63..f5ad91a34f9 100644
--- a/tests/Feature/GraphQL/CustomMiddlewareTest.php
+++ b/tests/Feature/GraphQL/CustomMiddlewareTest.php
@@ -25,6 +25,7 @@ public function custom_middleware_does_not_yet_exist()
 
     /**
      * @test
+     *
      * @environment-setup addCustomMiddlewareWithMethod
      **/
     public function a_custom_middleware_can_be_added_to_the_default_schema()
@@ -41,6 +42,7 @@ protected function addCustomMiddlewareWithMethod($app)
 
     /**
      * @test
+     *
      * @environment-setup addCustomMiddlewareThroughConfig
      **/
     public function a_custom_middleware_can_be_added_to_the_default_schema_through_config()
diff --git a/tests/Feature/GraphQL/CustomQueryTest.php b/tests/Feature/GraphQL/CustomQueryTest.php
index df98d6e86cf..b919fa83e3e 100644
--- a/tests/Feature/GraphQL/CustomQueryTest.php
+++ b/tests/Feature/GraphQL/CustomQueryTest.php
@@ -22,6 +22,7 @@ public function custom_query_does_not_yet_exist()
 
     /**
      * @test
+     *
      * @environment-setup addCustomQueryWithMethod
      **/
     public function a_custom_query_can_be_added_to_the_default_schema()
@@ -39,6 +40,7 @@ protected function addCustomQueryWithMethod($app)
 
     /**
      * @test
+     *
      * @environment-setup addCustomQueryThroughConfig
      **/
     public function a_custom_query_can_be_added_to_the_default_schema_through_config()
diff --git a/tests/Feature/GraphQL/EntriesTest.php b/tests/Feature/GraphQL/EntriesTest.php
index 41d2797701d..8e4c1051705 100644
--- a/tests/Feature/GraphQL/EntriesTest.php
+++ b/tests/Feature/GraphQL/EntriesTest.php
@@ -26,6 +26,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/EntryTest.php b/tests/Feature/GraphQL/EntryTest.php
index a9b43232834..83ba02955d2 100644
--- a/tests/Feature/GraphQL/EntryTest.php
+++ b/tests/Feature/GraphQL/EntryTest.php
@@ -31,6 +31,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/FormTest.php b/tests/Feature/GraphQL/FormTest.php
index fa4fc5c3b52..4afad6a69e8 100644
--- a/tests/Feature/GraphQL/FormTest.php
+++ b/tests/Feature/GraphQL/FormTest.php
@@ -27,6 +27,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/FormsTest.php b/tests/Feature/GraphQL/FormsTest.php
index 07d2a9bb4ae..af974433aa0 100644
--- a/tests/Feature/GraphQL/FormsTest.php
+++ b/tests/Feature/GraphQL/FormsTest.php
@@ -23,6 +23,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/GlobalTest.php b/tests/Feature/GraphQL/GlobalTest.php
index f4ce3097761..6e2f41bd193 100644
--- a/tests/Feature/GraphQL/GlobalTest.php
+++ b/tests/Feature/GraphQL/GlobalTest.php
@@ -26,6 +26,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/GlobalsTest.php b/tests/Feature/GraphQL/GlobalsTest.php
index 494acfb9383..4cdb160d43e 100644
--- a/tests/Feature/GraphQL/GlobalsTest.php
+++ b/tests/Feature/GraphQL/GlobalsTest.php
@@ -24,6 +24,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/NavTest.php b/tests/Feature/GraphQL/NavTest.php
index 2547434b10f..b767bf8aeac 100644
--- a/tests/Feature/GraphQL/NavTest.php
+++ b/tests/Feature/GraphQL/NavTest.php
@@ -21,6 +21,7 @@ class NavTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/NavigationsTest.php b/tests/Feature/GraphQL/NavigationsTest.php
index 2d406608bf7..766d589913d 100644
--- a/tests/Feature/GraphQL/NavigationsTest.php
+++ b/tests/Feature/GraphQL/NavigationsTest.php
@@ -16,6 +16,7 @@ class NavigationsTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/RequestCacheTest.php b/tests/Feature/GraphQL/RequestCacheTest.php
index 5cfbe15d180..29444b89739 100644
--- a/tests/Feature/GraphQL/RequestCacheTest.php
+++ b/tests/Feature/GraphQL/RequestCacheTest.php
@@ -94,6 +94,7 @@ public function it_caches_endpoint_using_configured_expiry()
 
     /**
      * @test
+     *
      * @dataProvider bypassCacheProvider
      */
     public function it_bypasses_cache_when_using_a_valid_token($url, $headers)
@@ -120,6 +121,7 @@ public function it_bypasses_cache_when_using_a_valid_token($url, $headers)
 
     /**
      * @test
+     *
      * @dataProvider bypassCacheProvider
      */
     public function it_doesnt_bypass_cache_when_using_an_invalid_token($url, $headers)
diff --git a/tests/Feature/GraphQL/SitesTest.php b/tests/Feature/GraphQL/SitesTest.php
index e0791ddd1a7..f3fbd9ad8fa 100644
--- a/tests/Feature/GraphQL/SitesTest.php
+++ b/tests/Feature/GraphQL/SitesTest.php
@@ -29,6 +29,7 @@ public function getEnvironmentSetUp($app)
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/TaxonomiesTest.php b/tests/Feature/GraphQL/TaxonomiesTest.php
index 7e0046f25a7..1093642da38 100644
--- a/tests/Feature/GraphQL/TaxonomiesTest.php
+++ b/tests/Feature/GraphQL/TaxonomiesTest.php
@@ -16,6 +16,7 @@ class TaxonomiesTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/TaxonomyTest.php b/tests/Feature/GraphQL/TaxonomyTest.php
index cb779ffd42f..2c0f416c3fc 100644
--- a/tests/Feature/GraphQL/TaxonomyTest.php
+++ b/tests/Feature/GraphQL/TaxonomyTest.php
@@ -16,6 +16,7 @@ class TaxonomyTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/TermTest.php b/tests/Feature/GraphQL/TermTest.php
index 70e26adb528..c33141d10d3 100644
--- a/tests/Feature/GraphQL/TermTest.php
+++ b/tests/Feature/GraphQL/TermTest.php
@@ -21,6 +21,7 @@ class TermTest extends TestCase
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/TermsTest.php b/tests/Feature/GraphQL/TermsTest.php
index b0337348514..baf13d2d17f 100644
--- a/tests/Feature/GraphQL/TermsTest.php
+++ b/tests/Feature/GraphQL/TermsTest.php
@@ -58,6 +58,7 @@ private function createBlueprints()
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/UserTest.php b/tests/Feature/GraphQL/UserTest.php
index 7a66b74c62c..9e640073be2 100644
--- a/tests/Feature/GraphQL/UserTest.php
+++ b/tests/Feature/GraphQL/UserTest.php
@@ -37,6 +37,7 @@ private function createUsers()
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
diff --git a/tests/Feature/GraphQL/UsersTest.php b/tests/Feature/GraphQL/UsersTest.php
index fb6df9dc131..b2da52b45ba 100644
--- a/tests/Feature/GraphQL/UsersTest.php
+++ b/tests/Feature/GraphQL/UsersTest.php
@@ -29,6 +29,7 @@ private function createUsers()
 
     /**
      * @test
+     *
      * @environment-setup disableQueries
      **/
     public function query_only_works_if_enabled()
@@ -259,6 +260,7 @@ public function it_filters_users_with_multiple_conditions_of_the_same_type()
 
     /**
      * @test
+     *
      * @dataProvider userPasswordFilterProvider
      */
     public function it_doesnt_allow_filtering_users_by_password($filter)
diff --git a/tests/Fields/FieldTest.php b/tests/Fields/FieldTest.php
index dfbd7726eac..e517b1df793 100644
--- a/tests/Fields/FieldTest.php
+++ b/tests/Fields/FieldTest.php
@@ -51,8 +51,7 @@ public function it_determines_if_localizable()
     /** @test */
     public function it_gets_the_fieldtype()
     {
-        $fieldtype = new class extends Fieldtype
-        {
+        $fieldtype = new class extends Fieldtype {
         };
 
         FieldtypeRepository::shouldReceive('find')
@@ -535,6 +534,7 @@ public function shallowAugment($data)
 
     /**
      * @test
+     *
      * @group graphql
      **/
     public function it_gets_the_graphql_type()
@@ -562,6 +562,7 @@ public function toGqlType()
 
     /**
      * @test
+     *
      * @group graphql
      **/
     public function it_makes_the_graphql_type_non_nullable_if_its_required()
diff --git a/tests/Fields/FieldsTest.php b/tests/Fields/FieldsTest.php
index abfbd1ebbb6..7a556cf565c 100644
--- a/tests/Fields/FieldsTest.php
+++ b/tests/Fields/FieldsTest.php
@@ -921,6 +921,7 @@ public function it_validates_properly_against_filled_fields_with_sometimes_rule(
 
     /**
      * @test
+     *
      * @group graphql
      **/
     public function it_gets_the_fields_as_graphql_types()
diff --git a/tests/Fields/FieldsetRepositoryTest.php b/tests/Fields/FieldsetRepositoryTest.php
index 12ab5cb14b6..3f0e5f54cfb 100644
--- a/tests/Fields/FieldsetRepositoryTest.php
+++ b/tests/Fields/FieldsetRepositoryTest.php
@@ -184,6 +184,7 @@ public function it_returns_empty_collection_if_fieldset_directory_doesnt_exist()
 
     /**
      * @test
+     *
      * @dataProvider saveProvider
      */
     public function it_saves_to_disk($handle, $expectedPath)
diff --git a/tests/Fields/FieldsetTest.php b/tests/Fields/FieldsetTest.php
index 7c92f416479..d4ebf3c8cb2 100644
--- a/tests/Fields/FieldsetTest.php
+++ b/tests/Fields/FieldsetTest.php
@@ -46,6 +46,7 @@ public function it_gets_contents()
 
     /**
      * @test
+     *
      * @dataProvider titleProvider
      */
     public function it_gets_the_title($handle, $title, $expectedTitle)
diff --git a/tests/Fields/FieldtypeTest.php b/tests/Fields/FieldtypeTest.php
index 6ddd71ed479..f973d52150f 100644
--- a/tests/Fields/FieldtypeTest.php
+++ b/tests/Fields/FieldtypeTest.php
@@ -329,12 +329,10 @@ public function it_wont_override_previously_appended_config_fields()
     /** @test */
     public function it_will_only_append_config_fields_to_the_intended_fieldtype()
     {
-        $fieldtype = new class extends Fieldtype
-        {
+        $fieldtype = new class extends Fieldtype {
         };
 
-        $fieldtypeWithAppendedConfig = new class extends Fieldtype
-        {
+        $fieldtypeWithAppendedConfig = new class extends Fieldtype {
         };
 
         $fieldtypeWithAppendedConfig::appendConfigField('group', ['type' => 'text']);
@@ -402,6 +400,7 @@ public function it_gets_a_config_value()
 
     /**
      * @test
+     *
      * @group graphql
      **/
     public function it_gets_the_graphql_type_of_string_by_default()
diff --git a/tests/Fields/ValueTest.php b/tests/Fields/ValueTest.php
index 6be31af5ac3..9b1778d927c 100644
--- a/tests/Fields/ValueTest.php
+++ b/tests/Fields/ValueTest.php
@@ -11,6 +11,7 @@ class ValueTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider isRelationshipFieldtypeProvider
      **/
     public function it_gets_whether_its_a_relationship_through_the_fieldtype($isRelationship, $fieldtype)
diff --git a/tests/Fields/ValuesTest.php b/tests/Fields/ValuesTest.php
index 7989241b1d5..9b4cd8b7e86 100644
--- a/tests/Fields/ValuesTest.php
+++ b/tests/Fields/ValuesTest.php
@@ -182,6 +182,7 @@ public function raw_values()
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      **/
     public function it_gets_a_query($builder)
@@ -215,6 +216,7 @@ public function it_throws_exception_if_trying_to_get_query_for_missing_field()
 
     /**
      * @test
+     *
      * @dataProvider queryBuilderProvider
      */
     public function completes_a_query($builder)
diff --git a/tests/Fieldtypes/CodeTest.php b/tests/Fieldtypes/CodeTest.php
index 0e2dded4123..aa42236a4a8 100644
--- a/tests/Fieldtypes/CodeTest.php
+++ b/tests/Fieldtypes/CodeTest.php
@@ -10,6 +10,7 @@ class CodeTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider processValues
      **/
     public function it_processes_values($isSelectable, $value, $expected)
@@ -32,6 +33,7 @@ public function processValues()
 
     /**
      * @test
+     *
      * @dataProvider preProcessValues
      **/
     public function it_preprocesses_values($value, $expected)
diff --git a/tests/Fieldtypes/EntriesTest.php b/tests/Fieldtypes/EntriesTest.php
index 567f4e2e018..f23fb9f15d0 100644
--- a/tests/Fieldtypes/EntriesTest.php
+++ b/tests/Fieldtypes/EntriesTest.php
@@ -112,8 +112,7 @@ public function it_localizes_the_augmented_items_to_the_current_sites_locale_whe
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -132,8 +131,7 @@ public function it_localizes_the_augmented_item_to_the_current_sites_locale_when
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -253,8 +251,7 @@ public function it_localizes_the_shallow_augmented_items_to_the_current_sites_lo
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -288,8 +285,7 @@ public function it_localizes_the_shallow_augmented_item_to_the_current_sites_loc
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
diff --git a/tests/Fieldtypes/LabeledValueTests.php b/tests/Fieldtypes/LabeledValueTests.php
index 344f234aad3..91e05d8266e 100644
--- a/tests/Fieldtypes/LabeledValueTests.php
+++ b/tests/Fieldtypes/LabeledValueTests.php
@@ -248,6 +248,7 @@ public function it_augments_to_a_LabeledValue_object_with_boolean_casting_and_a_
 
     /**
      * @test
+     *
      * @dataProvider noOptionsProvider
      **/
     public function it_augments_to_a_LabeledValue_object_with_no_options($options)
diff --git a/tests/Fieldtypes/MultipleLabeledValueTests.php b/tests/Fieldtypes/MultipleLabeledValueTests.php
index 56d38480e54..cce27d59094 100644
--- a/tests/Fieldtypes/MultipleLabeledValueTests.php
+++ b/tests/Fieldtypes/MultipleLabeledValueTests.php
@@ -129,6 +129,7 @@ public function it_augments_multiple_enabled_to_an_array_of_LabeledValue_equival
 
     /**
      * @test
+     *
      * @dataProvider noMultipleOptionsProvider
      */
     public function it_augments_multiple_enabled_to_an_array_of_LabeledValue_equivalents_with_no_options($options)
diff --git a/tests/Fieldtypes/TermsTest.php b/tests/Fieldtypes/TermsTest.php
index 73a71269a89..7816ed4e208 100644
--- a/tests/Fieldtypes/TermsTest.php
+++ b/tests/Fieldtypes/TermsTest.php
@@ -125,8 +125,7 @@ public function it_localizes_the_augmented_items_to_the_current_sites_locale_whe
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -143,8 +142,7 @@ public function it_localizes_the_augmented_item_to_the_current_sites_locale_when
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -270,8 +268,7 @@ public function it_localizes_the_shallow_augmented_items_to_the_current_sites_lo
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -304,8 +301,7 @@ public function it_localizes_the_shallow_augmented_item_to_the_current_sites_loc
     {
         Site::setCurrent('fr');
 
-        $parent = new class
-        {
+        $parent = new class {
             // Class does not implement "Localizable"
         };
 
@@ -336,6 +332,7 @@ public function it_localizes_the_shallow_augmented_item_to_the_current_sites_loc
 
     /**
      * @test
+     *
      * @dataProvider collectionAttachmentProvider
      **/
     public function it_attaches_collection_during_augmentation($expectCollection, $parentIsEntry, $handle, $isRootLevel, $collectionUsesTaxonomy)
@@ -352,8 +349,7 @@ public function it_attaches_collection_during_augmentation($expectCollection, $p
         if ($parentIsEntry) {
             $parent = EntryFactory::id('parent')->collection('blog')->slug('theparent')->locale('fr')->create();
         } else {
-            $parent = new class
-            {
+            $parent = new class {
                 // Class does not implement "Localizable"
             };
         }
diff --git a/tests/Fieldtypes/TextTest.php b/tests/Fieldtypes/TextTest.php
index ddd05d85530..f3a9f8297db 100644
--- a/tests/Fieldtypes/TextTest.php
+++ b/tests/Fieldtypes/TextTest.php
@@ -10,6 +10,7 @@ class TextTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider processValues
      **/
     public function it_processes_values($mode, $values)
diff --git a/tests/Filesystem/FilesystemAdapterTests.php b/tests/Filesystem/FilesystemAdapterTests.php
index 9119302d7d4..0a5e6552999 100644
--- a/tests/Filesystem/FilesystemAdapterTests.php
+++ b/tests/Filesystem/FilesystemAdapterTests.php
@@ -299,14 +299,14 @@ public function gets_files_by_type()
         );
 
         $this->assertArraysHaveSameValues(
-             ['image.jpg', 'image2.jpg', 'docs/photo.jpg'],
+            ['image.jpg', 'image2.jpg', 'docs/photo.jpg'],
             $this->adapter->getFilesByType('/', 'jpg', true)->all()
         );
 
         $files = $this->adapter->getFilesByTypeRecursively('/', 'jpg');
         $this->assertInstanceOf(FileCollection::class, $files);
         $this->assertArraysHaveSameValues(
-             ['image.jpg', 'image2.jpg', 'docs/photo.jpg'],
+            ['image.jpg', 'image2.jpg', 'docs/photo.jpg'],
             $files->all()
         );
     }
diff --git a/tests/Forms/EmailTest.php b/tests/Forms/EmailTest.php
index b3c8dd3bb6a..b942bc9ec7c 100644
--- a/tests/Forms/EmailTest.php
+++ b/tests/Forms/EmailTest.php
@@ -19,6 +19,7 @@ class EmailTest extends TestCase
 
     /**
      * @test
+     *
      * @dataProvider multipleAddressProvider
      */
     public function it_adds_recipient_from_the_config($address, $expected)
@@ -30,6 +31,7 @@ public function it_adds_recipient_from_the_config($address, $expected)
 
     /**
      * @test
+     *
      * @dataProvider singleAddressProvider
      */
     public function it_adds_sender_from_the_config($address, $expected)
@@ -41,6 +43,7 @@ public function it_adds_sender_from_the_config($address, $expected)
 
     /**
      * @test
+     *
      * @dataProvider multipleAddressProvider
      */
     public function it_adds_reply_to_from_the_config($address, $expected)
@@ -52,6 +55,7 @@ public function it_adds_reply_to_from_the_config($address, $expected)
 
     /**
      * @test
+     *
      * @dataProvider multipleAddressProvider
      */
     public function it_adds_cc_from_the_config($address, $expected)
@@ -63,6 +67,7 @@ public function it_adds_cc_from_the_config($address, $expected)
 
     /**
      * @test
+     *
      * @dataProvider multipleAddressProvider
      */
     public function it_adds_bcc_from_the_config($address, $expected)
diff --git a/tests/Forms/SendEmailsTest.php b/tests/Forms/SendEmailsTest.php
index 9719da558b6..4acf0c5323c 100644
--- a/tests/Forms/SendEmailsTest.php
+++ b/tests/Forms/SendEmailsTest.php
@@ -100,6 +100,7 @@ public function it_queues_email_jobs_when_config_contains_single_email()
 
     /**
      * @test
+     *
      * @dataProvider noEmailsProvider
      */
     public function no_email_jobs_are_queued_if_none_are_configured($emailConfig)
diff --git a/tests/FrontendTest.php b/tests/FrontendTest.php
index b4ab5ee2ef9..1535db50978 100644
--- a/tests/FrontendTest.php
+++ b/tests/FrontendTest.php
@@ -767,6 +767,7 @@ public function home_page_is_not_overridden_by_entries_in_another_structured_col
 
     /**
      * @test
+     *
      * @dataProvider redirectProvider
      */
     public function redirect_is_followed($dataValue, $augmentedValue, $expectedStatus, $expectedLocation)
diff --git a/tests/Git/GitProcessTest.php b/tests/Git/GitProcessTest.php
index e49aa3d749b..46127e5312c 100644
--- a/tests/Git/GitProcessTest.php
+++ b/tests/Git/GitProcessTest.php
@@ -36,6 +36,7 @@ public function tearDown(): void
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_git_root()
@@ -58,6 +59,7 @@ public function it_can_get_git_root()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_check_if_folder_is_in_git_repo()
@@ -74,6 +76,7 @@ public function it_can_check_if_folder_is_in_git_repo()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_git_status_of_parent_repo()
@@ -97,6 +100,7 @@ public function it_can_get_git_status_of_parent_repo()
 
     /**
      * @group integration
+     *
      * @test
      */
     public function it_can_get_git_status_of_specific_sub_paths()
diff --git a/tests/Http/Middleware/AddViewPathsTest.php b/tests/Http/Middleware/AddViewPathsTest.php
index b2230e53434..10cd56f502e 100644
--- a/tests/Http/Middleware/AddViewPathsTest.php
+++ b/tests/Http/Middleware/AddViewPathsTest.php
@@ -14,6 +14,7 @@ class AddViewPathsTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider viewPathProvider
      */
     public function adds_view_paths($isAmpEnabled, $requestUrl, $expectedPaths)
@@ -48,6 +49,7 @@ public function adds_view_paths($isAmpEnabled, $requestUrl, $expectedPaths)
 
     /**
      * @test
+     *
      * @dataProvider namespacedViewPathProvider
      */
     public function adds_namespaced_view_paths($requestUrl, $expectedPaths)
diff --git a/tests/Imaging/GlideImageManipulatorTest.php b/tests/Imaging/GlideImageManipulatorTest.php
index 9e12188411c..d4aa8682e0b 100644
--- a/tests/Imaging/GlideImageManipulatorTest.php
+++ b/tests/Imaging/GlideImageManipulatorTest.php
@@ -31,6 +31,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @dataProvider paramProvider
      */
     public function adds_standard_api_params($param)
@@ -41,6 +42,7 @@ public function adds_standard_api_params($param)
 
     /**
      * @test
+     *
      * @dataProvider paramProvider
      */
     public function adds_standard_api_params_using_magic_method($param)
@@ -100,6 +102,7 @@ public function cannot_add_invalid_glide_param_using_magic_method()
 
     /**
      * @test
+     *
      * @dataProvider aliasProvider
      */
     public function testAddsParamsUsingAliases($alias, $value, $expected)
diff --git a/tests/Imaging/ImageGeneratorTest.php b/tests/Imaging/ImageGeneratorTest.php
index e113cb32ef8..0d30adfc60d 100644
--- a/tests/Imaging/ImageGeneratorTest.php
+++ b/tests/Imaging/ImageGeneratorTest.php
@@ -263,6 +263,7 @@ public function the_watermark_disk_is_a_local_adapter_when_a_path_is_provided()
 
     /**
      * @test
+     *
      * @dataProvider guzzleWatermarkProvider
      */
     public function the_watermark_disk_is_a_guzzle_adapter_when_a_url_is_provided($protocol)
diff --git a/tests/Listeners/UpdateAssetReferencesTest.php b/tests/Listeners/UpdateAssetReferencesTest.php
index acbba886dd2..55b19945a7d 100644
--- a/tests/Listeners/UpdateAssetReferencesTest.php
+++ b/tests/Listeners/UpdateAssetReferencesTest.php
@@ -315,6 +315,7 @@ public function it_nullifies_references_when_deleting_an_asset()
 
     /**
      * @test
+     *
      * @environment-setup disableUpdateReferences
      **/
     public function it_can_be_disabled()
diff --git a/tests/Listeners/UpdateTermReferencesTest.php b/tests/Listeners/UpdateTermReferencesTest.php
index 19b64d0edf2..9178bebc6c0 100644
--- a/tests/Listeners/UpdateTermReferencesTest.php
+++ b/tests/Listeners/UpdateTermReferencesTest.php
@@ -292,6 +292,7 @@ public function it_nullifies_references_when_deleting_a_scoped_term()
 
     /**
      * @test
+     *
      * @environment-setup disableUpdateReferences
      **/
     public function it_can_be_disabled()
diff --git a/tests/MiscTest.php b/tests/MiscTest.php
index fe5de10f23c..c84c97982fc 100644
--- a/tests/MiscTest.php
+++ b/tests/MiscTest.php
@@ -15,6 +15,7 @@ class MiscTest extends TestCase
 
     /**
      * @test
+     *
      * @dataProvider localesTagTestProvider
      *
      * @see https://github.com/statamic/cms/issues/4839
diff --git a/tests/Modifiers/BackgroundPositionTest.php b/tests/Modifiers/BackgroundPositionTest.php
index 6cea6621f12..bb9ab7f1e71 100644
--- a/tests/Modifiers/BackgroundPositionTest.php
+++ b/tests/Modifiers/BackgroundPositionTest.php
@@ -24,6 +24,7 @@ public function backgroundPositions(): array
 
     /**
      * @test
+     *
      * @dataProvider backgroundPositions
      */
     public function it_converts_a_focus_point_into_css_compatible_percent_value($expected, $input): void
diff --git a/tests/Modifiers/CamelizeTest.php b/tests/Modifiers/CamelizeTest.php
index 7563920bafa..8b7fdf980bb 100644
--- a/tests/Modifiers/CamelizeTest.php
+++ b/tests/Modifiers/CamelizeTest.php
@@ -20,6 +20,7 @@ public function camelFarm(): array
 
     /**
      * @test
+     *
      * @dataProvider camelFarm
      */
     public function it_camelizes_underscores($expected, $input): void
diff --git a/tests/Modifiers/CeilTest.php b/tests/Modifiers/CeilTest.php
index aa8f7ef8501..80ecefb14fc 100644
--- a/tests/Modifiers/CeilTest.php
+++ b/tests/Modifiers/CeilTest.php
@@ -24,6 +24,7 @@ public function numbersPool(): array
 
     /**
      * @test
+     *
      * @dataProvider numbersPool
      */
     public function it_rounds_a_number_up_to_next_whole_number($expected, $input): void
diff --git a/tests/Modifiers/CollapseWhitespaceTest.php b/tests/Modifiers/CollapseWhitespaceTest.php
index 3cd354b78d7..4a976e76087 100644
--- a/tests/Modifiers/CollapseWhitespaceTest.php
+++ b/tests/Modifiers/CollapseWhitespaceTest.php
@@ -21,6 +21,7 @@ public function stringsWithWeirdWhitespaces(): array
 
     /**
      * @test
+     *
      * @dataProvider stringsWithWeirdWhitespaces
      */
     public function it_collapses_whitespaces($expected, $input): void
diff --git a/tests/Modifiers/CountTest.php b/tests/Modifiers/CountTest.php
index b1bbf2a82b6..01590bd9fd0 100644
--- a/tests/Modifiers/CountTest.php
+++ b/tests/Modifiers/CountTest.php
@@ -19,6 +19,7 @@ public function arraysToCount(): array
 
     /**
      * @test
+     *
      * @dataProvider arraysToCount
      */
     public function it_counts_number_of_items_in_array($expected, $input): void
diff --git a/tests/Modifiers/DashifyTest.php b/tests/Modifiers/DashifyTest.php
index 417a59fd090..9a5ba98d996 100644
--- a/tests/Modifiers/DashifyTest.php
+++ b/tests/Modifiers/DashifyTest.php
@@ -19,6 +19,7 @@ public function undashyThings(): array
 
     /**
      * @test
+     *
      * @dataProvider undashyThings
      */
     public function it_returns_a_lowercase_and_trimmed_string_separated_by_dashes($expected, $input): void
diff --git a/tests/Modifiers/DecodeTest.php b/tests/Modifiers/DecodeTest.php
index e1af7c08221..67a8a3aa954 100644
--- a/tests/Modifiers/DecodeTest.php
+++ b/tests/Modifiers/DecodeTest.php
@@ -16,6 +16,7 @@ public function undecoded(): array
 
     /**
      * @test
+     *
      * @dataProvider undecoded
      */
     public function it_converts_all_html_entities_to_applicable_chars($expected, $input): void
diff --git a/tests/Modifiers/DeslugifyTest.php b/tests/Modifiers/DeslugifyTest.php
index b348dff1164..6e74cb2074c 100644
--- a/tests/Modifiers/DeslugifyTest.php
+++ b/tests/Modifiers/DeslugifyTest.php
@@ -17,6 +17,7 @@ public function slackingSlugs(): array
 
     /**
      * @test
+     *
      * @dataProvider slackingSlugs
      */
     public function it_replaces_all_hyphens_and_underscores_with_spaces($expected, $input): void
diff --git a/tests/Modifiers/EntitiesTest.php b/tests/Modifiers/EntitiesTest.php
index a2bd4207b80..5871414ed6f 100644
--- a/tests/Modifiers/EntitiesTest.php
+++ b/tests/Modifiers/EntitiesTest.php
@@ -16,6 +16,7 @@ public function entityDataProvider(): array
 
     /**
      * @test
+     *
      * @dataProvider entityDataProvider
      */
     public function it_encodes_html_entities($expected, $input): void
diff --git a/tests/Modifiers/ExtensionTest.php b/tests/Modifiers/ExtensionTest.php
index 12502728fa3..59bab4e97ab 100644
--- a/tests/Modifiers/ExtensionTest.php
+++ b/tests/Modifiers/ExtensionTest.php
@@ -19,6 +19,7 @@ public function filenames(): array
 
     /**
      * @test
+     *
      * @dataProvider filenames
      */
     public function it_returns_the_extension_of_filename($expected, $input): void
diff --git a/tests/Modifiers/FirstTest.php b/tests/Modifiers/FirstTest.php
index d9ade6d7bd1..f2b71c487f1 100644
--- a/tests/Modifiers/FirstTest.php
+++ b/tests/Modifiers/FirstTest.php
@@ -9,6 +9,7 @@ class FirstTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider stringProvider
      */
     public function it_gets_the_first_n_characters_of_a_string($arg, $expected)
@@ -26,6 +27,7 @@ public function stringProvider()
 
     /**
      * @test
+     *
      * @dataProvider arrayProvider
      */
     public function it_gets_the_first_value_of_an_array($value, $expected)
diff --git a/tests/Modifiers/FloorTest.php b/tests/Modifiers/FloorTest.php
index aa6771e52e1..a6a737b653e 100644
--- a/tests/Modifiers/FloorTest.php
+++ b/tests/Modifiers/FloorTest.php
@@ -24,6 +24,7 @@ public function numbersPool(): array
 
     /**
      * @test
+     *
      * @dataProvider numbersPool
      */
     public function it_rounds_a_number_down_to_next_whole_number($expected, $input): void
diff --git a/tests/Modifiers/HasLowerCaseTest.php b/tests/Modifiers/HasLowerCaseTest.php
index 6394cde6eae..d23b8dc9046 100644
--- a/tests/Modifiers/HasLowerCaseTest.php
+++ b/tests/Modifiers/HasLowerCaseTest.php
@@ -18,6 +18,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_the_string_has_lowercase_char_false_if_does_not($expected, $input): void
diff --git a/tests/Modifiers/HasUpperCaseTest.php b/tests/Modifiers/HasUpperCaseTest.php
index 018154883f2..5b5f5a2714e 100644
--- a/tests/Modifiers/HasUpperCaseTest.php
+++ b/tests/Modifiers/HasUpperCaseTest.php
@@ -19,6 +19,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_the_string_has_uppercase_char_false_if_does_not($expected, $input): void
diff --git a/tests/Modifiers/IsAlphaTest.php b/tests/Modifiers/IsAlphaTest.php
index b0c01ca41b1..69c20a42371 100644
--- a/tests/Modifiers/IsAlphaTest.php
+++ b/tests/Modifiers/IsAlphaTest.php
@@ -21,6 +21,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_the_string_contains_only_alphabetical_chars($expected, $input): void
diff --git a/tests/Modifiers/IsAlphanumericTest.php b/tests/Modifiers/IsAlphanumericTest.php
index 0c0508610c8..c31a0c5b1ba 100644
--- a/tests/Modifiers/IsAlphanumericTest.php
+++ b/tests/Modifiers/IsAlphanumericTest.php
@@ -21,6 +21,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_the_string_contains_only_alphanumeric_chars($expected, $input): void
diff --git a/tests/Modifiers/IsArrayTest.php b/tests/Modifiers/IsArrayTest.php
index 954017851ce..8b54011bd56 100644
--- a/tests/Modifiers/IsArrayTest.php
+++ b/tests/Modifiers/IsArrayTest.php
@@ -21,6 +21,7 @@ public function array(): array
 
     /**
      * @test
+     *
      * @dataProvider array
      */
     public function it_returns_true_if_value_is_array($expected, $input): void
diff --git a/tests/Modifiers/IsEmailTest.php b/tests/Modifiers/IsEmailTest.php
index 4645b1ec334..5e6af4239b6 100644
--- a/tests/Modifiers/IsEmailTest.php
+++ b/tests/Modifiers/IsEmailTest.php
@@ -17,6 +17,7 @@ public function emails(): array
 
     /**
      * @test
+     *
      * @dataProvider emails
      */
     public function it_returns_true_if_the_string_is_a_valid_email_address($expected, $input): void
diff --git a/tests/Modifiers/IsEmbeddableTest.php b/tests/Modifiers/IsEmbeddableTest.php
index bb006af32cf..b32975a330b 100644
--- a/tests/Modifiers/IsEmbeddableTest.php
+++ b/tests/Modifiers/IsEmbeddableTest.php
@@ -19,6 +19,7 @@ public function embeddables(): array
 
     /**
      * @test
+     *
      * @dataProvider embeddables
      */
     public function it_checks_if_an_url_is_embeddable($expected, $input): void
diff --git a/tests/Modifiers/IsFutureTest.php b/tests/Modifiers/IsFutureTest.php
index 10bbb4c849f..b150c2f11da 100644
--- a/tests/Modifiers/IsFutureTest.php
+++ b/tests/Modifiers/IsFutureTest.php
@@ -26,6 +26,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_future($expected, $input): void
diff --git a/tests/Modifiers/IsIterableTest.php b/tests/Modifiers/IsIterableTest.php
index 32a387da75d..3731177590d 100644
--- a/tests/Modifiers/IsIterableTest.php
+++ b/tests/Modifiers/IsIterableTest.php
@@ -20,6 +20,7 @@ public function iterables(): array
 
     /**
      * @test
+     *
      * @dataProvider iterables
      */
     public function it_returns_true_if_input_is_iterable($expected, $input): void
diff --git a/tests/Modifiers/IsJsonTest.php b/tests/Modifiers/IsJsonTest.php
index 2b0d51338e1..e33284dd325 100644
--- a/tests/Modifiers/IsJsonTest.php
+++ b/tests/Modifiers/IsJsonTest.php
@@ -18,6 +18,7 @@ public function bourneJsonBourne(): array
 
     /**
      * @test
+     *
      * @dataProvider bourneJsonBourne
      */
     public function it_returns_true_if_string_is_valid_json($expected, $input): void
diff --git a/tests/Modifiers/IsLowercaseTest.php b/tests/Modifiers/IsLowercaseTest.php
index fe900c2fe98..4e5abe0c5e0 100644
--- a/tests/Modifiers/IsLowercaseTest.php
+++ b/tests/Modifiers/IsLowercaseTest.php
@@ -20,6 +20,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_string_has_only_lowercase_chars($expected, $input): void
diff --git a/tests/Modifiers/IsNumberwangTest.php b/tests/Modifiers/IsNumberwangTest.php
index 66e9f557b97..f3754716033 100644
--- a/tests/Modifiers/IsNumberwangTest.php
+++ b/tests/Modifiers/IsNumberwangTest.php
@@ -27,6 +27,7 @@ public function numbers(): array
 
     /**
      * @test
+     *
      * @dataProvider numbers
      */
     public function is_it_or_is_not_numberwang($expected, $input): void
diff --git a/tests/Modifiers/IsNumericTest.php b/tests/Modifiers/IsNumericTest.php
index e952d061257..a80831b4e61 100644
--- a/tests/Modifiers/IsNumericTest.php
+++ b/tests/Modifiers/IsNumericTest.php
@@ -18,6 +18,7 @@ public function numbers(): array
 
     /**
      * @test
+     *
      * @dataProvider numbers
      */
     public function it_returns_true_if_value_is_number_or_numeric_string($expected, $input): void
diff --git a/tests/Modifiers/IsPastTest.php b/tests/Modifiers/IsPastTest.php
index 02c15e95818..881aedd8d59 100644
--- a/tests/Modifiers/IsPastTest.php
+++ b/tests/Modifiers/IsPastTest.php
@@ -26,6 +26,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_past($expected, $input): void
diff --git a/tests/Modifiers/IsTodayTest.php b/tests/Modifiers/IsTodayTest.php
index b6fef882a11..0a876583bcc 100644
--- a/tests/Modifiers/IsTodayTest.php
+++ b/tests/Modifiers/IsTodayTest.php
@@ -27,6 +27,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_today($expected, $input): void
diff --git a/tests/Modifiers/IsTomorrowTest.php b/tests/Modifiers/IsTomorrowTest.php
index b3a8113ce3e..1264cb530d9 100644
--- a/tests/Modifiers/IsTomorrowTest.php
+++ b/tests/Modifiers/IsTomorrowTest.php
@@ -27,6 +27,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_tomorrow($expected, $input): void
diff --git a/tests/Modifiers/IsUppercaseTest.php b/tests/Modifiers/IsUppercaseTest.php
index bd18a2a6723..dfa94c91ff8 100644
--- a/tests/Modifiers/IsUppercaseTest.php
+++ b/tests/Modifiers/IsUppercaseTest.php
@@ -20,6 +20,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_returns_true_if_string_has_only_uppercase_chars($expected, $input): void
diff --git a/tests/Modifiers/IsUrlTest.php b/tests/Modifiers/IsUrlTest.php
index 3233d36d590..04a9a668d4b 100644
--- a/tests/Modifiers/IsUrlTest.php
+++ b/tests/Modifiers/IsUrlTest.php
@@ -21,6 +21,7 @@ public function urls(): array
 
     /**
      * @test
+     *
      * @dataProvider urls()
      */
     public function it_returns_true_if_value_is_valid_url($expected, $input): void
diff --git a/tests/Modifiers/IsWeekdayTest.php b/tests/Modifiers/IsWeekdayTest.php
index 90954bb2470..644ea9e2259 100644
--- a/tests/Modifiers/IsWeekdayTest.php
+++ b/tests/Modifiers/IsWeekdayTest.php
@@ -21,6 +21,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_weekday($expected, $input): void
diff --git a/tests/Modifiers/IsWeekendTest.php b/tests/Modifiers/IsWeekendTest.php
index 3f2458c6933..839d4d20288 100644
--- a/tests/Modifiers/IsWeekendTest.php
+++ b/tests/Modifiers/IsWeekendTest.php
@@ -21,6 +21,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_weekend($expected, $input): void
diff --git a/tests/Modifiers/IsYesterdayTest.php b/tests/Modifiers/IsYesterdayTest.php
index 17c43243e28..f84d9fa5bc0 100644
--- a/tests/Modifiers/IsYesterdayTest.php
+++ b/tests/Modifiers/IsYesterdayTest.php
@@ -27,6 +27,7 @@ public function dates(): array
 
     /**
      * @test
+     *
      * @dataProvider dates
      */
     public function it_returns_true_if_date_is_yesterday($expected, $input): void
diff --git a/tests/Modifiers/KebabTest.php b/tests/Modifiers/KebabTest.php
index 4b2dbe0773f..eb6122cefa5 100644
--- a/tests/Modifiers/KebabTest.php
+++ b/tests/Modifiers/KebabTest.php
@@ -19,6 +19,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_converts_the_value_to_kebab_case($expected, $input): void
diff --git a/tests/Modifiers/LastTest.php b/tests/Modifiers/LastTest.php
index ee523310409..686c6d9db17 100644
--- a/tests/Modifiers/LastTest.php
+++ b/tests/Modifiers/LastTest.php
@@ -9,6 +9,7 @@ class LastTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider stringProvider
      */
     public function it_gets_the_last_n_characters_of_a_string($arg, $expected)
@@ -27,6 +28,7 @@ public function stringProvider()
 
     /**
      * @test
+     *
      * @dataProvider arrayProvider
      */
     public function it_gets_the_last_value_of_an_array($value, $expected)
diff --git a/tests/Modifiers/Nl2brTest.php b/tests/Modifiers/Nl2brTest.php
index aa9e74a1318..a77ffe41d7b 100644
--- a/tests/Modifiers/Nl2brTest.php
+++ b/tests/Modifiers/Nl2brTest.php
@@ -17,6 +17,7 @@ public function strings(): array
 
     /**
      * @test
+     *
      * @dataProvider strings
      */
     public function it_replaces_linebreaks_with_br_tags($expected, $input): void
diff --git a/tests/Modifiers/PluralTest.php b/tests/Modifiers/PluralTest.php
index e47f43009f6..39425097a46 100644
--- a/tests/Modifiers/PluralTest.php
+++ b/tests/Modifiers/PluralTest.php
@@ -21,6 +21,7 @@ public function shoppingList()
 
     /**
      * @test
+     *
      * @dataProvider shoppingList
      */
     public function it_returns_the_plural_form_of_an_english_word_from_context($expected, $input): void
diff --git a/tests/Modifiers/ReverseTest.php b/tests/Modifiers/ReverseTest.php
index 98fa4e78739..39935e63816 100644
--- a/tests/Modifiers/ReverseTest.php
+++ b/tests/Modifiers/ReverseTest.php
@@ -11,6 +11,7 @@ class ReverseTest extends TestCase
 {
     /**
      * @test
+     *
      * @group array
      */
     public function it_reverses_the_items_of_an_array(): void
@@ -33,6 +34,7 @@ public function it_reverses_the_items_of_an_array(): void
 
     /**
      * @test
+     *
      * @group array
      */
     public function it_reverses_the_items_of_a_collection(): void
diff --git a/tests/Modifiers/SetQueryParamTest.php b/tests/Modifiers/SetQueryParamTest.php
index b11d1254aec..4e6d05fc459 100644
--- a/tests/Modifiers/SetQueryParamTest.php
+++ b/tests/Modifiers/SetQueryParamTest.php
@@ -23,6 +23,7 @@ public function existingQueryParametersProvider()
 
     /**
      * @test
+     *
      * @dataProvider existingQueryParametersProvider
      */
     public function it_updates_an_existing_query_param($expected, $input, array $queryParam = [])
@@ -45,6 +46,7 @@ public function nonExistingQueryParametersProvider()
 
     /**
      * @test
+     *
      * @dataProvider nonExistingQueryParametersProvider
      */
     public function it_adds_a_non_existant_query_param($expected, $input, array $queryParam = [])
diff --git a/tests/Modifiers/ShuffleTest.php b/tests/Modifiers/ShuffleTest.php
index 60f50a7b679..00d52288990 100644
--- a/tests/Modifiers/ShuffleTest.php
+++ b/tests/Modifiers/ShuffleTest.php
@@ -12,6 +12,7 @@ class ShuffleTest extends TestCase
 {
     /**
      * @test
+     *
      * @group array
      */
     public function it_shuffles_the_items_of_an_array(): void
@@ -28,6 +29,7 @@ public function it_shuffles_the_items_of_an_array(): void
 
     /**
      * @test
+     *
      * @group array
      */
     public function it_shuffles_the_items_of_a_collection(): void
diff --git a/tests/Modifiers/SingularTest.php b/tests/Modifiers/SingularTest.php
index 321f02e1da2..cad7d09c6b4 100644
--- a/tests/Modifiers/SingularTest.php
+++ b/tests/Modifiers/SingularTest.php
@@ -18,6 +18,7 @@ public function pluralWords(): array
 
     /**
      * @test
+     *
      * @dataProvider pluralWords
      */
     public function it_returns_the_singular_word_of_an_english_word($expected, $input): void
diff --git a/tests/Modifiers/SlugifyTest.php b/tests/Modifiers/SlugifyTest.php
index 6706a96580d..c65f37f1b8c 100644
--- a/tests/Modifiers/SlugifyTest.php
+++ b/tests/Modifiers/SlugifyTest.php
@@ -16,6 +16,7 @@ public function wordsDontComeEasyToMe(): array
 
     /**
      * @test
+     *
      * @dataProvider wordsDontComeEasyToMe
      */
     public function it_converts_the_string_to_an_url_slug($expected, $input): void
diff --git a/tests/Modifiers/SmartypantsTest.php b/tests/Modifiers/SmartypantsTest.php
index 1b6ccd4a66c..7d1da2e7b01 100644
--- a/tests/Modifiers/SmartypantsTest.php
+++ b/tests/Modifiers/SmartypantsTest.php
@@ -19,6 +19,7 @@ public function dumbChars(): array
 
     /**
      * @test
+     *
      * @dataProvider dumbChars
      */
     public function it_translates_plain_ascii_chars_into_smart_punctuation($expected, $input): void
diff --git a/tests/Modifiers/SnakeTest.php b/tests/Modifiers/SnakeTest.php
index 45de09e5f94..f477e28b559 100644
--- a/tests/Modifiers/SnakeTest.php
+++ b/tests/Modifiers/SnakeTest.php
@@ -17,6 +17,7 @@ public function raidersOfTheLostArk(): array
 
     /**
      * @test
+     *
      * @dataProvider raidersOfTheLostArk
      */
     public function it_converts_a_string_into_snake_case($expected, $input): void
diff --git a/tests/Modifiers/SpacelessTest.php b/tests/Modifiers/SpacelessTest.php
index 842b10bd1c6..46b321bfebb 100644
--- a/tests/Modifiers/SpacelessTest.php
+++ b/tests/Modifiers/SpacelessTest.php
@@ -21,6 +21,7 @@ public function stringsWithSpaces(): array
 
     /**
      * @test
+     *
      * @dataProvider stringsWithSpaces
      */
     public function it_removes_excess_whitespace_and_linebreaks_from_string($expected, $input): void
diff --git a/tests/Modifiers/StrPadBothTest.php b/tests/Modifiers/StrPadBothTest.php
index d0bdff82e59..82bcb04b049 100644
--- a/tests/Modifiers/StrPadBothTest.php
+++ b/tests/Modifiers/StrPadBothTest.php
@@ -18,6 +18,7 @@ public function paddington(): array
 
     /**
      * @test
+     *
      * @dataProvider paddington
      */
     public function it_pads_a_string(string $expected, string $input, array $params): void
diff --git a/tests/Modifiers/StrPadLeftTest.php b/tests/Modifiers/StrPadLeftTest.php
index a43350b1c3b..889537bd176 100644
--- a/tests/Modifiers/StrPadLeftTest.php
+++ b/tests/Modifiers/StrPadLeftTest.php
@@ -18,6 +18,7 @@ public function paddington(): array
 
     /**
      * @test
+     *
      * @dataProvider paddington
      */
     public function it_pads_a_string(string $expected, string $input, array $params): void
diff --git a/tests/Modifiers/StrPadRightTest.php b/tests/Modifiers/StrPadRightTest.php
index f1911f2f59f..90a7cd1182a 100644
--- a/tests/Modifiers/StrPadRightTest.php
+++ b/tests/Modifiers/StrPadRightTest.php
@@ -18,6 +18,7 @@ public function paddington(): array
 
     /**
      * @test
+     *
      * @dataProvider paddington
      */
     public function it_pads_a_string(string $expected, string $input, array $params): void
diff --git a/tests/Modifiers/StrPadTest.php b/tests/Modifiers/StrPadTest.php
index 381b6ed9fa6..d430593a52c 100644
--- a/tests/Modifiers/StrPadTest.php
+++ b/tests/Modifiers/StrPadTest.php
@@ -20,6 +20,7 @@ public function paddington(): array
 
     /**
      * @test
+     *
      * @dataProvider paddington
      */
     public function it_pads_a_string(string $expected, string $input, array $params): void
diff --git a/tests/Modifiers/SumTest.php b/tests/Modifiers/SumTest.php
index 05899580e8e..bc4031641f8 100644
--- a/tests/Modifiers/SumTest.php
+++ b/tests/Modifiers/SumTest.php
@@ -13,6 +13,7 @@ class SumTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider sums
      **/
     public function it_sums($sum, $key, $array)
diff --git a/tests/Query/OrderByTest.php b/tests/Query/OrderByTest.php
index 4d3651b343a..ffc8ff8ac1c 100644
--- a/tests/Query/OrderByTest.php
+++ b/tests/Query/OrderByTest.php
@@ -9,6 +9,7 @@ class OrderByTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider parseProvider
      **/
     public function it_parses_string($string, $sort, $dir)
diff --git a/tests/Query/ResolveValueTest.php b/tests/Query/ResolveValueTest.php
index 3de0465a274..8f1fbbc4fed 100644
--- a/tests/Query/ResolveValueTest.php
+++ b/tests/Query/ResolveValueTest.php
@@ -11,6 +11,7 @@ class ResolveValueTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider resolvesValueProvider
      **/
     public function it_resolves_values($item, $field, $expected)
@@ -57,6 +58,7 @@ public function resolvesValueProvider()
 
     /**
      * @test
+     *
      * @dataProvider delegatesToClassProvider
      **/
     public function it_delegates_resolving_to_the_queryable_class($field, $expected)
diff --git a/tests/Routing/RoutesTest.php b/tests/Routing/RoutesTest.php
index de8f5f0be1e..69e0bba53b5 100644
--- a/tests/Routing/RoutesTest.php
+++ b/tests/Routing/RoutesTest.php
@@ -117,6 +117,7 @@ public function it_renders_a_view_with_custom_layout()
 
     /**
      * @test
+     *
      * @dataProvider undefinedLayoutRouteProvider
      **/
     public function it_renders_a_view_without_a_layout($route)
diff --git a/tests/Search/CombTest.php b/tests/Search/CombTest.php
index 2fab91e863b..c51a0658f6c 100644
--- a/tests/Search/CombTest.php
+++ b/tests/Search/CombTest.php
@@ -10,6 +10,7 @@ class CombTest extends TestCase
 {
     /**
      * @test
+     *
      * @dataProvider searchesProvider
      **/
     public function it_searches($term, $expected)
diff --git a/tests/StarterKits/ExportTest.php b/tests/StarterKits/ExportTest.php
index 07d8d221394..bb9fc072ef7 100644
--- a/tests/StarterKits/ExportTest.php
+++ b/tests/StarterKits/ExportTest.php
@@ -229,7 +229,7 @@ public function it_exports_all_dependencies_from_versionless_array()
 }
 
 EOT
-        , $this->files->get($this->exportPath('composer.json')));
+            , $this->files->get($this->exportPath('composer.json')));
     }
 
     /** @test */
@@ -474,7 +474,7 @@ public function it_exports_basic_composer_json_file()
 }
 
 EOT
-        , $this->files->get($this->exportPath('composer.json')));
+            , $this->files->get($this->exportPath('composer.json')));
     }
 
     /** @test */
@@ -508,7 +508,7 @@ public function it_uses_existing_composer_json_file()
 }
 
 EOT
-        , $this->files->get($this->exportPath('composer.json')));
+            , $this->files->get($this->exportPath('composer.json')));
     }
 
     private function exportPath($path = null)
diff --git a/tests/StatamicTest.php b/tests/StatamicTest.php
index 3c1b3188999..46b0105bbd3 100644
--- a/tests/StatamicTest.php
+++ b/tests/StatamicTest.php
@@ -86,6 +86,7 @@ public function it_appends_time_if_system_date_format_doesnt_have_time_in_it()
 
     /**
      * @test
+     *
      * @dataProvider formatsWithTime
      **/
     public function it_doesnt_append_time_if_system_date_format_already_has_time_in_it($format)
@@ -105,6 +106,7 @@ public function it_appends_time_if_cp_date_format_doesnt_have_time_in_it()
 
     /**
      * @test
+     *
      * @dataProvider formatsWithTime
      **/
     public function it_doesnt_append_time_if_cp_date_format_already_has_time_in_it($format)
@@ -258,7 +260,9 @@ public function assets_with_equal_names_will_be_cached_differently()
 
     /**
      * @test
+     *
      * @define-env customAssetUrl
+     *
      * @dataProvider cpAssetUrlProvider
      */
     public function it_gets_a_cp_asset_url($url, $expected)
@@ -276,7 +280,9 @@ public function cpAssetUrlProvider()
 
     /**
      * @test
+     *
      * @define-env customAssetUrl
+     *
      * @dataProvider vendorPackageAssetUrlProvider
      */
     public function it_gets_the_vendor_package_asset_url($arguments, $expected)
@@ -297,6 +303,7 @@ public function vendorPackageAssetUrlProvider()
 
     /**
      * @test
+     *
      * @define-env useFixtureTranslations
      **/
     public function it_makes_breadcrumbs()
diff --git a/tests/StaticCaching/HalfMeasureStaticCachingTest.php b/tests/StaticCaching/HalfMeasureStaticCachingTest.php
index c52dee61b93..ec9d82f04e4 100644
--- a/tests/StaticCaching/HalfMeasureStaticCachingTest.php
+++ b/tests/StaticCaching/HalfMeasureStaticCachingTest.php
@@ -317,6 +317,7 @@ public function bladeViewPaths($app)
 
     /**
      * @test
+     *
      * @define-env bladeViewPaths
      */
     public function it_can_keep_parts_dynamic_using_blade()
diff --git a/tests/Support/ArrTest.php b/tests/Support/ArrTest.php
index f21afa7a466..01fdce6a452 100644
--- a/tests/Support/ArrTest.php
+++ b/tests/Support/ArrTest.php
@@ -33,6 +33,7 @@ public function it_adds_scope_to_associative_array()
 
     /**
      * @test
+     *
      * @dataProvider multiDimensionalArrayScopeProvider
      */
     public function it_adds_scope_to_multidimensional_array($mapInto)
diff --git a/tests/Support/DateFormatTest.php b/tests/Support/DateFormatTest.php
index 72ada697199..c7ce5ad3093 100644
--- a/tests/Support/DateFormatTest.php
+++ b/tests/Support/DateFormatTest.php
@@ -15,6 +15,7 @@ public function it_has_conversions()
 
     /**
      * @test
+     *
      * @dataProvider formatProvider
      **/
     public function it_converts_from_php_to_iso($php, $iso)
diff --git a/tests/Tags/Concerns/RendersFormsTest.php b/tests/Tags/Concerns/RendersFormsTest.php
index 48aa2cce746..fe61e589da6 100644
--- a/tests/Tags/Concerns/RendersFormsTest.php
+++ b/tests/Tags/Concerns/RendersFormsTest.php
@@ -117,6 +117,7 @@ private function createField($type, $value, $default, $old, $config = [])
 
     /**
      * @test
+     *
      * @dataProvider renderTextProvider
      */
     public function renders_text_fields($value, $default, $old, $expected)
@@ -134,6 +135,7 @@ private function textFieldtypeTest($fieldtype, $value, $default, $old, $expected
 
     /**
      * @test
+     *
      * @dataProvider renderTextProvider
      */
     public function renders_fallback_fields_as_text_fields($value, $default, $old, $expected)
@@ -148,6 +150,7 @@ public function renders_fallback_fields_as_text_fields($value, $default, $old, $
 
     /**
      * @test
+     *
      * @dataProvider renderTextProvider
      */
     public function renders_textarea_fields($value, $default, $old, $expected)
@@ -181,6 +184,7 @@ public function renderTextProvider()
 
     /**
      * @test
+     *
      * @dataProvider renderToggleProvider
      */
     public function renders_toggles($value, $default, $old, $expected)
@@ -236,6 +240,7 @@ public function renderToggleProvider()
 
     /**
      * @test
+     *
      * @dataProvider renderSingleSelectProvider
      */
     public function renders_single_select_fields($value, $default, $old, $expected)
@@ -264,6 +269,7 @@ public function renders_single_select_fields($value, $default, $old, $expected)
 
     /**
      * @test
+     *
      * @dataProvider renderSingleSelectProvider
      */
     public function renders_radio_fields($value, $default, $old, $expected)
@@ -312,6 +318,7 @@ public function renderSingleSelectProvider()
 
     /**
      * @test
+     *
      * @dataProvider renderMultipleSelectProvider
      */
     public function renders_multiple_select_fields($value, $default, $old, $expected)
@@ -344,6 +351,7 @@ public function renders_multiple_select_fields($value, $default, $old, $expected
 
     /**
      * @test
+     *
      * @dataProvider renderMultipleSelectProvider
      */
     public function renders_checkboxes_fields($value, $default, $old, $expected)
diff --git a/tests/Tags/FluentTagTest.php b/tests/Tags/FluentTagTest.php
index e2e1c814d20..0e1757052f4 100644
--- a/tests/Tags/FluentTagTest.php
+++ b/tests/Tags/FluentTagTest.php
@@ -34,6 +34,7 @@ public function setUp(): void
 
     /**
      * @test
+     *
      * @dataProvider fluentTagProvider
      **/
     public function it_handles_params_fluently($usedTag, $expectedTagName, $expectedTag, $expectedTagMethod, $expectedClassMethod)
diff --git a/tests/Tags/Form/FormCreateTest.php b/tests/Tags/Form/FormCreateTest.php
index a7745834b1a..d64adedbe43 100644
--- a/tests/Tags/Form/FormCreateTest.php
+++ b/tests/Tags/Form/FormCreateTest.php
@@ -57,7 +57,7 @@ public function it_renders_form_dynamically_with_fields_array()
     {{ /fields }}
 {{ /form:contact }}
 EOT
-));
+        ));
 
         $this->assertStringContainsString('<label>Full Name</label><input type="text" name="name" value="">', $output);
         $this->assertStringContainsString('<label>Email Address</label><input type="email" name="email" value="" required>', $output);
diff --git a/tests/Tags/GetErrorsTest.php b/tests/Tags/GetErrorsTest.php
index 7f24e855629..483ac0e891f 100644
--- a/tests/Tags/GetErrorsTest.php
+++ b/tests/Tags/GetErrorsTest.php
@@ -16,6 +16,7 @@ private function tag($tag, $data = [])
 
     /**
      * @test
+     *
      * @dataProvider organizedProvider
      */
     public function it_gets_errors_organized_into_fields($params, $bag, $errors, $expected)
@@ -89,6 +90,7 @@ public function organizedProvider()
 
     /**
      * @test
+     *
      * @dataProvider allProvider
      */
     public function it_gets_errors_for_all_fields_together($params, $bag, $errors, $expected)
@@ -153,6 +155,7 @@ public function allProvider()
 
     /**
      * @test
+     *
      * @dataProvider fieldProvider
      */
     public function it_gets_errors_for_a_single_field($params, $bag, $errors, $expected)
diff --git a/tests/Tags/GlideTest.php b/tests/Tags/GlideTest.php
index 6c639ae50bd..ae4dff1b7bc 100644
--- a/tests/Tags/GlideTest.php
+++ b/tests/Tags/GlideTest.php
@@ -11,6 +11,7 @@ class GlideTest extends TestCase
 {
     /**
      * @test
+     *
      * @define-env relativeRouteUrl
      */
     public function it_outputs_a_relative_url_by_default_when_the_glide_route_is_relative()
@@ -24,6 +25,7 @@ public function it_outputs_a_relative_url_by_default_when_the_glide_route_is_rel
 
     /**
      * @test
+     *
      * @define-env absoluteHttpRouteUrl
      */
     public function it_outputs_an_absolute_url_by_default_when_the_glide_route_is_absolute_http()
@@ -37,6 +39,7 @@ public function it_outputs_an_absolute_url_by_default_when_the_glide_route_is_ab
 
     /**
      * @test
+     *
      * @define-env absoluteHttpsRouteUrl
      */
     public function it_outputs_an_absolute_url_by_default_when_the_glide_route_is_absolute_https()
diff --git a/tests/Tags/User/PasswordFormTest.php b/tests/Tags/User/PasswordFormTest.php
index 94074785fee..7d230265257 100644
--- a/tests/Tags/User/PasswordFormTest.php
+++ b/tests/Tags/User/PasswordFormTest.php
@@ -67,7 +67,7 @@ public function it_renders_form_with_fields_array()
     {{ /fields }}
 {{ /user:password_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
diff --git a/tests/Tags/User/ProfileFormTest.php b/tests/Tags/User/ProfileFormTest.php
index 6d3ffb50406..70a4e59d938 100644
--- a/tests/Tags/User/ProfileFormTest.php
+++ b/tests/Tags/User/ProfileFormTest.php
@@ -68,7 +68,7 @@ public function it_renders_form_with_fields_array()
     {{ /fields }}
 {{ /user:profile_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
@@ -96,7 +96,7 @@ public function it_renders_form_with_fields_array_and_custom_blueprint()
     {{ /fields }}
 {{ /user:profile_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
diff --git a/tests/Tags/User/RegisterFormTest.php b/tests/Tags/User/RegisterFormTest.php
index f2040c47bfc..ea373a5354e 100644
--- a/tests/Tags/User/RegisterFormTest.php
+++ b/tests/Tags/User/RegisterFormTest.php
@@ -62,7 +62,7 @@ public function it_renders_form_with_fields_array()
     {{ /fields }}
 {{ /user:register_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
@@ -88,7 +88,7 @@ public function it_renders_form_with_fields_array_and_custom_blueprint()
     {{ /fields }}
 {{ /user:register_form }}
 EOT
-));
+        ));
 
         preg_match_all('/<label>.+<\/label><input.+>/U', $output, $actual);
 
diff --git a/tests/Tokens/HandleTokenMiddlewareTest.php b/tests/Tokens/HandleTokenMiddlewareTest.php
index 504154f66bd..506ef9cc25a 100644
--- a/tests/Tokens/HandleTokenMiddlewareTest.php
+++ b/tests/Tokens/HandleTokenMiddlewareTest.php
@@ -23,6 +23,7 @@ private function request($paramToken, $headerToken)
 
     /**
      * @test
+     *
      * @dataProvider validTokenProvider
      **/
     public function it_should_handle_valid_tokens($paramToken, $headerToken)
@@ -55,6 +56,7 @@ public function validTokenProvider()
 
     /**
      * @test
+     *
      * @dataProvider invalidTokenProvider
      **/
     public function it_should_not_handle_invalid_tokens($paramToken, $headerToken)
diff --git a/tests/View/Antlers/ParserTests.php b/tests/View/Antlers/ParserTests.php
index 9b6f3c6177d..e72ac86a97b 100644
--- a/tests/View/Antlers/ParserTests.php
+++ b/tests/View/Antlers/ParserTests.php
@@ -1231,8 +1231,7 @@ public function it_doesnt_output_anything_if_object_cannot_be_cast_to_a_string()
         Log::shouldReceive('debug')->once()
             ->with('Cannot render an object variable as a string: {{ object }}');
 
-        $object = new class
-        {
+        $object = new class {
         };
 
         $this->assertEquals('', $this->renderString('{{ object }}', compact('object')));
@@ -1749,8 +1748,7 @@ public function it_can_reach_into_the_cascade()
             $m->shouldNotReceive('get')->with('augmented');
         });
 
-        $fieldtype = new class extends Fieldtype
-        {
+        $fieldtype = new class extends Fieldtype {
         };
         $augmented = new Value(['drink' => 'la croix'], 'augmented', $fieldtype);
 
@@ -2213,8 +2211,7 @@ public function when_a_loop_is_a_value_object_with_an_empty_array_it_get_parsed_
 after
 EOT;
         $this->assertEquals($expected, $this->renderString($template, [
-            'simple' => new Value([], null, new class extends \Statamic\Fieldtypes\Replicator
-            {
+            'simple' => new Value([], null, new class extends \Statamic\Fieldtypes\Replicator {
             }),
         ]));
     }
@@ -2427,6 +2424,7 @@ public function it_loops_over_values_instances()
 
     /**
      * @test
+     *
      * @dataProvider objectInConditionProvider
      */
     public function it_uses_entries_as_conditions($object)
@@ -2453,8 +2451,7 @@ public function __call($method, $args)
                     return 'foo';
                 }
             }, ],
-            'without __call or __toString' => [new class()
-            {
+            'without __call or __toString' => [new class() {
                 //
             }, ],
         ];

From 68286359440d678f917b910dddc1059fe036211c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 13 Mar 2023 17:13:39 -0400
Subject: [PATCH 42/46] fix set picker

---
 resources/js/components/Popover.vue           |  1 +
 .../fieldtypes/replicator/AddSetButton.vue    | 17 ++++++-------
 .../fieldtypes/replicator/SetPicker.vue       | 24 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index 738aff413f2..50eaa998f3a 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -89,6 +89,7 @@ export default {
             this.popper && this.popper.update().then(() => {
                 setTimeout(() => this.$emit('opened'), 100); // after animation. there's probably a better way to do this.
             })
+            this.$emit('click');
         },
         close() {
             this.isOpen = false;
diff --git a/resources/js/components/fieldtypes/replicator/AddSetButton.vue b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
index 5ad04333977..09d83e3c24c 100644
--- a/resources/js/components/fieldtypes/replicator/AddSetButton.vue
+++ b/resources/js/components/fieldtypes/replicator/AddSetButton.vue
@@ -1,22 +1,19 @@
 <template>
 
     <div class="replicator-set-picker">
-        <set-picker v-if="sets.length > 1" :sets="groups" :placement="last ? 'bottom-start' : 'auto'" @added="addSet">
+        <set-picker :sets="groups" :placement="last ? 'bottom-start' : 'auto'" @added="addSet">
             <template #trigger>
                 <div class="text-center">
-                    <button v-if="last" class="btn-round flex items-center justify-center" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')">
-                        <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
-                    </button>
-                    <button v-else class="dropdown-icon group" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')">
-                        <svg-icon name="micro-plus" class="w-2.5 h-2.5 text-gray-600 group-hover:text-gray-900 transition duration-150" />
+                    <button :class="{ 'btn-round flex items-center justify-center': last }">
+                        <svg-icon name="micro-plus"
+                            :class="{
+                                'w-3 h-3 text-gray-800 group-hover:text-black': last,
+                                'w-2.5 h-2.5 text-gray-600 group-hover:text-gray-900 transition duration-150': !last
+                            }" />
                     </button>
                 </div>
             </template>
         </set-picker>
-
-        <button v-else :class="{'btn-round flex items-center justify-center': last, 'dropdown-icon': !last }" v-tooltip.right="__('Add Set')" :aria-label="__('Add Set')" @click="addSet(sets[0].handle)">
-            <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
-        </button>
     </div>
 
 </template>
diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 43890b6e8a5..6002a9545ab 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -1,6 +1,16 @@
 <template>
 
-    <popover ref="popover" class="set-picker" :scroll="true" :autoclose="false" :placement="placement" @opened="opened" @closed="closed">
+    <popover
+        ref="popover"
+        class="set-picker"
+        scroll
+        :autoclose="false"
+        :placement="placement"
+        :disabled="!hasMultipleSets"
+        @opened="opened"
+        @closed="closed"
+        @click="triggerWasClicked"
+    >
         <template #trigger>
             <slot name="trigger" />
         </template>
@@ -74,6 +84,12 @@ export default {
             return this.hasMultipleGroups && !this.selectedGroup && !this.search;
         },
 
+        hasMultipleSets() {
+            return this.sets.reduce((count, group) => {
+                return count + group.sets.length;
+            }, 0) > 1;
+        },
+
         hasMultipleGroups() {
             return this.sets.length > 1;
         },
@@ -198,6 +214,12 @@ export default {
             } else {
                 this.addSet(item.handle);
             }
+        },
+
+        triggerWasClicked() {
+            if (! this.hasMultipleSets) {
+                this.addSet(this.sets[0].sets[0].handle);
+            }
         }
 
     }

From fec47621228dfa90506cdad7ff0e52a2cf76f55a Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 13 Mar 2023 19:33:33 -0400
Subject: [PATCH 43/46] [4.x] More UI Improvements (#7589)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Better Markdown fieldtype in small containers

* Let parent/global components handle body overflow

* Better contrast on a few icons

* Fix weird visual glitching on User fieldtype drag interaction

* Use proper data type

* Redesign the List Fieldtype

* [4.x] Redesign the Entry Listing UI/UX (#7668)

* Redesign the Entry Listing UI/UX

Now with better use of space, more intuitive UX, and responsive friendly

* Ensure query changes to a filter will refresh the view properly

* Wire up Terms Listing

* Wire up Users Listing (filters not working on the PHP side yet)

* Don't need this check for allowColumnPicker here

* Adjust bulk actions height

* Make role queryable like user groups currently are.

* Fix user role and group filter class queries (stache only atm).

* Allow fields to be filtered on users listing.

* Pass tests again.

* Responsive improvements

* Autofocus search when showing filters

* nextTick to the rescue

* Bind `f` to show filters (which autofocuses search).

* Fix errors on listings that don’t have search filter (ie. collections listing).

* Remove `$pinned` property from filters in php.

* Remove `$pinned` property from new filter stub.

* Remove pinned filter concept from Filters component.

---------

Co-authored-by: Jesse Leite <jesseleite@gmail.com>

* Ensure you can delete a select option

* [4.x] Way Better Listings (DataTables) (#7676)

* Make Status its own column

Co-Authored-By: Jason Varga <jason@pixelfear.com>

* Greatly improve the data-tables UI in every way

- titles will wrap to 2 lines max, will show the status dot if there's no status field shown
- relationship fields have a new little badge style and will truncate to each on one line
- content fields get smaller text and wrap to 2 lines max
- new status column
- title fields have a reasonable min-width set because they're important
- title fields will still show the status dot if the status column isn't visible
- date fields will no longer wrap to two lines
- wide tables will scroll horizontally instead of overflow, keeping the checkbox and actions columns in view at all times

* Refresh the ColumnPicker UI

* Apply fixes from StyleCI

---------

Co-authored-by: Jason Varga <jason@pixelfear.com>
Co-authored-by: StyleCI Bot <bot@styleci.io>

* Show (F) shortcut on Show Filter Controls tooltip

* Refresh Green with Tailwind Green

* temp color move from red to rose (actually tailwind red)

* Rename rose back to red

* Apply fixes from StyleCI

* Give buttons ever slightly more depth

* Add config option to always show Listing Filters

* Set it to false

* Horizontal scroll for asset listing, fix overflow issue w/ selected rows

* Differentiate between new btn-sm and btn-xs (old btn-sm)

* Better h1-h6 icons (new from Streamline)

* Add prop to disable Popover Clickaway behavior

* Refactor Bard Link to Popover, improve UX, and remove Sticky Toolbars

Sticky toolbars were pretty problematic in lots of edge cases. I feel like it's better to just stick to full screening or using the floating toolbar for editing lots of text and not relying on the sticky toolbar.

* Set new h1-h6 icons to currentColor

* reindent to remove unnecessary outdenting of entire file

* the html too

* teeny tiny unnecessary diff change

* Better date fields in tight quarters

* Fix Bard typography in Fullscreen Mode

* Fix some fullscreen editor issues

* Better replicator toolbar

* Only show asset folders on the first page of results

Closes #2829.

* Make Markdown keyboard shortcuts work on windows.

Closes #6024.

---------

Co-authored-by: Jesse Leite <jesseleite@gmail.com>
Co-authored-by: Jason Varga <jason@pixelfear.com>
Co-authored-by: StyleCI Bot <bot@styleci.io>
---
 config/cp.php                                 |  12 ++
 package-lock.json                             |  10 +
 package.json                                  |   1 +
 resources/css/components/column-picker.css    |  11 +-
 resources/css/components/fieldtypes/bard.css  |  36 ++--
 resources/css/components/fieldtypes/list.css  | 106 -----------
 .../css/components/fieldtypes/markdown.css    |  11 +-
 .../css/components/fieldtypes/replicator.css  |   8 +-
 resources/css/components/filters.css          |   2 +-
 resources/css/components/global-header.css    |   4 +-
 resources/css/components/items.css            |   2 +-
 resources/css/components/metrics.css          |   4 +-
 resources/css/components/notifications.css    |   4 +-
 resources/css/components/popover.css          |  35 ++--
 resources/css/components/publish.css          |   2 +-
 resources/css/components/revisions.css        |   6 +-
 resources/css/components/tabs.css             |  28 ++-
 resources/css/components/toggle.css           |   4 +-
 resources/css/cp.css                          |   1 -
 resources/css/elements/badges.css             |  14 +-
 resources/css/elements/buttons.css            |  42 +++--
 resources/css/elements/dropdowns.css          |   4 +-
 resources/css/elements/forms.css              |   7 +-
 resources/css/elements/icons.css              |  22 +--
 resources/css/elements/tables.css             | 174 ++++++++++++++----
 resources/css/vendors/vue-select.css          |   2 +-
 resources/js/components/DropdownList.vue      |   7 +-
 resources/js/components/FavoriteCreator.vue   |   2 +-
 resources/js/components/LengthLimiter.vue     |   2 +-
 resources/js/components/Popover.vue           |  33 +++-
 resources/js/components/SessionExpiry.vue     |   4 +-
 resources/js/components/UpdatesBadge.vue      |   2 +-
 resources/js/components/ValidationErrors.vue  |   2 +-
 .../js/components/assets/Browser/Browser.vue  |  14 +-
 .../js/components/assets/Editor/Editor.vue    |   8 +-
 resources/js/components/assets/Upload.vue     |   4 +-
 .../js/components/blueprints/Builder.vue      |   6 +-
 .../js/components/blueprints/Listing.vue      |   2 +-
 .../DeleteLocalizationConfirmation.vue        |   2 +-
 .../js/components/collections/Listing.vue     |   4 +-
 resources/js/components/data-list/Action.vue  |   2 +-
 .../js/components/data-list/BulkActions.vue   |   5 +-
 .../js/components/data-list/ColumnPicker.vue  |  41 +++--
 resources/js/components/data-list/Filter.vue  |   2 +-
 .../js/components/data-list/FilterPresets.vue | 113 +++++++++++-
 resources/js/components/data-list/Filters.vue |  95 ++--------
 .../js/components/data-list/HasFilters.js     |  62 ++++++-
 resources/js/components/data-list/Search.vue  |  18 +-
 resources/js/components/data-list/Table.vue   |  36 ++--
 .../js/components/data-list/ToggleAll.vue     |   2 +-
 resources/js/components/entries/Listing.vue   | 152 ++++++++++-----
 .../js/components/entries/PublishActions.vue  |   2 +-
 .../js/components/entries/PublishForm.vue     |   8 +-
 resources/js/components/entries/Widget.vue    |   2 +-
 .../components/field-conditions/Builder.vue   |   2 +-
 .../js/components/fieldsets/EditForm.vue      |   2 +-
 .../components/fieldtypes/DateFieldtype.vue   |   7 +-
 .../components/fieldtypes/ListFieldtype.vue   | 151 +++++++--------
 .../fieldtypes/MarkdownFieldtype.vue          |  12 +-
 .../components/fieldtypes/SelectFieldtype.vue |   6 +-
 .../components/fieldtypes/TableFieldtype.vue  |   2 +-
 .../fieldtypes/ToggleIndexFieldtype.vue       |   2 +-
 .../fieldtypes/assets/AssetsFieldtype.vue     |   2 -
 .../fieldtypes/bard/BardFieldtype.vue         |   4 +-
 .../fieldtypes/bard/LinkToolbar.vue           |  51 +++--
 .../fieldtypes/bard/LinkToolbarButton.vue     |  59 +++---
 .../js/components/fieldtypes/grid/Cell.vue    |   2 +-
 .../js/components/fieldtypes/grid/Grid.vue    |   4 +-
 .../RelationshipIndexFieldtype.vue            |  14 +-
 .../fieldtypes/replicator/Field.vue           |   2 +-
 .../fieldtypes/replicator/Replicator.vue      |  28 ++-
 .../inputs/relationship/SelectField.vue       |  10 +
 .../inputs/relationship/Selector.vue          |   2 +-
 resources/js/components/login/LoginModal.vue  |   6 +-
 resources/js/components/nav/ItemEditor.vue    |   8 +-
 resources/js/components/nav/SectionEditor.vue |   4 +-
 resources/js/components/publish/Field.vue     |   4 +-
 resources/js/components/roles/PublishForm.vue |   2 +-
 .../js/components/sortable/SortableList.vue   |   6 +-
 resources/js/components/structures/Branch.vue |   2 +-
 .../js/components/taxonomies/Listing.vue      |   2 +-
 resources/js/components/terms/Listing.vue     |  43 ++++-
 .../js/components/terms/PublishActions.vue    |   2 +-
 resources/js/components/terms/PublishForm.vue |  10 +-
 resources/js/components/updater/Updater.vue   |   2 +-
 .../js/components/user-groups/PublishForm.vue |   4 +-
 resources/js/components/users/Listing.vue     |  69 ++++++-
 resources/js/components/users/Wizard.vue      |   2 +-
 resources/lang/en/messages.php                |   3 +
 resources/svg/add-bold.svg                    |   1 +
 resources/svg/bullet.svg                      |   1 -
 resources/svg/delete-x.svg                    |   1 -
 resources/svg/filter-lines.svg                |   1 +
 resources/svg/h1.svg                          |   2 +-
 resources/svg/h2.svg                          |   2 +-
 resources/svg/h3.svg                          |   2 +-
 resources/svg/h4.svg                          |   2 +-
 resources/svg/h5.svg                          |   2 +-
 resources/svg/h6.svg                          |   2 +-
 resources/views/auth/login.blade.php          |   4 +-
 .../views/auth/passwords/email.blade.php      |   2 +-
 .../views/auth/passwords/reset.blade.php      |   4 +-
 .../views/auth/protect/password.antlers.html  |   2 +-
 resources/views/blueprints/index.blade.php    |   4 +-
 .../collections/blueprints/create.blade.php   |   2 +-
 resources/views/licensing.blade.php           |  14 +-
 resources/views/nav/duplicates.blade.php      |   2 +-
 .../views/partials/licensing-alerts.blade.php |   2 +-
 resources/views/playground.blade.php          |  25 ++-
 resources/views/updater/index.blade.php       |   4 +-
 resources/views/utilities/email.blade.php     |   2 +-
 resources/views/utilities/search.blade.php    |   4 +-
 resources/views/widgets/updater.blade.php     |   2 +-
 src/Auth/UserRepository.php                   |   4 +-
 src/Console/Commands/stubs/filter.php.stub    |   7 -
 .../CP/Collections/CollectionsController.php  |   5 +
 .../Controllers/CP/Users/UsersController.php  |   4 +-
 src/Http/Resources/CP/Entries/Entries.php     |   9 +
 src/Http/Resources/CP/Entries/ListedEntry.php |  11 +-
 .../View/Composers/JavascriptComposer.php     |   1 +
 src/Query/Scopes/Filter.php                   |   2 -
 src/Query/Scopes/Filters/Fields.php           |  12 +-
 src/Query/Scopes/Filters/Site.php             |   2 -
 src/Query/Scopes/Filters/Status.php           |   2 -
 src/Query/Scopes/Filters/UserGroup.php        |   2 +-
 src/Query/Scopes/Filters/UserRole.php         |   6 +-
 src/Stache/Indexes/Users/Role.php             |  16 ++
 src/Stache/Stores/UsersStore.php              |  18 +-
 tailwind.config.js                            |  17 +-
 tests/Auth/FileUserTest.php                   |   1 +
 tests/Auth/PermissibleContractTests.php       |   5 +
 131 files changed, 1139 insertions(+), 789 deletions(-)
 delete mode 100644 resources/css/components/fieldtypes/list.css
 create mode 100644 resources/svg/add-bold.svg
 delete mode 100644 resources/svg/bullet.svg
 delete mode 100644 resources/svg/delete-x.svg
 create mode 100644 resources/svg/filter-lines.svg
 create mode 100644 src/Stache/Indexes/Users/Role.php

diff --git a/config/cp.php b/config/cp.php
index 188b7d9f5d5..813f68b46d2 100644
--- a/config/cp.php
+++ b/config/cp.php
@@ -27,6 +27,18 @@
 
     'start_page' => 'dashboard',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Listing Filters
+    |--------------------------------------------------------------------------
+    |
+    | Whether to always show the filters on listing pages or hide them behind
+    | a toggle button to keep things more simple.
+    |
+    */
+
+    'always_show_filters' => false,
+
     /*
     |--------------------------------------------------------------------------
     | Dashboard Widgets
diff --git a/package-lock.json b/package-lock.json
index 1b320a4dca8..0f466b1a62e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -85,6 +85,7 @@
         "@babel/preset-env": "^7.20.2",
         "@rollup/plugin-inject": "^5.0.3",
         "@tailwindcss/container-queries": "^0.1.0",
+        "@tailwindcss/line-clamp": "^0.4.2",
         "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue2": "^2.2.0",
         "autoprefixer": "^10.4.0",
@@ -4049,6 +4050,15 @@
         "tailwindcss": ">=3.2.0"
       }
     },
+    "node_modules/@tailwindcss/line-clamp": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz",
+      "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
diff --git a/package.json b/package.json
index 94e4c2bf683..a8f32be85a3 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-inject": "^5.0.3",
     "@tailwindcss/container-queries": "^0.1.0",
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue2": "^2.2.0",
     "autoprefixer": "^10.4.0",
diff --git a/resources/css/components/column-picker.css b/resources/css/components/column-picker.css
index 6d4233ff90a..a6e4543fb47 100644
--- a/resources/css/components/column-picker.css
+++ b/resources/css/components/column-picker.css
@@ -3,17 +3,10 @@
 }
 
 .column-picker-item {
-    @apply bg-white text-sm outline-none flex items-center rounded select-none;
-    padding: 4px 8px;
-    margin: -1px 0;
+    @apply text-sm outline-none flex items-center select-none h-full;
 
     &.sortable {
-        cursor: grab;
-
-        label {
-            cursor: grab;
-        }
-
+        @apply rounded bg-white border;
         &:hover  {
             @apply bg-gray-200;
         }
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 737daa8fdf5..921960eaaff 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -18,7 +18,7 @@
 }
 
 .bard-editor .bard-invalid {
-    @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
+    @apply p-2 @lg:px-4 bg-red-100 text-red-500 text-xs whitespace-nowrap;
 }
 
 /*  Modes */
@@ -40,17 +40,12 @@
 }
 
 .bard-fixed-toolbar {
-    @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
-    position: sticky;
-    padding: 4px 8px;
-    z-index: 5;
-    top: 0;
+    @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between px-1 py-2 z-5 top-0;
+    /* position: sticky; */
+
 
     .bard-toolbar-button {
-        @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base text-center;
-        height: 32px;
-        width: 32px;
-        margin: 0;
+        @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
         svg {
             @apply w-auto h-4;
         }
@@ -84,11 +79,7 @@
     @apply bg-black rounded-full shadow-lg px-4;
 
     button {
-        @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent;
-        height: 32px;
-        width: 32px;
-        margin: 0 2px;
-        outline: none;
+        @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent h-8 w-8 my-0 mx-0.5 outline-none;
         svg {
             @apply w-auto h-4;
         }
@@ -187,7 +178,7 @@
 }
 
 .bard-set.has-error > .replicator-set-header label {
-    @apply text-red;
+    @apply text-red-500;
 }
 
 /* The set selection options for each text block
@@ -216,7 +207,7 @@
     }
 
     .bard-fixed-toolbar {
-        @apply shadow h-12 justify-center;
+        @apply shadow h-12;
         padding: 7px 8px;
         top: 0;
         z-index: 999;
@@ -238,6 +229,10 @@
         * > .ProseMirror {
             min-height: auto;
         }
+
+        &:focus {
+            @apply ring-0;
+        }
     }
 
     .bard-set-selector {
@@ -500,19 +495,20 @@
   ========================================================================== */
 
   .bard-link-toolbar {
-    @apply bg-white rounded absolute leading-none shadow mt-2;
+    /* @apply bg-white rounded absolute leading-none shadow mt-2;
     z-index: 100;
     width: 300px;
     top: 100%;
+    right: 0; */
 
-    &:before {
+    /* &:before {
         content: '';
         border: 6px solid transparent;
         border-bottom-color: white;
         position: absolute;
         bottom: 100%;
         left: 10px;
-    }
+    } */
 
     .input {
         @apply p-0 text-xs h-8 bg-transparent shadow-none border-none;
diff --git a/resources/css/components/fieldtypes/list.css b/resources/css/components/fieldtypes/list.css
deleted file mode 100644
index 3edee96ab8a..00000000000
--- a/resources/css/components/fieldtypes/list.css
+++ /dev/null
@@ -1,106 +0,0 @@
-/* ==========================================================================
-   LIST FIELDTYPE
-   ========================================================================== */
-
-.list-fieldtype ul {
-    padding: 0;
-    margin: 0;
-	list-style: none;
-}
-
-.list-fieldtype li {
-	padding: 0 16px;
-	background: url('../../../svg/bullet.svg') no-repeat 3px 9px;
-    background-size: 5px;
-	margin-bottom: 8px;
-    font-size: 16px;
-	position: relative;
-	font-size: 14px;
-
-    &:active { cursor: ns-resize; }
-
-	&.editing {
-		padding-left: 0px;
-		background: #fff;
-	}
-
-	&:last-child {
-		padding-left: 0;
-        margin-bottom: 0;
-		background: none;
-	}
-
-	input {
-		background: #fff url('../../../svg/bullet.svg') no-repeat 3px 9px;
-        background-size: 5px;
-		box-shadow: none;
-        padding: 0 16px;
-        height: auto !important;
-		font-size: 14px;
-		outline: 0px !important;
-		&:active, &:focus { outline: 0px !important; -webkit-appearance: none; box-shadow: 0 0 0 0; }
-	}
-
-    .delete {
-        @apply text-gray-600 absolute cursor-pointer inline-block opacity-0;
-	    width: 10px;
-	    height: 10px;
-		top: 1px;
-        left: 1px;
-	}
-
-	&:hover .delete {
-        opacity: 1;
-        &:hover {
-            @apply text-gray-800;
-        }
-	}
-}
-
-
-/* Inside a Grid
-  ========================================================================== */
-
-.grid-fieldtype .list-fieldtype {
-
-	padding: 8px 0 10px;
-
-	ul {
-        border: none;
-        padding: 0;
-        border-radius: 0;
-    }
-
-    li {
-        background-position: 10px 8px;
-        font-size: 14px;
-        margin: 0 0 8px;
-        padding-left: 20px;
-        &:last-child { padding-left: 0; }
-        input {
-            background-position: 10px 8px;
-            padding: 0 10px 0 20px;
-            margin-top: 0;
-
-            &:hover { background-color: #fff; }
-        }
-        .delete {
-            left: 8px;
-        }
-    }
-
-    .ui-sortable-helper {
-        box-shadow: none;
-        .delete { display: none; }
-    }
-}
-
-
-/* Inside a Bard
-  ========================================================================== */
-
-.bard-fieldtype .list-fieldtype {
-    input.input-text {
-        border: none;
-    }
-}
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 86a7429c302..8d0259ef7dc 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -6,7 +6,7 @@
     @apply border rounded overflow-hidden relative;
 
     .markdown-toolbar {
-        @apply bg-white shadow-none rounded-t border-b text-sm flex items-center justify-between;
+        @apply bg-white shadow-none rounded-t border-b text-sm flex flex-wrap items-center justify-between;
         padding: 4px 8px;
     }
 
@@ -50,7 +50,7 @@
     }
 
     .CodeMirror {
-        @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal p-3 text-xs;
+        @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs;
         border-radius: 0 0 3px 3px;
 
         &:focus-within {
@@ -108,7 +108,7 @@
     .markdown-modes button {
         @apply text-gray-700;
         &.active {
-            @apply text-white;
+            @apply text-white bg-black;
         }
     }
 
@@ -181,10 +181,9 @@
   ========================================================================== */
 
 .markdown-preview {
-    @apply mx-auto;
+    @apply mx-auto px-3 py-2 @md/markdown:py-4 @md/markdown:px-5;
 
-    padding: 16px 20px;
-    min-height: 167px; /*  @TODO Refactor to avoid a magic number. */
+    min-height: 167px;
 
     ol {
         @apply list-decimal;
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 34a8c75d682..216310d53b4 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -44,9 +44,9 @@
 
     &.invalid {
         .replicator-set-header-inner {
-            @apply bg-red-lighter;
+            @apply bg-red-100;
             label {
-                @apply text-red;
+                @apply text-red-500;
             }
         }
     }
@@ -79,11 +79,11 @@
 }
 
 .replicator-set.has-error > .replicator-set-header label {
-    @apply text-red;
+    @apply text-red-500;
 }
 
 .replicator-set-body > .has-error > label {
-    @apply text-red;
+    @apply text-red-500;
 }
 
 .replicator-fullscreen {
diff --git a/resources/css/components/filters.css b/resources/css/components/filters.css
index 72a78ed930d..30658159474 100644
--- a/resources/css/components/filters.css
+++ b/resources/css/components/filters.css
@@ -15,7 +15,7 @@
     }
 
     a.active:after {
-        @apply bg-red block;
+        @apply bg-red-500 block;
         content: "";
         width: 4px;
         height: 4px;
diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css
index 11447d5f937..b05d74975f8 100644
--- a/resources/css/components/global-header.css
+++ b/resources/css/components/global-header.css
@@ -124,12 +124,12 @@
 
 
 .session-expiry-stripe {
-    @apply px-4 py-2 text-xs top-0 text-center bg-red text-white cursor-pointer w-full outline-none fixed;
+    @apply px-4 py-2 text-xs top-0 text-center bg-red-500 text-white cursor-pointer w-full outline-none fixed;
     z-index: 999;
     height: 48px;
 
     &:hover {
-        @apply bg-red-dark;
+        @apply bg-red-700;
     }
 
     &:active, &:focus {
diff --git a/resources/css/components/items.css b/resources/css/components/items.css
index fdcbb17fa0f..d8b712473f4 100644
--- a/resources/css/components/items.css
+++ b/resources/css/components/items.css
@@ -15,7 +15,7 @@
 
     &.invalid {
         .item-inner {
-            @apply border-red bg-red-lighter text-red;
+            @apply border-red-300 bg-red-100 text-red-500;
         }
     }
 
diff --git a/resources/css/components/metrics.css b/resources/css/components/metrics.css
index 42db7bc1c8b..d71136fc857 100644
--- a/resources/css/components/metrics.css
+++ b/resources/css/components/metrics.css
@@ -26,8 +26,8 @@
     }
     &.dark { }
     &.blue { @apply bg-blue; }
-    &.green { @apply bg-green; }
-    &.red { @apply bg-red; }
+    &.green { @apply bg-green-600; }
+    &.red { @apply bg-red-500; }
 }
 
 .metric.simple {
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 37fc2933e34..3838fb7043f 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -21,11 +21,11 @@
     }
 
     &.success i {
-        @apply bg-green-light;
+        @apply bg-green-400 text-green-700;
     }
 
     &.error i {
-        @apply bg-red;
+        @apply bg-red-500;
     }
 
     &.default i {
diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css
index d17c12772f0..9fb3c471052 100644
--- a/resources/css/components/popover.css
+++ b/resources/css/components/popover.css
@@ -34,11 +34,27 @@
     position: relative;
 }
 
+/*  When open */
+.popover-open {
+    .popover {
+        pointer-events: auto;
+        visibility: visible;
+    }
+
+    .popover-content {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .rotating-dots {
+        transform: rotate(90deg);
+    }
+}
+
 /*  Supporting elements */
 .rotating-dots {
     @apply relative cursor-pointer;
     transition: .12s ease-out;
-    /*  top: 1px; */
 }
 
 .rotating-dots-button {
@@ -54,20 +70,3 @@
         @apply focus-outline;
     }
 }
-
-/*  When open */
-.popover-open {
-    .popover {
-        pointer-events: auto;
-        visibility: visible;
-    }
-
-    .popover-content {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    .rotating-dots {
-        transform: rotate(90deg);
-    }
-}
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 3c8d4e93ae4..bec4122e484 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -55,7 +55,7 @@ code.parent-url {
     }
 
     .has-error > .field-inner > label {
-        @apply text-red;
+        @apply text-red-500;
     }
 
     .field-inner {
diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css
index d9c1c6f5f9e..39ada720f7b 100644
--- a/resources/css/components/revisions.css
+++ b/resources/css/components/revisions.css
@@ -37,10 +37,10 @@
     @apply uppercase text-4xs ml-2 text-white rounded-sm;
     height: 16px;
 
-    &.publish { @apply bg-green-light; }
+    &.publish { @apply bg-green-600; }
     &.revision,
     &.restore { @apply text-gray-700; }
-    &.unpublish { @apply bg-red; }
+    &.unpublish { @apply bg-red-500; }
 }
 
 .revision-item-note {
@@ -49,7 +49,7 @@
 }
 
 .revision-item.status-published {
-    .revision-item-bullet { @apply bg-green; }
+    .revision-item-bullet { @apply bg-green-600; }
 }
 
 .revision-item.status-working-copy {
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 22c9b7f2ca4..ceec3c61894 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -66,10 +66,10 @@
     }
 
     .tab-button.has-error {
-        @apply text-red;
+        @apply text-red-500;
 
         &.active {
-            box-shadow: theme('colors.red.DEFAULT') 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
         }
     }
 }
@@ -88,3 +88,27 @@
 @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;
+
+    &:hover {
+        @apply text-gray-900;
+    }
+
+    &.active {
+        @apply bg-blue-100 text-blue-900;
+    }
+}
+
+.button-tab {
+    @apply text-gray-700 inline-block focus:outline-none px-2 py-1 mr-1;
+
+    &:hover {
+        @apply text-blue;
+    }
+
+    &.active {
+        @apply bg-blue-100 text-blue-800 rounded;
+    }
+}
diff --git a/resources/css/components/toggle.css b/resources/css/components/toggle.css
index 96ec0d5394f..6794f672b09 100644
--- a/resources/css/components/toggle.css
+++ b/resources/css/components/toggle.css
@@ -68,13 +68,13 @@
 }
 
 .toggle-container.on {
-    @apply bg-green-light border-green;
+    @apply bg-green-500 border-green-600;
     .toggle-slider {
         width: 44px;
     }
 
     .toggle-knob:focus {
-        box-shadow: 0 0 10px rgba(#64BD63, .7);
+        box-shadow: 0 0 10px theme(colors.green.500/70);
     }
 }
 
diff --git a/resources/css/cp.css b/resources/css/cp.css
index ffa183523c6..62a594ca5d6 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -61,7 +61,6 @@
 @import "components/fieldtypes/environment";
 @import "components/fieldtypes/grid";
 @import "components/fieldtypes/hidden";
-@import "components/fieldtypes/list";
 @import "components/fieldtypes/markdown";
 @import "components/fieldtypes/partial";
 @import "components/fieldtypes/relationship";
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index f0b3c4f22e0..490f1bca1f1 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -16,7 +16,7 @@
 }
 
 .badge-updates {
-    @apply text-3xs not-italic bg-red text-white rounded-full leading-normal;
+    @apply text-3xs not-italic bg-red-500 text-white rounded-full leading-normal;
     padding: 2px 6px 1px;
 }
 
@@ -27,19 +27,23 @@
 }
 
 .filter-badge {
-    @apply text-2xs text-gray-800 bg-gray-300 flex items-center;
-    height: 1.625rem; /*  24px */
+    @apply text-2xs text-gray-800 bg-white border flex items-center rounded-full;
+    height: 1.625rem;
     padding-left: 10px;
 
     button {
-        @apply px-2 text-base text-gray-500 flex items-center rounded;
+        @apply px-2 text-base text-gray-600 flex items-center rounded;
 
         &:hover {
-            @apply text-gray-700;
+            @apply text-gray-800;
         }
 
         &:focus {
             @apply focus-outline;
         }
     }
+
+    &.filter-badge-control {
+        @apply bg-gray-200 border border-gray-500 border-dashed hover:border-gray-600 hover:bg-gray-300;
+    }
 }
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 4e37adaccc5..7593297a17c 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -32,13 +32,14 @@ button {
 /*  Default, non-primary action button */
 .btn, .btn-default {
     @apply text-gray-800 shadow-button;
-
     background: linear-gradient(180deg, #fff, #f9fafb);
-    border: 1px solid #c4cdd6;
+    border: 1px solid #D3DDE7;
+    border-bottom: 1px solid #c4cdd6;
+    box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(0, 0, 0,.05), 0 2px 1px 0 theme(colors.gray.600 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
-        border-color: #c4cdd5;
+        border-bottom: 1px solid #BFC7D0;
     }
 
     &.active, &.active:hover {
@@ -54,15 +55,12 @@ button {
 
 /*  Primary action button */
 .btn-primary {
-    @apply text-white;
-    background: linear-gradient(to bottom, theme('colors.blue.500'), theme('colors.blue.600'));
-    border: 1px solid theme('colors.blue.700');
-    box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
+    @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 border border-blue-700 border-b-blue-800;
+    box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), :active:not(:disabled) {
-        background: linear-gradient(to bottom, theme('colors.blue.600'), theme('colors.blue.700'));
-        border: 1px solid theme('colors.blue.800');
-        box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
+        @apply from-blue-600 to-blue-700 border-blue-800 border-b-blue-900;
+        box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
     }
 
     &:disabled {
@@ -72,18 +70,20 @@ button {
 
 /*  Danger/delete button */
 .btn-danger {
-    background: linear-gradient(180deg, #e53e3e, #c53030);
-    border: 1px solid #9b2c2c;
-    box-shadow: inset 0 1px 0 0 #f56565, 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
-    color: white;
+    @apply text-white bg-gradient-to-b from-red-500 to-red-600 border border-red-600 border-b-red-900;
+    box-shadow: inset 0 1px 0 0 theme('colors.red.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 3px 2px -1px theme(colors.red.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
-        background: linear-gradient(180deg, #c53030, #9b2c2c);
-        border-color: #742a2a;
+        @apply from-red-600 to-red-700 border border-red-700 border-b-red-900;
     }
 
     &:disabled {
-        @apply text-red-lighter opacity-75;
+        @apply text-red-100 opacity-75;
+    }
+
+    &:focus {
+        @apply ring-red-500 ring-1 ring-offset-1;
+        /* box-shadow: 0 5px 20px theme(colors.red.400 / 0.5); */
     }
 }
 
@@ -97,7 +97,7 @@ button {
     }
 
     &:focus {
-        @apply focus-outline bg-gray-300;
+        @apply ring-2 outline-none;
     }
 
     &:active, &:focus:active {
@@ -111,9 +111,13 @@ button {
 
 /* Size Variations
   ========================================================================== */
-
 .btn-sm {
+    @apply py-1 px-2 h-8;
+}
+
+.btn-xs {
     @apply text-2xs;
+    line-height: 0;
     height: 1.625rem; /*  24px */
     padding: 4px 10px;
 }
diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css
index 4991420af72..b7bd59899d1 100644
--- a/resources/css/elements/dropdowns.css
+++ b/resources/css/elements/dropdowns.css
@@ -30,10 +30,10 @@
     }
 
     button.warning, a.warning {
-        @apply text-red;
+        @apply text-red-500;
 
         &:hover {
-            @apply bg-red text-white;
+            @apply bg-red-500 text-white;
         }
     }
 
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index f8e82b455d1..97842f7b3f3 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -142,7 +142,10 @@ input.input-text-minimal:read-only,
 
 .radio-fieldtype .option,
 .checkboxes-fieldtype .option {
-    @apply mt-3 flex items-center;
+    @apply flex items-center;
+    &:not(:first-child) {
+        @apply mt-3;
+    }
 
     input {
         @apply leading-normal mr-1;
@@ -202,7 +205,7 @@ input.input-text-minimal:read-only,
 
 
 label .required {
-    @apply text-red;
+    @apply text-red-500;
     font-style: normal;
 
     + .localizable-icon {
diff --git a/resources/css/elements/icons.css b/resources/css/elements/icons.css
index 4afa4d6b83f..93feb8b0458 100644
--- a/resources/css/elements/icons.css
+++ b/resources/css/elements/icons.css
@@ -21,31 +21,11 @@ svg {
 	width: 7px;
     flex-shrink: 0;
 
-    &.published { @apply bg-green-light }
+    &.published { @apply bg-green-600 }
     &.draft, &.expired { @apply bg-gray-600 }
     &.scheduled, &.hollow { @apply bg-transparent border border-gray-600 }
 }
 
-.icon-status-draft {
-	@apply bg-gray-700;
-}
-
-.icon-status-hidden {
-    @apply border border-gray-700;
-}
-
-.icon-status-live {
-	@apply bg-green;
-}
-
-.icon-status-error {
-	@apply bg-red;
-}
-
-.icon-status-warning {
-    @apply bg-yellow-dark;
-}
-
 .icon-header-avatar {
     height: 32px;
     width: 32px;
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 635f10a3037..55abfa8c2f5 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -16,7 +16,7 @@
 }
 
 .data-list-bulk-actions {
-	@apply bg-white absolute w-full py-3 z-10;
+	@apply bg-white absolute w-full py-2 z-10;
 	padding-left: 56px;
 }
 
@@ -37,56 +37,56 @@
 	overflow-x: auto;
 
     thead {
-		@apply text-sm text-gray-700 text-gray-900;
+		@apply bg-gray-100 text-xs text-gray-700 text-gray-900;
 
 		tr {
 			@apply border-b;
 		}
 
         th {
-            @apply font-medium px-4 py-3;
-            &:first-child { @apply rounded-tl; }
-			&:last-child { @apply rounded-tr; }
+            @apply font-medium px-4 py-3 whitespace-nowrap;
+            &:first-child { @apply rounded-tl-lg; }
+			&:last-child { @apply rounded-tr-lg; }
 			&:hover {
 				@apply text-gray-900;
 			}
 		}
+        th.handle-column {
+            @apply p-0 w-4;
+        }
 		.type-column {
 			text-align: right;
 		}
-		.actions-column {
-			@apply p-0 pr-4 text-right;
-			width: 24px;
-		}
 	}
 
     tbody {
 		outline: none;
         tr {
-			@apply border-b text-sm;
+			@apply border-b border-gray-400 text-sm;
 
 			&.row-selected {
 				@apply bg-gray-200;
 			}
 
 			&:first-child {
-				td:first-child {
-				    @apply rounded-tl;
+				td:first-child, th:first-child {
+				    @apply rounded-tl-md;
 				}
 
-				td:last-child {
-				    @apply rounded-tr;
+				td:last-child, th:last-child {
+				    @apply rounded-tr-md;
 				}
 			}
 
 			&:last-child {
 				@apply border-none;
-				td:first-child {
-				    @apply rounded-bl;
+
+                td:first-child, th:first-child {
+				    @apply rounded-bl-md;
 				}
 
-				td:last-child {
-				    @apply rounded-br;
+				td:last-child, th:last-child {
+				    @apply rounded-br-md;
 				}
 			}
 
@@ -99,25 +99,19 @@
             }
 
             td {
-                @apply py-2 px-4 break-words;
+                @apply py-2 px-4 break-words ;
+            }
+
+            td.table-drag-handle {
+                @apply w-1 border-r h-full py-2 px-0;
             }
 		}
-		.type-column {
+
+        .type-column {
 			text-align: right;
 		}
-		.actions-column {
-			@apply p-0 text-right;
-			width: 24px;
-			.rotating-dots-button {
-				margin-right: 18px;
-			}
-		}
     }
 
-    .checkbox-column {
-		@apply w-4 pr-0 relative z-10;
-		padding-left: 20px;
-    }
 
     .sortable-column {
         @apply cursor-pointer select-none;
@@ -127,12 +121,10 @@
         }
 
         &.current-column {
-            @apply font-bold;
             svg { opacity: 1; }
         }
 
         svg {
-            /*  transition: all 150ms ease; */
             opacity: 0;
         }
 
@@ -146,11 +138,67 @@
     }
 }
 
-@screen md {
+/* Sticky Meta Columns */
+.data-table {
+    thead th.checkbox-column {
+        @apply p-0 pr-2 z-10 sticky -left-px;
+        background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+        width: 45px;
+        min-width: 45px;
+    }
+
+    thead th.actions-column {
+        @apply p-0 pl-2 text-right sticky z-1 -right-px;
+        background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+        width: 45px;
+        min-width: 45px;
+    }
+
+    tbody th.checkbox-column {
+        @apply z-1 px-3 sticky -left-px;
+        background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+    }
+
+    tbody th.actions-column {
+        @apply p-0 pl-2 text-right sticky -right-px z-1;
+        background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+        min-width: 45px;
+        width: 45px;
+    }
+
+    tbody tr.row-selected .checkbox-column {
+        background-image: linear-gradient(to left, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+    }
+
+    tbody tr.row-selected .actions-column {
+        background-image: linear-gradient(to right, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+    }
+
+    tbody tr:hover .checkbox-column {
+        background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+    }
+
+    tbody tr:hover .actions-column {
+        background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+    }
+}
+
+/* .data-table[data-size="sm"] {
+    thead th.checkbox-column,
+    thead th.actions-column,
+    tbody th.checkbox-column,
+    tbody th.actions-column {
+        position: static !important;
+        background: none !important;
+    }
+} */
+
+
+/* @screen md {
 	.data-table {
 		@apply w-full table;
 	}
-}
+} */
 
 .data-list-header ~ .data-table {
     thead th {
@@ -257,3 +305,59 @@ table.control {
         padding-left: 30px;
     }
 }
+
+
+/* Index Fields
+  ========================================================================== */
+
+.bard-index-field,
+.code-index-field,
+.markdown-index-field,
+.text-index-field,
+.textarea-index-field {
+    @apply line-clamp-2 text-xs;
+}
+
+.title-index-field {
+    @apply line-clamp-2;
+    min-width: 10vw;
+}
+
+.relationship-index-field {
+    min-width: 10vw;
+    .relationship-index-field-item {
+        @apply rounded bg-gray-100 border px-1 flex items-center text-2xs;
+        a {
+            @apply line-clamp-1;
+        }
+    }
+}
+
+.date-index-field {
+    @apply whitespace-nowrap text-gray-800;
+}
+
+.slug-index-field {
+    @apply line-clamp-2 font-mono text-2xs;
+}
+
+.status-index-field {
+    @apply inline-block text-xs bg-gray-300 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center;
+
+    &.status-published:not(.status-private) {
+        @apply text-green-900 bg-green-200 ;
+    }
+
+    &.status-scheduled {
+        @apply text-amber-900 bg-amber-200;
+    }
+}
+
+.role-index-field, .groups-index-field {
+    @apply flex flex-wrap -mb-1.5;
+
+    .role-index-field-item,
+    .groups-index-field-item {
+        @apply rounded bg-gray-100 border px-1 inline-block text-2xs line-clamp-1 mb-1;
+    }
+}
diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index 71642bfd506..b9fa558fdaa 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -186,7 +186,7 @@
 	}
 
 	span {
-        @apply text-md shrink-0 font-thin;
+        @apply text-md shrink-0 font-normal;
 	}
 }
 
diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index cc78b5dbc3b..6fd4b0e2786 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -1,5 +1,5 @@
 <template>
-    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :scroll="scroll" :autoclose="autoclose">
+    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :scroll="scroll" :autoclose="autoclose" :strategy="strategy">
         <template #trigger>
             <slot name="trigger">
                 <button class="rotating-dots-button" :aria-label="__('Open Dropdown')">
@@ -30,6 +30,11 @@ export default {
             type: Boolean,
             default: false
         }
+    },
+    computed: {
+        strategy() {
+            return this.scroll ? 'fixed' : 'absolute';
+        }
     }
 }
 </script>
diff --git a/resources/js/components/FavoriteCreator.vue b/resources/js/components/FavoriteCreator.vue
index 7210ec0b4c4..49e1a95c05a 100644
--- a/resources/js/components/FavoriteCreator.vue
+++ b/resources/js/components/FavoriteCreator.vue
@@ -17,7 +17,7 @@
         </popover>
         <div v-else>
             <button @click="remove" class="h-6 w-6 block outline-none p-1 text-gray hover:text-gray-800" v-tooltip="__('Unpin from Favorites')" :aria-label="__('Unpin from Favorites')">
-                <svg-icon name="pin" class="text-green"></svg-icon>
+                <svg-icon name="pin" class="text-green-600"></svg-icon>
             </button>
         </div>
     </div>
diff --git a/resources/js/components/LengthLimiter.vue b/resources/js/components/LengthLimiter.vue
index fb8c409234f..a93282a8fda 100644
--- a/resources/js/components/LengthLimiter.vue
+++ b/resources/js/components/LengthLimiter.vue
@@ -16,7 +16,7 @@ export default {
             return (this.value) ? this.value.length : 0
         },
         limitIndicatorColor() {
-            return this.limitReached ? 'text-red' : 'text-gray'
+            return this.limitReached ? 'text-red-500' : 'text-gray'
         }
     }
 
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index ee15514833e..f740296b8f3 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="popover-container" :class="{'popover-open': isOpen}" v-on-clickaway="close" @mouseleave="leave">
+    <div class="popover-container" :class="{'popover-open': isOpen}" v-on-clickaway="clickawayClose" @mouseleave="leave">
         <div @click="toggle" ref="trigger" aria-haspopup="true" :aria-expanded="isOpen" v-if="$scopedSlots.default">
             <slot name="trigger"></slot>
         </div>
@@ -20,26 +20,34 @@ export default {
     mixins: [ clickaway ],
 
     props: {
-        disabled: {
+        autoclose: {
             type: Boolean,
             default: false
         },
-        placement: {
-            type: String,
-            default: 'bottom-end',
+        clickaway: {
+            type: Boolean,
+            default: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
         },
         offset: {
             type: Array,
             default: () => [0, 10]
         },
+        placement: {
+            type: String,
+            default: 'bottom-end',
+        },
         scroll: {
             type: Boolean,
             default: false
         },
-        autoclose: {
-            type: Boolean,
-            default: false
-        }
+        strategy: {
+            type: String,
+            default: 'absolute'
+        },
     },
 
     data() {
@@ -63,6 +71,7 @@ export default {
         bindPopper() {
             this.popper = createPopper(this.$refs.trigger, this.$refs.popover, {
                 placement: this.placement,
+                strategy: this.strategy,
                 modifiers: [
                     {
                         name: 'offset',
@@ -88,11 +97,17 @@ export default {
             this.escBinding = this.$keys.bind('esc', e => this.close())
             this.popper && this.popper.update();
         },
+        clickawayClose() {
+            if (this.clickaway) {
+                this.close();
+            }
+        },
         close() {
             this.isOpen = false;
             if (this.escBinding) {
                 this.escBinding.destroy();
             }
+            this.$emit('closed');
         },
         leave() {
             if (this.autoclose) {
diff --git a/resources/js/components/SessionExpiry.vue b/resources/js/components/SessionExpiry.vue
index e867944edcb..69456051426 100644
--- a/resources/js/components/SessionExpiry.vue
+++ b/resources/js/components/SessionExpiry.vue
@@ -22,11 +22,11 @@
                 <div class="form-group">
                     <label v-text="__('messages.session_expiry_enter_password')" />
                     <small
-                        class="help-block text-red"
+                        class="help-block text-red-500"
                         v-if="errors.email"
                         v-text="errors.email[0]" />
                     <small
-                        class="help-block text-red"
+                        class="help-block text-red-500"
                         v-if="errors.password"
                         v-text="errors.password[0]" />
                     <div class="flex items-center">
diff --git a/resources/js/components/UpdatesBadge.vue b/resources/js/components/UpdatesBadge.vue
index 54fc4ca7a2f..36f7e3d26ef 100644
--- a/resources/js/components/UpdatesBadge.vue
+++ b/resources/js/components/UpdatesBadge.vue
@@ -1,5 +1,5 @@
 <template>
-    <span v-if="count" class="badge-sm bg-red">
+    <span v-if="count" class="badge-sm bg-red-500">
         {{ count }}
     </span>
 </template>
diff --git a/resources/js/components/ValidationErrors.vue b/resources/js/components/ValidationErrors.vue
index c7ec280a7a7..7d8c8ce9c30 100644
--- a/resources/js/components/ValidationErrors.vue
+++ b/resources/js/components/ValidationErrors.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div v-if="hasErrors" class="bg-red text-white p-4 rounded-md shadow mb-4">
+    <div v-if="hasErrors" class="bg-red-500 text-white p-4 rounded-md shadow mb-4">
         <p v-for="(error, i) in flattenedErrors" :key="i">{{ error }}</p>
     </div>
 
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index ad75e15d164..6037b5e8cb5 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -44,7 +44,7 @@
                     @selections-updated="(ids) => $emit('selections-updated', ids)"
                 >
                     <div slot-scope="{ filteredRows: rows }" :class="modeClass">
-                        <div class="card p-0" :class="{ 'rounded-tl-none': showContainerTabs, 'select-none' : shifting }">
+                        <div class="card overflow-hidden p-0" :class="{ 'rounded-tl-none': showContainerTabs, 'select-none' : shifting }">
                             <div class="relative w-full">
 
                                 <div class="data-list-header">
@@ -90,6 +90,7 @@
                                 class="-mt-px"
                             />
 
+                            <div class="overflow-x-auto overflow-y-hidden">
                             <data-list-table
                                 v-if="mode === 'table' && ! containerIsEmpty"
                                 :allow-bulk-actions="true"
@@ -110,7 +111,7 @@
                                         </td>
                                         <td :colspan="columns.length" />
                                     </tr>
-                                    <tr v-for="(folder, i) in folders" :key="folder.path" v-if="!restrictFolderNavigation">
+                                    <tr v-for="(folder, i) in folders" :key="folder.path" v-if="!restrictFolderNavigation && page === 1">
                                         <td />
                                         <td @click="selectFolder(folder.path)">
                                             <a class="flex items-center cursor-pointer group">
@@ -121,8 +122,8 @@
                                         <td />
                                         <td />
 
-                                        <td class="actions-column" :colspan="columns.length">
-                                            <dropdown-list v-if="folderActions(folder).length">
+                                        <th class="actions-column" :colspan="columns.length">
+                                            <dropdown-list placement="left-start" scroll v-if="folderActions(folder).length">
                                                 <!-- TODO: Folder edit -->
                                                 <!-- <dropdown-item :text="__('Edit')" @click="editedFolderPath = folder.path" /> -->
 
@@ -143,7 +144,7 @@
                                                 @closed="editedFolderPath = null"
                                                 @updated="folderUpdated(i, $event)"
                                             />
-                                        </td>
+                                        </th>
                                     </tr>
                                 </template>
 
@@ -157,7 +158,7 @@
                                 </template>
 
                                 <template slot="actions" slot-scope="{ row: asset }">
-                                    <dropdown-list>
+                                    <dropdown-list placement="left-start" scroll>
                                         <dropdown-item :text="__(canEdit ? 'Edit' : 'View')" @click="edit(asset.id)" />
                                         <div class="divider" v-if="asset.actions.length" />
                                         <data-list-inline-actions
@@ -171,6 +172,7 @@
                                 </template>
 
                             </data-list-table>
+                            </div>
 
                             <!-- Grid Mode -->
                             <div v-if="mode === 'grid' && ! containerIsEmpty">
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 9848e728fcc..a466cbd3888 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -60,7 +60,7 @@
                             <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Download') }}</span>
                         </button>
 
-                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-red-light rounded items-center text-center px-3 py-1.5">
+                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-red-400 rounded items-center text-center px-3 py-1.5">
                             <svg-icon name="trash-line" class="h-4" />
                             <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
                         </button>
@@ -120,14 +120,14 @@
 
                     @updated="values = { ...$event, focus: values.focus }"
                 >
-                    <div class="w-full sm:p-4 md:py-0 md:w-1/3 md:grow h1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
+                    <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 }">
 
                         <div v-if="saving" class="loading">
                             <loading-graphic text="Saving" />
                         </div>
 
                         <div class="card p-0">
-                            <div v-if="error" class="bg-red text-white p-4 shadow mb-4" v-text="error" />
+                            <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"
@@ -268,7 +268,6 @@ export default {
     },
 
     mounted() {
-        document.body.classList.add('overflow-hidden')
         this.$modal.show('asset-editor');
         this.load();
     },
@@ -363,7 +362,6 @@ export default {
         close() {
             this.$modal.hide('asset-editor');
             this.$emit('closed');
-            document.body.classList.remove('overflow-hidden')
         },
 
         shouldClose() {
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
index 33004081232..505cdbad8e4 100644
--- a/resources/js/components/assets/Upload.vue
+++ b/resources/js/components/assets/Upload.vue
@@ -1,9 +1,9 @@
 <template>
 
-    <div class="flex items-center my-4" :class="{'text-red': status == 'error'}">
+    <div class="flex items-center my-4" :class="{'text-red-500': status == 'error'}">
 
         <div class="mx-2 flex items-center">
-            <svg-icon name="micro-warning" class="text-red h-4 w-4" v-if="status === 'error'" />
+            <svg-icon name="micro-warning" class="text-red-500 h-4 w-4" v-if="status === 'error'" />
             <loading-graphic v-else :inline="true" text="" />
         </div>
 
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index 05ef83c09d1..20c0ac68aff 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -14,7 +14,7 @@
                 <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" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
                 </div>
                 <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
             </div>
@@ -23,7 +23,7 @@
                 <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" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
                 </div>
                 <toggle-input name="hidden" v-model="blueprint.hidden" />
             </div>
@@ -33,7 +33,7 @@
             <h2>{{ __('Tab Sections') }}</h2>
             <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
             <div v-if="errors.sections">
-                <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
+                <small class="help-block text-red-500" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
             </div>
         </div>
 
diff --git a/resources/js/components/blueprints/Listing.vue b/resources/js/components/blueprints/Listing.vue
index 0c03bff7881..730ea0d44a2 100644
--- a/resources/js/components/blueprints/Listing.vue
+++ b/resources/js/components/blueprints/Listing.vue
@@ -7,7 +7,7 @@
             >
                 <template slot="cell-title" slot-scope="{ row: blueprint }">
                     <div class="flex items-center">
-                        <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green']" />
+                        <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']" />
                         <a :href="blueprint.edit_url">{{ blueprint.title }}</a>
                     </div>
                 </template>
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 590aeee8f7c..50c194adc4e 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -23,7 +23,7 @@
                             </div>
                         </div>
 
-                        <small v-if="error" class="help-block text-red mt-2 mb-0" v-text="__('statamic::validation.required')" />
+                        <small v-if="error" class="help-block text-red-500 mt-2 mb-0" v-text="__('statamic::validation.required')" />
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index ab2f45da8a2..265933f1a9b 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -1,12 +1,12 @@
 <template>
     <data-list ref="dataList" :columns="columns" :rows="rows">
-        <div class="card p-0" slot-scope="{ filteredRows: rows }">
+        <div class="card overflow-hidden p-0" slot-scope="{ filteredRows: rows }">
             <data-list-table :rows="rows">
                 <template slot="cell-title" slot-scope="{ row: collection }">
                     <a :href="collection.entries_url">{{ collection.title }}</a>
                 </template>
                 <template slot="actions" slot-scope="{ row: collection, index }">
-                    <dropdown-list>
+                    <dropdown-list scroll placement="left-start">
                         <dropdown-item :text="__('View')" :redirect="collection.entries_url" />
                         <dropdown-item v-if="collection.url" :text="__('Visit URL')" :external-link="collection.url"  />
                         <dropdown-item v-if="collection.editable" :text="__('Edit Collection')" :redirect="collection.edit_url" />
diff --git a/resources/js/components/data-list/Action.vue b/resources/js/components/data-list/Action.vue
index fbf6596b468..08db46cf4a6 100644
--- a/resources/js/components/data-list/Action.vue
+++ b/resources/js/components/data-list/Action.vue
@@ -13,7 +13,7 @@
         >
             <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || action.fields.length }" />
 
-            <div v-if="warningText" v-text="warningText" class="text-red" :class="{ 'mb-4': action.fields.length }" />
+            <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': action.fields.length }" />
 
             <publish-container
                 v-if="action.fields.length"
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index 6f4e246407f..829e2dac516 100644
--- a/resources/js/components/data-list/BulkActions.vue
+++ b/resources/js/components/data-list/BulkActions.vue
@@ -3,8 +3,9 @@
     <div v-if="showAlways || hasSelections" class="data-list-bulk-actions">
         <div class="input-group input-group-sm relative z-10">
             <div class="input-group-prepend">
-                <div class="text-gray-700"
+                <div class="text-gray-700 hidden md:inline-block"
                     v-text="__n(`:count item selected|:count items selected`, selections.length)" />
+                <div class="text-gray-700 md:hidden" v-text="selections.length" />
             </div>
 
             <data-list-action
@@ -19,7 +20,7 @@
                 <button
                     slot-scope="{ action, select }"
                     class="input-group-item"
-                    :class="{'text-red': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
+                    :class="{'text-red-500': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
                     @click="select"
                     v-text="__(action.title)" />
             </data-list-action>
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index ab7069c4612..dd37ad9fc3a 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -1,41 +1,44 @@
 <template>
-    <popover ref="popover">
+    <popover ref="popover" scroll strategy="fixed">
 
         <template slot="trigger">
             <button
                 v-tooltip="__('Customize Columns')"
-                class="btn btn-sm px-1 py-1 -ml-1 cursor-pointer"
+                class="btn py-1 px-1 h-8 w-8 flex items-center justify-center"
             >
-                <svg-icon name="settings-horizontal" class="w-4" />
+                <svg-icon name="settings-horizontal" class="w-4 h-4" />
             </button>
         </template>
 
-        <div class="column-picker">
+        <div class="column-picker rounded-t-md bg-gray-100 w-64">
+            <header v-text="__('Displayed Columns')" class="border-b px-2 py-2 text-sm bg-white rounded-t-md font-medium"/>
             <sortable-list
                 v-model="selectedColumns"
                 :vertical="true"
-                item-class="column-picker-item"
-                handle-class="column-picker-item"
-                :mirror="false"
+                item-class="item"
+                handle-class="item"
+                append-to=".popover-content"
             >
-                <div class="outline-none text-left px-2 py-2">
-                    <h6 v-text="__('Displayed Columns')" class="p-2"/>
-                    <div class="column-picker-item sortable" v-for="column in selectedColumns" :key="column.field">
-                        <label>
+                <div class="flex flex-col space-y-1 px-2 p-3 select-none">
+                    <div class="item sortable cursor-grab" v-for="column in selectedColumns" :key="column.field">
+                        <div class="item-move py-1">&nbsp;</div>
+                        <div class="flex flex-1 ml-2 items-center p-0">
                             <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
                             {{ column.label }}
-                        </label>
+                        </div>
                     </div>
                 </div>
             </sortable-list>
 
-            <div v-if="hiddenColumns.length" class="outline-none text-left px-2 pb-2">
-                <h6 v-text="__('Available Columns')" class="px-2 pb-2"/>
-                <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field">
-                    <label class="cursor-pointer">
-                        <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
-                        {{ column.label }}
-                    </label>
+            <div v-if="hiddenColumns.length" class="outline-none text-left">
+                <header v-text="__('Available Columns')" class="border-y px-2 py-2 text-sm bg-white font-medium"/>
+                <div class="flex flex-col space-y-1 py-2 px-3 select-none">
+                    <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field">
+                        <label class="flex items-center cursor-pointer">
+                            <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
+                            {{ column.label }}
+                        </label>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/resources/js/components/data-list/Filter.vue b/resources/js/components/data-list/Filter.vue
index e5765c689a8..f64f0415cb0 100644
--- a/resources/js/components/data-list/Filter.vue
+++ b/resources/js/components/data-list/Filter.vue
@@ -2,7 +2,7 @@
 
     <div class="w-full no-label">
         <publish-container
-            class="p-4"
+            class="p-3"
             v-if="filter.fields.length"
             :name="`filter-${filter.handle}`"
             :meta="{}"
diff --git a/resources/js/components/data-list/FilterPresets.vue b/resources/js/components/data-list/FilterPresets.vue
index e27ca8ad1d7..f045459e440 100644
--- a/resources/js/components/data-list/FilterPresets.vue
+++ b/resources/js/components/data-list/FilterPresets.vue
@@ -1,14 +1,45 @@
 <template>
-    <div v-if="presets" class="border-b px-4 text-sm">
+    <div class="pr-2">
+        <div class="flex flex-wrap items-center">
 
-        <button class="data-list-filter-link" :class="{ active: ! activePreset }" @click="viewAll" v-text="__('All')" />
+            <button class="pill-tab mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
 
-        <template v-for="(preset, handle) in presets">
-            <button class="data-list-filter-link" :class="{ active: handle === activePreset }" @click="viewPreset(handle)">
-                {{ preset.display }}
+            <template v-for="(preset, handle) in presets">
+                <button class="pill-tab active mr-1" v-if="handle === activePreset">
+                    {{ preset.display }}
+                    <button class="opacity-50 hover:opacity-100" @click="showDeleteModal = true">
+                        <span class="w-2 h-2 ml-2 mr-1">&times;</span>
+                    </button>
+                </button>
+                <button class="pill-tab mr-1" v-else @click="viewPreset(handle)">
+                    {{ preset.display }}
+                </button>
+            </template>
+
+            <button class="pill-tab" @click="createNewEmptyPreset" >
+                <svg-icon name="add-bold" class="w-3 h-3"/>
             </button>
-        </template>
+        </div>
+
+        <confirmation-modal
+            :buttonText="__('Save')"
+            :title="__('Create New View')"
+            v-if="showSaveModal"
+            @cancel="showSaveModal = false"
+            @confirm="handleSavePreset"
+        >
+            <text-input :focus="true" v-model="savingPresetName" @keydown.enter="handleSavePreset" />
+        </confirmation-modal>
 
+        <confirmation-modal
+            v-if="showDeleteModal"
+            :title="__('Delete View')"
+            :bodyText="__('Are you sure you want to delete this view?')"
+            :buttonText="__('Delete')"
+            :danger="true"
+            @confirm="deletePreset"
+            @cancel="showDeleteModal = false"
+        />
     </div>
 </template>
 
@@ -16,13 +47,21 @@
 export default {
 
     props: {
+        activeFilters: Object,
         activePreset: String,
+        activePresetPayload: Object,
+        hasActiveFilters: Boolean,
         preferencesPrefix: String,
+        searchQuery: String,
     },
 
     data() {
         return {
             presets: [],
+            showDeleteModal: false,
+            showSaveModal: false,
+            savingPresetName: null,
+            test: 'hello!'
         }
     },
 
@@ -30,6 +69,17 @@ export default {
         preferencesKey() {
             return this.preferencesPrefix ? `${this.preferencesPrefix}.filters` : null;
         },
+
+        presetPreferencesPayload() {
+            let payload = {
+                display: this.savingPresetName || this.activePresetPayload.display,
+            };
+
+            if (this.searchQuery) payload.query = this.searchQuery;
+            if (this.hasActiveFilters) payload.filters = clone(this.activeFilters);
+
+            return payload;
+        },
     },
 
     created() {
@@ -48,11 +98,62 @@ export default {
             this.viewPreset(handle)
         },
 
+        deletePreset() {
+            this.$preferences.remove(`${this.preferencesKey}.${this.activePreset}`)
+                .then(response => {
+                    this.$emit('deleted', this.activePreset);
+                    this.$toast.success(__('View deleted'));
+                    this.showDeleteModal = false;
+                    this.refreshPresets();
+                })
+                .catch(error => {
+                    this.$toast.error(__('Unable to delete view'));
+                    this.showDeleteModal = false;
+                });
+        },
+
+        savePreset() {
+            if (!this.activePreset) {
+                this.showSaveModal = true;
+                return;
+            }
+
+            this.handleSavePreset();
+        },
+
+        createNewEmptyPreset() {
+            this.savingPresetName = null;
+            this.showSaveModal = true;
+        },
+
+        handleSavePreset() {
+            let presetHandle = this.activePreset || this.$slugify(this.savingPresetName, '_');
+
+            this.$preferences.set(`${this.preferencesKey}.${presetHandle}`, this.presetPreferencesPayload)
+                .then(response => {
+                    this.$toast.success(__('View saved'));
+                    this.showSaveModal = false;
+                    this.getPresets();
+                    this.viewPreset(presetHandle);
+                    this.hasActiveFilters ? this.refreshPreset() : this.$emit('show-filters');
+                })
+                .catch(error => {
+                    this.$toast.error(__('Unable to save view'));
+                    this.showSaveModal = false;
+                });
+        },
+
         refreshPresets() {
             this.getPresets();
             this.viewAll();
         },
 
+        refreshPreset() {
+            this.getPresets();
+            this.$emit('hide-filters');
+            this.viewPreset(this.activePreset);
+        },
+
         viewAll() {
             this.$emit('reset');
         },
diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
index becb28080ae..a56697e61d3 100644
--- a/resources/js/components/data-list/Filters.vue
+++ b/resources/js/components/data-list/Filters.vue
@@ -1,29 +1,19 @@
 <template>
-    <div class="w-full">
-        <div class="input-group focus-within-only">
+    <div class="w-full" v-if="isFiltering || isSearching">
+        <div class="flex flex-wrap px-3 border-b pt-2">
 
-            <popover v-if="filters.length">
+            <!-- Field filter (requires custom selection UI) -->
+            <popover v-if="fieldFilter" scroll strategy="fixed">
                 <template slot="trigger">
-                    <button class="input-group-prepend cursor-pointer px-4" @click="resetFilterPopover">
-                        {{ __('Filter') }}
-                        <svg height="8" width="8" viewBox="0 0 10 6.5" class="ml-1"><path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor" /></svg>
+                    <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
+                        {{ __('Field') }}
+                        <svg-icon name="chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover, afterClosed: afterPopoverClosed }">
                     <div class="flex flex-col text-left w-64">
-                        <h6 class="p-4 pb-0" v-text="__('Show everything where:')"/>
-                        <div v-if="showFilterSelection" class="p-4 pt-2">
-                            <button
-                                v-for="filter in unpinnedFilters"
-                                :key="filter.handle"
-                                v-text="filter.title"
-                                class="btn w-full mt-2"
-                                @click="creating = filter.handle"
-                            />
-                        </div>
                         <div class="filter-fields text-sm">
                             <field-filter
-                                v-show="showFieldFilter"
                                 ref="fieldFilter"
                                 :config="fieldFilter"
                                 :values="activeFilters.fields || {}"
@@ -48,43 +38,16 @@
                 </template>
             </popover>
 
-            <data-list-search ref="search" :value="searchQuery" @input="$emit('search-changed', $event)" />
-
-            <template v-if="isFiltering">
-                <popover v-if="canSave" placement="bottom-end" ref="savePopover">
-                    <template slot="trigger">
-                        <button class="input-group-item px-3">{{ __('Save') }}</button>
-                    </template>
-                    <div class="p-4 w-96">
-                        <h6 v-text="__('Filter preset name')" class="mb-2" />
-                        <div class="flex items-center">
-                            <input class="input-text border-r rounded-r" type="text" v-model="savingPresetName" @keydown.enter="save" ref="savedFilterName">
-                            <button class="btn-primary ml-2" @click="save" :disabled="saving || ! savingPresetName">Save</button>
-                        </div>
-                    </div>
-                </popover>
-                <button v-if="isDirty" class="input-group-item px-3" @click="reset">{{ __('Reset') }}</button>
-                <button v-if="activePreset" class="flex items-center input-group-item px-3" @click="deleting = true"><svg-icon name="trash" class="w-4 h-4" /></button>
-                <confirmation-modal
-                    v-if="deleting"
-                    :title="__('Delete Preset')"
-                    :bodyText="__('Are you sure you want to delete this preset?')"
-                    :buttonText="__('Delete')"
-                    :danger="true"
-                    @confirm="remove"
-                    @cancel="deleting = false"
-                />
-            </template>
-
-            <popover v-if="pinnedFilters.length" v-for="filter in pinnedFilters" :key="filter.handle" placement="bottom-end">
+            <!-- Standard non-field filters -->
+            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle" scroll strategy="fixed">
                 <template slot="trigger">
-                    <button class="input-group-item px-3">
+                    <button class="filter-badge filter-badge-control mr-2 mb-2">
                         {{ filter.title }}
-                        <svg height="8" width="8" viewBox="0 0 10 6.5" class="ml-1"><path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor" /></svg>
+                        <svg-icon name="chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover }">
-                    <div class="filter-fields">
+                    <div class="filter-fields w-64">
                         <data-list-filter
                             :key="filter.handle"
                             :filter="filter"
@@ -96,17 +59,16 @@
                 </template>
             </popover>
 
-        </div>
-
-        <div class="flex flex-wrap mt-2" v-if="activeCount">
-            <div class="filter-badge mr-2" v-for="(badge, handle) in fieldFilterBadges">
+            <!-- Active filter badges -->
+            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
                 <span>{{ badge }}</span>
-                <button @click="removeFieldFilter(handle)">&times;</button>
+                <button @click="removeFieldFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
-            <div class="filter-badge mr-2" v-for="(badge, handle) in standardBadges">
+            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in standardBadges">
                 <span>{{ badge }}</span>
-                <button @click="removeStandardFilter(handle)">&times;</button>
+                <button @click="removeStandardFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
+
         </div>
     </div>
 
@@ -136,6 +98,7 @@ export default {
         searchQuery: String,
         savesPresets: Boolean,
         preferencesPrefix: String,
+        isSearching: Boolean,
     },
 
     data() {
@@ -170,26 +133,6 @@ export default {
             return this.filters.filter(filter => filter.handle !== 'fields');
         },
 
-        pinnedFilters() {
-            return this.filters.filter(filter => filter.pinned);
-        },
-
-        unpinnedFilters() {
-            return this.filters.filter(filter => ! filter.pinned);
-        },
-
-        showFilterSelection() {
-            if (this.fieldFilter && this.unpinnedFilters.length === 1) return false;
-
-            return ! this.creating;
-        },
-
-        showFieldFilter() {
-            if (this.fieldFilter && this.unpinnedFilters.length === 1) return true;
-
-            return this.creating === 'fields';
-        },
-
         fieldFilterBadges() {
             return data_get(this.activeFilterBadges, 'fields', {});
         },
diff --git a/resources/js/components/data-list/HasFilters.js b/resources/js/components/data-list/HasFilters.js
index eb3c182199b..bc0895395ec 100644
--- a/resources/js/components/data-list/HasFilters.js
+++ b/resources/js/components/data-list/HasFilters.js
@@ -2,11 +2,13 @@ export default {
 
     data() {
         return {
+            activeFilterBadges: {},
+            activeFilters: {},
             activePreset: null,
             activePresetPayload: {},
             searchQuery: '',
-            activeFilters: {},
-            activeFilterBadges: {},
+            showFilters: this.$config.get('alwaysShowFilters'),
+            alwaysShowFilters: this.$config.get('alwaysShowFilters'),
         }
     },
 
@@ -22,12 +24,46 @@ export default {
             return count;
         },
 
+        canSave() {
+            return this.isDirty && this.preferencesPrefix;
+        },
+
+        isDirty() {
+            if (! this.isFiltering) return false;
+
+            if (this.activePreset) {
+                return this.activePresetPayload.query != this.searchQuery
+                    || ! _.isEqual(this.activePresetPayload.filters || {}, this.activeFilters);
+            }
+
+            return true;
+        },
+
+        isFiltering() {
+            return ! _.isEmpty(this.activeFilters) || this.searchQuery || this.activePreset;
+        },
+
         hasActiveFilters() {
             return this.activeFilterCount > 0;
-        }
+        },
+
+        searchPlaceholder() {
+            if (this.activePreset) {
+                return __('Searching in: ') + this.activePresetPayload.display;
+            }
+
+            return __('Search');
+        },
 
     },
 
+    created() {
+        this.$keys.bind('f', e => {
+            e.preventDefault();
+            this.handleShowFilters();
+        });
+    },
+
     methods: {
 
         searchChanged(query) {
@@ -65,10 +101,30 @@ export default {
             this.activePreset = null;
             this.activePresetPayload = {};
             this.searchQuery = '';
+            this.showFilters = false;
             this.activeFilters = {};
             this.activeFilterBadges = {};
         },
 
+        filtersHide() {
+            this.showFilters = false;
+            this.searchQuery = '';
+        },
+
+        filtersShow() {
+            this.showFilters = true;
+        },
+
+        handleShowFilters() {
+            this.showFilters = true;
+
+            this.$nextTick(function () {
+                if (this.$refs.search) {
+                    this.$refs.search.focus();
+                }
+            });
+        },
+
         unselectAllItems() {
             if (this.$refs.dataList) {
                 this.$refs.dataList.clearSelections();
diff --git a/resources/js/components/data-list/Search.vue b/resources/js/components/data-list/Search.vue
index d953aedb828..84041781a0e 100644
--- a/resources/js/components/data-list/Search.vue
+++ b/resources/js/components/data-list/Search.vue
@@ -2,17 +2,31 @@
     <input
         type="text"
         ref="input"
-        :placeholder="__('Search...')"
+        :placeholder="__(placeholder)"
         :value="value"
         @input="emitEvent"
         @keyup.esc="reset"
+        autofocus
         class="input-text flex-1 bg-white text-sm">
 </template>
 
 <script>
 export default {
 
-    props: ['value'],
+    props: [
+        'value'
+    ],
+
+    props: {
+        placeholder: {
+            type: String,
+            default: 'Search...'
+        },
+        value: {
+            type: String,
+            default: ''
+        }
+    },
 
     methods: {
         emitEvent: _.debounce(function (event) {
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index aa470f9b805..796e789fdaa 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -1,8 +1,8 @@
 <template>
-    <table ref="table" tabindex="0" class="data-table" :class="{ 'opacity-50': loading, 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
-        <thead v-if="allowBulkActions || allowColumnPicker || visibleColumns.length > 1">
+    <table :data-size="relativeColumnsSize" ref="table" tabindex="0" class="data-table" :class="{ 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
+        <thead v-if="allowBulkActions || visibleColumns.length > 1">
             <tr>
-                <th class="checkbox-column" v-if="allowBulkActions || reorderable">
+                <th :class="{'checkbox-column': ! reorderable, 'handle-column': reorderable}" v-if="allowBulkActions || reorderable">
                     <data-list-toggle-all ref="toggleAll" v-if="allowBulkActions && !singleSelect" />
                 </th>
                 <th
@@ -14,10 +14,11 @@
                         'cursor-not-allowed': !sortable,
                         'text-right pr-8': column.numeric,
                     }"
+                    class="group"
                     @click.prevent="changeSortColumn(column.field)"
                 >
                     <span v-text="column.label" />
-                    <svg v-if="sharedState.sortColumn === column.field" :class="sharedState.sortDirection" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1">
+                    <svg :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1 opacity-0 group-hover:opacity-100">
                         <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor"/>
                     </svg>
                 </th>
@@ -25,9 +26,7 @@
                     <template v-if="type === 'entries'">{{ __('Collection') }}</template>
                     <template v-if="type === 'terms'">{{ __('Taxonomy') }}</template>
                 </th>
-                <th class="actions-column">
-                    <data-list-column-picker :preferences-key="columnPreferencesKey" v-if="allowColumnPicker" />
-                </th>
+                <th class="actions-column" />
             </tr>
         </thead>
         <sortable-list
@@ -42,7 +41,7 @@
             <slot name="tbody-start" />
             <tr v-for="(row, index) in rows" :key="row.id" class="sortable-row outline-none" :class="{'row-selected': sharedState.selections.includes(row.id)}">
                 <td class="table-drag-handle" v-if="reorderable"></td>
-                <td class="checkbox-column" v-if="allowBulkActions && !reorderable">
+                <th class="checkbox-column" v-if="allowBulkActions && !reorderable">
                     <input
                         v-if="!reorderable"
                         type="checkbox"
@@ -52,7 +51,7 @@
                         :id="`checkbox-${row.id}`"
                         @click="checkboxClicked(row, index, $event)"
                     />
-                </td>
+                </th>
                 <td v-for="column in visibleColumns" :key="column.field" @click="rowClicked(row, index, $event)" :width="column.width" :class="{'text-right pr-8': column.numeric}">
                     <slot
                         :name="`cell-${column.field}`"
@@ -72,14 +71,14 @@
                         <template v-if="type === 'terms'">{{ row.taxonomy.title }}</template>
                     </span>
                 </td>
-                <td class="actions-column">
+                <th class="actions-column">
                     <slot
                         name="actions"
                         :row="row"
                         :index="actualIndex(row)"
                         :display-index="index"
                     ></slot>
-                </td>
+                </th>
             </tr>
         </tbody>
         </sortable-list>
@@ -125,13 +124,6 @@ export default {
             type: Boolean,
             default: false
         },
-        allowColumnPicker: {
-            type: Boolean,
-            default: false
-        },
-        columnPreferencesKey: {
-            type: String,
-        },
         type: {
             type: String
         },
@@ -154,6 +146,14 @@ export default {
             return this.sharedState.selections.length === this.sharedState.maxSelections;
         },
 
+        relativeColumnsSize() {
+            if (this.visibleColumns.length <= 4) return 'sm';
+            if (this.visibleColumns.length <= 8) return 'md';
+            if (this.visibleColumns.length >= 12) return 'lx';
+
+            return 'xl';
+        },
+
         singleSelect() {
             return this.sharedState.maxSelections === 1;
         },
diff --git a/resources/js/components/data-list/ToggleAll.vue b/resources/js/components/data-list/ToggleAll.vue
index 3fe97a95c75..0cbf17ec09d 100644
--- a/resources/js/components/data-list/ToggleAll.vue
+++ b/resources/js/components/data-list/ToggleAll.vue
@@ -1,5 +1,5 @@
 <template>
-    <label for="checkerOfAllBoxes" class="btn btn-sm px-1.5 flex items-center justify-center -ml-1.5 relative -left-px cursor-pointer">
+    <label for="checkerOfAllBoxes" class="flex items-center justify-center relative cursor-pointer">
         <input type="checkbox" @change="toggle" :checked="anyItemsChecked" id="checkerOfAllBoxes" class="relative top-0">
     </label>
 </template>
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 8ea523d365d..4bcb08fe331 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <div v-if="initializing" class="card loading">
             <loading-graphic />
         </div>
@@ -16,17 +15,39 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
-                <div class="card p-0 relative">
-                    <data-list-filter-presets
-                        v-if="!reordering"
-                        ref="presets"
-                        :active-preset="activePreset"
-                        :preferences-prefix="preferencesPrefix"
-                        @selected="selectPreset"
-                        @reset="filtersReset"
-                    />
-                    <div class="data-list-header" v-if="!reordering">
+                <div class="card overflow-hidden p-0 relative">
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="alwaysShowFilters || ! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn btn-sm" v-text="__('Cancel')" v-show="! alwaysShowFilters && showFilters" @click="filtersHide" />
+                            <button class="btn btn-sm" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center btn-sm w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+                    <div v-show="!reordering && showFilters">
                         <data-list-filters
+                            ref="filters"
                             :filters="filters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
@@ -34,6 +55,7 @@
                             :active-filter-badges="activeFilterBadges"
                             :active-count="activeFilterCount"
                             :search-query="searchQuery"
+                            :is-searching="showFilters"
                             :saves-presets="true"
                             :preferences-prefix="preferencesPrefix"
                             @filter-changed="filterChanged"
@@ -53,43 +75,45 @@
                         @started="actionStarted"
                         @completed="actionCompleted"
                     />
-
-                    <data-list-table
-                        v-show="items.length"
-                        :allow-bulk-actions="!reordering"
-                        :loading="loading"
-                        :reorderable="reordering"
-                        :sortable="!reordering"
-                        :toggle-selection-on-row-click="true"
-                        :allow-column-picker="true"
-                        :column-preferences-key="preferencesKey('columns')"
-                        @sorted="sorted"
-                        @reordered="reordered"
-                    >
-                        <template slot="cell-title" slot-scope="{ row: entry }">
-                            <div class="flex items-center">
-                                <div class="little-dot mr-2" :class="getStatusClass(entry)" />
-                                <a :href="entry.edit_url" @click.stop>{{ entry.title }}</a>
-                            </div>
-                        </template>
-                        <template slot="cell-slug" slot-scope="{ row: entry }">
-                            <span class="font-mono text-2xs">{{ entry.slug }}</span>
-                        </template>
-                        <template slot="actions" slot-scope="{ row: entry, index }">
-                            <dropdown-list>
-                                <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
-                                <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
-                                <div class="divider" v-if="entry.actions.length" />
-                                <data-list-inline-actions
-                                    :item="entry.id"
-                                    :url="actionUrl"
-                                    :actions="entry.actions"
-                                    @started="actionStarted"
-                                    @completed="actionCompleted"
-                                />
-                            </dropdown-list>
-                        </template>
-                    </data-list-table>
+                    <div class="overflow-x-auto overflow-y-hidden">
+                        <data-list-table
+                            v-show="items.length"
+                            :allow-bulk-actions="!reordering"
+                            :loading="loading"
+                            :reorderable="reordering"
+                            :sortable="!reordering"
+                            :toggle-selection-on-row-click="true"
+                            @sorted="sorted"
+                            @reordered="reordered"
+                        >
+                            <template slot="cell-title" slot-scope="{ row: entry }">
+                                <div class="title-index-field">
+                                    <div class="little-dot mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="! columnShowing('status')" />
+                                    <a :href="entry.edit_url" @click.stop>{{ entry.title }}</a>
+                                </div>
+                            </template>
+                            <template slot="cell-status" slot-scope="{ row: entry }">
+                                <div class="status-index-field select-none" v-tooltip="getStatusTooltip(entry)" :class="`status-${entry.status}`" v-text="getStatusLabel(entry)" />
+                            </template>
+                            <template slot="cell-slug" slot-scope="{ row: entry }">
+                                <div class="slug-index-field" :title="entry.slug">{{ entry.slug }}</div>
+                            </template>
+                            <template slot="actions" slot-scope="{ row: entry, index }">
+                                <dropdown-list placement="left-start" scroll>
+                                    <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
+                                    <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
+                                    <div class="divider" v-if="entry.actions.length" />
+                                    <data-list-inline-actions
+                                        :item="entry.id"
+                                        :url="actionUrl"
+                                        :actions="entry.actions"
+                                        @started="actionStarted"
+                                        @completed="actionCompleted"
+                                    />
+                                </dropdown-list>
+                            </template>
+                        </data-list-table>
+                    </div>
                 </div>
                 <data-list-pagination
                     class="mt-6"
@@ -101,7 +125,6 @@
                 />
             </div>
         </data-list>
-
     </div>
 </template>
 
@@ -167,12 +190,36 @@ export default {
             if (entry.published && entry.private) {
                 return 'bg-transparent border border-gray-600';
             } else if (entry.published) {
-                return 'bg-green';
+                return 'bg-green-600';
             } else {
                 return 'bg-gray-400';
             }
         },
 
+        getStatusLabel(entry) {
+            if (entry.status === 'published') {
+                return __('Published');
+            } else if (entry.status === 'scheduled') {
+                return __('Scheduled');
+            } else if (entry.status === 'expired') {
+                return __('Expired');
+            } else if (entry.status === 'draft') {
+                return __('Draft');
+            }
+        },
+
+        getStatusTooltip(entry) {
+            if (entry.status === 'published') {
+                return __('messages.status_published_with_date', {date: entry.date})
+            } else if (entry.status === 'scheduled') {
+                return __('messages.status_scheduled_with_date', {date: entry.date})
+            } else if (entry.status === 'expired') {
+                return __('messages.status_expired_with_date', {date: entry.date})
+            } else if (entry.status === 'draft') {
+                return __('Draft');
+            }
+        },
+
         reorder() {
             this.filtersReset();
 
@@ -189,6 +236,10 @@ export default {
             this.request();
         },
 
+        columnShowing(column) {
+            return this.visibleColumns.find(c => c.field === column);
+        },
+
         reordered(items) {
             this.items = items;
         },
@@ -215,7 +266,6 @@ export default {
                     this.$toast.error(__('Something went wrong'));
                 });
         },
-
     }
 
 }
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 987dce75662..772005a7a8e 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -52,7 +52,7 @@
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-red" v-if="action === 'schedule'">
+                    <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
                         <div class="pt-px w-4 mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index ac2bec3fb63..c83a0105766 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -136,7 +136,7 @@
                                 >
                                     <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
                                     <div class="mb-1 flex items-center" v-if="published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('Entry has a published version')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-else>
@@ -144,7 +144,7 @@
                                         <span class="text-2xs" v-text="__('Entry has not been published')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('This is the published version')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-if="isDirty">
@@ -171,9 +171,9 @@
                                     >
                                         <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
                                             <span class="little-dot mr-2" :class="{
-                                                'bg-green': option.published,
+                                                'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
-                                                'bg-red': !option.exists
+                                                'bg-red-500': !option.exists
                                             }" />
                                             {{ option.name }}
                                             <loading-graphic
diff --git a/resources/js/components/entries/Widget.vue b/resources/js/components/entries/Widget.vue
index 6f0529cd58c..057467dec00 100644
--- a/resources/js/components/entries/Widget.vue
+++ b/resources/js/components/entries/Widget.vue
@@ -16,7 +16,7 @@
                 <data-list-table :loading="loading">
                     <template slot="cell-title" slot-scope="{ row: entry }">
                         <div class="flex items-center">
-                            <div class="little-dot mr-2" :class="[entry.published ? 'bg-green' : 'bg-gray-400']" />
+                            <div class="little-dot mr-2" :class="[entry.published ? 'bg-green-600' : 'bg-gray-400']" />
                             <a :href="entry.edit_url">{{ entry.title }}</a>
                         </div>
                     </template>
diff --git a/resources/js/components/field-conditions/Builder.vue b/resources/js/components/field-conditions/Builder.vue
index 2799832962b..5a5c44885ac 100644
--- a/resources/js/components/field-conditions/Builder.vue
+++ b/resources/js/components/field-conditions/Builder.vue
@@ -57,7 +57,7 @@
                     class="ml-4" />
 
                 <button @click="remove(index)" class="btn-close ml-2 group">
-                    <svg-icon name="trash" class="w-4 h-4 group-hover:text-red" />
+                    <svg-icon name="trash" class="w-4 h-4 group-hover:text-red-500" />
                 </button>
             </div>
 
diff --git a/resources/js/components/fieldsets/EditForm.vue b/resources/js/components/fieldsets/EditForm.vue
index 8c5a16d06f7..9b173c10747 100644
--- a/resources/js/components/fieldsets/EditForm.vue
+++ b/resources/js/components/fieldsets/EditForm.vue
@@ -16,7 +16,7 @@
                 <label class="block">{{ __('Title') }}</label>
                 <small class="help-block">{{ __('messages.fieldsets_title_instructions') }}</small>
                 <div v-if="errors.title">
-                    <small class="help-block text-red" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
                 </div>
                 <input type="text" name="title" class="input-text" v-model="fieldset.title" autofocus="autofocus">
             </div>
diff --git a/resources/js/components/fieldtypes/DateFieldtype.vue b/resources/js/components/fieldtypes/DateFieldtype.vue
index 5f3351e01de..eed1aaaa3c2 100644
--- a/resources/js/components/fieldtypes/DateFieldtype.vue
+++ b/resources/js/components/fieldtypes/DateFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="datetime">
+    <div class="datetime min-w-[145px]">
 
         <button type="button" class="btn flex mb-2 md:mb-0 items-center pl-3" v-if="!isReadOnly && config.inline === false && !hasDate" @click="addDate" tabindex="0">
             <svg-icon name="calendar" class="w-4 h-4 mr-2"></svg-icon>
@@ -7,7 +7,8 @@
     	</button>
 
         <div v-if="hasDate || config.inline"
-            class="date-time-container flex-col @xs:flex-row"
+            class="date-time-container flex flow-col @sm:flex-row"
+            :class="config.time_seconds_enabled ? 'space-x-1' : 'space-x-3'"
         >
 
             <div class="flex-1 date-container">
@@ -86,7 +87,7 @@
                 </v-date-picker>
             </div>
 
-            <div v-if="config.time_enabled && !isRange" class="time-container mt-2 @xs:ml-2 @xs:mt-0 time-fieldtype">
+            <div v-if="config.time_enabled && !isRange" class="time-container @xs:ml-2 @xs:mt-0 time-fieldtype">
 				<time-fieldtype
                     v-if="hasTime"
                     ref="time"
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index a805e0cd9be..bd2bf8f5259 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -1,61 +1,44 @@
 <template>
-    <sortable-list
-        v-model="data"
-        :vertical="true"
-        item-class="sortable-row"
-        handle-class="sortable-handle"
-        @dragstart="$emit('focus')"
-        @dragend="$emit('blur')"
-    >
-        <ul ref="list" class="outline-none">
-            <li class="sortable-row outline-none"
-                v-for="(item, index) in data"
-                :key="item._id"
-                :class="{ editing: (editing === index) }"
+    <div class="table-field">
+        <table class="table-fieldtype-table">
+            <sortable-list
+                v-model="data"
+                :vertical="true"
+                item-class="sortable-row"
+                handle-class="sortable-handle"
+                @dragstart="$emit('focus')"
+                @dragend="$emit('blur')"
             >
-                <span v-if="isReadOnly">
-                    {{ data[index].value }}
-                </span>
-                <template v-if="!isReadOnly">
-                    <span v-if="editing === index">
-                        <input
-                            type="text"
-                            class="w-full"
-                            v-model="data[index].value"
-                            :readonly="isReadOnly"
-                            :id="fieldId"
-                            @keydown.enter.prevent="saveAndAddNewItem"
-                            @keyup.up="previousItem"
-                            @keyup.down="nextItem"
-                            @focus="editItem(index)"
-                            @blur="focused = false"
-                        />
-                    </span>
-                    <span v-else @click.prevent="editItem(index)">
-                        <span class="sortable-handle">{{ item.value }}</span>
-                        <button class="delete" @click="deleteItem(index)">
-                            <svg-icon name="delete-x" />
-                        </button>
-                    </span>
-                </template>
-            </li>
-            <li>
-                <input
-                    v-if="!isReadOnly"
-                    type="text"
-                    class="w-full"
-                    v-model="newItem"
-                    ref="newItem"
-                    :placeholder="`${__('Add an item')}...`"
-                    @keydown.enter.prevent="addItem"
-                    @blur="newItemInputBlurred"
-                    @paste="newItemInputPaste"
-                    @focus="editItem(data.length)"
-                    @keyup.up="previousItem"
-                />
-            </li>
-        </ul>
-    </sortable-list>
+                <tbody>
+                    <tr class="sortable-row" v-for="(element, index) in data" :key="element._id">
+                        <td class="sortable-handle table-drag-handle" v-if="!isReadOnly" :class="{'rounded-tl': index === 0 }"></td>
+                        <td>
+                            <input
+                                type="text"
+                                ref="listItem"
+                                class="input-text"
+                                v-model="element.value"
+                                :readonly="isReadOnly"
+                                @blur="focused = false"
+                                @focus="editItem(index)"
+                                @keydown.enter.prevent="nextItem"
+                                @keyup.up="previousItem"
+                                @keyup.down="nextItem"
+                                @paste="newItemInputPaste"
+                            />
+                        </td>
+                        <td class="row-controls" v-if="!isReadOnly">
+                            <button @click="deleteValue(index)" class="inline text-lg antialiased text-gray-600 hover:text-gray-800 ">&times;</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </sortable-list>
+        </table>
+
+        <button class="btn" @click="addItem" v-if="!isReadOnly">
+            {{ addButton }}
+        </button>
+    </div>
 </template>
 
 <script>
@@ -73,10 +56,10 @@ export default {
     data() {
         return {
             data: [],
-            newItem: '',
             editing: null,
             focused: false,
             mounted: false,
+            deleting: false
         }
     },
 
@@ -93,6 +76,7 @@ export default {
             }
         },
 
+
         value: {
             immediate: true,
             handler(value) {
@@ -115,54 +99,44 @@ export default {
         }
     },
 
+    computed: {
+        addButton() {
+            return __(this.config.add_button || 'Add Item');
+        },
+    },
+
     methods: {
         addItem() {
-            if (this.newItem === '') {
-                return;
-            }
+            this.data.push(this.newSortableValue());
+            this.$nextTick(() => this.editItem(this.data.length - 1));
+        },
 
-            this.data.push(this.newSortableValue(this.newItem));
-            this.newItem = '';
-            this.editing = this.data.length;
+        deleteValue(index) {
+            this.data.splice(index, 1);
         },
 
         editItem(index) {
             this.editing = index;
-
-            this.$nextTick(function () {
-                this.focusItem();
-            });
+            this.$refs.listItem[index].focus();
         },
 
         newItemInputPaste(event) {
-            if (this.newItem !== '') {
-                return;
-            }
-
             const value = event.clipboardData.getData('text');
             if (!value.includes("\n")) {
                 return;
             }
 
+            this.deleteIfEmpty()
+
             value.split("\n").forEach((item) => {
                 this.data.push(this.newSortableValue(item));
             });
 
-            event.preventDefault();
-        },
+            this.$nextTick(() => this.editItem(this.data.length - 1));
 
-        newItemInputBlurred() {
-            this.addItem();
-            this.focused = false;
+            event.preventDefault();
         },
 
-        focusItem() {
-            this.focused = true;
-
-            return this.editing === this.data.length
-                ? this.$refs.newItem.focus()
-                : this.$refs.list.querySelector('.editing input').select();
-        },
 
         previousItem() {
             this.deleteIfEmpty();
@@ -173,13 +147,12 @@ export default {
         nextItem() {
             let deletedAdjustment = this.deleteIfEmpty() ? 1 : 0;
 
-            this.editItem(this.editing + 1 - deletedAdjustment);
-        },
-
-        saveAndAddNewItem() {
-            this.deleteIfEmpty();
+            if (this.editing + 1 >= this.data.length) {
+                this.addItem();
+            } else {
+                this.editItem(this.editing + 1 - deletedAdjustment);
+            }
 
-            this.editItem(this.data.length);
         },
 
         deleteIfEmpty() {
diff --git a/resources/js/components/fieldtypes/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/MarkdownFieldtype.vue
index 90211344882..75c22f42d1a 100644
--- a/resources/js/components/fieldtypes/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/MarkdownFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
 <fullscreen :enabled="fullScreenMode" target-class="markdown-fieldtype">
-    <div class="markdown-fieldtype-wrapper" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
+    <div class="markdown-fieldtype-wrapper @container/markdown" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
 
         <uploader
             ref="uploader"
@@ -86,7 +86,7 @@
                         </div>
                     </div>
 
-                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose"></div>
+                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose-sm @md/markdown:prose-base"></div>
                 </div>
             </div>
         </uploader>
@@ -441,19 +441,19 @@ export default {
          */
         shortcut: function(e) {
             var key = e.keyCode;
-            var meta = e.metaKey === true;
+            var mod = e.metaKey === true || e.ctrlKey === true;
 
-            if (meta && key === 66) { // cmd+b
+            if (mod && key === 66) { // cmd+b
                 this.bold();
                 e.preventDefault();
             }
 
-            if (meta && key === 73) { // cmd+i
+            if (mod && key === 73) { // cmd+i
                 this.italic();
                 e.preventDefault();
             }
 
-            if (meta && key === 75) { // cmd+k
+            if (mod && key === 75) { // cmd+k
                 this.insertLink();
                 e.preventDefault();
             }
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 4db8f38d4ea..9e215362c89 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -49,7 +49,7 @@
                                 <span>×</span>
                             </button>
                             <button v-else type="button" class="vs__deselect">
-                                <span class="opacity-50">×</span>
+                                <span class="text-gray-500">×</span>
                             </button>
                         </span>
                     </div>
@@ -121,9 +121,9 @@ export default {
 
         limitIndicatorColor() {
             if (this.limitExceeded) {
-                return 'text-red';
+                return 'text-red-500';
             } else if (this.limitReached) {
-                return 'text-green';
+                return 'text-green-600';
             }
 
             return 'text-gray';
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 0136c373ae7..917723493f5 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -19,7 +19,7 @@
                                 </div>
                             </th>
                             <th class="row-controls pr-0">
-                                <button @click="fullScreenMode = !fullScreenMode" class="flex items-center w-full h-full justify-center text-gray-500 hover:text-gray-700">
+                                <button @click="fullScreenMode = !fullScreenMode" class="flex items-center w-full h-full justify-center text-gray-600 hover:text-gray-800">
                                     <svg-icon name="expand-2" class="h-3.5 w-3.5" v-show="! fullScreenMode" />
                                     <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="fullScreenMode" />
                                 </button>
diff --git a/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue b/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
index 5b52f03791e..7a0c0bcce9a 100644
--- a/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex items-center">
-        <svg-icon name="check" class="w-3 text-green" v-if="this.value" />
+        <svg-icon name="check" class="w-3 text-green-600" v-if="this.value" />
         <svg-icon name="close" class="w-3 text-gray-500" v-if="!this.value" />
     </div>
 </template>
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 5b2d768e6d2..25cf6ea93be 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -403,7 +403,6 @@ export default {
          */
         openSelector() {
             this.showSelector = true;
-            this.$root.hideOverflow = true;
         },
 
         /**
@@ -411,7 +410,6 @@ export default {
          */
         closeSelector() {
             this.showSelector = false;
-            this.$root.hideOverflow = false;
         },
 
         /**
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 890b74b507f..6cb59225ea9 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -5,7 +5,7 @@
      be within the context of a publish form to continue working
      once it has been portaled out. -->
 <div :class="{ 'publish-fields': fullScreenMode }">
-<div :class="{ wrapperClasses: fullScreenMode }">
+<div :class="fullScreenMode && wrapperClasses">
 
     <div
         class="bard-fieldtype-wrapper"
@@ -15,7 +15,7 @@
     >
 
         <div class="bard-fixed-toolbar" v-if="!readOnly && showFixedToolbar">
-            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
+            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed" :class="{'justify-center': fullScreenMode}">
                 <component
                     v-for="button in visibleButtons(buttons)"
                     :key="button.name"
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 757e69bdbbc..6a5f5b3e034 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -1,33 +1,25 @@
 <template>
 
     <div class="bard-link-toolbar">
-
         <div>
-
             <!-- Link type select -->
             <div class="flex items-center px-4 py-2 border-b">
 
-                <label
-                    class="mr-3 flex items-center font-normal"
-                    v-for="type in visibleLinkTypes"
-                    :for="type.type"
-                    :key="type.type"
+                <button
+                    class="button-tab"
+                    v-for="visibleLinkType in visibleLinkTypes"
+                    :class="{active: visibleLinkType.type === linkType}"
+                    :for="visibleLinkType.type"
+                    :key="visibleLinkType.type"
+                    :id="visibleLinkType.type"
+                    @click="setLinkType(visibleLinkType.type)"
                 >
-                    <input
-                        class="mr-1 top-0"
-                        type="radio"
-                        name="link-type"
-                        :id="type.type"
-                        :checked="type.type === linkType"
-                        @click="setLinkType(type.type)"
-                    />
-                    {{ type.title }}
-                </label>
-
+                    {{ visibleLinkType.title }}
+                </button>
             </div>
 
             <div class="px-4 py-4 border-b">
-                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center">
+                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center hover:border-gray-600">
 
                     <!-- URL input -->
                     <input
@@ -37,12 +29,13 @@
                         ref="urlInput"
                         class="input h-auto text-sm"
                         placeholder="URL"
+                        @keydown.enter.prevent="commit"
                     />
 
                     <!-- Data input -->
                     <div
                         v-else
-                        class="w-full flex justify-between"
+                        class="w-full flex items-center justify-between cursor-pointer"
                         @click="openSelector"
                     >
 
@@ -58,11 +51,13 @@
                         </div>
 
                         <button
+                        class="flex items-center"
                             v-tooltip="`${__('Browse')}...`"
                             :aria-label="`${__('Browse')}...`"
                             @click="openSelector"
                         >
-                            <svg-icon :name="linkType === 'asset' ? 'folder-image' : 'folder-generic'" class="h-4 w-4" />
+                            <svg-icon v-show="linkType === 'asset'" name="folder-image" class="h-4 w-4" />
+                            <svg-icon v-show="linkType !== 'asset'" name="folder-generic" class="h-4 w-4" />
                         </button>
 
                     </div>
@@ -70,7 +65,7 @@
                 </div>
 
                 <!-- Title attribute -->
-                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center" >
+                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center hover:border-gray-600" >
                     <input
                         type="text"
                         ref="input"
@@ -80,15 +75,17 @@
                     />
                 </div>
 
-                <label for="target-blank" class="flex items-center font-normal">
+                <label for="target-blank" class="flex items-center font-normal cursor-pointer text-gray-800 hover:text-black">
                     <input class="checkbox mr-2" type="checkbox" v-model="targetBlank" id="target-blank">
                     {{ __('Open in new window') }}
                 </label>
             </div>
 
-            <div class="flex items-center justify-end space-x-1 font-normal px-4 py-3">
+            <footer class="bg-gray-100 rounded-b-md flex items-center justify-end space-x-3 font-normal p-2">
+                <button @click="$emit('canceled')" class="text-xs text-gray-600 hover:text-gray-800">
+                    {{ __('Cancel') }}
+                </button>
                 <button
-                    v-tooltip="__('Remove Link')"
                     :aria-label="__('Remove Link')"
                     @click="remove"
                     class="btn btn-sm"
@@ -102,9 +99,9 @@
                     @click="commit"
                     class="btn btn-sm"
                 >
-                    {{ __('OK') }}
+                    {{ __('Save') }}
                 </button>
-            </div>
+            </footer>
 
         </div>
 
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
index 4bba94caed2..ff02bc60926 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
@@ -1,27 +1,29 @@
 <template>
-
-    <div class="inline-block relative">
-
-        <button
-            class="bard-toolbar-button"
-            :class="{ active }"
-            v-tooltip="button.text"
-            :aria-label="button.text"
-            @click="toggleLinkToolbar"
-        >
-            <svg-icon :name="button.svg" v-if="button.svg"></svg-icon>
-        </button>
-
-        <link-toolbar
-            v-if="showingToolbar"
-            :link-attrs="linkAttrs"
-            :config="config"
-            :bard="bard"
-            @updated="setLink"
-            @deselected="showingToolbar = false"
-        />
-    </div>
-
+    <popover ref="popover" placement="bottom-end" @closed="popoverClosed" :clickaway="false">
+        <template #trigger>
+            <button
+                class="bard-toolbar-button"
+                :class="{ active }"
+                v-tooltip="button.text"
+                :aria-label="button.text"
+                @click="toggleLinkToolbar"
+            >
+                <svg-icon :name="button.svg" v-if="button.svg"></svg-icon>
+            </button>
+        </template>
+        <template #default>
+            <link-toolbar
+                class="w-80"
+                ref="toolbar"
+                v-if="showingToolbar"
+                :link-attrs="linkAttrs"
+                :config="config"
+                :bard="bard"
+                @updated="setLink"
+                @canceled="close"
+            />
+        </template>
+    </popover>
 </template>
 
 <script>
@@ -54,10 +56,19 @@ export default {
             }
         },
 
+        close() {
+            this.showingToolbar = false;
+            this.$refs.popover.close();
+        },
+
+        popoverClosed() {
+            this.showingToolbar = false;
+        },
+
         setLink(attributes) {
             this.editor.commands.setLink(attributes);
             this.linkAttrs = null;
-            this.showingToolbar = false;
+            this.close();
             this.editor.view.dom.focus();
         }
 
diff --git a/resources/js/components/fieldtypes/grid/Cell.vue b/resources/js/components/fieldtypes/grid/Cell.vue
index e2e3d0f7897..7194234a73d 100644
--- a/resources/js/components/fieldtypes/grid/Cell.vue
+++ b/resources/js/components/fieldtypes/grid/Cell.vue
@@ -19,7 +19,7 @@
         </div>
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </td>
 
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index c4e937edf1c..876a86bb2ac 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -12,10 +12,10 @@
 
         <section :class="{'p-4': fullScreenMode}">
 
-            <small v-if="hasExcessRows" class="help-block text-red">
+            <small v-if="hasExcessRows" class="help-block text-red-500">
                 {{ __('Max Rows') }}: {{ maxRows }}
             </small>
-            <small v-else-if="hasNotEnoughRows" class="help-block text-red">
+            <small v-else-if="hasNotEnoughRows" class="help-block text-red-500">
                 {{ __('Min Rows') }}: {{ minRows }}
             </small>
 
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
index 2fb13efa5f1..0072b2c7dc6 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
@@ -1,15 +1,17 @@
 <template>
 
-    <div class="text-2xs">
+    <div class="flex flex-wrap">
         <div
             v-for="(item, i) in value"
             :key="item.id"
-            class="flex items-center"
-            :class="{ 'mb-2': i < value.length-1 }"
+            class="relationship-index-field-item"
+            :class="{ 'mb-1.5': i < value.length-1 }"
         >
-            <div v-if="item.published && item.published !== null"
-                class="little-dot mr-2" :class="[item.published ? 'bg-green' : 'bg-gray-400']" />
-            <a :href="item.edit_url">{{ item.title }}</a>
+            <div class="flex items-center shrink">
+                <div v-if="item.published && item.published !== null"
+                    class="little-dot h-1 w-1 mr-1" :class="[item.published ? 'bg-green-600' : 'bg-gray-400']" />
+                <a :href="item.edit_url" :title="item.title" v-text="item.title" />
+            </div>
         </div>
     </div>
 
diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index 0f460c5adcd..ff788dd39e3 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -36,7 +36,7 @@
             v-html="instructions" />
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
 
     </div>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index a3d96efaddd..2a4e39f0c00 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -8,24 +8,34 @@
 <div :class="{ wrapperClasses: fullScreenMode }">
 <div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-white': fullScreenMode }">
 
-    <header class="bg-white border-b py-3 pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
-        <h2 v-text="config.display" />
-        <button class="btn-close absolute top-2 right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+    <header class="bg-white fixed top-0 inset-x-0 border-b p-3 pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
+        <h2 v-text="config.display" class="flex-1" />
+            <div class="flex items-center">
+                <div class="btn-group">
+                    <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
+                        <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-1 text-gray-750" />
+                    </button>
+                    <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
+                        <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-1 text-gray-750" />
+                    </button>
+                </div>
+                <button class="btn-close ml-2" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+            </div>
     </header>
 
-    <section :class="{'p-4 bg-gray-200 h-full': fullScreenMode}">
+    <section :class="{'mt-12 p-4 bg-gray-200': fullScreenMode}">
 
-        <div class="flex justify-end">
+        <div class="flex justify-end" v-if="! fullScreenMode">
             <div class="btn-group">
                 <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 w-3.5" />
+                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-750" />
                 </button>
                 <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 w-3.5" />
+                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-0.5 text-gray-750" />
                 </button>
                 <button @click="fullScreenMode = !fullScreenMode" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
-                    <svg-icon name="expand-2" class="h-3.5 w-3.5" v-show="! fullScreenMode" />
-                    <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="fullScreenMode" />
+                    <svg-icon name="expand-2" class="h-3.5 px-0.5 text-gray-750" v-show="! fullScreenMode" />
+                    <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750" v-show="fullScreenMode" />
                 </button>
             </div>
         </div>
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index d4811907df1..0dbda8f21d9 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -38,6 +38,7 @@
                     item-class="sortable-item"
                     handle-class="sortable-item"
                     :value="items"
+                    :delay="75"
                     @input="input"
                 >
                     <div class="vs__selected-options-outside flex flex-wrap">
@@ -58,6 +59,15 @@
 
 </template>
 
+<style scoped>
+    .draggable-mirror {
+        display: none !important;
+    }
+    .draggable-source--is-dragging {
+        @apply opacity-75 bg-transparent border-dashed
+    }
+</style>
+
 <script>
 import { SortableList, SortableItem } from '../../sortable/Sortable';
 
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index b27154906d0..47042f428d8 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -271,7 +271,7 @@ export default {
             if (entry.published && entry.private) {
                 return 'bg-transparent border border-gray-600';
             } else if (entry.published) {
-                return 'bg-green';
+                return 'bg-green-600';
             } else {
                 return 'bg-gray-400';
             }
diff --git a/resources/js/components/login/LoginModal.vue b/resources/js/components/login/LoginModal.vue
index f3ae30d5b87..df8b451d05b 100644
--- a/resources/js/components/login/LoginModal.vue
+++ b/resources/js/components/login/LoginModal.vue
@@ -8,10 +8,10 @@
             </template>
             <template slot="body">
                 <div class="mb-4">
-                    <label :class="{ 'text-red': errors.password.length }">{{ __('Password for :username', { username: this.username }) }} <i class="required">*</i></label>
+                    <label :class="{ 'text-red-500': errors.password.length }">{{ __('Password for :username', { username: this.username }) }} <i class="required">*</i></label>
                     <input type="password" name="password" class="input-text" v-model="password" ref="password" @keydown.enter.prevent="submit" />
-                    <small class="block text-red mt-2" v-if="errors.username.length">{{ errors.username[0] }}</small>
-                    <small class="block text-red mt-2" v-if="errors.password.length">{{ errors.password[0] }}</small>
+                    <small class="block text-red-500 mt-2" v-if="errors.username.length">{{ errors.username[0] }}</small>
+                    <small class="block text-red-500 mt-2" v-if="errors.password.length">{{ errors.password[0] }}</small>
                 </div>
             </template>
             <template slot="footer">
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index 364968f38f8..d5bf33c222d 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -17,20 +17,20 @@
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validateDisplay }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
                         <text-input v-model="config.display" :focus="true" />
-                        <div v-if="validateDisplay" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validateDisplay" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validateUrl }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red-500">*</span></label>
                         <div class="help-block -mt-2">
                             <p v-text="__('Enter any internal or external URL.')"></p>
                         </div>
                         <text-input v-model="config.url" />
-                        <div v-if="validateUrl" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validateUrl" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index a8ac5fcf421..ca4f626a34a 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -17,9 +17,9 @@
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validate }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
                         <text-input v-model="section" :focus="true" />
-                        <div v-if="validate" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validate" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 4346852e1bd..28164d265b9 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -52,7 +52,7 @@
         <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
 
         <slot name="fieldtype" v-if="!loadingMeta">
-            <div class="text-xs text-red" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
+            <div class="text-xs text-red-500" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
             <component
                 v-else
                 :is="fieldtypeComponent"
@@ -76,7 +76,7 @@
             v-html="instructions" />
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </div>
     </publish-field-meta>
diff --git a/resources/js/components/roles/PublishForm.vue b/resources/js/components/roles/PublishForm.vue
index d13bee557a2..d7ad24cd0d9 100644
--- a/resources/js/components/roles/PublishForm.vue
+++ b/resources/js/components/roles/PublishForm.vue
@@ -31,7 +31,7 @@
                     v-model="handle"
                 />
 
-                <div class="text-xs text-red p-6 pt-0" v-if="initialHandle && handle != initialHandle">
+                <div class="text-xs text-red-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
                     {{ __('messages.role_change_handle_warning') }}
                 </div>
 
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 55c9191a97d..26772df939c 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -42,6 +42,10 @@ export default {
         constrainDimensions: {
             type: Boolean
         },
+        delay: {
+            type: Number,
+            default: 200
+        },
         disabled: {
             type: Boolean,
             default: false
@@ -54,7 +58,7 @@ export default {
             let options = Object.assign({}, {
                 draggable: `.${CSS.escape(this.itemClass)}`,
                 handle: `.${CSS.escape(this.handleClass)}`,
-                delay: 200,
+                delay: this.delay,
                 swapAnimation: { vertical: this.vertical, horizontal: !this.vertical },
                 plugins: [Plugins.SwapAnimation],
                 mirror: {
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index 5c9cc078190..722516e9c3d 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -112,7 +112,7 @@ export default {
         getStatusClass() {
             switch (this.page.status) {
                 case 'published':
-                    return 'bg-green';
+                    return 'bg-green-600';
                 case 'draft':
                     return 'bg-gray-400';
                 default:
diff --git a/resources/js/components/taxonomies/Listing.vue b/resources/js/components/taxonomies/Listing.vue
index 391c6c95541..746f666d319 100644
--- a/resources/js/components/taxonomies/Listing.vue
+++ b/resources/js/components/taxonomies/Listing.vue
@@ -6,7 +6,7 @@
                     <a :href="taxonomy.terms_url">{{ taxonomy.title }}</a>
                 </template>
                 <template slot="actions" slot-scope="{ row: taxonomy, index }">
-                    <dropdown-list>
+                    <dropdown-list placement="left-start" scroll>
                         <dropdown-item :text="__('Edit')" :redirect="taxonomy.edit_url" />
                         <dropdown-item :text="__('Edit Blueprints')" :redirect="taxonomy.blueprints_url" />
                         <dropdown-item
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index 9e7c55e541e..51a5dd4dad2 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -16,16 +16,38 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <div slot-scope="{ hasSelections }">
-                <div class="card p-0 relative">
-                    <data-list-filter-presets
-                        ref="presets"
-                        :active-preset="activePreset"
-                        :preferences-prefix="preferencesPrefix"
-                        @selected="selectPreset"
-                        @reset="filtersReset"
-                    />
-                    <div class="data-list-header">
+                <div class="card overflow-hidden p-0 relative">
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+                    <div v-show="showFilters">
                         <data-list-filters
+                            ref="filters"
                             :filters="filters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
@@ -33,6 +55,7 @@
                             :active-filter-badges="activeFilterBadges"
                             :active-count="activeFilterCount"
                             :search-query="searchQuery"
+                            :is-searching="showFilters"
                             :saves-presets="true"
                             :preferences-prefix="preferencesPrefix"
                             @filter-changed="filterChanged"
@@ -70,7 +93,7 @@
                             <span class="font-mono text-2xs">{{ term.slug }}</span>
                         </template>
                         <template slot="actions" slot-scope="{ row: term, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="left-start" scroll>
                                 <dropdown-item :text="__('View')" :redirect="term.permalink" />
                                 <dropdown-item :text="__('Edit')" :redirect="term.edit_url" />
                                 <div class="divider" />
diff --git a/resources/js/components/terms/PublishActions.vue b/resources/js/components/terms/PublishActions.vue
index 919f48af1b1..867a7abcce5 100644
--- a/resources/js/components/terms/PublishActions.vue
+++ b/resources/js/components/terms/PublishActions.vue
@@ -52,7 +52,7 @@
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-red" v-if="action === 'schedule'">
+                    <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
                         <div class="pt-px w-4 mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index af963745986..e464934995f 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -8,7 +8,7 @@
                 <div class="flex items-center">
                     <span v-if="! isCreating"
                         class="little-dot mr-2"
-                        :class="{ 'bg-green-light': published, 'bg-gray-600': !published }" />
+                        :class="{ 'bg-green-600': published, 'bg-gray-600': !published }" />
                     <span v-html="$options.filters.striptags(title)" />
                 </div>
             </h1>
@@ -130,7 +130,7 @@
                                 <div class="border-t p-4" v-if="revisionsEnabled">
                                     <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
                                     <div class="mb-1 flex items-center" v-if="published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('Entry has a published version')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-else="published">
@@ -146,7 +146,7 @@
                                         <span class="text-2xs" v-text="__('Entry has unpublished changes')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('This is the published version')"></span>
                                     </div>
                                     <button
@@ -170,9 +170,9 @@
                                     >
                                         <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
                                             <span class="little-dot mr-2" :class="{
-                                                'bg-green': option.published,
+                                                'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
-                                                'bg-red': !option.exists
+                                                'bg-red-500': !option.exists
                                             }" />
                                             {{ option.name }}
                                             <loading-graphic :size="14" text="" class="ml-2" v-if="localizing === option.handle" />
diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
index 2ccb8675e2e..90807793b1e 100644
--- a/resources/js/components/updater/Updater.vue
+++ b/resources/js/components/updater/Updater.vue
@@ -28,7 +28,7 @@
                 <h4 v-text="__('messages.addon_has_more_releases_beyond_license_heading')" />
                 <p v-text="__('messages.addon_has_more_releases_beyond_license_body')" />
             </div>
-            <button class="btn btn-sm" v-text="__('View additional releases')" />
+            <button class="btn btn-xs" v-text="__('View additional releases')" />
         </div>
 
         <template v-if="showingUnlicensedReleases">
diff --git a/resources/js/components/user-groups/PublishForm.vue b/resources/js/components/user-groups/PublishForm.vue
index ebf7d4c5be6..7c4f7ef882f 100644
--- a/resources/js/components/user-groups/PublishForm.vue
+++ b/resources/js/components/user-groups/PublishForm.vue
@@ -29,7 +29,7 @@
                     v-model="handle"
                 />
 
-                <div class="text-xs text-red p-6 pt-0" v-if="initialHandle && handle != initialHandle">
+                <div class="text-xs text-red-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
                     {{ __('messages.role_change_handle_warning') }}
                 </div>
 
@@ -53,7 +53,7 @@
                                 @input="roles = $event" />
                         </div>
                     </publish-field-meta>
-                    <small class="help-block text-red mt-2 mb-0" v-if="errors.roles" v-text="errors.roles[0]" />
+                    <small class="help-block text-red-500 mt-2 mb-0" v-if="errors.roles" v-text="errors.roles[0]" />
                 </div>
 
             </div>
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 98494f60642..36f4a958d0e 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -1,4 +1,4 @@
-    <template>
+<template>
     <div>
 
         <div v-if="initializing" class="card loading">
@@ -8,16 +8,63 @@
         <data-list
             v-if="!initializing"
             ref="dataList"
-            :columns="columns"
             :rows="items"
+            :columns="columns"
             :sort="false"
             :sort-column="sortColumn"
             :sort-direction="sortDirection"
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">
-                    <div class="data-list-header">
-                        <data-list-search v-model="searchQuery" />
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+
+                   <div v-show="showFilters">
+                        <data-list-filters
+                            ref="filters"
+                            :filters="filters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :active-filter-badges="activeFilterBadges"
+                            :active-count="activeFilterCount"
+                            :search-query="searchQuery"
+                            :is-searching="showFilters"
+                            :saves-presets="true"
+                            :preferences-prefix="preferencesPrefix"
+                            @filter-changed="filterChanged"
+                            @search-changed="searchChanged"
+                            @saved="$refs.presets.setPreset($event)"
+                            @deleted="$refs.presets.refreshPresets()"
+                            @restore-preset="$refs.presets.viewPreset($event)"
+                            @reset="filtersReset"
+                        />
                     </div>
 
                     <div v-show="items.length === 0" class="p-6 text-center text-gray-500" v-text="__('No results')" />
@@ -42,15 +89,19 @@
                             </a>
                         </template>
                         <template slot="cell-roles" slot-scope="{ row: user, value: roles }">
-                            <span v-if="user.super" class="badge-pill-sm mr-1">{{ __('Super Admin') }}</span>
-                            <span v-if="!roles || roles.length === 0" />
-                            <span v-for="role in (roles || [])" class="badge-pill-sm mr-1">{{ role.title }}</span>
+                            <div class="role-index-field">
+                                <div v-if="user.super" class="role-index-field-item mr-1">{{ __('Super Admin') }}</div>
+                                <div v-if="!roles || roles.length === 0" />
+                                <div v-for="(role, i) in (roles || [])" class="role-index-field-item" :class="{ 'mb-1.5': i < roles.length-1 }">{{ role.title }}</div>
+                            </div>
                         </template>
                         <template slot="cell-groups" slot-scope="{ row: user, value: groups }">
-                            <span v-for="group in (groups || [])" class="badge-pill-sm mr-1">{{ group.title }}</span>
+                            <div class="groups-index-field">
+                                <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
+                            </div>
                         </template>
                         <template slot="actions" slot-scope="{ row: user, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="left-start" scroll>
                                 <dropdown-item :text="__('Edit')" :redirect="user.edit_url" v-if="user.editable" />
                                 <dropdown-item :text="__('View')" :redirect="user.edit_url" v-else />
                                 <data-list-inline-actions
diff --git a/resources/js/components/users/Wizard.vue b/resources/js/components/users/Wizard.vue
index c6fa7ff1c38..df3757ab7f4 100644
--- a/resources/js/components/users/Wizard.vue
+++ b/resources/js/components/users/Wizard.vue
@@ -21,7 +21,7 @@
                 <label class="font-bold text-base mb-1" for="email">{{ __('Email Address') }}*</label>
                 <input type="email" v-model="user.email" id="email" class="input-text" required autofocus tabindex="1">
 
-                <div class="text-2xs text-red mt-2 flex items-center" v-if="userExists">
+                <div class="text-2xs text-red-500 mt-2 flex items-center" v-if="userExists">
                     <svg-icon name="info-circle" class="h-4 w-4 mr-1 flex items-center mb-px"></svg-icon>
                     {{ __('This user already exists.') }}
                 </div>
diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php
index 62a62bbc62d..764c60a2caa 100644
--- a/resources/lang/en/messages.php
+++ b/resources/lang/en/messages.php
@@ -185,6 +185,9 @@
     'session_expiry_logged_out_for_inactivity' => 'You have been logged out because you\'ve been inactive for a while.',
     'session_expiry_logging_out_in_seconds' => 'You have been inactive for a while and will be logged out in :seconds seconds. Click to extend your session.',
     'session_expiry_new_window' => 'Opens in a new window. Come back once you\'ve logged in.',
+    'status_expired_with_date' => 'Expired on :date',
+    'status_published_with_date' => 'Published on :date',
+    'status_scheduled_with_date' => 'Scheduled to be published on :date',
     'show_slugs_instructions' => 'Whether to display slugs in the tree view.',
     'tab_sections_instructions' => 'The fields in each section will be grouped together into tabs. Create new fields, reuse existing fields, or import entire groups of fields from existing fieldsets.',
     'taxonomies_blueprints_instructions' => 'Terms in this taxonomy may use any of these blueprints.',
diff --git a/resources/svg/add-bold.svg b/resources/svg/add-bold.svg
new file mode 100644
index 00000000000..4467c834a28
--- /dev/null
+++ b/resources/svg/add-bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M7 1v12M13 7H1"/></svg>
\ No newline at end of file
diff --git a/resources/svg/bullet.svg b/resources/svg/bullet.svg
deleted file mode 100644
index f175b833d70..00000000000
--- a/resources/svg/bullet.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/resources/svg/delete-x.svg b/resources/svg/delete-x.svg
deleted file mode 100644
index 219ea003fac..00000000000
--- a/resources/svg/delete-x.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4"><path fill="currentColor" d="M3.045 2.141a.2.2 0 0 1 0-.283l.81-.81a.494.494 0 0 0 0-.697L3.65.144a.494.494 0 0 0-.697 0l-.81.81a.2.2 0 0 1-.284 0l-.81-.81a.494.494 0 0 0-.697 0L.144.351a.494.494 0 0 0 0 .697l.81.81a.2.2 0 0 1 0 .283l-.81.81a.494.494 0 0 0 0 .697l.207.208a.494.494 0 0 0 .697 0l.81-.81a.2.2 0 0 1 .284 0l.81.81a.494.494 0 0 0 .697 0l.207-.208a.494.494 0 0 0 0-.696Z"/></svg>
\ No newline at end of file
diff --git a/resources/svg/filter-lines.svg b/resources/svg/filter-lines.svg
new file mode 100644
index 00000000000..faeabd06413
--- /dev/null
+++ b/resources/svg/filter-lines.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.51 12.211h4.98M3.182 8.737h7.636M1.897 5.263h10.206M.81 1.788h12.38"/></svg>
\ No newline at end of file
diff --git a/resources/svg/h1.svg b/resources/svg/h1.svg
index 20cb0e6c165..31d94701518 100644
--- a/resources/svg/h1.svg
+++ b/resources/svg/h1.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.57 12.94"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm4.16 4.81-.93.72a.55.55 0 0 1-.35.12c-.16 0-.33-.07-.42-.19-.08-.1-.11-.2-.11-.3 0-.18.1-.34.23-.45l1.73-1.34c.11-.08.27-.14.41-.14.3 0 .53.23.53.52v8.66c0 .29-.23.52-.54.52s-.55-.23-.55-.52V4.8z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M11.39 7.65v5.1M9.7 8.72h.42c.7 0 1.27-.57 1.27-1.27m1.7 5.3h-3.4m-8.69 0V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h2.svg b/resources/svg/h2.svg
index 39e9400b856..74daade3ce9 100644
--- a/resources/svg/h2.svg
+++ b/resources/svg/h2.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.03 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm7.22 11.57c.27 0 .48.23.48.5 0 .29-.22.52-.48.52h-4.51c-.36 0-.55-.22-.55-.5s.2-.48.34-.63c1.47-1.54 3.75-3.97 3.75-5.89 0-.85-.48-1.54-1.45-1.54-.59 0-1.09.25-1.41.98-.12.26-.27.36-.51.36-.33 0-.51-.26-.51-.55 0-.07.01-.12.03-.19.37-1.15 1.39-1.69 2.49-1.69 1.67 0 2.44 1.23 2.44 2.41 0 2.67-3.03 5.55-3.74 6.22h3.62z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M12.93 12.75H9.61V12c0-.53.29-1 .74-1.22l1.84-.86c.44-.21.73-.67.73-1.18 0-.71-.54-1.29-1.21-1.29h-.86c-.54 0-1 .37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h3.svg b/resources/svg/h3.svg
index 0a865148bd5..fffbe155ffd 100644
--- a/resources/svg/h3.svg
+++ b/resources/svg/h3.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.61 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm4.71 3.03c1.37 0 2.26.91 2.26 2.41 0 1.04-.45 1.88-1.28 2.31 1.02.22 1.59 1.21 1.59 2.33 0 1.71-1.11 2.77-2.58 2.77-.99 0-1.85-.37-2.36-1.2a.888.888 0 0 1-.13-.42c0-.16.06-.31.19-.41.08-.05.16-.1.25-.1.17 0 .32.11.43.29.43.59.95.75 1.58.75 1.02 0 1.62-.75 1.62-1.72 0-1.02-.69-1.66-1.68-1.66h-.2c-.31 0-.5-.23-.5-.55s.2-.55.5-.55h.14c.73 0 1.42-.67 1.42-1.65s-.5-1.51-1.34-1.51c-.63 0-1.01.22-1.31.67-.12.16-.27.25-.42.25-.08 0-.16-.03-.25-.08a.465.465 0 0 1-.18-.38c0-.12.04-.25.11-.37.47-.76 1.21-1.17 2.12-1.17z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M9.54 11.87c.18.52.67.88 1.25.88h.88c.73 0 1.33-.59 1.33-1.33v-.22c0-.73-.59-1.33-1.33-1.33h-.44.33c.67 0 1.22-.54 1.22-1.22s-.54-1.22-1.22-1.22h-.66c-.56 0-1.03.37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h4.svg b/resources/svg/h4.svg
index dce794f1655..c540cb00915 100644
--- a/resources/svg/h4.svg
+++ b/resources/svg/h4.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.43 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm6.97 10.48v1.84c0 .31-.22.55-.47.55s-.47-.23-.47-.55v-1.84h-3.33c-.27 0-.51-.25-.51-.56 0-.12.04-.26.11-.38l3.17-5.91c.11-.2.24-.34.46-.34.26 0 .44.23.44.5 0 .1-.02.22-.08.33l-2.84 5.26h2.58V7.27c0-.31.22-.55.47-.55s.47.23.47.55v2.11h.65c.27 0 .5.26.5.55s-.22.55-.5.55h-.65z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M12.36 11.42H9.15c-.18 0-.32-.14-.32-.32 0-.08.03-.15.08-.21l2.92-3.34c.06-.07.14-.1.23-.1.17 0 .3.14.3.3v3.67zm0 0h.88m-.88 0v1.33M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h5.svg b/resources/svg/h5.svg
index 3f0efda3b80..13943ffe8d9 100644
--- a/resources/svg/h5.svg
+++ b/resources/svg/h5.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.1 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm3.58 11.02c.43.55.97.74 1.52.74.95 0 1.67-.85 1.67-2.02s-.78-2.02-2.02-2.02c-.2 0-.39.03-.58.05-.03 0-.07.01-.11.01-.32 0-.52-.26-.52-.61v-.11l.37-3.38c.04-.3.26-.52.51-.52h2.85c.25 0 .45.23.45.55s-.2.55-.45.55h-2.47l-.31 2.58c.18-.05.43-.1.66-.1 1.51 0 2.62 1.15 2.62 2.96 0 1.98-1.23 3.15-2.71 3.15-.78 0-1.59-.25-2.27-1.23-.06-.1-.09-.2-.09-.33 0-.16.06-.33.19-.42.09-.07.18-.11.27-.11.14 0 .27.1.4.26z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75m6.07.92H9.95l-.44 2.65.32-.16c.37-.18.77-.28 1.19-.28h.7c.73 0 1.33.59 1.33 1.33v.44c0 .73-.59 1.33-1.33 1.33h-.88c-.58 0-1.07-.37-1.25-.88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h6.svg b/resources/svg/h6.svg
index bf3c68a9f1f..135e0238703 100644
--- a/resources/svg/h6.svg
+++ b/resources/svg/h6.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.32 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm3.97 8.1c.31-.72.91-1.27 1.82-1.27 1.27 0 2.21 1.2 2.21 2.93 0 1.88-1.18 3.08-2.38 3.08-1.72 0-2.68-1.62-2.68-3.52 0-3.25 1.79-5.54 3.34-6.18.08-.03.17-.05.24-.05.17 0 .3.1.36.3.02.07.03.12.03.19 0 .23-.14.41-.33.49-1.17.57-2.31 1.9-2.62 4.02zm-.1 1.23c0 1.3.57 2.43 1.73 2.43.85 0 1.46-.89 1.46-1.91 0-1.1-.53-1.99-1.57-1.99-.9 0-1.45.8-1.62 1.47z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75m2.75 4.9v-.22c0-.73.59-1.33 1.33-1.33h.88c.73 0 1.33.59 1.33 1.33v.22c0 .73-.59 1.33-1.33 1.33h-.88c-.73 0-1.33-.59-1.33-1.33zm0 0V8.77c0-.73.59-1.33 1.33-1.33h.88c.58 0 1.07.37 1.25.88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 4230c4018c7..f6b7e23bfa3 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -39,13 +39,13 @@
             <div class="mb-8">
                 <label class="mb-2" for="input-email">{{ __('Email') }}</label>
                 <input type="text" class="input-text input-text" name="email" value="{{ old('email') }}" autofocus id="input-email">
-                @if ($hasError('email'))<div class="text-red text-xs mt-2">{{ $errors->first('email') }}</div>@endif
+                @if ($hasError('email'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('email') }}</div>@endif
             </div>
 
             <div class="mb-8">
                 <label class="mb-2" for="input-password">{{ __('Password') }}</label>
                 <input type="password" class="input-text input-text" name="password" id="input-password">
-                @if ($hasError('password'))<div class="text-red text-xs mt-2">{{ $errors->first('password') }}</div>@endif
+                @if ($hasError('password'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('password') }}</div>@endif
             </div>
             <div class="flex justify-between items-center">
                 <label for="remember-me" class="flex items-center cursor-pointer">
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 19c3808efcd..353ee5016cf 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -23,7 +23,7 @@
                 <input id="email" type="text" class="input-text input-text" name="email" value="{{ old('email') }}" >
 
                 @error('email', 'user.forgot_password')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index d45c71e61ea..a34fd5a8692 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -21,7 +21,7 @@
                 <input id="email" type="email" class="input-text input-text" name="email" value="{{ $email ?? old('email') }}" autofocus required>
 
                 @error('email')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
@@ -31,7 +31,7 @@
                 <input id="password" type="password" class="input-text input-text" name="password" required>
 
                 @error('password')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
diff --git a/resources/views/auth/protect/password.antlers.html b/resources/views/auth/protect/password.antlers.html
index 824bef61e5c..d469fb5e489 100644
--- a/resources/views/auth/protect/password.antlers.html
+++ b/resources/views/auth/protect/password.antlers.html
@@ -35,7 +35,7 @@ <h2 class="text-xl mt-4 font-normal mb-4">{{ trans key="Protected Page" }}</h2>
 
             {{ get_errors:all bag="passwordProtect" }}
                 {{ messages }}
-                    <div class="mt-6 text-sm text-red-600">{{ message }}</div>
+                    <div class="mt-6 text-sm text-red-500-600">{{ message }}</div>
                 {{ /messages }}
             {{ /get_errors:all }}
 
diff --git a/resources/views/blueprints/index.blade.php b/resources/views/blueprints/index.blade.php
index 9823110228a..030706f5b9a 100644
--- a/resources/views/blueprints/index.blade.php
+++ b/resources/views/blueprints/index.blade.php
@@ -38,7 +38,7 @@
                         <td>
                             <div class="flex items-center">
                                 <div class="w-4 h-4 mr-4">@cp_svg('content-writing')</div>
-                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
+                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
                                 <a href="{{ cp_route('collections.blueprints.edit', [$collection, $blueprint]) }}">{{ $blueprint->title() }}</a>
                             </div>
                         </td>
@@ -62,7 +62,7 @@
                         <td>
                             <div class="flex items-center">
                                 <div class="w-4 h-4 mr-4">@cp_svg('tags')</div>
-                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
+                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
                                 <a href="{{ cp_route('taxonomies.blueprints.edit', [$taxonomy, $blueprint]) }}">{{ $blueprint->title() }}</a>
                             </div>
                         </td>
diff --git a/resources/views/collections/blueprints/create.blade.php b/resources/views/collections/blueprints/create.blade.php
index 590ab0c104e..f499ec074d9 100644
--- a/resources/views/collections/blueprints/create.blade.php
+++ b/resources/views/collections/blueprints/create.blade.php
@@ -17,7 +17,7 @@
                     {{ __('statamic::messages.blueprints_title_instructions') }}
                 </div>
                 @if ($errors->has('title'))
-                    <div class="text-red text-xs mt-2">{{ $errors->first('title') }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $errors->first('title') }}</div>
                 @endif
             </div>
         </div>
diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index 252edb1f8ac..4f98ead6813 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -50,7 +50,7 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $site->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                         {{ $site->key() ?? __('No license key') }}
                     </td>
                     <td class="relative">
@@ -59,7 +59,7 @@
                             <span class="text-2xs">({{ trans_choice('and :count more', $site->additionalDomainCount()) }})</span>
                         @endif
                     </td>
-                    <td class="text-right text-red">{{ $site->invalidReason() }}</td>
+                    <td class="text-right text-red-500">{{ $site->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -69,11 +69,11 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $statamic->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                         Statamic @if ($statamic->pro())<span class="text-pink">Pro</span>@else Free @endif
                     </td>
                     <td>{{ $statamic->version() }}</td>
-                    <td class="text-right text-red">{{ $statamic->invalidReason() }}</td>
+                    <td class="text-right text-red-500">{{ $statamic->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -87,12 +87,12 @@
                 @foreach ($addons as $addon)
                     <tr>
                         <td class="w-64 mr-2">
-                            <span class="little-dot {{ $addon->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                             <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray hover:text-blue">{{ $addon->name() }}</a></span>
                             @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600">{{ $addon->edition() ?? '' }}</span>@endif
                         </td>
                         <td>{{ $addon->version() }}</td>
-                        <td class="text-right text-red">{{ $addon->invalidReason() }}</td>
+                        <td class="text-right text-red-500">{{ $addon->invalidReason() }}</td>
                     </tr>
                 @endforeach
             </table>
@@ -106,7 +106,7 @@
                 @foreach ($unlistedAddons as $addon)
                     <tr>
                         <td class="w-64 font-bold mr-2">
-                            <span class="little-dot bg-green mr-2"></span>
+                            <span class="little-dot bg-green-600 mr-2"></span>
                             {{ $addon->name() }}
                         </td>
                         <td>{{ $addon->version() }}</td>
diff --git a/resources/views/nav/duplicates.blade.php b/resources/views/nav/duplicates.blade.php
index 036fd2b76ce..bc753f5ebf3 100644
--- a/resources/views/nav/duplicates.blade.php
+++ b/resources/views/nav/duplicates.blade.php
@@ -1,6 +1,6 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
         <i>{!! $item->icon() !!}</i><span>{{ __($item->name()) }}</span>
-        <span class="badge-sm bg-red ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
+        <span class="badge-sm bg-red-500 ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
     </a>
 </li>
diff --git a/resources/views/partials/licensing-alerts.blade.php b/resources/views/partials/licensing-alerts.blade.php
index 66129184972..6a2c45118ec 100644
--- a/resources/views/partials/licensing-alerts.blade.php
+++ b/resources/views/partials/licensing-alerts.blade.php
@@ -20,7 +20,7 @@
             <div class="
                 py-3 px-4 text-sm w-full rounded-md
                 @if ($licenses->isOnTestDomain()) bg-gray-800 text-gray-300 @endif
-                @if ($licenses->isOnPublicDomain()) bg-red text-white @endif
+                @if ($licenses->isOnPublicDomain()) bg-red-500 text-white @endif
             ">
                 @if ($licenses->isOnTestDomain())
                     <div class="flex items-center justify-between">
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index 2c1ecb23ce5..bbf9c75e9cf 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -149,10 +149,10 @@
 
         <h6 class="mb-4">Small</h6>
         <div class="flex">
-            <button class="mr-4 btn btn-sm">Default Button</button>
-            <button class="mr-4 btn-primary btn-sm">Primary Button</button>
-            <button class="mr-4 btn-danger btn-sm">Danger Button</button>
-            <button class="btn-flat btn-sm">Flat Button</button>
+            <button class="mr-4 btn btn-xs">Default Button</button>
+            <button class="mr-4 btn-primary btn-xs">Primary Button</button>
+            <button class="mr-4 btn-danger btn-xs">Danger Button</button>
+            <button class="btn-flat btn-xs">Flat Button</button>
         </div>
     </div>
 
@@ -205,14 +205,21 @@
         <h6 class="mb-4">Other Colors (needs simplifying)</h6>
         <div class="flex text-sm text-center">
             <div class="text-black bg-blue p-6 flex-1">Blue</div>
-            <div class="text-black bg-green p-6 flex-1">Green</div>
-            <div class="text-black bg-red p-6 flex-1">Red</div>
+            <div class="text-black bg-green-600 p-6 flex-1">Green</div>
             <div class="text-black bg-orange-light border border-orange p-6 m-1 flex-1">Orange</div>
             <div class="text-black bg-yellow border border-yellow-dark p-6 m-1 flex-1">Yellow</div>
             <div class="text-black bg-yellow-dark p-6 m-1 flex-1">Yellow Dark</div>
             <div class="text-black bg-pink border border-pink-dark m-1 p-6 flex-1">Pink</div>
             <div class="text-black bg-purple-light border border-purple p-6 flex-1">Purple</div>
         </div>
+
+        <h6 class="my-4">Reds</h6>
+        <div class="flex text-sm text-center space-x-1">
+            <div class="text-black bg-red-100 border border-red-200 p-6 flex-1">Red Lighter</div>
+            <div class="text-black bg-red-400 p-6 flex-1">Red Light</div>
+            <div class="text-black bg-red-500 p-6 flex-1">Red</div>
+            <div class="text-black bg-red-700 p-6 flex-1">Red Dark</div>
+        </div>
     </div>
 
     <h2 class="mb-2">Widgets</h2>
@@ -227,7 +234,7 @@
                 </div>
                 <div class="text-4xl mb-4">89</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-sm">8.54% Increase</span>
                 </div>
             </div>
@@ -242,7 +249,7 @@
                 </div>
                 <div class="text-4xl mb-4">35</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-sm">2.15% Increase</span>
                 </div>
             </div>
@@ -257,7 +264,7 @@
                 </div>
                 <div class="text-4xl mb-4 text-gray-400">251</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-gray-400 text-sm">8.54% Increase</span>
                 </div>
             </div>
diff --git a/resources/views/updater/index.blade.php b/resources/views/updater/index.blade.php
index 1d4a4380a98..d03dbb9b907 100644
--- a/resources/views/updater/index.blade.php
+++ b/resources/views/updater/index.blade.php
@@ -34,7 +34,7 @@ class="btn-primary btn-lg">{{ __('Try again') }}</a>
                     <td class="w-64"><a href="{{ route('statamic.cp.updater.product', 'statamic') }}" class="text-blue font-bold">Statamic</a></td>
                     <td>{{ $statamic->currentVersion() }}</td>
                     @if ($count = $statamic->availableUpdatesCount())
-                        <td class="text-right"><span class="badge-sm bg-green btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                        <td class="text-right"><span class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
                         <td class="text-right">{{ __('Up to date') }}</td>
                     @endif
@@ -52,7 +52,7 @@ class="text-blue font-bold mr-2">{{ $addon -> name() }}</a>
                     <td>{{ $addon -> version() }}</td>
                     @if ($count = $addon->changelog()->availableUpdatesCount())
                     <td class="text-right"><span
-                            class="badge-sm bg-green btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                            class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
                     <td class="text-right">{{ __('Up to date') }}</td>
                     @endif
diff --git a/resources/views/utilities/email.blade.php b/resources/views/utilities/email.blade.php
index aa78772c3f9..0655b38046b 100644
--- a/resources/views/utilities/email.blade.php
+++ b/resources/views/utilities/email.blade.php
@@ -20,7 +20,7 @@
                 <button type="submit" class="btn-primary">{{ __('Send Test Email') }}</button>
             </div>
             @if ($errors->has('email'))
-                <p class="mt-2"><small class="help-block text-red">{{ $errors->first('email') }}</small></p>
+                <p class="mt-2"><small class="help-block text-red-500">{{ $errors->first('email') }}</small></p>
             @endif
         </form>
     </div>
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index 3d8c7f6e4a4..ca29618c901 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -23,7 +23,7 @@
 
     <div class="card p-0">
         @if ($errors->has('indexes'))
-            <p class="p-4"><small class="help-block text-red">{{ $errors->first() }}</small></p>
+            <p class="p-4"><small class="help-block text-red-500">{{ $errors->first() }}</small></p>
         @endif
 
         <table class="data-table">
@@ -72,7 +72,7 @@
                             <form method="POST" action="{{ cp_route('utilities.search') }}">
                                 @csrf
                                 <input type="hidden" name="indexes[]" value="{{ $index->name() }}">
-                                <button type="submit" class="btn btn-sm">{{ __('Update') }}</button>
+                                <button type="submit" class="btn btn-xs">{{ __('Update') }}</button>
                             </form>
                         </td>
                     </tr>
diff --git a/resources/views/widgets/updater.blade.php b/resources/views/widgets/updater.blade.php
index 2dd1fcea7ca..4aea9f2181b 100644
--- a/resources/views/widgets/updater.blade.php
+++ b/resources/views/widgets/updater.blade.php
@@ -7,7 +7,7 @@
             <span>{{ __('Updates') }}</span>
         </h2>
         @if ($count)
-            <a href="{{ cp_route('updater') }}" class="badge-sm bg-green text-white">
+            <a href="{{ cp_route('updater') }}" class="badge-sm bg-green-600 text-white">
                 {{ trans_choice('1 update available|:count updates available', $count) }}
             </a>
         @endif
diff --git a/src/Auth/UserRepository.php b/src/Auth/UserRepository.php
index 5262f7db0bd..2f09ba0c5b7 100644
--- a/src/Auth/UserRepository.php
+++ b/src/Auth/UserRepository.php
@@ -64,8 +64,8 @@ public function blueprint()
         $blueprint->ensureField('email', ['type' => 'text', 'input_type' => 'email', 'display' => 'Email Address', 'listable' => true]);
 
         if (Statamic::pro()) {
-            $blueprint->ensureField('roles', ['type' => 'user_roles', 'mode' => 'select', 'width' => 50, 'listable' => true]);
-            $blueprint->ensureField('groups', ['type' => 'user_groups', 'mode' => 'select', 'width' => 50, 'listable' => true]);
+            $blueprint->ensureField('roles', ['type' => 'user_roles', 'mode' => 'select', 'width' => 50, 'listable' => true, 'filterable' => false]);
+            $blueprint->ensureField('groups', ['type' => 'user_groups', 'mode' => 'select', 'width' => 50, 'listable' => true, 'filterable' => false]);
         } else {
             $blueprint->removeField('roles');
             $blueprint->removeField('groups');
diff --git a/src/Console/Commands/stubs/filter.php.stub b/src/Console/Commands/stubs/filter.php.stub
index c8c669807fa..170767bfc3d 100644
--- a/src/Console/Commands/stubs/filter.php.stub
+++ b/src/Console/Commands/stubs/filter.php.stub
@@ -6,13 +6,6 @@ use Statamic\Query\Scopes\Filter;
 
 class DummyClass extends Filter
 {
-    /**
-     * Pin the filter.
-     *
-     * @var bool
-     */
-    public $pinned = false;
-
     /**
      * Define the filter's title.
      *
diff --git a/src/Http/Controllers/CP/Collections/CollectionsController.php b/src/Http/Controllers/CP/Collections/CollectionsController.php
index 041bca2e396..4c94b6a1fa9 100644
--- a/src/Http/Controllers/CP/Collections/CollectionsController.php
+++ b/src/Http/Controllers/CP/Collections/CollectionsController.php
@@ -75,6 +75,11 @@ public function show(Request $request, $collection)
 
         $columns = $blueprint
             ->columns()
+            ->prepend(Column::make('status')
+                ->listable(true)
+                ->visible(true)
+                ->defaultVisibility(true)
+                ->sortable(false), 'status')
             ->setPreferred("collections.{$collection->handle()}.columns")
             ->rejectUnlisted()
             ->values();
diff --git a/src/Http/Controllers/CP/Users/UsersController.php b/src/Http/Controllers/CP/Users/UsersController.php
index 53edab1d588..e5d8180b634 100644
--- a/src/Http/Controllers/CP/Users/UsersController.php
+++ b/src/Http/Controllers/CP/Users/UsersController.php
@@ -69,7 +69,9 @@ protected function json($request)
             ? UserGroup::find($request->group)->queryUsers()
             : $this->indexQuery();
 
-        $activeFilterBadges = $this->queryFilters($query, $request->filters);
+        $activeFilterBadges = $this->queryFilters($query, $request->filters, [
+            'blueprints' => ['user'],
+        ]);
 
         $users = $query
             ->orderBy(request('sort', 'email'), request('order', 'asc'))
diff --git a/src/Http/Resources/CP/Entries/Entries.php b/src/Http/Resources/CP/Entries/Entries.php
index c0fd9e4a01e..2f15f40024d 100644
--- a/src/Http/Resources/CP/Entries/Entries.php
+++ b/src/Http/Resources/CP/Entries/Entries.php
@@ -3,6 +3,7 @@
 namespace Statamic\Http\Resources\CP\Entries;
 
 use Illuminate\Http\Resources\Json\ResourceCollection;
+use Statamic\CP\Column;
 use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
 class Entries extends ResourceCollection
@@ -31,6 +32,14 @@ private function setColumns()
     {
         $columns = $this->blueprint->columns();
 
+        $status = Column::make('status')
+            ->listable(true)
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(false);
+
+        $columns->prepend($status, 'status');
+
         if ($key = $this->columnPreferenceKey) {
             $columns->setPreferred($key);
         }
diff --git a/src/Http/Resources/CP/Entries/ListedEntry.php b/src/Http/Resources/CP/Entries/ListedEntry.php
index a63f83e2549..cd1a30fd5a3 100644
--- a/src/Http/Resources/CP/Entries/ListedEntry.php
+++ b/src/Http/Resources/CP/Entries/ListedEntry.php
@@ -33,6 +33,7 @@ public function toArray($request)
         return [
             'id' => $entry->id(),
             'published' => $entry->published(),
+            'status' => $entry->status(),
             'private' => $entry->private(),
             'date' => $this->when($collection->dated(), function () {
                 return $this->resource->date()->inPreferredFormat();
@@ -60,9 +61,13 @@ protected function values($extra = [])
                 $value = $extra[$key] ?? $this->resource->value($key);
             }
 
-            $value = $this->blueprint
-                ->field($key)
-                ->setValue($value)
+            $field = $this->blueprint->field($key);
+
+            if (! $field) {
+                return [$key => $value];
+            }
+
+            $value = $field->setValue($value)
                 ->setParent($this->resource)
                 ->preProcessIndex()
                 ->value();
diff --git a/src/Http/View/Composers/JavascriptComposer.php b/src/Http/View/Composers/JavascriptComposer.php
index d9113d48943..66f0fe06132 100644
--- a/src/Http/View/Composers/JavascriptComposer.php
+++ b/src/Http/View/Composers/JavascriptComposer.php
@@ -38,6 +38,7 @@ public function compose(View $view)
             'user' => $this->user($user),
             'paginationSize' => config('statamic.cp.pagination_size'),
             'paginationSizeOptions' => config('statamic.cp.pagination_size_options'),
+            'alwaysShowFilters' => config('statamic.cp.always_show_filters'),
             'translationLocale' => app('translator')->locale(),
             'translations' => app('translator')->toJson(),
             'sites' => $this->sites(),
diff --git a/src/Query/Scopes/Filter.php b/src/Query/Scopes/Filter.php
index 4a3c685861d..0d50d997918 100644
--- a/src/Query/Scopes/Filter.php
+++ b/src/Query/Scopes/Filter.php
@@ -11,7 +11,6 @@ abstract class Filter extends Scope implements Arrayable
     use HasTitle, HasFields;
 
     protected $context = [];
-    protected $pinned = false;
 
     public function visibleTo($key)
     {
@@ -59,7 +58,6 @@ public function toArray()
             'handle' => $this->handle(),
             'title' => $this->title(),
             'extra' => $this->extra(),
-            'pinned' => $this->pinned(),
             'auto_apply' => $this->autoApply(),
             'fields' => $this->fields()->toPublishArray(),
             'meta' => $this->fields()->meta(),
diff --git a/src/Query/Scopes/Filters/Fields.php b/src/Query/Scopes/Filters/Fields.php
index 69aa3fd22b0..3de57154fcd 100644
--- a/src/Query/Scopes/Filters/Fields.php
+++ b/src/Query/Scopes/Filters/Fields.php
@@ -2,8 +2,10 @@
 
 namespace Statamic\Query\Scopes\Filters;
 
+use Statamic\Facades\Blueprint;
 use Statamic\Facades\Collection;
 use Statamic\Facades\Taxonomy;
+use Statamic\Facades\User;
 use Statamic\Query\Scopes\Filter;
 use Statamic\Support\Arr;
 
@@ -59,7 +61,7 @@ public function badge($values)
 
     public function visibleTo($key)
     {
-        return in_array($key, ['entries', 'entries-fieldtype', 'terms']);
+        return in_array($key, ['entries', 'entries-fieldtype', 'terms', 'users']);
     }
 
     protected function getFields()
@@ -87,6 +89,14 @@ protected function getBlueprints()
             });
         }
 
+        if (isset($this->context['blueprints'])) {
+            return collect($this->context['blueprints'])->map(function ($handle) {
+                return $handle === 'user'
+                    ? User::blueprint()
+                    : Blueprint::find($handle);
+            });
+        }
+
         return collect();
     }
 }
diff --git a/src/Query/Scopes/Filters/Site.php b/src/Query/Scopes/Filters/Site.php
index 5e5ad092108..ceb3368517c 100644
--- a/src/Query/Scopes/Filters/Site.php
+++ b/src/Query/Scopes/Filters/Site.php
@@ -7,8 +7,6 @@
 
 class Site extends Filter
 {
-    protected $pinned = true;
-
     public static function title()
     {
         return __('Site');
diff --git a/src/Query/Scopes/Filters/Status.php b/src/Query/Scopes/Filters/Status.php
index d0ab3c540aa..ff0688d8ddb 100644
--- a/src/Query/Scopes/Filters/Status.php
+++ b/src/Query/Scopes/Filters/Status.php
@@ -7,8 +7,6 @@
 
 class Status extends Filter
 {
-    public $pinned = true;
-
     public static function title()
     {
         return __('Status');
diff --git a/src/Query/Scopes/Filters/UserGroup.php b/src/Query/Scopes/Filters/UserGroup.php
index 2f5de3edcd4..360b34c1d1d 100644
--- a/src/Query/Scopes/Filters/UserGroup.php
+++ b/src/Query/Scopes/Filters/UserGroup.php
@@ -25,7 +25,7 @@ public function fieldItems()
 
     public function apply($query, $values)
     {
-        $query->where('group', $values['group']);
+        $query->where('groups/'.$values['group'], true);
     }
 
     public function badge($values)
diff --git a/src/Query/Scopes/Filters/UserRole.php b/src/Query/Scopes/Filters/UserRole.php
index 653cde5b5bb..71a3a77a490 100644
--- a/src/Query/Scopes/Filters/UserRole.php
+++ b/src/Query/Scopes/Filters/UserRole.php
@@ -25,7 +25,11 @@ public function fieldItems()
 
     public function apply($query, $values)
     {
-        $query->where('role', $values['role']);
+        if ($values['role'] === 'super') {
+            $query->where('super', true);
+        } else {
+            $query->where('roles/'.$values['role'], true);
+        }
     }
 
     public function badge($values)
diff --git a/src/Stache/Indexes/Users/Role.php b/src/Stache/Indexes/Users/Role.php
new file mode 100644
index 00000000000..1fe813b3a46
--- /dev/null
+++ b/src/Stache/Indexes/Users/Role.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Statamic\Stache\Indexes\Users;
+
+use Statamic\Stache\Indexes\Value;
+use Statamic\Support\Str;
+
+class Role extends Value
+{
+    public function getItemValue($item)
+    {
+        $role = Str::after($this->name(), 'roles/');
+
+        return $item->hasRole($role);
+    }
+}
diff --git a/src/Stache/Stores/UsersStore.php b/src/Stache/Stores/UsersStore.php
index fad18ba261c..e0c563f8dd6 100644
--- a/src/Stache/Stores/UsersStore.php
+++ b/src/Stache/Stores/UsersStore.php
@@ -2,20 +2,30 @@
 
 namespace Statamic\Stache\Stores;
 
+use Statamic\Facades\Role as UserRole;
 use Statamic\Facades\User;
 use Statamic\Facades\UserGroup;
 use Statamic\Facades\YAML;
 use Statamic\Stache\Indexes\Users\Group;
+use Statamic\Stache\Indexes\Users\Role;
 
 class UsersStore extends BasicStore
 {
     protected function storeIndexes()
     {
-        return UserGroup::all()->mapWithKeys(function ($group) {
+        $groups = UserGroup::all()->mapWithKeys(function ($group) {
             return ['groups/'.$group->handle() => Group::class];
-        })
-        ->push('email')
-        ->all();
+        });
+
+        $roles = UserRole::all()->mapWithKeys(function ($role) {
+            return ['roles/'.$role->handle() => Role::class];
+        });
+
+        return collect()
+            ->merge($groups)
+            ->merge($roles)
+            ->push('email')
+            ->all();
     }
 
     protected $groups = [];
diff --git a/tailwind.config.js b/tailwind.config.js
index b18b28034cc..da7977428d2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,11 +38,6 @@ module.exports = {
                 950: '#141a1f',
                 DEFAULT: '#73808c',
             },
-            green: {
-                dark: '#3A804D',
-                light: '#64BD63',
-                DEFAULT: '#479967',
-            },
             orange: {
                 light: '#fcc062',
                 DEFAULT: '#f5a82f',
@@ -58,17 +53,14 @@ module.exports = {
                 DEFAULT: '#c471ed',
                 dark: '#a855cd',
             },
-            red: {
-                lighter: '#fce9e9',
-                light: '#ed7c78',
-                DEFAULT: '#e7514b',
-                dark: '#cb4743',
-            },
             yellow: {
                 light: '#ffffe0',
                 DEFAULT: '#fbfab0',
                 dark: '#e8dc1e',
             },
+            amber: colors.amber,
+            green: colors.green,
+            red: colors.red,
         },
         screens: {
             'sm': '576px',
@@ -152,6 +144,8 @@ module.exports = {
                 240: '60rem',
             },
             zIndex: {
+                1: '1',
+                2: '2',
                 5: '5',
                 200: '200',
                 top: '1001',
@@ -162,6 +156,7 @@ module.exports = {
     },
     plugins: [
         require('@tailwindcss/container-queries'),
+        require('@tailwindcss/line-clamp'),
         require('@tailwindcss/typography'),
     ],
     important: true,
diff --git a/tests/Auth/FileUserTest.php b/tests/Auth/FileUserTest.php
index 2f42f84d34e..2fe2893628b 100644
--- a/tests/Auth/FileUserTest.php
+++ b/tests/Auth/FileUserTest.php
@@ -101,6 +101,7 @@ public function it_gets_permissions_from_a_cache()
 
         Role::shouldReceive('find')->with('direct')->andReturn($directRole);
         UserGroup::shouldReceive('find')->with('usergroup')->andReturn($userGroup);
+        Role::shouldReceive('all')->andReturn(collect([$directRole]));     // the stache calls this when getting a user. unrelated to test.
         UserGroup::shouldReceive('all')->andReturn(collect([$userGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible()
diff --git a/tests/Auth/PermissibleContractTests.php b/tests/Auth/PermissibleContractTests.php
index aa4be51a76d..d0352cf13c5 100644
--- a/tests/Auth/PermissibleContractTests.php
+++ b/tests/Auth/PermissibleContractTests.php
@@ -51,6 +51,7 @@ public function handle(string $handle = null)
         RoleAPI::shouldReceive('find')->with('c')->andReturn($roleC);
         RoleAPI::shouldReceive('find')->with('d')->andReturn($roleD);
         RoleAPI::shouldReceive('find')->with('unknown')->andReturnNull();
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA, $roleB, $roleC, $roleD])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible();
         $this->assertInstanceOf(Collection::class, $user->roles());
@@ -108,6 +109,7 @@ public function handle(string $handle = null)
 
         RoleAPI::shouldReceive('find')->with('b')->andReturn($roleB);
         RoleAPI::shouldReceive('find')->with('c')->andReturn($roleC);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA, $roleB, $roleC, $roleD])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible()->assignRole([$roleA, $roleB, $roleC, $roleD]);
 
@@ -138,6 +140,7 @@ public function handle(string $handle = null)
         };
 
         RoleAPI::shouldReceive('find')->with('a')->andReturn($roleA);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible();
 
@@ -172,6 +175,7 @@ public function it_gets_and_checks_permissions()
 
         RoleAPI::shouldReceive('find')->with('direct')->andReturn($directRole);
         UserGroupAPI::shouldReceive('find')->with('usergroup')->andReturn($userGroup);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$directRole]));     // the stache calls this when getting a user. unrelated to test.
         UserGroupAPI::shouldReceive('all')->andReturn(collect([$userGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $nonSuperUser = $this->createPermissible()
@@ -255,6 +259,7 @@ public function permissions($permissions = null)
         RoleAPI::shouldReceive('find')->with('nonsuperrole')->andReturn($nonSuperRole);
         UserGroupAPI::shouldReceive('find')->with('supergroup')->andReturn($superGroup);
         UserGroupAPI::shouldReceive('find')->with('nonsupergroup')->andReturn($nonSuperGroup);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$superRole, $nonSuperRole]));        // the stache calls this when getting a user. unrelated to test.
         UserGroupAPI::shouldReceive('all')->andReturn(collect([$superGroup, $nonSuperGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $superUserThroughRole = $this->createPermissible()->assignRole($superRole)->save();

From db24531888aa3dccb10670a2fa882f975eb95bbd Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 14 Mar 2023 10:21:27 -0400
Subject: [PATCH 44/46] Bring back section handle syncing

---
 resources/js/components/blueprints/Section.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 03b8605044b..c326a1565aa 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -10,7 +10,7 @@
                         <input ref="displayInput" type="text" v-model="section.display" class="bg-transparent w-full outline-none" :placeholder="`${__('Title')} (${__('Optional')})`" />
                     </span>
                     <span class="font-mono text-xs text-gray-700 mr-2" v-if="showHandleField">
-                        <input type="text" v-model="section.handle" class="bg-transparent w-full outline-none" :placeholder="`${__('Handle')}`" />
+                        <input type="text" v-model="section.handle" class="bg-transparent w-full outline-none" :placeholder="`${__('Handle')}`" @input="handleSyncedWithDisplay = false" />
                     </span>
                     <span class="text-xs text-gray-700 mr-2">
                         <input type="text" v-model="section.instructions" class="bg-transparent w-full outline-none" :placeholder="`${__('Instructions')} (${__('Optional')})`" />
@@ -81,6 +81,7 @@ export default {
     data() {
         return {
             editingField: null,
+            handleSyncedWithDisplay: false,
         }
     },
 
@@ -97,10 +98,24 @@ export default {
             handler(section) {
                 this.$emit('updated', section);
             }
+        },
+
+        'section.display': function(display) {
+            if (this.handleSyncedWithDisplay) {
+                this.section.handle = this.$slugify(display, '_');
+            }
         }
 
     },
 
+    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.section.handle || this.section.handle == 'new_section' || this.section.handle == 'new_set') {
+            this.handleSyncedWithDisplay = true;
+        }
+    },
+
     methods: {
 
         fieldLinked(field) {

From bdc842a6ccbbfbb1db9d6728cccb73aa02e42e2f Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 14 Mar 2023 11:08:45 -0400
Subject: [PATCH 45/46] move tab and tab content into their own components

---
 resources/js/components/blueprints/Tab.vue    | 32 +++++++
 .../js/components/blueprints/TabContent.vue   | 83 +++++++++++++++++++
 resources/js/components/blueprints/Tabs.vue   | 59 +++++--------
 3 files changed, 137 insertions(+), 37 deletions(-)
 create mode 100644 resources/js/components/blueprints/Tab.vue
 create mode 100644 resources/js/components/blueprints/TabContent.vue

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
new file mode 100644
index 00000000000..3880d074ece
--- /dev/null
+++ b/resources/js/components/blueprints/Tab.vue
@@ -0,0 +1,32 @@
+<template>
+
+    <div
+        class="blueprint-tab card px-5 py-2 mr-2 cursor-pointer flex"
+        :class="{ 'bg-blue-100': currentTab === 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>
+
+</template>
+
+<script>
+export default {
+
+    props: {
+        tab: {
+            type: Object,
+            required: true,
+        },
+        currentTab: {
+            type: String,
+            required: true,
+        },
+    }
+
+}
+</script>
diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
new file mode 100644
index 00000000000..811f1fe92b9
--- /dev/null
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -0,0 +1,83 @@
+<template>
+
+
+    <div>
+        <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"
+            :initial-sections="tab.sections"
+            :new-section-text="newSectionText"
+            :add-section-text="addSectionText"
+            :show-section-handle-field="showSectionHandleField"
+            @updated="sectionsUpdated($event)"
+        />
+
+    </div>
+
+</template>
+
+<script>
+import Sections from './Sections.vue';
+
+export default {
+
+    components: {
+        Sections,
+    },
+
+    props: {
+        tab: {
+            type: Object,
+        },
+        showInstructions: {
+            type: Boolean,
+            default: false,
+        },
+        showSectionHandleField: {
+            type: Boolean,
+            default: false,
+        },
+        addSectionText: {
+            type: String,
+        },
+        newSectionText: {
+            type: String,
+        },
+    },
+
+    methods: {
+
+        addSection() {
+            this.$refs.sections.addSection();
+        },
+
+        sectionsUpdated(sections) {
+            let tab = {...this.tab, ...{ sections }};
+            this.$emit('updated', tab);
+        },
+
+        fieldUpdated(handle, value) {
+            let tab = {...this.tab, ...{ [handle]: value }};
+            this.$emit('updated', tab);
+        }
+
+    }
+
+}
+</script>
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index c2d9e8e446b..03c1f784ab6 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -3,42 +3,30 @@
     <div>
 
         <div ref="tabs" class="mb-5 flex">
-            <div
+            <tab
                 v-for="tab in tabs"
                 :key="tab._id"
-                class="blueprint-tab card px-5 py-2 mr-2 cursor-pointer flex"
-                :class="{ 'bg-blue-100': currentTab === tab._id }"
-                @click="selectTab(tab._id)"
+                :tab="tab"
+                :current-tab="currentTab"
+                @selected="selectTab(tab._id)"
+                @removed="removeTab(tab._id)"
                 @mouseenter="mouseEnteredTab(tab._id)"
-            >
-                {{ tab.display }}
-                <div @click="removeTab(tab._id)">
-                    <svg-icon name="delete-x" class="w-2 h-2 ml-2 text-gray-600 hover:text-gray-800" />
-                </div>
-            </div>
+            />
             <div v-if="!singleTab" class="card px-5 py-2 cursor-pointer" @click="addTab" v-text="addTabText" />
         </div>
 
-        <div
-            v-for="(tab, i) in tabs"
+        <tab-content
+            v-for="tab in tabs"
+            ref="tabContent"
             :key="tab._id"
+            :tab="tab"
             v-show="currentTab === tab._id"
-        >
-            <input type="text" v-model="tab.display" class="input-text" />
-            <input type="text" v-model="tab.handle" class="input-text font-mono text-sm" />
-            <input type="text" v-model="tab.instructions" class="input-text text-sm" v-if="showTabInstructionsField" />
-
-            <sections
-                ref="sections"
-                :tab-id="tab._id"
-                :initial-sections="tab.sections"
-                :new-section-text="newSectionText"
-                :add-section-text="addSectionText"
-                :show-section-handle-field="showSectionHandleField"
-                @updated="sectionsUpdated(tab._id, $event)"
-            />
-
-        </div>
+            :show-instructions="showTabInstructionsField"
+            :show-section-handle-field="showSectionHandleField"
+            :new-section-text="newSectionText"
+            :add-section-text="addSectionText"
+            @updated="updateTab(tab._id, $event)"
+        />
 
     </div>
 
@@ -46,15 +34,17 @@
 
 <script>
 import {Sortable, Plugins} from '@shopify/draggable';
-import Sections from './Sections.vue';
 import uniqid from 'uniqid';
+import Tab from './Tab.vue';
+import TabContent from './TabContent.vue';
 
 let sortableTabs, sortableSections, sortableFields;
 
 export default {
 
     components: {
-        Sections
+        Tab,
+        TabContent,
     },
 
     props: {
@@ -175,11 +165,6 @@ export default {
             .on('sortable:stop', e => this.fieldHasBeenDropped(e));
         },
 
-        sectionsUpdated(tabId, sections) {
-            const tab = this.tabs.find(tab => tab._id === tabId);
-            this.updateTab(tabId, {...tab, sections});
-        },
-
         sectionHasBeenDropped(e) {
             const oldTabId = e.oldContainer.dataset.tab;
             const oldIndex = e.oldIndex;
@@ -220,7 +205,7 @@ export default {
             let newSection;
 
             if (e.newContainer.parentElement.classList.contains('blueprint-add-section-button')) {
-                newSection = this.$refs.sections.find(vm => vm.tabId === newTabId).addSection();
+                newSection = this.$refs.tabContent.find(vm => vm.tab._id === newTabId).addSection();
             } else {
                 newSection = newTab.sections.find(section => section._id === e.newContainer.dataset.section);
             }
@@ -272,7 +257,7 @@ export default {
 
             this.selectTab(id);
 
-            this.$nextTick(() => this.$refs.sections.find(vm => vm.tabId === id).addSection());
+            this.$nextTick(() => this.$refs.tabContent.find(vm => vm.tab._id === id).addSection());
         },
 
         removeTab(tabId) {

From ad147b378200b04c90b3eeebf8a68cd2c72408e8 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 14 Mar 2023 11:16:30 -0400
Subject: [PATCH 46/46] Sync tab display and handle

---
 .../js/components/blueprints/TabContent.vue   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/resources/js/components/blueprints/TabContent.vue b/resources/js/components/blueprints/TabContent.vue
index 811f1fe92b9..8c785d0e375 100644
--- a/resources/js/components/blueprints/TabContent.vue
+++ b/resources/js/components/blueprints/TabContent.vue
@@ -61,6 +61,20 @@ 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() {
@@ -74,6 +88,15 @@ export default {
 
         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);
         }