From 7347be82c6fc83a2d55a7bb62274fecbe85f8c27 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 7 May 2025 10:16:45 -0400
Subject: [PATCH 01/33] wip

---
 .../js/components/ui/Publish/Container.vue    | 68 +++++++++++++
 .../js/components/ui/Publish/ExampleField.vue | 44 +++++++++
 resources/js/components/ui/Publish/Field.vue  | 97 +++++++++++++++++++
 resources/js/components/ui/Publish/Fields.vue | 17 ++++
 resources/js/components/ui/Publish/Form.vue   | 67 +++++++++++++
 .../components/ui/Publish/SectionProvider.vue | 20 ++++
 .../js/components/ui/Publish/Sections.vue     | 37 +++++++
 .../js/components/ui/Publish/TabProvider.vue  | 20 ++++
 resources/js/components/ui/Publish/Tabs.vue   | 39 ++++++++
 resources/js/components/ui/index.js           | 10 ++
 resources/js/util/createContext.js            | 15 +++
 11 files changed, 434 insertions(+)
 create mode 100644 resources/js/components/ui/Publish/Container.vue
 create mode 100644 resources/js/components/ui/Publish/ExampleField.vue
 create mode 100644 resources/js/components/ui/Publish/Field.vue
 create mode 100644 resources/js/components/ui/Publish/Fields.vue
 create mode 100644 resources/js/components/ui/Publish/Form.vue
 create mode 100644 resources/js/components/ui/Publish/SectionProvider.vue
 create mode 100644 resources/js/components/ui/Publish/Sections.vue
 create mode 100644 resources/js/components/ui/Publish/TabProvider.vue
 create mode 100644 resources/js/components/ui/Publish/Tabs.vue
 create mode 100644 resources/js/util/createContext.js

diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
new file mode 100644
index 00000000000..4450a312e16
--- /dev/null
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -0,0 +1,68 @@
+<script>
+import createContext from '@statamic/util/createContext.js';
+
+export const [injectContainerContext, provideContainerContext] = createContext('PublishContainer');
+</script>
+
+<script setup>
+import uniqid from 'uniqid';
+import { usePublishContainerStore } from '@statamic/stores/publish-container.js';
+import { watch } from 'vue';
+
+const emit = defineEmits(['updated']);
+
+const props = defineProps({
+    name: {
+        type: String,
+        default: () => uniqid(),
+    },
+    blueprint: {
+        type: Object,
+    },
+    values: {
+        type: Object,
+        default: () => ({}),
+    },
+    meta: {
+        type: Object,
+        default: () => ({}),
+    },
+    errors: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const store = usePublishContainerStore(props.name, {
+    values: props.values,
+    meta: props.meta,
+    errors: props.errors,
+});
+
+watch(
+    () => store.values,
+    (values) => {
+        // markAsDirty();
+        emit('updated', values);
+    },
+    { deep: true },
+);
+
+watch(
+    () => props.errors,
+    (errors) => store.setErrors(errors),
+    { deep: true },
+);
+
+provideContainerContext({
+    store,
+    blueprint: props.blueprint,
+    someFunction: () => {
+        alert('Function from container context');
+    },
+});
+</script>
+
+<template>
+    <slot :values="values" />
+</template>
diff --git a/resources/js/components/ui/Publish/ExampleField.vue b/resources/js/components/ui/Publish/ExampleField.vue
new file mode 100644
index 00000000000..f11b6ea00dd
--- /dev/null
+++ b/resources/js/components/ui/Publish/ExampleField.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { Button, Input } from '@statamic/ui';
+import { injectContainerContext } from './Container.vue';
+import { computed } from 'vue';
+
+const context = injectContainerContext();
+const store = context.store;
+
+const props = defineProps({
+    handle: {
+        type: String,
+        required: true,
+    },
+    display: {
+        type: String,
+        default: '',
+    },
+    instructions: {
+        type: String,
+        default: '',
+    },
+});
+
+const value = computed(() => {
+    return store.values[props.handle];
+});
+
+function updateValueInStore(value) {
+    store.setFieldValue({ handle: props.handle, value });
+}
+</script>
+
+<template>
+    <div class="mb-4">
+        <Input
+            :label="display"
+            :description="instructions"
+            :model-value="value"
+            @update:model-value="updateValueInStore"
+        />
+
+        <!--        <Button @click="context.someFunction" text="Click me" />-->
+    </div>
+</template>
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
new file mode 100644
index 00000000000..6822b7750f7
--- /dev/null
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { computed } from 'vue';
+import { injectContainerContext } from './Container.vue';
+import { Label, Description, Field } from '@statamic/ui';
+import TheField from '../TheField.vue';
+
+const props = defineProps({
+    config: {
+        type: Object,
+        required: true,
+    },
+});
+
+const context = injectContainerContext();
+const store = context.store;
+const handle = props.config.handle;
+
+const fieldtypeComponent = computed(() => {
+    return `${props.config.component || props.config.type}-fieldtype`;
+});
+
+const value = computed(() => {
+    // todo: this is only getting top level.
+    // need a way to get nested fields.
+    return store.values[handle];
+});
+const meta = computed(() => {
+    // todo: see value todo
+    return store.meta[handle];
+});
+const errors = computed(() => {
+    // todo: see value todo
+    return store.errors[handle];
+});
+const namePrefix = '';
+const fieldPathPrefix = '';
+const isReadOnly = false;
+const isRequired = computed(() => props.config.required);
+
+function valueUpdated(value) {
+    // todo: this is only setting the top level. see value todo.
+    store.setFieldValue({ handle, value });
+}
+
+function metaUpdated(value) {
+    // todo: this is only setting the top level. see value todo.
+    store.setFieldMeta({ handle, value });
+}
+
+function focused() {}
+
+function blurred() {}
+</script>
+
+<template>
+    <TheField
+        :label="config.display"
+        :id="fieldName"
+        :instructions="config.instructions"
+        :instructions-position="config.instructions_position"
+        :required="isRequired"
+        :errors="errors"
+    >
+        <Component
+            :is="fieldtypeComponent"
+            :value="value"
+            :meta="meta"
+            :handle="handle"
+            :name-prefix="namePrefix"
+            :field-path-prefix="fieldPathPrefix"
+            :read-only="isReadOnly"
+            @update:value="valueUpdated"
+            @meta-updated="metaUpdated"
+            @focus="focused"
+            @blur="blurred"
+        />
+    </TheField>
+
+    <!--    <Field>-->
+    <!--        <Label :text="config.display" :for="name" :required="isRequired" />-->
+    <!--        <Description :text="config.instructions" />-->
+    <!--            <Component-->
+    <!--                :is="fieldtypeComponent"-->
+    <!--                :value="value"-->
+    <!--                :meta="meta"-->
+    <!--                :handle="handle"-->
+    <!--                :name-prefix="namePrefix"-->
+    <!--                :field-path-prefix="fieldPathPrefix"-->
+    <!--                :read-only="isReadOnly"-->
+    <!--                @update:value="valueUpdated"-->
+    <!--                @meta-updated="metaUpdated"-->
+    <!--                @focus="focused"-->
+    <!--                @blur="blurred"-->
+    <!--            />-->
+    <!--        <Description v-if="errors" v-for="(error, i) in errors" :key="i" :text="error" class="text-red-500" />-->
+    <!--    </Field>-->
+</template>
diff --git a/resources/js/components/ui/Publish/Fields.vue b/resources/js/components/ui/Publish/Fields.vue
new file mode 100644
index 00000000000..9168e00f3f2
--- /dev/null
+++ b/resources/js/components/ui/Publish/Fields.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { injectSectionContext } from './SectionProvider.vue';
+import ExampleField from './ExampleField.vue';
+import Field from './Field.vue';
+
+const section = injectSectionContext();
+const fields = section.fields;
+</script>
+
+<template>
+    <div class="space-y-6">
+        <div v-for="field in fields">
+            <Field :config="field" />
+            <!--            <ExampleField :handle="field.handle" :display="field.display" :instructions="field.instructions" />-->
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/ui/Publish/Form.vue b/resources/js/components/ui/Publish/Form.vue
new file mode 100644
index 00000000000..8c1367ae16f
--- /dev/null
+++ b/resources/js/components/ui/Publish/Form.vue
@@ -0,0 +1,67 @@
+<script setup>
+import Container from './Container.vue';
+import Tabs from './Tabs.vue';
+import { Header, Button } from '@statamic/ui';
+import uniqid from 'uniqid';
+import { ref } from 'vue';
+import axios from 'axios';
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: () => uniqid(),
+    },
+    blueprint: {
+        type: Object,
+        required: true,
+    },
+    initialValues: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+    },
+    initialMeta: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+    },
+    saveUrl: {
+        type: String,
+        required: true,
+    },
+});
+
+const containerName = Statamic.$slug.separatedBy('_').create(props.title);
+const values = ref(props.initialValues);
+const meta = ref(props.initialMeta);
+const errors = ref({});
+
+function save() {
+    axios
+        .patch(props.saveUrl, { values: values.value })
+        .then((response) => console.log('Values saved successfully:', response.data))
+        .catch((e) => {
+            if (e.response && e.response.status === 422) {
+                const { errors: messages, message } = e.response.data;
+                errors.value = messages;
+                Statamic.$toast.error(message);
+            }
+        });
+}
+</script>
+
+<template>
+    <Header :title="title">
+        <Button variant="primary" text="Save" @click="save" />
+    </Header>
+    <Container
+        :name="containerName"
+        :blueprint="blueprint"
+        :values="values"
+        :meta="meta"
+        :errors="errors"
+        @updated="values = $event"
+    >
+        <Tabs />
+    </Container>
+</template>
diff --git a/resources/js/components/ui/Publish/SectionProvider.vue b/resources/js/components/ui/Publish/SectionProvider.vue
new file mode 100644
index 00000000000..ec3d2f9ccfd
--- /dev/null
+++ b/resources/js/components/ui/Publish/SectionProvider.vue
@@ -0,0 +1,20 @@
+<script>
+import createContext from '@statamic/util/createContext.js';
+
+export const [injectSectionContext, provideSectionContext] = createContext('PublishSection');
+</script>
+
+<script setup>
+const props = defineProps({
+    section: {
+        type: Object,
+        required: true,
+    },
+});
+
+provideSectionContext(props.section);
+</script>
+
+<template>
+    <slot />
+</template>
diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
new file mode 100644
index 00000000000..53b06ecf341
--- /dev/null
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -0,0 +1,37 @@
+<script setup>
+import { injectTabContext } from './TabProvider.vue';
+import { CardPanel } from '@statamic/ui';
+import SectionProvider from './SectionProvider.vue';
+import Fields from './Fields.vue';
+import { computed } from 'vue';
+
+const tab = injectTabContext();
+
+const props = defineProps({
+    of: {
+        type: Object,
+    },
+});
+
+const sections = computed(() => {
+    return props.of || tab.sections;
+});
+</script>
+
+<template>
+    <div>
+        <CardPanel
+            v-for="(section, i) in sections"
+            :key="i"
+            :heading="section.display"
+            :subheading="section.instructions"
+            class="mb-6"
+        >
+            <SectionProvider :section="section">
+                <slot :section="section">
+                    <Fields />
+                </slot>
+            </SectionProvider>
+        </CardPanel>
+    </div>
+</template>
diff --git a/resources/js/components/ui/Publish/TabProvider.vue b/resources/js/components/ui/Publish/TabProvider.vue
new file mode 100644
index 00000000000..45846b8de2d
--- /dev/null
+++ b/resources/js/components/ui/Publish/TabProvider.vue
@@ -0,0 +1,20 @@
+<script>
+import createContext from '@statamic/util/createContext.js';
+
+export const [injectTabContext, provideTabContext] = createContext('PublishTab');
+</script>
+
+<script setup>
+const props = defineProps({
+    tab: {
+        type: Object,
+        required: true,
+    },
+});
+
+provideTabContext(props.tab);
+</script>
+
+<template>
+    <slot />
+</template>
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
new file mode 100644
index 00000000000..2431edfe4c8
--- /dev/null
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { Tabs, TabList, TabTrigger, TabContent } from '@statamic/ui';
+import TabProvider from './TabProvider.vue';
+import { injectContainerContext } from './Container.vue';
+import Sections from '@statamic/components/ui/Publish/Sections.vue';
+import { computed, useSlots } from 'vue';
+
+const slots = useSlots();
+const context = injectContainerContext();
+const tabs = context.blueprint.tabs;
+const sidebarTab = computed(() => tabs.find((tab) => tab.handle === 'sidebar'));
+const mainTabs = computed(() => (sidebarTab ? tabs.filter((tab) => tab.handle !== 'sidebar') : tabs));
+const shouldShowSidebar = computed(() => slots.sidebar || sidebarTab.value);
+</script>
+
+<template>
+    <Tabs :default-tab="mainTabs[0].handle">
+        <TabList class="mb-6">
+            <TabTrigger v-for="tab in mainTabs" :key="tab.handle" :name="tab.handle" :text="tab.display" />
+        </TabList>
+
+        <div :class="{ 'grid grid-cols-[1fr_320px] gap-8': shouldShowSidebar }">
+            <TabContent v-for="tab in mainTabs" :key="tab.handle" :name="tab.handle">
+                <TabProvider :tab="tab">
+                    <slot :tab="tab">
+                        <Sections />
+                    </slot>
+                </TabProvider>
+            </TabContent>
+
+            <aside class="space-y-6" v-if="shouldShowSidebar">
+                <slot name="sidebar" />
+                <TabProvider v-if="sidebarTab" :tab="sidebarTab">
+                    <Sections />
+                </TabProvider>
+            </aside>
+        </div>
+    </Tabs>
+</template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 7f78a186943..72fd9ed1c3f 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -34,6 +34,11 @@ import { default as Panel } from './Panel/Panel.vue';
 import { default as PanelHeader } from './Panel/Header.vue';
 import { default as Badge } from './Badge.vue';
 import { default as CharacterCounter } from './CharacterCounter.vue';
