[6.x] CP publish-form performance: Bard, Replicator, and related wins

.phpstan/baseline.neon

@@ -66,12 +66,6 @@ parameters:
 			count: 1
 			path: ../src/Facades/Endpoint/Parse.php
 
-		-
-			message: '#^Method Illuminate\\Contracts\\Validation\\DataAwareRule@anonymous/Fieldtypes/Bard\.php\:934\:\:setData\(\) should return \$this\(Illuminate\\Contracts\\Validation\\DataAwareRule@anonymous/Fieldtypes/Bard\.php\:934\) but return statement is missing\.$#'
-			identifier: return.missing
-			count: 1
-			path: ../src/Fieldtypes/Bard.php
-
 		-
 			message: '#^Access to an undefined property Statamic\\Filesystem\\AbstractAdapter\:\:\$filesystem\.$#'
 			identifier: property.notFound

resources/css/components/fieldtypes/bard.css

@@ -257,6 +257,48 @@
         }
     }
 }
+
+/* BARD / DRAGGING
+=================================================== */
+/* Hide set bodies synchronously (classList, not waiting on Vue) so collapse-on-drag
+   doesn't leave the pointer over empty space where the expanded set used to be. */
+.bard-dragging [data-set-body] {
+    display: none;
+}
+
+/* BARD / DROP + GAP CURSORS
+=================================================== */
+/* Unlayered so we beat ProseMirror's injected 1px black defaults. */
+.bard-dropcursor {
+    border-radius: 999px;
+    background-color: var(--focus-outline-color, var(--color-blue-400));
+}
+
+/* Leading disc on block (horizontal) drops — Notion-style slot marker.
+   Inline (vertical) carets stay a rounded pill so they don't grow a blob. */
+.bard-dropcursor.prosemirror-dropcursor-block::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background-color: inherit;
+    translate: -30% -50%;
+}
+
+[dir='rtl'] .bard-dropcursor.prosemirror-dropcursor-block::before {
+    translate: 30% -50%;
+}
+
+/* Gapcursor: click-between-blocks caret. Same token as dropcursor. */
+.ProseMirror-gapcursor:after {
+    border-top: 2px solid var(--focus-outline-color, var(--color-blue-400));
+    border-radius: 999px;
+    width: 1.5rem;
+}
+
 /* BARD / FULL SCREEN
 =================================================== */
 @layer ui-states {

resources/css/components/fieldtypes/replicator.css

@@ -1,3 +1,9 @@
 /* ==========================================================================
    REPLICATOR FIELDTYPE
    ========================================================================== */
+
+/* Collapse set bodies to header bars while dragging so swaps only relayout
+   header-height rows instead of full expanded field trees. */
+.replicator-dragging [data-replicator-set] > [data-set-body] {
+    display: none;
+}

resources/css/core/layout.css

@@ -163,3 +163,8 @@ main.nav-closed {
 body > .draggable-mirror {
     z-index: var(--z-index-draggable);
 }
+
+/* Don't clone expanded set bodies into the drag mirror. */
+body > .draggable-mirror [data-set-body] {
+    display: none;
+}

resources/css/cp.css

@@ -35,6 +35,7 @@
 @import './components/fieldtypes/markdown.css';
 @import './components/fieldtypes/partial.css';
 @import './components/fieldtypes/relationship.css';
+@import './components/fieldtypes/replicator.css';
 @import './components/fieldtypes/section.css';
 @import './components/fieldtypes/table.css';
 @import './components/fieldtypes/width.css';

resources/js/bootstrap/globals.js

@@ -125,6 +125,8 @@ export function truncate(string, length, ending = '...') {
 }
 
 export function escapeHtml(string) {
+    if (typeof string !== 'string') return string;
+
     return string
         .replaceAll('&', '&')
         .replaceAll('<', '&lt;')

resources/js/components/Reveal.js

@@ -8,6 +8,9 @@ class Reveal {
     }
 
     mount(el, callback) {
+        // Progressive set mounting can call this before the template ref exists.
+        if (!el) return;
+
         registry.set(el, callback);
 
         onBeforeUnmount(() => registry.delete(el));

resources/js/components/field-conditions/ShowField.js

@@ -5,7 +5,10 @@ import { nextTick } from 'vue';
 export default class {
     constructor(values, extraValues, rootValues, revealerValues, hiddenFields, setHiddenField, extraPayload) {
         this.values = values;
+        // Merge once per instance — reused across showField() calls when Sections/Tabs
+        // construct a single ShowField for a filter loop.
         this.extraValues = { ...extraValues, ...revealerValues };
+        this.mergedValues = { ...values, ...this.extraValues };
         this.rootValues = rootValues;
         this.revealerValues = revealerValues;
         this.hiddenFields = hiddenFields;
@@ -31,7 +34,14 @@ export default class {
         }
 
         // Use validation to determine whether field should be shown.
-        let validator = new Validator(field, { ...this.values, ...this.extraValues }, this.rootValues, dottedFieldPath, Object.keys(this.revealerValues), this.extraPayload);
+        let validator = new Validator(
+            field,
+            this.mergedValues,
+            this.rootValues,
+            dottedFieldPath,
+            Object.keys(this.revealerValues),
+            this.extraPayload,
+        );
         let passes = validator.passesConditions();
 
         // If the field is configured to always save, never omit value.
@@ -45,12 +55,17 @@ export default class {
             return passes;
         }
 
+        // With no revealers registered, passesNonRevealerConditions === passesConditions.
+        const hasRevealers = Object.keys(this.revealerValues).length > 0;
+
         // Ensure DOM is updated to ensure all revealers are properly loaded and tracked before committing to store.
         nextTick(() => {
             this.setHiddenFieldState({
                 dottedKey: dottedFieldPath,
                 hidden: !passes,
-                omitValue: field.type === 'revealer' || !validator.passesNonRevealerConditions(dottedPrefix),
+                omitValue:
+                    field.type === 'revealer' ||
+                    (hasRevealers ? !validator.passesNonRevealerConditions(dottedPrefix) : !passes),
             });
         });
 

resources/js/components/field-conditions/Validator.js

@@ -5,6 +5,9 @@ import { data_get } from '../../bootstrap/globals.js';
 import { isObject, intersection } from 'lodash-es';
 
 const NUMBER_SPECIFIC_COMPARISONS = ['>', '>=', '<', '<='];
+const CUSTOM_PREFIX_RE = /^custom /;
+const ROOT_PREFIX_RE = /^\$?root\./;
+const TRAILING_FIELD_RE = /\.[^.]+$/;
 
 const isEmpty = (value) => {
     if (value === null || value === undefined) return true;
@@ -25,6 +28,7 @@ export default class {
         this.passOnAny = false;
         this.showOnPass = true;
         this.converter = new Converter();
+        this._conditionsResolved = false;
     }
 
     usingRootValues() {
@@ -56,25 +60,42 @@ export default class {
     }
 
     getConditions() {
+        // Memoized per Validator instance — field config is static for the evaluation cycle.
+        // Side-effect flags (passOnAny / showOnPass) are restored on subsequent calls.
+        if (this._conditionsResolved) {
+            this.passOnAny = this._passOnAny;
+            this.showOnPass = this._showOnPass;
+            return this._conditions;
+        }
+
+        this._conditionsResolved = true;
+        this._passOnAny = false;
+        this._showOnPass = true;
+
         let key = KEYS.filter((key) => this.field[key])[0];
 
         if (!key) {
+            this._conditions = undefined;
             return undefined;
         }
 
         if (key.includes('any')) {
             this.passOnAny = true;
+            this._passOnAny = true;
         }
 
         if (key.includes('unless') || key.includes('hide_when')) {
             this.showOnPass = false;
+            this._showOnPass = false;
         }
 
         let conditions = this.field[key];
 
-        return this.isCustomConditionWithoutTarget(conditions)
+        this._conditions = this.isCustomConditionWithoutTarget(conditions)
             ? conditions
             : this.converter.fromBlueprint(conditions, this.field.prefix);
+
+        return this._conditions;
     }
 
     isCustomConditionWithoutTarget(conditions) {
@@ -189,7 +210,7 @@ export default class {
     }
 
     prepareFunctionName(condition) {
-        return condition.replace(new RegExp('^custom '), '').split(':')[0];
+        return condition.replace(CUSTOM_PREFIX_RE, '').split(':')[0];
     }
 
     prepareParams(condition) {
@@ -204,7 +225,7 @@ export default class {
         }
 
         if (field.startsWith('$root.') || field.startsWith('root.')) {
-            return data_get(this.rootValues, field.replace(new RegExp('^\\$?root\\.'), ''));
+            return data_get(this.rootValues, field.replace(ROOT_PREFIX_RE, ''));
         }
 
         return data_get(this.values, field);
@@ -293,14 +314,14 @@ export default class {
         }
 
         if (lhs.startsWith('$root.') || lhs.startsWith('root.')) {
-            return lhs.replace(new RegExp('^\\$?root\\.'), '');
+            return lhs.replace(ROOT_PREFIX_RE, '');
         }
 
         return dottedPrefix ? dottedPrefix + '.' + lhs : lhs;
     }
 
     scopeValuesToParent() {
-        let scope = this.currentFieldPath.replace(new RegExp('\.[^\.]+$'), '');
+        let scope = this.currentFieldPath.replace(TRAILING_FIELD_RE, '');
 
         this.values = data_get(this.rootValues, scope);
 

resources/js/components/fieldtypes/TemplateFieldtype.vue

@@ -22,6 +22,20 @@
 <script>
 import Fieldtype from './Fieldtype.vue';
 import { Combobox } from '@/components/ui';
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+// Raw template list shared across instances for the page-view lifetime.
+const templatesCache = ref(null);
+let navigationListenerAttached = false;
+
+function ensureCacheClearedOnNavigation() {
+    if (navigationListenerAttached) return;
+    navigationListenerAttached = true;
+    router.on('before', () => {
+        templatesCache.value = null;
+    });
+}
 
 export default {
     components: { Combobox },
@@ -35,9 +49,21 @@ export default {
     },
 
     mounted() {
+        ensureCacheClearedOnNavigation();
+
+        if (templatesCache.value) {
+            this.applyTemplates(templatesCache.value);
+            return;
+        }
+
         this.$axios.get(cp_url('api/templates')).then((response) => {
-            var templates = response.data;
+            templatesCache.value = response.data;
+            this.applyTemplates(response.data);
+        });
+    },
 
+    methods: {
+        applyTemplates(templates) {
             // Filter out partials
             if (this.config.hide_partials) {
                 templates = templates.filter((template) => {
@@ -74,7 +100,7 @@ export default {
 
             this.options = options;
             this.loading = false;
-        });
+        },
     },
 };
 </script>

resources/js/components/fieldtypes/assets/AssetsFieldtype.vue

@@ -201,6 +201,7 @@ import { isEqual } from 'lodash-es';
 import { Button, Dropdown, DropdownMenu, DropdownItem, Stack } from '@/components/ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
 import useCheckerboard from '@/composables/checkerboard.js';
+import { dedupeInFlight } from '@/util/dedupeInFlight.js';
 
 export default {
     components: {
@@ -496,14 +497,16 @@ export default {
 
             this.loading = true;
 
-            this.$axios
-                .post(cp_url('assets-fieldtype'), {
-                    assets,
-                })
-                .then((response) => {
-                    this.assets = response.data;
-                    this.loading = false;
-                });
+            const cacheKey = JSON.stringify([...assets].slice().sort());
+
+            dedupeInFlight('assets-fieldtype', cacheKey, () =>
+                this.$axios.post(cp_url('assets-fieldtype'), { assets }),
+            ).then((response) => {
+                // Clone so mutations on one field's asset rows don't bleed into others
+                // sharing the same in-flight response.
+                this.assets = clone(response.data);
+                this.loading = false;
+            });
         },
 
         /**