From c676ae5c021cc5cfa9782d6eda527b2ba3a43da9 Mon Sep 17 00:00:00 2001
From: Joshua Blum <hallo@joshuablum.de>
Date: Tue, 17 Feb 2026 17:15:58 +0100
Subject: [PATCH 1/7] Focus and blur events and user avatar for collaboration
 addon

---
 resources/js/components/ui/Publish/Field.vue | 39 +++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 2f94dbe7345..46f8fecfc4b 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useTemplateRef, watch, ref, inject } from 'vue';
+import { computed, onMounted, onUnmounted, useTemplateRef, watch, ref, inject } from 'vue';
 import { injectContainerContext } from './Container.vue';
 import { injectFieldsContext } from './FieldsProvider.vue';
 import {
@@ -112,11 +112,14 @@ watch(
 );
 
 function focused() {
-    // todo
+    if (fieldPathPrefix.value) return;
+    Statamic.$events.$emit('field:focused', { containerName: container.name.value, handle });
 }
 
-function blurred() {
-    // todo
+function blurred(event) {
+    if (fieldPathPrefix.value) return;
+    if (event?.currentTarget?.contains(event.relatedTarget)) return;
+    Statamic.$events.$emit('field:blurred', { containerName: container.name.value, handle });
 }
 
 const values = computed(() => {
@@ -169,7 +172,30 @@ const isReadOnly = computed(() => {
     return isLocked.value || props.config.visibility === 'read_only' || false;
 });
 
-const isLocked = computed(() => false); // todo
+const lockedBy = ref(null);
+const isLocked = computed(() => lockedBy.value !== null && lockedBy.value.id !== Statamic.user.id);
+
+function _onFieldLock({ containerName, handle: lockedHandle, user }) {
+    if (containerName === container.name.value && lockedHandle === handle) {
+        lockedBy.value = user;
+    }
+}
+function _onFieldUnlock({ containerName, handle: unlockedHandle }) {
+    if (containerName === container.name.value && unlockedHandle === handle) {
+        lockedBy.value = null;
+    }
+}
+
+onMounted(() => {
+    Statamic.$events.$on('field:lock', _onFieldLock);
+    Statamic.$events.$on('field:unlock', _onFieldUnlock);
+});
+
+onUnmounted(() => {
+    Statamic.$events.$off('field:lock', _onFieldLock);
+    Statamic.$events.$off('field:unlock', _onFieldUnlock);
+});
+
 
 const isSyncable = computed(() => {
     // Only top-level fields can be synced.
@@ -239,6 +265,7 @@ const fieldtypeComponentEvents = computed(() => ({
                             {{ __(config.display) }}
                         </span>
                     </template>
+                    <ui-avatar v-if="isLocked" :user="lockedBy" class="rounded-full w-4 h-4 text-2xs" v-tooltip="lockedBy.name" />
                     <ui-button size="xs" inset icon="synced" variant="ghost" v-tooltip="__('messages.field_synced_with_origin')" v-if="!isReadOnly && isSyncable" v-show="isSynced" @click="desync" />
                     <ui-button size="xs" inset icon="unsynced" variant="ghost" v-tooltip="__('messages.field_desynced_from_origin')" v-if="!isReadOnly && isSyncable" v-show="!isSynced" @click="sync" />
                 </Label>
@@ -249,7 +276,7 @@ const fieldtypeComponentEvents = computed(() => ({
             <div class="text-xs text-red-600" v-if="!fieldtypeComponentExists">
                 Component <code v-text="fieldtypeComponent"></code> does not exist.
             </div>
-            <div :dir="direction">
+            <div :dir="direction" @focusin="focused" @focusout="blurred" :class="{ 'pointer-events-none select-none': isLocked }">
                 <Component
                     ref="fieldtype"
                     :is="fieldtypeComponent"

From 8b59409aa45661e4953f37b49aca50d475f68077 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 14 Apr 2026 18:58:40 -0400
Subject: [PATCH 2/7] Refactor field focus/blur and locking into
 Container-managed state

Move focus/blur events and field locking logic from Field.vue into
Container.vue. Focus is tracked via a reactive fieldFocus map, and
locks are derived as a computed from it (first user to focus wins).
Emit publish-container-created/destroyed events for addon integration.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../js/components/ui/Publish/Container.vue    | 49 ++++++++++++++++++-
 resources/js/components/ui/Publish/Field.vue  | 33 +++----------
 2 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index a7a23c75a83..a8220aef6fc 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -6,7 +6,7 @@ export const [injectContainerContext, provideContainerContext, containerContextK
 
 <script setup>
 import { nanoid as uniqid } from 'nanoid';
-import { watch, ref, computed, toRef, nextTick } from 'vue';
+import { onMounted, onUnmounted, watch, ref, computed, toRef, nextTick } from 'vue';
 import Component from '@/components/Component.js';
 import Tabs from './Tabs.vue';
 import Values from '@/components/publish/Values.js';
@@ -236,6 +236,30 @@ function removeLocalizedField(path) {
     if (index !== -1) localizedFields.value.splice(index, 1);
 }
 
+const fieldFocus = ref({});
+
+const fieldLocks = computed(() => {
+    const locks = {};
+    for (const { handle, user } of Object.values(fieldFocus.value)) {
+        if (!locks[handle]) {
+            locks[handle] = user;
+        }
+    }
+    return locks;
+});
+
+function focusField(handle, user = Statamic.user) {
+    if (handle.includes('.')) throw new Error('focusField only supports top-level fields.');
+    fieldFocus.value[user.id] = { handle, user };
+}
+
+function blurField(handle, user = Statamic.user) {
+    if (handle.includes('.')) throw new Error('blurField only supports top-level fields.');
+    if (fieldFocus.value[user.id]?.handle === handle) {
+        delete fieldFocus.value[user.id];
+    }
+}
+
 function pushComponent(name, { props }) {
     const component = new Component(uniqid(), name, props);
     components.value.push(component);
@@ -278,6 +302,10 @@ const builtInProvides = {
     setRevealerField,
     unsetRevealerField,
     setHiddenField,
+    fieldFocus,
+    fieldLocks,
+    focusField,
+    blurField,
     isDirty,
     withoutDirtying,
 };
@@ -294,6 +322,25 @@ const provided = { ...additionalProvides, ...builtInProvides };
 
 provideContainerContext({ ...provided, container: provided });
 
+onMounted(() => {
+    Statamic.$events.$emit('publish-container-created', {
+        name: props.name,
+        reference: props.reference,
+        site: props.site,
+        values,
+        setFieldValue,
+        setValues,
+        pushComponent,
+        fieldFocus,
+        focusField,
+        blurField,
+    });
+});
+
+onUnmounted(() => {
+    Statamic.$events.$emit('publish-container-destroyed', { name: props.name });
+});
+
 defineExpose({
     name: props.name,
     values,
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index e237f91bc75..d366abfcac4 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, useTemplateRef, watch, ref, inject } from 'vue';
+import { computed, useTemplateRef, watch, ref, inject } from 'vue';
 import { injectContainerContext } from './Container.vue';
 import { injectFieldsContext } from './FieldsProvider.vue';
 import {
@@ -42,6 +42,9 @@ const {
     setFieldMeta,
     hiddenFields,
     setHiddenField,
+    fieldLocks,
+    focusField,
+    blurField,
     container,
     direction,
 } = injectContainerContext();
@@ -113,13 +116,13 @@ watch(
 
 function focused() {
     if (fieldPathPrefix.value) return;
-    Statamic.$events.$emit('field:focused', { containerName: container.name.value, handle });
+    focusField(handle);
 }
 
 function blurred(event) {
     if (fieldPathPrefix.value) return;
     if (event?.currentTarget?.contains(event.relatedTarget)) return;
-    Statamic.$events.$emit('field:blurred', { containerName: container.name.value, handle });
+    blurField(handle);
 }
 
 const values = computed(() => {
@@ -173,31 +176,9 @@ const isReadOnly = computed(() => {
     return isLocked.value || props.config.visibility === 'read_only' || false;
 });
 
-const lockedBy = ref(null);
+const lockedBy = computed(() => fieldLocks.value[handle] ?? null);
 const isLocked = computed(() => lockedBy.value !== null && lockedBy.value.id !== Statamic.user.id);
 
-function _onFieldLock({ containerName, handle: lockedHandle, user }) {
-    if (containerName === container.name.value && lockedHandle === handle) {
-        lockedBy.value = user;
-    }
-}
-function _onFieldUnlock({ containerName, handle: unlockedHandle }) {
-    if (containerName === container.name.value && unlockedHandle === handle) {
-        lockedBy.value = null;
-    }
-}
-
-onMounted(() => {
-    Statamic.$events.$on('field:lock', _onFieldLock);
-    Statamic.$events.$on('field:unlock', _onFieldUnlock);
-});
-
-onUnmounted(() => {
-    Statamic.$events.$off('field:lock', _onFieldLock);
-    Statamic.$events.$off('field:unlock', _onFieldUnlock);
-});
-
-
 const isSyncable = computed(() => {
     // Only top-level fields can be synced.
     if (isNested.value) return false;

From b286d9087b8283e4e82b961c7f395744c99ea493 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Apr 2026 11:00:39 -0400
Subject: [PATCH 3/7] fix missing events not being passed to components

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

diff --git a/resources/js/components/ui/Publish/Components.vue b/resources/js/components/ui/Publish/Components.vue
index 7a1f6554b72..5ef53f58730 100644
--- a/resources/js/components/ui/Publish/Components.vue
+++ b/resources/js/components/ui/Publish/Components.vue
@@ -5,5 +5,5 @@ const { components } = injectContainerContext();
 </script>
 
 <template>
-    <component v-for="component in components" :key="component.name" :is="component.name" v-bind="component.props" />
+    <component v-for="component in components" :key="component.name" :is="component.name" v-bind="component.props" v-on="component.events" />
 </template>

From a42582415f97a0167be0992d6560b5c8962f874a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Apr 2026 11:15:15 -0400
Subject: [PATCH 4/7] fix tests

---
 resources/js/tests/FieldConditionsValidator.test.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/js/tests/FieldConditionsValidator.test.js b/resources/js/tests/FieldConditionsValidator.test.js
index 4b7e16f57ea..d3db54895a0 100644
--- a/resources/js/tests/FieldConditionsValidator.test.js
+++ b/resources/js/tests/FieldConditionsValidator.test.js
@@ -26,6 +26,9 @@ const Statamic = {
     $dirty: {
         add: () => {},
     },
+    $events: {
+        $emit: () => {},
+    },
 };
 window.Statamic = Statamic;
 window.__ = (msg) => msg;

From b065b74e109aaedb37ea257f654437f5053511d5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Apr 2026 11:17:15 -0400
Subject: [PATCH 5/7] expose debounce util

---
 packages/cms/src/index.js          | 1 +
 resources/js/bootstrap/cms/core.js | 1 +
 resources/js/tests/Package.test.js | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/cms/src/index.js b/packages/cms/src/index.js
index eef9b728733..8b30e9f288b 100644
--- a/packages/cms/src/index.js
+++ b/packages/cms/src/index.js
@@ -19,6 +19,7 @@ export const {
     requireElevatedSession,
     requireElevatedSessionIf,
     clone,
+    debounce,
     deepClone,
     resetValuesFromResponse,
 } = __STATAMIC__.core;
diff --git a/resources/js/bootstrap/cms/core.js b/resources/js/bootstrap/cms/core.js
index e0fbd25b601..05070c7d6c8 100644
--- a/resources/js/bootstrap/cms/core.js
+++ b/resources/js/bootstrap/cms/core.js
@@ -18,3 +18,4 @@ export { default as HasActionsMixin } from '../../components/publish/HasActions.
 export { default as resetValuesFromResponse } from '../../util/resetValuesFromResponse.js';
 export { requireElevatedSession, requireElevatedSessionIf } from '../../components/elevated-sessions';
 export { default as clone, deepClone } from '../../util/clone.js';
+export { default as debounce } from '../../util/debounce.js';
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 7f454e718c7..552869b9b56 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -35,6 +35,7 @@ it('exports core', async () => {
         'SaveButtonOptions',
         'SortableList',
         'clone',
+        'debounce',
         'deepClone',
         'requireElevatedSession',
         'requireElevatedSessionIf',

From f7639cae130e551c2b7b0b4caff2cde7dd606ef7 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 15 Apr 2026 12:16:12 -0400
Subject: [PATCH 6/7] add and expose a way to set entire meta object at once

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

diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index a8220aef6fc..66957edb909 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -210,6 +210,10 @@ function setFieldValue(path, value) {
     data_set(values.value, path, value);
 }
 
+function setMeta(newMeta) {
+    meta.value = newMeta;
+}
+
 function setFieldMeta(path, value) {
     data_set(meta.value, path, value);
 }
@@ -297,6 +301,7 @@ const builtInProvides = {
     isTrackingOriginValues: computed(() => !!props.originValues),
     setValues,
     setFieldValue,
+    setMeta,
     setFieldMeta,
     setFieldPreviewValue,
     setRevealerField,
@@ -330,6 +335,9 @@ onMounted(() => {
         values,
         setFieldValue,
         setValues,
+        meta,
+        setMeta,
+        setFieldMeta,
         pushComponent,
         fieldFocus,
         focusField,
@@ -353,6 +361,7 @@ defineExpose({
     pushComponent,
     visibleValues,
     setValues,
+    setMeta,
     setExtraValues,
 });
 

From fe1245d2f63de7056447d5a11daede1667c8ec17 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 16 Apr 2026 14:55:13 -0400
Subject: [PATCH 7/7] emit update:meta so parent can v-model it

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 resources/js/components/ui/Publish/Container.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index 66957edb909..11834fe0e08 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -12,7 +12,7 @@ import Tabs from './Tabs.vue';
 import Values from '@/components/publish/Values.js';
 import { data_get } from '@/bootstrap/globals.js';
 
-const emit = defineEmits(['update:modelValue', 'update:visibleValues', 'update:modifiedFields']);
+const emit = defineEmits(['update:modelValue', 'update:visibleValues', 'update:modifiedFields', 'update:meta']);
 
 const props = defineProps({
     name: {
@@ -179,6 +179,12 @@ watch(
     { deep: true },
 );
 
+watch(
+    meta,
+    (meta) => emit('update:meta', meta),
+    { deep: true },
+);
+
 const avoidTrackingDirtyState = ref(false);
 const trackingDirtyState = computed(() => props.trackDirtyState && !avoidTrackingDirtyState.value)
 const isDirty = computed(() => Statamic.$dirty.has(props.name));