From 790eaf4f44bc5d7ab2fbfdf37b1c67fc53843266 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 1 Jul 2026 17:05:24 +0100
Subject: [PATCH 1/9] bring over from the other branch

---
 resources/js/components/forms/FieldNumber.vue | 13 +++
 .../components/forms/FieldNumberingToggle.vue | 22 +++++
 .../components/forms/builder/ImportField.vue  | 19 +++-
 .../forms/builder/RegularFormField.vue        | 14 ++-
 .../js/components/forms/logic/FieldLogic.vue  | 13 +++
 .../components/forms/logic/FieldLogicRule.vue |  2 +
 .../forms/logic/LogicRulePicker.vue           |  2 +-
 .../js/composables/forms/field-numbering.js   | 92 +++++++++++++++++++
 resources/js/pages/forms/Builder.vue          | 14 ++-
 resources/js/pages/forms/Logic.vue            |  9 ++
 10 files changed, 195 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/components/forms/FieldNumber.vue
 create mode 100644 resources/js/components/forms/FieldNumberingToggle.vue
 create mode 100644 resources/js/composables/forms/field-numbering.js

diff --git a/resources/js/components/forms/FieldNumber.vue b/resources/js/components/forms/FieldNumber.vue
new file mode 100644
index 00000000000..b976cfe56f3
--- /dev/null
+++ b/resources/js/components/forms/FieldNumber.vue
@@ -0,0 +1,13 @@
+<script setup>
+defineProps({
+    number: { type: Number, default: null },
+});
+</script>
+
+<template>
+    <span
+        v-if="number"
+        data-field-number
+        class="font-mono text-2xs text-gray-500 tabular-nums dark:text-gray-400"
+    >{{ number }}.</span>
+</template>
diff --git a/resources/js/components/forms/FieldNumberingToggle.vue b/resources/js/components/forms/FieldNumberingToggle.vue
new file mode 100644
index 00000000000..641a152851f
--- /dev/null
+++ b/resources/js/components/forms/FieldNumberingToggle.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { ToggleGroup, ToggleItem } from '@ui';
+import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
+
+const { showFieldNumbers } = useFieldNumberingPreference();
+
+const toggleFieldNumbers = () => {
+    showFieldNumbers.value = ! showFieldNumbers.value;
+};
+</script>
+
+<template>
+    <ToggleGroup :model-value="showFieldNumbers ? 'on' : null" size="xs">
+        <ToggleItem
+            value="on"
+            icon="mail-sign-hashtag"
+            :aria-label="__('Show field numbers')"
+            v-tooltip="__('Show field numbers')"
+            @click.prevent="toggleFieldNumbers"
+        />
+    </ToggleGroup>
+</template>
diff --git a/resources/js/components/forms/builder/ImportField.vue b/resources/js/components/forms/builder/ImportField.vue
index b6da8fd7898..a6ca9a2dfd7 100644
--- a/resources/js/components/forms/builder/ImportField.vue
+++ b/resources/js/components/forms/builder/ImportField.vue
@@ -2,6 +2,8 @@
 import { Button, Description, Field, Icon, Label } from '@ui';
 import { computed } from 'vue';
 import { usePage } from '@inertiajs/vue3';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
+import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { injectBuilderContext, InspectorType } from '@/pages/forms/Builder.vue';
 import { categoryColorClasses } from './categories';
 import { __ } from '@/bootstrap/globals';
@@ -16,7 +18,21 @@ defineEmits<{
     (e: 'remove'): void;
 }>();
 
-const { errors, inspect, inspecting, inspectorType } = injectBuilderContext();
+const { errors, fieldNumbers, inspect, inspecting, inspectorType, showFieldNumbers } = injectBuilderContext();
+
+const fieldsetFieldNumber = (fieldsetField) => {
+    if (! showFieldNumbers?.value) {
+        return null;
+    }
+
+    const prefix = props.field.prefix || '';
+
+    return fieldNumberFromMap(
+        fieldNumbers?.value,
+        `${prefix}${fieldsetField.handle}`,
+        `${props.field._id}:${fieldsetField.handle}`,
+    );
+};
 
 const fieldsets = Object.values(usePage().props.fieldsets);
 