+import { default as Tabs } from './Tabs/Tabs.vue';
+import { default as TabList } from './Tabs/List.vue';
+import { default as TabTrigger } from './Tabs/Trigger.vue';
+import { default as TabContent } from './Tabs/Content.vue';
+import { default as PublishTabs } from './Publish/Tabs.vue';
 
 export {
     WithField,
@@ -72,4 +77,9 @@ export {
     PanelHeader,
     Badge,
     CharacterCounter,
+    Tabs,
+    TabList,
+    TabTrigger,
+    TabContent,
+    PublishTabs,
 };
diff --git a/resources/js/util/createContext.js b/resources/js/util/createContext.js
new file mode 100644
index 00000000000..b40e2b7474d
--- /dev/null
+++ b/resources/js/util/createContext.js
@@ -0,0 +1,15 @@
+import { inject, provide } from 'vue';
+
+export default function createContext(name) {
+    const injectionKey = Symbol(`${name}Context`);
+
+    const provideContext = (context) => {
+        provide(injectionKey, context);
+    };
+
+    const injectContext = () => {
+        return inject(injectionKey);
+    };
+
+    return [injectContext, provideContext];
+}

From aa52810230bd197a7b74b8135e4aec8100eec977 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 7 May 2025 14:28:15 -0400
Subject: [PATCH 02/33] wip

---
 resources/js/components/ui/Field.vue          | 42 ++++++++++++++++++-
 resources/js/components/ui/Publish/Field.vue  | 42 +++++++------------
 resources/js/components/ui/Publish/Fields.vue | 13 +++---
 3 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue
index 5f9b03e7862..7c3beca9e93 100644
--- a/resources/js/components/ui/Field.vue
+++ b/resources/js/components/ui/Field.vue
@@ -1,12 +1,45 @@
 <script setup>
 import { cva } from 'cva';
+import { Description, Label } from '@statamic/components/ui/index.js';
 
 defineOptions({
     inheritAttrs: false,
 });
 
 const props = defineProps({
-    variant: { type: String, default: 'block' },
+    variant: {
+        type: String,
+        default: 'block',
+    },
+    label: {
+        type: String,
+    },
+    id: {
+        type: String,
+    },
+    instructions: {
+        type: String,
+        default: '',
+    },
+    instructionsBelow: {
+        type: Boolean,
+        default: false,
+    },
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    badge: {
+        type: String,
+        default: '',
+    },
+    error: {
+        type: String,
+    },
+    errors: {
+        type: Object,
+        default: (props) => (props.error ? [props.error] : []),
+    },
 });
 
 const classes = cva({
@@ -36,6 +69,13 @@ const classes = cva({
 
 <template>
     <div :class="[classes, $attrs.class]" data-ui-input-group>
+        <div class="flex items-center justify-between">
+            <Label v-if="label" :text="label" :for="id" :required="required" :badge="badge" class="flex-1" />
+            <slot name="actions" />
+        </div>
+        <Description :text="instructions" v-if="instructions && !instructionsBelow" />
         <slot />
+        <Description :text="instructions" v-if="instructions && instructionsBelow" />
+        <Description v-if="errors" v-for="(error, i) in errors" :key="i" :text="error" class="text-red-500" />
     </div>
 </template>
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 6822b7750f7..b2f7db80e26 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 import { injectContainerContext } from './Container.vue';
-import { Label, Description, Field } from '@statamic/ui';
-import TheField from '../TheField.vue';
+import { Field } from '@statamic/ui';
 
 const props = defineProps({
     config: {
@@ -32,10 +31,16 @@ const errors = computed(() => {
     // todo: see value todo
     return store.errors[handle];
 });
+const fieldId = 'bob';
 const namePrefix = '';
 const fieldPathPrefix = '';
 const isReadOnly = false;
 const isRequired = computed(() => props.config.required);
+const fieldtype = useTemplateRef('fieldtype');
+
+const fieldActions = computed(() => {
+    return fieldtype.value ? fieldtype.value.fieldActions : [];
+});
 
 function valueUpdated(value) {
     // todo: this is only setting the top level. see value todo.
@@ -53,15 +58,19 @@ function blurred() {}
 </script>
 
 <template>
-    <TheField
+    <Field
         :label="config.display"
-        :id="fieldName"
+        :id="fieldId"
         :instructions="config.instructions"
-        :instructions-position="config.instructions_position"
+        :instructions-below="config.instructions_position === 'below'"
         :required="isRequired"
         :errors="errors"
     >
+        <template #actions>
+            <publish-field-actions v-if="fieldActions.length" :actions="fieldActions" />
+        </template>
         <Component
+            ref="fieldtype"
             :is="fieldtypeComponent"
             :value="value"
             :meta="meta"
@@ -74,24 +83,5 @@ function blurred() {}
             @focus="focused"
             @blur="blurred"
         />
-    </TheField>
-
-    <!--    <Field>-->
-    <!--        <Label :text="config.display" :for="name" :required="isRequired" />-->
-    <!--        <Description :text="config.instructions" />-->
-    <!--            <Component-->
-    <!--                :is="fieldtypeComponent"-->
-    <!--                :value="value"-->
-    <!--                :meta="meta"-->
-    <!--                :handle="handle"-->
-    <!--                :name-prefix="namePrefix"-->
-    <!--                :field-path-prefix="fieldPathPrefix"-->
-    <!--                :read-only="isReadOnly"-->
-    <!--                @update:value="valueUpdated"-->
-    <!--                @meta-updated="metaUpdated"-->
-    <!--                @focus="focused"-->
-    <!--                @blur="blurred"-->
-    <!--            />-->
-    <!--        <Description v-if="errors" v-for="(error, i) in errors" :key="i" :text="error" class="text-red-500" />-->
-    <!--    </Field>-->
+    </Field>
 </template>
diff --git a/resources/js/components/ui/Publish/Fields.vue b/resources/js/components/ui/Publish/Fields.vue
index 9168e00f3f2..d73f40a1ad4 100644
--- a/resources/js/components/ui/Publish/Fields.vue
+++ b/resources/js/components/ui/Publish/Fields.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { injectSectionContext } from './SectionProvider.vue';
-import ExampleField from './ExampleField.vue';
 import Field from './Field.vue';
 
 const section = injectSectionContext();
@@ -8,10 +7,12 @@ const fields = section.fields;
 </script>
 
 <template>
-    <div class="space-y-6">
-        <div v-for="field in fields">
-            <Field :config="field" />
-            <!--            <ExampleField :handle="field.handle" :display="field.display" :instructions="field.instructions" />-->
-        </div>
+    <div class="publish-fields">
+        <Field
+            v-for="field in fields"
+            :key="field.handle"
+            :config="field"
+            :class="`form-group field-w-${field.width}`"
+        />
     </div>
 </template>

From 4c06a269e825d72d67ec07e8cd466f6f3036a08e Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 7 May 2025 14:40:01 -0400
Subject: [PATCH 03/33] Remove WithField component and usages. All of the
 changes in components are because of the wrapper removal.

---
 resources/js/components/ui/Checkbox/Group.vue |  23 ++-
 .../components/ui/DatePicker/DatePicker.vue   | 134 ++++++++-------
 .../ui/DateRangePicker/DateRangePicker.vue    | 152 +++++++++---------
 resources/js/components/ui/Input/Group.vue    |  40 +++--
 resources/js/components/ui/Input/Input.vue    |  88 +++++-----
 resources/js/components/ui/Radio/Group.vue    |  25 ++-
 resources/js/components/ui/Select/Select.vue  |  68 ++++----
 resources/js/components/ui/Slider.vue         |  37 ++---
 resources/js/components/ui/Switch.vue         |  25 ++-
 resources/js/components/ui/Textarea.vue       |  28 ++--
 .../components/ui/TimePicker/TimePicker.vue   |  63 ++++----
 resources/js/components/ui/Toggle/Group.vue   |  19 +--
 resources/js/components/ui/WithField.vue      |  36 -----
 resources/js/components/ui/index.js           |   2 -
 14 files changed, 332 insertions(+), 408 deletions(-)
 delete mode 100644 resources/js/components/ui/WithField.vue

diff --git a/resources/js/components/ui/Checkbox/Group.vue b/resources/js/components/ui/Checkbox/Group.vue
index 5b057c20cd4..8f29deba639 100644
--- a/resources/js/components/ui/Checkbox/Group.vue
+++ b/resources/js/components/ui/Checkbox/Group.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useId } from 'vue';
 import { CheckboxGroupRoot } from 'reka-ui';
-import { WithField } from '@statamic/ui';
 
 defineProps({
     description: { type: String, default: null },
@@ -22,16 +21,14 @@ defineExpose({ focus });
 </script>
 
 <template>
-    <WithField :label :description :required>
-        <CheckboxGroupRoot
-            :modelValue="modelValue"
-            @update:modelValue="$emit('update:modelValue', $event)"
-            :name="name"
-            class="relative block w-full space-y-2"
-            :class="{ 'flex flex-wrap space-y-0 gap-x-4 gap-y-2': inline }"
-            data-ui-input
-        >
-            <slot />
-        </CheckboxGroupRoot>
-    </WithField>
+    <CheckboxGroupRoot
+        :modelValue="modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        :name="name"
+        class="relative block w-full space-y-2"
+        :class="{ 'flex flex-wrap space-y-0 gap-x-4 gap-y-2': inline }"
+        data-ui-input
+    >
+        <slot />
+    </CheckboxGroupRoot>
 </template>
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 26230885646..df37b380e41 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -19,7 +19,7 @@ import {
     DatePickerNext,
     DatePickerPrev,
 } from 'reka-ui';
-import { WithField, Card, Button, Calendar, Icon } from '@statamic/ui';
+import { Card, Button, Calendar, Icon } from '@statamic/ui';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -64,77 +64,75 @@ const calendarEvents = computed(() => ({
 </script>
 
 <template>
-    <WithField :label :description :required :badge>
-        <div class="group/input relative block w-full" data-ui-input>
-            <DatePickerRoot
-                :modelValue="modelValue"
-                :granularity="granularity"
-                :locale="$date.locale"
-                @update:model-value="emit('update:modelValue', $event)"
-                v-bind="$attrs"
-                prevent-deselect
-                hide-time-zone
-            >
-                <DatePickerField v-slot="{ segments }" class="w-full">
-                    <div
-                        :class="[
-                            'flex w-full items-center bg-white uppercase dark:bg-gray-900',
-                            'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:inset-shadow-2xs dark:inset-shadow-black',
-                            'text-gray-600 dark:text-gray-300',
-                            'shadow-ui-sm not-prose h-10 rounded-lg px-10 py-2 disabled:shadow-none',
-                            'data-invalid:border-red-500',
-                        ]"
+    <div class="group/input relative block w-full" data-ui-input>
+        <DatePickerRoot
+            :modelValue="modelValue"
+            :granularity="granularity"
+            :locale="$date.locale"
+            @update:model-value="emit('update:modelValue', $event)"
+            v-bind="$attrs"
+            prevent-deselect
+            hide-time-zone
+        >
+            <DatePickerField v-slot="{ segments }" class="w-full">
+                <div
+                    :class="[
+                        'flex w-full items-center bg-white uppercase dark:bg-gray-900',
+                        'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:inset-shadow-2xs dark:inset-shadow-black',
+                        'text-gray-600 dark:text-gray-300',
+                        'shadow-ui-sm not-prose h-10 rounded-lg px-10 py-2 disabled:shadow-none',
+                        'data-invalid:border-red-500',
+                    ]"
+                >
+                    <DatePickerTrigger
+                        v-if="!inline"
+                        class="absolute start-1 top-1 bottom-1 flex items-center justify-center rounded-lg px-2 text-gray-400 outline-hidden hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
                     >
-                        <DatePickerTrigger
-                            v-if="!inline"
-                            class="absolute start-1 top-1 bottom-1 flex items-center justify-center rounded-lg px-2 text-gray-400 outline-hidden hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+                        <Icon name="calendar" class="size-4" />
+                    </DatePickerTrigger>
+                    <template v-for="item in segments" :key="item.part">
+                        <DatePickerInput
+                            v-if="item.part === 'literal'"
+                            :part="item.part"
+                            :class="{ 'text-sm text-gray-500 antialiased': !item.contenteditable }"
                         >
-                            <Icon name="calendar" class="size-4" />
-                        </DatePickerTrigger>
-                        <template v-for="item in segments" :key="item.part">
-                            <DatePickerInput
-                                v-if="item.part === 'literal'"
-                                :part="item.part"
-                                :class="{ 'text-sm text-gray-500 antialiased': !item.contenteditable }"
-                            >
-                                {{ item.value }}
-                            </DatePickerInput>
-                            <DatePickerInput
-                                v-else
-                                :part="item.part"
-                                class="rounded-sm px-0.25 py-0.5 focus:bg-gray-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
-                                :class="{
-                                    'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
-                                }"
-                            >
-                                {{ item.value }}
-                            </DatePickerInput>
-                        </template>
-                    </div>
-                    <button
-                        v-if="clearable"
-                        @click="emit('update:modelValue', null)"
-                        type="button"
-                        class="absolute end-1 top-1 bottom-1 flex items-center justify-center rounded-lg px-2 text-gray-300 outline-hidden hover:bg-gray-100 focus:bg-gray-100 active:text-gray-400 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
-                    >
-                        <Icon name="x" class="size-3" />
-                    </button>
-                </DatePickerField>
-
-                <DatePickerContent
-                    v-if="!inline"
-                    :side-offset="4"
-                    class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade will-change-[transform,opacity]"
+                            {{ item.value }}
+                        </DatePickerInput>
+                        <DatePickerInput
+                            v-else
+                            :part="item.part"
+                            class="rounded-sm px-0.25 py-0.5 focus:bg-gray-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
+                            :class="{
+                                'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
+                            }"
+                        >
+                            {{ item.value }}
+                        </DatePickerInput>
+                    </template>
+                </div>
+                <button
+                    v-if="clearable"
+                    @click="emit('update:modelValue', null)"
+                    type="button"
+                    class="absolute end-1 top-1 bottom-1 flex items-center justify-center rounded-lg px-2 text-gray-300 outline-hidden hover:bg-gray-100 focus:bg-gray-100 active:text-gray-400 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
                 >
-                    <Card class="w-[20rem]">
-                        <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
-                    </Card>
-                </DatePickerContent>
+                    <Icon name="x" class="size-3" />
+                </button>
+            </DatePickerField>
 
-                <Card v-if="inline" class="mt-2">
+            <DatePickerContent
+                v-if="!inline"
+                :side-offset="4"
+                class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade will-change-[transform,opacity]"
+            >
+                <Card class="w-[20rem]">
                     <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
                 </Card>
-            </DatePickerRoot>
-        </div>
-    </WithField>
+            </DatePickerContent>
+
+            <Card v-if="inline" class="mt-2">
+                <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+            </Card>
+        </DatePickerRoot>
+    </div>
 </template>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index d36ad925fbe..814865ba65e 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -19,7 +19,7 @@ import {
     DateRangePickerRoot,
     DateRangePickerTrigger,
 } from 'reka-ui';
-import { WithField, Card, Button, Calendar, Icon } from '@statamic/ui';
+import { Card, Button, Calendar, Icon } from '@statamic/ui';
 import { parseAbsoluteToLocal } from '@internationalized/date';
 
 const emit = defineEmits(['update:modelValue']);
@@ -71,85 +71,83 @@ const calendarEvents = computed(() => ({
 </script>
 
 <template>
-    <WithField :label :description :required :badge>
-        <div class="group/input relative block w-full" data-ui-input>
-            <DateRangePickerRoot
-                :modelValue="modelValue"
-                :granularity="granularity"
-                :locale="$date.locale"
-                @update:model-value="emit('update:modelValue', $event)"
-                v-bind="$attrs"
-                prevent-deselect
-                hide-time-zone
-                :placeholder="placeholder"
-            >
-                <DateRangePickerField v-slot="{ segments }" class="w-full">
-                    <div
-                        :class="[
-                            'flex w-full bg-white dark:bg-gray-900',
-                            'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:inset-shadow-2xs dark:inset-shadow-black',
-                            'leading-[1.375rem] text-gray-600 dark:text-gray-300',
-                            'shadow-ui-sm not-prose h-10 rounded-lg py-2 ps-3 pe-10 disabled:shadow-none',
-                            'data-invalid:border-red-500',
-                        ]"
-                    >
-                        <template v-for="item in segments.start" :key="item.part">
-                            <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="start">
-                                {{ item.value }}
-                            </DateRangePickerInput>
-                            <DateRangePickerInput
-                                v-else
-                                :part="item.part"
-                                class="rounded-sm px-0.25 py-0.5 focus:bg-gray-50 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
-                                :class="{
-                                    'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
-                                }"
-                                type="start"
-                            >
-                                {{ item.value }}
-                            </DateRangePickerInput>
-                        </template>
-                        <span class="mx-2"> - </span>
-                        <template v-for="item in segments.end" :key="item.part">
-                            <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="end">
-                                {{ item.value }}
-                            </DateRangePickerInput>
-                            <DateRangePickerInput
-                                v-else
-                                :part="item.part"
-                                class="rounded-sm px-0.25 py-0.5 focus:bg-gray-50 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
-                                :class="{
-                                    'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
-                                }"
-                                type="end"
-                            >
-                                {{ item.value }}
-                            </DateRangePickerInput>
-                        </template>
-                    </div>
-                    <DateRangePickerTrigger
-                        v-if="!inline"
-                        class="absolute end-1 top-1 bottom-1 flex items-center justify-center rounded-lg px-2 text-gray-400 outline-hidden hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
-                    >
-                        <Icon name="calendar" class="h-4 w-4" />
-                    </DateRangePickerTrigger>
-                </DateRangePickerField>
-
-                <DateRangePickerContent
+    <div class="group/input relative block w-full" data-ui-input>
+        <DateRangePickerRoot
+            :modelValue="modelValue"
+            :granularity="granularity"
+            :locale="$date.locale"
+            @update:model-value="emit('update:modelValue', $event)"
+            v-bind="$attrs"
+            prevent-deselect
+            hide-time-zone
+            :placeholder="placeholder"
+        >
+            <DateRangePickerField v-slot="{ segments }" class="w-full">
+                <div
+                    :class="[
+                        'flex w-full bg-white dark:bg-gray-900',
+                        'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:inset-shadow-2xs dark:inset-shadow-black',
+                        'leading-[1.375rem] text-gray-600 dark:text-gray-300',
+                        'shadow-ui-sm not-prose h-10 rounded-lg py-2 ps-3 pe-10 disabled:shadow-none',
+                        'data-invalid:border-red-500',
+                    ]"
+                >
+                    <template v-for="item in segments.start" :key="item.part">
+                        <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="start">
+                            {{ item.value }}
+                        </DateRangePickerInput>
+                        <DateRangePickerInput
+                            v-else
+                            :part="item.part"
+                            class="rounded-sm px-0.25 py-0.5 focus:bg-gray-50 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
+                            :class="{
+                                'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
+                            }"
+                            type="start"
+                        >
+                            {{ item.value }}
+                        </DateRangePickerInput>
+                    </template>
+                    <span class="mx-2"> - </span>
+                    <template v-for="item in segments.end" :key="item.part">
+                        <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="end">
+                            {{ item.value }}
+                        </DateRangePickerInput>
+                        <DateRangePickerInput
+                            v-else
+                            :part="item.part"
+                            class="rounded-sm px-0.25 py-0.5 focus:bg-gray-50 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
+                            :class="{
+                                'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
+                            }"
+                            type="end"
+                        >
+                            {{ item.value }}
+                        </DateRangePickerInput>
+                    </template>
+                </div>
+                <DateRangePickerTrigger
                     v-if="!inline"
-                    :side-offset="4"
-                    class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade will-change-[transform,opacity]"
+                    class="absolute end-1 top-1 bottom-1 flex items-center justify-center rounded-lg px-2 text-gray-400 outline-hidden hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
                 >
-                    <Card class="w-[20rem]">
-                        <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
-                    </Card>
-                </DateRangePickerContent>
+                    <Icon name="calendar" class="h-4 w-4" />
+                </DateRangePickerTrigger>
+            </DateRangePickerField>
 
-                <Card v-if="inline" class="mt-2">
+            <DateRangePickerContent
+                v-if="!inline"
+                :side-offset="4"
+                class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade will-change-[transform,opacity]"
+            >
+                <Card class="w-[20rem]">
                     <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
                 </Card>
-            </DateRangePickerRoot>
-        </div>
-        <Button @click="emit('update:modelValue', null)" type="button" class="" text="Clear" size="xs" />
-    </WithField>
+            </DateRangePickerContent>
+
+            <Card v-if="inline" class="mt-2">
+                <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+            </Card>
+        </DateRangePickerRoot>
+    </div>
+    <Button @click="emit('update:modelValue', null)" type="button" class="" text="Clear" size="xs" />
 </template>
diff --git a/resources/js/components/ui/Input/Group.vue b/resources/js/components/ui/Input/Group.vue
index f9013bf387a..52a2ede4621 100644
--- a/resources/js/components/ui/Input/Group.vue
+++ b/resources/js/components/ui/Input/Group.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { WithField } from '@statamic/ui';
-
 const props = defineProps({
     label: { type: String, default: null },
     description: { type: String, default: null },
@@ -10,24 +8,22 @@ const props = defineProps({
 </script>
 
 <template>
-    <WithField :label :description :required :badge>
-        <div
-            :class="[
-                'group/input flex w-full data-ui-input:*:grow',
-                '[&>[data-ui-input]:not(:first-child):not(:last-child)>[data-ui-group-target]:not([data-invalid])]:border-x-0',
-                '[&>[data-ui-input]:first-child:not(:last-child)>[data-ui-group-target]:not([data-invalid])]:border-e-0',
-                '[&>[data-ui-input]:last-child:not(:first-child)>[data-ui-group-target]:not([data-invalid])]:border-s-0',
-                '',
-                '[&>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
-                '[&>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
-                '[&>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
-                '[&>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
-                '[&>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
-                '[&>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
-            ]"
-            data-ui-input-group
-        >
-            <slot />
-        </div>
-    </WithField>
+    <div
+        :class="[
+            'group/input flex w-full data-ui-input:*:grow',
+            '[&>[data-ui-input]:not(:first-child):not(:last-child)>[data-ui-group-target]:not([data-invalid])]:border-x-0',
+            '[&>[data-ui-input]:first-child:not(:last-child)>[data-ui-group-target]:not([data-invalid])]:border-e-0',
+            '[&>[data-ui-input]:last-child:not(:first-child)>[data-ui-group-target]:not([data-invalid])]:border-s-0',
+            '',
+            '[&>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
+            '[&>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
+            '[&>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
+            '[&>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
+            '[&>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
+            '[&>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
+        ]"
+        data-ui-input-group
+    >
+        <slot />
+    </div>
 </template>
diff --git a/resources/js/components/ui/Input/Input.vue b/resources/js/components/ui/Input/Input.vue
index 31071077c7b..c99e87d2e03 100644
--- a/resources/js/components/ui/Input/Input.vue
+++ b/resources/js/components/ui/Input/Input.vue
@@ -2,7 +2,7 @@
 import { computed, useSlots, ref, useId } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
-import { Icon, Button, CharacterCounter, WithField } from '@statamic/ui';
+import { Icon, Button, CharacterCounter } from '@statamic/ui';
 
 const slots = useSlots();
 
@@ -109,49 +109,47 @@ const copy = () => {
 </script>
 
 <template>
-    <WithField :label :description :required :badge>
-        <div class="group/input relative block w-full" data-ui-input>
-            <div v-if="hasPrependedIcon" :class="iconClasses">
-                <slot name="prepend">
-                    <Icon :name="iconPrepend || icon" />
-                </slot>
-            </div>
-            <input
-                :class="inputClasses"
-                :id
-                :type="inputType"
-                :value="modelValue"
-                :placeholder="placeholder"
-                data-ui-control
-                data-ui-group-target
-                v-bind="$attrs"
-                @input="$emit('update:modelValue', $event.target.value)"
-            />
-            <div v-if="hasAppendedIcon" :class="iconClasses">
-                <slot name="append">
-                    <Button size="sm" icon="x" variant="ghost" v-if="clearable" @click="clear" />
-                    <Button
-                        size="sm"
-                        :icon="inputType === 'password' ? 'eye' : 'eye-closed'"
-                        variant="ghost"
-                        v-else-if="viewable"
-                        @click="togglePassword"
-                    />
-                    <Button
-                        size="sm"
-                        :icon="copied ? 'clipboard-check' : 'clipboard'"
-                        variant="ghost"
-                        v-else-if="copyable"
-                        @click="copy"
-                        class="animate"
-                        :class="copied ? 'animate-wiggle' : ''"
-                    />
-                    <Icon v-else :name="iconAppend" />
-                </slot>
-            </div>
-            <div v-if="limit" class="absolute inset-y-0 right-2 flex items-center">
-                <CharacterCounter :text="modelValue" :limit />
-            </div>
+    <div class="group/input relative block w-full" data-ui-input>
+        <div v-if="hasPrependedIcon" :class="iconClasses">
+            <slot name="prepend">
+                <Icon :name="iconPrepend || icon" />
+            </slot>
         </div>
-    </WithField>
+        <input
+            :class="inputClasses"
+            :id
+            :type="inputType"
+            :value="modelValue"
+            :placeholder="placeholder"
+            data-ui-control
+            data-ui-group-target
+            v-bind="$attrs"
+            @input="$emit('update:modelValue', $event.target.value)"
+        />
+        <div v-if="hasAppendedIcon" :class="iconClasses">
+            <slot name="append">
+                <Button size="sm" icon="x" variant="ghost" v-if="clearable" @click="clear" />
+                <Button
+                    size="sm"
+                    :icon="inputType === 'password' ? 'eye' : 'eye-closed'"
+                    variant="ghost"
+                    v-else-if="viewable"
+                    @click="togglePassword"
+                />
+                <Button
+                    size="sm"
+                    :icon="copied ? 'clipboard-check' : 'clipboard'"
+                    variant="ghost"
+                    v-else-if="copyable"
+                    @click="copy"
+                    class="animate"
+                    :class="copied ? 'animate-wiggle' : ''"
+                />
+                <Icon v-else :name="iconAppend" />
+            </slot>
+        </div>
+        <div v-if="limit" class="absolute inset-y-0 right-2 flex items-center">
+            <CharacterCounter :text="modelValue" :limit />
+        </div>
+    </div>
 </template>
diff --git a/resources/js/components/ui/Radio/Group.vue b/resources/js/components/ui/Radio/Group.vue
index a236796d4b8..4f634a5174d 100644
--- a/resources/js/components/ui/Radio/Group.vue
+++ b/resources/js/components/ui/Radio/Group.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useId } from 'vue';
 import { RadioGroupRoot } from 'reka-ui';
-import { WithField } from '@statamic/ui';
 
 defineProps({
     description: { type: String, default: null },
@@ -22,17 +21,15 @@ defineExpose({ focus });
 </script>
 
 <template>
-    <WithField :label :description :required>
-        <RadioGroupRoot
-            :modelValue="modelValue"
-            @update:modelValue="$emit('update:modelValue', $event)"
-            :name="name"
-            class="relative block w-full space-y-2"
-            :class="{ 'flex flex-wrap space-y-0 gap-x-4 gap-y-2': inline }"
-            data-ui-input
-            data-ui-radio-group
-        >
-            <slot />
-        </RadioGroupRoot>
-    </WithField>
+    <RadioGroupRoot
+        :modelValue="modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        :name="name"
+        class="relative block w-full space-y-2"
+        :class="{ 'flex flex-wrap space-y-0 gap-x-4 gap-y-2': inline }"
+        data-ui-input
+        data-ui-radio-group
+    >
+        <slot />
+    </RadioGroupRoot>
 </template>
diff --git a/resources/js/components/ui/Select/Select.vue b/resources/js/components/ui/Select/Select.vue
index be464a5e6ce..172dd00639b 100644
--- a/resources/js/components/ui/Select/Select.vue
+++ b/resources/js/components/ui/Select/Select.vue
@@ -11,7 +11,7 @@ import {
     SelectViewport,
 } from 'reka-ui';
 import { useAttrs } from 'vue';
-import { WithField, Icon } from '@statamic/ui';
+import { Icon } from '@statamic/ui';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -59,39 +59,37 @@ const itemClasses = cva({
 </script>
 
 <template>
-    <WithField :label :description>
-        <SelectRoot v-bind="attrs" :model-value="modelValue" @update:model-value="emit('update:model-value', $event)">
-            <SelectTrigger :class="[triggerClasses, $attrs.class]" data-ui-select-trigger>
-                <SelectValue :placeholder="placeholder" class="select-none" />
-                <Icon name="ui/chevron-down" class="me-2" />
-            </SelectTrigger>
+    <SelectRoot v-bind="attrs" :model-value="modelValue" @update:model-value="emit('update:model-value', $event)">
+        <SelectTrigger :class="[triggerClasses, $attrs.class]" data-ui-select-trigger>
+            <SelectValue :placeholder="placeholder" class="select-none" />
+            <Icon name="ui/chevron-down" class="me-2" />
+        </SelectTrigger>
 
-            <SelectPortal>
-                <SelectContent
-                    position="popper"
-                    :side-offset="5"
-                    :class="[
-                        'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
-                        'max-h-[var(--reka-select-content-available-height)] w-[var(--reka-select-trigger-width)]',
-                    ]"
-                >
-                    <SelectViewport>
-                        <SelectItem
-                            v-if="options"
-                            v-for="(option, index) in options"
-                            :key="index"
-                            :value="option.value"
-                            :text-value="option.label"
-                            :class="itemClasses"
-                        >
-                            <slot name="option" v-bind="option">
-                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
-                                <SelectItemText v-html="option.label" />
-                            </slot>
-                        </SelectItem>
-                    </SelectViewport>
-                </SelectContent>
-            </SelectPortal>
-        </SelectRoot>
-    </WithField>
+        <SelectPortal>
+            <SelectContent
+                position="popper"
+                :side-offset="5"
+                :class="[
+                    'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
+                    'max-h-[var(--reka-select-content-available-height)] w-[var(--reka-select-trigger-width)]',
+                ]"
+            >
+                <SelectViewport>
+                    <SelectItem
+                        v-if="options"
+                        v-for="(option, index) in options"
+                        :key="index"
+                        :value="option.value"
+                        :text-value="option.label"
+                        :class="itemClasses"
+                    >
+                        <slot name="option" v-bind="option">
+                            <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
+                            <SelectItemText v-html="option.label" />
+                        </slot>
+                    </SelectItem>
+                </SelectViewport>
+            </SelectContent>
+        </SelectPortal>
+    </SelectRoot>
 </template>
diff --git a/resources/js/components/ui/Slider.vue b/resources/js/components/ui/Slider.vue
index 5c2f71909b3..b27f57a1271 100644
--- a/resources/js/components/ui/Slider.vue
+++ b/resources/js/components/ui/Slider.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useId } from 'vue';
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui';
-import { WithField } from '@statamic/ui';
 
 defineProps({
     description: { type: String, default: null },
@@ -14,23 +13,21 @@ defineEmits(['update:modelValue']);
 </script>
 
 <template>
-    <WithField :label :description :required variant="inline" :for="id">
-        <SliderRoot
-            data-ui-control
-            class="relative flex h-5 w-full touch-none items-center select-none"
-            :id
-            :max="100"
-            :step="1"
-            v-model="sliderValue"
-            @update:checked="$emit('update:modelValue', $event)"
-        >
-            <SliderTrack class="relative h-2 grow rounded-full bg-gray-200/80">
-                <SliderRange class="absolute h-full rounded-full bg-slate-900" />
-            </SliderTrack>
-            <SliderThumb
-                class="shadow-ui-sm focus:shadow-ui-md block h-5 w-5 rounded-full border-2 border-gray-900 bg-white hover:bg-gray-50 focus:outline-hidden"
-                :aria-label="label"
-            />
-        </SliderRoot>
-    </WithField>
+    <SliderRoot
+        data-ui-control
+        class="relative flex h-5 w-full touch-none items-center select-none"
+        :id
+        :max="100"
+        :step="1"
+        v-model="sliderValue"
+        @update:checked="$emit('update:modelValue', $event)"
+    >
+        <SliderTrack class="relative h-2 grow rounded-full bg-gray-200/80">
+            <SliderRange class="absolute h-full rounded-full bg-slate-900" />
+        </SliderTrack>
+        <SliderThumb
+            class="shadow-ui-sm focus:shadow-ui-md block h-5 w-5 rounded-full border-2 border-gray-900 bg-white hover:bg-gray-50 focus:outline-hidden"
+            :aria-label="label"
+        />
+    </SliderRoot>
 </template>
diff --git a/resources/js/components/ui/Switch.vue b/resources/js/components/ui/Switch.vue
index 1927c8d3d0e..004db5e99b5 100644
--- a/resources/js/components/ui/Switch.vue
+++ b/resources/js/components/ui/Switch.vue
@@ -2,7 +2,6 @@
 import { useId } from 'vue';
 import { SwitchRoot, SwitchThumb } from 'reka-ui';
 import { cva } from 'cva';
-import { WithField } from '@statamic/ui';
 
 const props = defineProps({
     description: { type: String, default: null },
@@ -51,17 +50,15 @@ const switchThumbClasses = cva({
 </script>
 
 <template>
-    <WithField :label :description :required variant="inline" :for="id">
-        <SwitchRoot
-            data-ui-control
-            dir="ltr"
-            :id="id"
-            :model-value="modelValue"
-            :class="switchRootClasses"
-            @update:model-value="$emit('update:modelValue', $event)"
-            data-ui-switch
-        >
-            <SwitchThumb :class="switchThumbClasses" />
-        </SwitchRoot>
-    </WithField>
+    <SwitchRoot
+        data-ui-control
+        dir="ltr"
+        :id="id"
+        :model-value="modelValue"
+        :class="switchRootClasses"
+        @update:model-value="$emit('update:modelValue', $event)"
+        data-ui-switch
+    >
+        <SwitchThumb :class="switchThumbClasses" />
+    </SwitchRoot>
 </template>
diff --git a/resources/js/components/ui/Textarea.vue b/resources/js/components/ui/Textarea.vue
index a9c5f1c57d0..1bf529630cd 100644
--- a/resources/js/components/ui/Textarea.vue
+++ b/resources/js/components/ui/Textarea.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { cva } from 'cva';
-import { WithField, CharacterCounter } from '@statamic/ui';
+import { CharacterCounter } from '@statamic/ui';
 
 defineEmits(['update:modelValue']);
 
@@ -37,19 +37,17 @@ const classes = cva({
 </script>
 
 <template>
-    <WithField :label="label" :description="description" :required="required">
-        <div class="group/input relative block w-full" data-ui-input>
-            <textarea
-                :class="classes"
-                :rows="rows"
-                v-bind="$attrs"
-                :value="modelValue"
-                data-ui-control
-                @input="$emit('update:modelValue', $event.target.value)"
-            />
-            <div class="absolute right-2 bottom-2" v-if="limit">
-                <CharacterCounter :text="modelValue" :limit />
-            </div>
+    <div class="group/input relative block w-full" data-ui-input>
+        <textarea
+            :class="classes"
+            :rows="rows"
+            v-bind="$attrs"
+            :value="modelValue"
+            data-ui-control
+            @input="$emit('update:modelValue', $event.target.value)"
+        />
+        <div class="absolute right-2 bottom-2" v-if="limit">
+            <CharacterCounter :text="modelValue" :limit />
         </div>
-    </WithField>
+    </div>
 </template>
diff --git a/resources/js/components/ui/TimePicker/TimePicker.vue b/resources/js/components/ui/TimePicker/TimePicker.vue
index 5895ecbf450..53b1a0fa233 100644
--- a/resources/js/components/ui/TimePicker/TimePicker.vue
+++ b/resources/js/components/ui/TimePicker/TimePicker.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { TimeFieldInput, TimeFieldRoot } from 'reka-ui';
-import { WithField, Button } from '@statamic/ui';
+import { Button } from '@statamic/ui';
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -27,41 +27,32 @@ const setToNow = () => {
 </script>
 
 <template>
-    <WithField :label :description :required :badge>
-        <TimeFieldRoot
-            :model-value="modelValue"
-            @update:model-value="emit('update:modelValue', $event)"
-            v-slot="{ segments }"
-            :granularity="granularity"
-            :class="[
-                'flex w-full bg-white dark:bg-gray-900',
-                'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:inset-shadow-2xs dark:inset-shadow-black',
-                'leading-[1.375rem] text-gray-600 dark:text-gray-300',
-                'shadow-ui-sm not-prose h-10 rounded-lg py-2 ps-3 pe-10 disabled:shadow-none',
-                'data-invalid:border-red-500',
-            ]"
-        >
-            <template v-for="item in segments" :key="item.part">
-                <TimeFieldInput v-if="item.part === 'literal'" :part="item.part">{{ item.value }}</TimeFieldInput>
-                <TimeFieldInput
-                    v-else
-                    :part="item.part"
-                    class="rounded-sm px-0.25 py-0.5 focus:bg-gray-50 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
-                >
-                    {{ item.value }}
-                </TimeFieldInput>
-            </template>
-        </TimeFieldRoot>
+    <TimeFieldRoot
+        :model-value="modelValue"
+        @update:model-value="emit('update:modelValue', $event)"
+        v-slot="{ segments }"
+        :granularity="granularity"
+        :class="[
+            'flex w-full bg-white dark:bg-gray-900',
+            'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:inset-shadow-2xs dark:inset-shadow-black',
+            'leading-[1.375rem] text-gray-600 dark:text-gray-300',
+            'shadow-ui-sm not-prose h-10 rounded-lg py-2 ps-3 pe-10 disabled:shadow-none',
+            'data-invalid:border-red-500',
+        ]"
+    >
+        <template v-for="item in segments" :key="item.part">
+            <TimeFieldInput v-if="item.part === 'literal'" :part="item.part">{{ item.value }}</TimeFieldInput>
+            <TimeFieldInput
+                v-else
+                :part="item.part"
+                class="rounded-sm px-0.25 py-0.5 focus:bg-gray-50 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-gray-800 dark:data-placeholder:text-gray-400"
+            >
+                {{ item.value }}
+            </TimeFieldInput>
+        </template>
+    </TimeFieldRoot>
 
-        <Button
-            v-if="clearable"
-            @click="emit('update:modelValue', null)"
-            type="button"
-            class=""
-            text="Clear"
-            size="xs"
-        />
+    <Button v-if="clearable" @click="emit('update:modelValue', null)" type="button" class="" text="Clear" size="xs" />
 
-        <Button v-if="clearable" @click="setToNow" type="button" class="" :text="__('Set to now')" size="xs" />
-    </WithField>
+    <Button v-if="clearable" @click="setToNow" type="button" class="" :text="__('Set to now')" size="xs" />
 </template>
diff --git a/resources/js/components/ui/Toggle/Group.vue b/resources/js/components/ui/Toggle/Group.vue
index c32ecba7d30..4c52b5bd6a4 100644
--- a/resources/js/components/ui/Toggle/Group.vue
+++ b/resources/js/components/ui/Toggle/Group.vue
@@ -2,7 +2,6 @@
 import { ToggleGroupRoot } from 'reka-ui';
 import { ref, watch, provide } from 'vue';
 import { cva } from 'cva';
-import { WithField } from '@statamic/ui';
 
 const props = defineProps({
     description: { type: String, default: null },
@@ -54,14 +53,12 @@ const groupClasses = cva({
 </script>
 
 <template>
-    <WithField :label :description :required>
-        <ToggleGroupRoot
-            v-model="toggleState"
-            :type="multiple ? 'multiple' : 'single'"
-            :class="groupClasses"
-            data-ui-toggle-group
-        >
-            <slot />
-        </ToggleGroupRoot>
-    </WithField>
+    <ToggleGroupRoot
+        v-model="toggleState"
+        :type="multiple ? 'multiple' : 'single'"
+        :class="groupClasses"
+        data-ui-toggle-group
+    >
+        <slot />
+    </ToggleGroupRoot>
 </template>
diff --git a/resources/js/components/ui/WithField.vue b/resources/js/components/ui/WithField.vue
deleted file mode 100644
index 47e91f40ecb..00000000000
--- a/resources/js/components/ui/WithField.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <Field v-if="label || description" :class="fieldClasses" :variant>
-        <Label v-if="label" :text="label" :required :for :badge />
-        <Description v-if="description" :text="description" />
-        <slot v-bind="slotAttrs" />
-    </Field>
-    <slot v-else v-bind="$attrs" />
-</template>
-
-<script setup>
-import { useAttrs, computed } from 'vue';
-import { Field, Label, Description } from '@statamic/ui';
-
-defineOptions({ inheritAttrs: false });
-const rawAttrs = useAttrs();
-
-// Extract wrapper classes specifically meant for the ui-field component
-const fieldClasses = computed(() => {
-    return rawAttrs.wrapperClass || rawAttrs.fieldClass || '';
-});
-
-// Prepare attributes for the child component/slot, excluding what we've used
-const slotAttrs = computed(() => {
-    const { wrapperClass, fieldClass, ...rest } = rawAttrs;
-    return rest;
-});
-
-const props = defineProps({
-    badge: { type: String, default: null },
-    description: { type: String, default: null },
-    for: { type: String, default: null },
-    label: { type: String, default: null },
-    required: { type: Boolean, default: false },
-    variant: { type: String, default: 'block' },
-});
-</script>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 72fd9ed1c3f..fcea1043f3d 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -1,4 +1,3 @@
-import { default as WithField } from './WithField.vue';
 import { default as Field } from './Field.vue';
 import { default as Label } from './Label.vue';
 import { default as Description } from './Description.vue';
@@ -41,7 +40,6 @@ import { default as TabContent } from './Tabs/Content.vue';
 import { default as PublishTabs } from './Publish/Tabs.vue';
 
 export {
-    WithField,
     Field,
     Label,
     Description,

From c2899eb59ff9e2df964841122c2c20853df84e5b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 7 May 2025 14:41:37 -0400
Subject: [PATCH 04/33] Remove unused prop. Maybe it'll come back if we ever
 need it

---
 resources/js/components/ui/Publish/Sections.vue | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 53b06ecf341..bb43f850087 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -3,19 +3,9 @@ import { injectTabContext } from './TabProvider.vue';
 import { CardPanel } from '@statamic/ui';
 import SectionProvider from './SectionProvider.vue';
 import Fields from './Fields.vue';
-import { computed } from 'vue';
 
 const tab = injectTabContext();
-
-const props = defineProps({
-    of: {
-        type: Object,
-    },
-});
-
-const sections = computed(() => {
-    return props.of || tab.sections;
-});
+const sections = tab.sections;
 </script>
 
 <template>

From a988d8ffa2e913db05b366c26bf9c0b61cf18753 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 7 May 2025 14:50:18 -0400
Subject: [PATCH 05/33] Show sidebar when space allows

---
 resources/js/components/ui/Publish/Tabs.vue | 52 ++++++++++++---------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 2431edfe4c8..964baba6f3e 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -3,37 +3,43 @@ import { Tabs, TabList, TabTrigger, TabContent } from '@statamic/ui';
 import TabProvider from './TabProvider.vue';
 import { injectContainerContext } from './Container.vue';
 import Sections from '@statamic/components/ui/Publish/Sections.vue';
-import { computed, useSlots } from 'vue';
+import { ref, computed, useSlots } from 'vue';
+import ElementContainer from '@statamic/components/ElementContainer.vue';
 
 const slots = useSlots();
 const context = injectContainerContext();
 const tabs = context.blueprint.tabs;
+const width = ref(null);
 const sidebarTab = computed(() => tabs.find((tab) => tab.handle === 'sidebar'));
-const mainTabs = computed(() => (sidebarTab ? tabs.filter((tab) => tab.handle !== 'sidebar') : tabs));
-const shouldShowSidebar = computed(() => slots.sidebar || sidebarTab.value);
+const mainTabs = computed(() =>
+    shouldShowSidebar.value && sidebarTab ? tabs.filter((tab) => tab.handle !== 'sidebar') : tabs,
+);
+const shouldShowSidebar = computed(() => (slots.sidebar || sidebarTab.value) && width.value > 920);
 </script>
 
 <template>
-    <Tabs :default-tab="mainTabs[0].handle">
-        <TabList class="mb-6">
-            <TabTrigger v-for="tab in mainTabs" :key="tab.handle" :name="tab.handle" :text="tab.display" />
-        </TabList>
+    <ElementContainer @resized="width = $event.width">
+        <Tabs :default-tab="mainTabs[0].handle">
+            <TabList class="mb-6">
+                <TabTrigger v-for="tab in mainTabs" :key="tab.handle" :name="tab.handle" :text="tab.display" />
+            </TabList>
 
-        <div :class="{ 'grid grid-cols-[1fr_320px] gap-8': shouldShowSidebar }">
-            <TabContent v-for="tab in mainTabs" :key="tab.handle" :name="tab.handle">
-                <TabProvider :tab="tab">
-                    <slot :tab="tab">
-                        <Sections />
-                    </slot>
-                </TabProvider>
-            </TabContent>
+            <div :class="{ 'grid grid-cols-[1fr_320px] gap-8': shouldShowSidebar }">
+                <TabContent v-for="tab in mainTabs" :key="tab.handle" :name="tab.handle">
+                    <TabProvider :tab="tab">
+                        <slot :tab="tab">
+                            <Sections />
+                        </slot>
+                    </TabProvider>
+                </TabContent>
 
-            <aside class="space-y-6" v-if="shouldShowSidebar">
-                <slot name="sidebar" />
-                <TabProvider v-if="sidebarTab" :tab="sidebarTab">
-                    <Sections />
-                </TabProvider>
-            </aside>
-        </div>
-    </Tabs>
+                <aside class="space-y-6" v-if="shouldShowSidebar">
+                    <slot name="sidebar" />
+                    <TabProvider v-if="sidebarTab" :tab="sidebarTab">
+                        <Sections />
+                    </TabProvider>
+                </aside>
+            </div>
+        </Tabs>
+    </ElementContainer>
 </template>

From 6b22ac3c930538d904a2c7a611eaaaba497d965c Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 12 May 2025 10:45:02 -0400
Subject: [PATCH 06/33] expect the store injected directly

---
 .../components/field-conditions/ValidatorMixin.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/field-conditions/ValidatorMixin.js b/resources/js/components/field-conditions/ValidatorMixin.js
index e32f2ffde3d..b0b6fcf6d80 100644
--- a/resources/js/components/field-conditions/ValidatorMixin.js
+++ b/resources/js/components/field-conditions/ValidatorMixin.js
@@ -2,7 +2,7 @@ import Validator from './Validator.js';
 import { data_get } from '../../bootstrap/globals.js';
 
 export default {
-    inject: ['publishContainer'],
+    inject: ['store'],
 
     methods: {
         showField(field, dottedKey) {
@@ -21,12 +21,7 @@ export default {
             }
 
             // Use validation to determine whether field should be shown.
-            let validator = new Validator(
-                field,
-                { ...this.values, ...this.extraValues },
-                dottedFieldPath,
-                this.publishContainer.store,
-            );
+            let validator = new Validator(field, { ...this.values, ...this.extraValues }, dottedFieldPath, this.store);
             let passes = validator.passesConditions();
 
             // If the field is configured to always save, never omit value.
@@ -53,14 +48,14 @@ export default {
         },
 
         setHiddenFieldState({ dottedKey, hidden, omitValue }) {
-            const currentValue = this.publishContainer.store.hiddenFields[dottedKey];
+            const currentValue = this.store.hiddenFields[dottedKey];
 
             // Prevent infinite loops
             if (currentValue && currentValue.hidden === hidden && currentValue.omitValue === omitValue) {
                 return;
             }
 
-            this.publishContainer.store.setHiddenField({
+            this.store.setHiddenField({
                 dottedKey,
                 hidden,
                 omitValue,
@@ -68,7 +63,7 @@ export default {
         },
 
         shouldForceHiddenField(dottedFieldPath) {
-            return data_get(this.publishContainer.store.hiddenFields[dottedFieldPath], 'hidden') === 'force';
+            return data_get(this.store.hiddenFields[dottedFieldPath], 'hidden') === 'force';
         },
     },
 };

From 70d20c53d83641758cd33e2061000c51652610c9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 12 May 2025 11:16:45 -0400
Subject: [PATCH 07/33] Move logic to class so it can be used from composition
 api more easily

---
 .../components/field-conditions/ShowField.js  | 72 +++++++++++++++++++
 .../field-conditions/ValidatorMixin.js        | 62 +---------------
 2 files changed, 74 insertions(+), 60 deletions(-)
 create mode 100644 resources/js/components/field-conditions/ShowField.js

diff --git a/resources/js/components/field-conditions/ShowField.js b/resources/js/components/field-conditions/ShowField.js
new file mode 100644
index 00000000000..bc9f5432c40
--- /dev/null
+++ b/resources/js/components/field-conditions/ShowField.js
@@ -0,0 +1,72 @@
+import Validator from '@statamic/components/field-conditions/Validator.js';
+import { data_get } from '@statamic/bootstrap/globals.js';
+import { nextTick } from 'vue';
+
+export default class {
+    constructor(store, values, extraValues) {
+        this.store = store;
+        this.values = values;
+        this.extraValues = extraValues;
+    }
+
+    showField(field, dottedKey) {
+        let dottedFieldPath = dottedKey || field.handle;
+        let dottedPrefix = dottedKey ? dottedKey.replace(new RegExp('\.' + field.handle + '$'), '') : '';
+
+        // If we know the field is to permanently hidden, bypass validation.
+        if (field.visibility === 'hidden' || this.shouldForceHiddenField(dottedFieldPath)) {
+            this.setHiddenFieldState({
+                dottedKey: dottedFieldPath,
+                hidden: 'force',
+                omitValue: false,
+            });
+
+            return false;
+        }
+
+        // Use validation to determine whether field should be shown.
+        let validator = new Validator(field, { ...this.values, ...this.extraValues }, dottedFieldPath, this.store);
+        let passes = validator.passesConditions();
+
+        // If the field is configured to always save, never omit value.
+        if (field.always_save === true) {
+            this.setHiddenFieldState({
+                dottedKey: dottedFieldPath,
+                hidden: !passes,
+                omitValue: false,
+            });
+
+            return passes;
+        }
+
+        // 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),
+            });
+        });
+
+        return passes;
+    }
+
+    setHiddenFieldState({ dottedKey, hidden, omitValue }) {
+        const currentValue = this.store.hiddenFields[dottedKey];
+
+        // Prevent infinite loops
+        if (currentValue && currentValue.hidden === hidden && currentValue.omitValue === omitValue) {
+            return;
+        }
+
+        this.store.setHiddenField({
+            dottedKey,
+            hidden,
+            omitValue,
+        });
+    }
+
+    shouldForceHiddenField(dottedFieldPath) {
+        return data_get(this.store.hiddenFields[dottedFieldPath], 'hidden') === 'force';
+    }
+}
diff --git a/resources/js/components/field-conditions/ValidatorMixin.js b/resources/js/components/field-conditions/ValidatorMixin.js
index b0b6fcf6d80..ceeaf3da7b4 100644
--- a/resources/js/components/field-conditions/ValidatorMixin.js
+++ b/resources/js/components/field-conditions/ValidatorMixin.js
@@ -1,69 +1,11 @@
-import Validator from './Validator.js';
-import { data_get } from '../../bootstrap/globals.js';
+import ShowField from './ShowField.js';
 
 export default {
     inject: ['store'],
 
     methods: {
         showField(field, dottedKey) {
-            let dottedFieldPath = dottedKey || field.handle;
-            let dottedPrefix = dottedKey ? dottedKey.replace(new RegExp('\.' + field.handle + '$'), '') : '';
-
-            // If we know the field is to permanently hidden, bypass validation.
-            if (field.visibility === 'hidden' || this.shouldForceHiddenField(dottedFieldPath)) {
-                this.setHiddenFieldState({
-                    dottedKey: dottedFieldPath,
-                    hidden: 'force',
-                    omitValue: false,
-                });
-
-                return false;
-            }
-
-            // Use validation to determine whether field should be shown.
-            let validator = new Validator(field, { ...this.values, ...this.extraValues }, dottedFieldPath, this.store);
-            let passes = validator.passesConditions();
-
-            // If the field is configured to always save, never omit value.
-            if (field.always_save === true) {
-                this.setHiddenFieldState({
-                    dottedKey: dottedFieldPath,
-                    hidden: !passes,
-                    omitValue: false,
-                });
-
-                return passes;
-            }
-
-            // Ensure DOM is updated to ensure all revealers are properly loaded and tracked before committing to store.
-            this.$nextTick(() => {
-                this.setHiddenFieldState({
-                    dottedKey: dottedFieldPath,
-                    hidden: !passes,
-                    omitValue: field.type === 'revealer' || !validator.passesNonRevealerConditions(dottedPrefix),
-                });
-            });
-
-            return passes;
-        },
-
-        setHiddenFieldState({ dottedKey, hidden, omitValue }) {
-            const currentValue = this.store.hiddenFields[dottedKey];
-
-            // Prevent infinite loops
-            if (currentValue && currentValue.hidden === hidden && currentValue.omitValue === omitValue) {
-                return;
-            }
-
-            this.store.setHiddenField({
-                dottedKey,
-                hidden,
-                omitValue,
-            });
-        },
-
-        shouldForceHiddenField(dottedFieldPath) {
-            return data_get(this.store.hiddenFields[dottedFieldPath], 'hidden') === 'force';
+            return new ShowField(this.store, this.values, this.extraValues).showField(field, dottedKey);
         },
     },
 };

From 2bc5772329a3f540c62385babc14baeb82b3e154 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 12 May 2025 13:49:20 -0400
Subject: [PATCH 08/33] wip ...

- section provider becomes fields provider
- fields provider accepts prefixes for recursion
- recursion works now. values/meta/errors/previews are pulled straight from the store by dotted keys
- field conditions work now
- field ids are provided to the fieldtype components as an `id` prop rather than a `fieldId` computed
- replicators hooked up
- group fieldtype hooked up
- grid stacked mode hooked up
---
 resources/js/bootstrap/statamic.js            |   4 +
 .../js/components/fieldtypes/Fieldtype.vue    |   5 +-
 .../components/fieldtypes/GroupFieldtype.vue  |  37 +---
 .../components/fieldtypes/grid/StackedRow.vue |  33 ++--
 .../fieldtypes/replicator/NewSet.vue          | 181 ++++++++++++++++++
 .../fieldtypes/replicator/Replicator.vue      |  32 ++--
 .../js/components/ui/Publish/Container.vue    |   7 +-
 resources/js/components/ui/Publish/Field.vue  |  54 ++++--
 resources/js/components/ui/Publish/Fields.vue |   5 +-
 .../components/ui/Publish/FieldsProvider.vue  |  31 +++
 .../components/ui/Publish/SectionProvider.vue |  20 --
 .../js/components/ui/Publish/Sections.vue     |   6 +-
 resources/js/stores/publish-container.js      |  13 ++
 13 files changed, 313 insertions(+), 115 deletions(-)
 create mode 100644 resources/js/components/fieldtypes/replicator/NewSet.vue
 create mode 100644 resources/js/components/ui/Publish/FieldsProvider.vue
 delete mode 100644 resources/js/components/ui/Publish/SectionProvider.vue

diff --git a/resources/js/bootstrap/statamic.js b/resources/js/bootstrap/statamic.js
index 8d4d1a3fbb8..f9e7143fa4b 100644
--- a/resources/js/bootstrap/statamic.js
+++ b/resources/js/bootstrap/statamic.js
@@ -110,6 +110,10 @@ export default {
         return this.$app.config.globalProperties.$theme;
     },
 
+    get $fieldActions() {
+        return this.$app.config.globalProperties.$fieldActions;
+    },
+
     get user() {
         return this.$config.get('user');
     },
diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 69c2aa8f936..f0f7df85759 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -48,6 +48,7 @@ export default {
         },
         namePrefix: String,
         fieldPathPrefix: String,
+        id: String,
     },
 
     methods: {
@@ -95,9 +96,7 @@ export default {
         },
 
         fieldId() {
-            let prefix = this.fieldPathPrefix ? this.fieldPathPrefix + '.' : '';
-
-            return prefix + 'field_' + this.config.handle;
+            return this.id;
         },
 
         fieldActionPayload() {
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index 576fe47cf21..ae289792f5c 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -10,31 +10,10 @@
                 >
                 </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
-                    <div :class="{ 'replicator-set rounded-sm border shadow-sm dark:border-dark-900': config.border }">
-                        <div
-                            class="publish-fields @container"
-                            :class="{ 'replicator-set-body': config.border, '-mx-4': !config.border }"
-                        >
-                            <set-field
-                                v-for="field in fields"
-                                :key="field.handle"
-                                v-show="showField(field, fieldPath(field.handle))"
-                                :field="field"
-                                :meta="meta[field.handle]"
-                                :value="value[field.handle]"
-                                :parent-name="name"
-                                :set-index="0"
-                                :errors="errors(field.handle)"
-                                :field-path="fieldPath(field.handle)"
-                                :read-only="isReadOnly"
-                                :show-field-previews="config.replicator_preview"
-                                @updated="updated(field.handle, $event)"
-                                @meta-updated="updateMeta(field.handle, $event)"
-                                @focus="$emit('focus')"
-                                @blur="$emit('blur')"
-                                @replicator-preview-updated="previewUpdated(field.handle, $event)"
-                            />
-                        </div>
+                    <div :class="{ 'replicator-set dark:border-dark-900 rounded-sm border shadow-sm': config.border }">
+                        <FieldsProvider :fields="fields" :path-prefix="pathPrefix" :meta-path-prefix="pathPrefix">
+                            <Fields class="p-4" />
+                        </FieldsProvider>
                     </div>
                 </section>
             </div>
@@ -56,13 +35,14 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import SetField from './replicator/Field.vue';
 import { ValidatesFieldConditions } from '../field-conditions/FieldConditions.js';
 import ManagesPreviewText from './replicator/ManagesPreviewText';
+import Fields from '@statamic/components/ui/Publish/Fields.vue';
+import FieldsProvider from '@statamic/components/ui/Publish/FieldsProvider.vue';
 
 export default {
     mixins: [Fieldtype, ValidatesFieldConditions, ManagesPreviewText],
-    components: { SetField },
+    components: { Fields, FieldsProvider },
     data() {
         return {
             containerWidth: null,
@@ -76,6 +56,9 @@ export default {
     },
     inject: ['store'],
     computed: {
+        pathPrefix() {
+            return this.fieldPathPrefix || this.handle;
+        },
         values() {
             return this.value;
         },
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index 9b75815b278..aa5e6bb5990 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="replicator-set mb-4 rounded-sm border shadow-sm dark:border-dark-900"
+        class="replicator-set dark:border-dark-900 mb-4 rounded-sm border shadow-sm"
         :class="[sortableItemClass, { 'opacity-50': isExcessive }]"
     >
         <div class="replicator-set-header">
@@ -25,26 +25,13 @@
             </div>
         </div>
 
-        <div class="replicator-set-body publish-fields @container">
-            <set-field
-                v-for="field in fields"
-                v-show="showField(field, fieldPath(field.handle))"
-                :key="field.handle"
-                :field="field"
-                :meta="meta[field.handle]"
-                :value="values[field.handle]"
-                :parent-name="name"
-                :set-index="index"
-                :errors="errors(field.handle)"
-                :field-path="fieldPath(field.handle)"
-                class="p-4"
-                :read-only="grid.isReadOnly"
-                @updated="updated(field.handle, $event)"
-                @meta-updated="metaUpdated(field.handle, $event)"
-                @focus="$emit('focus')"
-                @blur="$emit('blur')"
-            />
-        </div>
+        <FieldsProvider
+            :fields="fields"
+            :path-prefix="`${fieldPathPrefix}.${index}`"
+            :meta-path-prefix="`${fieldPathPrefix}.existing.${values._id}`"
+        >
+            <PublishFields />
+        </FieldsProvider>
     </div>
 </template>
 
@@ -52,10 +39,12 @@
 import Row from './Row.vue';
 import SetField from '../replicator/Field.vue';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
+import { default as PublishFields } from '@statamic/components/ui/Publish/Fields.vue';
+import FieldsProvider from '@statamic/components/ui/Publish/FieldsProvider.vue';
 
 export default {
     mixins: [Row, ValidatesFieldConditions],
 
-    components: { SetField },
+    components: { SetField, PublishFields, FieldsProvider },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/replicator/NewSet.vue b/resources/js/components/fieldtypes/replicator/NewSet.vue
new file mode 100644
index 00000000000..83c98dbfbce
--- /dev/null
+++ b/resources/js/components/fieldtypes/replicator/NewSet.vue
@@ -0,0 +1,181 @@
+<script setup>
+import Fields from '@statamic/components/ui/Publish/Fields.vue';
+import FieldsProvider from '@statamic/components/ui/Publish/FieldsProvider.vue';
+import { computed, inject } from 'vue';
+import { Icon, Switch, Subheading, Badge, Tooltip } from '@statamic/ui';
+import DropdownActions from '@statamic/components/field-actions/DropdownActions.vue';
+import { Motion } from 'motion-v';
+import { injectContainerContext } from '@statamic/components/ui/Publish/Container.vue';
+import PreviewHtml from '@statamic/components/fieldtypes/replicator/PreviewHtml.js';
+import FieldAction from '@statamic/components/field-actions/FieldAction.js';
+
+const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'removed']);
+
+const replicatorSets = inject('replicatorSets');
+
+const props = defineProps({
+    config: Object,
+    id: String,
+    path: String,
+    index: Number,
+    collapsed: Boolean,
+    values: Object,
+    sortableItemClass: String,
+    sortableHandleClass: String,
+    readOnly: Boolean,
+    enabled: Boolean,
+    hasError: Boolean,
+    canAddSet: Boolean,
+    showFieldPreviews: Boolean,
+});
+
+const { store } = injectContainerContext();
+const pathPrefix = computed(() => `${props.path}.${props.index}`);
+const metaPathPrefix = computed(() => `${props.path}.existing.${props.id}`);
+const isInvalid = computed(() => Object.keys(props.config).length === 0);
+
+const setGroup = computed(() => {
+    if (replicatorSets.length < 1) return null;
+
+    return (
+        replicatorSets.find((group) => {
+            return group.sets.filter((set) => set.handle === props.config.handle).length > 0;
+        }) ?? {}
+    );
+});
+
+const isSetGroupVisible = computed(() => replicatorSets.length > 1 && setGroup.value.display);
+
+const fieldActionPayload = computed(() => ({
+    // vm: this,
+    // fieldVm: this.fieldVm,
+    // fieldPathPrefix: this.fieldPathPrefix,
+    index: props.index,
+    values: props.values,
+    config: props.config,
+    // meta: this.meta,
+    update: (handle, value) => store.setDottedFieldValue({ path: `${pathPrefix.value}.${handle}`, value }),
+    // updateMeta: (handle, value) => this.metaUpdated(handle, value),
+    isReadOnly: props.readOnly,
+    // store: this.store,
+    // storeName: this.storeName,
+}));
+
+const fieldActions = computed(() => {
+    return [...Statamic.$fieldActions.get('replicator-fieldtype-set')]
+        .map((action) => new FieldAction(action, fieldActionPayload.value))
+        .filter((action) => action.visible);
+});
+
+const previewText = computed(() => {
+    return Object.entries(data_get(store.previews, pathPrefix.value) || {})
+        .filter(([handle, value]) => {
+            handle = handle.substr(0, handle.length - 1); // Remove the trailing underscore.
+            const config = props.config.fields.find((f) => f.handle === handle) || {};
+            return config.replicator_preview === undefined ? props.showFieldPreviews : config.replicator_preview;
+        })
+        .map(([handle, value]) => value)
+        .filter((value) => (['null', '[]', '{}', ''].includes(JSON.stringify(value)) ? null : value))
+        .map((value) => {
+            if (value instanceof PreviewHtml) return value.html;
+
+            if (typeof value === 'string') return escapeHtml(value);
+
+            if (Array.isArray(value) && typeof value[0] === 'string') {
+                return escapeHtml(value.join(', '));
+            }
+
+            return escapeHtml(JSON.stringify(value));
+        })
+        .join(' / ');
+});
+
+function toggleEnabledState() {
+    store.setDottedFieldValue({ path: `${pathPrefix.value}.enabled`, value: !props.enabled });
+}
+
+function toggleCollapsedState() {
+    props.collapsed ? emit('expanded') : emit('collapsed');
+}
+
+function destroy() {
+    if (confirm(__('Are you sure?'))) emit('removed');
+}
+</script>
+
+<template>
+    <div :class="sortableItemClass">
+        <slot name="picker" />
+        <div
+            layout
+            class="shadow-ui-sm relative z-2 w-full rounded-lg border border-gray-200 bg-white text-base dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black"
+            :data-collapsed="collapsed ?? undefined"
+            :data-error="hasError ?? undefined"
+            :data-invalid="isInvalid ?? undefined"
+            :data-readonly="readOnly ?? undefined"
+            :data-type="config.handle"
+        >
+            <header
+                class="group/header animate-border-color flex items-center rounded-lg border-b border-transparent px-1.5 antialiased duration-200 hover:bg-gray-50"
+                :class="{ 'rounded-b-none border-gray-200! dark:border-white/15': !collapsed }"
+            >
+                <Icon
+                    name="handles"
+                    :class="sortableHandleClass"
+                    class="size-4 cursor-grab text-gray-400"
+                    v-if="!readOnly"
+                />
+                <button type="button" class="flex flex-1 items-center gap-4 p-2" @click="toggleCollapsedState">
+                    <Badge variant="flat" size="lg">
+                        <span v-if="isSetGroupVisible">
+                            {{ __(setGroup.display) }}
+                            <Icon name="ui/chevron-right" class="relative top-px size-3" />
+                        </span>
+                        {{ __(props.config.display) || config.handle }}
+                    </Badge>
+                    <Tooltip :markdown="__(config.instructions)">
+                        <Icon
+                            v-if="config.instructions && !collapsed"
+                            name="info-square"
+                            class="size-3.5! text-gray-500"
+                        />
+                    </Tooltip>
+                    <Subheading
+                        v-show="collapsed"
+                        v-html="previewText"
+                        class="overflow-hidden text-ellipsis whitespace-nowrap"
+                    />
+                </button>
+                <div class="flex items-center gap-2" v-if="!readOnly">
+                    <Tooltip :text="enabled ? __('Included in output') : __('Hidden from output')">
+                        <Switch size="xs" :model-value="enabled" @update:model-value="toggleEnabledState" />
+                    </Tooltip>
+
+                    <!-- @TODO: Replace with UI/Dropdown when Actions are more isolatable -->
+                    <dropdown-list>
+                        <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
+                        <div class="divider" />
+                        <dropdown-item
+                            :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))"
+                            @click="toggleCollapsedState"
+                        />
+                        <dropdown-item :text="__('Duplicate Set')" @click="emit('duplicated')" v-if="canAddSet" />
+                        <dropdown-item :text="__('Delete Set')" class="warning" @click="destroy" />
+                    </dropdown-list>
+                </div>
+            </header>
+
+            <Motion
+                layout
+                class="overflow-hidden"
+                :initial="{ height: collapsed ? '0px' : 'auto' }"
+                :animate="{ height: collapsed ? '0px' : 'auto' }"
+                :transition="{ duration: 0.25, type: 'tween' }"
+            >
+                <FieldsProvider :fields="config.fields" :path-prefix="pathPrefix" :meta-path-prefix="metaPathPrefix">
+                    <Fields class="p-4" />
+                </FieldsProvider>
+            </Motion>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index c6c28588874..684c7a1a804 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -7,7 +7,7 @@
             <div :class="{ wrapperClasses: fullScreenMode }">
                 <div
                     class="replicator-fieldtype-container"
-                    :class="{ 'replicator-fullscreen bg-gray-200 dark:bg-dark-700': fullScreenMode }"
+                    :class="{ 'replicator-fullscreen dark:bg-dark-700 bg-gray-200': fullScreenMode }"
                 >
                     <publish-field-fullscreen-header
                         v-if="fullScreenMode"
@@ -16,7 +16,7 @@
                         @close="toggleFullscreen"
                     />
 
-                    <section :class="{ 'mt-14 bg-gray-200 p-4 dark:bg-dark-700': fullScreenMode }">
+                    <section :class="{ 'dark:bg-dark-700 mt-14 bg-gray-200 p-4': fullScreenMode }">
                         <sortable-list
                             :model-value="value"
                             :vertical="true"
@@ -30,32 +30,26 @@
                             v-slot="{}"
                         >
                             <div class="relative">
-                                <replicator-set
+                                <NewReplicatorSet
                                     v-for="(set, index) in value"
                                     :key="set._id"
-                                    :index="index"
+                                    :id="set._id"
+                                    :index
+                                    :path="setPathPrefix"
                                     :values="set"
-                                    :meta="meta.existing[set._id]"
                                     :config="setConfig(set.type)"
-                                    :parent-name="name"
                                     :sortable-item-class="sortableItemClass"
                                     :sortable-handle-class="sortableHandleClass"
-                                    :is-read-only="isReadOnly"
                                     :collapsed="collapsed.includes(set._id)"
-                                    :field-path-prefix="fieldPathPrefix || handle"
+                                    :enabled="set.enabled"
+                                    :read-only
+                                    :can-add-set="canAddSet"
                                     :has-error="setHasError(index)"
-                                    :previews="meta.previews[set._id]"
                                     :show-field-previews="config.previews"
-                                    :can-add-set="canAddSet"
                                     @collapsed="collapseSet(set._id)"
                                     @expanded="expandSet(set._id)"
                                     @duplicated="duplicateSet(set._id)"
-                                    @updated="updated"
-                                    @meta-updated="updateSetMeta(set._id, $event)"
                                     @removed="removed(set, index)"
-                                    @focus="focused = true"
-                                    @blur="blurred"
-                                    @previews-updated="updateSetPreviews(set._id, $event)"
                                 >
                                     <template v-slot:picker>
                                         <add-set-button
@@ -68,7 +62,7 @@
                                             @added="addSet"
                                         />
                                     </template>
-                                </replicator-set>
+                                </NewReplicatorSet>
                             </div>
                         </sortable-list>
 
@@ -92,6 +86,7 @@
 import Fieldtype from '../Fieldtype.vue';
 import uniqid from 'uniqid';
 import ReplicatorSet from './Set.vue';
+import NewReplicatorSet from './NewSet.vue';
 import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
@@ -101,6 +96,7 @@ export default {
 
     components: {
         ReplicatorSet,
+        NewReplicatorSet,
         SortableList,
         AddSetButton,
     },
@@ -120,6 +116,10 @@ export default {
     },
 
     computed: {
+        setPathPrefix() {
+            return this.fieldPathPrefix ? `${this.fieldPathPrefix}.${this.handle}` : this.handle;
+        },
+
         canAddSet() {
             if (this.isReadOnly) return false;
 
diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index 4450a312e16..e012d670867 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -7,7 +7,7 @@ export const [injectContainerContext, provideContainerContext] = createContext('
 <script setup>
 import uniqid from 'uniqid';
 import { usePublishContainerStore } from '@statamic/stores/publish-container.js';
-import { watch } from 'vue';
+import { watch, provide, getCurrentInstance } from 'vue';
 
 const emit = defineEmits(['updated']);
 
@@ -61,6 +61,11 @@ provideContainerContext({
         alert('Function from container context');
     },
 });
+
+// Backwards compatibility.
+provide('store', store);
+provide('storeName', props.name);
+provide('publishContainer', getCurrentInstance());
 </script>
 
 <template>
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index b2f7db80e26..8e6c51cd116 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { computed, useTemplateRef } from 'vue';
 import { injectContainerContext } from './Container.vue';
+import { injectFieldsContext } from './FieldsProvider.vue';
 import { Field } from '@statamic/ui';
+import ShowField from '@statamic/components/field-conditions/ShowField.js';
 
 const props = defineProps({
     config: {
@@ -10,30 +12,23 @@ const props = defineProps({
     },
 });
 
-const context = injectContainerContext();
-const store = context.store;
+const { store } = injectContainerContext();
+const { pathPrefix, metaPathPrefix } = injectFieldsContext();
 const handle = props.config.handle;
 
 const fieldtypeComponent = computed(() => {
     return `${props.config.component || props.config.type}-fieldtype`;
 });
 
-const value = computed(() => {
-    // todo: this is only getting top level.
-    // need a way to get nested fields.
-    return store.values[handle];
-});
+const fullPath = computed(() => [pathPrefix, handle].filter(Boolean).join('.'));
+const value = computed(() => data_get(store.values, fullPath.value));
 const meta = computed(() => {
-    // todo: see value todo
-    return store.meta[handle];
-});
-const errors = computed(() => {
-    // todo: see value todo
-    return store.errors[handle];
+    const key = [metaPathPrefix, handle].filter(Boolean).join('.');
+    return data_get(store.meta, key);
 });
-const fieldId = 'bob';
+const errors = computed(() => data_get(store.errors, fullPath.value));
+const fieldId = computed(() => `field_${fullPath.value.replaceAll('.', '_')}`);
 const namePrefix = '';
-const fieldPathPrefix = '';
 const isReadOnly = false;
 const isRequired = computed(() => props.config.required);
 const fieldtype = useTemplateRef('fieldtype');
@@ -43,22 +38,37 @@ const fieldActions = computed(() => {
 });
 
 function valueUpdated(value) {
-    // todo: this is only setting the top level. see value todo.
-    store.setFieldValue({ handle, value });
+    store.setDottedFieldValue({ path: fullPath.value, value });
 }
 
 function metaUpdated(value) {
-    // todo: this is only setting the top level. see value todo.
-    store.setFieldMeta({ handle, value });
+    store.setDottedFieldMeta({ path: fullPath.value, value });
+}
+
+function replicatorPreviewUpdated(value) {
+    store.setDottedFieldReplicatorPreview({ path: fullPath.value, value });
 }
 
 function focused() {}
 
 function blurred() {}
+
+const values = computed(() => {
+    return pathPrefix ? data_get(store.values, pathPrefix) : store.values;
+});
+
+const extraValues = computed(() => {
+    return pathPrefix ? data_get(store.extraValues, pathPrefix) : store.extraValues;
+});
+
+const shouldShowField = computed(() => {
+    return new ShowField(store, values.value, extraValues.value).showField(props.config, fullPath.value);
+});
 </script>
 
 <template>
     <Field
+        v-show="shouldShowField"
         :label="config.display"
         :id="fieldId"
         :instructions="config.instructions"
@@ -72,16 +82,20 @@ function blurred() {}
         <Component
             ref="fieldtype"
             :is="fieldtypeComponent"
+            :id="fieldId"
+            :config="config"
             :value="value"
             :meta="meta"
             :handle="handle"
             :name-prefix="namePrefix"
-            :field-path-prefix="fieldPathPrefix"
+            :field-path-prefix="pathPrefix"
             :read-only="isReadOnly"
+            show-field-previews
             @update:value="valueUpdated"
             @meta-updated="metaUpdated"
             @focus="focused"
             @blur="blurred"
+            @replicator-preview-updated="replicatorPreviewUpdated"
         />
     </Field>
 </template>
diff --git a/resources/js/components/ui/Publish/Fields.vue b/resources/js/components/ui/Publish/Fields.vue
index d73f40a1ad4..31befb774a0 100644
--- a/resources/js/components/ui/Publish/Fields.vue
+++ b/resources/js/components/ui/Publish/Fields.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { injectSectionContext } from './SectionProvider.vue';
+import { injectFieldsContext } from './FieldsProvider.vue';
 import Field from './Field.vue';
 
-const section = injectSectionContext();
-const fields = section.fields;
+const { fields } = injectFieldsContext();
 </script>
 
 <template>
diff --git a/resources/js/components/ui/Publish/FieldsProvider.vue b/resources/js/components/ui/Publish/FieldsProvider.vue
new file mode 100644
index 00000000000..b15b39b0761
--- /dev/null
+++ b/resources/js/components/ui/Publish/FieldsProvider.vue
@@ -0,0 +1,31 @@
+<script>
+import createContext from '@statamic/util/createContext.js';
+
+export const [injectFieldsContext, provideFieldsContext] = createContext('PublishFields');
+</script>
+
+<script setup>
+const props = defineProps({
+    fields: {
+        type: Array,
+        required: true,
+    },
+    pathPrefix: {
+        type: String,
+    },
+    metaPathPrefix: {
+        type: String,
+        default: (props) => props.pathPrefix,
+    },
+});
+
+provideFieldsContext({
+    fields: props.fields,
+    pathPrefix: props.pathPrefix,
+    metaPathPrefix: props.metaPathPrefix,
+});
+</script>
+
+<template>
+    <slot />
+</template>
diff --git a/resources/js/components/ui/Publish/SectionProvider.vue b/resources/js/components/ui/Publish/SectionProvider.vue
deleted file mode 100644
index ec3d2f9ccfd..00000000000
--- a/resources/js/components/ui/Publish/SectionProvider.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-import createContext from '@statamic/util/createContext.js';
-
-export const [injectSectionContext, provideSectionContext] = createContext('PublishSection');
-</script>
-
-<script setup>
-const props = defineProps({
-    section: {
-        type: Object,
-        required: true,
-    },
-});
-
-provideSectionContext(props.section);
-</script>
-
-<template>
-    <slot />
-</template>
diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index bb43f850087..afbc33f1b33 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { injectTabContext } from './TabProvider.vue';
 import { CardPanel } from '@statamic/ui';
-import SectionProvider from './SectionProvider.vue';
+import FieldsProvider from './FieldsProvider.vue';
 import Fields from './Fields.vue';
 
 const tab = injectTabContext();
@@ -17,11 +17,11 @@ const sections = tab.sections;
             :subheading="section.instructions"
             class="mb-6"
         >
-            <SectionProvider :section="section">
+            <FieldsProvider :fields="section.fields">
                 <slot :section="section">
                     <Fields />
                 </slot>
-            </SectionProvider>
+            </FieldsProvider>
         </CardPanel>
     </div>
 </template>
diff --git a/resources/js/stores/publish-container.js b/resources/js/stores/publish-container.js
index dc720e79007..70c37950f9c 100644
--- a/resources/js/stores/publish-container.js
+++ b/resources/js/stores/publish-container.js
@@ -10,6 +10,7 @@ export const usePublishContainerStore = function (name, initial) {
             jsonSubmittingFields: [],
             revealerFields: [],
             meta: initial.meta,
+            previews: {},
             localizedFields: initial.localizedFields,
             site: initial.site,
             fieldLocks: {},
@@ -24,6 +25,10 @@ export const usePublishContainerStore = function (name, initial) {
                 const { handle, value } = payload;
                 this.values[handle] = value;
             },
+            setDottedFieldValue(payload) {
+                const { path, value } = payload;
+                data_set(this.values, path, value);
+            },
             setValues(values) {
                 this.values = values;
             },
@@ -65,6 +70,14 @@ export const usePublishContainerStore = function (name, initial) {
                 const { handle, value } = payload;
                 this.meta[handle] = value;
             },
+            setDottedFieldMeta(payload) {
+                const { path, value } = payload;
+                data_set(this.meta, path, value);
+            },
+            setDottedFieldReplicatorPreview(payload) {
+                const { path, value } = payload;
+                data_set(this.previews, path + '_', value);
+            },
             setIsRoot(isRoot) {
                 this.isRoot = isRoot;
             },

From d7fdd83bd7204f87ebc8a9c2cbbe968d7eacfddd Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 12 May 2025 14:07:42 -0400
Subject: [PATCH 09/33] Tabs with errors get highlighted

---
 resources/js/components/ui/Publish/Tabs.vue | 45 ++++++++++++++++++---
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 964baba6f3e..37551282e2b 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -7,21 +7,56 @@ import { ref, computed, useSlots } from 'vue';
 import ElementContainer from '@statamic/components/ElementContainer.vue';
 
 const slots = useSlots();
-const context = injectContainerContext();
-const tabs = context.blueprint.tabs;
+const { blueprint, store } = injectContainerContext();
+const tabs = ref(blueprint.tabs);
 const width = ref(null);
-const sidebarTab = computed(() => tabs.find((tab) => tab.handle === 'sidebar'));
+const sidebarTab = computed(() => tabs.value.find((tab) => tab.handle === 'sidebar'));
 const mainTabs = computed(() =>
-    shouldShowSidebar.value && sidebarTab ? tabs.filter((tab) => tab.handle !== 'sidebar') : tabs,
+    shouldShowSidebar.value && sidebarTab.value ? tabs.value.filter((tab) => tab.handle !== 'sidebar') : tabs.value,
 );
 const shouldShowSidebar = computed(() => (slots.sidebar || sidebarTab.value) && width.value > 920);
+
+const fieldTabMap = computed(() => {
+    let map = {};
+
+    Object.values(tabs.value).forEach((tab) => {
+        tab.sections.forEach((section) => {
+            section.fields.forEach((field) => {
+                map[field.handle] = tab.handle;
+            });
+        });
+    });
+
+    return map;
+});
+
+const tabsWithErrors = computed(() => {
+    return [
+        ...new Set(
+            Object.keys(store.errors)
+                .map((handle) => handle.split('.')[0])
+                .filter((handle) => fieldTabMap.value[handle])
+                .map((handle) => fieldTabMap.value[handle]),
+        ),
+    ];
+});
+
+function tabHasError(tab) {
+    return tabsWithErrors.value.includes(tab.handle);
+}
 </script>
 
 <template>
     <ElementContainer @resized="width = $event.width">
         <Tabs :default-tab="mainTabs[0].handle">
             <TabList class="mb-6">
-                <TabTrigger v-for="tab in mainTabs" :key="tab.handle" :name="tab.handle" :text="tab.display" />
+                <TabTrigger
+                    v-for="tab in mainTabs"
+                    :key="tab.handle"
+                    :name="tab.handle"
+                    :text="tab.display"
+                    :class="{ '!text-red-500': tabHasError(tab) }"
+                />
             </TabList>
 
             <div :class="{ 'grid grid-cols-[1fr_320px] gap-8': shouldShowSidebar }">

From 113199be33846dbd223e094c3149b4663d2c20cd Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 12 May 2025 14:19:19 -0400
Subject: [PATCH 10/33] tooltip can provide markdown as a prop

---
 resources/js/components/ui/Tooltip.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Tooltip.vue b/resources/js/components/ui/Tooltip.vue
index 4dfda5527dd..779f8b3007c 100644
--- a/resources/js/components/ui/Tooltip.vue
+++ b/resources/js/components/ui/Tooltip.vue
@@ -1,10 +1,14 @@
 <script setup>
 import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui';
+import { computed } from 'vue';
 
-defineProps({
+const props = defineProps({
     text: { type: String, default: null },
+    markdown: { type: String, default: null },
     delay: { type: Number, default: 0 },
 });
+
+const tooltipText = computed(() => (props.markdown ? markdown(props.markdown) : props.text));
 </script>
 
 <template>
@@ -27,7 +31,7 @@ defineProps({
                     ]"
                     :side-offset="5"
                 >
-                    {{ text }}
+                    <span v-html="tooltipText" />
                     <TooltipArrow class="fill-white stroke-gray-300" :width="12" :height="6" />
                 </TooltipContent>
             </TooltipPortal>

From a97f401de4eb65a2083e26e78a96516bb9524510 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 12 May 2025 14:19:41 -0400
Subject: [PATCH 11/33] Replicator no longer needs to pass previews

---
 src/Fieldtypes/Replicator.php | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/Fieldtypes/Replicator.php b/src/Fieldtypes/Replicator.php
index ee6e1a57222..219517db38c 100644
--- a/src/Fieldtypes/Replicator.php
+++ b/src/Fieldtypes/Replicator.php
@@ -235,18 +235,11 @@ public function preload()
             })->toArray();
         });
 
-        $previews = collect($existing)->map(function ($fields) {
-            return collect($fields)->map(function () {
-                return null;
-            })->all();
-        })->all();
-
         return [
             'existing' => $existing,
             'new' => $new,
             'defaults' => $defaults,
             'collapsed' => [],
-            'previews' => $previews,
         ];
     }
 

From 52723e2a8759e3f82037f73cf2ccc3ac10aac10a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 13 May 2025 11:48:20 -0400
Subject: [PATCH 12/33] Dirty state can be tracked

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

diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index e012d670867..1c1f1f08aa1 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -31,6 +31,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    trackDirtyState: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const store = usePublishContainerStore(props.name, {
@@ -42,7 +46,7 @@ const store = usePublishContainerStore(props.name, {
 watch(
     () => store.values,
     (values) => {
-        // markAsDirty();
+        if (props.trackDirtyState) dirty();
         emit('updated', values);
     },
     { deep: true },
@@ -62,6 +66,13 @@ provideContainerContext({
     },
 });
 
+function dirty() {
+    Statamic.$dirty.add(props.name);
+}
+
+function clearDirtyState() {
+    Statamic.$dirty.remove(props.name);
+}
 // Backwards compatibility.
 provide('store', store);
 provide('storeName', props.name);

From 186e3f13c3567252e3aca4fda42aae540b51a575 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 13 May 2025 11:49:57 -0400
Subject: [PATCH 13/33] Save pipeline

---
 resources/js/components/ui/Publish/Form.vue   |  28 ++--
 .../js/components/ui/Publish/SavePipeline.js  | 140 ++++++++++++++++++
 resources/js/exports.js                       |   1 +
 resources/js/util/resetValuesFromResponse.js  |  15 ++
 4 files changed, 172 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/components/ui/Publish/SavePipeline.js
 create mode 100644 resources/js/util/resetValuesFromResponse.js

diff --git a/resources/js/components/ui/Publish/Form.vue b/resources/js/components/ui/Publish/Form.vue
index 8c1367ae16f..f7e3e219f82 100644
--- a/resources/js/components/ui/Publish/Form.vue
+++ b/resources/js/components/ui/Publish/Form.vue
@@ -3,8 +3,9 @@ import Container from './Container.vue';
 import Tabs from './Tabs.vue';
 import { Header, Button } from '@statamic/ui';
 import uniqid from 'uniqid';
-import { ref } from 'vue';
-import axios from 'axios';
+import { ref, useTemplateRef } from 'vue';
+import { SavePipeline } from '@statamic/exports.js';
+const { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks } = SavePipeline;
 
 const props = defineProps({
     title: {
@@ -32,29 +33,32 @@ const props = defineProps({
 });
 
 const containerName = Statamic.$slug.separatedBy('_').create(props.title);
+const container = useTemplateRef('container');
 const values = ref(props.initialValues);
 const meta = ref(props.initialMeta);
 const errors = ref({});
+const saving = ref(false);
 
 function save() {
-    axios
-        .patch(props.saveUrl, { values: values.value })
-        .then((response) => console.log('Values saved successfully:', response.data))
-        .catch((e) => {
-            if (e.response && e.response.status === 422) {
-                const { errors: messages, message } = e.response.data;
-                errors.value = messages;
-                Statamic.$toast.error(message);
-            }
+    new Pipeline()
+        .provide({ container, errors, saving })
+        .through([
+            new BeforeSaveHooks('entry'),
+            new Request(props.saveUrl, 'patch', { values: values.value }),
+            new AfterSaveHooks('entry'),
+        ])
+        .then((response) => {
+            Statamic.$toast.success('Saved');
         });
 }
 </script>
 
 <template>
     <Header :title="title">
-        <Button variant="primary" text="Save" @click="save" />
+        <Button variant="primary" text="Save" @click="save" :disabled="saving" />
     </Header>
     <Container
+        ref="container"
         :name="containerName"
         :blueprint="blueprint"
         :values="values"
diff --git a/resources/js/components/ui/Publish/SavePipeline.js b/resources/js/components/ui/Publish/SavePipeline.js
new file mode 100644
index 00000000000..cd3e3fafb1e
--- /dev/null
+++ b/resources/js/components/ui/Publish/SavePipeline.js
@@ -0,0 +1,140 @@
+import axios from 'axios';
+import resetValuesFromResponse from '@statamic/util/resetValuesFromResponse.js';
+
+let container = null;
+let errors = null;
+let saving = null;
+
+export class Pipeline {
+    provide(provided) {
+        container = provided.container;
+        errors = provided.errors;
+        saving = provided.saving;
+        return this;
+    }
+
+    async through(steps) {
+        return [new Start(), ...steps, new Finish()].reduce(async (promise, step) => {
+            const payload = await promise;
+
+            step = typeof step === 'function' ? step(payload) : step;
+
+            try {
+                return await step.handle(payload);
+            } catch (error) {
+                if (error instanceof PipelineStopped) {
+                    new Stopped().handle(payload);
+                    throw error;
+                }
+                throw error;
+            }
+        }, initialPromise);
+    }
+}
+
+const initialPromise = new Promise((resolve) => {
+    setTimeout(() => resolve(), 151); // 150ms is the debounce time for fieldtype updates
+});
+
+export class PipelineStopped extends Error {
+    constructor(payload) {
+        super();
+        this.payload = payload;
+    }
+}
+
+class Step {}
+
+class Start extends Step {
+    handle(payload) {
+        if (saving) saving.value = true;
+        if (container) container.value.saving();
+
+        return payload;
+    }
+}
+
+export class Request extends Step {
+    #url;
+    #method;
+    #data;
+
+    constructor(url, method, data) {
+        super();
+        this.#url = url;
+        this.#method = method;
+        this.#data = data;
+    }
+
+    handle(payload) {
+        return new Promise((resolve, reject) => {
+            return axios[this.#method](this.#url, this.#data)
+                .then((response) => {
+                    if (container) {
+                        container.value.store.setValues(
+                            resetValuesFromResponse(response.data.data.values, container.value.store),
+                        );
+                    }
+                    resolve(response);
+                })
+                .catch((e) => {
+                    if (e.response && e.response.status === 422) {
+                        const { errors: messages, message } = e.response.data;
+                        if (errors) errors.value = messages;
+                        Statamic.$toast.error(message);
+                        e = new PipelineStopped();
+                    } else if (e.response) {
+                        Statamic.$toast.error(e.response.data.message);
+                        e = new PipelineStopped();
+                    }
+                    reject(e);
+                });
+        });
+    }
+}
+
+export class BeforeSaveHooks extends Step {
+    #prefix;
+    #hookPayload;
+    constructor(prefix, hookPayload) {
+        super();
+        this.#prefix = prefix;
+        this.#hookPayload = hookPayload;
+    }
+    handle(payload) {
+        return Statamic.$hooks.run(`${this.#prefix}.saving`, this.#hookPayload);
+    }
+}
+
+export class AfterSaveHooks extends Step {
+    #prefix;
+    #hookPayload;
+    constructor(prefix, hookPayload) {
+        super();
+        this.#prefix = prefix;
+        this.#hookPayload = hookPayload;
+    }
+    handle(response) {
+        return Statamic.$hooks.run(`${this.#prefix}.saved`, {
+            ...this.#hookPayload,
+            response,
+        });
+    }
+}
+
+class Stopped extends Step {
+    handle(payload) {
+        if (saving) saving.value = false;
+
+        return payload;
+    }
+}
+
+class Finish extends Step {
+    handle(payload) {
+        if (saving) saving.value = false;
+        if (container) container.value.saved();
+
+        return payload;
+    }
+}
diff --git a/resources/js/exports.js b/resources/js/exports.js
index dff15f433fc..5da94c1898a 100644
--- a/resources/js/exports.js
+++ b/resources/js/exports.js
@@ -6,3 +6,4 @@ export * as FieldConditions from './components/field-conditions/FieldConditions'
 export { default as ValidatesFieldConditions } from './components/field-conditions/ValidatorMixin';
 export * from './components/ui/index.js';
 export * from './components/elevated-sessions';
+export * as SavePipeline from './components/ui/Publish/SavePipeline.js';
diff --git a/resources/js/util/resetValuesFromResponse.js b/resources/js/util/resetValuesFromResponse.js
new file mode 100644
index 00000000000..31efc8874e5
--- /dev/null
+++ b/resources/js/util/resetValuesFromResponse.js
@@ -0,0 +1,15 @@
+import Values from '@statamic/components/publish/Values.js';
+
+export default function resetValuesFromResponse(responseValues, store) {
+    const existingValues = store.values;
+
+    if (!responseValues) return existingValues;
+
+    let preserveFields = ['id'].concat(store.revealerFields);
+    let originalValues = new Values(existingValues, store.jsonSubmittingFields);
+    let newValues = new Values(responseValues, store.jsonSubmittingFields);
+
+    newValues.mergeDottedKeys(preserveFields, originalValues);
+
+    return newValues.all();
+}

From 541f33fb19859bf6330f018bffa592393afaf8ea Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 13 May 2025 11:50:18 -0400
Subject: [PATCH 14/33] Add Statamic.$dirty

---
 resources/js/bootstrap/statamic.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/js/bootstrap/statamic.js b/resources/js/bootstrap/statamic.js
index f9e7143fa4b..9e47f65f3db 100644
--- a/resources/js/bootstrap/statamic.js
+++ b/resources/js/bootstrap/statamic.js
@@ -114,6 +114,10 @@ export default {
         return this.$app.config.globalProperties.$fieldActions;
     },
 
+    get $dirty() {
+        return this.$app.config.globalProperties.$dirty;
+    },
+
     get user() {
         return this.$config.get('user');
     },

From 5a5c3868dc03fbbf3f7ac3205b449c67109b6914 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 13 May 2025 12:47:23 -0400
Subject: [PATCH 15/33] Remove all the revision related code from term publish
 form. It's never worked. This'll make the upcoming refactor easier.

---
 resources/js/components/terms/PublishForm.vue | 153 ++----------------
 1 file changed, 10 insertions(+), 143 deletions(-)

diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index e420ef41a76..4e40d84c81b 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -28,29 +28,19 @@
                 />
             </dropdown-list>
 
-            <div class="flex pt-px text-2xs text-gray-600 ltr:mr-4 rtl:ml-4" v-if="readOnly">
+            <div class="text-2xs flex pt-px text-gray-600 ltr:mr-4 rtl:ml-4" v-if="readOnly">
                 <svg-icon name="light/lock" class="-mt-1 w-4 ltr:mr-1 rtl:ml-1" /> {{ __('Read Only') }}
             </div>
 
             <div class="hidden items-center md:flex">
                 <save-button-options
                     v-if="!readOnly"
-                    :show-options="!revisionsEnabled && !isInline"
+                    :show-options="!isInline"
                     :button-class="saveButtonClass"
                     :preferences-prefix="preferencesPrefix"
                 >
                     <button :class="saveButtonClass" :disabled="!canSave" @click.prevent="save" v-text="saveText" />
                 </save-button-options>
-
-                <button
-                    v-if="revisionsEnabled"
-                    class="btn-primary flex items-center ltr:ml-4 rtl:mr-4"
-                    :disabled="!canPublish"
-                    @click="confirmingPublish = true"
-                >
-                    <span v-text="__('Publish')" />
-                    <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" />
-                </button>
             </div>
 
             <slot name="action-buttons-right" />
@@ -141,46 +131,7 @@
                                         </div>
                                     </div>
 
-                                    <!--
-                                TODO
-                                <div class="flex items-center border-t justify-between px-4 py-2" v-if="!revisionsEnabled">
-                                    <label v-text="__('Published')" class="publish-field-label font-medium" />
-                                    <toggle-input v-model="published" />
-                                </div>
-
-                                <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-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">
-                                        <span class="text-orange w-6 text-center">!</span>
-                                        <span class="text-2xs" v-text="__('Entry has not been published')"></span>
-                                    </div>
-                                    <div class="mb-1 flex items-center" v-if="isWorkingCopy && isDirty">
-                                        <span class="text-orange w-6 text-center">!</span>
-                                        <span class="text-2xs" v-text="__('Working copy has unsaved changes')"></span>
-                                    </div>
-                                    <div class="mb-1 flex items-center" v-else-if="isWorkingCopy">
-                                        <span class="text-orange w-6 text-center">!</span>
-                                        <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-600 w-6 text-center">&check;</span>
-                                        <span class="text-2xs" v-text="__('This is the published version')"></span>
-                                    </div>
-                                    <button
-                                            class="flex items-center justify-center mt-4 btn-flat px-2 w-full"
-                                            v-if="!isCreating && revisionsEnabled"
-                                            @click="showRevisionHistory = true">
-                                            <svg-icon name="history" class="h-4 w-4 rtl:ml-2 ltr:mr-2" />
-                                            <span>{{ __('View History') }}</span>
-                                        </button>
-                                </div>
-                                -->
-
-                                    <div class="border-t p-4 dark:border-dark-900" v-if="localizations.length > 1">
+                                    <div class="dark:border-dark-900 border-t p-4" v-if="localizations.length > 1">
                                         <label class="publish-field-label mb-2 font-medium" v-text="__('Sites')" />
                                         <div
                                             v-for="option in localizations"
@@ -188,8 +139,8 @@
                                             class="-mx-4 flex cursor-pointer items-center px-4 py-2 text-sm"
                                             :class="
                                                 option.active
-                                                    ? 'bg-blue-100 dark:bg-dark-300'
-                                                    : 'hover:bg-gray-200 dark:hover:bg-dark-400'
+                                                    ? 'dark:bg-dark-300 bg-blue-100'
+                                                    : 'dark:hover:bg-dark-400 hover:bg-gray-200'
                                             "
                                             @click="localizationSelected(option)"
                                         >
@@ -241,53 +192,17 @@
         <div class="mt-6 flex items-center md:hidden">
             <button
                 v-if="!readOnly"
-                class="btn-lg"
-                :class="{
-                    'btn-primary w-full': !revisionsEnabled,
-                    'btn w-1/2 ltr:mr-4 rtl:ml-4': revisionsEnabled,
-                }"
+                class="btn-lg btn-primary w-full"
                 :disabled="!canSave"
                 @click.prevent="save"
-                v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')"
+                v-text="__('Save')"
             />
-
-            <button
-                v-if="revisionsEnabled"
-                class="btn-primary btn-lg flex w-1/2 items-center justify-center ltr:ml-2 rtl:mr-2"
-                :disabled="!canPublish"
-                @click="confirmingPublish = true"
-            >
-                <span v-text="__('Publish')" />
-                <svg-icon name="micro/chevron-down-xs" class="w-2 ltr:ml-2 rtl:mr-2" />
-            </button>
         </div>
-
-        <stack
-            name="revision-history"
-            v-if="showRevisionHistory"
-            @closed="showRevisionHistory = false"
-            :narrow="true"
-            v-slot="{ close }"
-        >
-            <revision-history :index-url="actions.revisions" :restore-url="actions.restore" @closed="close" />
-        </stack>
-
-        <publish-actions
-            v-if="confirmingPublish"
-            :actions="actions"
-            :published="published"
-            :can-manage-publish-state="canManagePublishState"
-            @closed="confirmingPublish = false"
-            @saving="saving = true"
-            @saved="publishActionCompleted"
-        />
     </div>
 </template>
 
 <script>
-import PublishActions from './PublishActions.vue';
 import SaveButtonOptions from '../publish/SaveButtonOptions.vue';
-import RevisionHistory from '../revision-history/History.vue';
 import HasPreferences from '../data-list/HasPreferences';
 import HasHiddenFields from '../publish/HasHiddenFields';
 import HasActions from '../publish/HasActions';
@@ -298,9 +213,7 @@ export default {
     mixins: [HasPreferences, HasHiddenFields, HasActions],
 
     components: {
-        PublishActions,
         SaveButtonOptions,
-        RevisionHistory,
     },
 
     props: {
@@ -316,7 +229,6 @@ export default {
         initialOriginValues: Object,
         initialOriginMeta: Object,
         initialSite: String,
-        initialIsWorkingCopy: Boolean,
         taxonomyHandle: String,
         breadcrumbs: Array,
         initialActions: Object,
@@ -327,7 +239,6 @@ export default {
         initialReadOnly: Boolean,
         initialIsRoot: Boolean,
         initialPermalink: String,
-        revisionsEnabled: Boolean,
         preloadedAssets: Array,
         canEditBlueprint: Boolean,
         createAnotherUrl: String,
@@ -351,16 +262,12 @@ export default {
             originValues: this.initialOriginValues || {},
             originMeta: this.initialOriginMeta || {},
             site: this.initialSite,
-            isWorkingCopy: this.initialIsWorkingCopy,
             error: null,
             errors: {},
             isPreviewing: false,
             tabsVisible: true,
             state: 'new',
-            revisionMessage: null,
-            showRevisionHistory: false,
             published: this.initialPublished,
-            confirmingPublish: false,
             readOnly: this.initialReadOnly,
             isRoot: this.initialIsRoot,
             permalink: this.initialPermalink,
@@ -392,14 +299,6 @@ export default {
             return !this.readOnly && this.isDirty && !this.somethingIsLoading;
         },
 
-        canPublish() {
-            if (!this.revisionsEnabled) return false;
-
-            return (
-                !this.readOnly && !this.isCreating && !this.canSave && !this.somethingIsLoading && this.isWorkingCopy
-            );
-        },
-
         livePreviewUrl() {
             return this.localizations.find((l) => l.active).livePreviewUrl;
         },
@@ -425,8 +324,6 @@ export default {
         },
 
         saveText() {
-            if (this.revisionsEnabled) return __('Save Changes');
-
             if (this.published) return __('Save & Publish');
 
             if (!this.published && this.initialPublished) return __('Save & Unpublish');
@@ -435,10 +332,7 @@ export default {
         },
 
         saveButtonClass() {
-            return {
-                btn: this.revisionsEnabled,
-                'btn-primary': !this.revisionsEnabled,
-            };
+            return 'btn-primary';
         },
 
         afterSaveOption() {
@@ -507,7 +401,6 @@ export default {
                     }
                     this.title = response.data.data.title;
                     this.permalink = response.data.data.permalink;
-                    this.isWorkingCopy = true;
                     if (!this.isCreating) this.$toast.success(__('Saved'));
                     this.$refs.container.saved();
                     this.runAfterSaveHook(response);
@@ -515,12 +408,6 @@ export default {
                 .catch((e) => this.handleAxiosError(e));
         },
 
-        confirmPublish() {
-            if (this.canPublish) {
-                this.confirmingPublish = true;
-            }
-        },
-
         runAfterSaveHook(response) {
             Statamic.$hooks
                 .run('term.saved', {
@@ -529,13 +416,6 @@ export default {
                     response,
                 })
                 .then(() => {
-                    // If revisions are enabled, just emit event.
-                    if (this.revisionsEnabled) {
-                        this.values = this.resetValuesFromResponse(response.data.data.values);
-                        this.$nextTick(() => this.$emit('saved', response));
-                        return;
-                    }
-
                     let nextAction = this.quickSave ? 'continue_editing' : this.afterSaveOption;
 
                     // If the user has opted to create another entry, redirect them to create page.
@@ -606,7 +486,6 @@ export default {
                 this.localizations = data.localizations;
                 this.localizedFields = data.localizedFields;
                 this.hasOrigin = data.hasOrigin;
-                this.publishUrl = data.actions[this.action];
                 this.taxonomy = data.taxonomy;
                 this.title = data.editing ? data.values.title : this.title;
                 this.actions = data.actions;
@@ -648,16 +527,6 @@ export default {
             this.tabsVisible = true;
         },
 
-        publishActionCompleted({ published, isWorkingCopy, response }) {
-            this.saving = false;
-            this.$refs.container.saved();
-            if (published !== undefined) this.published = published;
-            this.isWorkingCopy = isWorkingCopy;
-            this.confirmingPublish = false;
-            this.permalink = response.data.data.permalink;
-            this.$nextTick(() => this.$emit('saved', response));
-        },
-
         setFieldValue(handle, value) {
             if (this.hasOrigin) this.desyncField(handle);
 
@@ -694,15 +563,13 @@ export default {
     mounted() {
         this.saveKeyBinding = this.$keys.bindGlobal(['mod+return'], (e) => {
             e.preventDefault();
-            if (this.confirmingPublish) return;
-            this.canPublish ? this.confirmPublish() : this.save();
+            this.save();
         });
 
         this.quickSaveKeyBinding = this.$keys.bindGlobal(['mod+s'], (e) => {
             e.preventDefault();
-            if (this.confirmingPublish) return;
             this.quickSave = true;
-            this.canPublish ? this.confirmPublish() : this.save();
+            this.save();
         });
 
         this.$refs.container.store.setPreloadedAssets(this.preloadedAssets);

From fe70fc79e6af134acaf7252351dec490f3c4e5aa Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 16 May 2025 12:24:21 -0400
Subject: [PATCH 16/33] remove withfield from combobox

---
 resources/js/components/ui/Combobox.vue | 245 +++++++++++-------------
 1 file changed, 116 insertions(+), 129 deletions(-)

diff --git a/resources/js/components/ui/Combobox.vue b/resources/js/components/ui/Combobox.vue
index 8a1b1bc98d4..8010ffcd619 100644
--- a/resources/js/components/ui/Combobox.vue
+++ b/resources/js/components/ui/Combobox.vue
@@ -12,7 +12,7 @@ import {
     ComboboxViewport,
 } from 'reka-ui';
 import { computed, nextTick, ref, useAttrs, useTemplateRef, watch } from 'vue';
-import { Button, WithField, Icon, Badge } from '@statamic/ui';
+import { Button, Icon, Badge } from '@statamic/ui';
 import fuzzysort from 'fuzzysort';
 import { SortableList } from '@statamic/components/sortable/Sortable.js';
 
@@ -201,135 +201,122 @@ function updateModelValue(value) {
 </script>
 
 <template>
-    <WithField :label :description>
-        <div class="flex">
-            <ComboboxRoot
-                v-bind="attrs"
-                ignore-filter
-                :multiple
-                :reset-search-term-on-blur="false"
-                :reset-search-term-on-select="false"
-                :disabled="disabled || (multiple && limitReached)"
-                v-model:open="dropdownOpen"
-                :model-value="modelValue"
-                @update:model-value="updateModelValue"
-            >
-                <ComboboxAnchor :class="[anchorClasses, $attrs.class]" data-ui-combobox-anchor>
-                    <ComboboxTrigger as="div" class="min-h-full w-full">
-                        <ComboboxInput
-                            v-if="searchable && (dropdownOpen || !modelValue)"
-                            ref="input"
-                            class="w-full focus:outline-none"
-                            v-model="searchQuery"
-                            :placeholder
-                        />
-                        <div v-else-if="!searchable && (dropdownOpen || !modelValue)">
-                            <span class="text-gray-400 dark:text-gray-600" v-text="placeholder" />
-                        </div>
-                        <div v-else class="cursor-pointer">
-                            <slot name="selected-option" v-bind="{ option: selectedOption }">
-                                <span v-text="getOptionLabel(selectedOption)" />
-                            </slot>
-                        </div>
-                    </ComboboxTrigger>
-                    <div class="flex items-center space-x-2 px-2">
-                        <Button
-                            icon="x"
-                            variant="filled"
-                            size="xs"
-                            round
-                            v-if="clearable && modelValue"
-                            @click="clear"
-                        />
-                        <ComboboxTrigger class="flex items-center">
-                            <Icon name="ui/chevron-down" />
-                        </ComboboxTrigger>
+    <div class="flex">
+        <ComboboxRoot
+            v-bind="attrs"
+            ignore-filter
+            :multiple
+            :reset-search-term-on-blur="false"
+            :reset-search-term-on-select="false"
+            :disabled="disabled || (multiple && limitReached)"
+            v-model:open="dropdownOpen"
+            :model-value="modelValue"
+            @update:model-value="updateModelValue"
+        >
+            <ComboboxAnchor :class="[anchorClasses, $attrs.class]" data-ui-combobox-anchor>
+                <ComboboxTrigger as="div" class="min-h-full w-full">
+                    <ComboboxInput
+                        v-if="searchable && (dropdownOpen || !modelValue)"
+                        ref="input"
+                        class="w-full focus:outline-none"
+                        v-model="searchQuery"
+                        :placeholder
+                    />
+                    <div v-else-if="!searchable && (dropdownOpen || !modelValue)">
+                        <span class="text-gray-400 dark:text-gray-600" v-text="placeholder" />
                     </div>
-                </ComboboxAnchor>
-
-                <ComboboxPortal>
-                    <ComboboxContent
-                        position="popper"
-                        :side-offset="5"
-                        :class="[
-                            'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
-                            'max-h-[var(--reka-combobox-content-available-height)] w-[var(--reka-combobox-trigger-width)]',
-                        ]"
-                    >
-                        <ComboboxViewport>
-                            <ComboboxEmpty class="text-mauve8 py-2 text-center text-xs font-medium">
-                                <slot name="no-options">
-                                    {{ __('No options to choose from.') }}
-                                </slot>
-                            </ComboboxEmpty>
-
-                            <ComboboxItem
-                                v-if="filteredOptions"
-                                v-for="(option, index) in filteredOptions"
-                                :key="index"
-                                :value="getOptionValue(option)"
-                                :text-value="getOptionLabel(option)"
-                                :class="itemClasses({ size: size, selected: isSelected(option) })"
-                                as="button"
-                                @select="dropdownOpen = false"
-                            >
-                                <slot name="option" v-bind="option">
-                                    <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
-                                    <span v-if="labelHtml" v-html="getOptionLabel(option)" />
-                                    <span v-else>{{ __(getOptionLabel(option)) }}</span>
-                                </slot>
-                            </ComboboxItem>
-                        </ComboboxViewport>
-                    </ComboboxContent>
-                </ComboboxPortal>
-            </ComboboxRoot>
-
-            <div
-                v-if="maxSelections && maxSelections !== Infinity"
-                class="ms-2 mt-3 text-xs"
-                :class="limitIndicatorColor"
-            >
-                <span v-text="selectedOptions.length"></span>/<span v-text="maxSelections"></span>
-            </div>
-        </div>
-
-        <slot name="selected-options" v-bind="{ disabled, getOptionLabel, getOptionValue, labelHtml, deselect }">
-            <sortable-list
-                v-if="multiple"
-                item-class="sortable-item"
-                handle-class="sortable-item"
-                :distance="5"
-                :mirror="false"
-                :disabled
-                :model-value="modelValue"
-                @update:modelValue="updateModelValue"
-            >
-                <div class="vs__selected-options-outside flex flex-wrap gap-2">
-                    <div
-                        v-for="option in selectedOptions"
-                        :key="getOptionValue(option)"
-                        class="vs__selected sortable-item mt-2"
-                    >
-                        <Badge pill size="lg">
-                            <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
-                            <div v-else>{{ __(getOptionLabel(option)) }}</div>
-
-                            <button
-                                v-if="!disabled"
-                                type="button"
-                                class="vs__deselect"
-                                :aria-label="__('Deselect option')"
-                                @click="deselect(option.value)"
-                            >
-                                <span>×</span>
-                            </button>
-                            <button v-else type="button" class="vs__deselect">
-                                <span class="text-gray-300">×</span>
-                            </button>
-                        </Badge>
+                    <div v-else class="cursor-pointer">
+                        <slot name="selected-option" v-bind="{ option: selectedOption }">
+                            <span v-text="getOptionLabel(selectedOption)" />
+                        </slot>
                     </div>
+                </ComboboxTrigger>
+                <div class="flex items-center space-x-2 px-2">
+                    <Button icon="x" variant="filled" size="xs" round v-if="clearable && modelValue" @click="clear" />
+                    <ComboboxTrigger class="flex items-center">
+                        <Icon name="ui/chevron-down" />
+                    </ComboboxTrigger>
                 </div>
-            </sortable-list>
-        </slot>
-    </WithField>
+            </ComboboxAnchor>
+
+            <ComboboxPortal>
+                <ComboboxContent
+                    position="popper"
+                    :side-offset="5"
+                    :class="[
+                        'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
+                        'max-h-[var(--reka-combobox-content-available-height)] w-[var(--reka-combobox-trigger-width)]',
+                    ]"
+                >
+                    <ComboboxViewport>
+                        <ComboboxEmpty class="text-mauve8 py-2 text-center text-xs font-medium">
+                            <slot name="no-options">
+                                {{ __('No options to choose from.') }}
+                            </slot>
+                        </ComboboxEmpty>
+
+                        <ComboboxItem
+                            v-if="filteredOptions"
+                            v-for="(option, index) in filteredOptions"
+                            :key="index"
+                            :value="getOptionValue(option)"
+                            :text-value="getOptionLabel(option)"
+                            :class="itemClasses({ size: size, selected: isSelected(option) })"
+                            as="button"
+                            @select="dropdownOpen = false"
+                        >
+                            <slot name="option" v-bind="option">
+                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
+                                <span v-if="labelHtml" v-html="getOptionLabel(option)" />
+                                <span v-else>{{ __(getOptionLabel(option)) }}</span>
+                            </slot>
+                        </ComboboxItem>
+                    </ComboboxViewport>
+                </ComboboxContent>
+            </ComboboxPortal>
+        </ComboboxRoot>
+
+        <div v-if="maxSelections && maxSelections !== Infinity" class="ms-2 mt-3 text-xs" :class="limitIndicatorColor">
+            <span v-text="selectedOptions.length"></span>/<span v-text="maxSelections"></span>
+        </div>
+    </div>
+
+    <slot name="selected-options" v-bind="{ disabled, getOptionLabel, getOptionValue, labelHtml, deselect }">
+        <sortable-list
+            v-if="multiple"
+            item-class="sortable-item"
+            handle-class="sortable-item"
+            :distance="5"
+            :mirror="false"
+            :disabled
+            :model-value="modelValue"
+            @update:modelValue="updateModelValue"
+        >
+            <div class="vs__selected-options-outside flex flex-wrap gap-2">
+                <div
+                    v-for="option in selectedOptions"
+                    :key="getOptionValue(option)"
+                    class="vs__selected sortable-item mt-2"
+                >
+                    <Badge pill size="lg">
+                        <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
+                        <div v-else>{{ __(getOptionLabel(option)) }}</div>
+
+                        <button
+                            v-if="!disabled"
+                            type="button"
+                            class="vs__deselect"
+                            :aria-label="__('Deselect option')"
+                            @click="deselect(option.value)"
+                        >
+                            <span>×</span>
+                        </button>
+                        <button v-else type="button" class="vs__deselect">
+                            <span class="text-gray-300">×</span>
+                        </button>
+                    </Badge>
+                </div>
+            </div>
+        </sortable-list>
+    </slot>
 </template>

From e69acb69832a8b2c46e7de75070e5052b76776b0 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 16 May 2025 15:32:27 -0400
Subject: [PATCH 17/33] Update field ...

Pass disabled as a prop.
Style disable based on prop, not sub-control position.
The cva classes are now a computed so that it'll update when props change, such as disabled.
Adjust slots so you can specify combinations of label and actions.
---
 resources/js/components/ui/Field.vue | 68 ++++++++++++++++++----------
 1 file changed, 44 insertions(+), 24 deletions(-)

diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue
index 7c3beca9e93..c7a5c8a68a5 100644
--- a/resources/js/components/ui/Field.vue
+++ b/resources/js/components/ui/Field.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { cva } from 'cva';
+import { computed } from 'vue';
 import { Description, Label } from '@statamic/components/ui/index.js';
 
 defineOptions({
@@ -40,39 +41,58 @@ const props = defineProps({
         type: Object,
         default: (props) => (props.error ? [props.error] : []),
     },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
 });
 
-const classes = cva({
-    base: [
-        'min-w-0',
-        /* When label exists but no description follows */
-        '[&>[data-ui-label]:not(:has(+[data-ui-description]))]:mb-2',
-        /* When label is followed by description */
-        '*:data-ui-description:mb-2',
-        /* Dim label when a child input control is disabled */
-        '[&:not(:has([data-ui-field])):has([data-ui-control][disabled])>[data-ui-label]]:opacity-50',
-    ],
-    variants: {
-        variant: {
-            block: 'w-full',
-            inline: [
-                'grid gap-x-3 gap-y-1.5',
-                'has-[[data-ui-label]~[data-ui-control]]:grid-cols-[1fr_auto]',
-                'has-[[data-ui-control]~[data-ui-label]]:grid-cols-[auto_1fr]',
-                '[&>[data-ui-control]~[data-ui-description]]:row-start-2 [&>[data-ui-control]~[data-ui-description]]:col-start-2',
-                '[&>[data-ui-label]~[data-ui-control]]:row-start-1 [&>[data-ui-label]~[data-ui-control]]:col-start-2',
-            ],
+const labelProps = computed(() => ({
+    text: props.label,
+    for: props.id,
+    required: props.required,
+    badge: props.badge,
+}));
+
+const classes = computed(() =>
+    cva({
+        base: [
+            'min-w-0',
+            /* When label exists but no description follows */
+            '[&>[data-ui-label]:not(:has(+[data-ui-description]))]:mb-2',
+            /* When label is followed by description */
+            '*:data-ui-description:mb-2',
+        ],
+        variants: {
+            variant: {
+                block: 'w-full',
+                inline: [
+                    'grid gap-x-3 gap-y-1.5',
+                    'has-[[data-ui-label]~[data-ui-control]]:grid-cols-[1fr_auto]',
+                    'has-[[data-ui-control]~[data-ui-label]]:grid-cols-[auto_1fr]',
+                    '[&>[data-ui-control]~[data-ui-description]]:row-start-2 [&>[data-ui-control]~[data-ui-description]]:col-start-2',
+                    '[&>[data-ui-label]~[data-ui-control]]:row-start-1 [&>[data-ui-label]~[data-ui-control]]:col-start-2',
+                ],
+            },
+            disabled: {
+                true: 'opacity-50',
+            },
         },
-    },
-})({ ...props });
+    })({ ...props }),
+);
 </script>
 
 <template>
     <div :class="[classes, $attrs.class]" data-ui-input-group>
-        <div class="flex items-center justify-between">
-            <Label v-if="label" :text="label" :for="id" :required="required" :badge="badge" class="flex-1" />
+        <div v-if="$slots.actions" class="mb-2 flex items-center justify-between gap-x-1">
+            <slot name="label">
+                <Label v-if="label" v-bind="labelProps" class="flex-1" />
+            </slot>
             <slot name="actions" />
         </div>
+        <slot v-if="!$slots.actions" name="label">
+            <Label v-if="label" v-bind="labelProps" class="flex-1" />
+        </slot>
         <Description :text="instructions" v-if="instructions && !instructionsBelow" />
         <slot />
         <Description :text="instructions" v-if="instructions && instructionsBelow" />

From e892496e029282372f65ddcf93a1bdc9270a5918 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 16 May 2025 15:32:59 -0400
Subject: [PATCH 18/33] Label has a for prop

---
 resources/js/components/ui/Label.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/js/components/ui/Label.vue b/resources/js/components/ui/Label.vue
index 24a71bc5180..cd8e1f7282e 100644
--- a/resources/js/components/ui/Label.vue
+++ b/resources/js/components/ui/Label.vue
@@ -6,6 +6,7 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 
 const props = defineProps({
+    for: { type: String, default: null },
     badge: { type: String, default: '' },
     required: { type: Boolean, default: false },
     text: { type: [String, Number, Boolean, null], default: null },
@@ -16,6 +17,7 @@ const props = defineProps({
     <label
         class="flex justify-between text-sm font-medium text-gray-800 antialiased select-none dark:text-gray-300"
         data-ui-label
+        :for="for"
     >
         <div>
             <slot v-if="hasDefaultSlot" />

From 5d66fdbe371083cd515a07132cd1618c45d49569 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 16 May 2025 15:43:24 -0400
Subject: [PATCH 19/33] wip ...

- Wire up terms publish form with new stuff.
- New composition api live preview component with only necessary props. (Values etc come from container)
- Container component and store adds more props and things like origin values/meta, localized fields, etc.
- Tab slot is actions rather than sidebar.
- Localization picker moved into a component. It'll get reused by entries form.
- Publish field component can sync/desync and track localized fields
- Publish "Components" component can just be dropped into the form. No need to pass any props, slot scope, or loops.
- Input component gets a disabled prop.
- Text fieldtype passes disabled and id
- Slug fieldtype passes disabled
- $wait util is moved into its own file
- Expose this.$events as Statamic.$events
---
 resources/js/bootstrap/statamic.js            |   9 +-
 .../components/fieldtypes/SlugFieldtype.vue   |   1 +
 .../components/fieldtypes/TextFieldtype.vue   |   4 +-
 resources/js/components/terms/PublishForm.vue | 445 ++++++------------
 resources/js/components/ui/Input/Input.vue    |   2 +
 .../components/ui/LivePreview/LivePreview.vue | 421 +++++++++++++++++
 .../js/components/ui/Publish/Components.vue   |   9 +
 .../js/components/ui/Publish/Container.vue    | 104 +++-
 resources/js/components/ui/Publish/Field.vue  |  59 ++-
 .../components/ui/Publish/Localizations.vue   |  44 ++
 .../js/components/ui/Publish/SavePipeline.js  |  14 +-
 resources/js/components/ui/Publish/Tabs.vue   |   2 +-
 resources/js/stores/publish-container.js      |   9 +
 resources/js/util/wait.js                     |   5 +
 resources/lang/en/messages.php                |   1 +
 resources/svg/icons/link-broken.svg           |   1 +
 resources/svg/icons/link.svg                  |   1 +
 17 files changed, 814 insertions(+), 317 deletions(-)
 create mode 100644 resources/js/components/ui/LivePreview/LivePreview.vue
 create mode 100644 resources/js/components/ui/Publish/Components.vue
 create mode 100644 resources/js/components/ui/Publish/Localizations.vue
 create mode 100644 resources/js/util/wait.js
 create mode 100644 resources/svg/icons/link-broken.svg
 create mode 100644 resources/svg/icons/link.svg

diff --git a/resources/js/bootstrap/statamic.js b/resources/js/bootstrap/statamic.js
index 9e47f65f3db..1c5cb85e42c 100644
--- a/resources/js/bootstrap/statamic.js
+++ b/resources/js/bootstrap/statamic.js
@@ -32,6 +32,7 @@ import Echo from '../components/Echo';
 import Permission from '../components/Permission';
 import autosize from 'autosize';
 import DateFormatter from '@statamic/components/DateFormatter.js';
+import wait from '@statamic/util/wait.js';
 
 let bootingCallbacks = [];
 let bootedCallbacks = [];
@@ -118,6 +119,10 @@ export default {
         return this.$app.config.globalProperties.$dirty;
     },
 
+    get $events() {
+        return this.$app.config.globalProperties.$events;
+    },
+
     get user() {
         return this.$config.get('user');
     },
@@ -197,9 +202,7 @@ export default {
                 return permissions.includes('super') || permissions.includes(permission);
             },
             $wait(ms) {
-                return new Promise((resolve) => {
-                    setTimeout(resolve, ms);
-                });
+                return wait(ms);
             },
         });
 
diff --git a/resources/js/components/fieldtypes/SlugFieldtype.vue b/resources/js/components/fieldtypes/SlugFieldtype.vue
index eac50ecef17..72d1452fe75 100644
--- a/resources/js/components/fieldtypes/SlugFieldtype.vue
+++ b/resources/js/components/fieldtypes/SlugFieldtype.vue
@@ -18,6 +18,7 @@
             :id="fieldId"
             :isReadOnly="isReadOnly"
             :name="slug"
+            :disabled="isReadOnly"
             @focus="$emit('focus')"
             @blur="$emit('blur')"
         >
diff --git a/resources/js/components/fieldtypes/TextFieldtype.vue b/resources/js/components/fieldtypes/TextFieldtype.vue
index 54990743cc3..5541fb241b2 100644
--- a/resources/js/components/fieldtypes/TextFieldtype.vue
+++ b/resources/js/components/fieldtypes/TextFieldtype.vue
@@ -7,13 +7,13 @@
         :autocomplete="config.autocomplete"
         :autoselect="config.autoselect"
         :type="config.input_type"
-        :isReadOnly="isReadOnly"
+        :disabled="isReadOnly"
         :prepend="__(config.prepend)"
         :append="__(config.append)"
         :limit="config.character_limit"
         :placeholder="__(config.placeholder)"
         :name="name"
-        :id="fieldId"
+        :id="id"
         :direction="config.direction"
         @update:model-value="inputUpdated"
         @focus="$emit('focus')"
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index 4e40d84c81b..aa6d61960b8 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -1,203 +1,111 @@
 <template>
     <div>
-        <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[1].url" :title="breadcrumbs[1].text" />
-
-        <div class="mb-6 flex items-baseline">
-            <h1 class="flex-1 self-start ltr:mr-4 rtl:ml-4">
-                <div class="flex items-baseline">
-                    <span
-                        v-if="!isCreating"
-                        class="little-dot -top-1 ltr:mr-2 rtl:ml-2"
-                        :class="{ 'bg-green-600': published, 'bg-gray-600': !published }"
-                    />
-                    <span class="break-overflowing-words" v-html="formattedTitle" />
-                </div>
-            </h1>
-
-            <dropdown-list class="ltr:mr-4 rtl:ml-4" v-if="canEditBlueprint || hasItemActions">
-                <dropdown-item :text="__('Edit Blueprint')" v-if="canEditBlueprint" :redirect="actions.editBlueprint" />
-                <li class="divider" />
-                <data-list-inline-actions
-                    v-if="!isCreating && hasItemActions"
-                    :item="values.id"
-                    :url="itemActionUrl"
-                    :actions="itemActions"
-                    :is-dirty="isDirty"
-                    @started="actionStarted"
-                    @completed="actionCompleted"
+        <Header>
+            <template #title>
+                <span
+                    v-if="!isCreating"
+                    class="little-dot -top-1"
+                    :class="activeLocalization.published ? 'published' : 'draft'"
+                    v-tooltip="__(activeLocalization.status)"
                 />
-            </dropdown-list>
+                {{ formattedTitle }}
+            </template>
+
+            <Dropdown class="ltr:mr-4 rtl:ml-4" v-if="canEditBlueprint || hasItemActions">
+                <template #trigger>
+                    <Button icon="ui/dots" variant="ghost" />
+                </template>
+                <DropdownMenu>
+                    <DropdownItem
+                        :text="__('Edit Blueprint')"
+                        v-if="canEditBlueprint"
+                        :redirect="actions.editBlueprint"
+                    />
+                    <DropdownSeparator />
+                    <data-list-inline-actions
+                        v-if="!isCreating && hasItemActions"
+                        :item="values.id"
+                        :url="itemActionUrl"
+                        :actions="itemActions"
+                        :is-dirty="isDirty"
+                        @started="actionStarted"
+                        @completed="actionCompleted"
+                    />
+                </DropdownMenu>
+            </Dropdown>
 
             <div class="text-2xs flex pt-px text-gray-600 ltr:mr-4 rtl:ml-4" v-if="readOnly">
                 <svg-icon name="light/lock" class="-mt-1 w-4 ltr:mr-1 rtl:ml-1" /> {{ __('Read Only') }}
             </div>
 
             <div class="hidden items-center md:flex">
-                <save-button-options
-                    v-if="!readOnly"
-                    :show-options="!isInline"
-                    :button-class="saveButtonClass"
-                    :preferences-prefix="preferencesPrefix"
-                >
-                    <button :class="saveButtonClass" :disabled="!canSave" @click.prevent="save" v-text="saveText" />
+                <save-button-options v-if="!readOnly" :show-options="!isInline" :preferences-prefix="preferencesPrefix">
+                    <Button :disabled="!canSave" variant="primary" @click.prevent="save" :text="saveText" />
                 </save-button-options>
             </div>
 
             <slot name="action-buttons-right" />
-        </div>
+        </Header>
 
-        <publish-container
+        <PublishContainer
             v-if="fieldset"
             ref="container"
             :name="publishContainer"
+            :reference="initialReference"
             :blueprint="fieldset"
             :values="values"
-            :reference="initialReference"
             :meta="meta"
+            :origin-values="originValues"
+            :origin-meta="originMeta"
             :errors="errors"
+            :is-root="isRoot"
             :site="site"
             :localized-fields="localizedFields"
-            :is-root="isRoot"
+            :sync-field-confirmation-text="syncFieldConfirmationText"
             @updated="values = $event"
-            v-slot="{ container, components, setFieldMeta }"
         >
-            <live-preview
-                :name="publishContainer"
-                :url="livePreviewUrl"
-                :previewing="isPreviewing"
+            <LivePreview
+                :enabled="isPreviewing"
                 :targets="previewTargets"
-                :values="values"
-                :blueprint="fieldset.handle"
-                :reference="initialReference"
-                @opened-via-keyboard="openLivePreview"
+                :url="livePreviewUrl"
+                @opened="openLivePreview"
                 @closed="closeLivePreview"
             >
-                <div>
-                    <component
-                        v-for="component in components"
-                        :key="component.name"
-                        :is="component.name"
-                        :container="container"
-                        v-bind="component.props"
-                    />
+                <PublishComponents />
 
-                    <transition name="live-preview-tabs-drop">
-                        <publish-tabs
-                            v-show="tabsVisible"
-                            :read-only="readOnly"
-                            :syncable="hasOrigin"
-                            @updated="setFieldValue"
-                            @meta-updated="setFieldMeta"
-                            @synced="syncField"
-                            @desynced="desyncField"
-                            @focus="container.$emit('focus', $event)"
-                            @blur="container.$emit('blur', $event)"
+                <PublishTabs>
+                    <template #actions>
+                        <div
+                            class="space-y-6"
+                            v-if="showLivePreviewButton || showVisitUrlButton || showLocalizationSelector"
                         >
-                            <template #actions="{ shouldShowSidebar }">
-                                <div
-                                    class="card p-0"
-                                    :class="{
-                                        'mb-5': showLivePreviewButton || showVisitUrlButton || localizations.length > 1,
-                                    }"
-                                >
-                                    <div :class="{ hi: !shouldShowSidebar }">
-                                        <div
-                                            class="flex items-center space-x-2 p-3"
-                                            v-if="showLivePreviewButton || showVisitUrlButton"
-                                        >
-                                            <button
-                                                class="btn flex w-full items-center justify-center"
-                                                v-if="showLivePreviewButton"
-                                                @click="openLivePreview"
-                                            >
-                                                <svg-icon
-                                                    name="light/synchronize"
-                                                    class="h-4 w-4 shrink-0 ltr:mr-2 rtl:ml-2"
-                                                />
-                                                <span>{{ __('Live Preview') }}</span>
-                                            </button>
-                                            <a
-                                                class="btn flex w-full items-center justify-center"
-                                                v-if="showVisitUrlButton"
-                                                :href="permalink"
-                                                target="_blank"
-                                            >
-                                                <svg-icon
-                                                    name="light/external-link"
-                                                    class="h-4 w-4 shrink-0 ltr:mr-2 rtl:ml-2"
-                                                />
-                                                <span>{{ __('Visit URL') }}</span>
-                                            </a>
-                                        </div>
-                                    </div>
-
-                                    <div class="dark:border-dark-900 border-t p-4" v-if="localizations.length > 1">
-                                        <label class="publish-field-label mb-2 font-medium" v-text="__('Sites')" />
-                                        <div
-                                            v-for="option in localizations"
-                                            :key="option.handle"
-                                            class="-mx-4 flex cursor-pointer items-center px-4 py-2 text-sm"
-                                            :class="
-                                                option.active
-                                                    ? 'dark:bg-dark-300 bg-blue-100'
-                                                    : 'dark:hover:bg-dark-400 hover:bg-gray-200'
-                                            "
-                                            @click="localizationSelected(option)"
-                                        >
-                                            <div
-                                                class="flex flex-1 items-center"
-                                                :class="{ 'line-through': !option.exists }"
-                                            >
-                                                <span
-                                                    class="little-dot ltr:mr-2 rtl:ml-2"
-                                                    :class="{
-                                                        'bg-green-600': option.published,
-                                                        'bg-gray-500': !option.published,
-                                                        'bg-red-500': !option.exists,
-                                                    }"
-                                                />
-                                                {{ __(option.name) }}
-                                                <loading-graphic
-                                                    :size="14"
-                                                    text=""
-                                                    class="ltr:ml-2 rtl:mr-2"
-                                                    v-if="localizing === option.handle"
-                                                />
-                                            </div>
-                                            <div
-                                                class="badge-sm bg-orange"
-                                                v-if="option.origin"
-                                                v-text="__('Origin')"
-                                            />
-                                            <div
-                                                class="badge-sm bg-blue dark:bg-dark-blue-100"
-                                                v-if="option.active"
-                                                v-text="__('Active')"
-                                            />
-                                            <div
-                                                class="badge-sm bg-purple"
-                                                v-if="option.root && !option.origin && !option.active"
-                                                v-text="__('Root')"
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                            </template>
-                        </publish-tabs>
-                    </transition>
-                </div>
-            </live-preview>
-        </publish-container>
-
-        <div class="mt-6 flex items-center md:hidden">
-            <button
-                v-if="!readOnly"
-                class="btn-lg btn-primary w-full"
-                :disabled="!canSave"
-                @click.prevent="save"
-                v-text="__('Save')"
-            />
-        </div>
+                            <div class="grid grid-cols-2 gap-4" v-if="showLivePreviewButton || showVisitUrlButton">
+                                <Button
+                                    :text="__('Live Preview')"
+                                    icon="live-preview"
+                                    v-if="showLivePreviewButton"
+                                    @click="openLivePreview"
+                                />
+                                <Button
+                                    :href="permalink"
+                                    :text="__('Visit URL')"
+                                    icon="external-link"
+                                    v-if="showVisitUrlButton"
+                                    target="_blank"
+                                />
+                            </div>
+
+                            <LocalizationsCard
+                                v-if="showLocalizationSelector"
+                                :localizations
+                                :localizing
+                                @selected="localizationSelected"
+                            />
+                        </div>
+                    </template>
+                </PublishTabs>
+            </LivePreview>
+        </PublishContainer>
     </div>
 </template>
 
@@ -208,12 +116,47 @@ import HasHiddenFields from '../publish/HasHiddenFields';
 import HasActions from '../publish/HasActions';
 import striptags from 'striptags';
 import clone from '@statamic/util/clone.js';
+import {
+    Header,
+    Badge,
+    Button,
+    CardPanel,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
+    DropdownSeparator,
+} from '@statamic/ui';
+import PublishContainer from '@statamic/components/ui/Publish/Container.vue';
+import PublishTabs from '@statamic/components/ui/Publish/Tabs.vue';
+import PublishComponents from '@statamic/components/ui/Publish/Components.vue';
+import LivePreview from '@statamic/components/ui/LivePreview/LivePreview.vue';
+import { SavePipeline } from '@statamic/exports.js';
+import { ref, computed } from 'vue';
+const { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks } = SavePipeline;
+import LocalizationsCard from '@statamic/components/ui/Publish/Localizations.vue';
+
+let saving = ref(false);
+let errors = ref({});
+let container = null;
 
 export default {
     mixins: [HasPreferences, HasHiddenFields, HasActions],
 
     components: {
+        Header,
+        Badge,
+        Dropdown,
+        DropdownMenu,
+        DropdownItem,
+        DropdownSeparator,
         SaveButtonOptions,
+        PublishContainer,
+        PublishTabs,
+        PublishComponents,
+        LivePreview,
+        Button,
+        CardPanel,
+        LocalizationsCard,
     },
 
     props: {
@@ -250,7 +193,6 @@ export default {
     data() {
         return {
             actions: this.initialActions,
-            saving: false,
             localizing: false,
             fieldset: this.initialFieldset,
             title: this.initialTitle,
@@ -262,10 +204,7 @@ export default {
             originValues: this.initialOriginValues || {},
             originMeta: this.initialOriginMeta || {},
             site: this.initialSite,
-            error: null,
-            errors: {},
             isPreviewing: false,
-            tabsVisible: true,
             state: 'new',
             published: this.initialPublished,
             readOnly: this.initialReadOnly,
@@ -275,10 +214,19 @@ export default {
             saveKeyBinding: null,
             quickSaveKeyBinding: null,
             quickSave: false,
+            syncFieldConfirmationText: __('messages.sync_term_field_confirmation_text'),
         };
     },
 
     computed: {
+        saving() {
+            return saving.value;
+        },
+
+        errors() {
+            return errors.value;
+        },
+
         store() {
             return this.$refs.container.store;
         },
@@ -287,10 +235,6 @@ export default {
             return striptags(__(this.title));
         },
 
-        hasErrors() {
-            return this.error || Object.keys(this.errors).length;
-        },
-
         somethingIsLoading() {
             return !this.$progress.isComplete();
         },
@@ -311,6 +255,10 @@ export default {
             return !!this.permalink && this.hasTemplate;
         },
 
+        showLocalizationSelector() {
+            return this.localizations.length > 1;
+        },
+
         isBase() {
             return this.publishContainer === 'base';
         },
@@ -331,10 +279,6 @@ export default {
             return __('Save');
         },
 
-        saveButtonClass() {
-            return 'btn-primary';
-        },
-
         afterSaveOption() {
             return this.getPreference('after_save');
         },
@@ -351,71 +295,39 @@ export default {
     },
 
     methods: {
-        clearErrors() {
-            this.error = null;
-            this.errors = {};
-        },
-
         save() {
             if (!this.canSave) {
                 this.quickSave = false;
                 return;
             }
 
-            this.saving = true;
-            this.clearErrors();
-
-            this.runBeforeSaveHook();
-        },
-
-        runBeforeSaveHook() {
-            Statamic.$hooks
-                .run('term.saving', {
-                    taxonomy: this.taxonomyHandle,
-                    values: this.values,
-                    container: this.$refs.container,
-                    storeName: this.publishContainer,
-                })
-                .then(this.performSaveRequest)
-                .catch((error) => {
-                    this.saving = false;
-                    this.$toast.error(error || 'Something went wrong');
-                });
-        },
-
-        performSaveRequest() {
-            const payload = {
-                ...this.visibleValues,
-                ...{
-                    _blueprint: this.fieldset.handle,
-                    published: this.published,
-                    _localized: this.localizedFields,
-                },
-            };
-
-            this.$axios[this.method](this.actions.save, payload)
+            new Pipeline()
+                .provide({ container, errors, saving })
+                .through([
+                    new BeforeSaveHooks('entry', {
+                        taxonomy: this.taxonomyHandle,
+                        values: this.values,
+                        container: this.$refs.container,
+                        storeName: this.publishContainer,
+                    }),
+                    new Request(this.actions.save, this.method, {
+                        ...this.visibleValues,
+                        ...{
+                            _blueprint: this.fieldset.handle,
+                            published: this.published,
+                            _localized: this.localizedFields,
+                        },
+                    }),
+                    new AfterSaveHooks('entry', {
+                        taxonomy: this.taxonomyHandle,
+                        reference: this.initialReference,
+                    }),
+                ])
                 .then((response) => {
-                    this.saving = false;
-                    if (!response.data.saved) {
-                        return this.$toast.error(__(`Couldn't save term`));
-                    }
                     this.title = response.data.data.title;
                     this.permalink = response.data.data.permalink;
                     if (!this.isCreating) this.$toast.success(__('Saved'));
-                    this.$refs.container.saved();
-                    this.runAfterSaveHook(response);
-                })
-                .catch((e) => this.handleAxiosError(e));
-        },
 
-        runAfterSaveHook(response) {
-            Statamic.$hooks
-                .run('term.saved', {
-                    taxonomy: this.taxonomyHandle,
-                    reference: this.initialReference,
-                    response,
-                })
-                .then(() => {
                     let nextAction = this.quickSave ? 'continue_editing' : this.afterSaveOption;
 
                     // If the user has opted to create another entry, redirect them to create page.
@@ -432,26 +344,12 @@ export default {
                     // the hooks are resolved because if this form is being shown in a stack, we only
                     // want to close it once everything's done.
                     else {
-                        this.values = this.resetValuesFromResponse(response.data.data.values);
+                        // this.values = this.resetValuesFromResponse(response.data.data.values);
                         this.$nextTick(() => this.$emit('saved', response));
                     }
 
                     this.quickSave = false;
-                })
-                .catch((e) => {});
-        },
-
-        handleAxiosError(e) {
-            this.saving = false;
-            if (e.response && e.response.status === 422) {
-                const { message, errors } = e.response.data;
-                this.error = message;
-                this.errors = errors;
-                this.$toast.error(message);
-                this.$reveal.invalid();
-            } else {
-                this.$toast.error(__('Something went wrong'));
-            }
+                });
         },
 
         localizationSelected(localization) {
@@ -504,51 +402,12 @@ export default {
             });
         },
 
-        localizationStatusText(localization) {
-            if (!localization.exists) return 'This entry does not exist for this site.';
-
-            return localization.published
-                ? 'This entry exists in this site, and is published.'
-                : 'This entry exists in this site, but is not published.';
-        },
-
         openLivePreview() {
-            this.tabsVisible = false;
-            this.$wait(200)
-                .then(() => {
-                    this.isPreviewing = true;
-                    return this.$wait(300);
-                })
-                .then(() => (this.tabsVisible = true));
+            this.isPreviewing = true;
         },
 
         closeLivePreview() {
             this.isPreviewing = false;
-            this.tabsVisible = true;
-        },
-
-        setFieldValue(handle, value) {
-            if (this.hasOrigin) this.desyncField(handle);
-
-            this.$refs.container.setFieldValue(handle, value);
-        },
-
-        syncField(handle) {
-            if (!confirm(__("Are you sure? This field's value will be replaced by the value in the original entry.")))
-                return;
-
-            this.localizedFields = this.localizedFields.filter((field) => field !== handle);
-            this.$refs.container.setFieldValue(handle, this.originValues[handle]);
-
-            // Update the meta for this field. For instance, a relationship field would have its data preloaded into it.
-            // If you sync the field, the preloaded data would be outdated and an ID would show instead of the titles.
-            this.meta[handle] = this.originMeta[handle];
-        },
-
-        desyncField(handle) {
-            if (!this.localizedFields.includes(handle)) this.localizedFields.push(handle);
-
-            this.$refs.container.dirty();
         },
 
         afterActionSuccessfullyCompleted(response) {
@@ -577,6 +436,8 @@ export default {
 
     created() {
         window.history.replaceState({}, document.title, document.location.href.replace('created=true', ''));
+
+        container = computed(() => this.$refs.container);
     },
 
     unmounted() {
diff --git a/resources/js/components/ui/Input/Input.vue b/resources/js/components/ui/Input/Input.vue
index c99e87d2e03..3c364e3f06c 100644
--- a/resources/js/components/ui/Input/Input.vue
+++ b/resources/js/components/ui/Input/Input.vue
@@ -25,6 +25,7 @@ const props = defineProps({
     placeholder: { type: String, default: null },
     prepend: { type: String, default: null },
     append: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
 });
 
 const hasPrependedIcon = !!props.iconPrepend || !!props.icon || !!slots.prepend;
@@ -121,6 +122,7 @@ const copy = () => {
             :type="inputType"
             :value="modelValue"
             :placeholder="placeholder"
+            :disabled="disabled"
             data-ui-control
             data-ui-group-target
             v-bind="$attrs"
diff --git a/resources/js/components/ui/LivePreview/LivePreview.vue b/resources/js/components/ui/LivePreview/LivePreview.vue
new file mode 100644
index 00000000000..758ff8d4dc2
--- /dev/null
+++ b/resources/js/components/ui/LivePreview/LivePreview.vue
@@ -0,0 +1,421 @@
+<script setup>
+import { computed, nextTick, ref, watch, useTemplateRef, onBeforeUnmount, onUnmounted } from 'vue';
+import Resizer from '@statamic/components/live-preview/Resizer.vue';
+import { injectContainerContext } from '@statamic/components/ui/Publish/Container.vue';
+import debounce from '@statamic/util/debounce.js';
+import { Select, Button } from '@statamic/ui';
+import axios from 'axios';
+import wait from '@statamic/util/wait.js';
+import { mapValues } from 'lodash-es';
+
+const props = defineProps({
+    enabled: {
+        type: Boolean,
+        default: false,
+        required: true,
+    },
+    url: {
+        type: String,
+        required: true,
+    },
+    targets: {
+        type: Array,
+        default: () => [],
+        required: true,
+    },
+});
+
+const emit = defineEmits(['opened', 'closed']);
+
+const { name, blueprint, store } = injectContainerContext();
+const portalEnabled = ref(false);
+const panesVisible = ref(false);
+const headerVisible = ref(false);
+const widthLocalStorageKey = 'statamic.live-preview.editor-width';
+const editorWidth = ref(localStorage.getItem(widthLocalStorageKey) || 400);
+const editorResizing = ref(false);
+const editorCollapsed = ref(false);
+const channel = ref(null);
+const poppedOut = ref(false);
+const popoutWindow = ref(null);
+const popoutResponded = ref(false);
+const loading = ref(true);
+const extras = ref({});
+const token = ref(null);
+const target = ref(0);
+const previousUrl = ref(null);
+const iframeContentContainer = useTemplateRef('contents');
+let source;
+
+const livePreviewFieldsPortal = computed(() => {
+    return `live-preview-fields-${name}`;
+});
+
+watch(
+    () => props.enabled,
+    (enabled, wasEnabled) => {
+        if (wasEnabled && !enabled) {
+            nextTick(() => (portalEnabled.value = false));
+        } else {
+            portalEnabled.value = enabled;
+        }
+
+        if (!enabled) return;
+
+        update();
+        animateIn();
+    },
+);
+
+const tokenizedUrl = computed(() => {
+    let url = props.url;
+
+    url += (url.includes('?') ? '&' : '?') + `target=${target.value}`;
+
+    if (token.value) url += `&token=${token.value}`;
+
+    return url;
+});
+
+const payload = computed(() => ({
+    blueprint: blueprint.handle,
+    preview: store.values,
+    extras: extras.value,
+}));
+
+watch(
+    [payload, target],
+    (payload) => {
+        if (props.enabled) update();
+    },
+    { deep: true },
+);
+
+const update = debounce(() => {
+    if (source) source.abort();
+    source = new AbortController();
+
+    loading.value = true;
+
+    axios
+        .post(tokenizedUrl.value, payload.value, { signal: source.signal })
+        .then((response) => {
+            token.value = response.data.token;
+            const url = response.data.url;
+            const tgt = props.targets[target.value];
+            const payload = { token: token.value, reference: props.reference };
+            poppedOut.value
+                ? channel.value.postMessage({ event: 'updated', url, target: tgt, payload })
+                : updateIframeContents(url, target, payload);
+            loading.value = false;
+        })
+        .catch((e) => {
+            if (e.code === 'ERR_CANCELED') return;
+            throw e;
+        });
+}, 150);
+
+// This was in a mixin. Probably should go into a composable.
+const hasIframeSourceChanged = (existingSrc, newSrc) => {
+    existingSrc = new URL(existingSrc);
+    newSrc = new URL(newSrc);
+    existingSrc.searchParams.delete('live-preview');
+    newSrc.searchParams.delete('live-preview');
+
+    return existingSrc.toString() !== newSrc.toString();
+};
+
+// This was in a mixin. Probably should go into a composable.
+const postMessageToIframe = (container, url, payload) => {
+    // If the target is a relative url, we'll get the origin from the current window.
+    const targetOrigin = /^https?:\/\//.test(url) ? new URL(url)?.origin : window.origin;
+
+    container.firstChild.contentWindow.postMessage(
+        {
+            name: 'statamic.preview.updated',
+            url,
+            ...payload,
+        },
+        targetOrigin,
+    );
+};
+
+// This was in a mixin. Probably should go into a composable.
+function updateIframeContents(url, target, payload) {
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('frameborder', '0');
+    iframe.setAttribute('src', url);
+    iframe.setAttribute('id', 'live-preview-iframe');
+    setIframeAttributes(iframe);
+
+    const container = iframeContentContainer.value;
+    let iframeUrl = new URL(url);
+    let cleanUrl = iframeUrl.host + iframeUrl.pathname;
+
+    // If there's no iframe yet, just append it.
+    if (!container.firstChild) {
+        container.appendChild(iframe);
+        previousUrl.value = cleanUrl;
+        return;
+    }
+
+    let shouldRefresh = target.refresh;
+
+    if (hasIframeSourceChanged(container.firstChild.src, iframe.src)) {
+        shouldRefresh = true;
+    }
+
+    if (!shouldRefresh) {
+        postMessageToIframe(container, url, payload);
+        return;
+    }
+
+    let isSameOrigin = url.startsWith('/') || iframeUrl.host === window.location.host;
+    let preserveScroll = isSameOrigin && cleanUrl === previousUrl.value;
+
+    let scroll = preserveScroll
+        ? [container.firstChild.contentWindow.scrollX ?? 0, container.firstChild.contentWindow.scrollY ?? 0]
+        : null;
+
+    container.replaceChild(iframe, container.firstChild);
+
+    if (preserveScroll) {
+        let iframeContentWindow = iframe.contentWindow;
+        const iframeScrollUpdate = (event) => {
+            iframeContentWindow.scrollTo(...scroll);
+        };
+
+        iframeContentWindow.addEventListener('DOMContentLoaded', iframeScrollUpdate, true);
+        iframeContentWindow.addEventListener('load', iframeScrollUpdate, true);
+    }
+
+    previousUrl.value = cleanUrl;
+}
+
+function setIframeAttributes(iframe) {
+    iframe.setAttribute('frameborder', '0');
+    iframe.setAttribute('class', previewDevice.value ? 'device' : 'responsive');
+    if (previewDevice.value) {
+        iframe.setAttribute('style', `width: ${previewDeviceWidth.value}; height: ${previewDeviceHeight.value}`);
+    } else {
+        iframe.removeAttribute('style');
+    }
+}
+
+function animateIn() {
+    return wait(100)
+        .then(() => {
+            headerVisible.value = true;
+            return wait(200);
+        })
+        .then(() => {
+            panesVisible.value = true;
+            return wait(300);
+        })
+        .then(() => {
+            // Components that update position based on native
+            // resize events (like Popovers) need to be informed thusly
+            window.dispatchEvent(new Event('resize'));
+        });
+}
+
+function animateOut() {
+    panesVisible.value = false;
+    headerVisible.value = false;
+    return wait(300);
+}
+
+const canPopOut = computed(() => typeof BroadcastChannel === 'function');
+
+function popout() {
+    poppedOut.value = true;
+    channel.value = channel.value || new BroadcastChannel('livepreview');
+    channel.value.onmessage = (e) => {
+        switch (e.data.event) {
+            case 'popout.opened':
+                listenForPopoutClose();
+                update();
+                break;
+            case 'popout.closed':
+                poppedOut.value = false;
+                update();
+            case 'popout.pong':
+                popoutResponded.value = true;
+                break;
+            default:
+                break;
+        }
+    };
+
+    const width = iframeContentContainer.value.clientWidth;
+    const height = iframeContentContainer.value.clientHeight;
+    const left = screen.width - width;
+    popoutWindow.value = window.open(props.url, 'livepreview', `width=${width},height=${height},top=0,left=${left}`);
+}
+
+function listenForPopoutClose() {
+    channel.value.postMessage({ event: 'ping' });
+    setTimeout(() => {
+        if (popoutResponded.value) {
+            listenForPopoutClose();
+        } else {
+            poppedOut.value = false;
+            update();
+        }
+
+        popoutResponded.value = false;
+    }, 500);
+}
+
+function closePopout() {
+    if (poppedOut.value) popoutWindow.value.close();
+}
+
+const targetSelectOptions = computed(() =>
+    Object.values(
+        mapValues(props.targets, (target, key) => {
+            return { value: key, label: __(target.label) };
+        }),
+    ),
+);
+
+const deviceSelectOptions = computed(() => {
+    let options = Object.values(
+        mapValues(Statamic.$config.get('livePreview.devices'), (dimensions, device) => {
+            if (device === 'Responsive') {
+                return { value: null, label: __('Responsive') };
+            }
+
+            return { value: device, label: __(device) };
+        }),
+    );
+
+    if (options.filter((option) => option.label === __('Responsive')).length === 0) {
+        options.unshift({ value: null, label: __('Responsive') });
+    }
+
+    return options;
+});
+
+const previewDevice = ref(deviceSelectOptions.value[0].value);
+
+watch(previewDevice, (device) => {
+    setIframeAttributes(document.getElementById('live-preview-iframe'));
+});
+
+const previewDeviceWidth = computed(() => {
+    console.log(previewDevice.value);
+    if (previewDevice.value) {
+        return `${Statamic.$config.get('livePreview.devices')[previewDevice.value].width}px`;
+    }
+});
+
+const previewDeviceHeight = computed(() => {
+    if (previewDevice) {
+        return `${Statamic.$config.get('livePreview.devices')[previewDevice.value].height}px`;
+    }
+});
+
+const inputs = computed(() => Statamic.$config.get('livePreview.inputs', {}));
+
+function collapseEditor() {
+    editorCollapsed.value = true;
+    editorWidth.value = 16;
+}
+
+function setEditorWidth(width) {
+    editorCollapsed.value = false;
+    editorWidth.value = width;
+    localStorage.setItem(widthLocalStorageKey, width);
+}
+
+function close() {
+    if (poppedOut.value) closePopout();
+
+    animateOut().then(() => emit('closed'));
+}
+
+const keybinding = ref(
+    Statamic.$keys.bindGlobal('mod+shift+p', () => {
+        props.enabled ? close() : emit('opened');
+    }),
+);
+
+onUnmounted(() => keybinding.value.destroy());
+
+Statamic.$events.$on(`live-preview.${props.name}.refresh`, () => {
+    update();
+});
+</script>
+
+<template>
+    <v-portal :to="livePreviewFieldsPortal" :disabled="!portalEnabled">
+        <slot name="default" />
+    </v-portal>
+
+    <portal v-if="enabled" name="live-preview" target-class="live-preview-portal">
+        <div class="live-preview fixed flex flex-col">
+            <transition name="live-preview-header-slide">
+                <div v-show="headerVisible" class="live-preview-header">
+                    <div class="dark:text-dark-150 text-base font-medium text-gray-700 ltr:mr-4 rtl:ml-4">
+                        {{ __('Live Preview') }}
+                    </div>
+                    <div class="flex items-center gap-x-2">
+                        <Button v-if="canPopOut && !poppedOut" size="sm" icon="maximize" @click="popout">
+                            {{ __('Pop out') }}
+                        </Button>
+                        <Button v-if="poppedOut" size="sm" icon="minimize" @click="closePopout">{{
+                            __('Pop in')
+                        }}</Button>
+                        <Select :options="deviceSelectOptions" v-model="previewDevice" v-show="!poppedOut" size="sm" />
+                        <Select :options="targetSelectOptions" v-model="target" v-if="targets.length > 1" size="sm" />
+
+                        <component
+                            v-for="(component, handle) in inputs"
+                            :key="handle"
+                            :is="component"
+                            :value="extras[handle]"
+                            :loading="loading"
+                            @input="componentUpdated(handle, $event)"
+                        />
+
+                        <slot name="buttons" />
+
+                        <Button @click="close" icon="x" icon-only size="sm" variant="ghost" />
+                    </div>
+                </div>
+            </transition>
+
+            <div class="live-preview-main">
+                <transition name="live-preview-editor-slide">
+                    <div
+                        v-show="panesVisible"
+                        class="live-preview-editor @container/live-preview"
+                        :style="{ width: poppedOut ? '100%' : `${editorWidth}px` }"
+                    >
+                        <div class="live-preview-fields h-full flex-1 overflow-scroll">
+                            <portal-target :name="livePreviewFieldsPortal" />
+                        </div>
+
+                        <resizer
+                            v-show="!poppedOut"
+                            @resized="setEditorWidth"
+                            @resize-start="editorResizing = true"
+                            @resize-end="editorResizing = false"
+                            @collapsed="collapseEditor"
+                        />
+                    </div>
+                </transition>
+
+                <transition name="live-preview-contents-slide">
+                    <div
+                        v-show="panesVisible"
+                        ref="contents"
+                        class="live-preview-contents items-center justify-center overflow-auto"
+                        :class="{ 'pointer-events-none': editorResizing }"
+                    />
+                </transition>
+            </div>
+        </div>
+    </portal>
+</template>
diff --git a/resources/js/components/ui/Publish/Components.vue b/resources/js/components/ui/Publish/Components.vue
new file mode 100644
index 00000000000..7a1f6554b72
--- /dev/null
+++ b/resources/js/components/ui/Publish/Components.vue
@@ -0,0 +1,9 @@
+<script setup>
+import { injectContainerContext } from './Container.vue';
+
+const { components } = injectContainerContext();
+</script>
+
+<template>
+    <component v-for="component in components" :key="component.name" :is="component.name" v-bind="component.props" />
+</template>
diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index 1c1f1f08aa1..b21e36da9ac 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -7,15 +7,21 @@ export const [injectContainerContext, provideContainerContext] = createContext('
 <script setup>
 import uniqid from 'uniqid';
 import { usePublishContainerStore } from '@statamic/stores/publish-container.js';
-import { watch, provide, getCurrentInstance } from 'vue';
+import { watch, provide, getCurrentInstance, ref } from 'vue';
+import Component from '@statamic/components/Component.js';
 
 const emit = defineEmits(['updated']);
 
+const container = getCurrentInstance();
+
 const props = defineProps({
     name: {
         type: String,
         default: () => uniqid(),
     },
+    reference: {
+        type: String,
+    },
     blueprint: {
         type: Object,
     },
@@ -27,22 +33,52 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    originValues: {
+        type: Object,
+        default: () => ({}),
+    },
+    originMeta: {
+        type: Object,
+        default: () => ({}),
+    },
     errors: {
         type: Object,
         default: () => ({}),
     },
+    site: {
+        type: String,
+    },
+    localizedFields: {
+        type: Array,
+    },
+    isRoot: {
+        type: [Boolean, undefined],
+        default: undefined,
+    },
     trackDirtyState: {
         type: Boolean,
         default: true,
     },
+    syncFieldConfirmationText: {
+        type: String,
+        default: () => __('Are you sure?'),
+    },
 });
 
 const store = usePublishContainerStore(props.name, {
     values: props.values,
     meta: props.meta,
+    originValues: props.originValues,
+    originMeta: props.originMeta,
     errors: props.errors,
+    isRoot: props.isRoot,
+    localizedFields: props.localizedFields,
+    site: props.site,
+    reference: props.reference,
 });
 
+const components = ref([]);
+
 watch(
     () => store.values,
     (values) => {
@@ -58,13 +94,15 @@ watch(
     { deep: true },
 );
 
-provideContainerContext({
-    store,
-    blueprint: props.blueprint,
-    someFunction: () => {
-        alert('Function from container context');
-    },
-});
+watch(
+    () => props.isRoot,
+    (isRoot) => store.setIsRoot(isRoot),
+);
+
+watch(
+    () => props.site,
+    (site) => store.setSite(site),
+);
 
 function dirty() {
     Statamic.$dirty.add(props.name);
@@ -73,10 +111,60 @@ function dirty() {
 function clearDirtyState() {
     Statamic.$dirty.remove(props.name);
 }
+
+function setFieldValue(handle, value) {
+    store.setDottedFieldValue({ path: handle, value });
+}
+
+function syncField(handle) {
+    if (!confirm(props.syncFieldConfirmationText)) return;
+
+    store.removeLocalizedField(handle);
+    store.setDottedFieldValue({ path: handle, value: store.originValues[handle] });
+    store.setDottedFieldMeta({ path: handle, value: store.originMeta[handle] });
+}
+
+function desyncField(handle) {
+    store.addLocalizedField(handle);
+    dirty();
+}
+
+function pushComponent(name, { props }) {
+    const component = new Component(uniqid(), name, props);
+    components.value.push(component);
+    return component;
+}
+
+provideContainerContext({
+    name: props.name,
+    store,
+    blueprint: props.blueprint,
+    reference: props.reference,
+    syncField,
+    desyncField,
+    container,
+    components,
+});
+
+defineExpose({
+    store,
+    saving,
+    saved,
+    setFieldValue,
+    clearDirtyState,
+    pushComponent,
+});
+
 // Backwards compatibility.
 provide('store', store);
 provide('storeName', props.name);
 provide('publishContainer', getCurrentInstance());
+
+// The following are shims to make things temporarily work.
+function saving() {}
+function saved() {
+    clearDirtyState();
+}
 </script>
 
 <template>
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 8e6c51cd116..4eca66c2bd2 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { computed, useTemplateRef } from 'vue';
+import { computed, useTemplateRef, watch } from 'vue';
 import { injectContainerContext } from './Container.vue';
 import { injectFieldsContext } from './FieldsProvider.vue';
-import { Field } from '@statamic/ui';
+import { Field, Icon, Tooltip, Label } from '@statamic/ui';
 import ShowField from '@statamic/components/field-conditions/ShowField.js';
 
 const props = defineProps({
@@ -12,7 +12,7 @@ const props = defineProps({
     },
 });
 
-const { store } = injectContainerContext();
+const { store, syncField, desyncField } = injectContainerContext();
 const { pathPrefix, metaPathPrefix } = injectFieldsContext();
 const handle = props.config.handle;
 
@@ -29,7 +29,6 @@ const meta = computed(() => {
 const errors = computed(() => data_get(store.errors, fullPath.value));
 const fieldId = computed(() => `field_${fullPath.value.replaceAll('.', '_')}`);
 const namePrefix = '';
-const isReadOnly = false;
 const isRequired = computed(() => props.config.required);
 const fieldtype = useTemplateRef('fieldtype');
 
@@ -39,6 +38,7 @@ const fieldActions = computed(() => {
 
 function valueUpdated(value) {
     store.setDottedFieldValue({ path: fullPath.value, value });
+    desync();
 }
 
 function metaUpdated(value) {
@@ -49,9 +49,13 @@ function replicatorPreviewUpdated(value) {
     store.setDottedFieldReplicatorPreview({ path: fullPath.value, value });
 }
 
-function focused() {}
+function focused() {
+    // todo
+}
 
-function blurred() {}
+function blurred() {
+    // todo
+}
 
 const values = computed(() => {
     return pathPrefix ? data_get(store.values, pathPrefix) : store.values;
@@ -64,18 +68,59 @@ const extraValues = computed(() => {
 const shouldShowField = computed(() => {
     return new ShowField(store, values.value, extraValues.value).showField(props.config, fullPath.value);
 });
+
+const isLocalizable = computed(() => {
+    return props.config.localizable !== false;
+});
+
+const isReadOnly = computed(() => {
+    if (store.isRoot === false && !isLocalizable.value) return true;
+
+    return isLocked.value || props.config.visibility === 'read_only' || false;
+});
+
+const isLocked = computed(() => false); // todo
+
+const isSyncable = computed(() => store.isRoot === false);
+const isSynced = computed(() => !store.localizedFields.includes(fullPath.value));
+
+function sync() {
+    syncField(fullPath.value);
+}
+
+function desync() {
+    desyncField(fullPath.value);
+}
 </script>
 
 <template>
     <Field
         v-show="shouldShowField"
-        :label="config.display"
         :id="fieldId"
         :instructions="config.instructions"
         :instructions-below="config.instructions_position === 'below'"
         :required="isRequired"
         :errors="errors"
+        :disabled="isReadOnly"
     >
+        <template #label>
+            <Label :for="fieldId">
+                {{ __(config.display) }}
+                <Tooltip :text="__('Localizable field')" v-if="isLocalizable">
+                    <Icon name="globals" class="text-gray-400" />
+                </Tooltip>
+                <button v-if="!isReadOnly && isSyncable" v-show="isSynced" @click="desync">
+                    <Tooltip :text="__('messages.field_synced_with_origin')">
+                        <Icon name="link" class="text-gray-400" />
+                    </Tooltip>
+                </button>
+                <button v-if="!isReadOnly && isSyncable" v-show="!isSynced" @click="sync">
+                    <Tooltip :text="__('messages.field_desynced_from_origin')">
+                        <Icon name="link-broken" class="text-gray-400" />
+                    </Tooltip>
+                </button>
+            </Label>
+        </template>
         <template #actions>
             <publish-field-actions v-if="fieldActions.length" :actions="fieldActions" />
         </template>
diff --git a/resources/js/components/ui/Publish/Localizations.vue b/resources/js/components/ui/Publish/Localizations.vue
new file mode 100644
index 00000000000..ac49f72fd90
--- /dev/null
+++ b/resources/js/components/ui/Publish/Localizations.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { Badge, CardPanel } from '@statamic/ui';
+
+defineProps({
+    localizations: {
+        type: Array,
+        required: true,
+    },
+    localizing: {
+        type: [Boolean, String],
+        default: false,
+    },
+});
+
+defineEmits(['selected']);
+</script>
+
+<template>
+    <CardPanel v-if="localizations.length > 1" :heading="__('Sites')">
+        <div
+            v-for="option in localizations"
+            :key="option.handle"
+            class="-mx-4 flex cursor-pointer items-center px-4 py-2 text-sm"
+            :class="option.active ? 'dark:bg-dark-300 bg-blue-100' : 'dark:hover:bg-dark-400 hover:bg-gray-200'"
+            @click="$emit('selected', option)"
+        >
+            <div class="flex flex-1 items-center" :class="{ 'line-through': !option.exists }">
+                <span
+                    class="little-dot ltr:mr-2 rtl:ml-2"
+                    :class="{
+                        'bg-green-600': option.published,
+                        'bg-gray-500': !option.published,
+                        'bg-red-500': !option.exists,
+                    }"
+                />
+                {{ __(option.name) }}
+                <loading-graphic :size="14" text="" class="ltr:ml-2 rtl:mr-2" v-if="localizing === option.handle" />
+            </div>
+            <Badge size="sm" color="orange" v-if="option.origin" :text="__('Origin')" />
+            <Badge size="sm" color="blue" v-if="option.active" :text="__('Active')" />
+            <Badge size="sm" color="purple" v-if="option.root && !option.origin && !option.active" :text="__('Root')" />
+        </div>
+    </CardPanel>
+</template>
diff --git a/resources/js/components/ui/Publish/SavePipeline.js b/resources/js/components/ui/Publish/SavePipeline.js
index cd3e3fafb1e..ce06d3948d8 100644
--- a/resources/js/components/ui/Publish/SavePipeline.js
+++ b/resources/js/components/ui/Publish/SavePipeline.js
@@ -102,7 +102,9 @@ export class BeforeSaveHooks extends Step {
         this.#hookPayload = hookPayload;
     }
     handle(payload) {
-        return Statamic.$hooks.run(`${this.#prefix}.saving`, this.#hookPayload);
+        return new Promise((resolve, reject) => {
+            return Statamic.$hooks.run(`${this.#prefix}.saving`, this.#hookPayload).then(() => resolve(payload));
+        });
     }
 }
 
@@ -115,9 +117,13 @@ export class AfterSaveHooks extends Step {
         this.#hookPayload = hookPayload;
     }
     handle(response) {
-        return Statamic.$hooks.run(`${this.#prefix}.saved`, {
-            ...this.#hookPayload,
-            response,
+        return new Promise((resolve, reject) => {
+            return Statamic.$hooks
+                .run(`${this.#prefix}.saved`, {
+                    ...this.#hookPayload,
+                    response,
+                })
+                .then(() => resolve(response));
         });
     }
 }
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 37551282e2b..cfae561dfaa 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -69,7 +69,7 @@ function tabHasError(tab) {
                 </TabContent>
 
                 <aside class="space-y-6" v-if="shouldShowSidebar">
-                    <slot name="sidebar" />
+                    <slot name="actions" />
                     <TabProvider v-if="sidebarTab" :tab="sidebarTab">
                         <Sections />
                     </TabProvider>
diff --git a/resources/js/stores/publish-container.js b/resources/js/stores/publish-container.js
index 70c37950f9c..94a3abf0ca4 100644
--- a/resources/js/stores/publish-container.js
+++ b/resources/js/stores/publish-container.js
@@ -10,6 +10,8 @@ export const usePublishContainerStore = function (name, initial) {
             jsonSubmittingFields: [],
             revealerFields: [],
             meta: initial.meta,
+            originMeta: initial.originMeta,
+            originValues: initial.originValues,
             previews: {},
             localizedFields: initial.localizedFields,
             site: initial.site,
@@ -29,6 +31,13 @@ export const usePublishContainerStore = function (name, initial) {
                 const { path, value } = payload;
                 data_set(this.values, path, value);
             },
+            addLocalizedField(path) {
+                if (!this.localizedFields.includes(path)) this.localizedFields.push(path);
+            },
+            removeLocalizedField(path) {
+                const index = this.localizedFields.indexOf(path);
+                if (index !== -1) this.localizedFields.splice(index, 1);
+            },
             setValues(values) {
                 this.values = values;
             },
diff --git a/resources/js/util/wait.js b/resources/js/util/wait.js
new file mode 100644
index 00000000000..6128fa50244
--- /dev/null
+++ b/resources/js/util/wait.js
@@ -0,0 +1,5 @@
+export default function wait(ms) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}
diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php
index 4f1e40d9761..6bd535a566e 100644
--- a/resources/lang/en/messages.php
+++ b/resources/lang/en/messages.php
@@ -230,6 +230,7 @@
     'status_expired_with_date' => 'Expired on :date',
     'status_published_with_date' => 'Published on :date',
     'status_scheduled_with_date' => 'Scheduled to be published on :date',
+    'sync_term_field_confirmation_text' => 'Are you sure? This field\'s value will be replaced by the value in the original term.',
     'taxonomies_blueprints_instructions' => 'Terms in this taxonomy may use any of these blueprints.',
     'taxonomies_collections_instructions' => 'The collections that use this taxonomy.',
     'taxonomies_preview_target_refresh_instructions' => 'Automatically refresh the preview while editing. Disabling this will use postMessage.',
diff --git a/resources/svg/icons/link-broken.svg b/resources/svg/icons/link-broken.svg
new file mode 100644
index 00000000000..380f027edf9
--- /dev/null
+++ b/resources/svg/icons/link-broken.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="M0.499852 0.5C4.96491 6.2196 7.6578 8.88141 13.5 13.5" stroke-width="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.78639 5.21423 6.54736 7.45326" stroke-width="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.43618 6.26727C0.712342 8.35698 -0.0171654 10.3067 1.83807 12.1619c1.85524 1.8552 3.80493 1.1257 5.89463 -0.5981" stroke-width="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.81299 2.82411C8.07533 0.831024 10.1729 -0.150979 12.162 1.83807c1.972 1.97195 1.0237 4.05062 -0.9349 6.29071" stroke-width="1"/></svg>
\ No newline at end of file
diff --git a/resources/svg/icons/link.svg b/resources/svg/icons/link.svg
new file mode 100644
index 00000000000..e4a7cf40cb5
--- /dev/null
+++ b/resources/svg/icons/link.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="M8.85761 5.14282 5.14307 8.85737" stroke-width="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.23456 11.3429c-2.35283 2.0728 -4.53435 3.0941 -6.60297 1.0255 -2.050828 -2.0508 -1.064654 -4.21266 0.97227 -6.54235" stroke-width="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.76562 2.65708C8.11846 0.584265 10.3 -0.437019 12.3686 1.63159c2.0508 2.05084 1.0647 4.21265 -0.9723 6.54234" stroke-width="1"/></svg>
\ No newline at end of file

From bc269809ccfc35c9ee6b145d65c24063c660b984 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 16 May 2025 16:53:21 -0400
Subject: [PATCH 20/33] use new stuff on entries publish form

---
 .../js/components/entries/PublishForm.vue     | 320 +++++++-----------
 .../js/components/ui/Publish/Container.vue    |   5 +
 resources/js/components/ui/Publish/Field.vue  |   8 +-
 resources/lang/en/messages.php                |   3 +-
 4 files changed, 127 insertions(+), 209 deletions(-)

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index ddfe89cfc95..27624a43a65 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -30,8 +30,8 @@
                 </DropdownMenu>
             </Dropdown>
 
-            <div class="text-2xs flex pt-px text-gray-600 me-4" v-if="readOnly">
-                <svg-icon name="light/lock" class="-mt-1 w-4 me-1" /> {{ __('Read Only') }}
+            <div class="text-2xs me-4 flex pt-px text-gray-600" v-if="readOnly">
+                <svg-icon name="light/lock" class="me-1 -mt-1 w-4" /> {{ __('Read Only') }}
             </div>
 
             <div class="hidden items-center gap-3 md:flex">
@@ -65,231 +65,128 @@
             <slot name="action-buttons-right" />
         </Header>
 
-        <publish-container
+        <PublishContainer
             v-if="fieldset"
             ref="container"
             :name="publishContainer"
+            :reference="initialReference"
             :blueprint="fieldset"
             :values="values"
             :extra-values="extraValues"
-            :reference="initialReference"
             :meta="meta"
+            :origin-values="originValues"
+            :origin-meta="originMeta"
             :errors="errors"
+            :is-root="isRoot"
             :site="site"
             :localized-fields="localizedFields"
-            :is-root="isRoot"
             :track-dirty-state="trackDirtyState"
+            :sync-field-confirmation-text="syncFieldConfirmationText"
             @updated="values = $event"
-            v-slot="{ container, components, setFieldMeta }"
         >
-            <live-preview
-                :name="publishContainer"
+            <LivePreview
+                :enabled="isPreviewing"
                 :url="livePreviewUrl"
-                :previewing="isPreviewing"
                 :targets="previewTargets"
-                :values="values"
-                :blueprint="fieldset.handle"
-                :reference="initialReference"
-                @opened-via-keyboard="openLivePreview"
+                @opened="openLivePreview"
                 @closed="closeLivePreview"
             >
-                <div>
-                    <component
-                        v-for="component in components"
-                        :key="component.id"
-                        :is="component.name"
-                        :container="container"
-                        v-bind="component.props"
-                        v-on="component.events"
-                    />
-
-                    <transition name="live-preview-tabs-drop">
-                        <publish-tabs
-                            v-show="tabsVisible"
-                            :read-only="readOnly"
-                            :syncable="hasOrigin"
-                            @updated="setFieldValue"
-                            @meta-updated="setFieldMeta"
-                            @synced="syncField"
-                            @desynced="desyncField"
-                            @focus="container.$emit('focus', $event)"
-                            @blur="container.$emit('blur', $event)"
-                        >
-                            <template #actions="{ shouldShowSidebar }">
-                                <div class="space-y-6">
-                                    <!-- Live Preview / Visit URL Buttons -->
-                                    <div v-if="collectionHasRoutes" :class="{ hidden: !shouldShowSidebar }">
-                                        <div
-                                            class="grid grid-cols-2 gap-4"
-                                            v-if="showLivePreviewButton || showVisitUrlButton"
-                                        >
-                                            <Button
-                                                :text="__('Live Preview')"
-                                                icon="live-preview"
-                                                @click="openLivePreview"
-                                                v-if="showLivePreviewButton"
-                                            />
-                                            <Button
-                                                :href="permalink"
-                                                :text="__('Visit URL')"
-                                                icon="external-link"
-                                                target="_blank"
-                                                v-if="showVisitUrlButton"
-                                            />
-                                        </div>
-                                    </div>
-
-                                    <!-- Published Switch -->
-                                    <Panel class="flex justify-between px-5 py-3">
-                                        <Heading :text="__('Published')" />
-                                        <Switch
-                                            v-if="!revisionsEnabled"
-                                            :model-value="published"
-                                            :read-only="!canManagePublishState"
-                                            @update:model-value="setFieldValue('published', $event)"
-                                        />
-                                    </Panel>
-
-                                    <!-- Revisions -->
-                                    <Panel v-if="revisionsEnabled && !isCreating">
-                                        <PanelHeader class="flex items-center justify-between">
-                                            <Heading :text="__('Revisions')" />
-                                            <Button
-                                                @click="showRevisionHistory = true"
-                                                icon="history"
-                                                :text="__('View History')"
-                                                size="xs"
-                                                class="-me-4"
-                                            />
-                                        </PanelHeader>
-                                        <Card class="space-y-2">
-                                            <Subheading v-if="published" class="flex items-center gap-2">
-                                                <Icon name="checkmark" class="text-green-600" />
-                                                {{ __('Entry has a published version') }}
-                                            </Subheading>
-                                            <Subheading v-else class="flex items-center gap-2 text-yellow-600">
-                                                <Icon name="warning-diamond" />
-                                                {{ __('Entry has not been published') }}
-                                            </Subheading>
-                                            <Subheading
-                                                v-if="!isWorkingCopy && published"
-                                                class="flex items-center gap-2"
-                                            >
-                                                <Icon name="checkmark" class="text-green-600" />
-                                                {{ __('This is the published version') }}
-                                            </Subheading>
-                                            <Subheading v-if="isDirty" class="flex items-center gap-2 text-yellow-600">
-                                                <Icon name="warning-diamond" />
-                                                {{ __('Unsaved changes') }}
-                                            </Subheading>
-                                        </Card>
-                                    </Panel>
-
-                                    <div class="dark:border-dark-900 border-t p-4" v-if="localizations.length > 1">
-                                        <label class="publish-field-label mb-2 font-medium" v-text="__('Sites')" />
-                                        <div
-                                            v-for="option in localizations"
-                                            :key="option.handle"
-                                            class="-mx-4 flex items-center px-4 py-2 text-sm"
-                                            :class="[
-                                                option.active
-                                                    ? 'dark:bg-dark-300 bg-blue-100'
-                                                    : 'dark:hover:bg-dark-400 hover:bg-gray-200',
-                                                !canSave && !option.exists ? 'cursor-not-allowed' : 'cursor-pointer',
-                                            ]"
-                                            @click="localizationSelected(option)"
-                                        >
-                                            <div
-                                                class="flex flex-1 items-center"
-                                                :class="{ 'line-through': !option.exists }"
-                                            >
-                                                <span
-                                                    class="little-dot ltr:mr-2 rtl:ml-2"
-                                                    :class="{
-                                                        'bg-green-600': option.published,
-                                                        'bg-gray-500': !option.published,
-                                                        'bg-red-500': !option.exists,
-                                                    }"
-                                                />
-                                                {{ __(option.name) }}
-                                                <loading-graphic
-                                                    :size="14"
-                                                    text=""
-                                                    class="ms-2"
-                                                    v-if="localizing && localizing.handle === option.handle"
-                                                />
-                                            </div>
-                                            <div
-                                                class="badge-sm bg-orange dark:bg-orange-dark"
-                                                v-if="option.origin"
-                                                v-text="__('Origin')"
-                                            />
-                                            <div
-                                                class="badge-sm bg-blue dark:bg-dark-blue-175"
-                                                v-if="option.active"
-                                                v-text="__('Active')"
-                                            />
-                                            <div
-                                                class="badge-sm bg-purple dark:bg-purple-dark"
-                                                v-if="option.root && !option.origin && !option.active"
-                                                v-text="__('Root')"
-                                            />
-                                        </div>
-                                    </div>
+                <PublishComponents />
+
+                <PublishTabs>
+                    <template #actions>
+                        <div class="space-y-6">
+                            <!-- Live Preview / Visit URL Buttons -->
+                            <div v-if="collectionHasRoutes">
+                                <div class="grid grid-cols-2 gap-4" v-if="showLivePreviewButton || showVisitUrlButton">
+                                    <Button
+                                        :text="__('Live Preview')"
+                                        icon="live-preview"
+                                        @click="openLivePreview"
+                                        v-if="showLivePreviewButton"
+                                    />
+                                    <Button
+                                        :href="permalink"
+                                        :text="__('Visit URL')"
+                                        icon="external-link"
+                                        target="_blank"
+                                        v-if="showVisitUrlButton"
+                                    />
                                 </div>
-                            </template>
-                        </publish-tabs>
-                    </transition>
-                </div>
-                <template v-slot:buttons>
-                    <button
+                            </div>
+
+                            <!-- Published Switch -->
+                            <Panel class="flex justify-between px-5 py-3" v-if="!revisionsEnabled">
+                                <Heading :text="__('Published')" />
+                                <Switch
+                                    :model-value="published"
+                                    :read-only="!canManagePublishState"
+                                    @update:model-value="setFieldValue('published', $event)"
+                                />
+                            </Panel>
+
+                            <!-- Revisions -->
+                            <Panel v-if="revisionsEnabled && !isCreating">
+                                <PanelHeader class="flex items-center justify-between">
+                                    <Heading :text="__('Revisions')" />
+                                    <Button
+                                        @click="showRevisionHistory = true"
+                                        icon="history"
+                                        :text="__('View History')"
+                                        size="xs"
+                                        class="-me-4"
+                                    />
+                                </PanelHeader>
+                                <Card class="space-y-2">
+                                    <Subheading v-if="published" class="flex items-center gap-2">
+                                        <Icon name="checkmark" class="text-green-600" />
+                                        {{ __('Entry has a published version') }}
+                                    </Subheading>
+                                    <Subheading v-else class="flex items-center gap-2 text-yellow-600">
+                                        <Icon name="warning-diamond" />
+                                        {{ __('Entry has not been published') }}
+                                    </Subheading>
+                                    <Subheading v-if="!isWorkingCopy && published" class="flex items-center gap-2">
+                                        <Icon name="checkmark" class="text-green-600" />
+                                        {{ __('This is the published version') }}
+                                    </Subheading>
+                                    <Subheading v-if="isDirty" class="flex items-center gap-2 text-yellow-600">
+                                        <Icon name="warning-diamond" />
+                                        {{ __('Unsaved changes') }}
+                                    </Subheading>
+                                </Card>
+                            </Panel>
+
+                            <LocalizationsCard
+                                v-if="showLocalizationSelector"
+                                :localizations
+                                :localizing
+                                @selected="localizationSelected"
+                            />
+                        </div>
+                    </template>
+                </PublishTabs>
+                <template #buttons>
+                    <Button
                         v-if="!readOnly"
-                        class="ms-4"
-                        :class="{
-                            btn: revisionsEnabled,
-                            'btn-primary': isCreating || !revisionsEnabled,
-                        }"
+                        size="sm"
+                        :variant="revisionsEnabled ? 'default' : 'primary'"
                         :disabled="!canSave"
                         @click.prevent="save"
-                        v-text="saveText"
-                    ></button>
+                        :text="saveText"
+                    ></Button>
 
-                    <button
-                        v-if="revisionsEnabled && !isCreating"
-                        class="btn-primary flex items-center ms-4"
+                    <Button
+                        v-if="revisionsEnabled"
+                        size="sm"
+                        variant="primary"
                         :disabled="!canPublish"
                         @click="confirmingPublish = true"
-                    >
-                        <span v-text="publishButtonText" />
-                        <svg-icon name="micro/chevron-down-xs" class="w-2 ms-2" />
-                    </button>
+                        :text="publishButtonText"
+                    />
                 </template>
-            </live-preview>
-        </publish-container>
-
-        <div class="mt-6 flex items-center md:hidden">
-            <button
-                v-if="!readOnly"
-                class="btn-lg"
-                :class="{
-                    'btn-primary w-full': !revisionsEnabled,
-                    'btn w-1/2 me-4': revisionsEnabled,
-                }"
-                :disabled="!canSave"
-                @click.prevent="save"
-                v-text="__(revisionsEnabled ? 'Save Changes' : 'Save')"
-            />
-
-            <button
-                v-if="revisionsEnabled"
-                class="btn btn-lg btn-primary flex w-1/2 items-center justify-center ms-2"
-                :disabled="!canPublish"
-                @click="confirmingPublish = true"
-            >
-                <span v-text="publishButtonText" />
-                <svg-icon name="micro/chevron-down-xs" class="w-2 ms-2" />
-            </button>
-        </div>
+            </LivePreview>
+        </PublishContainer>
 
         <stack
             name="revision-history"
@@ -362,7 +259,13 @@ import {
     Subheading,
     Card,
     Icon,
+    CardPanel,
 } from '@statamic/ui';
+import PublishContainer from '@statamic/components/ui/Publish/Container.vue';
+import PublishTabs from '@statamic/components/ui/Publish/Tabs.vue';
+import PublishComponents from '@statamic/components/ui/Publish/Components.vue';
+import LocalizationsCard from '@statamic/components/ui/Publish/Localizations.vue';
+import LivePreview from '@statamic/components/ui/LivePreview/LivePreview.vue';
 
 export default {
     mixins: [HasPreferences, HasHiddenFields, HasActions],
@@ -384,6 +287,12 @@ export default {
         Subheading,
         Card,
         Icon,
+        PublishContainer,
+        PublishTabs,
+        PublishComponents,
+        CardPanel,
+        LocalizationsCard,
+        LivePreview,
     },
 
     props: {
@@ -466,6 +375,7 @@ export default {
             quickSaveKeyBinding: null,
             quickSave: false,
             isAutosave: false,
+            syncFieldConfirmationText: __('messages.sync_entry_field_confirmation_text'),
         };
     },
 
@@ -518,6 +428,10 @@ export default {
             return !!this.permalink;
         },
 
+        showLocalizationSelector() {
+            return this.localizations.length > 1;
+        },
+
         isBase() {
             return this.publishContainer === 'base';
         },
@@ -744,7 +658,7 @@ export default {
 
             this.$dirty.remove(this.publishContainer);
 
-            this.localizing = localization;
+            this.localizing = localization.handle;
 
             if (localization.exists) {
                 this.editLocalization(localization);
diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index b21e36da9ac..873a09a9d10 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -29,6 +29,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    extraValues: {
+        type: Object,
+        default: () => ({}),
+    },
     meta: {
         type: Object,
         default: () => ({}),
@@ -67,6 +71,7 @@ const props = defineProps({
 
 const store = usePublishContainerStore(props.name, {
     values: props.values,
+    extraValues: props.extraValues,
     meta: props.meta,
     originValues: props.originValues,
     originMeta: props.originMeta,
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 4eca66c2bd2..1677f923b5f 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -38,7 +38,7 @@ const fieldActions = computed(() => {
 
 function valueUpdated(value) {
     store.setDottedFieldValue({ path: fullPath.value, value });
-    desync();
+    if (isSyncable.value) desync();
 }
 
 function metaUpdated(value) {
@@ -69,9 +69,7 @@ const shouldShowField = computed(() => {
     return new ShowField(store, values.value, extraValues.value).showField(props.config, fullPath.value);
 });
 
-const isLocalizable = computed(() => {
-    return props.config.localizable !== false;
-});
+const isLocalizable = computed(() => props.config.localizable);
 
 const isReadOnly = computed(() => {
     if (store.isRoot === false && !isLocalizable.value) return true;
@@ -82,7 +80,7 @@ const isReadOnly = computed(() => {
 const isLocked = computed(() => false); // todo
 
 const isSyncable = computed(() => store.isRoot === false);
-const isSynced = computed(() => !store.localizedFields.includes(fullPath.value));
+const isSynced = computed(() => isSyncable.value && !store.localizedFields.includes(fullPath.value));
 
 function sync() {
     syncField(fullPath.value);
diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php
index 6bd535a566e..b4a443fb573 100644
--- a/resources/lang/en/messages.php
+++ b/resources/lang/en/messages.php
@@ -230,7 +230,8 @@
     'status_expired_with_date' => 'Expired on :date',
     'status_published_with_date' => 'Published on :date',
     'status_scheduled_with_date' => 'Scheduled to be published on :date',
-    'sync_term_field_confirmation_text' => 'Are you sure? This field\'s value will be replaced by the value in the original term.',
+    'sync_entry_field_confirmation_text' => 'Are you sure? This field\'s value will be replaced by the value in the originating entry.',
+    'sync_term_field_confirmation_text' => 'Are you sure? This field\'s value will be replaced by the value in the originating term.',
     'taxonomies_blueprints_instructions' => 'Terms in this taxonomy may use any of these blueprints.',
     'taxonomies_collections_instructions' => 'The collections that use this taxonomy.',
     'taxonomies_preview_target_refresh_instructions' => 'Automatically refresh the preview while editing. Disabling this will use postMessage.',

From df544d00ee7df660605f37a229dfcf606bf09163 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 10:26:08 -0400
Subject: [PATCH 21/33] When values prop change, update the stores values
 without bubbling anything back.

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

diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index 873a09a9d10..b93b19217c0 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -84,9 +84,16 @@ const store = usePublishContainerStore(props.name, {
 
 const components = ref([]);
 
+watch(
+    () => props.values,
+    (values) => store.setValues(values),
+    { deep: true },
+);
+
 watch(
     () => store.values,
     (values) => {
+        if (values === props.values) return;
         if (props.trackDirtyState) dirty();
         emit('updated', values);
     },

From c84ede762fd7956c8d9315496cbfc1136674dd29 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 10:27:10 -0400
Subject: [PATCH 22/33] Only update the value if it changed.

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

diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 1677f923b5f..7bb28d00022 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -37,6 +37,8 @@ const fieldActions = computed(() => {
 });
 
 function valueUpdated(value) {
+    const existingValue = data_get(store.values, fullPath.value);
+    if (value === existingValue) return;
     store.setDottedFieldValue({ path: fullPath.value, value });
     if (isSyncable.value) desync();
 }

From 54d412cbd1549d3d65473c788c23cb9c106d608f Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 10:27:33 -0400
Subject: [PATCH 23/33] Also set extra values from response

---
 resources/js/components/ui/Publish/SavePipeline.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/ui/Publish/SavePipeline.js b/resources/js/components/ui/Publish/SavePipeline.js
index ce06d3948d8..d4407174bf0 100644
--- a/resources/js/components/ui/Publish/SavePipeline.js
+++ b/resources/js/components/ui/Publish/SavePipeline.js
@@ -74,6 +74,7 @@ export class Request extends Step {
                         container.value.store.setValues(
                             resetValuesFromResponse(response.data.data.values, container.value.store),
                         );
+                        container.value.store.setExtraValues(response.data.data.extraValues);
                     }
                     resolve(response);
                 })

From 09d2403e7a6658dc34caeb7f3df2a442bd10dca1 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 10:31:10 -0400
Subject: [PATCH 24/33] Wire up entry publish form to new save pipeline

---
 .../js/components/entries/PublishForm.vue     | 140 +++++++-----------
 1 file changed, 50 insertions(+), 90 deletions(-)

diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 27624a43a65..d3c2a034b43 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -266,6 +266,13 @@ import PublishTabs from '@statamic/components/ui/Publish/Tabs.vue';
 import PublishComponents from '@statamic/components/ui/Publish/Components.vue';
 import LocalizationsCard from '@statamic/components/ui/Publish/Localizations.vue';
 import LivePreview from '@statamic/components/ui/LivePreview/LivePreview.vue';
+import { SavePipeline } from '@statamic/exports.js';
+import { computed, ref } from 'vue';
+const { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks, PipelineStopped } = SavePipeline;
+
+let saving = ref(false);
+let errors = ref({});
+let container = null;
 
 export default {
     mixins: [HasPreferences, HasHiddenFields, HasActions],
@@ -335,7 +342,6 @@ export default {
     data() {
         return {
             actions: this.initialActions,
-            saving: false,
             localizing: false,
             trackDirtyState: true,
             fieldset: this.initialFieldset,
@@ -352,8 +358,6 @@ export default {
             selectingOrigin: false,
             selectedOrigin: null,
             isWorkingCopy: this.initialIsWorkingCopy,
-            error: null,
-            errors: {},
             isPreviewing: false,
             tabsVisible: true,
             state: 'new',
@@ -380,6 +384,14 @@ export default {
     },
 
     computed: {
+        saving() {
+            return saving.value;
+        },
+
+        errors() {
+            return errors.value;
+        },
+
         store() {
             return this.$refs.container.store;
         },
@@ -388,10 +400,6 @@ export default {
             return striptags(__(this.title));
         },
 
-        hasErrors() {
-            return this.error || Object.keys(this.errors).length;
-        },
-
         somethingIsLoading() {
             return !this.$progress.isComplete();
         },
@@ -505,78 +513,35 @@ export default {
     },
 
     methods: {
-        clearErrors() {
-            this.error = null;
-            this.errors = {};
-        },
-
         save() {
             if (!this.canSave) {
                 this.quickSave = false;
                 return;
             }
 
-            this.saving = true;
-            this.clearErrors();
-
-            setTimeout(() => this.runBeforeSaveHook(), 151); // 150ms is the debounce time for fieldtype updates
-        },
-
-        runBeforeSaveHook() {
-            this.$refs.container.saving();
-
-            Statamic.$hooks
-                .run('entry.saving', {
-                    collection: this.collectionHandle,
-                    values: this.values,
-                    container: this.$refs.container,
-                    storeName: this.publishContainer,
-                })
-                .then(this.performSaveRequest)
-                .catch((error) => {
-                    this.saving = false;
-                    this.$toast.error(error || 'Something went wrong');
-                });
-        },
-
-        performSaveRequest() {
-            // Once the hook has completed, we need to make the actual request.
-            // We build the payload here because the before hook may have modified values.
-            const payload = {
-                ...this.visibleValues,
-                ...{
-                    _blueprint: this.fieldset.handle,
-                    _localized: this.localizedFields,
-                    _parent: this.parent,
-                },
-            };
-
-            this.$axios[this.method](this.actions.save, payload)
+            new Pipeline()
+                .provide({ container, errors, saving })
+                .through([
+                    new BeforeSaveHooks('entry', {
+                        collection: this.collectionHandle,
+                        values: this.values,
+                        container: this.$refs.container,
+                        storeName: this.publishContainer,
+                    }),
+                    new Request(this.actions.save, this.method, {
+                        ...this.visibleValues,
+                        ...{
+                            _blueprint: this.fieldset.handle,
+                            _localized: this.localizedFields,
+                            _parent: this.parent,
+                        },
+                    }),
+                    new AfterSaveHooks('entry', {
+                        collection: this.collectionHandle,
+                        reference: this.initialReference,
+                    }),
+                ])
                 .then((response) => {
-                    this.saving = false;
-                    if (!response.data.saved) {
-                        return this.$toast.error(__(`Couldn't save entry`));
-                    }
-                    this.title = response.data.data.title;
-                    this.isWorkingCopy = true;
-                    if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
-                    if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));
-                    this.$refs.container.saved();
-                    this.runAfterSaveHook(response);
-                })
-                .catch((error) => this.handleAxiosError(error));
-        },
-
-        runAfterSaveHook(response) {
-            // Once the save request has completed, we want to run the "after" hook.
-            // Devs can do what they need and we'll wait for them, but they can't cancel anything.
-            Statamic.$hooks
-                .run('entry.saved', {
-                    collection: this.collectionHandle,
-                    reference: this.initialReference,
-                    response,
-                })
-                .then(() => {
                     // If revisions are enabled, just emit event.
                     if (this.revisionsEnabled) {
                         clearTimeout(this.trackDirtyStateTimeout);
@@ -588,6 +553,11 @@ export default {
                         return;
                     }
 
+                    this.title = response.data.data.title;
+                    this.isWorkingCopy = true;
+                    if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
+                    if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));
+
                     let nextAction = this.quickSave || this.isAutosave ? 'continue_editing' : this.afterSaveOption;
 
                     // If the user has opted to create another entry, redirect them to create page.
@@ -606,8 +576,6 @@ export default {
                     else {
                         clearTimeout(this.trackDirtyStateTimeout);
                         this.trackDirtyState = false;
-                        this.values = this.resetValuesFromResponse(response.data.data.values);
-                        this.extraValues = response.data.data.extraValues;
                         this.trackDirtyStateTimeout = setTimeout(() => (this.trackDirtyState = true), 500);
                         this.initialPublished = response.data.data.published;
                         this.activeLocalization.published = response.data.data.published;
@@ -618,7 +586,12 @@ export default {
                     this.quickSave = false;
                     this.isAutosave = false;
                 })
-                .catch((e) => console.error(e));
+                .catch((e) => {
+                    if (!(e instanceof PipelineStopped)) {
+                        this.$toast.error(__('Something went wrong'));
+                        console.error(e);
+                    }
+                });
         },
 
         confirmPublish() {
@@ -627,21 +600,6 @@ export default {
             }
         },
 
-        handleAxiosError(e) {
-            this.saving = false;
-            if (e.response && e.response.status === 422) {
-                const { message, errors } = e.response.data;
-                this.error = message;
-                this.errors = errors;
-                this.$toast.error(message);
-                this.$reveal.invalid();
-            } else if (e.response) {
-                this.$toast.error(e.response.data.message);
-            } else {
-                this.$toast.error(e || 'Something went wrong');
-            }
-        },
-
         localizationSelected(localization) {
             if (!this.canSave) {
                 if (localization.exists) this.editLocalization(localization);
@@ -874,6 +832,8 @@ export default {
             this.originBehavior === 'active'
                 ? this.localizations.find((l) => l.active)?.handle
                 : this.localizations.find((l) => l.root)?.handle;
+
+        container = computed(() => this.$refs.container);
     },
 
     unmounted() {

From 976a1e7c7b19e35574291f9ea6d4b23b8b3c8fe7 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 12:41:05 -0400
Subject: [PATCH 25/33] handle error

---
 resources/js/components/terms/PublishForm.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index aa6d61960b8..f85ac415adf 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -132,7 +132,7 @@ import PublishComponents from '@statamic/components/ui/Publish/Components.vue';
 import LivePreview from '@statamic/components/ui/LivePreview/LivePreview.vue';
 import { SavePipeline } from '@statamic/exports.js';
 import { ref, computed } from 'vue';
-const { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks } = SavePipeline;
+const { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks, PipelineStopped } = SavePipeline;
 import LocalizationsCard from '@statamic/components/ui/Publish/Localizations.vue';
 
 let saving = ref(false);
@@ -344,11 +344,16 @@ export default {
                     // the hooks are resolved because if this form is being shown in a stack, we only
                     // want to close it once everything's done.
                     else {
-                        // this.values = this.resetValuesFromResponse(response.data.data.values);
                         this.$nextTick(() => this.$emit('saved', response));
                     }
 
                     this.quickSave = false;
+                })
+                .catch((e) => {
+                    if (!(e instanceof PipelineStopped)) {
+                        this.$toast.error(__('Something went wrong'));
+                        console.error(e);
+                    }
                 });
         },
 

From a1702e9c4509565a64fd10eaa95f177ae09a15f5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 12:42:07 -0400
Subject: [PATCH 26/33] wire up generic form components

---
 resources/js/components/ui/Publish/Form.vue   |  8 ++-
 .../js/components/ui/Publish/SavePipeline.js  |  4 +-
 resources/views/publish/form.blade.php        | 12 ++++
 src/CP/PublishForm.php                        | 63 +++++++++++++++++++
 4 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 resources/views/publish/form.blade.php
 create mode 100644 src/CP/PublishForm.php

diff --git a/resources/js/components/ui/Publish/Form.vue b/resources/js/components/ui/Publish/Form.vue
index f7e3e219f82..32c7f053700 100644
--- a/resources/js/components/ui/Publish/Form.vue
+++ b/resources/js/components/ui/Publish/Form.vue
@@ -26,10 +26,14 @@ const props = defineProps({
         required: true,
         default: () => ({}),
     },
-    saveUrl: {
+    submitUrl: {
         type: String,
         required: true,
     },
+    submitMethod: {
+        type: String,
+        default: 'patch',
+    },
 });
 
 const containerName = Statamic.$slug.separatedBy('_').create(props.title);
@@ -44,7 +48,7 @@ function save() {
         .provide({ container, errors, saving })
         .through([
             new BeforeSaveHooks('entry'),
-            new Request(props.saveUrl, 'patch', { values: values.value }),
+            new Request(props.submitUrl, props.submitMethod, { values: values.value }),
             new AfterSaveHooks('entry'),
         ])
         .then((response) => {
diff --git a/resources/js/components/ui/Publish/SavePipeline.js b/resources/js/components/ui/Publish/SavePipeline.js
index d4407174bf0..fc9be7037db 100644
--- a/resources/js/components/ui/Publish/SavePipeline.js
+++ b/resources/js/components/ui/Publish/SavePipeline.js
@@ -62,7 +62,7 @@ export class Request extends Step {
     constructor(url, method, data) {
         super();
         this.#url = url;
-        this.#method = method;
+        this.#method = method.toLowerCase();
         this.#data = data;
     }
 
@@ -70,7 +70,7 @@ export class Request extends Step {
         return new Promise((resolve, reject) => {
             return axios[this.#method](this.#url, this.#data)
                 .then((response) => {
-                    if (container) {
+                    if (container && response.data.data?.hasOwnProperty('values')) {
                         container.value.store.setValues(
                             resetValuesFromResponse(response.data.data.values, container.value.store),
                         );
diff --git a/resources/views/publish/form.blade.php b/resources/views/publish/form.blade.php
new file mode 100644
index 00000000000..fecbfbca287
--- /dev/null
+++ b/resources/views/publish/form.blade.php
@@ -0,0 +1,12 @@
+@extends('statamic::layout')
+
+@section('content')
+    <ui-publish-form
+        title="Generic Publish Form"
+        :blueprint="{{ Js::from($blueprint) }}"
+        :initial-values="{{ Js::from($values) }}"
+        :initial-meta="{{ Js::from($meta) }}"
+        submit-url="{{ $submitUrl }}"
+        submit-method="{{ $submitMethod }}"
+    ></ui-publish-form>
+@endsection
diff --git a/src/CP/PublishForm.php b/src/CP/PublishForm.php
new file mode 100644
index 00000000000..1dcf6f488f3
--- /dev/null
+++ b/src/CP/PublishForm.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Statamic\CP;
+
+use Illuminate\Contracts\Support\Responsable;
+use Statamic\Fields\Blueprint;
+
+class PublishForm implements Responsable
+{
+    private array $values = [];
+    private string $submitUrl;
+    private string $submitMethod = 'PATCH';
+
+    public function __construct(private $blueprint)
+    {
+    }
+
+    public static function make(Blueprint $blueprint): self
+    {
+        return new self($blueprint);
+    }
+
+    public function values(array $values): self
+    {
+        $this->values = $values;
+
+        return $this;
+    }
+
+    public function submittingTo(string $url, string $method = 'PATCH'): self
+    {
+        $this->submitUrl = $url;
+        $this->submitMethod = $method;
+
+        return $this;
+    }
+
+    public function submit(array $values): array
+    {
+        $fields = $this->blueprint->fields()->addValues($values);
+
+        $fields->validate();
+
+        return $fields->process()->values()->all();
+    }
+
+    public function toResponse($request)
+    {
+        $fields = $this
+            ->blueprint
+            ->fields()
+            ->addValues($this->values)
+            ->preProcess();
+
+        return view('statamic::publish.form', [
+            'blueprint' => $this->blueprint->toPublishArray(),
+            'values' => $fields->values(),
+            'meta' => $fields->meta(),
+            'submitUrl' => $this->submitUrl,
+            'submitMethod' => $this->submitMethod,
+        ]);
+    }
+}

From 09b601a012a41842f28cc383a9c6d0f670c072f4 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 12:42:26 -0400
Subject: [PATCH 27/33] Pass required to field label

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

diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 7bb28d00022..6e99d143bb3 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -104,7 +104,7 @@ function desync() {
         :disabled="isReadOnly"
     >
         <template #label>
-            <Label :for="fieldId">
+            <Label :for="fieldId" :required="isRequired">
                 {{ __(config.display) }}
                 <Tooltip :text="__('Localizable field')" v-if="isLocalizable">
                     <Icon name="globals" class="text-gray-400" />

From 5f6442e5830db1e517ab4732ea30654889bc65bf Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 13:11:11 -0400
Subject: [PATCH 28/33] Delete test component

---
 .../js/components/ui/Publish/ExampleField.vue | 44 -------------------
 1 file changed, 44 deletions(-)
 delete mode 100644 resources/js/components/ui/Publish/ExampleField.vue

diff --git a/resources/js/components/ui/Publish/ExampleField.vue b/resources/js/components/ui/Publish/ExampleField.vue
deleted file mode 100644
index f11b6ea00dd..00000000000
--- a/resources/js/components/ui/Publish/ExampleField.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup>
-import { Button, Input } from '@statamic/ui';
-import { injectContainerContext } from './Container.vue';
-import { computed } from 'vue';
-
-const context = injectContainerContext();
-const store = context.store;
-
-const props = defineProps({
-    handle: {
-        type: String,
-        required: true,
-    },
-    display: {
-        type: String,
-        default: '',
-    },
-    instructions: {
-        type: String,
-        default: '',
-    },
-});
-
-const value = computed(() => {
-    return store.values[props.handle];
-});
-
-function updateValueInStore(value) {
-    store.setFieldValue({ handle: props.handle, value });
-}
-</script>
-
-<template>
-    <div class="mb-4">
-        <Input
-            :label="display"
-            :description="instructions"
-            :model-value="value"
-            @update:model-value="updateValueInStore"
-        />
-
-        <!--        <Button @click="context.someFunction" text="Click me" />-->
-    </div>
-</template>

From 963e8b068041b2f327e1c47002531667f8cadde6 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 19 May 2025 13:11:45 -0400
Subject: [PATCH 29/33] meta

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

diff --git a/resources/js/components/fieldtypes/replicator/NewSet.vue b/resources/js/components/fieldtypes/replicator/NewSet.vue
index 83c98dbfbce..df625f09ae1 100644
--- a/resources/js/components/fieldtypes/replicator/NewSet.vue
+++ b/resources/js/components/fieldtypes/replicator/NewSet.vue
@@ -55,7 +55,7 @@ const fieldActionPayload = computed(() => ({
     config: props.config,
     // meta: this.meta,
     update: (handle, value) => store.setDottedFieldValue({ path: `${pathPrefix.value}.${handle}`, value }),
-    // updateMeta: (handle, value) => this.metaUpdated(handle, value),
+    updateMeta: (handle, value) => store.setDottedFieldMeta({ path: `${pathPrefix.value}.${handle}`, value }),
     isReadOnly: props.readOnly,
     // store: this.store,
     // storeName: this.storeName,

From 4424433fc1cef7a3d740d03bc6ff0946446d9ea8 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 20 May 2025 13:28:01 -0400
Subject: [PATCH 30/33] wip ...

- Fix/improve recursiveness in grid/rep/bard/group by passing around field/meta prefixes.
- Get rid of preview stuff in favor of getting it through the stores.
- Hook up more grid/rep/bard/group
---
 .../js/components/fieldtypes/Fieldtype.vue    |   1 +
 .../components/fieldtypes/GroupFieldtype.vue  |  17 +-
 .../fieldtypes/bard/BardFieldtype.vue         |  38 +---
 .../js/components/fieldtypes/bard/Set.vue     | 181 ++++++++++--------
 .../js/components/fieldtypes/grid/Cell.vue    |  68 +------
 .../js/components/fieldtypes/grid/Grid.vue    |   3 +-
 .../fieldtypes/grid/ManagesRowMeta.js         |   3 +-
 .../js/components/fieldtypes/grid/Row.vue     |  31 ++-
 .../js/components/fieldtypes/grid/Stacked.vue |   1 +
 .../components/fieldtypes/grid/StackedRow.vue |   4 +-
 .../js/components/fieldtypes/grid/Table.vue   |   1 +
 .../js/components/fieldtypes/grid/View.vue    |   6 +-
 .../replicator/ManagesPreviewText.js          |  18 +-
 .../fieldtypes/replicator/ManagesSetMeta.js   |   4 +-
 .../fieldtypes/replicator/NewSet.vue          |  24 ++-
 .../fieldtypes/replicator/Replicator.vue      |  31 ++-
 resources/js/components/ui/Publish/Field.vue  |  17 +-
 .../components/ui/Publish/FieldsProvider.vue  |   4 +-
 18 files changed, 187 insertions(+), 265 deletions(-)

diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index f0f7df85759..953c651e944 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -48,6 +48,7 @@ export default {
         },
         namePrefix: String,
         fieldPathPrefix: String,
+        metaPathPrefix: String,
         id: String,
     },
 
diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index ae289792f5c..24dd3602c78 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -11,7 +11,11 @@
                 </publish-field-fullscreen-header>
                 <section :class="{ 'mt-14 p-4': fullScreenMode }">
                     <div :class="{ 'replicator-set dark:border-dark-900 rounded-sm border shadow-sm': config.border }">
-                        <FieldsProvider :fields="fields" :path-prefix="pathPrefix" :meta-path-prefix="pathPrefix">
+                        <FieldsProvider
+                            :fields="fields"
+                            :field-path-prefix="fieldPathPrefix || handle"
+                            :meta-path-prefix="metaPathPrefix || handle"
+                        >
                             <Fields class="p-4" />
                         </FieldsProvider>
                     </div>
@@ -48,7 +52,6 @@ export default {
             containerWidth: null,
             focused: false,
             fullScreenMode: false,
-            previews: {},
             provide: {
                 group: this.makeGroupProvide(),
             },
@@ -56,9 +59,6 @@ export default {
     },
     inject: ['store'],
     computed: {
-        pathPrefix() {
-            return this.fieldPathPrefix || this.handle;
-        },
         values() {
             return this.value;
         },
@@ -68,6 +68,9 @@ export default {
         fields() {
             return this.config.fields;
         },
+        previews() {
+            return data_get(this.store.previews, this.fieldPathPrefix || this.handle) || {};
+        },
         replicatorPreview() {
             if (!this.showFieldPreviews || !this.config.replicator_preview) return;
 
@@ -135,10 +138,6 @@ export default {
             this.$emit('meta-updated', { ...this.meta, [handle]: value });
         },
 
-        previewUpdated(handle, value) {
-            this.previews = { ...this.previews, [handle]: value };
-        },
-
         fieldPath(handle) {
             return (this.fieldPathPrefix || this.handle) + '.' + handle;
         },
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index d482963ec13..91a8e3619a5 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -103,7 +103,7 @@
                                     >
                                         <svg-icon
                                             name="micro/plus"
-                                            class="dark:group-hover:dark-text-100 h-3 w-3 text-gray-800 group-hover:text-black dark:text-dark-175"
+                                            class="dark:group-hover:dark-text-100 dark:text-dark-175 h-3 w-3 text-gray-800 group-hover:text-black"
                                         />
                                     </button>
                                 </template>
@@ -207,7 +207,6 @@ export default {
             fullScreenMode: false,
             buttons: [],
             collapsed: this.meta.collapsed,
-            previews: this.meta.previews,
             mounted: false,
             initError: null,
             pageHeader: null,
@@ -267,14 +266,6 @@ export default {
             if (showWordCount) return wordCountText;
         },
 
-        isFirstCreation() {
-            return !this.$config.get('bard.meta').hasOwnProperty(this.id);
-        },
-
-        id() {
-            return `${this.storeName}.${this.name}`;
-        },
-
         setIndexes() {
             let indexes = {};
 
@@ -440,18 +431,6 @@ export default {
             this.updateMeta(meta);
         },
 
-        previews: {
-            deep: true,
-            handler(value) {
-                if (JSON.stringify(this.meta.previews) === JSON.stringify(value)) {
-                    return;
-                }
-                const meta = this.meta;
-                meta.previews = value;
-                this.updateMeta(meta);
-            },
-        },
-
         fullScreenMode() {
             this.initEditor();
         },
@@ -462,9 +441,6 @@ export default {
             const id = uniqid();
             const deepCopy = JSON.parse(JSON.stringify(this.meta.defaults[handle]));
             const values = Object.assign({}, { type: handle }, deepCopy);
-            let previews = {};
-            Object.keys(this.meta.defaults[handle]).forEach((key) => (previews[key] = null));
-            this.previews = Object.assign({}, this.previews, { [id]: previews });
 
             this.updateSetMeta(id, this.meta.new[handle]);
 
@@ -487,9 +463,6 @@ export default {
             const deepCopy = JSON.parse(JSON.stringify(attrs.values));
             const values = Object.assign({}, deepCopy);
 
-            let previews = Object.assign({}, this.previews[old_id]);
-            this.previews = Object.assign({}, this.previews, { [id]: previews });
-
             this.updateSetMeta(id, this.meta.existing[old_id]);
 
             // Perform this in nextTick because the meta data won't be ready until then.
@@ -504,9 +477,6 @@ export default {
             const enabled = attrs.enabled;
             const values = Object.assign({}, attrs.values);
 
-            let previews = Object.assign({}, this.previews[old_id] || {});
-            this.previews = Object.assign({}, this.previews, { [id]: previews });
-
             this.updateSetMeta(id, this.meta.existing[old_id] || this.meta.defaults[values.type] || {});
 
             return { id, enabled, values };
@@ -833,7 +803,7 @@ export default {
                 Gapcursor,
                 History,
                 Paragraph,
-                Set.configure({ bard: this }),
+                Set.configure({ bard: this, foo: 'bar' }),
                 Text,
             ];
 
@@ -899,10 +869,6 @@ export default {
             return exts;
         },
 
-        updateSetPreviews(set, previews) {
-            this.previews[set] = previews;
-        },
-
         ignorePageHeader(ignore) {
             if (this.pageHeader) {
                 this.pageHeader.style['pointer-events'] = ignore ? 'none' : 'all';
diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index 81f754044f4..54a7c9ed33c 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -1,8 +1,11 @@
 <template>
     <node-view-wrapper>
         <div
-            class="bard-set my-6 whitespace-normal rounded-sm border bg-white shadow-md dark:border-dark-900 dark:bg-dark-500"
-            :class="{ 'border-blue-400 dark:border-dark-blue-100': selected || withinSelection, 'has-error': hasError }"
+            class="shadow-ui-sm relative z-2 w-full rounded-lg border border-gray-200 bg-white text-base dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black"
+            :class="{
+                'dark:border-dark-blue-100 border-blue-400!': selected || withinSelection,
+                'border-red-500': hasError,
+            }"
             :data-type="config.handle"
             contenteditable="false"
             @copy.stop
@@ -10,41 +13,38 @@
             @cut.stop
         >
             <div ref="content" hidden />
-            <div class="replicator-set-header" :class="{ collapsed: collapsed, invalid: isInvalid }">
-                <div class="item-move sortable-handle" data-drag-handle />
-                <div
-                    class="replicator-set-header-inner flex flex-1 cursor-pointer items-center p-2"
-                    :class="{ 'flex items-center': collapsed }"
-                    @click="toggleCollapsedState"
-                >
-                    <label class="text-xs ltr:mr-2 rtl:ml-2">
+            <header
+                class="group/header animate-border-color flex items-center rounded-lg border-b border-transparent px-1.5 antialiased duration-200 hover:bg-gray-50"
+                :class="{ 'rounded-b-none border-gray-200! dark:border-white/15': !collapsed, invalid: isInvalid }"
+            >
+                <Icon data-drag-handle name="handles" class="size-4 cursor-grab text-gray-400" v-if="!isReadOnly" />
+                <button type="button" class="flex flex-1 items-center gap-4 p-2" @click="toggleCollapsedState">
+                    <Badge variant="flat" size="lg">
                         <span v-if="isSetGroupVisible">
                             {{ __(setGroup.display) }}
-                            <svg-icon name="micro/chevron-right" class="w-4" />
+                            <Icon name="ui/chevron-right" class="relative top-px size-3" />
                         </span>
-                        {{ display || config.handle }}
-                    </label>
-                    <div class="flex items-center" v-if="config.instructions && !collapsed">
-                        <svg-icon
-                            name="micro/circle-help"
-                            class="h-3 w-3 text-xs text-gray-700 hover:text-gray-800 dark:text-dark-175 dark:hover:text-dark-100"
-                            v-tooltip="{ content: $markdown(__(config.instructions)), html: true }"
-                        />
-                    </div>
-                    <div v-show="collapsed" class="w-1 min-w-0 flex-1 ltr:pr-8 rtl:pl-8">
-                        <div
-                            v-html="previewText"
-                            class="help-block mb-0 overflow-hidden text-ellipsis whitespace-nowrap"
+                        {{ __(config.display) || config.handle }}
+                    </Badge>
+                    <Tooltip :markdown="__(config.instructions)">
+                        <Icon
+                            v-if="config.instructions && !collapsed"
+                            name="info-square"
+                            class="size-3.5! text-gray-500"
                         />
-                    </div>
-                </div>
-                <div class="replicator-set-controls">
-                    <toggle-fieldtype
-                        handle="set-enabled"
-                        class="toggle-sm ltr:mr-4 rtl:ml-4"
-                        v-model:value="enabled"
-                        v-tooltip.top="enabled ? __('Included in output') : __('Hidden from output')"
+                    </Tooltip>
+                    <Subheading
+                        v-show="collapsed"
+                        v-html="previewText"
+                        class="overflow-hidden text-ellipsis whitespace-nowrap"
                     />
+                </button>
+                <div class="flex items-center gap-2" v-if="!isReadOnly">
+                    <Tooltip :text="enabled ? __('Included in output') : __('Hidden from output')">
+                        <Switch size="xs" v-model="enabled" />
+                    </Tooltip>
+
+                    <!-- @TODO: Replace with UI/Dropdown when Actions are more isolatable -->
                     <dropdown-list>
                         <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
                         <div class="divider" />
@@ -56,27 +56,24 @@
                         <dropdown-item :text="__('Delete Set')" class="warning" @click="deleteNode" />
                     </dropdown-list>
                 </div>
-            </div>
-            <div class="replicator-set-body publish-fields @container" v-show="!collapsed" v-if="index !== undefined">
-                <set-field
-                    v-for="field in fields"
-                    v-show="showField(field, fieldPath(field))"
-                    :key="field.handle"
-                    :field="field"
-                    :value="values[field.handle]"
-                    :meta="meta[field.handle]"
-                    :parent-name="parentName"
-                    :set-index="index"
-                    :field-path="fieldPath(field)"
-                    :read-only="isReadOnly"
-                    :show-field-previews="showFieldPreviews"
-                    @updated="updated(field.handle, $event)"
-                    @meta-updated="metaUpdated(field.handle, $event)"
-                    @focus="focused"
-                    @blur="blurred"
-                    @replicator-preview-updated="previewUpdated(field.handle, $event)"
-                />
-            </div>
+            </header>
+
+            <Motion
+                layout
+                v-if="index !== undefined"
+                class="overflow-hidden"
+                :initial="{ height: collapsed ? '0px' : 'auto' }"
+                :animate="{ height: collapsed ? '0px' : 'auto' }"
+                :transition="{ duration: 0.25, type: 'tween' }"
+            >
+                <FieldsProvider
+                    :fields="fields"
+                    :field-path-prefix="fieldPathPrefix"
+                    :meta-path-prefix="metaPathPrefix"
+                >
+                    <Fields class="p-4" />
+                </FieldsProvider>
+            </Motion>
         </div>
     </node-view-wrapper>
 </template>
@@ -88,6 +85,11 @@ import ManagesPreviewText from '../replicator/ManagesPreviewText';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
 import HasFieldActions from '../../field-actions/HasFieldActions.js';
 import DropdownActions from '../../field-actions/DropdownActions.vue';
+import { Badge, Icon, Subheading, Switch, Tooltip } from '@statamic/ui';
+import { Motion } from 'motion-v';
+import FieldsProvider from '@statamic/components/ui/Publish/FieldsProvider.vue';
+import Fields from '@statamic/components/ui/Publish/Fields.vue';
+import { within } from '@popperjs/core/lib/utils/within.js';
 
 export default {
     props: [
@@ -101,7 +103,19 @@ export default {
         'deleteNode', // delete the current node
     ],
 
-    components: { NodeViewWrapper, SetField, DropdownActions },
+    components: {
+        Fields,
+        FieldsProvider,
+        Switch,
+        Tooltip,
+        Subheading,
+        Badge,
+        Icon,
+        NodeViewWrapper,
+        SetField,
+        DropdownActions,
+        Motion,
+    },
 
     mixins: [ValidatesFieldConditions, ManagesPreviewText, HasFieldActions],
 
@@ -129,7 +143,7 @@ export default {
         },
 
         previews() {
-            return this.extension.options.bard.meta.previews[this.node.attrs.id] || {};
+            return data_get(this.store.previews, this.fieldPathPrefix) || {};
         },
 
         collapsed() {
@@ -177,6 +191,22 @@ export default {
             return this.extension.options.bard.setIndexes[this.node.attrs.id];
         },
 
+        fieldPathPrefix() {
+            const fpf = this.extension.options.bard.fieldPathPrefix;
+            const handle = this.extension.options.bard.handle;
+            const prefix = fpf ? `${fpf}.${handle}` : handle;
+
+            return `${prefix}.${this.index}.attrs.values`;
+        },
+
+        metaPathPrefix() {
+            const mpp = this.extension.options.bard.metaPathPrefix;
+            const handle = this.extension.options.bard.handle;
+            const prefix = mpp ? `${mpp}.${handle}` : handle;
+
+            return `${prefix}.existing.${this.node.attrs.id}`;
+        },
+
         instructions() {
             return this.config.instructions ? markdown(__(this.config.instructions)) : null;
         },
@@ -207,40 +237,28 @@ export default {
 
         fieldActionPayload() {
             return {
-                vm: this,
-                fieldVm: this.fieldVm,
-                fieldPathPrefix: this.fieldVm.fieldPathPrefix || this.fieldVm.handle,
+                // vm: this,
+                // fieldVm: this.fieldVm,
+                // fieldPathPrefix: this.fieldVm.fieldPathPrefix || this.fieldVm.handle,
                 index: this.index,
                 values: this.values,
                 config: this.config,
-                meta: this.meta,
-                update: (handle, value) => this.updated(handle, value),
-                updateMeta: (handle, value) => this.metaUpdated(handle, value),
+                // meta: this.meta,
+                update: (handle, value) =>
+                    this.store.setDottedFieldValue({ path: `${this.fieldPathPrefix}.${handle}`, value }),
+                updateMeta: (handle, value) =>
+                    this.store.setDottedFieldMeta({ path: `${this.metaPathPrefix}.${handle}`, value }),
                 isReadOnly: this.isReadOnly,
-                store: this.store,
-                storeName: this.storeName,
+                // store: this.store,
+                // storeName: this.storeName,
             };
         },
     },
 
     methods: {
-        updated(handle, value) {
-            let values = Object.assign({}, this.values);
-            values.type = this.config.handle;
-            values[handle] = value;
-            this.updateAttributes({ values });
+        within() {
+            return within;
         },
-
-        metaUpdated(handle, value) {
-            let meta = clone(this.meta);
-            meta[handle] = value;
-            this.extension.options.bard.updateSetMeta(this.node.attrs.id, meta);
-        },
-
-        previewUpdated(handle, value) {
-            this.extension.options.bard.updateSetPreviews(this.node.attrs.id, { ...this.previews, [handle]: value });
-        },
-
         focused() {
             this.extension.options.bard.$emit('focus');
         },
@@ -280,11 +298,6 @@ export default {
                 this.getPos() + this.node.nodeSize,
             );
         },
-
-        fieldPath(field) {
-            let prefix = this.extension.options.bard.fieldPathPrefix || this.extension.options.bard.handle;
-            return `${prefix}.${this.index}.attrs.values.${field.handle}`;
-        },
     },
 
     updated() {
diff --git a/resources/js/components/fieldtypes/grid/Cell.vue b/resources/js/components/fieldtypes/grid/Cell.vue
index b74a9d6e013..b0d5aba9ce9 100644
--- a/resources/js/components/fieldtypes/grid/Cell.vue
+++ b/resources/js/components/fieldtypes/grid/Cell.vue
@@ -1,69 +1,23 @@
 <template>
     <td class="grid-cell" :class="classes" :width="width">
-        <div v-show="showInner" class="@container">
-            <component
-                :is="fieldtypeComponent"
-                :config="field"
-                :value="value"
-                :meta="meta"
-                :handle="field.handle"
-                :name-prefix="namePrefix"
-                :field-path-prefix="fieldPath"
-                :read-only="grid.isReadOnly"
-                @update:value="$emit('updated', $event)"
-                @meta-updated="$emit('meta-updated', $event)"
-                @focus="$emit('focus')"
-                @blur="$emit('blur')"
-            />
-        </div>
-
-        <div v-if="hasError">
-            <small class="help-block mb-0 mt-2 text-red-500" v-for="(error, i) in errors" :key="i" v-text="error" />
-        </div>
+        <Field :config="field" />
     </td>
 </template>
 
 <script>
+import Field from '@statamic/components/ui/Publish/Field.vue';
 export default {
+    components: {
+        Field,
+    },
+
     props: {
         field: {
             type: Object,
             required: true,
         },
-        value: {
-            required: true,
-        },
-        meta: {
-            required: true,
-        },
-        index: {
-            type: Number,
-            required: true,
-        },
-        rowIndex: {
-            type: Number,
-            required: true,
-        },
-        gridName: {
-            type: String,
-            required: true,
-        },
-        showInner: {
-            type: Boolean,
-            required: true,
-        },
-        errors: {
-            type: Array,
-            required: true,
-        },
-        fieldPath: {
-            type: String,
-            required: true,
-        },
     },
 
-    inject: ['grid'],
-
     computed: {
         classes() {
             return [this.fieldtypeComponent, this.field.classes];
@@ -73,14 +27,6 @@ export default {
             return `${this.field.component || this.field.type}-fieldtype`;
         },
 
-        namePrefix() {
-            return `${this.gridName}[${this.rowIndex}]`;
-        },
-
-        hasError() {
-            return this.errors.length > 0;
-        },
-
         width() {
             if (this.field.width) {
                 return this.field.width + '%';
@@ -88,6 +34,4 @@ export default {
         },
     },
 };
-
-// TODO: Cell widths
 </script>
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index ef0ce156644..2b265ab2122 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -3,7 +3,7 @@
         <element-container @resized="containerWidth = $event.width">
             <div
                 class="grid-fieldtype-container"
-                :class="{ 'grid-fullscreen bg-white dark:bg-dark-600': fullScreenMode }"
+                :class="{ 'grid-fullscreen dark:bg-dark-600 bg-white': fullScreenMode }"
             >
                 <publish-field-fullscreen-header
                     v-if="fullScreenMode"
@@ -229,6 +229,7 @@ export default {
                 isReadOnly: { get: () => this.isReadOnly },
                 handle: { get: () => this.handle },
                 fieldPathPrefix: { get: () => this.fieldPathPrefix },
+                metaPathPrefix: { get: () => this.metaPathPrefix },
                 fullScreenMode: { get: () => this.fullScreenMode },
                 toggleFullScreen: { get: () => this.toggleFullScreen },
             });
diff --git a/resources/js/components/fieldtypes/grid/ManagesRowMeta.js b/resources/js/components/fieldtypes/grid/ManagesRowMeta.js
index fd689973120..9910fd27ae6 100644
--- a/resources/js/components/fieldtypes/grid/ManagesRowMeta.js
+++ b/resources/js/components/fieldtypes/grid/ManagesRowMeta.js
@@ -1,13 +1,12 @@
 export default {
     methods: {
-        updateRowMeta(row, value, previews) {
+        updateRowMeta(row, value) {
             this.updateMeta({
                 ...this.meta,
                 existing: {
                     ...this.meta.existing,
                     [row]: clone(value),
                 },
-                previews: previews ? { ...this.meta.previews, [row]: previews } : this.meta.previews,
             });
         },
 
diff --git a/resources/js/components/fieldtypes/grid/Row.vue b/resources/js/components/fieldtypes/grid/Row.vue
index c066d11a294..5a6dd269438 100644
--- a/resources/js/components/fieldtypes/grid/Row.vue
+++ b/resources/js/components/fieldtypes/grid/Row.vue
@@ -1,23 +1,14 @@
 <template>
     <tr :class="[sortableItemClass, { 'opacity-50': isExcessive }]">
         <td class="drag-handle" :class="sortableHandleClass" v-if="grid.isReorderable"></td>
-        <grid-cell
-            v-for="(field, i) in fields"
-            :show-inner="showField(field, fieldPath(field.handle))"
-            :key="field.handle"
-            :field="field"
-            :value="values[field.handle]"
-            :meta="meta[field.handle]"
-            :index="i"
-            :row-index="index"
-            :grid-name="name"
-            :errors="errors(field.handle)"
-            :field-path="fieldPath(field.handle)"
-            @updated="updated(field.handle, $event)"
-            @meta-updated="metaUpdated(field.handle, $event)"
-            @focus="$emit('focus')"
-            @blur="$emit('blur')"
-        />
+
+        <FieldsProvider
+            :fields="fields"
+            :field-path-prefix="`${fieldPathPrefix}.${index}`"
+            :meta-path-prefix="`${metaPathPrefix}.existing.${values._id}`"
+        >
+            <grid-cell v-for="(field, i) in fields" :key="field.handle" :field="field" />
+        </FieldsProvider>
 
         <td class="grid-row-controls row-controls" v-if="!grid.isReadOnly && (canAddRows || canDelete)">
             <dropdown-list>
@@ -42,9 +33,10 @@
 <script>
 import GridCell from './Cell.vue';
 import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
+import FieldsProvider from '@statamic/components/ui/Publish/FieldsProvider.vue';
 
 export default {
-    components: { GridCell },
+    components: { FieldsProvider, GridCell },
 
     mixins: [ValidatesFieldConditions],
 
@@ -72,6 +64,9 @@ export default {
         fieldPathPrefix: {
             type: String,
         },
+        metaPathPrefix: {
+            type: String,
+        },
         canDelete: {
             type: Boolean,
             default: true,
diff --git a/resources/js/components/fieldtypes/grid/Stacked.vue b/resources/js/components/fieldtypes/grid/Stacked.vue
index 3ef2fb16cda..7e7881c7663 100644
--- a/resources/js/components/fieldtypes/grid/Stacked.vue
+++ b/resources/js/components/fieldtypes/grid/Stacked.vue
@@ -29,6 +29,7 @@
                     :meta="meta[row._id]"
                     :name="name"
                     :field-path-prefix="fieldPathPrefix"
+                    :meta-path-prefix="metaPathPrefix"
                     :can-delete="canDeleteRows"
                     :can-add-rows="canAddRows"
                     @updated="(row, value) => $emit('updated', row, value)"
diff --git a/resources/js/components/fieldtypes/grid/StackedRow.vue b/resources/js/components/fieldtypes/grid/StackedRow.vue
index aa5e6bb5990..d2ad6081616 100644
--- a/resources/js/components/fieldtypes/grid/StackedRow.vue
+++ b/resources/js/components/fieldtypes/grid/StackedRow.vue
@@ -27,8 +27,8 @@
 
         <FieldsProvider
             :fields="fields"
-            :path-prefix="`${fieldPathPrefix}.${index}`"
-            :meta-path-prefix="`${fieldPathPrefix}.existing.${values._id}`"
+            :field-path-prefix="`${fieldPathPrefix}.${index}`"
+            :meta-path-prefix="`${metaPathPrefix}.existing.${values._id}`"
         >
             <PublishFields />
         </FieldsProvider>
diff --git a/resources/js/components/fieldtypes/grid/Table.vue b/resources/js/components/fieldtypes/grid/Table.vue
index b8cb4d08393..611c4597e06 100644
--- a/resources/js/components/fieldtypes/grid/Table.vue
+++ b/resources/js/components/fieldtypes/grid/Table.vue
@@ -28,6 +28,7 @@
                     :meta="meta[row._id]"
                     :name="name"
                     :field-path-prefix="fieldPathPrefix"
+                    :meta-path-prefix="metaPathPrefix"
                     :can-delete="canDeleteRows"
                     :can-add-rows="canAddRows"
                     @updated="(row, value) => $emit('updated', row, value)"
diff --git a/resources/js/components/fieldtypes/grid/View.vue b/resources/js/components/fieldtypes/grid/View.vue
index 1f94f0747d5..b298a1397a6 100644
--- a/resources/js/components/fieldtypes/grid/View.vue
+++ b/resources/js/components/fieldtypes/grid/View.vue
@@ -14,7 +14,11 @@ export default {
         },
 
         fieldPathPrefix() {
-            return this.grid.fieldPathPrefix || this.grid.handle;
+            return this.grid.fieldPathPrefix ? `${this.grid.fieldPathPrefix}.${this.grid.handle}` : this.grid.handle;
+        },
+
+        metaPathPrefix() {
+            return this.grid.metaPathPrefix ? `${this.grid.metaPathPrefix}.${this.grid.handle}` : this.grid.handle;
         },
     },
 
diff --git a/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js b/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
index 18be6ac019b..98688c2170b 100644
--- a/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
+++ b/resources/js/components/fieldtypes/replicator/ManagesPreviewText.js
@@ -3,17 +3,15 @@ import PreviewHtml from './PreviewHtml';
 export default {
     computed: {
         previewText() {
-            const previews = Object.entries(this.previews).filter(([handle, value]) => {
-                const config = this.config.fields.find((f) => f.handle === handle) || {};
-                return config.replicator_preview === undefined ? this.showFieldPreviews : config.replicator_preview;
-            });
-
-            return previews
-                .map(([handle, value]) => value)
-                .filter((value) => {
-                    if (['null', '[]', '{}', ''].includes(JSON.stringify(value))) return null;
-                    return value;
+            return Object.entries(this.previews)
+                .filter(([handle, value]) => {
+                    if (!handle.endsWith('_')) return false;
+                    handle = handle.substr(0, handle.length - 1); // Remove the trailing underscore.
+                    const config = this.config.fields.find((f) => f.handle === handle) || {};
+                    return config.replicator_preview === undefined ? this.showFieldPreviews : config.replicator_preview;
                 })
+                .map(([handle, value]) => value)
+                .filter((value) => (['null', '[]', '{}', ''].includes(JSON.stringify(value)) ? null : value))
                 .map((value) => {
                     if (value instanceof PreviewHtml) return value.html;
 
diff --git a/resources/js/components/fieldtypes/replicator/ManagesSetMeta.js b/resources/js/components/fieldtypes/replicator/ManagesSetMeta.js
index 87b1b4b1642..b62221d9435 100644
--- a/resources/js/components/fieldtypes/replicator/ManagesSetMeta.js
+++ b/resources/js/components/fieldtypes/replicator/ManagesSetMeta.js
@@ -4,8 +4,8 @@ export default {
     mixins: [ManagesRowMeta],
 
     methods: {
-        updateSetMeta(set, value, previews) {
-            this.updateRowMeta(set, value, previews);
+        updateSetMeta(set, value) {
+            this.updateRowMeta(set, value);
         },
 
         removeSetMeta(set) {
diff --git a/resources/js/components/fieldtypes/replicator/NewSet.vue b/resources/js/components/fieldtypes/replicator/NewSet.vue
index df625f09ae1..64f83c377ae 100644
--- a/resources/js/components/fieldtypes/replicator/NewSet.vue
+++ b/resources/js/components/fieldtypes/replicator/NewSet.vue
@@ -16,7 +16,8 @@ const replicatorSets = inject('replicatorSets');
 const props = defineProps({
     config: Object,
     id: String,
-    path: String,
+    fieldPath: String,
+    metaPath: String,
     index: Number,
     collapsed: Boolean,
     values: Object,
@@ -30,8 +31,8 @@ const props = defineProps({
 });
 
 const { store } = injectContainerContext();
-const pathPrefix = computed(() => `${props.path}.${props.index}`);
-const metaPathPrefix = computed(() => `${props.path}.existing.${props.id}`);
+const fieldPathPrefix = computed(() => `${props.fieldPath}.${props.index}`);
+const metaPathPrefix = computed(() => `${props.metaPath}.existing.${props.id}`);
 const isInvalid = computed(() => Object.keys(props.config).length === 0);
 
 const setGroup = computed(() => {
@@ -54,8 +55,8 @@ const fieldActionPayload = computed(() => ({
     values: props.values,
     config: props.config,
     // meta: this.meta,
-    update: (handle, value) => store.setDottedFieldValue({ path: `${pathPrefix.value}.${handle}`, value }),
-    updateMeta: (handle, value) => store.setDottedFieldMeta({ path: `${pathPrefix.value}.${handle}`, value }),
+    update: (handle, value) => store.setDottedFieldValue({ path: `${fieldPathPrefix.value}.${handle}`, value }),
+    updateMeta: (handle, value) => store.setDottedFieldMeta({ path: `${metaPathPrefix.value}.${handle}`, value }),
     isReadOnly: props.readOnly,
     // store: this.store,
     // storeName: this.storeName,
@@ -68,8 +69,9 @@ const fieldActions = computed(() => {
 });
 
 const previewText = computed(() => {
-    return Object.entries(data_get(store.previews, pathPrefix.value) || {})
+    return Object.entries(data_get(store.previews, fieldPathPrefix.value) || {})
         .filter(([handle, value]) => {
+            if (!handle.endsWith('_')) return false;
             handle = handle.substr(0, handle.length - 1); // Remove the trailing underscore.
             const config = props.config.fields.find((f) => f.handle === handle) || {};
             return config.replicator_preview === undefined ? props.showFieldPreviews : config.replicator_preview;
@@ -91,7 +93,7 @@ const previewText = computed(() => {
 });
 
 function toggleEnabledState() {
-    store.setDottedFieldValue({ path: `${pathPrefix.value}.enabled`, value: !props.enabled });
+    store.setDottedFieldValue({ path: `${fieldPathPrefix.value}.enabled`, value: !props.enabled });
 }
 
 function toggleCollapsedState() {
@@ -131,7 +133,7 @@ function destroy() {
                             {{ __(setGroup.display) }}
                             <Icon name="ui/chevron-right" class="relative top-px size-3" />
                         </span>
-                        {{ __(props.config.display) || config.handle }}
+                        {{ __(config.display) || config.handle }}
                     </Badge>
                     <Tooltip :markdown="__(config.instructions)">
                         <Icon
@@ -172,7 +174,11 @@ function destroy() {
                 :animate="{ height: collapsed ? '0px' : 'auto' }"
                 :transition="{ duration: 0.25, type: 'tween' }"
             >
-                <FieldsProvider :fields="config.fields" :path-prefix="pathPrefix" :meta-path-prefix="metaPathPrefix">
+                <FieldsProvider
+                    :fields="config.fields"
+                    :field-path-prefix="fieldPathPrefix"
+                    :meta-path-prefix="metaPathPrefix"
+                >
                     <Fields class="p-4" />
                 </FieldsProvider>
             </Motion>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 684c7a1a804..51626654bee 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -30,12 +30,13 @@
                             v-slot="{}"
                         >
                             <div class="relative">
-                                <NewReplicatorSet
+                                <ReplicatorSet
                                     v-for="(set, index) in value"
                                     :key="set._id"
                                     :id="set._id"
                                     :index
-                                    :path="setPathPrefix"
+                                    :field-path="setFieldPathPrefix"
+                                    :meta-path="setMetaPathPrefix"
                                     :values="set"
                                     :config="setConfig(set.type)"
                                     :sortable-item-class="sortableItemClass"
@@ -62,7 +63,7 @@
                                             @added="addSet"
                                         />
                                     </template>
-                                </NewReplicatorSet>
+                                </ReplicatorSet>
                             </div>
                         </sortable-list>
 
@@ -85,8 +86,7 @@
 <script>
 import Fieldtype from '../Fieldtype.vue';
 import uniqid from 'uniqid';
-import ReplicatorSet from './Set.vue';
-import NewReplicatorSet from './NewSet.vue';
+import ReplicatorSet from './NewSet.vue';
 import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
@@ -96,7 +96,6 @@ export default {
 
     components: {
         ReplicatorSet,
-        NewReplicatorSet,
         SortableList,
         AddSetButton,
     },
@@ -116,10 +115,14 @@ export default {
     },
 
     computed: {
-        setPathPrefix() {
+        setFieldPathPrefix() {
             return this.fieldPathPrefix ? `${this.fieldPathPrefix}.${this.handle}` : this.handle;
         },
 
+        setMetaPathPrefix() {
+            return this.metaPathPrefix ? `${this.metaPathPrefix}.${this.handle}` : this.handle;
+        },
+
         canAddSet() {
             if (this.isReadOnly) return false;
 
@@ -208,7 +211,7 @@ export default {
                 enabled: true,
             };
 
-            this.updateSetMeta(set._id, this.meta.new[handle], {});
+            this.updateSetMeta(set._id, this.meta.new[handle]);
 
             this.update([...this.value.slice(0, index), set, ...this.value.slice(index)]);
 
@@ -223,23 +226,13 @@ export default {
                 _id: uniqid(),
             };
 
-            this.updateSetMeta(set._id, this.meta.existing[old_id], {});
+            this.updateSetMeta(set._id, this.meta.existing[old_id]);
 
             this.update([...this.value.slice(0, index + 1), set, ...this.value.slice(index + 1)]);
 
             this.expandSet(set._id);
         },
 
-        updateSetPreviews(id, previews) {
-            this.updateMeta({
-                ...this.meta,
-                previews: {
-                    ...this.meta.previews,
-                    [id]: previews,
-                },
-            });
-        },
-
         collapseSet(id) {
             if (!this.collapsed.includes(id)) {
                 this.collapsed.push(id);
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 6e99d143bb3..0bd9c2a41a7 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -13,20 +13,21 @@ const props = defineProps({
 });
 
 const { store, syncField, desyncField } = injectContainerContext();
-const { pathPrefix, metaPathPrefix } = injectFieldsContext();
+const { fieldPathPrefix, metaPathPrefix } = injectFieldsContext();
 const handle = props.config.handle;
 
 const fieldtypeComponent = computed(() => {
     return `${props.config.component || props.config.type}-fieldtype`;
 });
 
-const fullPath = computed(() => [pathPrefix, handle].filter(Boolean).join('.'));
+const fullPath = computed(() => [fieldPathPrefix, handle].filter(Boolean).join('.'));
+const metaFullPath = computed(() => [metaPathPrefix, handle].filter(Boolean).join('.'));
 const value = computed(() => data_get(store.values, fullPath.value));
 const meta = computed(() => {
     const key = [metaPathPrefix, handle].filter(Boolean).join('.');
     return data_get(store.meta, key);
 });
-const errors = computed(() => data_get(store.errors, fullPath.value));
+const errors = computed(() => store.errors[fullPath.value]);
 const fieldId = computed(() => `field_${fullPath.value.replaceAll('.', '_')}`);
 const namePrefix = '';
 const isRequired = computed(() => props.config.required);
@@ -44,7 +45,7 @@ function valueUpdated(value) {
 }
 
 function metaUpdated(value) {
-    store.setDottedFieldMeta({ path: fullPath.value, value });
+    store.setDottedFieldMeta({ path: metaFullPath.value, value });
 }
 
 function replicatorPreviewUpdated(value) {
@@ -60,11 +61,11 @@ function blurred() {
 }
 
 const values = computed(() => {
-    return pathPrefix ? data_get(store.values, pathPrefix) : store.values;
+    return fieldPathPrefix ? data_get(store.values, fieldPathPrefix) : store.values;
 });
 
 const extraValues = computed(() => {
-    return pathPrefix ? data_get(store.extraValues, pathPrefix) : store.extraValues;
+    return fieldPathPrefix ? data_get(store.extraValues, fieldPathPrefix) : store.extraValues;
 });
 
 const shouldShowField = computed(() => {
@@ -80,7 +81,6 @@ const isReadOnly = computed(() => {
 });
 
 const isLocked = computed(() => false); // todo
-
 const isSyncable = computed(() => store.isRoot === false);
 const isSynced = computed(() => isSyncable.value && !store.localizedFields.includes(fullPath.value));
 
@@ -133,7 +133,8 @@ function desync() {
             :meta="meta"
             :handle="handle"
             :name-prefix="namePrefix"
-            :field-path-prefix="pathPrefix"
+            :field-path-prefix="fieldPathPrefix"
+            :meta-path-prefix="metaPathPrefix"
             :read-only="isReadOnly"
             show-field-previews
             @update:value="valueUpdated"
diff --git a/resources/js/components/ui/Publish/FieldsProvider.vue b/resources/js/components/ui/Publish/FieldsProvider.vue
index b15b39b0761..ae64fdabb80 100644
--- a/resources/js/components/ui/Publish/FieldsProvider.vue
+++ b/resources/js/components/ui/Publish/FieldsProvider.vue
@@ -10,7 +10,7 @@ const props = defineProps({
         type: Array,
         required: true,
     },
-    pathPrefix: {
+    fieldPathPrefix: {
         type: String,
     },
     metaPathPrefix: {
@@ -21,7 +21,7 @@ const props = defineProps({
 
 provideFieldsContext({
     fields: props.fields,
-    pathPrefix: props.pathPrefix,
+    fieldPathPrefix: props.fieldPathPrefix,
     metaPathPrefix: props.metaPathPrefix,
 });
 </script>

From 7e03472658cc3c72a68347bd41bf0a084849d21d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 20 May 2025 13:28:56 -0400
Subject: [PATCH 31/33] Rename NewSet back to Set

---
 .../fieldtypes/replicator/NewSet.vue          | 187 ----------
 .../fieldtypes/replicator/Replicator.vue      |   2 +-
 .../components/fieldtypes/replicator/Set.vue  | 352 ++++++++----------
 3 files changed, 150 insertions(+), 391 deletions(-)
 delete mode 100644 resources/js/components/fieldtypes/replicator/NewSet.vue

diff --git a/resources/js/components/fieldtypes/replicator/NewSet.vue b/resources/js/components/fieldtypes/replicator/NewSet.vue
deleted file mode 100644
index 64f83c377ae..00000000000
--- a/resources/js/components/fieldtypes/replicator/NewSet.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script setup>
-import Fields from '@statamic/components/ui/Publish/Fields.vue';
-import FieldsProvider from '@statamic/components/ui/Publish/FieldsProvider.vue';
-import { computed, inject } from 'vue';
-import { Icon, Switch, Subheading, Badge, Tooltip } from '@statamic/ui';
-import DropdownActions from '@statamic/components/field-actions/DropdownActions.vue';
-import { Motion } from 'motion-v';
-import { injectContainerContext } from '@statamic/components/ui/Publish/Container.vue';
-import PreviewHtml from '@statamic/components/fieldtypes/replicator/PreviewHtml.js';
-import FieldAction from '@statamic/components/field-actions/FieldAction.js';
-
-const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'removed']);
-
-const replicatorSets = inject('replicatorSets');
-
-const props = defineProps({
-    config: Object,
-    id: String,
-    fieldPath: String,
-    metaPath: String,
-    index: Number,
-    collapsed: Boolean,
-    values: Object,
-    sortableItemClass: String,
-    sortableHandleClass: String,
-    readOnly: Boolean,
-    enabled: Boolean,
-    hasError: Boolean,
-    canAddSet: Boolean,
-    showFieldPreviews: Boolean,
-});
-
-const { store } = injectContainerContext();
-const fieldPathPrefix = computed(() => `${props.fieldPath}.${props.index}`);
-const metaPathPrefix = computed(() => `${props.metaPath}.existing.${props.id}`);
-const isInvalid = computed(() => Object.keys(props.config).length === 0);
-
-const setGroup = computed(() => {
-    if (replicatorSets.length < 1) return null;
-
-    return (
-        replicatorSets.find((group) => {
-            return group.sets.filter((set) => set.handle === props.config.handle).length > 0;
-        }) ?? {}
-    );
-});
-
-const isSetGroupVisible = computed(() => replicatorSets.length > 1 && setGroup.value.display);
-
-const fieldActionPayload = computed(() => ({
-    // vm: this,
-    // fieldVm: this.fieldVm,
-    // fieldPathPrefix: this.fieldPathPrefix,
-    index: props.index,
-    values: props.values,
-    config: props.config,
-    // meta: this.meta,
-    update: (handle, value) => store.setDottedFieldValue({ path: `${fieldPathPrefix.value}.${handle}`, value }),
-    updateMeta: (handle, value) => store.setDottedFieldMeta({ path: `${metaPathPrefix.value}.${handle}`, value }),
-    isReadOnly: props.readOnly,
-    // store: this.store,
-    // storeName: this.storeName,
-}));
-
-const fieldActions = computed(() => {
-    return [...Statamic.$fieldActions.get('replicator-fieldtype-set')]
-        .map((action) => new FieldAction(action, fieldActionPayload.value))
-        .filter((action) => action.visible);
-});
-
-const previewText = computed(() => {
-    return Object.entries(data_get(store.previews, fieldPathPrefix.value) || {})
-        .filter(([handle, value]) => {
-            if (!handle.endsWith('_')) return false;
-            handle = handle.substr(0, handle.length - 1); // Remove the trailing underscore.
-            const config = props.config.fields.find((f) => f.handle === handle) || {};
-            return config.replicator_preview === undefined ? props.showFieldPreviews : config.replicator_preview;
-        })
-        .map(([handle, value]) => value)
-        .filter((value) => (['null', '[]', '{}', ''].includes(JSON.stringify(value)) ? null : value))
-        .map((value) => {
-            if (value instanceof PreviewHtml) return value.html;
-
-            if (typeof value === 'string') return escapeHtml(value);
-
-            if (Array.isArray(value) && typeof value[0] === 'string') {
-                return escapeHtml(value.join(', '));
-            }
-
-            return escapeHtml(JSON.stringify(value));
-        })
-        .join(' / ');
-});
-
-function toggleEnabledState() {
-    store.setDottedFieldValue({ path: `${fieldPathPrefix.value}.enabled`, value: !props.enabled });
-}
-
-function toggleCollapsedState() {
-    props.collapsed ? emit('expanded') : emit('collapsed');
-}
-
-function destroy() {
-    if (confirm(__('Are you sure?'))) emit('removed');
-}
-</script>
-
-<template>
-    <div :class="sortableItemClass">
-        <slot name="picker" />
-        <div
-            layout
-            class="shadow-ui-sm relative z-2 w-full rounded-lg border border-gray-200 bg-white text-base dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black"
-            :data-collapsed="collapsed ?? undefined"
-            :data-error="hasError ?? undefined"
-            :data-invalid="isInvalid ?? undefined"
-            :data-readonly="readOnly ?? undefined"
-            :data-type="config.handle"
-        >
-            <header
-                class="group/header animate-border-color flex items-center rounded-lg border-b border-transparent px-1.5 antialiased duration-200 hover:bg-gray-50"
-                :class="{ 'rounded-b-none border-gray-200! dark:border-white/15': !collapsed }"
-            >
-                <Icon
-                    name="handles"
-                    :class="sortableHandleClass"
-                    class="size-4 cursor-grab text-gray-400"
-                    v-if="!readOnly"
-                />
-                <button type="button" class="flex flex-1 items-center gap-4 p-2" @click="toggleCollapsedState">
-                    <Badge variant="flat" size="lg">
-                        <span v-if="isSetGroupVisible">
-                            {{ __(setGroup.display) }}
-                            <Icon name="ui/chevron-right" class="relative top-px size-3" />
-                        </span>
-                        {{ __(config.display) || config.handle }}
-                    </Badge>
-                    <Tooltip :markdown="__(config.instructions)">
-                        <Icon
-                            v-if="config.instructions && !collapsed"
-                            name="info-square"
-                            class="size-3.5! text-gray-500"
-                        />
-                    </Tooltip>
-                    <Subheading
-                        v-show="collapsed"
-                        v-html="previewText"
-                        class="overflow-hidden text-ellipsis whitespace-nowrap"
-                    />
-                </button>
-                <div class="flex items-center gap-2" v-if="!readOnly">
-                    <Tooltip :text="enabled ? __('Included in output') : __('Hidden from output')">
-                        <Switch size="xs" :model-value="enabled" @update:model-value="toggleEnabledState" />
-                    </Tooltip>
-
-                    <!-- @TODO: Replace with UI/Dropdown when Actions are more isolatable -->
-                    <dropdown-list>
-                        <dropdown-actions :actions="fieldActions" v-if="fieldActions.length" />
-                        <div class="divider" />
-                        <dropdown-item
-                            :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))"
-                            @click="toggleCollapsedState"
-                        />
-                        <dropdown-item :text="__('Duplicate Set')" @click="emit('duplicated')" v-if="canAddSet" />
-                        <dropdown-item :text="__('Delete Set')" class="warning" @click="destroy" />
-                    </dropdown-list>
-                </div>
-            </header>
-
-            <Motion
-                layout
-                class="overflow-hidden"
-                :initial="{ height: collapsed ? '0px' : 'auto' }"
-                :animate="{ height: collapsed ? '0px' : 'auto' }"
-                :transition="{ duration: 0.25, type: 'tween' }"
-            >
-                <FieldsProvider
-                    :fields="config.fields"
-                    :field-path-prefix="fieldPathPrefix"
-                    :meta-path-prefix="metaPathPrefix"
-                >
-                    <Fields class="p-4" />
-                </FieldsProvider>
-            </Motion>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index 51626654bee..625331a5ebd 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -86,7 +86,7 @@
 <script>
 import Fieldtype from '../Fieldtype.vue';
 import uniqid from 'uniqid';
-import ReplicatorSet from './NewSet.vue';
+import ReplicatorSet from './Set.vue';
 import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 01ac731b58a..64f83c377ae 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -1,43 +1,157 @@
+<script setup>
+import Fields from '@statamic/components/ui/Publish/Fields.vue';
+import FieldsProvider from '@statamic/components/ui/Publish/FieldsProvider.vue';
+import { computed, inject } from 'vue';
+import { Icon, Switch, Subheading, Badge, Tooltip } from '@statamic/ui';
+import DropdownActions from '@statamic/components/field-actions/DropdownActions.vue';
+import { Motion } from 'motion-v';
+import { injectContainerContext } from '@statamic/components/ui/Publish/Container.vue';
+import PreviewHtml from '@statamic/components/fieldtypes/replicator/PreviewHtml.js';
+import FieldAction from '@statamic/components/field-actions/FieldAction.js';
+
+const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'removed']);
+
+const replicatorSets = inject('replicatorSets');
+
+const props = defineProps({
+    config: Object,
+    id: String,
+    fieldPath: String,
+    metaPath: String,
+    index: Number,
+    collapsed: Boolean,
+    values: Object,
+    sortableItemClass: String,
+    sortableHandleClass: String,
+    readOnly: Boolean,
+    enabled: Boolean,
+    hasError: Boolean,
+    canAddSet: Boolean,
+    showFieldPreviews: Boolean,
+});
+
+const { store } = injectContainerContext();
+const fieldPathPrefix = computed(() => `${props.fieldPath}.${props.index}`);
+const metaPathPrefix = computed(() => `${props.metaPath}.existing.${props.id}`);
+const isInvalid = computed(() => Object.keys(props.config).length === 0);
+
+const setGroup = computed(() => {
+    if (replicatorSets.length < 1) return null;
+
+    return (
+        replicatorSets.find((group) => {
+            return group.sets.filter((set) => set.handle === props.config.handle).length > 0;
+        }) ?? {}
+    );
+});
+
+const isSetGroupVisible = computed(() => replicatorSets.length > 1 && setGroup.value.display);
+
+const fieldActionPayload = computed(() => ({
+    // vm: this,
+    // fieldVm: this.fieldVm,
+    // fieldPathPrefix: this.fieldPathPrefix,
+    index: props.index,
+    values: props.values,
+    config: props.config,
+    // meta: this.meta,
+    update: (handle, value) => store.setDottedFieldValue({ path: `${fieldPathPrefix.value}.${handle}`, value }),
+    updateMeta: (handle, value) => store.setDottedFieldMeta({ path: `${metaPathPrefix.value}.${handle}`, value }),
+    isReadOnly: props.readOnly,
+    // store: this.store,
+    // storeName: this.storeName,
+}));
+
+const fieldActions = computed(() => {
+    return [...Statamic.$fieldActions.get('replicator-fieldtype-set')]
+        .map((action) => new FieldAction(action, fieldActionPayload.value))
+        .filter((action) => action.visible);
+});
+
+const previewText = computed(() => {
+    return Object.entries(data_get(store.previews, fieldPathPrefix.value) || {})
+        .filter(([handle, value]) => {
+            if (!handle.endsWith('_')) return false;
+            handle = handle.substr(0, handle.length - 1); // Remove the trailing underscore.
+            const config = props.config.fields.find((f) => f.handle === handle) || {};
+            return config.replicator_preview === undefined ? props.showFieldPreviews : config.replicator_preview;
+        })
+        .map(([handle, value]) => value)
+        .filter((value) => (['null', '[]', '{}', ''].includes(JSON.stringify(value)) ? null : value))
+        .map((value) => {
+            if (value instanceof PreviewHtml) return value.html;
+
+            if (typeof value === 'string') return escapeHtml(value);
+
+            if (Array.isArray(value) && typeof value[0] === 'string') {
+                return escapeHtml(value.join(', '));
+            }
+
+            return escapeHtml(JSON.stringify(value));
+        })
+        .join(' / ');
+});
+
+function toggleEnabledState() {
+    store.setDottedFieldValue({ path: `${fieldPathPrefix.value}.enabled`, value: !props.enabled });
+}
+
+function toggleCollapsedState() {
+    props.collapsed ? emit('expanded') : emit('collapsed');
+}
+
+function destroy() {
+    if (confirm(__('Are you sure?'))) emit('removed');
+}
+</script>
+
 <template>
     <div :class="sortableItemClass">
         <slot name="picker" />
-        <div layout class="w-full bg-white relative z-2 dark:bg-gray-900 border border-gray-200 dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:inset-shadow-2xs dark:inset-shadow-black shadow-ui-sm text-base rounded-lg"
+        <div
+            layout
+            class="shadow-ui-sm relative z-2 w-full rounded-lg border border-gray-200 bg-white text-base dark:border-x-0 dark:border-t-0 dark:border-white/15 dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black"
             :data-collapsed="collapsed ?? undefined"
-            :data-error="this.hasError ?? undefined"
+            :data-error="hasError ?? undefined"
             :data-invalid="isInvalid ?? undefined"
-            :data-readonly="isReadOnly ?? undefined"
+            :data-readonly="readOnly ?? undefined"
             :data-type="config.handle"
         >
-            <header class="flex items-center px-1.5 antialiased group/header hover:bg-gray-50 border-b border-transparent animate-border-color duration-200 rounded-lg" :class="{ 'border-gray-200! rounded-b-none dark:border-white/15': !collapsed }">
-                <Icon name="handles" class="item-move cursor-grab sortable-handle size-4 text-gray-400" v-if="!isReadOnly" />
-                <button type="button" class="p-2 flex flex-1 items-center gap-4" @click="toggleCollapsedState">
-                    <ui-badge variant="flat" size="lg">
+            <header
+                class="group/header animate-border-color flex items-center rounded-lg border-b border-transparent px-1.5 antialiased duration-200 hover:bg-gray-50"
+                :class="{ 'rounded-b-none border-gray-200! dark:border-white/15': !collapsed }"
+            >
+                <Icon
+                    name="handles"
+                    :class="sortableHandleClass"
+                    class="size-4 cursor-grab text-gray-400"
+                    v-if="!readOnly"
+                />
+                <button type="button" class="flex flex-1 items-center gap-4 p-2" @click="toggleCollapsedState">
+                    <Badge variant="flat" size="lg">
                         <span v-if="isSetGroupVisible">
                             {{ __(setGroup.display) }}
-                            <Icon name="ui/chevron-right" class="size-3 relative top-px" />
+                            <Icon name="ui/chevron-right" class="relative top-px size-3" />
                         </span>
-                        {{ display || config.handle }}
-                    </ui-badge>
-                    <Icon
-                        v-if="config.instructions && !collapsed"
-                        name="info-square"
-                        class="size-3.5! text-gray-500"
-                        v-tooltip="{ content: $markdown(__(config.instructions)), html: true }"
-                    />
-                    <ui-subheading
+                        {{ __(config.display) || config.handle }}
+                    </Badge>
+                    <Tooltip :markdown="__(config.instructions)">
+                        <Icon
+                            v-if="config.instructions && !collapsed"
+                            name="info-square"
+                            class="size-3.5! text-gray-500"
+                        />
+                    </Tooltip>
+                    <Subheading
                         v-show="collapsed"
                         v-html="previewText"
                         class="overflow-hidden text-ellipsis whitespace-nowrap"
                     />
                 </button>
-                <div class="flex items-center gap-2" v-if="!isReadOnly">
-                    <ui-tooltip :text="values.enabled ? __('Included in output') : __('Hidden from output')">
-                        <Switch
-                            size="xs"
-                            @update:model-value="toggleEnabledState"
-                            :model-value="values.enabled"
-                        />
-                    </ui-tooltip>
+                <div class="flex items-center gap-2" v-if="!readOnly">
+                    <Tooltip :text="enabled ? __('Included in output') : __('Hidden from output')">
+                        <Switch size="xs" :model-value="enabled" @update:model-value="toggleEnabledState" />
+                    </Tooltip>
 
                     <!-- @TODO: Replace with UI/Dropdown when Actions are more isolatable -->
                     <dropdown-list>
@@ -47,7 +161,7 @@
                             :text="__(collapsed ? __('Expand Set') : __('Collapse Set'))"
                             @click="toggleCollapsedState"
                         />
-                        <dropdown-item :text="__('Duplicate Set')" @click="duplicate" v-if="canAddSet" />
+                        <dropdown-item :text="__('Duplicate Set')" @click="emit('duplicated')" v-if="canAddSet" />
                         <dropdown-item :text="__('Delete Set')" class="warning" @click="destroy" />
                     </dropdown-list>
                 </div>
@@ -55,187 +169,19 @@
 
             <Motion
                 layout
-                class="publish-fields overflow-hidden @container"
+                class="overflow-hidden"
                 :initial="{ height: collapsed ? '0px' : 'auto' }"
                 :animate="{ height: collapsed ? '0px' : 'auto' }"
-                :transition="{ duration: .25, type: 'tween' }"
+                :transition="{ duration: 0.25, type: 'tween' }"
             >
-                <set-field
-                    v-for="field in fields"
-                    v-show="showField(field, fieldPath(field))"
-                    :key="field.handle"
-                    :field="field"
-                    :meta="meta[field.handle]"
-                    :value="values[field.handle]"
-                    :parent-name="parentName"
-                    :set-index="index"
-                    :field-path="fieldPath(field)"
-                    :read-only="isReadOnly"
-                    :show-field-previews="showFieldPreviews"
-                    @updated="updated(field.handle, $event)"
-                    @meta-updated="metaUpdated(field.handle, $event)"
-                    @focus="$emit('focus')"
-                    @blur="$emit('blur')"
-                    @replicator-preview-updated="previewUpdated(field.handle, $event)"
-                />
+                <FieldsProvider
+                    :fields="config.fields"
+                    :field-path-prefix="fieldPathPrefix"
+                    :meta-path-prefix="metaPathPrefix"
+                >
+                    <Fields class="p-4" />
+                </FieldsProvider>
             </Motion>
         </div>
     </div>
 </template>
-
-<script>
-import SetField from './Field.vue';
-import ManagesPreviewText from './ManagesPreviewText';
-import { ValidatesFieldConditions } from '../../field-conditions/FieldConditions.js';
-import HasFieldActions from '../../field-actions/HasFieldActions.js';
-import DropdownActions from '../../field-actions/DropdownActions.vue';
-import { Icon, Switch } from '@statamic/ui';
-import { Motion } from 'motion-v';
-
-export default {
-    components: { SetField, DropdownActions, Icon, Switch, Motion },
-
-    mixins: [ValidatesFieldConditions, ManagesPreviewText, HasFieldActions],
-
-    inject: ['replicatorSets', 'store', 'storeName'],
-
-    props: {
-        config: { type: Object, required: true },
-        meta: { type: Object, required: true },
-        index: { type: Number, required: true },
-        collapsed: { type: Boolean, default: false },
-        values: { type: Object, required: true },
-        parentName: { type: String, required: true },
-        fieldPathPrefix: { type: String, required: true },
-        hasError: { type: Boolean, default: false },
-        sortableItemClass: { type: String },
-        sortableHandleClass: { type: String },
-        canAddSet: { type: Boolean, default: true },
-        isReadOnly: { type: Boolean, default: false },
-        previews: { type: Object },
-        showFieldPreviews: { type: Boolean, default: true },
-    },
-
-    data() {
-        return {
-            fieldPreviews: this.previews,
-            extraValues: {},
-        };
-    },
-
-    computed: {
-        fields() {
-            return this.config.fields;
-        },
-
-        display() {
-            return __(this.config.display) || this.values.type;
-        },
-
-        instructions() {
-            return this.config.instructions ? markdown(__(this.config.instructions)) : null;
-        },
-
-        setGroup() {
-            if (this.replicatorSets.length < 1) return null;
-
-            return this.replicatorSets.find((group) => {
-                return group.sets.filter((set) => set.handle === this.config.handle).length > 0;
-            });
-        },
-
-        hasMultipleFields() {
-            return this.fields.length > 1;
-        },
-
-        isSetGroupVisible() {
-            return this.replicatorSets.length > 1 && this.setGroup?.display;
-        },
-
-        isHidden() {
-            return this.values['#hidden'] === true;
-        },
-
-        isInvalid() {
-            return Object.keys(this.config).length === 0;
-        },
-
-        fieldVm() {
-            let vm = this;
-            while (vm !== vm.$root) {
-                if (vm.$options.name === 'replicator-fieldtype') return vm;
-                vm = vm.$parent;
-            }
-        },
-
-        fieldActionPayload() {
-            return {
-                vm: this,
-                fieldVm: this.fieldVm,
-                fieldPathPrefix: this.fieldPathPrefix,
-                index: this.index,
-                values: this.values,
-                config: this.config,
-                meta: this.meta,
-                update: (handle, value) => this.updated(handle, value),
-                updateMeta: (handle, value) => this.metaUpdated(handle, value),
-                isReadOnly: this.isReadOnly,
-                store: this.store,
-                storeName: this.storeName,
-            };
-        },
-    },
-
-    methods: {
-        updated(handle, value) {
-            this.$emit('updated', this.index, { ...this.values, [handle]: value });
-        },
-
-        metaUpdated(handle, value) {
-            this.$emit('meta-updated', { ...this.meta, [handle]: value });
-        },
-
-        previewUpdated(handle, value) {
-            this.$emit('previews-updated', (this.fieldPreviews = { ...this.fieldPreviews, [handle]: value }));
-        },
-
-        destroy() {
-            if (!confirm(__('Are you sure?'))) return;
-
-            this.$emit('removed');
-        },
-
-        toggle() {
-            this.isHidden ? this.expand() : this.collapse();
-        },
-
-        toggleEnabledState() {
-            this.updated('enabled', !this.values.enabled);
-        },
-
-        toggleCollapsedState() {
-            if (this.collapsed) {
-                this.expand();
-            } else {
-                this.collapse();
-            }
-        },
-
-        collapse() {
-            this.$emit('collapsed');
-        },
-
-        expand() {
-            this.$emit('expanded');
-        },
-
-        duplicate() {
-            this.$emit('duplicated');
-        },
-
-        fieldPath(field) {
-            return `${this.fieldPathPrefix}.${this.index}.${field.handle}`;
-        },
-    },
-};
-</script>

From e7c0a02192a75d83faf6564ab4dcc6a0cffed071 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 20 May 2025 13:37:35 -0400
Subject: [PATCH 32/33] rename icons

---
 resources/js/components/ui/Publish/Field.vue          | 4 ++--
 resources/svg/icons/{link.svg => synced.svg}          | 0
 resources/svg/icons/{link-broken.svg => unsynced.svg} | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename resources/svg/icons/{link.svg => synced.svg} (100%)
 rename resources/svg/icons/{link-broken.svg => unsynced.svg} (100%)

diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 0bd9c2a41a7..2f20fd3a67a 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -111,12 +111,12 @@ function desync() {
                 </Tooltip>
                 <button v-if="!isReadOnly && isSyncable" v-show="isSynced" @click="desync">
                     <Tooltip :text="__('messages.field_synced_with_origin')">
-                        <Icon name="link" class="text-gray-400" />
+                        <Icon name="synced" class="text-gray-400" />
                     </Tooltip>
                 </button>
                 <button v-if="!isReadOnly && isSyncable" v-show="!isSynced" @click="sync">
                     <Tooltip :text="__('messages.field_desynced_from_origin')">
-                        <Icon name="link-broken" class="text-gray-400" />
+                        <Icon name="unsynced" class="text-gray-400" />
                     </Tooltip>
                 </button>
             </Label>
diff --git a/resources/svg/icons/link.svg b/resources/svg/icons/synced.svg
similarity index 100%
rename from resources/svg/icons/link.svg
rename to resources/svg/icons/synced.svg
diff --git a/resources/svg/icons/link-broken.svg b/resources/svg/icons/unsynced.svg
similarity index 100%
rename from resources/svg/icons/link-broken.svg
rename to resources/svg/icons/unsynced.svg

From 8a63c2e33c493f66a49a3a61798de6cdf577cce9 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 20 May 2025 13:42:27 -0400
Subject: [PATCH 33/33] get by without the localizable icon

---
 resources/js/components/ui/Publish/Field.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index 2f20fd3a67a..8164107d350 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -106,9 +106,6 @@ function desync() {
         <template #label>
             <Label :for="fieldId" :required="isRequired">
                 {{ __(config.display) }}
-                <Tooltip :text="__('Localizable field')" v-if="isLocalizable">
-                    <Icon name="globals" class="text-gray-400" />
-                </Tooltip>
                 <button v-if="!isReadOnly && isSyncable" v-show="isSynced" @click="desync">
                     <Tooltip :text="__('messages.field_synced_with_origin')">
                         <Icon name="synced" class="text-gray-400" />