@@ -77,6 +93,7 @@ const errorMessage = computed(() => {
                         <template #label>
                             <Label>
                                 <span class="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
+                                    <FieldNumber :number="fieldsetFieldNumber(fieldsetField)" class="me-1" />
                                     <Icon name="link" data-collapsed-field-icon class="size-3.5 me-1 " :class="categoryColorClasses['fieldsets']?.icon" aria-hidden="true" />
                                     {{ __(fieldsetField.config.display) }}
                                     <span v-if="fieldsetField.config.validate?.includes('required')" class="relative -top-px ms-0.5 text-red-600">*</span>
diff --git a/resources/js/components/forms/builder/RegularFormField.vue b/resources/js/components/forms/builder/RegularFormField.vue
index c46b648313c..30739a2f7bf 100644
--- a/resources/js/components/forms/builder/RegularFormField.vue
+++ b/resources/js/components/forms/builder/RegularFormField.vue
@@ -3,7 +3,9 @@ import { Button, Field, Icon, Label } from '@ui';
 import { computed } from 'vue';
 import { FieldView, injectBuilderContext, InspectorType } from '@/pages/forms/Builder.vue';
 import { categories, categoryColorClasses } from './categories';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 import WidthSelector from '@/components/fields/WidthSelector.vue';
+import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { __ } from '@/bootstrap/globals';
 
 defineEmits<{
@@ -19,7 +21,15 @@ const props = defineProps<{
     isLastRow?: boolean;
 }>();
 
-const { dirty, errors, fieldView, inspect, inspecting, inspectorType } = injectBuilderContext();
+const { dirty, errors, fieldNumbers, fieldView, inspect, inspecting, inspectorType, showFieldNumbers } = injectBuilderContext();
+
+const fieldNumber = computed(() => {
+    if (! showFieldNumbers?.value) {
+        return null;
+    }
+
+    return fieldNumberFromMap(fieldNumbers?.value, props.field.handle, props.field._id);
+});
 
 const inspectField = () => inspect(InspectorType.Field, props.field);
 const isInspecting = computed(() => inspectorType.value === InspectorType.Field && inspecting.value?._id === props.field._id);
@@ -105,6 +115,7 @@ const hasErrors = computed(() => {
         >
             <template #label>
                 <Label :class="['mb-0', { 'cursor-pointer': !isInspecting }]">
+                    <FieldNumber :number="fieldNumber" class="me-1" />
                     <Icon :name="field.icon" data-collapsed-field-icon :class="['size-3.5 mb-0.25! me-2.5', iconColorClass]" aria-hidden="true" />
                     <Icon
                         v-if="field.config.if || field.config.unless"
@@ -140,6 +151,7 @@ const hasErrors = computed(() => {
         >
             <template #label>
                 <Label :class="['', { 'cursor-pointer': !isInspecting }]">
+                    <FieldNumber :number="fieldNumber" class="me-1" />
                     <Icon :name="field.icon" data-collapsed-field-icon :class="['size-3.5 mb-0.25! me-2.5', iconColorClass]" aria-hidden="true" />
                     <Icon
                         v-if="field.config.if || field.config.unless"
diff --git a/resources/js/components/forms/logic/FieldLogic.vue b/resources/js/components/forms/logic/FieldLogic.vue
index 244645bd352..d205eb745ba 100644
--- a/resources/js/components/forms/logic/FieldLogic.vue
+++ b/resources/js/components/forms/logic/FieldLogic.vue
@@ -3,6 +3,7 @@ import { Button, Card, Heading, Icon, Panel, PanelHeader } from '@ui';
 import AddLogicRuleButton from './AddLogicRuleButton.vue';
 import FieldLogicRule from './FieldLogicRule.vue';
 import { computed, nextTick, ref, watch } from 'vue';
+import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
 import { KEYS } from '@/components/field-conditions/Constants.js';
 
@@ -12,6 +13,8 @@ const props = defineProps({
     fields: { type: Array, required: true },
     suggestableFields: { type: Array, required: true },
     fieldtypes: Array,
+    showFieldNumbers: { type: Boolean, default: false },
+    fieldNumbers: { type: Map, default: () => new Map() },
 });
 
 const collapsed = ref([]);
@@ -46,12 +49,21 @@ const getIconClass = (category) => {
     return categoryColorClasses[color]?.icon || 'text-gray-600 dark:text-gray-400';
 };
 
+const fieldNumber = (field) => {
+    if (! props.showFieldNumbers) {
+        return null;
+    }
+
+    return fieldNumberFromMap(props.fieldNumbers, field.handle, field._id);
+};
+
 const availableFields = computed(() => {
     return fieldsWithoutLogic.value.map(field => ({
         handle: field._id,
         display: field.display,
         icon: field.icon || 'generic-field',
         iconClass: getIconClass(field.category),
+        number: fieldNumber(field),
     }));
 });
 
@@ -60,6 +72,7 @@ const getFieldConfig = (field) => ({
     display: field.display,
     icon: field.icon || 'generic-field',
     iconClass: getIconClass(field.category),
+    number: fieldNumber(field),
 });
 
 const getConditionsConfig = (field) => ({
diff --git a/resources/js/components/forms/logic/FieldLogicRule.vue b/resources/js/components/forms/logic/FieldLogicRule.vue
index 0b79d84c64b..96f765f8b3f 100644
--- a/resources/js/components/forms/logic/FieldLogicRule.vue
+++ b/resources/js/components/forms/logic/FieldLogicRule.vue
@@ -9,6 +9,7 @@ import {
     Icon,
     Subheading,
 } from '@/components/ui';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 import FieldConditionsBuilder from '@/components/field-conditions/Builder.vue';
 import Converter from '@/components/field-conditions/Converter.js';
 import { categories, categoryColorClasses } from '@/components/forms/builder/categories.js';
@@ -121,6 +122,7 @@ const onAlwaysSaveUpdated = (alwaysSave) => emit('update:conditions', { ...props
             >
                 <button type="button" class="show-focus-within_target flex flex-1 items-center gap-1.75 p-2 py-1.75 ps-0 min-w-0 focus:outline-none cursor-pointer" @click="toggleCollapsedState">
                     <Badge size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
+                        <FieldNumber :number="config?.number" class="me-0.5" />
                         <Icon
                             v-if="config?.icon"
                             :name="config.icon"
diff --git a/resources/js/components/forms/logic/LogicRulePicker.vue b/resources/js/components/forms/logic/LogicRulePicker.vue
index 1ccafb67b93..983e377f78f 100644
--- a/resources/js/components/forms/logic/LogicRulePicker.vue
+++ b/resources/js/components/forms/logic/LogicRulePicker.vue
@@ -140,7 +140,7 @@ onBeforeUnmount(() => unbindKeys());
                         <ui-icon :name="item.icon || 'plus'" class="size-4" :class="item.iconClass || 'text-gray-600 dark:text-gray-300'" />
                         <div class="flex-1">
                             <div class="line-clamp-1 text-sm text-gray-900 dark:text-gray-200">
-                                {{ __(item.display || item.handle) }}
+                                <span v-if="item.number" class="font-mono text-2xs text-gray-500 tabular-nums me-1 dark:text-gray-400">{{ item.number }}.</span>{{ __(item.display || item.handle) }}
                             </div>
                             <ui-description v-if="item.instructions" class="w-56 truncate text-2xs">
                                 {{ __(item.instructions) }}
diff --git a/resources/js/composables/forms/field-numbering.js b/resources/js/composables/forms/field-numbering.js
new file mode 100644
index 00000000000..cacea9a2841
--- /dev/null
+++ b/resources/js/composables/forms/field-numbering.js
@@ -0,0 +1,92 @@
+import { ref, watch } from 'vue';
+import { preferences } from '@api';
+
+export const FIELD_NUMBERING_PREFERENCE_KEY = 'forms.field_numbering';
+
+let state = null;
+
+export function useFieldNumberingPreference() {
+    if (state) {
+        return state;
+    }
+
+    const showFieldNumbers = ref(preferences.get(FIELD_NUMBERING_PREFERENCE_KEY, false));
+
+    watch(showFieldNumbers, (value) => {
+        preferences.set(FIELD_NUMBERING_PREFERENCE_KEY, value);
+    });
+
+    state = { showFieldNumbers };
+
+    return state;
+}
+
+export function buildFieldNumbersFromLogicFields(fields) {
+    const map = new Map();
+    let n = 1;
+
+    (fields || []).forEach((field) => {
+        map.set(field.handle, n);
+
+        if (field._id) {
+            map.set(field._id, n);
+        }
+
+        n++;
+    });
+
+    return map;
+}
+
+export function buildFieldNumbersFromBuilderPages(pages, fieldsets) {
+    const map = new Map();
+    let n = 1;
+    const fieldsetList = fieldsets
+        ? (Array.isArray(fieldsets) ? fieldsets : Object.values(fieldsets))
+        : [];
+
+    (pages || []).forEach((page) => {
+        (page.sections || []).forEach((section) => {
+            (section.fields || []).forEach((fieldConfig) => {
+                if (fieldConfig.type === 'link_fields') {
+                    return;
+                }
+
+                if (fieldConfig.type === 'import') {
+                    const fieldset = fieldsetList.find((fs) => fs.handle === fieldConfig.fieldset);
+
+                    (fieldset?.fields || [])
+                        .filter((f) => f.type !== 'import')
+                        .forEach((ff) => {
+                            const handle = (fieldConfig.prefix || '') + ff.handle;
+                            map.set(handle, n);
+                            map.set(`${fieldConfig._id}:${ff.handle}`, n);
+                            n++;
+                        });
+
+                    return;
+                }
+
+                map.set(fieldConfig._id, n);
+
+                if (fieldConfig.handle) {
+                    map.set(fieldConfig.handle, n);
+                }
+
+                n++;
+            });
+        });
+    });
+
+    return map;
+}
+
+export function fieldNumberFromMap(map, ...keys) {
+    for (const key of keys) {
+        if (key != null && map.has(key)) {
+            return map.get(key);
+        }
+    }
+
+    return null;
+}
diff --git a/resources/js/pages/forms/Builder.vue b/resources/js/pages/forms/Builder.vue
index 3d275263d72..85fff8b16d8 100644
--- a/resources/js/pages/forms/Builder.vue
+++ b/resources/js/pages/forms/Builder.vue
@@ -38,8 +38,11 @@ import Page from '@/components/forms/builder/Page.vue';
 import PageInspector from '@/components/forms/builder/PageInspector.vue';
 import SectionInspector from '@/components/forms/builder/SectionInspector.vue';
 import { useFieldtypeDraggable } from '@/components/forms/builder/use-drag-and-drop';
+import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
+import { buildFieldNumbersFromBuilderPages, useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 import { __, uniqid } from '@/bootstrap/globals';
 import { progress, keys } from '@api';
+import { usePage } from '@inertiajs/vue3';
 import type Binding from '@/components/keys/Binding';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
@@ -66,6 +69,8 @@ const pages = computed(() => formFields.value.pages);
 const allSections = computed(() => pages.value.flatMap(page => page.sections));
 const shouldShowViewSelector = computed(() => allSections.value.some(section => section.fields.length > 0));
 const fieldCount = computed(() => allSections.value.flatMap(section => section.fields).length);
+const { showFieldNumbers } = useFieldNumberingPreference();
+const fieldNumbers = computed(() => buildFieldNumbersFromBuilderPages(pages.value, usePage().props.fieldsets));
 
 const inspect = (type: InspectorType, data: object): void => {
     inspecting.value = data;
@@ -309,6 +314,8 @@ provideBuilderContext({
     errors,
     fieldtypes: props.fieldtypes,
     fieldView,
+    fieldNumbers,
+    showFieldNumbers,
     form: props.form,
     formsProInstalled: props.formsProInstalled,
     inspect,
@@ -385,7 +392,9 @@ onUnmounted(() => {
                 {{ __(form.title) }}
             </template>
             <template #actions>
-                <ToggleGroup v-if="shouldShowViewSelector" v-model="fieldView" size="xs">
+                <div class="flex items-center gap-2.5">
+                    <FieldNumberingToggle />
+                    <ToggleGroup v-if="shouldShowViewSelector" v-model="fieldView" size="xs">
                     <ToggleItem
                         :value="FieldView.Expanded"
                         icon="expand"
@@ -398,7 +407,8 @@ onUnmounted(() => {
                         :aria-label="__('Collapsed view')"
                         v-tooltip="__('Collapsed view')"
                     />
-                </ToggleGroup>
+                    </ToggleGroup>
+                </div>
             </template>
         </Header>
 
diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 0ceb3001cf5..3063acbdcb1 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -3,9 +3,11 @@ import Layout from '@/pages/layout/Layout.vue';
 import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from './Layout.vue';
 import { Button, Header, Icon, StatusIndicator } from '@ui';
+import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
 import FieldLogic from '@/components/forms/logic/FieldLogic.vue';
 import PageLogic from '@/components/forms/logic/PageLogic.vue';
 import Head from '@/pages/layout/Head.vue';
+import { buildFieldNumbersFromLogicFields, useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { keys } from '@api';
 import axios from 'axios';
@@ -22,6 +24,8 @@ const props = defineProps({
 
 const pages = ref(props.pages);
 const fields = ref(props.fields);
+const { showFieldNumbers } = useFieldNumberingPreference();
+const fieldNumbers = computed(() => buildFieldNumbersFromLogicFields(fields.value));
 const saving = ref(false);
 const saveBinding = ref(null);
 const errors = ref({});
@@ -113,6 +117,9 @@ onUnmounted(() => {
                 <StatusIndicator status="published" />
                 {{ __(form.title) }}
             </template>
+            <template #actions>
+                <FieldNumberingToggle />
+            </template>
         </Header>
 
         <PageLogic
@@ -127,6 +134,8 @@ onUnmounted(() => {
             v-model:fields="fields"
             :suggestable-fields
             :fieldtypes
+            :show-field-numbers
+            :field-numbers
         />
     </div>
 </template>

From 54da8d3d97e90d16c4e96081e06925679e7f9ceb Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 2 Jul 2026 12:22:00 +0100
Subject: [PATCH 2/9] simplify how field numbering works

- the Builder and Logic components are now responsible for generating the field numbers, rather than the composable.
- the FieldNumber component now injects the fieldNumbers and checks the "show" state itself. saving us from needing to pass it in.
- the composable is now only responsible for the toggle state.
---
 resources/js/components/forms/FieldNumber.vue | 10 ++-
 .../components/forms/FieldNumberingToggle.vue |  4 +-
 .../components/forms/builder/ImportField.vue  | 19 +---
 .../forms/builder/RegularFormField.vue        | 15 +---
 .../js/components/forms/logic/FieldLogic.vue  | 13 ---
 .../components/forms/logic/FieldLogicRule.vue |  2 +-
 .../forms/logic/LogicRulePicker.vue           |  3 +-
 .../js/composables/forms/field-numbering.js   | 86 +------------------
 resources/js/pages/forms/Builder.vue          | 37 ++++++--
 resources/js/pages/forms/Logic.vue            | 16 ++--
 10 files changed, 62 insertions(+), 143 deletions(-)

diff --git a/resources/js/components/forms/FieldNumber.vue b/resources/js/components/forms/FieldNumber.vue
index b976cfe56f3..fc2872b0d78 100644
--- a/resources/js/components/forms/FieldNumber.vue
+++ b/resources/js/components/forms/FieldNumber.vue
@@ -1,7 +1,13 @@
 <script setup>
-defineProps({
-    number: { type: Number, default: null },
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+    fieldKey: { type: String, default: null },
 });
+
+const fieldNumbers = inject('fieldNumbers', null);
+
+const number = computed(() => fieldNumbers?.value?.get(props.fieldKey) ?? null);
 </script>
 
 <template>
diff --git a/resources/js/components/forms/FieldNumberingToggle.vue b/resources/js/components/forms/FieldNumberingToggle.vue
index 641a152851f..14be7b3f775 100644
--- a/resources/js/components/forms/FieldNumberingToggle.vue
+++ b/resources/js/components/forms/FieldNumberingToggle.vue
@@ -4,9 +4,7 @@ import { useFieldNumberingPreference } from '@/composables/forms/field-numbering
 
 const { showFieldNumbers } = useFieldNumberingPreference();
 
-const toggleFieldNumbers = () => {
-    showFieldNumbers.value = ! showFieldNumbers.value;
-};
+const toggleFieldNumbers = () => showFieldNumbers.value = !showFieldNumbers.value;
 </script>
 
 <template>
diff --git a/resources/js/components/forms/builder/ImportField.vue b/resources/js/components/forms/builder/ImportField.vue
index a6ca9a2dfd7..a749c8795a2 100644
--- a/resources/js/components/forms/builder/ImportField.vue
+++ b/resources/js/components/forms/builder/ImportField.vue
@@ -3,7 +3,6 @@ import { Button, Description, Field, Icon, Label } from '@ui';
 import { computed } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import FieldNumber from '@/components/forms/FieldNumber.vue';
-import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { injectBuilderContext, InspectorType } from '@/pages/forms/Builder.vue';
 import { categoryColorClasses } from './categories';
 import { __ } from '@/bootstrap/globals';
@@ -18,21 +17,7 @@ defineEmits<{
     (e: 'remove'): void;
 }>();
 
-const { errors, fieldNumbers, inspect, inspecting, inspectorType, showFieldNumbers } = injectBuilderContext();
-
-const fieldsetFieldNumber = (fieldsetField) => {
-    if (! showFieldNumbers?.value) {
-        return null;
-    }
-
-    const prefix = props.field.prefix || '';
-
-    return fieldNumberFromMap(
-        fieldNumbers?.value,
-        `${prefix}${fieldsetField.handle}`,
-        `${props.field._id}:${fieldsetField.handle}`,
-    );
-};
+const { errors, inspect, inspecting, inspectorType } = injectBuilderContext();
 
 const fieldsets = Object.values(usePage().props.fieldsets);
 
@@ -93,7 +78,7 @@ const errorMessage = computed(() => {
                         <template #label>
                             <Label>
                                 <span class="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
-                                    <FieldNumber :number="fieldsetFieldNumber(fieldsetField)" class="me-1" />
+                                    <FieldNumber :field-key="`${field._id}:${fieldsetField.handle}`" class="me-1" />
                                     <Icon name="link" data-collapsed-field-icon class="size-3.5 me-1 " :class="categoryColorClasses['fieldsets']?.icon" aria-hidden="true" />
                                     {{ __(fieldsetField.config.display) }}
                                     <span v-if="fieldsetField.config.validate?.includes('required')" class="relative -top-px ms-0.5 text-red-600">*</span>
diff --git a/resources/js/components/forms/builder/RegularFormField.vue b/resources/js/components/forms/builder/RegularFormField.vue
index 30739a2f7bf..7f62371407b 100644
--- a/resources/js/components/forms/builder/RegularFormField.vue
+++ b/resources/js/components/forms/builder/RegularFormField.vue
@@ -5,7 +5,6 @@ import { FieldView, injectBuilderContext, InspectorType } from '@/pages/forms/Bu
 import { categories, categoryColorClasses } from './categories';
 import FieldNumber from '@/components/forms/FieldNumber.vue';
 import WidthSelector from '@/components/fields/WidthSelector.vue';
-import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { __ } from '@/bootstrap/globals';
 
 defineEmits<{
@@ -21,15 +20,7 @@ const props = defineProps<{
     isLastRow?: boolean;
 }>();
 
-const { dirty, errors, fieldNumbers, fieldView, inspect, inspecting, inspectorType, showFieldNumbers } = injectBuilderContext();
-
-const fieldNumber = computed(() => {
-    if (! showFieldNumbers?.value) {
-        return null;
-    }
-
-    return fieldNumberFromMap(fieldNumbers?.value, props.field.handle, props.field._id);
-});
+const { dirty, errors, fieldView, inspect, inspecting, inspectorType } = injectBuilderContext();
 
 const inspectField = () => inspect(InspectorType.Field, props.field);
 const isInspecting = computed(() => inspectorType.value === InspectorType.Field && inspecting.value?._id === props.field._id);
@@ -115,7 +106,7 @@ const hasErrors = computed(() => {
         >
             <template #label>
                 <Label :class="['mb-0', { 'cursor-pointer': !isInspecting }]">
-                    <FieldNumber :number="fieldNumber" class="me-1" />
+                    <FieldNumber :field-key="field._id" class="me-1" />
                     <Icon :name="field.icon" data-collapsed-field-icon :class="['size-3.5 mb-0.25! me-2.5', iconColorClass]" aria-hidden="true" />
                     <Icon
                         v-if="field.config.if || field.config.unless"
@@ -151,7 +142,7 @@ const hasErrors = computed(() => {
         >
             <template #label>
                 <Label :class="['', { 'cursor-pointer': !isInspecting }]">
-                    <FieldNumber :number="fieldNumber" class="me-1" />
+                    <FieldNumber :field-key="field._id" class="me-1" />
                     <Icon :name="field.icon" data-collapsed-field-icon :class="['size-3.5 mb-0.25! me-2.5', iconColorClass]" aria-hidden="true" />
                     <Icon
                         v-if="field.config.if || field.config.unless"
diff --git a/resources/js/components/forms/logic/FieldLogic.vue b/resources/js/components/forms/logic/FieldLogic.vue
index d205eb745ba..244645bd352 100644
--- a/resources/js/components/forms/logic/FieldLogic.vue
+++ b/resources/js/components/forms/logic/FieldLogic.vue
@@ -3,7 +3,6 @@ import { Button, Card, Heading, Icon, Panel, PanelHeader } from '@ui';
 import AddLogicRuleButton from './AddLogicRuleButton.vue';
 import FieldLogicRule from './FieldLogicRule.vue';
 import { computed, nextTick, ref, watch } from 'vue';
-import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
 import { KEYS } from '@/components/field-conditions/Constants.js';
 
@@ -13,8 +12,6 @@ const props = defineProps({
     fields: { type: Array, required: true },
     suggestableFields: { type: Array, required: true },
     fieldtypes: Array,
-    showFieldNumbers: { type: Boolean, default: false },
-    fieldNumbers: { type: Map, default: () => new Map() },
 });
 
 const collapsed = ref([]);
@@ -49,21 +46,12 @@ const getIconClass = (category) => {
     return categoryColorClasses[color]?.icon || 'text-gray-600 dark:text-gray-400';
 };
 
-const fieldNumber = (field) => {
-    if (! props.showFieldNumbers) {
-        return null;
-    }
-
-    return fieldNumberFromMap(props.fieldNumbers, field.handle, field._id);
-};
-
 const availableFields = computed(() => {
     return fieldsWithoutLogic.value.map(field => ({
         handle: field._id,
         display: field.display,
         icon: field.icon || 'generic-field',
         iconClass: getIconClass(field.category),
-        number: fieldNumber(field),
     }));
 });
 
@@ -72,7 +60,6 @@ const getFieldConfig = (field) => ({
     display: field.display,
     icon: field.icon || 'generic-field',
     iconClass: getIconClass(field.category),
-    number: fieldNumber(field),
 });
 
 const getConditionsConfig = (field) => ({
diff --git a/resources/js/components/forms/logic/FieldLogicRule.vue b/resources/js/components/forms/logic/FieldLogicRule.vue
index 96f765f8b3f..9e338e53713 100644
--- a/resources/js/components/forms/logic/FieldLogicRule.vue
+++ b/resources/js/components/forms/logic/FieldLogicRule.vue
@@ -122,7 +122,7 @@ const onAlwaysSaveUpdated = (alwaysSave) => emit('update:conditions', { ...props
             >
                 <button type="button" class="show-focus-within_target flex flex-1 items-center gap-1.75 p-2 py-1.75 ps-0 min-w-0 focus:outline-none cursor-pointer" @click="toggleCollapsedState">
                     <Badge size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
-                        <FieldNumber :number="config?.number" class="me-0.5" />
+                        <FieldNumber :field-key="config?.handle" class="me-0.5" />
                         <Icon
                             v-if="config?.icon"
                             :name="config.icon"
diff --git a/resources/js/components/forms/logic/LogicRulePicker.vue b/resources/js/components/forms/logic/LogicRulePicker.vue
index 983e377f78f..1200393dc95 100644
--- a/resources/js/components/forms/logic/LogicRulePicker.vue
+++ b/resources/js/components/forms/logic/LogicRulePicker.vue
@@ -3,6 +3,7 @@ import { Primitive } from 'reka-ui';
 import fuzzysort from 'fuzzysort';
 import { computed, ref, watch, onBeforeUnmount } from 'vue';
 import { keys } from '@api';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 
 const emit = defineEmits(['added']);
 
@@ -140,7 +141,7 @@ onBeforeUnmount(() => unbindKeys());
                         <ui-icon :name="item.icon || 'plus'" class="size-4" :class="item.iconClass || 'text-gray-600 dark:text-gray-300'" />
                         <div class="flex-1">
                             <div class="line-clamp-1 text-sm text-gray-900 dark:text-gray-200">
-                                <span v-if="item.number" class="font-mono text-2xs text-gray-500 tabular-nums me-1 dark:text-gray-400">{{ item.number }}.</span>{{ __(item.display || item.handle) }}
+                                <FieldNumber :field-key="item.handle" class="me-1" />{{ __(item.display || item.handle) }}
                             </div>
                             <ui-description v-if="item.instructions" class="w-56 truncate text-2xs">
                                 {{ __(item.instructions) }}
diff --git a/resources/js/composables/forms/field-numbering.js b/resources/js/composables/forms/field-numbering.js
index cacea9a2841..9a3e776c178 100644
--- a/resources/js/composables/forms/field-numbering.js
+++ b/resources/js/composables/forms/field-numbering.js
@@ -1,92 +1,14 @@
 import { ref, watch } from 'vue';
 import { preferences } from '@api';
 
-export const FIELD_NUMBERING_PREFERENCE_KEY = 'forms.field_numbering';
-
 let state = null;
 
 export function useFieldNumberingPreference() {
-    if (state) {
-        return state;
+    if (! state) {
+        const showFieldNumbers = ref(preferences.get('forms.field_numbering', false));
+        watch(showFieldNumbers, (value) => preferences.set('forms.field_numbering', value));
+        state = { showFieldNumbers };
     }
 
-    const showFieldNumbers = ref(preferences.get(FIELD_NUMBERING_PREFERENCE_KEY, false));
-
-    watch(showFieldNumbers, (value) => {
-        preferences.set(FIELD_NUMBERING_PREFERENCE_KEY, value);
-    });
-
-    state = { showFieldNumbers };
-
     return state;
 }
-
-export function buildFieldNumbersFromLogicFields(fields) {
-    const map = new Map();
-    let n = 1;
-
-    (fields || []).forEach((field) => {
-        map.set(field.handle, n);
-
-        if (field._id) {
-            map.set(field._id, n);
-        }
-
-        n++;
-    });
-
-    return map;
-}
-
-export function buildFieldNumbersFromBuilderPages(pages, fieldsets) {
-    const map = new Map();
-    let n = 1;
-    const fieldsetList = fieldsets
-        ? (Array.isArray(fieldsets) ? fieldsets : Object.values(fieldsets))
-        : [];
-
-    (pages || []).forEach((page) => {
-        (page.sections || []).forEach((section) => {
-            (section.fields || []).forEach((fieldConfig) => {
-                if (fieldConfig.type === 'link_fields') {
-                    return;
-                }
-
-                if (fieldConfig.type === 'import') {
-                    const fieldset = fieldsetList.find((fs) => fs.handle === fieldConfig.fieldset);
-
-                    (fieldset?.fields || [])
-                        .filter((f) => f.type !== 'import')
-                        .forEach((ff) => {
-                            const handle = (fieldConfig.prefix || '') + ff.handle;
-                            map.set(handle, n);
-                            map.set(`${fieldConfig._id}:${ff.handle}`, n);
-                            n++;
-                        });
-
-                    return;
-                }
-
-                map.set(fieldConfig._id, n);
-
-                if (fieldConfig.handle) {
-                    map.set(fieldConfig.handle, n);
-                }
-
-                n++;
-            });
-        });
-    });
-
-    return map;
-}
-
-export function fieldNumberFromMap(map, ...keys) {
-    for (const key of keys) {
-        if (key != null && map.has(key)) {
-            return map.get(key);
-        }
-    }
-
-    return null;
-}
diff --git a/resources/js/pages/forms/Builder.vue b/resources/js/pages/forms/Builder.vue
index 85fff8b16d8..7fe03219a9d 100644
--- a/resources/js/pages/forms/Builder.vue
+++ b/resources/js/pages/forms/Builder.vue
@@ -21,7 +21,7 @@ export const [injectBuilderContext, provideBuilderContext] = createContext('Form
 
 <script setup lang="ts">
 import { Button, Header, Icon, StatusIndicator, ToggleGroup, ToggleItem } from '@ui';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue';
 import axios from 'axios';
 import FormsLayout from './Layout.vue';
 import Head from '@/pages/layout/Head.vue';
@@ -39,7 +39,7 @@ import PageInspector from '@/components/forms/builder/PageInspector.vue';
 import SectionInspector from '@/components/forms/builder/SectionInspector.vue';
 import { useFieldtypeDraggable } from '@/components/forms/builder/use-drag-and-drop';
 import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
-import { buildFieldNumbersFromBuilderPages, useFieldNumberingPreference } from '@/composables/forms/field-numbering';
+import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 import { __, uniqid } from '@/bootstrap/globals';
 import { progress, keys } from '@api';
 import { usePage } from '@inertiajs/vue3';
@@ -69,8 +69,6 @@ const pages = computed(() => formFields.value.pages);
 const allSections = computed(() => pages.value.flatMap(page => page.sections));
 const shouldShowViewSelector = computed(() => allSections.value.some(section => section.fields.length > 0));
 const fieldCount = computed(() => allSections.value.flatMap(section => section.fields).length);
-const { showFieldNumbers } = useFieldNumberingPreference();
-const fieldNumbers = computed(() => buildFieldNumbersFromBuilderPages(pages.value, usePage().props.fieldsets));
 
 const inspect = (type: InspectorType, data: object): void => {
     inspecting.value = data;
@@ -306,6 +304,35 @@ const save = () => {
         .finally(() => saving.value = false);
 };
 
+const { showFieldNumbers } = useFieldNumberingPreference();
+
+const fieldNumbers = computed(() => {
+    if (!showFieldNumbers.value) return new Map();
+
+    const fieldsets = Object.values(usePage().props.fieldsets ?? {});
+
+    const keys = pages.value
+        .flatMap((page) => page.sections || [])
+        .flatMap((section) => section.fields || [])
+        .flatMap((field) => {
+            if (field.type === 'link_fields') return [];
+
+            if (field.type === 'import') {
+                const fieldset = fieldsets.find((fieldset) => fieldset.handle === field.fieldset);
+
+                return (fieldset?.fields || [])
+                    .filter((f) => f.type !== 'import')
+                    .map((f) => `${field._id}:${f.handle}`);
+            }
+
+            return [field._id];
+        });
+
+    return new Map(keys.map((key, index) => [key, index + 1]));
+});
+
+provide('fieldNumbers', fieldNumbers);
+
 provideBuilderContext({
     addSection,
     deletePage,
@@ -314,8 +341,6 @@ provideBuilderContext({
     errors,
     fieldtypes: props.fieldtypes,
     fieldView,
-    fieldNumbers,
-    showFieldNumbers,
     form: props.form,
     formsProInstalled: props.formsProInstalled,
     inspect,
diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 3063acbdcb1..717d2cdf2c5 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -7,10 +7,11 @@ import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
 import FieldLogic from '@/components/forms/logic/FieldLogic.vue';
 import PageLogic from '@/components/forms/logic/PageLogic.vue';
 import Head from '@/pages/layout/Head.vue';
-import { buildFieldNumbersFromLogicFields, useFieldNumberingPreference } from '@/composables/forms/field-numbering';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue';
 import { keys } from '@api';
 import axios from 'axios';
+import { usePage } from '@inertiajs/vue3';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
 
@@ -24,12 +25,17 @@ const props = defineProps({
 
 const pages = ref(props.pages);
 const fields = ref(props.fields);
-const { showFieldNumbers } = useFieldNumberingPreference();
-const fieldNumbers = computed(() => buildFieldNumbersFromLogicFields(fields.value));
 const saving = ref(false);
 const saveBinding = ref(null);
 const errors = ref({});
 
+const { showFieldNumbers } = useFieldNumberingPreference();
+const fieldNumbers = computed(() => {
+    if (!showFieldNumbers.value) return new Map();
+    return new Map(fields.value.map((field, index) => [field._id, index + 1]));
+});
+provide('fieldNumbers', fieldNumbers);
+
 const suggestableFields = computed(() => {
     return fields.value
         .filter(field => !['information', 'structure'].includes(field.category))
@@ -134,8 +140,6 @@ onUnmounted(() => {
             v-model:fields="fields"
             :suggestable-fields
             :fieldtypes
-            :show-field-numbers
-            :field-numbers
         />
     </div>
 </template>

From 5b04991c02f25b27d90c42fd393142c004d46eb1 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 2 Jul 2026 12:25:05 +0100
Subject: [PATCH 3/9] typescript

---
 resources/js/components/forms/FieldNumber.vue      | 14 +++++++-------
 .../js/components/forms/FieldNumberingToggle.vue   |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/forms/FieldNumber.vue b/resources/js/components/forms/FieldNumber.vue
index fc2872b0d78..7718d0cd9ef 100644
--- a/resources/js/components/forms/FieldNumber.vue
+++ b/resources/js/components/forms/FieldNumber.vue
@@ -1,13 +1,13 @@
-<script setup>
-import { computed, inject } from 'vue';
+<script setup lang="ts">
+import { computed, inject, type ComputedRef } from 'vue';
 
-const props = defineProps({
-    fieldKey: { type: String, default: null },
-});
+const props = defineProps<{
+    fieldKey?: string | null;
+}>();
 
-const fieldNumbers = inject('fieldNumbers', null);
+const fieldNumbers = inject<ComputedRef<Map<string, number>> | null>('fieldNumbers', null);
 
-const number = computed(() => fieldNumbers?.value?.get(props.fieldKey) ?? null);
+const number = computed(() => (props.fieldKey ? fieldNumbers?.value?.get(props.fieldKey) ?? null : null));
 </script>
 
 <template>
diff --git a/resources/js/components/forms/FieldNumberingToggle.vue b/resources/js/components/forms/FieldNumberingToggle.vue
index 14be7b3f775..b65b238222d 100644
--- a/resources/js/components/forms/FieldNumberingToggle.vue
+++ b/resources/js/components/forms/FieldNumberingToggle.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ToggleGroup, ToggleItem } from '@ui';
 import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 

From db8de9ce69fc874810529aec18e2954c13af36ed Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 2 Jul 2026 12:27:56 +0100
Subject: [PATCH 4/9] use different label based on toggle state

---
 resources/js/components/forms/FieldNumberingToggle.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/forms/FieldNumberingToggle.vue b/resources/js/components/forms/FieldNumberingToggle.vue
index b65b238222d..c9bced9d2d1 100644
--- a/resources/js/components/forms/FieldNumberingToggle.vue
+++ b/resources/js/components/forms/FieldNumberingToggle.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { ToggleGroup, ToggleItem } from '@ui';
 import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 
 const { showFieldNumbers } = useFieldNumberingPreference();
 
-const toggleFieldNumbers = () => showFieldNumbers.value = !showFieldNumbers.value;
+const toggle = () => showFieldNumbers.value = !showFieldNumbers.value;
+const label = computed(() => showFieldNumbers.value ? __('Hide field numbers') : __('Show field numbers'));
 </script>
 
 <template>
@@ -12,9 +14,9 @@ const toggleFieldNumbers = () => showFieldNumbers.value = !showFieldNumbers.valu
         <ToggleItem
             value="on"
             icon="mail-sign-hashtag"
-            :aria-label="__('Show field numbers')"
-            v-tooltip="__('Show field numbers')"
-            @click.prevent="toggleFieldNumbers"
+            :aria-label="label"
+            v-tooltip="label"
+            @click.prevent="toggle"
         />
     </ToggleGroup>
 </template>

From b330c6e0f45ca92579c90156b7fb4c387bca4f10 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 2 Jul 2026 12:40:42 +0100
Subject: [PATCH 5/9] show field numbers in logic dropdowns

---
 .../js/components/forms/builder/FieldInspector.vue     |  3 +++
 .../js/components/forms/builder/pages/PageRule.vue     |  3 +++
 resources/js/components/forms/logic/FieldLogicRule.vue |  2 ++
 resources/js/components/forms/logic/PageLogicRule.vue  |  4 ++++
 resources/js/pages/forms/Builder.vue                   | 10 ++++++----
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/forms/builder/FieldInspector.vue b/resources/js/components/forms/builder/FieldInspector.vue
index 1c4f1bbf1f3..2711f9a226b 100644
--- a/resources/js/components/forms/builder/FieldInspector.vue
+++ b/resources/js/components/forms/builder/FieldInspector.vue
@@ -5,6 +5,7 @@ import axios from 'axios';
 import { injectBuilderContext } from '@/pages/forms/Builder.vue';
 import FieldValidationBuilder from '@/components/field-validation/Builder.vue';
 import FieldConditionsBuilder from '@/components/field-conditions/Builder.vue';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 import { categories, categoryColorClasses } from './categories';
 import debounce from '@/util/debounce';
 
@@ -267,6 +268,7 @@ onMounted(() => load());
                     >
                         <template #field-option="{ value, label }">
                             <span class="inline-flex items-center gap-2">
+                                <FieldNumber :field-key="value" />
                                 <Icon
                                     v-if="findSuggestableField(value)?.icon"
                                     :name="findSuggestableField(value).icon"
@@ -277,6 +279,7 @@ onMounted(() => load());
                         </template>
                         <template #field-selected="{ option, field: selectedField }">
                             <span class="inline-flex items-center gap-2 truncate">
+                                <FieldNumber :field-key="option.value" />
                                 <Icon
                                     v-if="selectedField?.icon"
                                     :name="selectedField.icon"
diff --git a/resources/js/components/forms/builder/pages/PageRule.vue b/resources/js/components/forms/builder/pages/PageRule.vue
index d7ecacc2429..25642b84a8f 100644
--- a/resources/js/components/forms/builder/pages/PageRule.vue
+++ b/resources/js/components/forms/builder/pages/PageRule.vue
@@ -3,6 +3,7 @@ import { Button, Combobox, Icon } from '@ui';
 import { computed } from 'vue';
 import { nanoid as uniqid } from 'nanoid';
 import Condition from '@/components/field-conditions/Condition.vue';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 import { categories, categoryColorClasses } from '../categories';
 
 const emit = defineEmits(['update:rule', 'remove']);
@@ -155,6 +156,7 @@ const shouldBeIndented = (index) => {
                         >
                             <template #field-option="{ value, label }">
                                 <span class="inline-flex items-center gap-2">
+                                    <FieldNumber :field-key="value" />
                                     <Icon
                                         v-if="findSuggestableField(value)?.icon"
                                         :name="findSuggestableField(value).icon"
@@ -165,6 +167,7 @@ const shouldBeIndented = (index) => {
                             </template>
                             <template #field-selected="{ option, field: selectedField }">
                                 <span class="inline-flex items-center gap-2 truncate">
+                                    <FieldNumber :field-key="option.value" />
                                     <Icon
                                         v-if="selectedField?.icon"
                                         :name="selectedField.icon"
diff --git a/resources/js/components/forms/logic/FieldLogicRule.vue b/resources/js/components/forms/logic/FieldLogicRule.vue
index 9e338e53713..511176f8bd2 100644
--- a/resources/js/components/forms/logic/FieldLogicRule.vue
+++ b/resources/js/components/forms/logic/FieldLogicRule.vue
@@ -195,6 +195,7 @@ const onAlwaysSaveUpdated = (alwaysSave) => emit('update:conditions', { ...props
                         >
                             <template #field-option="{ value, label }">
                                 <span class="inline-flex items-center gap-2">
+                                    <FieldNumber :field-key="value" />
                                     <Icon
                                         v-if="findSuggestableField(value)?.icon"
                                         :name="findSuggestableField(value).icon"
@@ -205,6 +206,7 @@ const onAlwaysSaveUpdated = (alwaysSave) => emit('update:conditions', { ...props
                             </template>
                             <template #field-selected="{ option, field: selectedField }">
                                 <span class="inline-flex items-center gap-2 truncate">
+                                    <FieldNumber :field-key="option.value" />
                                     <Icon
                                         v-if="selectedField?.icon"
                                         :name="selectedField.icon"
diff --git a/resources/js/components/forms/logic/PageLogicRule.vue b/resources/js/components/forms/logic/PageLogicRule.vue
index 87c9869e7e4..1ca93f9aef7 100644
--- a/resources/js/components/forms/logic/PageLogicRule.vue
+++ b/resources/js/components/forms/logic/PageLogicRule.vue
@@ -10,6 +10,7 @@ import {
     Subheading,
 } from '@/components/ui';
 import PageRule from '@/components/forms/builder/pages/PageRule.vue';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
 
 const emit = defineEmits(['collapsed', 'expanded', 'removed', 'update:rule']);
@@ -59,6 +60,7 @@ const firstFieldConfig = computed(() => {
     if (!firstCondition?.field) return null;
     const field = getFieldConfig(firstCondition.field);
     return {
+        handle: firstCondition.field,
         display: field?.config?.display || firstCondition.field,
         icon: field?.icon || 'generic-field',
         iconClass: getIconClass(field?.category),
@@ -136,6 +138,7 @@ const toggleCollapsedState = () => props.collapsed ? emit('expanded') : emit('co
                         {{ __('If') }}
                     </Badge>
                     <Badge v-if="collapsed && firstFieldConfig" size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
+                        <FieldNumber :field-key="firstFieldConfig.handle" class="me-0.5" />
                         <Icon
                             :name="firstFieldConfig.icon"
                             class="size-3.5 me-1 rounded-sm opacity-100!"
@@ -177,6 +180,7 @@ const toggleCollapsedState = () => props.collapsed ? emit('expanded') : emit('co
                         </template>
                     </Subheading>
                     <Badge v-if="!collapsed && firstFieldConfig" size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
+                        <FieldNumber :field-key="firstFieldConfig.handle" class="me-0.5" />
                         <Icon
                             :name="firstFieldConfig.icon"
                             class="size-3.5 me-0.5 rounded-sm opacity-100!"
diff --git a/resources/js/pages/forms/Builder.vue b/resources/js/pages/forms/Builder.vue
index 7fe03219a9d..3567ea892fd 100644
--- a/resources/js/pages/forms/Builder.vue
+++ b/resources/js/pages/forms/Builder.vue
@@ -311,7 +311,7 @@ const fieldNumbers = computed(() => {
 
     const fieldsets = Object.values(usePage().props.fieldsets ?? {});
 
-    const keys = pages.value
+    const fieldKeys = pages.value
         .flatMap((page) => page.sections || [])
         .flatMap((section) => section.fields || [])
         .flatMap((field) => {
@@ -322,13 +322,15 @@ const fieldNumbers = computed(() => {
 
                 return (fieldset?.fields || [])
                     .filter((f) => f.type !== 'import')
-                    .map((f) => `${field._id}:${f.handle}`);
+                    .map((f) => [`${field._id}:${f.handle}`]);
             }
 
-            return [field._id];
+            return [[field._id, field.handle]];
         });
 
-    return new Map(keys.map((key, index) => [key, index + 1]));
+    const map = new Map();
+    fieldKeys.forEach((keys, index) => keys.forEach((key) => map.set(key, index + 1)));
+    return map;
 });
 
 provide('fieldNumbers', fieldNumbers);

From 70bcdbb7cce2ef5b21355233b0d03e3e2f450bfd Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 2 Jul 2026 14:42:10 +0100
Subject: [PATCH 6/9] add numbered fields toggle to submission publish form

it does blink slightly when you toggle it because it has to remount the PublishContainer component.

to avoid the blink, we'd need to swap PublishForm for using PublishContainer directly, then add slots in PublishFields and  PublishField.

it's not a major issue so going to keep it simple for now w/ the blink. if someone complains we can change it later.
---
 resources/js/components/ui/Publish/Form.vue |  4 ++-
 resources/js/pages/forms/Submission.vue     | 30 ++++++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Publish/Form.vue b/resources/js/components/ui/Publish/Form.vue
index 35c4b22a99d..bdf5be81cb6 100644
--- a/resources/js/components/ui/Publish/Form.vue
+++ b/resources/js/components/ui/Publish/Form.vue
@@ -90,7 +90,9 @@ onUnmounted(() => saveKeyBinding.destroy());
         <template v-if="!!$slots.title" #title>
             <slot name="title" />
         </template>
-        <Button v-if="!readOnly" variant="primary" :text="__('Save')" @click="save" :disabled="saving" />
+        <slot name="actions">
+            <Button v-if="!readOnly" variant="primary" :text="__('Save')" @click="save" :disabled="saving" />
+        </slot>
     </Header>
     <Container
         ref="container"
diff --git a/resources/js/pages/forms/Submission.vue b/resources/js/pages/forms/Submission.vue
index 58722a62002..11aad211c72 100644
--- a/resources/js/pages/forms/Submission.vue
+++ b/resources/js/pages/forms/Submission.vue
@@ -7,6 +7,8 @@ import Layout from '@/pages/layout/Layout.vue';
 import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from '@/pages/forms/Layout.vue';
 import SubmissionStatusIndicator from '@/components/forms/SubmissionStatusIndicator.vue';
+import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
+import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
 
@@ -21,9 +23,31 @@ const props = defineProps([
     'meta',
 ]);
 
+const { showFieldNumbers } = useFieldNumberingPreference();
+
 const formattedDate = computed(() => dateFormatter.format(props.date));
 const title = computed(() => `${__('Form Submission')} ${props.id}`);
 
+const numberedBlueprint = computed(() => {
+    if (!showFieldNumbers.value) return props.blueprint;
+
+    let number = 0;
+
+    return {
+        ...props.blueprint,
+        tabs: (props.blueprint.tabs || []).map((tab) => ({
+            ...tab,
+            sections: (tab.sections || []).map((section) => ({
+                ...section,
+                fields: (section.fields || []).map((field) => ({
+                    ...field,
+                    display: `${++number}. ${field.display ?? field.handle}`,
+                })),
+            })),
+        })),
+    };
+});
+
 provide('isFormSubmission', true);
 </script>
 
@@ -32,8 +56,9 @@ provide('isFormSubmission', true);
         <Head :title="[title, __(formTitle), __('Forms')]" />
 
         <PublishForm
+            :key="showFieldNumbers ? 'numbered' : null"
             :title="formattedDate"
-            :blueprint="blueprint"
+            :blueprint="numberedBlueprint"
             :initial-values="values"
             :initial-meta="meta"
             :submit-url="null"
@@ -43,6 +68,9 @@ provide('isFormSubmission', true);
                 <SubmissionStatusIndicator :status="status" />
                 {{ formattedDate }}
             </template>
+            <template #actions>
+                <FieldNumberingToggle />
+            </template>
         </PublishForm>
     </div>
 </template>

From 2877435051d1e91bc6fadcfd97c4f98aaf097194 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 2 Jul 2026 14:53:57 +0100
Subject: [PATCH 7/9] avoid numbering hidden or informational fields

---
 resources/js/pages/forms/Builder.vue    |  4 ++++
 resources/js/pages/forms/Logic.vue      | 11 ++++++++++-
 resources/js/pages/forms/Submission.vue | 12 ++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/forms/Builder.vue b/resources/js/pages/forms/Builder.vue
index 3567ea892fd..e91bb81bd47 100644
--- a/resources/js/pages/forms/Builder.vue
+++ b/resources/js/pages/forms/Builder.vue
@@ -325,6 +325,10 @@ const fieldNumbers = computed(() => {
                     .map((f) => [`${field._id}:${f.handle}`]);
             }
 
+            let isInformational = props.fieldtypes.find((fieldtype) => fieldtype.handle === field.fieldtype)?.categories?.[0] === 'information';
+
+            if (field.config?.hidden || isInformational) return [];
+
             return [[field._id, field.handle]];
         });
 
diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 717d2cdf2c5..0ae4caece76 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -32,7 +32,16 @@ const errors = ref({});
 const { showFieldNumbers } = useFieldNumberingPreference();
 const fieldNumbers = computed(() => {
     if (!showFieldNumbers.value) return new Map();
-    return new Map(fields.value.map((field, index) => [field._id, index + 1]));
+
+    let number = 0;
+    const map = new Map();
+
+    fields.value.forEach((field) => {
+        if (field.hidden || field.category === 'information') return;
+        map.set(field._id, ++number);
+    });
+
+    return map;
 });
 provide('fieldNumbers', fieldNumbers);
 
diff --git a/resources/js/pages/forms/Submission.vue b/resources/js/pages/forms/Submission.vue
index 11aad211c72..1880ff2af87 100644
--- a/resources/js/pages/forms/Submission.vue
+++ b/resources/js/pages/forms/Submission.vue
@@ -39,10 +39,14 @@ const numberedBlueprint = computed(() => {
             ...tab,
             sections: (tab.sections || []).map((section) => ({
                 ...section,
-                fields: (section.fields || []).map((field) => ({
-                    ...field,
-                    display: `${++number}. ${field.display ?? field.handle}`,
-                })),
+                fields: (section.fields || []).map((field) => {
+                    if (['form_heading', 'form_paragraph', 'form_banner'].includes(field.type)) return field;
+
+                    return {
+                        ...field,
+                        display: `${++number}. ${field.display ?? field.handle}`,
+                    };
+                }),
             })),
         })),
     };

From 10624c5db4b000a47d3ee92041bc4f49b06409a5 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 2 Jul 2026 14:55:48 +0100
Subject: [PATCH 8/9] indent

---
 resources/js/pages/forms/Builder.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/resources/js/pages/forms/Builder.vue b/resources/js/pages/forms/Builder.vue
index e91bb81bd47..851eec92089 100644
--- a/resources/js/pages/forms/Builder.vue
+++ b/resources/js/pages/forms/Builder.vue
@@ -426,18 +426,18 @@ onUnmounted(() => {
                 <div class="flex items-center gap-2.5">
                     <FieldNumberingToggle />
                     <ToggleGroup v-if="shouldShowViewSelector" v-model="fieldView" size="xs">
-                    <ToggleItem
-                        :value="FieldView.Expanded"
-                        icon="expand"
-                        :aria-label="__('Expanded view')"
-                        v-tooltip="__('Expanded view')"
-                    />
-                    <ToggleItem
-                        :value="FieldView.Collapsed"
-                        icon="collapse"
-                        :aria-label="__('Collapsed view')"
-                        v-tooltip="__('Collapsed view')"
-                    />
+                        <ToggleItem
+                            :value="FieldView.Expanded"
+                            icon="expand"
+                            :aria-label="__('Expanded view')"
+                            v-tooltip="__('Expanded view')"
+                        />
+                        <ToggleItem
+                            :value="FieldView.Collapsed"
+                            icon="collapse"
+                            :aria-label="__('Collapsed view')"
+                            v-tooltip="__('Collapsed view')"
+                        />
                     </ToggleGroup>
                 </div>
             </template>

From 2e1d7240e05c898ae06365cc24c629b69db21382 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 2 Jul 2026 14:56:43 +0100
Subject: [PATCH 9/9] rename

---
 resources/js/pages/forms/Submission.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/forms/Submission.vue b/resources/js/pages/forms/Submission.vue
index 1880ff2af87..702e1359738 100644
--- a/resources/js/pages/forms/Submission.vue
+++ b/resources/js/pages/forms/Submission.vue
@@ -28,7 +28,7 @@ const { showFieldNumbers } = useFieldNumberingPreference();
 const formattedDate = computed(() => dateFormatter.format(props.date));
 const title = computed(() => `${__('Form Submission')} ${props.id}`);
 
-const numberedBlueprint = computed(() => {
+const blueprint = computed(() => {
     if (!showFieldNumbers.value) return props.blueprint;
 
     let number = 0;
@@ -62,7 +62,7 @@ provide('isFormSubmission', true);
         <PublishForm
             :key="showFieldNumbers ? 'numbered' : null"
             :title="formattedDate"
-            :blueprint="numberedBlueprint"
+            :blueprint="blueprint"
             :initial-values="values"
             :initial-meta="meta"
             :submit-url="null"