From 6b7ff7a442d0a47ea7f3bb36b1dca51ad47c8a5c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 8 Jun 2026 11:27:33 +0100
Subject: [PATCH 01/79] Tree view - start prototype

---
 resources/js/pages/forms/Logic.vue     | 40 +++++++++++++++++++-------
 resources/js/pages/forms/LogicTree.vue | 14 +++++++++
 2 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 resources/js/pages/forms/LogicTree.vue

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index dc3b579b4e..60fc297c38 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -2,9 +2,10 @@
 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 { Button, Header, Icon, StatusIndicator, ToggleGroup, ToggleItem } from '@ui';
 import FieldLogic from '@/components/forms/logic/FieldLogic.vue';
 import PageLogic from '@/components/forms/logic/PageLogic.vue';
+import LogicTree from './LogicTree.vue';
 import Head from '@/pages/layout/Head.vue';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { keys } from '@api';
@@ -22,6 +23,7 @@ const props = defineProps({
 
 const pages = ref(props.pages);
 const fields = ref(props.fields);
+const logicView = ref('list');
 const saving = ref(false);
 const saveBinding = ref(null);
 const errors = ref({});
@@ -110,18 +112,34 @@ onUnmounted(() => {
                 <StatusIndicator status="published" />
                 {{ form.title }}
             </template>
+            <template #actions>
+                <ToggleGroup v-model="logicView" size="sm">
+                    <ToggleItem value="list" icon="layout-list" :label="__('List')" />
+                    <ToggleItem value="tree" icon="logic-tree" :label="__('Tree')" />
+                </ToggleGroup>
+            </template>
         </Header>
 
-        <PageLogic
-            v-if="pages.length > 1"
-            class="mb-6"
-            v-model:pages="pages"
-            :suggestable-fields
-            :fieldtypes
-        />
-
-        <FieldLogic
-            v-model:fields="fields"
+        <template v-if="logicView === 'list'">
+            <PageLogic
+                v-if="pages.length > 1"
+                class="mb-6"
+                v-model:pages="pages"
+                :suggestable-fields
+                :fieldtypes
+            />
+
+            <FieldLogic
+                v-model:fields="fields"
+                :suggestable-fields
+                :fieldtypes
+            />
+        </template>
+
+        <LogicTree
+            v-else
+            :pages
+            :fields
             :suggestable-fields
             :fieldtypes
         />
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
new file mode 100644
index 0000000000..fc038655c3
--- /dev/null
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+    pages: { type: Array, required: true },
+    fields: { type: Array, required: true },
+    suggestableFields: { type: Array, required: true },
+    fieldtypes: Array,
+});
+</script>
+
+<template>
+    <div class="rounded-lg border border-dashed border-gray-300 p-8 text-center text-gray-500 dark:border-gray-600 dark:text-gray-400">
+        {{ __('Tree view prototype') }}
+    </div>
+</template>

From 5472a6e34c220588ce91ec64c9e764632f72414d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 8 Jun 2026 12:07:41 +0100
Subject: [PATCH 02/79] Temp unhide Pro

---
 src/Statamic.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Statamic.php b/src/Statamic.php
index 7b0ce2bded..03afe4708b 100644
--- a/src/Statamic.php
+++ b/src/Statamic.php
@@ -57,7 +57,8 @@ public static function enablePro()
 
     public static function formsProInstalled(): bool
     {
-        return Composer::isInstalled('statamic/forms-pro');
+        // return Composer::isInstalled('statamic/forms-pro');
+        return true;
     }
 
     public static function availableScripts(Request $request)

From 5ed3e361d627a48ee50f1ad4b528890ad23ea35b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 8 Jun 2026 12:07:56 +0100
Subject: [PATCH 03/79] Tree view - look through fields

---
 resources/js/pages/forms/LogicTree.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index fc038655c3..6cdafd887e 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -8,7 +8,13 @@ defineProps({
 </script>
 
 <template>
-    <div class="rounded-lg border border-dashed border-gray-300 p-8 text-center text-gray-500 dark:border-gray-600 dark:text-gray-400">
-        {{ __('Tree view prototype') }}
-    </div>
+    <ul class="space-y-2">
+        <li
+            v-for="field in fields"
+            :key="field._id"
+            class="rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-900 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100"
+        >
+            {{ field.display }}
+        </li>
+    </ul>
 </template>

From 79ec46446e5a1c435cfeb8e87debe40f570f3c10 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 8 Jun 2026 16:58:32 +0100
Subject: [PATCH 04/79] Tree view - break into pages

---
 resources/js/pages/forms/LogicTree.vue | 42 ++++++++++++++++++++------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 6cdafd887e..4719d2d336 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,20 +1,44 @@
 <script setup>
-defineProps({
+import { Icon } from '@ui';
+import { computed } from 'vue';
+
+const props = defineProps({
     pages: { type: Array, required: true },
     fields: { type: Array, required: true },
     suggestableFields: { type: Array, required: true },
     fieldtypes: Array,
 });
+
+const pagesWithFields = computed(() => {
+    return props.pages.map((page, index) => ({
+        ...page,
+        title: page.display || __('Page :current of :total', { current: index + 1, total: props.pages.length }),
+        fields: props.fields.filter((field) => field.page_index === index),
+    }));
+});
 </script>
 
 <template>
-    <ul class="space-y-2">
-        <li
-            v-for="field in fields"
-            :key="field._id"
-            class="rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-900 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100"
+    <div class="space-y-8">
+        <section
+            v-for="page in pagesWithFields"
+            :key="page._id"
+            class="space-y-3"
         >
-            {{ field.display }}
-        </li>
-    </ul>
+            <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+                <Icon name="page" class="size-4 shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
+                <span>{{ __(page.title) }}</span>
+            </div>
+
+            <ul class="space-y-2">
+                <li
+                    v-for="field in page.fields"
+                    :key="field._id"
+                    class="rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-900 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100"
+                >
+                    {{ field.display }}
+                </li>
+            </ul>
+        </section>
+    </div>
 </template>

From b92302537c61a942013c052b31e065f1c5dfc1ec Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 8 Jun 2026 17:51:41 +0100
Subject: [PATCH 05/79] Tree view - connector experiments - demo 1

---
 resources/js/pages/forms/Logic.vue     |   8 +-
 resources/js/pages/forms/LogicTree.vue | 255 +++++++++++++++++++++----
 2 files changed, 218 insertions(+), 45 deletions(-)

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 60fc297c38..e3cd359f8a 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -136,12 +136,6 @@ onUnmounted(() => {
             />
         </template>
 
-        <LogicTree
-            v-else
-            :pages
-            :fields
-            :suggestable-fields
-            :fieldtypes
-        />
+        <LogicTree v-else />
     </div>
 </template>
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 4719d2d336..a8ce8a0da3 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,44 +1,223 @@
 <script setup>
-import { Icon } from '@ui';
-import { computed } from 'vue';
-
-const props = defineProps({
-    pages: { type: Array, required: true },
-    fields: { type: Array, required: true },
-    suggestableFields: { type: Array, required: true },
-    fieldtypes: Array,
-});
-
-const pagesWithFields = computed(() => {
-    return props.pages.map((page, index) => ({
-        ...page,
-        title: page.display || __('Page :current of :total', { current: index + 1, total: props.pages.length }),
-        fields: props.fields.filter((field) => field.page_index === index),
-    }));
-});
+import { onMounted, ref } from 'vue';
+
+// https://codepen.io/cbolson/pen/emzegWP — JS only sets --relation; connectors are pure CSS anchor positioning
+const root = ref(null);
+const REL = ['-1', '0', '1'];
+
+function updateRelations() {
+    const rootEl = root.value;
+    if (!rootEl) return;
+
+    const radioLi = rootEl.querySelector('.options li:has(input:checked)');
+    if (!radioLi) return;
+
+    const radioIndex = [...radioLi.parentElement.children].indexOf(radioLi);
+
+    rootEl.querySelectorAll('.items li').forEach((li, i) => {
+        li.style.setProperty('--relation', REL[Math.sign(i - radioIndex) + 1]);
+        li.dataset.relation = REL[Math.sign(i - radioIndex) + 1];
+    });
+}
+
+onMounted(updateRelations);
 </script>
 
 <template>
-    <div class="space-y-8">
-        <section
-            v-for="page in pagesWithFields"
-            :key="page._id"
-            class="space-y-3"
-        >
-            <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-                <Icon name="page" class="size-4 shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
-                <span>{{ __(page.title) }}</span>
-            </div>
-
-            <ul class="space-y-2">
-                <li
-                    v-for="field in page.fields"
-                    :key="field._id"
-                    class="rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-900 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100"
-                >
-                    {{ field.display }}
-                </li>
-            </ul>
-        </section>
+    <!-- https://codepen.io/cbolson/pen/emzegWP -->
+    <div id="linked-list" ref="root" class="linked-list" @change="updateRelations">
+        <ul class="list items" aria-labelledby="items-label">
+            <li>
+                <label for="logic-tree-item-1">
+                    <input id="logic-tree-item-1" type="checkbox" class="cb" value="1" checked>
+                    Item 1
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-item-2">
+                    <input id="logic-tree-item-2" type="checkbox" class="cb" value="2">
+                    Item 2
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-item-3">
+                    <input id="logic-tree-item-3" type="checkbox" class="cb" value="3" checked>
+                    Item 3
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-item-4">
+                    <input id="logic-tree-item-4" type="checkbox" class="cb" value="4" checked>
+                    Item 4
+                </label>
+            </li>
+        </ul>
+
+        <ul class="list options" role="radiogroup" aria-labelledby="visit-label">
+            <li>
+                <label for="logic-tree-radio-1">
+                    <input id="logic-tree-radio-1" type="radio" name="logic-tree-visit" class="rb" value="1">
+                    Option 1
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-radio-2">
+                    <input id="logic-tree-radio-2" type="radio" name="logic-tree-visit" class="rb" value="2">
+                    Option 2
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-radio-3">
+                    <input id="logic-tree-radio-3" type="radio" name="logic-tree-visit" class="rb" value="3">
+                    Option 3
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-radio-4">
+                    <input id="logic-tree-radio-4" type="radio" name="logic-tree-visit" class="rb" value="4">
+                    Option 4
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-radio-5">
+                    <input id="logic-tree-radio-5" type="radio" name="logic-tree-visit" class="rb" value="5">
+                    Option 5
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-radio-6">
+                    <input id="logic-tree-radio-6" type="radio" name="logic-tree-visit" class="rb" value="6" checked>
+                    Option 6
+                </label>
+            </li>
+            <li>
+                <label for="logic-tree-radio-7">
+                    <input id="logic-tree-radio-7" type="radio" name="logic-tree-visit" class="rb" value="7">
+                    Option 7
+                </label>
+            </li>
+        </ul>
     </div>
 </template>
+
+<style>
+/* https://codepen.io/cbolson/pen/emzegWP — flat CSS equivalent (Vue SFC can't use nested @container) */
+.linked-list {
+    --checkbox-checked-border-color: dodgerblue;
+    --radio-checked-border-color: dodgerblue;
+    --join-stroke: 1px;
+    --join-line: var(--join-stroke) dashed dodgerblue;
+    --join-radius: 20px;
+    --gap: 10vw;
+    --clr-lines: rgba(0 0 0 / 0.25);
+
+    position: relative;
+    display: grid;
+    align-items: start;
+    grid-template-columns: 1fr 1fr;
+    width: min(100%, 800px);
+    gap: var(--gap);
+}
+
+:where(.dark) .linked-list {
+    --clr-lines: rgba(255 255 255 / 0.25);
+}
+
+.linked-list .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: 0.5rem;
+}
+
+.linked-list .list > li {
+    border: 1px solid var(--clr-lines);
+    display: flex;
+    align-items: center;
+}
+
+.linked-list .list > li > label {
+    flex: 1;
+    padding: 0.5rem;
+    cursor: pointer;
+}
+
+.linked-list .list.items li:has(:checked) label {
+    anchor-name: --checked-option;
+    anchor-scope: --checked-option;
+    border-color: var(--checkbox-checked-border-color);
+}
+
+.linked-list .list.items li:has(:checked) label::before,
+.linked-list .list.items li:has(:checked) label::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    border: var(--join-line);
+    right: calc(anchor(left --radio-option) + var(--gap) / 2);
+    left: anchor(right --checked-option);
+}
+
+.linked-list .list.items li:has(:checked) label::after {
+    right: anchor(left --radio-option);
+    left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
+}
+
+/* source above target */
+.linked-list .list.items li[data-relation="-1"]:has(:checked) label::before {
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    border-radius: 0 var(--join-radius) 0 0;
+    top: anchor(center --checked-option);
+    bottom: anchor(top --radio-option);
+}
+
+.linked-list .list.items li[data-relation="-1"]:has(:checked) label::after {
+    border-right-color: transparent;
+    border-top-color: transparent;
+    border-radius: 0 0 0 var(--join-radius);
+    top: calc(anchor(top --radio-option) - var(--join-stroke));
+    height: var(--join-radius);
+    bottom: auto;
+}
+
+/* source below target */
+.linked-list .list.items li[data-relation="1"]:has(:checked) label::before {
+    border-left-color: transparent;
+    border-top-color: transparent;
+    border-radius: 0 0 var(--join-radius) 0;
+    top: anchor(bottom --radio-option);
+    bottom: anchor(center --checked-option);
+}
+
+.linked-list .list.items li[data-relation="1"]:has(:checked) label::after {
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-radius: var(--join-radius) 0 0 0;
+    top: auto;
+    bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
+    height: var(--join-radius);
+}
+
+/* source level with target */
+.linked-list .list.items li[data-relation="0"]:has(:checked) label::before {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    border-radius: 0;
+    top: calc(anchor(center --radio-option) - var(--join-stroke));
+    bottom: calc(anchor(center --checked-option) + var(--join-stroke));
+    right: anchor(left --radio-option);
+    left: anchor(right --checked-option);
+}
+
+.linked-list .list.items li[data-relation="0"]:has(:checked) label::after {
+    display: none;
+}
+
+.linked-list .list.options li:has(:checked) {
+    anchor-name: --radio-option;
+    border-color: var(--radio-checked-border-color);
+}
+</style>

From 1953f716590ab8fe18323220b76b78f78a74d954 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 09:16:58 +0100
Subject: [PATCH 06/79] Put logic tree CSS in separate file

---
 resources/css/components/logic-tree.css | 119 +++++++++++++++++++++++
 resources/css/cp.css                    |   1 +
 resources/js/pages/forms/LogicTree.vue  | 122 ------------------------
 3 files changed, 120 insertions(+), 122 deletions(-)
 create mode 100644 resources/css/components/logic-tree.css

diff --git a/resources/css/components/logic-tree.css b/resources/css/components/logic-tree.css
new file mode 100644
index 0000000000..8fd451c515
--- /dev/null
+++ b/resources/css/components/logic-tree.css
@@ -0,0 +1,119 @@
+/* https://codepen.io/cbolson/pen/emzegWP — flat CSS equivalent (Vue SFC can't use nested @container) */
+.linked-list {
+    --checkbox-checked-border-color: dodgerblue;
+    --radio-checked-border-color: dodgerblue;
+    --join-stroke: 1px;
+    --join-line: var(--join-stroke) dashed dodgerblue;
+    --join-radius: 20px;
+    --gap: 10vw;
+    --clr-lines: rgba(0 0 0 / 0.25);
+
+    position: relative;
+    display: grid;
+    align-items: start;
+    grid-template-columns: 1fr 1fr;
+    width: min(100%, 800px);
+    gap: var(--gap);
+}
+
+:where(.dark) .linked-list {
+    --clr-lines: rgba(255 255 255 / 0.25);
+}
+
+.linked-list .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: 0.5rem;
+}
+
+.linked-list .list > li {
+    border: 1px solid var(--clr-lines);
+    display: flex;
+    align-items: center;
+}
+
+.linked-list .list > li > label {
+    flex: 1;
+    padding: 0.5rem;
+    cursor: pointer;
+}
+
+.linked-list .list.items li:has(:checked) label {
+    anchor-name: --checked-option;
+    anchor-scope: --checked-option;
+    border-color: var(--checkbox-checked-border-color);
+}
+
+.linked-list .list.items li:has(:checked) label::before,
+.linked-list .list.items li:has(:checked) label::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    border: var(--join-line);
+    right: calc(anchor(left --radio-option) + var(--gap) / 2);
+    left: anchor(right --checked-option);
+}
+
+.linked-list .list.items li:has(:checked) label::after {
+    right: anchor(left --radio-option);
+    left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
+}
+
+/* source above target */
+.linked-list .list.items li[data-relation="-1"]:has(:checked) label::before {
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    border-radius: 0 var(--join-radius) 0 0;
+    top: anchor(center --checked-option);
+    bottom: anchor(top --radio-option);
+}
+
+.linked-list .list.items li[data-relation="-1"]:has(:checked) label::after {
+    border-right-color: transparent;
+    border-top-color: transparent;
+    border-radius: 0 0 0 var(--join-radius);
+    top: calc(anchor(top --radio-option) - var(--join-stroke));
+    height: var(--join-radius);
+    bottom: auto;
+}
+
+/* source below target */
+.linked-list .list.items li[data-relation="1"]:has(:checked) label::before {
+    border-left-color: transparent;
+    border-top-color: transparent;
+    border-radius: 0 0 var(--join-radius) 0;
+    top: anchor(bottom --radio-option);
+    bottom: anchor(center --checked-option);
+}
+
+.linked-list .list.items li[data-relation="1"]:has(:checked) label::after {
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-radius: var(--join-radius) 0 0 0;
+    top: auto;
+    bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
+    height: var(--join-radius);
+}
+
+/* source level with target */
+.linked-list .list.items li[data-relation="0"]:has(:checked) label::before {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    border-radius: 0;
+    top: calc(anchor(center --radio-option) - var(--join-stroke));
+    bottom: calc(anchor(center --checked-option) + var(--join-stroke));
+    right: anchor(left --radio-option);
+    left: anchor(right --checked-option);
+}
+
+.linked-list .list.items li[data-relation="0"]:has(:checked) label::after {
+    display: none;
+}
+
+.linked-list .list.options li:has(:checked) {
+    anchor-name: --radio-option;
+    border-color: var(--radio-checked-border-color);
+}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index cb32123428..c8a08ded27 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -18,6 +18,7 @@
 @import './components/notifications.css';
 @import './components/page-tree.css';
 @import './components/forms.css';
+@import './components/logic-tree.css';
 @import './components/pagination.css';
 @import './components/popover.css';
 @import './components/preview.css';
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index a8ce8a0da3..b4802afe93 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -99,125 +99,3 @@ onMounted(updateRelations);
         </ul>
     </div>
 </template>
-
-<style>
-/* https://codepen.io/cbolson/pen/emzegWP — flat CSS equivalent (Vue SFC can't use nested @container) */
-.linked-list {
-    --checkbox-checked-border-color: dodgerblue;
-    --radio-checked-border-color: dodgerblue;
-    --join-stroke: 1px;
-    --join-line: var(--join-stroke) dashed dodgerblue;
-    --join-radius: 20px;
-    --gap: 10vw;
-    --clr-lines: rgba(0 0 0 / 0.25);
-
-    position: relative;
-    display: grid;
-    align-items: start;
-    grid-template-columns: 1fr 1fr;
-    width: min(100%, 800px);
-    gap: var(--gap);
-}
-
-:where(.dark) .linked-list {
-    --clr-lines: rgba(255 255 255 / 0.25);
-}
-
-.linked-list .list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: grid;
-    gap: 0.5rem;
-}
-
-.linked-list .list > li {
-    border: 1px solid var(--clr-lines);
-    display: flex;
-    align-items: center;
-}
-
-.linked-list .list > li > label {
-    flex: 1;
-    padding: 0.5rem;
-    cursor: pointer;
-}
-
-.linked-list .list.items li:has(:checked) label {
-    anchor-name: --checked-option;
-    anchor-scope: --checked-option;
-    border-color: var(--checkbox-checked-border-color);
-}
-
-.linked-list .list.items li:has(:checked) label::before,
-.linked-list .list.items li:has(:checked) label::after {
-    content: '';
-    position: absolute;
-    pointer-events: none;
-    border: var(--join-line);
-    right: calc(anchor(left --radio-option) + var(--gap) / 2);
-    left: anchor(right --checked-option);
-}
-
-.linked-list .list.items li:has(:checked) label::after {
-    right: anchor(left --radio-option);
-    left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
-}
-
-/* source above target */
-.linked-list .list.items li[data-relation="-1"]:has(:checked) label::before {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-    border-radius: 0 var(--join-radius) 0 0;
-    top: anchor(center --checked-option);
-    bottom: anchor(top --radio-option);
-}
-
-.linked-list .list.items li[data-relation="-1"]:has(:checked) label::after {
-    border-right-color: transparent;
-    border-top-color: transparent;
-    border-radius: 0 0 0 var(--join-radius);
-    top: calc(anchor(top --radio-option) - var(--join-stroke));
-    height: var(--join-radius);
-    bottom: auto;
-}
-
-/* source below target */
-.linked-list .list.items li[data-relation="1"]:has(:checked) label::before {
-    border-left-color: transparent;
-    border-top-color: transparent;
-    border-radius: 0 0 var(--join-radius) 0;
-    top: anchor(bottom --radio-option);
-    bottom: anchor(center --checked-option);
-}
-
-.linked-list .list.items li[data-relation="1"]:has(:checked) label::after {
-    border-right-color: transparent;
-    border-bottom-color: transparent;
-    border-radius: var(--join-radius) 0 0 0;
-    top: auto;
-    bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
-    height: var(--join-radius);
-}
-
-/* source level with target */
-.linked-list .list.items li[data-relation="0"]:has(:checked) label::before {
-    border-top-color: transparent;
-    border-right-color: transparent;
-    border-left-color: transparent;
-    border-radius: 0;
-    top: calc(anchor(center --radio-option) - var(--join-stroke));
-    bottom: calc(anchor(center --checked-option) + var(--join-stroke));
-    right: anchor(left --radio-option);
-    left: anchor(right --checked-option);
-}
-
-.linked-list .list.items li[data-relation="0"]:has(:checked) label::after {
-    display: none;
-}
-
-.linked-list .list.options li:has(:checked) {
-    anchor-name: --radio-option;
-    border-color: var(--radio-checked-border-color);
-}
-</style>

From 3ea076b4cf1eabfd3604814833eb66def7970a24 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 09:20:23 +0100
Subject: [PATCH 07/79] Remember Logic view preference

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

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index e3cd359f8a..eae947e5f9 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -8,7 +8,7 @@ import PageLogic from '@/components/forms/logic/PageLogic.vue';
 import LogicTree from './LogicTree.vue';
 import Head from '@/pages/layout/Head.vue';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { keys } from '@api';
+import { keys, preferences } from '@api';
 import axios from 'axios';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
@@ -23,7 +23,9 @@ const props = defineProps({
 
 const pages = ref(props.pages);
 const fields = ref(props.fields);
-const logicView = ref('list');
+const logicViewPreferenceKey = 'forms.logic.view';
+const logicView = ref(preferences.get(logicViewPreferenceKey, 'list'));
+watch(logicView, (view) => preferences.set(logicViewPreferenceKey, view));
 const saving = ref(false);
 const saveBinding = ref(null);
 const errors = ref({});

From c799c2f62e01c6e6d16519daa86a5eb04a436606 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 09:46:19 +0100
Subject: [PATCH 08/79] Nest CSS

---
 resources/css/components/forms/logic-tree.css | 125 ++++++++++++++++++
 resources/css/components/logic-tree.css       | 119 -----------------
 resources/css/cp.css                          |   2 +-
 3 files changed, 126 insertions(+), 120 deletions(-)
 create mode 100644 resources/css/components/forms/logic-tree.css
 delete mode 100644 resources/css/components/logic-tree.css

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
new file mode 100644
index 0000000000..bef42439aa
--- /dev/null
+++ b/resources/css/components/forms/logic-tree.css
@@ -0,0 +1,125 @@
+/* https://codepen.io/cbolson/pen/emzegWP */
+.linked-list {
+    --checkbox-checked-border-color: var(--color-blue-400);
+    --radio-checked-border-color: var(--color-blue-400);
+    --join-stroke: 1px;
+    --join-line: var(--join-stroke) dashed var(--color-blue-400);
+    --join-radius: 25px;
+    --gap: 10vw;
+    --clr-lines: rgba(0 0 0 / 0.25);
+
+    position: relative;
+    display: grid;
+    align-items: start;
+    grid-template-columns: 1fr 1fr;
+    width: min(100%, 800px);
+    gap: var(--gap);
+
+    :where(.dark) & {
+        --clr-lines: rgba(255 255 255 / 0.25);
+    }
+
+    .list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: grid;
+        gap: 0.5rem;
+
+        & > li {
+            border: 1px solid var(--clr-lines);
+            display: flex;
+            align-items: center;
+
+            & > label {
+                flex: 1;
+                padding: 0.5rem;
+                cursor: pointer;
+            }
+        }
+
+        &.items li:has(:checked) label {
+            anchor-name: --checked-option;
+            anchor-scope: --checked-option;
+            border-color: var(--checkbox-checked-border-color);
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                pointer-events: none;
+                border: var(--join-line);
+                right: calc(anchor(left --radio-option) + var(--gap) / 2);
+                left: anchor(right --checked-option);
+            }
+
+            &::after {
+                right: anchor(left --radio-option);
+                left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
+            }
+        }
+
+        /* source above target */
+        &.items li[data-relation="-1"]:has(:checked) label {
+            &::before {
+                border-left-color: transparent;
+                border-bottom-color: transparent;
+                border-radius: 0 var(--join-radius) 0 0;
+                top: anchor(center --checked-option);
+                bottom: anchor(top --radio-option);
+            }
+
+            &::after {
+                border-right-color: transparent;
+                border-top-color: transparent;
+                border-radius: 0 0 0 var(--join-radius);
+                top: calc(anchor(top --radio-option) - var(--join-stroke));
+                height: var(--join-radius);
+                bottom: auto;
+            }
+        }
+
+        /* source below target */
+        &.items li[data-relation="1"]:has(:checked) label {
+            &::before {
+                border-left-color: transparent;
+                border-top-color: transparent;
+                border-radius: 0 0 var(--join-radius) 0;
+                top: anchor(bottom --radio-option);
+                bottom: anchor(center --checked-option);
+            }
+
+            &::after {
+                border-right-color: transparent;
+                border-bottom-color: transparent;
+                border-radius: var(--join-radius) 0 0 0;
+                top: auto;
+                bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
+                height: var(--join-radius);
+            }
+        }
+
+        /* source level with target */
+        &.items li[data-relation="0"]:has(:checked) label {
+            &::before {
+                border-top-color: transparent;
+                border-right-color: transparent;
+                border-left-color: transparent;
+                border-radius: 0;
+                top: calc(anchor(center --radio-option) - var(--join-stroke));
+                bottom: calc(anchor(center --checked-option) + var(--join-stroke));
+                right: anchor(left --radio-option);
+                left: anchor(right --checked-option);
+            }
+
+            &::after {
+                display: none;
+            }
+        }
+
+        &.options li:has(:checked) {
+            anchor-name: --radio-option;
+            border-color: var(--radio-checked-border-color);
+        }
+    }
+}
diff --git a/resources/css/components/logic-tree.css b/resources/css/components/logic-tree.css
deleted file mode 100644
index 8fd451c515..0000000000
--- a/resources/css/components/logic-tree.css
+++ /dev/null
@@ -1,119 +0,0 @@
-/* https://codepen.io/cbolson/pen/emzegWP — flat CSS equivalent (Vue SFC can't use nested @container) */
-.linked-list {
-    --checkbox-checked-border-color: dodgerblue;
-    --radio-checked-border-color: dodgerblue;
-    --join-stroke: 1px;
-    --join-line: var(--join-stroke) dashed dodgerblue;
-    --join-radius: 20px;
-    --gap: 10vw;
-    --clr-lines: rgba(0 0 0 / 0.25);
-
-    position: relative;
-    display: grid;
-    align-items: start;
-    grid-template-columns: 1fr 1fr;
-    width: min(100%, 800px);
-    gap: var(--gap);
-}
-
-:where(.dark) .linked-list {
-    --clr-lines: rgba(255 255 255 / 0.25);
-}
-
-.linked-list .list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: grid;
-    gap: 0.5rem;
-}
-
-.linked-list .list > li {
-    border: 1px solid var(--clr-lines);
-    display: flex;
-    align-items: center;
-}
-
-.linked-list .list > li > label {
-    flex: 1;
-    padding: 0.5rem;
-    cursor: pointer;
-}
-
-.linked-list .list.items li:has(:checked) label {
-    anchor-name: --checked-option;
-    anchor-scope: --checked-option;
-    border-color: var(--checkbox-checked-border-color);
-}
-
-.linked-list .list.items li:has(:checked) label::before,
-.linked-list .list.items li:has(:checked) label::after {
-    content: '';
-    position: absolute;
-    pointer-events: none;
-    border: var(--join-line);
-    right: calc(anchor(left --radio-option) + var(--gap) / 2);
-    left: anchor(right --checked-option);
-}
-
-.linked-list .list.items li:has(:checked) label::after {
-    right: anchor(left --radio-option);
-    left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
-}
-
-/* source above target */
-.linked-list .list.items li[data-relation="-1"]:has(:checked) label::before {
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-    border-radius: 0 var(--join-radius) 0 0;
-    top: anchor(center --checked-option);
-    bottom: anchor(top --radio-option);
-}
-
-.linked-list .list.items li[data-relation="-1"]:has(:checked) label::after {
-    border-right-color: transparent;
-    border-top-color: transparent;
-    border-radius: 0 0 0 var(--join-radius);
-    top: calc(anchor(top --radio-option) - var(--join-stroke));
-    height: var(--join-radius);
-    bottom: auto;
-}
-
-/* source below target */
-.linked-list .list.items li[data-relation="1"]:has(:checked) label::before {
-    border-left-color: transparent;
-    border-top-color: transparent;
-    border-radius: 0 0 var(--join-radius) 0;
-    top: anchor(bottom --radio-option);
-    bottom: anchor(center --checked-option);
-}
-
-.linked-list .list.items li[data-relation="1"]:has(:checked) label::after {
-    border-right-color: transparent;
-    border-bottom-color: transparent;
-    border-radius: var(--join-radius) 0 0 0;
-    top: auto;
-    bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
-    height: var(--join-radius);
-}
-
-/* source level with target */
-.linked-list .list.items li[data-relation="0"]:has(:checked) label::before {
-    border-top-color: transparent;
-    border-right-color: transparent;
-    border-left-color: transparent;
-    border-radius: 0;
-    top: calc(anchor(center --radio-option) - var(--join-stroke));
-    bottom: calc(anchor(center --checked-option) + var(--join-stroke));
-    right: anchor(left --radio-option);
-    left: anchor(right --checked-option);
-}
-
-.linked-list .list.items li[data-relation="0"]:has(:checked) label::after {
-    display: none;
-}
-
-.linked-list .list.options li:has(:checked) {
-    anchor-name: --radio-option;
-    border-color: var(--radio-checked-border-color);
-}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index c8a08ded27..d3aef6130c 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -18,7 +18,7 @@
 @import './components/notifications.css';
 @import './components/page-tree.css';
 @import './components/forms.css';
-@import './components/logic-tree.css';
+@import './components/forms/logic-tree.css';
 @import './components/pagination.css';
 @import './components/popover.css';
 @import './components/preview.css';

From 837d886f2f24308578dac20bfc376261fe68dd18 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 10:08:37 +0100
Subject: [PATCH 09/79] Tree view CSS - tidy and explain everything

---
 resources/css/components/forms/logic-tree.css | 259 +++++++++++-------
 1 file changed, 155 insertions(+), 104 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index bef42439aa..e72ff0fc25 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -1,125 +1,176 @@
-/* https://codepen.io/cbolson/pen/emzegWP */
-.linked-list {
-    --checkbox-checked-border-color: var(--color-blue-400);
-    --radio-checked-border-color: var(--color-blue-400);
-    --join-stroke: 1px;
-    --join-line: var(--join-stroke) dashed var(--color-blue-400);
-    --join-radius: 25px;
-    --gap: 10vw;
-    --clr-lines: rgba(0 0 0 / 0.25);
-
-    position: relative;
-    display: grid;
-    align-items: start;
-    grid-template-columns: 1fr 1fr;
-    width: min(100%, 800px);
-    gap: var(--gap);
-
-    :where(.dark) & {
-        --clr-lines: rgba(255 255 255 / 0.25);
-    }
+/* GROUP LOGIC TREE CONNECTORS
+=================================================== */
+/*
+    URL: /cp/forms/{handle}/logic (Tree view)
 
-    .list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: grid;
-        gap: 0.5rem;
+    Connects checked source fields (left column) to the selected destination
+    (right column) using CSS anchor positioning. Inspired by:
+    https://codepen.io/cbolson/pen/emzegWP
 
-        & > li {
-            border: 1px solid var(--clr-lines);
-            display: flex;
-            align-items: center;
+    Anatomy (source above target, data-relation="-1"):
 
-            & > label {
-                flex: 1;
-                padding: 0.5rem;
-                cursor: pointer;
-            }
-        }
+        [source]────┐
+                    │ ::before  — source leg (horizontal out + vertical down)
+                    │
+                    └──────┐ ::after   — destination leg (horizontal in + corner)
+                           │
+                      [destination]
 
-        &.items li:has(:checked) label {
-            anchor-name: --checked-option;
-            anchor-scope: --checked-option;
-            border-color: var(--checkbox-checked-border-color);
-
-            &::before,
-            &::after {
-                content: '';
-                position: absolute;
-                pointer-events: none;
-                border: var(--join-line);
-                right: calc(anchor(left --radio-option) + var(--gap) / 2);
-                left: anchor(right --checked-option);
-            }
+    Each connector is two pseudo-elements on the source label:
 
-            &::after {
-                right: anchor(left --radio-option);
-                left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
-            }
+        ::before  —  left half of the gap + vertical leg from the source
+        ::after   —  right half of the gap + rounded corner at the destination
+
+    JS (LogicTree.vue) sets data-relation on each source <li> by comparing
+    list index to the checked destination:
+
+        -1  source above destination
+         0  source level with destination (straight line, no ::after)
+         1  source below destination
+*/
+@layer components {
+    /* Inspired by https://codepen.io/cbolson/pen/emzegWP */
+    .linked-list {
+        --checkbox-checked-border-color: var(--color-blue-400);
+        --radio-checked-border-color: var(--color-blue-400);
+        --join-stroke: 1px;
+        --join-line: var(--join-stroke) dashed var(--color-blue-400);
+        --join-radius: 15px;
+        --gap: 10vw;
+        --clr-lines: rgba(0 0 0 / 0.25);
+
+        /* GROUP LOGIC TREE CONNECTORS / LAYOUT
+        =================================================== */
+        position: relative;
+        display: grid;
+        align-items: start;
+        grid-template-columns: 1fr 1fr;
+        width: min(100%, 800px);
+        gap: var(--gap);
+
+        :where(.dark) & {
+            --clr-lines: rgba(255 255 255 / 0.25);
         }
 
-        /* source above target */
-        &.items li[data-relation="-1"]:has(:checked) label {
-            &::before {
-                border-left-color: transparent;
-                border-bottom-color: transparent;
-                border-radius: 0 var(--join-radius) 0 0;
-                top: anchor(center --checked-option);
-                bottom: anchor(top --radio-option);
-            }
+        .list {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            display: grid;
+            gap: 0.5rem;
+
+            & > li {
+                border: 1px solid var(--clr-lines);
+                display: flex;
+                align-items: center;
 
-            &::after {
-                border-right-color: transparent;
-                border-top-color: transparent;
-                border-radius: 0 0 0 var(--join-radius);
-                top: calc(anchor(top --radio-option) - var(--join-stroke));
-                height: var(--join-radius);
-                bottom: auto;
+                & > label {
+                    flex: 1;
+                    padding: 0.5rem;
+                    cursor: pointer;
+                }
             }
-        }
 
-        /* source below target */
-        &.items li[data-relation="1"]:has(:checked) label {
-            &::before {
-                border-left-color: transparent;
-                border-top-color: transparent;
-                border-radius: 0 0 var(--join-radius) 0;
-                top: anchor(bottom --radio-option);
-                bottom: anchor(center --checked-option);
+            /* GROUP LOGIC TREE CONNECTORS / SOURCE ANCHOR
+            =================================================== */
+            &.items li:has(:checked) label {
+                anchor-name: --checked-option;
+                anchor-scope: --checked-option; /* one anchor per checked source */
+                border-color: var(--checkbox-checked-border-color);
+
+                /* GROUP LOGIC TREE CONNECTORS / CONNECTOR BASE
+                =================================================== */
+                /* Shared by all relations — sets the horizontal width of both legs.
+                   ::before spans source right edge → gap midpoint.
+                   ::after  spans gap midpoint → destination left edge. */
+                &::before,
+                &::after {
+                    content: '';
+                    position: absolute;
+                    pointer-events: none;
+                    border: var(--join-line);
+                    right: calc(anchor(left --radio-option) + var(--gap) / 2);
+                    left: anchor(right --checked-option);
+                }
+
+                &::after {
+                    right: anchor(left --radio-option);
+                    left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
+                }
             }
 
-            &::after {
-                border-right-color: transparent;
-                border-bottom-color: transparent;
-                border-radius: var(--join-radius) 0 0 0;
-                top: auto;
-                bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
-                height: var(--join-radius);
+            /* GROUP LOGIC TREE CONNECTORS / RELATION -1 (SOURCE ABOVE)
+            =================================================== */
+            &.items li[data-relation="-1"]:has(:checked) label {
+                /* ::before — source leg: out from source centre, down to destination top */
+                &::before {
+                    border-left-color: transparent;
+                    border-bottom-color: transparent;
+                    border-radius: 0 var(--join-radius) 0 0;
+                    top: anchor(center --checked-option);
+                    bottom: anchor(top --radio-option);
+                }
+
+                /* ::after — destination corner: short segment + curve at destination top */
+                &::after {
+                    border-right-color: transparent;
+                    border-top-color: transparent;
+                    border-radius: 0 0 0 var(--join-radius);
+                    top: calc(anchor(top --radio-option) - var(--join-stroke));
+                    height: var(--join-radius);
+                    bottom: auto;
+                }
             }
-        }
 
-        /* source level with target */
-        &.items li[data-relation="0"]:has(:checked) label {
-            &::before {
-                border-top-color: transparent;
-                border-right-color: transparent;
-                border-left-color: transparent;
-                border-radius: 0;
-                top: calc(anchor(center --radio-option) - var(--join-stroke));
-                bottom: calc(anchor(center --checked-option) + var(--join-stroke));
-                right: anchor(left --radio-option);
-                left: anchor(right --checked-option);
+            /* GROUP LOGIC TREE CONNECTORS / RELATION 1 (SOURCE BELOW)
+            =================================================== */
+            &.items li[data-relation="1"]:has(:checked) label {
+                /* ::before — source leg: up from destination bottom, to source centre */
+                &::before {
+                    border-left-color: transparent;
+                    border-top-color: transparent;
+                    border-radius: 0 0 var(--join-radius) 0;
+                    top: anchor(bottom --radio-option);
+                    bottom: anchor(center --checked-option);
+                }
+
+                /* ::after — destination corner: short segment + curve at destination bottom */
+                &::after {
+                    border-right-color: transparent;
+                    border-bottom-color: transparent;
+                    border-radius: var(--join-radius) 0 0 0;
+                    top: auto;
+                    bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
+                    height: var(--join-radius);
+                }
             }
 
-            &::after {
-                display: none;
+            /* GROUP LOGIC TREE CONNECTORS / RELATION 0 (SOURCE LEVEL)
+            =================================================== */
+            &.items li[data-relation="0"]:has(:checked) label {
+                /* ::before only — straight horizontal line between row centres */
+                &::before {
+                    border-top-color: transparent;
+                    border-right-color: transparent;
+                    border-left-color: transparent;
+                    border-radius: 0;
+                    top: calc(anchor(center --radio-option) - var(--join-stroke));
+                    bottom: calc(anchor(center --checked-option) + var(--join-stroke));
+                    right: anchor(left --radio-option);
+                    left: anchor(right --checked-option);
+                }
+
+                &::after {
+                    display: none;
+                }
             }
-        }
 
-        &.options li:has(:checked) {
-            anchor-name: --radio-option;
-            border-color: var(--radio-checked-border-color);
+            /* GROUP LOGIC TREE CONNECTORS / DESTINATION ANCHOR
+            =================================================== */
+            &.options li:has(:checked) {
+                anchor-name: --radio-option;
+                border-color: var(--radio-checked-border-color);
+            }
         }
     }
 }

From eccae060a3274b43a91c467ede2732a82a3435b0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 11:01:40 +0100
Subject: [PATCH 10/79] Tree view CSS - experiment with radios at the top

---
 resources/css/components/forms/logic-tree.css |  15 +-
 resources/js/pages/forms/LogicTree.vue        | 160 +++++++++---------
 2 files changed, 96 insertions(+), 79 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index e72ff0fc25..565b9904ca 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -71,6 +71,17 @@
                 }
             }
 
+            & > li.linked-list__page-label {
+                font-size: 0.875rem;
+                font-weight: 500;
+                color: light-dark(var(--color-gray-700, #374151), var(--color-gray-200, #e5e7eb));
+                background: light-dark(var(--color-gray-50, #f9fafb), var(--color-gray-900, #111827));
+
+                &:not(:has(> label)) {
+                    padding: 0.5rem;
+                }
+            }
+
             /* GROUP LOGIC TREE CONNECTORS / SOURCE ANCHOR
             =================================================== */
             &.items li:has(:checked) label {
@@ -165,9 +176,9 @@
                 }
             }
 
-            /* GROUP LOGIC TREE CONNECTORS / DESTINATION ANCHOR
+            /* GROUP LOGIC TREE CONNECTORS / DESTINATION ANCHOR (PAGE RADIO)
             =================================================== */
-            &.options li:has(:checked) {
+            &.options li.linked-list__page-label:has(input[type=radio]:checked) {
                 anchor-name: --radio-option;
                 border-color: var(--radio-checked-border-color);
             }
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index b4802afe93..bad4b2b692 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 
-// https://codepen.io/cbolson/pen/emzegWP — JS only sets --relation; connectors are pure CSS anchor positioning
+// https://codepen.io/cbolson/pen/emzegWP
 const root = ref(null);
 const REL = ['-1', '0', '1'];
 
@@ -9,13 +9,13 @@ function updateRelations() {
     const rootEl = root.value;
     if (!rootEl) return;
 
-    const radioLi = rootEl.querySelector('.options li:has(input:checked)');
+    const radioLi = rootEl.querySelector('.options li:has(input[type=radio]:checked)');
     if (!radioLi) return;
 
     const radioIndex = [...radioLi.parentElement.children].indexOf(radioLi);
 
-    rootEl.querySelectorAll('.items li').forEach((li, i) => {
-        li.style.setProperty('--relation', REL[Math.sign(i - radioIndex) + 1]);
+    rootEl.querySelectorAll('.items li:has(input[type=checkbox]:checked)').forEach((li) => {
+        const i = [...li.parentElement.children].indexOf(li);
         li.dataset.relation = REL[Math.sign(i - radioIndex) + 1];
     });
 }
@@ -24,78 +24,84 @@ onMounted(updateRelations);
 </script>
 
 <template>
-    <!-- https://codepen.io/cbolson/pen/emzegWP -->
-    <div id="linked-list" ref="root" class="linked-list" @change="updateRelations">
-        <ul class="list items" aria-labelledby="items-label">
-            <li>
-                <label for="logic-tree-item-1">
-                    <input id="logic-tree-item-1" type="checkbox" class="cb" value="1" checked>
-                    Item 1
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-item-2">
-                    <input id="logic-tree-item-2" type="checkbox" class="cb" value="2">
-                    Item 2
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-item-3">
-                    <input id="logic-tree-item-3" type="checkbox" class="cb" value="3" checked>
-                    Item 3
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-item-4">
-                    <input id="logic-tree-item-4" type="checkbox" class="cb" value="4" checked>
-                    Item 4
-                </label>
-            </li>
-        </ul>
+  <div id="linked-list" ref="root" class="linked-list" @change="updateRelations">
+    <ul class="list items">
+      <li class="linked-list__page-label">{{ __('Page :number', { number: 1 }) }}</li>
+      <li>
+        <label for="logic-tree-item-1">
+          <input id="logic-tree-item-1" type="checkbox" class="cb" value="1" checked>
+          Item 1
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-item-2">
+          <input id="logic-tree-item-2" type="checkbox" class="cb" value="2">
+          Item 2
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-item-3">
+          <input id="logic-tree-item-3" type="checkbox" class="cb" value="3" checked>
+          Item 3
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-item-4">
+          <input id="logic-tree-item-4" type="checkbox" class="cb" value="4" checked>
+          Item 4
+        </label>
+      </li>
+    </ul>
 
-        <ul class="list options" role="radiogroup" aria-labelledby="visit-label">
-            <li>
-                <label for="logic-tree-radio-1">
-                    <input id="logic-tree-radio-1" type="radio" name="logic-tree-visit" class="rb" value="1">
-                    Option 1
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-radio-2">
-                    <input id="logic-tree-radio-2" type="radio" name="logic-tree-visit" class="rb" value="2">
-                    Option 2
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-radio-3">
-                    <input id="logic-tree-radio-3" type="radio" name="logic-tree-visit" class="rb" value="3">
-                    Option 3
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-radio-4">
-                    <input id="logic-tree-radio-4" type="radio" name="logic-tree-visit" class="rb" value="4">
-                    Option 4
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-radio-5">
-                    <input id="logic-tree-radio-5" type="radio" name="logic-tree-visit" class="rb" value="5">
-                    Option 5
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-radio-6">
-                    <input id="logic-tree-radio-6" type="radio" name="logic-tree-visit" class="rb" value="6" checked>
-                    Option 6
-                </label>
-            </li>
-            <li>
-                <label for="logic-tree-radio-7">
-                    <input id="logic-tree-radio-7" type="radio" name="logic-tree-visit" class="rb" value="7">
-                    Option 7
-                </label>
-            </li>
-        </ul>
-    </div>
+    <ul class="list options" role="radiogroup" :aria-label="__('Destination page')">
+      <li class="linked-list__page-label">
+        <label for="logic-tree-page-2">
+          <input id="logic-tree-page-2" type="radio" name="logic-tree-destination" class="rb" value="2" checked>
+          {{ __('Page :number', { number: 2 }) }}
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-page-2-item-1">
+          <input id="logic-tree-page-2-item-1" type="checkbox" class="cb" value="1">
+          Item 1
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-page-2-item-2">
+          <input id="logic-tree-page-2-item-2" type="checkbox" class="cb" value="2">
+          Item 2
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-page-2-item-3">
+          <input id="logic-tree-page-2-item-3" type="checkbox" class="cb" value="3">
+          Item 3
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-page-2-item-4">
+          <input id="logic-tree-page-2-item-4" type="checkbox" class="cb" value="4">
+          Item 4
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-page-2-item-5">
+          <input id="logic-tree-page-2-item-5" type="checkbox" class="cb" value="5">
+          Item 5
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-page-2-item-6">
+          <input id="logic-tree-page-2-item-6" type="checkbox" class="cb" value="6">
+          Item 6
+        </label>
+      </li>
+      <li>
+        <label for="logic-tree-page-2-item-7">
+          <input id="logic-tree-page-2-item-7" type="checkbox" class="cb" value="7">
+          Item 7
+        </label>
+      </li>
+    </ul>
+  </div>
 </template>

From c1027ef7fbf910401af72cadd220fcc39ccbdf31 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 11:05:06 +0100
Subject: [PATCH 11/79] Tree view CSS - remove confusing island class

---
 resources/css/components/forms/logic-tree.css | 2 +-
 resources/js/pages/forms/LogicTree.vue        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 565b9904ca..4e659729dd 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -52,7 +52,7 @@
             --clr-lines: rgba(255 255 255 / 0.25);
         }
 
-        .list {
+        ul {
             margin: 0;
             padding: 0;
             list-style: none;
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index bad4b2b692..145499df14 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -25,7 +25,7 @@ onMounted(updateRelations);
 
 <template>
   <div id="linked-list" ref="root" class="linked-list" @change="updateRelations">
-    <ul class="list items">
+    <ul class="items">
       <li class="linked-list__page-label">{{ __('Page :number', { number: 1 }) }}</li>
       <li>
         <label for="logic-tree-item-1">
@@ -53,7 +53,7 @@ onMounted(updateRelations);
       </li>
     </ul>
 
-    <ul class="list options" role="radiogroup" :aria-label="__('Destination page')">
+    <ul class="options" role="radiogroup" :aria-label="__('Destination page')">
       <li class="linked-list__page-label">
         <label for="logic-tree-page-2">
           <input id="logic-tree-page-2" type="radio" name="logic-tree-destination" class="rb" value="2" checked>

From 7f535a30e8daccc057b95b3c1e7ae79d2f9031fc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 12:02:16 +0100
Subject: [PATCH 12/79] Tree view CSS - Pass the destination to the item

---
 resources/css/components/forms/logic-tree.css | 44 +++++++++++++------
 resources/js/pages/forms/LogicTree.vue        | 10 +++--
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 4e659729dd..295ebde707 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -27,6 +27,22 @@
         -1  source above destination
          0  source level with destination (straight line, no ::after)
          1  source below destination
+
+
+
+
+
+
+    How it works
+
+    - A checkbox in .items is checked → the parent li matches :has(:checked).
+    - The label inside that li gets anchor-name: --checked-option.
+    - Connector pseudo-elements on that same label reference it with anchor(right --checked-option), anchor(center --checked-option), etc.
+    - anchor-scope: --checked-option scopes the anchor so each checked row gets its own connector (they don’t all fight over one anchor).
+
+    Pairing
+
+    The destination anchor is set separately on the page radio row:
 */
 @layer components {
     /* Inspired by https://codepen.io/cbolson/pen/emzegWP */
@@ -36,7 +52,7 @@
         --join-stroke: 1px;
         --join-line: var(--join-stroke) dashed var(--color-blue-400);
         --join-radius: 15px;
-        --gap: 10vw;
+        --gap: 7rem;
         --clr-lines: rgba(0 0 0 / 0.25);
 
         /* GROUP LOGIC TREE CONNECTORS / LAYOUT
@@ -44,8 +60,8 @@
         position: relative;
         display: grid;
         align-items: start;
-        grid-template-columns: 1fr 1fr;
-        width: min(100%, 800px);
+        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+        /* width: min(100%, 800px); */
         gap: var(--gap);
 
         :where(.dark) & {
@@ -100,13 +116,13 @@
                     position: absolute;
                     pointer-events: none;
                     border: var(--join-line);
-                    right: calc(anchor(left --radio-option) + var(--gap) / 2);
+                    right: calc(anchor(left var(--destination)) + var(--gap) / 2);
                     left: anchor(right --checked-option);
                 }
 
                 &::after {
-                    right: anchor(left --radio-option);
-                    left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
+                    right: anchor(left var(--destination));
+                    left: calc(anchor(left var(--destination)) - var(--gap) / 2 - var(--join-stroke));
                 }
             }
 
@@ -119,7 +135,7 @@
                     border-bottom-color: transparent;
                     border-radius: 0 var(--join-radius) 0 0;
                     top: anchor(center --checked-option);
-                    bottom: anchor(top --radio-option);
+                    bottom: anchor(top var(--destination));
                 }
 
                 /* ::after — destination corner: short segment + curve at destination top */
@@ -127,7 +143,7 @@
                     border-right-color: transparent;
                     border-top-color: transparent;
                     border-radius: 0 0 0 var(--join-radius);
-                    top: calc(anchor(top --radio-option) - var(--join-stroke));
+                    top: calc(anchor(top var(--destination)) - var(--join-stroke));
                     height: var(--join-radius);
                     bottom: auto;
                 }
@@ -141,7 +157,7 @@
                     border-left-color: transparent;
                     border-top-color: transparent;
                     border-radius: 0 0 var(--join-radius) 0;
-                    top: anchor(bottom --radio-option);
+                    top: anchor(bottom var(--destination));
                     bottom: anchor(center --checked-option);
                 }
 
@@ -151,7 +167,7 @@
                     border-bottom-color: transparent;
                     border-radius: var(--join-radius) 0 0 0;
                     top: auto;
-                    bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
+                    bottom: calc(anchor(bottom var(--destination)) - var(--join-stroke));
                     height: var(--join-radius);
                 }
             }
@@ -165,9 +181,9 @@
                     border-right-color: transparent;
                     border-left-color: transparent;
                     border-radius: 0;
-                    top: calc(anchor(center --radio-option) - var(--join-stroke));
+                    top: calc(anchor(center var(--destination)) - var(--join-stroke));
                     bottom: calc(anchor(center --checked-option) + var(--join-stroke));
-                    right: anchor(left --radio-option);
+                    right: anchor(left var(--destination));
                     left: anchor(right --checked-option);
                 }
 
@@ -179,9 +195,9 @@
             /* GROUP LOGIC TREE CONNECTORS / DESTINATION ANCHOR (PAGE RADIO)
             =================================================== */
             &.options li.linked-list__page-label:has(input[type=radio]:checked) {
-                anchor-name: --radio-option;
+                anchor-name: var(--destination);
                 border-color: var(--radio-checked-border-color);
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 145499df14..f2c12d4386 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -27,7 +27,7 @@ onMounted(updateRelations);
   <div id="linked-list" ref="root" class="linked-list" @change="updateRelations">
     <ul class="items">
       <li class="linked-list__page-label">{{ __('Page :number', { number: 1 }) }}</li>
-      <li>
+      <li style="--destination: --page-2;">
         <label for="logic-tree-item-1">
           <input id="logic-tree-item-1" type="checkbox" class="cb" value="1" checked>
           Item 1
@@ -39,13 +39,13 @@ onMounted(updateRelations);
           Item 2
         </label>
       </li>
-      <li>
+      <li style="--destination: --page-2;">
         <label for="logic-tree-item-3">
           <input id="logic-tree-item-3" type="checkbox" class="cb" value="3" checked>
           Item 3
         </label>
       </li>
-      <li>
+      <li style="--destination: --page-2;">
         <label for="logic-tree-item-4">
           <input id="logic-tree-item-4" type="checkbox" class="cb" value="4" checked>
           Item 4
@@ -54,7 +54,7 @@ onMounted(updateRelations);
     </ul>
 
     <ul class="options" role="radiogroup" :aria-label="__('Destination page')">
-      <li class="linked-list__page-label">
+      <li class="linked-list__page-label" style="anchor-name: --page-2;">
         <label for="logic-tree-page-2">
           <input id="logic-tree-page-2" type="radio" name="logic-tree-destination" class="rb" value="2" checked>
           {{ __('Page :number', { number: 2 }) }}
@@ -103,5 +103,7 @@ onMounted(updateRelations);
         </label>
       </li>
     </ul>
+
+    
   </div>
 </template>

From 7bb40f2ada29bed5aadc4f5470ec6254209347b5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 12:46:22 +0100
Subject: [PATCH 13/79] Tree view CSS - Simplify CSS and remove JS since our
 paths will always be "above" the destination

---
 resources/css/components/forms/logic-tree.css | 80 ++-----------------
 resources/js/pages/forms/LogicTree.vue        | 25 ------
 2 files changed, 7 insertions(+), 98 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 295ebde707..66d6cc62b3 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -21,13 +21,6 @@
         ::before  —  left half of the gap + vertical leg from the source
         ::after   —  right half of the gap + rounded corner at the destination
 
-    JS (LogicTree.vue) sets data-relation on each source <li> by comparing
-    list index to the checked destination:
-
-        -1  source above destination
-         0  source level with destination (straight line, no ::after)
-         1  source below destination
-
 
 
 
@@ -120,84 +113,25 @@
                     left: anchor(right --checked-option);
                 }
 
-                &::after {
-                    right: anchor(left var(--destination));
-                    left: calc(anchor(left var(--destination)) - var(--gap) / 2 - var(--join-stroke));
-                }
-            }
-
-            /* GROUP LOGIC TREE CONNECTORS / RELATION -1 (SOURCE ABOVE)
-            =================================================== */
-            &.items li[data-relation="-1"]:has(:checked) label {
-                /* ::before — source leg: out from source centre, down to destination top */
-                &::before {
-                    border-left-color: transparent;
-                    border-bottom-color: transparent;
-                    border-radius: 0 var(--join-radius) 0 0;
-                    top: anchor(center --checked-option);
-                    bottom: anchor(top var(--destination));
-                }
-
-                /* ::after — destination corner: short segment + curve at destination top */
-                &::after {
-                    border-right-color: transparent;
-                    border-top-color: transparent;
-                    border-radius: 0 0 0 var(--join-radius);
-                    top: calc(anchor(top var(--destination)) - var(--join-stroke));
-                    height: var(--join-radius);
-                    bottom: auto;
-                }
-            }
-
-            /* GROUP LOGIC TREE CONNECTORS / RELATION 1 (SOURCE BELOW)
-            =================================================== */
-            &.items li[data-relation="1"]:has(:checked) label {
-                /* ::before — source leg: up from destination bottom, to source centre */
                 &::before {
+                    top: anchor(bottom var(--destination));
+                    bottom: anchor(center --checked-option);
                     border-left-color: transparent;
                     border-top-color: transparent;
                     border-radius: 0 0 var(--join-radius) 0;
-                    top: anchor(bottom var(--destination));
-                    bottom: anchor(center --checked-option);
                 }
 
-                /* ::after — destination corner: short segment + curve at destination bottom */
                 &::after {
-                    border-right-color: transparent;
-                    border-bottom-color: transparent;
-                    border-radius: var(--join-radius) 0 0 0;
                     top: auto;
+                    right: anchor(left var(--destination));
                     bottom: calc(anchor(bottom var(--destination)) - var(--join-stroke));
+                    left: calc(anchor(left var(--destination)) - var(--gap) / 2 - var(--join-stroke));
                     height: var(--join-radius);
-                }
-            }
-
-            /* GROUP LOGIC TREE CONNECTORS / RELATION 0 (SOURCE LEVEL)
-            =================================================== */
-            &.items li[data-relation="0"]:has(:checked) label {
-                /* ::before only — straight horizontal line between row centres */
-                &::before {
-                    border-top-color: transparent;
                     border-right-color: transparent;
-                    border-left-color: transparent;
-                    border-radius: 0;
-                    top: calc(anchor(center var(--destination)) - var(--join-stroke));
-                    bottom: calc(anchor(center --checked-option) + var(--join-stroke));
-                    right: anchor(left var(--destination));
-                    left: anchor(right --checked-option);
-                }
-
-                &::after {
-                    display: none;
+                    border-bottom-color: transparent;
+                    border-radius: var(--join-radius) 0 0 0;
                 }
             }
-
-            /* GROUP LOGIC TREE CONNECTORS / DESTINATION ANCHOR (PAGE RADIO)
-            =================================================== */
-            &.options li.linked-list__page-label:has(input[type=radio]:checked) {
-                anchor-name: var(--destination);
-                border-color: var(--radio-checked-border-color);
-            }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index f2c12d4386..8d9671e4e9 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,28 +1,3 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-
-// https://codepen.io/cbolson/pen/emzegWP
-const root = ref(null);
-const REL = ['-1', '0', '1'];
-
-function updateRelations() {
-    const rootEl = root.value;
-    if (!rootEl) return;
-
-    const radioLi = rootEl.querySelector('.options li:has(input[type=radio]:checked)');
-    if (!radioLi) return;
-
-    const radioIndex = [...radioLi.parentElement.children].indexOf(radioLi);
-
-    rootEl.querySelectorAll('.items li:has(input[type=checkbox]:checked)').forEach((li) => {
-        const i = [...li.parentElement.children].indexOf(li);
-        li.dataset.relation = REL[Math.sign(i - radioIndex) + 1];
-    });
-}
-
-onMounted(updateRelations);
-</script>
-
 <template>
   <div id="linked-list" ref="root" class="linked-list" @change="updateRelations">
     <ul class="items">

From 70423686bc47ff4c74eb768c28902e146dcd8c36 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 14:04:06 +0100
Subject: [PATCH 14/79] Tree view CSS - Simplify by getting rid of inputs

---
 resources/css/components/forms/logic-tree.css |   4 +-
 resources/js/pages/forms/LogicTree.vue        | 128 +++++++-----------
 2 files changed, 48 insertions(+), 84 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 66d6cc62b3..9dc920c8fe 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -93,10 +93,10 @@
 
             /* GROUP LOGIC TREE CONNECTORS / SOURCE ANCHOR
             =================================================== */
-            &.items li:has(:checked) label {
+            /* li*/
+            .linked-list__linked {
                 anchor-name: --checked-option;
                 anchor-scope: --checked-option; /* one anchor per checked source */
-                border-color: var(--checkbox-checked-border-color);
 
                 /* GROUP LOGIC TREE CONNECTORS / CONNECTOR BASE
                 =================================================== */
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 8d9671e4e9..357fd2d32f 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,84 +1,48 @@
 <template>
-  <div id="linked-list" ref="root" class="linked-list" @change="updateRelations">
-    <ul class="items">
-      <li class="linked-list__page-label">{{ __('Page :number', { number: 1 }) }}</li>
-      <li style="--destination: --page-2;">
-        <label for="logic-tree-item-1">
-          <input id="logic-tree-item-1" type="checkbox" class="cb" value="1" checked>
-          Item 1
-        </label>
-      </li>
-      <li>
-        <label for="logic-tree-item-2">
-          <input id="logic-tree-item-2" type="checkbox" class="cb" value="2">
-          Item 2
-        </label>
-      </li>
-      <li style="--destination: --page-2;">
-        <label for="logic-tree-item-3">
-          <input id="logic-tree-item-3" type="checkbox" class="cb" value="3" checked>
-          Item 3
-        </label>
-      </li>
-      <li style="--destination: --page-2;">
-        <label for="logic-tree-item-4">
-          <input id="logic-tree-item-4" type="checkbox" class="cb" value="4" checked>
-          Item 4
-        </label>
-      </li>
-    </ul>
-
-    <ul class="options" role="radiogroup" :aria-label="__('Destination page')">
-      <li class="linked-list__page-label" style="anchor-name: --page-2;">
-        <label for="logic-tree-page-2">
-          <input id="logic-tree-page-2" type="radio" name="logic-tree-destination" class="rb" value="2" checked>
-          {{ __('Page :number', { number: 2 }) }}
-        </label>
-      </li>
-      <li>
-        <label for="logic-tree-page-2-item-1">
-          <input id="logic-tree-page-2-item-1" type="checkbox" class="cb" value="1">
-          Item 1
-        </label>
-      </li>
-      <li>
-        <label for="logic-tree-page-2-item-2">
-          <input id="logic-tree-page-2-item-2" type="checkbox" class="cb" value="2">
-          Item 2
-        </label>
-      </li>
-      <li>
-        <label for="logic-tree-page-2-item-3">
-          <input id="logic-tree-page-2-item-3" type="checkbox" class="cb" value="3">
-          Item 3
-        </label>
-      </li>
-      <li>
-        <label for="logic-tree-page-2-item-4">
-          <input id="logic-tree-page-2-item-4" type="checkbox" class="cb" value="4">
-          Item 4
-        </label>
-      </li>
-      <li>
-        <label for="logic-tree-page-2-item-5">
-          <input id="logic-tree-page-2-item-5" type="checkbox" class="cb" value="5">
-          Item 5
-        </label>
-      </li>
-      <li>
-        <label for="logic-tree-page-2-item-6">
-          <input id="logic-tree-page-2-item-6" type="checkbox" class="cb" value="6">
-          Item 6
-        </label>
-      </li>
-      <li>
-        <label for="logic-tree-page-2-item-7">
-          <input id="logic-tree-page-2-item-7" type="checkbox" class="cb" value="7">
-          Item 7
-        </label>
-      </li>
-    </ul>
-
-    
-  </div>
+    <div class="linked-list">
+        <ul class="items">
+            <li class="linked-list__page-label">
+                {{ __('Page :number', { number: 1 }) }}
+            </li>
+            <li class="linked-list__linked" style="--destination: --page-2;">
+                Item 1
+            </li>
+            <li>
+                Item 2
+            </li>
+            <li class="linked-list__linked" style="--destination: --page-2;">
+                Item 3
+            </li>
+            <li class="linked-list__linked" style="--destination: --page-2;">
+                Item 4
+            </li>
+        </ul>
+        
+        <ul class="options" role="radiogroup" :aria-label="__('Destination page')">
+            <li class="linked-list__page-label" style="anchor-name: --page-2;">
+                {{ __('Page :number', { number: 2 }) }}
+            </li>
+            <li>
+                Item 1
+            </li>
+            <li>
+                Item 2
+            </li>
+            <li>
+                Item 3
+            </li>
+            <li>
+                Item 4
+            </li>
+            <li>
+                Item 5
+            </li>
+            <li>
+                Item 6
+            </li>
+            <li>
+                Item 7
+            </li>
+        </ul>
+    </div>
 </template>

From 26312045c4c242ecdd66c5c5065913a63c1fd61b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 14:04:58 +0100
Subject: [PATCH 15/79] Tree view CSS - Simplify by getting rid of inputs

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

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 357fd2d32f..225f5f6643 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="linked-list">
-        <ul class="items">
+        <ul>
             <li class="linked-list__page-label">
                 {{ __('Page :number', { number: 1 }) }}
             </li>
@@ -18,7 +18,7 @@
             </li>
         </ul>
         
-        <ul class="options" role="radiogroup" :aria-label="__('Destination page')">
+        <ul>
             <li class="linked-list__page-label" style="anchor-name: --page-2;">
                 {{ __('Page :number', { number: 2 }) }}
             </li>

From b6c104c3ed3878a2d22a8234bad9b483f3c1b7d0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 14:06:19 +0100
Subject: [PATCH 16/79] Tree view CSS - Get multi columns working

---
 resources/js/pages/forms/LogicTree.vue | 29 +++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 225f5f6643..2c49f7762d 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -10,7 +10,7 @@
             <li>
                 Item 2
             </li>
-            <li class="linked-list__linked" style="--destination: --page-2;">
+            <li class="linked-list__linked" style="--destination: --page-3;">
                 Item 3
             </li>
             <li class="linked-list__linked" style="--destination: --page-2;">
@@ -44,5 +44,32 @@
                 Item 7
             </li>
         </ul>
+
+        <ul>
+            <li class="linked-list__page-label" style="anchor-name: --page-3;">
+                {{ __('Page :number', { number: 3 }) }}
+            </li>
+            <li>
+                Item 1
+            </li>
+            <li>
+                Item 2
+            </li>
+            <li>
+                Item 3
+            </li>
+            <li>
+                Item 4
+            </li>
+            <li>
+                Item 5
+            </li>
+            <li>
+                Item 6
+            </li>
+            <li>
+                Item 7
+            </li>
+        </ul>
     </div>
 </template>

From 76ef2d4d6d4286a56866d9d8e201745b6aa4363c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 14:24:20 +0100
Subject: [PATCH 17/79] Tree view CSS - wip

---
 resources/css/components/forms/logic-tree.css | 16 ++++++++++------
 resources/js/pages/forms/LogicTree.vue        |  8 ++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 9dc920c8fe..1c46d43724 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -40,8 +40,6 @@
 @layer components {
     /* Inspired by https://codepen.io/cbolson/pen/emzegWP */
     .linked-list {
-        --checkbox-checked-border-color: var(--color-blue-400);
-        --radio-checked-border-color: var(--color-blue-400);
         --join-stroke: 1px;
         --join-line: var(--join-stroke) dashed var(--color-blue-400);
         --join-radius: 15px;
@@ -68,19 +66,20 @@
             display: grid;
             gap: 0.5rem;
 
-            & > li {
+            li {
                 border: 1px solid var(--clr-lines);
                 display: flex;
                 align-items: center;
+                padding: 1rem 1.5rem;
 
-                & > label {
+                label {
                     flex: 1;
                     padding: 0.5rem;
                     cursor: pointer;
                 }
             }
 
-            & > li.linked-list__page-label {
+            .linked-list__page-label {
                 font-size: 0.875rem;
                 font-weight: 500;
                 color: light-dark(var(--color-gray-700, #374151), var(--color-gray-200, #e5e7eb));
@@ -115,7 +114,7 @@
 
                 &::before {
                     top: anchor(bottom var(--destination));
-                    bottom: anchor(center --checked-option);
+                    bottom: calc(anchor(center --checked-option) + 1.5rem);
                     border-left-color: transparent;
                     border-top-color: transparent;
                     border-radius: 0 0 var(--join-radius) 0;
@@ -132,6 +131,11 @@
                     border-radius: var(--join-radius) 0 0 0;
                 }
             }
+            .linked-list__linked--neighbor {
+                &::before {
+                    bottom: anchor(center --checked-option);
+                }
+            }
         }
     }
 }
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 2c49f7762d..28b5b3dcff 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,19 +1,19 @@
 <template>
     <div class="linked-list">
         <ul>
-            <li class="linked-list__page-label">
+            <li class="linked-list__page-label" style="anchor-name: --page-1;">
                 {{ __('Page :number', { number: 1 }) }}
             </li>
-            <li class="linked-list__linked" style="--destination: --page-2;">
+            <li class="linked-list__linked linked-list__linked--neighbor" style="--destination: --page-2;">
                 Item 1
             </li>
-            <li>
+            <li class="linked-list__linked" style="--destination: --page-3;">
                 Item 2
             </li>
             <li class="linked-list__linked" style="--destination: --page-3;">
                 Item 3
             </li>
-            <li class="linked-list__linked" style="--destination: --page-2;">
+            <li class="linked-list__linked linked-list__linked--neighbor" style="--destination: --page-2;">
                 Item 4
             </li>
         </ul>

From 534239f4945b66ad817fb378a452cdecfcf19168 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 15:25:49 +0100
Subject: [PATCH 18/79] Tree view CSS - wip

---
 resources/css/components/forms/logic-tree.css | 38 +++++++++++++++++--
 resources/js/pages/forms/LogicTree.vue        | 10 +++--
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 1c46d43724..238337cfc5 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -46,6 +46,9 @@
         --gap: 7rem;
         --clr-lines: rgba(0 0 0 / 0.25);
 
+        --buffer-h: 2rem;
+        --buffer-offset: 1rem;
+
         /* GROUP LOGIC TREE CONNECTORS / LAYOUT
         =================================================== */
         position: relative;
@@ -114,7 +117,7 @@
 
                 &::before {
                     top: anchor(bottom var(--destination));
-                    bottom: calc(anchor(center --checked-option) + 1.5rem);
+                    bottom: anchor(center --checked-option);
                     border-left-color: transparent;
                     border-top-color: transparent;
                     border-radius: 0 0 var(--join-radius) 0;
@@ -131,11 +134,40 @@
                     border-radius: var(--join-radius) 0 0 0;
                 }
             }
-            .linked-list__linked--neighbor {
+            .linked-list__linked--leap {
                 &::before {
-                    bottom: anchor(center --checked-option);
+                    bottom: calc(anchor(center --checked-option) + var(--buffer-h));
+                    right: calc(anchor(left var(--destination)) + var(--gap) / 2);
+                    left: calc(anchor(right --checked-option) + var(--gap) * 2 - var(--buffer-offset) * 2 - var(--join-stroke));
                 }
             }
         }
     }
+    .linked-list__connector-buffer {
+        --corner-h: 12px;
+        anchor-name: --checked-option;
+        position: absolute;
+        pointer-events: none;
+        top: calc(anchor(center --checked-option) - var(--buffer-h) + var(--corner-h));
+        left: anchor(right --checked-option);
+        width: calc(var(--gap) - var(--buffer-offset));
+        height: calc(var(--buffer-h) - var(--corner-h));
+        border-block-end: var(--join-line);
+        border-inline-end: var(--join-line);
+        border-bottom-right-radius: var(--join-radius);
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: calc(0% - var(--join-stroke) - var(--corner-h));
+            left: anchor(right --checked-option);
+            right: calc(0% - var(--gap) + var(--buffer-offset));
+            width: calc(var(--gap) - var(--buffer-offset));
+            height: var(--buffer-h);
+            height: calc(var(--buffer-h) - 21px);
+            border-block-start: var(--join-line);
+            border-inline-start: var(--join-line);
+            border-start-start-radius: var(--join-radius);
+        }
+    }
 }
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 28b5b3dcff..2eff3eef5a 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -4,16 +4,18 @@
             <li class="linked-list__page-label" style="anchor-name: --page-1;">
                 {{ __('Page :number', { number: 1 }) }}
             </li>
-            <li class="linked-list__linked linked-list__linked--neighbor" style="--destination: --page-2;">
+            <li class="linked-list__linked" style="--destination: --page-2;">
                 Item 1
             </li>
-            <li class="linked-list__linked" style="--destination: --page-3;">
+            <li class="linked-list__linked linked-list__linked--leap" style="--destination: --page-3;">
+                <div class="linked-list__connector-buffer"></div>
                 Item 2
             </li>
-            <li class="linked-list__linked" style="--destination: --page-3;">
+            <li class="linked-list__linked linked-list__linked--leap" style="--destination: --page-3;">
+                <div class="linked-list__connector-buffer"></div>
                 Item 3
             </li>
-            <li class="linked-list__linked linked-list__linked--neighbor" style="--destination: --page-2;">
+            <li class="linked-list__linked" style="--destination: --page-2;">
                 Item 4
             </li>
         </ul>

From 7ceacd6f1d9c8c72c177ec6e4bd51af39a1390c7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 15:47:56 +0100
Subject: [PATCH 19/79] Tree view CSS - use pseudo elements for consistency

---
 resources/css/components/forms/logic-tree.css | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 238337cfc5..348bed7d13 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -137,37 +137,40 @@
             .linked-list__linked--leap {
                 &::before {
                     bottom: calc(anchor(center --checked-option) + var(--buffer-h));
-                    right: calc(anchor(left var(--destination)) + var(--gap) / 2);
-                    left: calc(anchor(right --checked-option) + var(--gap) * 2 - var(--buffer-offset) * 2 - var(--join-stroke));
+                    left: calc(anchor(right --checked-option) + var(--gap));
                 }
             }
         }
     }
     .linked-list__connector-buffer {
-        --corner-h: 12px;
-        anchor-name: --checked-option;
-        position: absolute;
-        pointer-events: none;
-        top: calc(anchor(center --checked-option) - var(--buffer-h) + var(--corner-h));
-        left: anchor(right --checked-option);
-        width: calc(var(--gap) - var(--buffer-offset));
-        height: calc(var(--buffer-h) - var(--corner-h));
-        border-block-end: var(--join-line);
-        border-inline-end: var(--join-line);
-        border-bottom-right-radius: var(--join-radius);
+        --corner-h: 18px;
 
-        &::before {
+        &::before,
+        &::after {
             content: '';
             position: absolute;
-            top: calc(0% - var(--join-stroke) - var(--corner-h));
+            pointer-events: none;
+        }
+
+        &::before {
+            top: calc(anchor(center --checked-option) - var(--buffer-h) + var(--corner-h));
             left: anchor(right --checked-option);
-            right: calc(0% - var(--gap) + var(--buffer-offset));
             width: calc(var(--gap) - var(--buffer-offset));
-            height: var(--buffer-h);
-            height: calc(var(--buffer-h) - 21px);
-            border-block-start: var(--join-line);
+            height: calc(var(--buffer-h) - var(--corner-h));
+            border-block-end: var(--join-line);
+            border-inline-end: var(--join-line);
+            border-bottom-right-radius: var(--join-radius);
+        }
+
+        &::after {
+            --join-height: 1rem;
+            bottom: calc(anchor(center --checked-option) + var(--join-height));
+            width: var(--buffer-offset);
+            height: var(--join-height);
+            left: calc(anchor(right --checked-option) + var(--gap) - var(--buffer-offset));
             border-inline-start: var(--join-line);
-            border-start-start-radius: var(--join-radius);
+            border-block-start: var(--join-line);
+            border-top-left-radius: var(--join-radius);
         }
     }
 }

From 520740f00a5641440b430e4683c371f1cc87a8d1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 16:00:48 +0100
Subject: [PATCH 20/79] Tree view CSS - tidy

---
 resources/css/components/forms/logic-tree.css |  9 ++++-----
 resources/js/pages/forms/LogicTree.vue        | 12 ++++++------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 348bed7d13..9f40ce73e9 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -95,8 +95,7 @@
 
             /* GROUP LOGIC TREE CONNECTORS / SOURCE ANCHOR
             =================================================== */
-            /* li*/
-            .linked-list__linked {
+            li {
                 anchor-name: --checked-option;
                 anchor-scope: --checked-option; /* one anchor per checked source */
 
@@ -134,7 +133,7 @@
                     border-radius: var(--join-radius) 0 0 0;
                 }
             }
-            .linked-list__linked--leap {
+            .linked-list__page-leap {
                 &::before {
                     bottom: calc(anchor(center --checked-option) + var(--buffer-h));
                     left: calc(anchor(right --checked-option) + var(--gap));
@@ -142,7 +141,7 @@
             }
         }
     }
-    .linked-list__connector-buffer {
+    .linked-list__extra-leap-connector {
         --corner-h: 18px;
 
         &::before,
@@ -173,4 +172,4 @@
             border-top-left-radius: var(--join-radius);
         }
     }
-}
+}
\ No newline at end of file
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 2eff3eef5a..d2e7d52c03 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -4,18 +4,18 @@
             <li class="linked-list__page-label" style="anchor-name: --page-1;">
                 {{ __('Page :number', { number: 1 }) }}
             </li>
-            <li class="linked-list__linked" style="--destination: --page-2;">
+            <li class="" style="--destination: --page-2;">
                 Item 1
             </li>
-            <li class="linked-list__linked linked-list__linked--leap" style="--destination: --page-3;">
-                <div class="linked-list__connector-buffer"></div>
+            <li class="linked-list__page-leap" style="--destination: --page-3;">
+                <div class="linked-list__extra-leap-connector"></div>
                 Item 2
             </li>
-            <li class="linked-list__linked linked-list__linked--leap" style="--destination: --page-3;">
-                <div class="linked-list__connector-buffer"></div>
+            <li class="linked-list__page-leap" style="--destination: --page-3;">
+                <div class="linked-list__extra-leap-connector"></div>
                 Item 3
             </li>
-            <li class="linked-list__linked" style="--destination: --page-2;">
+            <li class="" style="--destination: --page-2;">
                 Item 4
             </li>
         </ul>

From ea5c7a1cc029f28ec27590faeea7a147a5f63721 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 16:32:30 +0100
Subject: [PATCH 21/79] Tree view CSS - tidy

---
 resources/css/components/forms/logic-tree.css | 7 +++++--
 resources/js/pages/forms/LogicTree.vue        | 8 ++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 9f40ce73e9..0a75bc6895 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -91,11 +91,14 @@
                 &:not(:has(> label)) {
                     padding: 0.5rem;
                 }
+                &::after {
+                    content: unset;
+                }
             }
 
             /* GROUP LOGIC TREE CONNECTORS / SOURCE ANCHOR
             =================================================== */
-            li {
+            .linked-list__connector {
                 anchor-name: --checked-option;
                 anchor-scope: --checked-option; /* one anchor per checked source */
 
@@ -172,4 +175,4 @@
             border-top-left-radius: var(--join-radius);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index d2e7d52c03..706bfa9b92 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -4,18 +4,18 @@
             <li class="linked-list__page-label" style="anchor-name: --page-1;">
                 {{ __('Page :number', { number: 1 }) }}
             </li>
-            <li class="" style="--destination: --page-2;">
+            <li class="linked-list__connector" style="--destination: --page-2;">
                 Item 1
             </li>
-            <li class="linked-list__page-leap" style="--destination: --page-3;">
+            <li class="linked-list__connector linked-list__page-leap" style="--destination: --page-3;">
                 <div class="linked-list__extra-leap-connector"></div>
                 Item 2
             </li>
-            <li class="linked-list__page-leap" style="--destination: --page-3;">
+            <li class="linked-list__connector linked-list__page-leap" style="--destination: --page-3;">
                 <div class="linked-list__extra-leap-connector"></div>
                 Item 3
             </li>
-            <li class="" style="--destination: --page-2;">
+            <li class="linked-list__connector" style="--destination: --page-2;">
                 Item 4
             </li>
         </ul>

From f77d74d13f228683808da2d9a1c15e682c2ecdfb Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 16:51:04 +0100
Subject: [PATCH 22/79] Tree view CSS - tidy

---
 resources/css/components/forms/logic-tree.css | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 0a75bc6895..1e152b51f8 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -46,8 +46,8 @@
         --gap: 7rem;
         --clr-lines: rgba(0 0 0 / 0.25);
 
-        --buffer-h: 2rem;
-        --buffer-offset: 1rem;
+        --buffer-top-pull: 2rem;
+        --buffer-left-pull: 1rem;
 
         /* GROUP LOGIC TREE CONNECTORS / LAYOUT
         =================================================== */
@@ -138,14 +138,14 @@
             }
             .linked-list__page-leap {
                 &::before {
-                    bottom: calc(anchor(center --checked-option) + var(--buffer-h));
+                    bottom: calc(anchor(center --checked-option) + var(--buffer-top-pull));
                     left: calc(anchor(right --checked-option) + var(--gap));
                 }
             }
         }
     }
     .linked-list__extra-leap-connector {
-        --corner-h: 18px;
+        --join-radius: 5px;
 
         &::before,
         &::after {
@@ -155,21 +155,20 @@
         }
 
         &::before {
-            top: calc(anchor(center --checked-option) - var(--buffer-h) + var(--corner-h));
+            top: calc(anchor(top --checked-option));
+            bottom: anchor(center --checked-option);
             left: anchor(right --checked-option);
-            width: calc(var(--gap) - var(--buffer-offset));
-            height: calc(var(--buffer-h) - var(--corner-h));
+            width: calc(var(--gap) - var(--buffer-left-pull));
             border-block-end: var(--join-line);
             border-inline-end: var(--join-line);
             border-bottom-right-radius: var(--join-radius);
         }
 
         &::after {
-            --join-height: 1rem;
-            bottom: calc(anchor(center --checked-option) + var(--join-height));
-            width: var(--buffer-offset);
-            height: var(--join-height);
-            left: calc(anchor(right --checked-option) + var(--gap) - var(--buffer-offset));
+            /* display: none; */
+            bottom: calc(anchor(center --checked-option) + var(--buffer-top-pull));
+            width: var(--buffer-left-pull);
+            left: calc(anchor(right --checked-option) + var(--gap) - var(--buffer-left-pull) - var(--join-stroke));
             border-inline-start: var(--join-line);
             border-block-start: var(--join-line);
             border-top-left-radius: var(--join-radius);

From 9712a9bf834db83abcba765243f746802916551c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 17:09:01 +0100
Subject: [PATCH 23/79] Tree view CSS - get the maths right

---
 resources/css/components/forms/logic-tree.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 1e152b51f8..a8dc1f6379 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -42,7 +42,7 @@
     .linked-list {
         --join-stroke: 1px;
         --join-line: var(--join-stroke) dashed var(--color-blue-400);
-        --join-radius: 15px;
+        --join-radius: 20px;
         --gap: 7rem;
         --clr-lines: rgba(0 0 0 / 0.25);
 
@@ -145,8 +145,6 @@
         }
     }
     .linked-list__extra-leap-connector {
-        --join-radius: 5px;
-
         &::before,
         &::after {
             content: '';
@@ -155,7 +153,7 @@
         }
 
         &::before {
-            top: calc(anchor(top --checked-option));
+            top: calc(anchor(top --checked-option) + var(--buffer-top-pull) / 2 - var(--join-stroke) * 4);
             bottom: anchor(center --checked-option);
             left: anchor(right --checked-option);
             width: calc(var(--gap) - var(--buffer-left-pull));
@@ -166,8 +164,9 @@
 
         &::after {
             /* display: none; */
-            bottom: calc(anchor(center --checked-option) + var(--buffer-top-pull));
-            width: var(--buffer-left-pull);
+            top: calc(anchor(center --checked-option) - var(--buffer-top-pull) - var(--join-stroke));
+            bottom: calc(anchor(center --checked-option) + var(--buffer-top-pull) / 2 + var(--join-stroke) * 3);
+            width: calc(var(--buffer-left-pull) + var(--join-stroke) * 2);
             left: calc(anchor(right --checked-option) + var(--gap) - var(--buffer-left-pull) - var(--join-stroke));
             border-inline-start: var(--join-line);
             border-block-start: var(--join-line);

From c9888368349496246fcaad31dee99ce5c2470d60 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 17:12:15 +0100
Subject: [PATCH 24/79] Tree view CSS - switch to a solid line because of
 inconsistent dash array between browsers (Safari and Chrome)

---
 resources/css/components/forms/logic-tree.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index a8dc1f6379..38b00b2352 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -41,7 +41,7 @@
     /* Inspired by https://codepen.io/cbolson/pen/emzegWP */
     .linked-list {
         --join-stroke: 1px;
-        --join-line: var(--join-stroke) dashed var(--color-blue-400);
+        --join-line: var(--join-stroke) solid var(--color-blue-400);
         --join-radius: 20px;
         --gap: 7rem;
         --clr-lines: rgba(0 0 0 / 0.25);
@@ -165,7 +165,7 @@
         &::after {
             /* display: none; */
             top: calc(anchor(center --checked-option) - var(--buffer-top-pull) - var(--join-stroke));
-            bottom: calc(anchor(center --checked-option) + var(--buffer-top-pull) / 2 + var(--join-stroke) * 3);
+            bottom: calc(anchor(center --checked-option) + var(--buffer-top-pull) / 2);
             width: calc(var(--buffer-left-pull) + var(--join-stroke) * 2);
             left: calc(anchor(right --checked-option) + var(--gap) - var(--buffer-left-pull) - var(--join-stroke));
             border-inline-start: var(--join-line);

From 8b63443685d0b1f7cfa42eecc7249a8bb488c568 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 17:22:24 +0100
Subject: [PATCH 25/79] Tree view CSS - finish tidying

---
 resources/css/components/forms/logic-tree.css | 100 ++++++++++--------
 resources/js/pages/forms/LogicTree.vue        |   8 +-
 2 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 38b00b2352..e793962c60 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -3,39 +3,44 @@
 /*
     URL: /cp/forms/{handle}/logic (Tree view)
 
-    Connects checked source fields (left column) to the selected destination
-    (right column) using CSS anchor positioning. Inspired by:
-    https://codepen.io/cbolson/pen/emzegWP
+    Connects source fields to destination page headers using CSS anchor
+    positioning. Inspired by: https://codepen.io/cbolson/pen/emzegWP
 
-    Anatomy (source above target, data-relation="-1"):
-
-        [source]────┐
-                    │ ::before  — source leg (horizontal out + vertical down)
-                    │
-                    └──────┐ ::after   — destination leg (horizontal in + corner)
-                           │
-                      [destination]
-
-    Each connector is two pseudo-elements on the source label:
-
-        ::before  —  left half of the gap + vertical leg from the source
-        ::after   —  right half of the gap + rounded corner at the destination
+    Markup (LogicTree.vue):
 
+        - Each page column is a <ul>.
+        - Page headers: .linked-list__page-label with anchor-name: --page-N.
+        - Source fields: .linked-list__connector with --end-connection: --page-N, pointing at the target page’s anchor name.
+        - Multi-column hops: add .linked-list__page-leap on the source <li> and a .linked-list__extra-leap-connector child for the bridge segment. This helps separate multi-column connectors from adjacent pages.
 
+    Direct leap anatomy (source below destination page header):
 
+        [destination page header]
+                           ┌────── ::after — gap midpoint → destination corner
+                           │
+        [source]───────────┘ ::before — source centre → gap midpoint
 
+    Each direct connector is two pseudo-elements on .linked-list__connector:
 
+        ::before — vertical leg from source centre up toward the destination,
+                   plus the left half of the inter-column gap
+        ::after  — right half of the gap + rounded corner at the destination
 
-    How it works
+    Page leaps (.linked-list__page-leap + .linked-list__extra-leap-connector):
 
-    - A checkbox in .items is checked → the parent li matches :has(:checked).
-    - The label inside that li gets anchor-name: --checked-option.
-    - Connector pseudo-elements on that same label reference it with anchor(right --checked-option), anchor(center --checked-option), etc.
-    - anchor-scope: --checked-option scopes the anchor so each checked row gets its own connector (they don’t all fight over one anchor).
+        ::before on .linked-list__extra-leap-connector — stub out from the
+                   source and along the first gap
+        ::after  on .linked-list__extra-leap-connector — corner into the
+                   second column
+        ::before on .linked-list__connector — vertical leg from the buffer
+                   rail down to the destination page header
 
-    Pairing
+    Anchors:
 
-    The destination anchor is set separately on the page radio row:
+        --start-connection — set on each .linked-list__connector <li> (the source)
+        var(--end-connection) — anchor name of the target page header, declared in
+                             markup as --end-connection: --page-N on the source <li>
+        anchor-scope: --start-connection — keeps each source’s connector isolated
 */
 @layer components {
     /* Inspired by https://codepen.io/cbolson/pen/emzegWP */
@@ -47,7 +52,7 @@
         --clr-lines: rgba(0 0 0 / 0.25);
 
         --buffer-top-pull: 2rem;
-        --buffer-left-pull: 1rem;
+        --buffer-left-pull: 1.5rem;
 
         /* GROUP LOGIC TREE CONNECTORS / LAYOUT
         =================================================== */
@@ -96,16 +101,15 @@
                 }
             }
 
-            /* GROUP LOGIC TREE CONNECTORS / SOURCE ANCHOR
+            /* GROUP LOGIC TREE CONNECTORS / SOURCE
             =================================================== */
             .linked-list__connector {
-                anchor-name: --checked-option;
-                anchor-scope: --checked-option; /* one anchor per checked source */
+                anchor-name: --start-connection;
+                anchor-scope: --start-connection; /* one anchor per source row */
 
-                /* GROUP LOGIC TREE CONNECTORS / CONNECTOR BASE
+                /* GROUP LOGIC TREE CONNECTORS / DIRECT LEAP
                 =================================================== */
-                /* Shared by all relations — sets the horizontal width of both legs.
-                   ::before spans source right edge → gap midpoint.
+                /* ::before spans source right edge → gap midpoint.
                    ::after  spans gap midpoint → destination left edge. */
                 &::before,
                 &::after {
@@ -113,13 +117,13 @@
                     position: absolute;
                     pointer-events: none;
                     border: var(--join-line);
-                    right: calc(anchor(left var(--destination)) + var(--gap) / 2);
-                    left: anchor(right --checked-option);
+                    right: calc(anchor(left var(--end-connection)) + var(--gap) / 2);
+                    left: anchor(right --start-connection);
                 }
 
                 &::before {
-                    top: anchor(bottom var(--destination));
-                    bottom: anchor(center --checked-option);
+                    top: anchor(bottom var(--end-connection));
+                    bottom: anchor(center --start-connection);
                     border-left-color: transparent;
                     border-top-color: transparent;
                     border-radius: 0 0 var(--join-radius) 0;
@@ -127,23 +131,29 @@
 
                 &::after {
                     top: auto;
-                    right: anchor(left var(--destination));
-                    bottom: calc(anchor(bottom var(--destination)) - var(--join-stroke));
-                    left: calc(anchor(left var(--destination)) - var(--gap) / 2 - var(--join-stroke));
+                    right: anchor(left var(--end-connection));
+                    bottom: calc(anchor(bottom var(--end-connection)) - var(--join-stroke));
+                    left: calc(anchor(left var(--end-connection)) - var(--gap) / 2 - var(--join-stroke));
                     height: var(--join-radius);
                     border-right-color: transparent;
                     border-bottom-color: transparent;
                     border-radius: var(--join-radius) 0 0 0;
                 }
             }
+            /* GROUP LOGIC TREE CONNECTORS / PAGE LEAP (SOURCE → NON-ADJACENT PAGE)
+            =================================================== */
+            /* Overrides the direct-hop ::before to terminate at the buffer rail instead of the source centre, leaving room for the bridge element. */
             .linked-list__page-leap {
                 &::before {
-                    bottom: calc(anchor(center --checked-option) + var(--buffer-top-pull));
-                    left: calc(anchor(right --checked-option) + var(--gap));
+                    bottom: calc(anchor(center --start-connection) + var(--buffer-top-pull));
+                    left: calc(anchor(right --start-connection) + var(--gap));
                 }
             }
         }
     }
+
+    /* GROUP LOGIC TREE CONNECTORS / LEAP BRIDGE (FIRST GAP + CORNER)
+    =================================================== */
     .linked-list__extra-leap-connector {
         &::before,
         &::after {
@@ -153,9 +163,9 @@
         }
 
         &::before {
-            top: calc(anchor(top --checked-option) + var(--buffer-top-pull) / 2 - var(--join-stroke) * 4);
-            bottom: anchor(center --checked-option);
-            left: anchor(right --checked-option);
+            top: calc(anchor(top --start-connection) + var(--buffer-top-pull) / 2 - var(--join-stroke) * 4);
+            bottom: anchor(center --start-connection);
+            left: anchor(right --start-connection);
             width: calc(var(--gap) - var(--buffer-left-pull));
             border-block-end: var(--join-line);
             border-inline-end: var(--join-line);
@@ -164,10 +174,10 @@
 
         &::after {
             /* display: none; */
-            top: calc(anchor(center --checked-option) - var(--buffer-top-pull) - var(--join-stroke));
-            bottom: calc(anchor(center --checked-option) + var(--buffer-top-pull) / 2);
+            top: calc(anchor(center --start-connection) - var(--buffer-top-pull) - var(--join-stroke));
+            bottom: calc(anchor(center --start-connection) + var(--buffer-top-pull) / 2);
             width: calc(var(--buffer-left-pull) + var(--join-stroke) * 2);
-            left: calc(anchor(right --checked-option) + var(--gap) - var(--buffer-left-pull) - var(--join-stroke));
+            left: calc(anchor(right --start-connection) + var(--gap) - var(--buffer-left-pull) - var(--join-stroke));
             border-inline-start: var(--join-line);
             border-block-start: var(--join-line);
             border-top-left-radius: var(--join-radius);
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 706bfa9b92..2543f4775a 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -4,18 +4,18 @@
             <li class="linked-list__page-label" style="anchor-name: --page-1;">
                 {{ __('Page :number', { number: 1 }) }}
             </li>
-            <li class="linked-list__connector" style="--destination: --page-2;">
+            <li class="linked-list__connector" style="--end-connection: --page-2;">
                 Item 1
             </li>
-            <li class="linked-list__connector linked-list__page-leap" style="--destination: --page-3;">
+            <li class="linked-list__connector linked-list__page-leap" style="--end-connection: --page-3;">
                 <div class="linked-list__extra-leap-connector"></div>
                 Item 2
             </li>
-            <li class="linked-list__connector linked-list__page-leap" style="--destination: --page-3;">
+            <li class="linked-list__connector linked-list__page-leap" style="--end-connection: --page-3;">
                 <div class="linked-list__extra-leap-connector"></div>
                 Item 3
             </li>
-            <li class="linked-list__connector" style="--destination: --page-2;">
+            <li class="linked-list__connector" style="--end-connection: --page-2;">
                 Item 4
             </li>
         </ul>

From 7ab9c4eb0670c410eefebe8a0eed24ca1064d339 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 9 Jun 2026 17:30:02 +0100
Subject: [PATCH 26/79] Tree view CSS - make calculations more robust

---
 resources/css/components/forms/logic-tree.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index e793962c60..2ac9107e88 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -51,7 +51,9 @@
         --gap: 7rem;
         --clr-lines: rgba(0 0 0 / 0.25);
 
-        --buffer-top-pull: 2rem;
+        --item-padding: 1rem;
+
+        --buffer-top-pull: calc(1rem + var(--item-padding));
         --buffer-left-pull: 1.5rem;
 
         /* GROUP LOGIC TREE CONNECTORS / LAYOUT
@@ -78,7 +80,7 @@
                 border: 1px solid var(--clr-lines);
                 display: flex;
                 align-items: center;
-                padding: 1rem 1.5rem;
+                padding: var(--item-padding) 1.5rem;
 
                 label {
                     flex: 1;
@@ -184,3 +186,4 @@
         }
     }
 }
+

From 922f078ea3010454fb6ab8a98465289145c69bc7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 09:30:22 +0100
Subject: [PATCH 27/79] Tree view CSS - loop over fields dynamically

---
 resources/css/components/forms/logic-tree.css |  14 +-
 resources/js/pages/forms/Logic.vue            |   2 +-
 resources/js/pages/forms/LogicTree.vue        | 143 +++++++++---------
 3 files changed, 81 insertions(+), 78 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 2ac9107e88..4a44154f3c 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -46,14 +46,16 @@
     /* Inspired by https://codepen.io/cbolson/pen/emzegWP */
     .linked-list {
         --join-stroke: 1px;
-        --join-line: var(--join-stroke) solid var(--color-blue-400);
+        --join-line: var(--join-stroke) dashed var(--color-blue-400);
         --join-radius: 20px;
         --gap: 7rem;
         --clr-lines: rgba(0 0 0 / 0.25);
 
         --item-padding: 1rem;
+        --item-height: 4.5rem;
 
-        --buffer-top-pull: calc(1rem + var(--item-padding));
+        /* Bit of a magic number here to pull the line into the gap between the items */
+        --buffer-top-pull: calc(1.45rem + var(--item-padding));
         --buffer-left-pull: 1.5rem;
 
         /* GROUP LOGIC TREE CONNECTORS / LAYOUT
@@ -61,7 +63,7 @@
         position: relative;
         display: grid;
         align-items: start;
-        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+        grid-template-columns: repeat(auto-fill, 10rem);
         /* width: min(100%, 800px); */
         gap: var(--gap);
 
@@ -80,6 +82,7 @@
                 border: 1px solid var(--clr-lines);
                 display: flex;
                 align-items: center;
+                height: var(--item-height);
                 padding: var(--item-padding) 1.5rem;
 
                 label {
@@ -177,7 +180,7 @@
         &::after {
             /* display: none; */
             top: calc(anchor(center --start-connection) - var(--buffer-top-pull) - var(--join-stroke));
-            bottom: calc(anchor(center --start-connection) + var(--buffer-top-pull) / 2);
+            bottom: calc(anchor(center --start-connection) + var(--buffer-top-pull) / 2  + var(--join-stroke));
             width: calc(var(--buffer-left-pull) + var(--join-stroke) * 2);
             left: calc(anchor(right --start-connection) + var(--gap) - var(--buffer-left-pull) - var(--join-stroke));
             border-inline-start: var(--join-line);
@@ -185,5 +188,4 @@
             border-top-left-radius: var(--join-radius);
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index eae947e5f9..2e6e2dcb91 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -138,6 +138,6 @@ onUnmounted(() => {
             />
         </template>
 
-        <LogicTree v-else />
+        <LogicTree v-else :pages="pages" :fields="fields" />
     </div>
 </template>
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 2543f4775a..37ebfb9f92 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,76 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    pages: { type: Array, required: true },
+    fields: { type: Array, required: true },
+});
+
+const pageAnchor = (pageIndex) => `--page-${pageIndex + 1}`;
+
+const fieldsByPage = computed(() => {
+    return props.pages.map((page, pageIndex) => ({
+        page,
+        pageIndex,
+        fields: props.fields.filter((field) => field.page_index === pageIndex),
+    }));
+});
+
+const fieldConnections = computed(() => {
+    const connections = {};
+
+    props.pages.forEach((page, pageIndex) => {
+        (page.rules ?? []).forEach((rule) => {
+            if (! rule.destination) {
+                return;
+            }
+
+            const destinationPageIndex = props.pages.findIndex((p) => p._id === rule.destination);
+
+            if (destinationPageIndex <= pageIndex) {
+                return;
+            }
+
+            const condition = (rule.conditions ?? []).find((c) => c.field && c.value !== null && c.value !== '');
+
+            if (! condition?.field) {
+                return;
+            }
+
+            connections[condition.field] = {
+                endConnection: pageAnchor(destinationPageIndex),
+                leap: destinationPageIndex - pageIndex > 1,
+            };
+        });
+    });
+
+    return connections;
+});
+
+const pageTitle = (page, pageIndex) => page.display || __('Page :number', { number: pageIndex + 1 });
+
+const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
+</script>
+
 <template>
     <div class="linked-list">
-        <ul>
-            <li class="linked-list__page-label" style="anchor-name: --page-1;">
-                {{ __('Page :number', { number: 1 }) }}
-            </li>
-            <li class="linked-list__connector" style="--end-connection: --page-2;">
-                Item 1
-            </li>
-            <li class="linked-list__connector linked-list__page-leap" style="--end-connection: --page-3;">
-                <div class="linked-list__extra-leap-connector"></div>
-                Item 2
-            </li>
-            <li class="linked-list__connector linked-list__page-leap" style="--end-connection: --page-3;">
-                <div class="linked-list__extra-leap-connector"></div>
-                Item 3
-            </li>
-            <li class="linked-list__connector" style="--end-connection: --page-2;">
-                Item 4
-            </li>
-        </ul>
-        
-        <ul>
-            <li class="linked-list__page-label" style="anchor-name: --page-2;">
-                {{ __('Page :number', { number: 2 }) }}
-            </li>
-            <li>
-                Item 1
-            </li>
-            <li>
-                Item 2
-            </li>
-            <li>
-                Item 3
-            </li>
-            <li>
-                Item 4
-            </li>
-            <li>
-                Item 5
-            </li>
-            <li>
-                Item 6
-            </li>
-            <li>
-                Item 7
-            </li>
-        </ul>
-
-        <ul>
-            <li class="linked-list__page-label" style="anchor-name: --page-3;">
-                {{ __('Page :number', { number: 3 }) }}
-            </li>
-            <li>
-                Item 1
-            </li>
-            <li>
-                Item 2
-            </li>
-            <li>
-                Item 3
-            </li>
-            <li>
-                Item 4
-            </li>
-            <li>
-                Item 5
-            </li>
-            <li>
-                Item 6
-            </li>
-            <li>
-                Item 7
+        <ul v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage" :key="page._id">
+            <li
+                class="linked-list__page-label"
+                :style="{ 'anchor-name': pageAnchor(pageIndex) }"
+            >
+                {{ pageTitle(page, pageIndex) }}
+            </li>
+            <li
+                v-for="field in pageFields"
+                :key="field._id"
+                :class="{
+                    'linked-list__connector': fieldConnection(field),
+                    'linked-list__page-leap': fieldConnection(field)?.leap,
+                }"
+                :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
+            >
+                <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
+                {{ field.display }}
             </li>
         </ul>
     </div>

From 671e6baac0b16b01bb28ddb4b645204f4b845351 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 10:34:32 +0100
Subject: [PATCH 28/79] Tree view CSS - start decorating

---
 resources/css/components/forms/logic-tree.css | 41 ++++++++-----------
 resources/css/core/utilities.css              | 11 +++++
 resources/js/pages/forms/LogicTree.vue        |  2 +-
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 4a44154f3c..14c93b9c3d 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -46,10 +46,10 @@
     /* Inspired by https://codepen.io/cbolson/pen/emzegWP */
     .linked-list {
         --join-stroke: 1px;
-        --join-line: var(--join-stroke) dashed var(--color-blue-400);
+        --join-line: var(--join-stroke) solid var(--color-blue-400);
         --join-radius: 20px;
         --gap: 7rem;
-        --clr-lines: rgba(0 0 0 / 0.25);
+        --column-width: 10rem;
 
         --item-padding: 1rem;
         --item-height: 4.5rem;
@@ -63,33 +63,23 @@
         position: relative;
         display: grid;
         align-items: start;
-        grid-template-columns: repeat(auto-fill, 10rem);
+        grid-template-columns: repeat(auto-fill, var(--column-width));
         /* width: min(100%, 800px); */
         gap: var(--gap);
 
-        :where(.dark) & {
-            --clr-lines: rgba(255 255 255 / 0.25);
-        }
-
         ul {
             margin: 0;
-            padding: 0;
             list-style: none;
             display: grid;
             gap: 0.5rem;
+            @apply p-2 bg-gray-100 rounded-md;
 
             li {
-                border: 1px solid var(--clr-lines);
                 display: flex;
                 align-items: center;
                 height: var(--item-height);
-                padding: var(--item-padding) 1.5rem;
-
-                label {
-                    flex: 1;
-                    padding: 0.5rem;
-                    cursor: pointer;
-                }
+                padding-block: var(--item-padding);
+                @apply px-3 border-1 border-gray-300 rounded-md bg-white text-xs;
             }
 
             .linked-list__page-label {
@@ -149,6 +139,10 @@
             =================================================== */
             /* Overrides the direct-hop ::before to terminate at the buffer rail instead of the source centre, leaving room for the bridge element. */
             .linked-list__page-leap {
+                &::before,
+                &::after {
+                    border-style: dashed;
+                }
                 &::before {
                     bottom: calc(anchor(center --start-connection) + var(--buffer-top-pull));
                     left: calc(anchor(right --start-connection) + var(--gap));
@@ -160,13 +154,6 @@
     /* GROUP LOGIC TREE CONNECTORS / LEAP BRIDGE (FIRST GAP + CORNER)
     =================================================== */
     .linked-list__extra-leap-connector {
-        &::before,
-        &::after {
-            content: '';
-            position: absolute;
-            pointer-events: none;
-        }
-
         &::before {
             top: calc(anchor(top --start-connection) + var(--buffer-top-pull) / 2 - var(--join-stroke) * 4);
             bottom: anchor(center --start-connection);
@@ -187,5 +174,13 @@
             border-block-start: var(--join-line);
             border-top-left-radius: var(--join-radius);
         }
+
+        &::before,
+        &::after {
+            border-style: dashed;
+            content: '';
+            position: absolute;
+            pointer-events: none;
+        }
     }
 }
\ No newline at end of file
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 12381bb4fb..32ae46865c 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -100,6 +100,17 @@
     text-box: ex alphabetic;
 }
 
+@utility st-line-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    box-orient: vertical;
+    /* Stop padding ruining the clamp and use margin instead */
+    padding-block-end: 0;
+    overflow: hidden;
+    -webkit-line-clamp: var(--clamp, 2);
+    line-clamp: var(--clamp, 2);
+}
+
 @utility placeholder-xs {
     /* =Jay. The default of 1em on field inputs feels a bit clumsy/big */
     &::placeholder {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 37ebfb9f92..12e1e06492 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -71,7 +71,7 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
                 :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
             >
                 <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
-                {{ field.display }}
+                <span class="st-line-clamp">{{ field.display }}</span>
             </li>
         </ul>
     </div>

From 2fb62e218bf3ecb27fe7726f4661bf061c28b446 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 10:39:13 +0100
Subject: [PATCH 29/79] Tree view - break out of container so we have more
 space

---
 resources/js/pages/forms/Logic.vue     | 62 +++++++++++++-------------
 resources/js/pages/forms/LogicTree.vue |  2 +-
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 2e6e2dcb91..1ff59ab3e9 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -108,36 +108,38 @@ onUnmounted(() => {
         </Button>
     </Teleport>
 
-    <div class="py-4 mx-auto max-w-5xl">
-        <Header class="mb-2">
-            <template #title>
-                <StatusIndicator status="published" />
-                {{ form.title }}
+    <div class="py-4">
+        <div class="mx-auto max-w-5xl">
+            <Header class="mb-2">
+                <template #title>
+                    <StatusIndicator status="published" />
+                    {{ form.title }}
+                </template>
+                <template #actions>
+                    <ToggleGroup v-model="logicView" size="sm">
+                        <ToggleItem value="list" icon="layout-list" :label="__('List')" />
+                        <ToggleItem value="tree" icon="logic-tree" :label="__('Tree')" />
+                    </ToggleGroup>
+                </template>
+            </Header>
+
+            <template v-if="logicView === 'list'">
+                <PageLogic
+                    v-if="pages.length > 1"
+                    class="mb-6"
+                    v-model:pages="pages"
+                    :suggestable-fields
+                    :fieldtypes
+                />
+
+                <FieldLogic
+                    v-model:fields="fields"
+                    :suggestable-fields
+                    :fieldtypes
+                />
             </template>
-            <template #actions>
-                <ToggleGroup v-model="logicView" size="sm">
-                    <ToggleItem value="list" icon="layout-list" :label="__('List')" />
-                    <ToggleItem value="tree" icon="logic-tree" :label="__('Tree')" />
-                </ToggleGroup>
-            </template>
-        </Header>
-
-        <template v-if="logicView === 'list'">
-            <PageLogic
-                v-if="pages.length > 1"
-                class="mb-6"
-                v-model:pages="pages"
-                :suggestable-fields
-                :fieldtypes
-            />
-
-            <FieldLogic
-                v-model:fields="fields"
-                :suggestable-fields
-                :fieldtypes
-            />
-        </template>
-
-        <LogicTree v-else :pages="pages" :fields="fields" />
+        </div>
+
+        <LogicTree v-if="logicView === 'tree'" :pages="pages" :fields="fields" />
     </div>
 </template>
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 12e1e06492..43c36daa1f 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -53,7 +53,7 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
 </script>
 
 <template>
-    <div class="linked-list">
+    <div class="linked-list w-full">
         <ul v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage" :key="page._id">
             <li
                 class="linked-list__page-label"

From cb9d83780b16fd793bb86bcb04ba68d2cd8254c5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 10:44:58 +0100
Subject: [PATCH 30/79] Tree view - decorate the page title

---
 resources/css/components/forms/logic-tree.css | 16 ++--------
 resources/js/pages/forms/LogicTree.vue        | 29 +++++++++++++++++--
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 14c93b9c3d..c07b7ed2cb 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -49,7 +49,7 @@
         --join-line: var(--join-stroke) solid var(--color-blue-400);
         --join-radius: 20px;
         --gap: 7rem;
-        --column-width: 10rem;
+        --column-width: 12rem;
 
         --item-padding: 1rem;
         --item-height: 4.5rem;
@@ -82,18 +82,8 @@
                 @apply px-3 border-1 border-gray-300 rounded-md bg-white text-xs;
             }
 
-            .linked-list__page-label {
-                font-size: 0.875rem;
-                font-weight: 500;
-                color: light-dark(var(--color-gray-700, #374151), var(--color-gray-200, #e5e7eb));
-                background: light-dark(var(--color-gray-50, #f9fafb), var(--color-gray-900, #111827));
-
-                &:not(:has(> label)) {
-                    padding: 0.5rem;
-                }
-                &::after {
-                    content: unset;
-                }
+            .linked-list__page-label::after {
+                content: unset;
             }
 
             /* GROUP LOGIC TREE CONNECTORS / SOURCE
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 43c36daa1f..9ec82fbf60 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { Icon } from '@ui';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -49,6 +50,14 @@ const fieldConnections = computed(() => {
 
 const pageTitle = (page, pageIndex) => page.display || __('Page :number', { number: pageIndex + 1 });
 
+const hasPageRules = (page) => (page.rules ?? []).some((rule) => {
+    if (! rule.destination) {
+        return false;
+    }
+
+    return (rule.conditions ?? []).some((condition) => condition.field && condition.value !== null && condition.value !== '');
+});
+
 const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
 </script>
 
@@ -56,10 +65,26 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
     <div class="linked-list w-full">
         <ul v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage" :key="page._id">
             <li
-                class="linked-list__page-label"
+                class="linked-list__page-label !h-auto items-stretch border-0 bg-transparent px-0 py-1"
                 :style="{ 'anchor-name': pageAnchor(pageIndex) }"
             >
-                {{ pageTitle(page, pageIndex) }}
+                <div class="flex w-full min-w-0 items-center gap-2">
+                    <div class="flex min-w-0 flex-1 items-center gap-2">
+                        <div class="h-px min-w-0 flex-1 bg-gray-200 dark:bg-gray-700" aria-hidden="true" />
+                        <Icon
+                            v-if="hasPageRules(page)"
+                            v-tooltip="__('Logic attached')"
+                            name="logic-tree"
+                            class="size-3.5! shrink-0 text-gray-400 dark:text-gray-500"
+                            aria-hidden="true"
+                        />
+                    </div>
+                    <div class="flex min-w-0 shrink-0 items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-sm font-medium text-gray-700 dark:border-gray-700 dark:text-gray-200">
+                        <Icon name="page" class="size-4 shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
+                        <span class="st-line-clamp">{{ pageTitle(page, pageIndex) }}</span>
+                    </div>
+                    <div class="h-px min-w-0 flex-1 bg-gray-200 dark:bg-gray-700" aria-hidden="true" />
+                </div>
             </li>
             <li
                 v-for="field in pageFields"

From d9d15c2f4bc8738bd562ee0711b7e19ddf961d7a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 10:46:14 +0100
Subject: [PATCH 31/79] Tree view - search/replace

---
 resources/css/components/forms/logic-tree.css | 4 ++--
 resources/js/pages/forms/LogicTree.vue        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index c07b7ed2cb..fa88e1da86 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -9,7 +9,7 @@
     Markup (LogicTree.vue):
 
         - Each page column is a <ul>.
-        - Page headers: .linked-list__page-label with anchor-name: --page-N.
+        - Page headers: .linked-list__page-name with anchor-name: --page-N.
         - Source fields: .linked-list__connector with --end-connection: --page-N, pointing at the target page’s anchor name.
         - Multi-column hops: add .linked-list__page-leap on the source <li> and a .linked-list__extra-leap-connector child for the bridge segment. This helps separate multi-column connectors from adjacent pages.
 
@@ -82,7 +82,7 @@
                 @apply px-3 border-1 border-gray-300 rounded-md bg-white text-xs;
             }
 
-            .linked-list__page-label::after {
+            .linked-list__page-name::after {
                 content: unset;
             }
 
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 9ec82fbf60..4b977264bd 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -65,7 +65,7 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
     <div class="linked-list w-full">
         <ul v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage" :key="page._id">
             <li
-                class="linked-list__page-label !h-auto items-stretch border-0 bg-transparent px-0 py-1"
+                class="linked-list__page-name !h-auto items-stretch border-0 bg-transparent px-0 py-1"
                 :style="{ 'anchor-name': pageAnchor(pageIndex) }"
             >
                 <div class="flex w-full min-w-0 items-center gap-2">

From a1e0d171f43bfd9f58c31ecec0622df9529e94b3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 10:53:42 +0100
Subject: [PATCH 32/79] Tree view - Fix icon location

---
 resources/js/pages/forms/LogicTree.vue | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 4b977264bd..c0924c46cd 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -68,18 +68,16 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
                 class="linked-list__page-name !h-auto items-stretch border-0 bg-transparent px-0 py-1"
                 :style="{ 'anchor-name': pageAnchor(pageIndex) }"
             >
-                <div class="flex w-full min-w-0 items-center gap-2">
-                    <div class="flex min-w-0 flex-1 items-center gap-2">
-                        <div class="h-px min-w-0 flex-1 bg-gray-200 dark:bg-gray-700" aria-hidden="true" />
+                <div class="flex w-full min-w-0 flex-nowrap items-center gap-1.5">
+                    <div class="h-px min-w-0 flex-1 bg-gray-200 dark:bg-gray-700" aria-hidden="true" />
+                    <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">
                         <Icon
-                            v-if="hasPageRules(page)"
-                            v-tooltip="__('Logic attached')"
                             name="logic-tree"
-                            class="size-3.5! shrink-0 text-gray-400 dark:text-gray-500"
+                            class="size-3.5! text-gray-400 dark:text-gray-500"
                             aria-hidden="true"
                         />
-                    </div>
-                    <div class="flex min-w-0 shrink-0 items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-sm font-medium text-gray-700 dark:border-gray-700 dark:text-gray-200">
+                    </span>
+                    <div class="flex shrink-0 items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-sm font-medium text-gray-700 dark:border-gray-700 dark:text-gray-200">
                         <Icon name="page" class="size-4 shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
                         <span class="st-line-clamp">{{ pageTitle(page, pageIndex) }}</span>
                     </div>

From 2831affbd8f013274b1b69c411f2df68aa49c86e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 11:08:00 +0100
Subject: [PATCH 33/79] Tree view - Page name decoration

---
 resources/css/components/forms/logic-tree.css | 1 +
 resources/js/pages/forms/LogicTree.vue        | 8 +++-----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index fa88e1da86..cb2ccd731e 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -73,6 +73,7 @@
             display: grid;
             gap: 0.5rem;
             @apply p-2 bg-gray-100 rounded-md;
+            padding-top: 0;
 
             li {
                 display: flex;
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index c0924c46cd..8e9b32581d 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -65,11 +65,10 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
     <div class="linked-list w-full">
         <ul v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage" :key="page._id">
             <li
-                class="linked-list__page-name !h-auto items-stretch border-0 bg-transparent px-0 py-1"
+                class="linked-list__page-name !h-auto items-stretch border-0 bg-transparent px-0 py-0"
                 :style="{ 'anchor-name': pageAnchor(pageIndex) }"
             >
-                <div class="flex w-full min-w-0 flex-nowrap items-center gap-1.5">
-                    <div class="h-px min-w-0 flex-1 bg-gray-200 dark:bg-gray-700" aria-hidden="true" />
+                <div class="flex w-full min-w-0 flex-nowrap items-center justify-center gap-1.5">
                     <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">
                         <Icon
                             name="logic-tree"
@@ -77,11 +76,10 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
                             aria-hidden="true"
                         />
                     </span>
-                    <div class="flex shrink-0 items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-sm font-medium text-gray-700 dark:border-gray-700 dark:text-gray-200">
+                    <div class="flex shrink-0 items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200">
                         <Icon name="page" class="size-4 shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
                         <span class="st-line-clamp">{{ pageTitle(page, pageIndex) }}</span>
                     </div>
-                    <div class="h-px min-w-0 flex-1 bg-gray-200 dark:bg-gray-700" aria-hidden="true" />
                 </div>
             </li>
             <li

From f6df5eeca789236a1537dde28184a7dee5c6f422 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 11:10:23 +0100
Subject: [PATCH 34/79] Tree view - pull the page name out of the ul

---
 resources/css/components/forms/logic-tree.css | 18 +++++---
 resources/js/pages/forms/LogicTree.vue        | 41 +++++++++++--------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index cb2ccd731e..b8b1831e22 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -8,7 +8,7 @@
 
     Markup (LogicTree.vue):
 
-        - Each page column is a <ul>.
+        - Each page column is a .linked-list__column (.linked-list__page-name + <ul>).
         - Page headers: .linked-list__page-name with anchor-name: --page-N.
         - Source fields: .linked-list__connector with --end-connection: --page-N, pointing at the target page’s anchor name.
         - Multi-column hops: add .linked-list__page-leap on the source <li> and a .linked-list__extra-leap-connector child for the bridge segment. This helps separate multi-column connectors from adjacent pages.
@@ -67,13 +67,23 @@
         /* width: min(100%, 800px); */
         gap: var(--gap);
 
+        .linked-list__column {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            min-width: 0;
+        }
+
+        .linked-list__page-name {
+            @apply px-2 pt-2;
+        }
+
         ul {
             margin: 0;
             list-style: none;
             display: grid;
             gap: 0.5rem;
             @apply p-2 bg-gray-100 rounded-md;
-            padding-top: 0;
 
             li {
                 display: flex;
@@ -83,10 +93,6 @@
                 @apply px-3 border-1 border-gray-300 rounded-md bg-white text-xs;
             }
 
-            .linked-list__page-name::after {
-                content: unset;
-            }
-
             /* GROUP LOGIC TREE CONNECTORS / SOURCE
             =================================================== */
             .linked-list__connector {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 8e9b32581d..ec5b3b62c3 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -63,9 +63,13 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
 
 <template>
     <div class="linked-list w-full">
-        <ul v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage" :key="page._id">
-            <li
-                class="linked-list__page-name !h-auto items-stretch border-0 bg-transparent px-0 py-0"
+        <div
+            v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage"
+            :key="page._id"
+            class="linked-list__column"
+        >
+            <div
+                class="linked-list__page-name"
                 :style="{ 'anchor-name': pageAnchor(pageIndex) }"
             >
                 <div class="flex w-full min-w-0 flex-nowrap items-center justify-center gap-1.5">
@@ -81,19 +85,22 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
                         <span class="st-line-clamp">{{ pageTitle(page, pageIndex) }}</span>
                     </div>
                 </div>
-            </li>
-            <li
-                v-for="field in pageFields"
-                :key="field._id"
-                :class="{
-                    'linked-list__connector': fieldConnection(field),
-                    'linked-list__page-leap': fieldConnection(field)?.leap,
-                }"
-                :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
-            >
-                <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
-                <span class="st-line-clamp">{{ field.display }}</span>
-            </li>
-        </ul>
+            </div>
+
+            <ul>
+                <li
+                    v-for="field in pageFields"
+                    :key="field._id"
+                    :class="{
+                        'linked-list__connector': fieldConnection(field),
+                        'linked-list__page-leap': fieldConnection(field)?.leap,
+                    }"
+                    :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
+                >
+                    <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
+                    <span class="st-line-clamp">{{ field.display }}</span>
+                </li>
+            </ul>
+        </div>
     </div>
 </template>

From b13b168a3c8a8576d526c1042619db3da3e3b150 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 11:37:43 +0100
Subject: [PATCH 35/79] Tree view - Finish page name decoration

---
 resources/js/pages/forms/LogicTree.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index ec5b3b62c3..23c9a56592 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -72,7 +72,10 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
                 class="linked-list__page-name"
                 :style="{ 'anchor-name': pageAnchor(pageIndex) }"
             >
-                <div class="flex w-full min-w-0 flex-nowrap items-center justify-center gap-1.5">
+                <div
+                    class="flex w-full min-w-0 flex-nowrap items-center justify-center gap-1.5"
+                    :class="{ '-ms-1.5': hasPageRules(page) }"
+                >
                     <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">
                         <Icon
                             name="logic-tree"
@@ -80,9 +83,12 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
                             aria-hidden="true"
                         />
                     </span>
-                    <div class="flex shrink-0 items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-sm font-medium text-gray-700 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200">
-                        <Icon name="page" class="size-4 shrink-0 text-gray-500 dark:text-gray-400" aria-hidden="true" />
-                        <span class="st-line-clamp">{{ pageTitle(page, pageIndex) }}</span>
+                    <div
+                        class="mx-auto flex w-full shrink-0 justify-center items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-xs font-medium text-gray-850 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
+                        :class="{ 'w-[85%]!': hasPageRules(page) }"
+                    >
+                        <Icon name="page" class="size-4 shrink-0 -ms-1.5 text-gray-500 dark:text-gray-400" aria-hidden="true" />
+                        <span class="line-clamp-1">{{ pageTitle(page, pageIndex) }}</span>
                     </div>
                 </div>
             </div>

From 8642b7615c8f3c057ee2c6678325c6c155260c2c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 11:41:00 +0100
Subject: [PATCH 36/79] Remove line clamp utility, Tailwind already had it

---
 resources/css/core/utilities.css       | 11 -----------
 resources/js/pages/forms/LogicTree.vue |  2 +-
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 32ae46865c..12381bb4fb 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -100,17 +100,6 @@
     text-box: ex alphabetic;
 }
 
-@utility st-line-clamp {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    box-orient: vertical;
-    /* Stop padding ruining the clamp and use margin instead */
-    padding-block-end: 0;
-    overflow: hidden;
-    -webkit-line-clamp: var(--clamp, 2);
-    line-clamp: var(--clamp, 2);
-}
-
 @utility placeholder-xs {
     /* =Jay. The default of 1em on field inputs feels a bit clumsy/big */
     &::placeholder {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 23c9a56592..6712a456c4 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -104,7 +104,7 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
                     :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
                 >
                     <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
-                    <span class="st-line-clamp">{{ field.display }}</span>
+                    <span class="line-clamp-2">{{ field.display }}</span>
                 </li>
             </ul>
         </div>

From 9dc5d758e556cb715b70f7da84b5195f4e788fd2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 11:47:35 +0100
Subject: [PATCH 37/79] Tree view - Page name decoration

---
 resources/css/components/forms/logic-tree.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index b8b1831e22..ee7e38321e 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -49,7 +49,7 @@
         --join-line: var(--join-stroke) solid var(--color-blue-400);
         --join-radius: 20px;
         --gap: 7rem;
-        --column-width: 12rem;
+        --column-width: 12.5rem;
 
         --item-padding: 1rem;
         --item-height: 4.5rem;
@@ -64,7 +64,6 @@
         display: grid;
         align-items: start;
         grid-template-columns: repeat(auto-fill, var(--column-width));
-        /* width: min(100%, 800px); */
         gap: var(--gap);
 
         .linked-list__column {
@@ -83,14 +82,14 @@
             list-style: none;
             display: grid;
             gap: 0.5rem;
-            @apply p-2 bg-gray-100 rounded-md;
+            @apply p-1.5 px-1.5 bg-gray-100 rounded-lg;
 
             li {
                 display: flex;
                 align-items: center;
                 height: var(--item-height);
                 padding-block: var(--item-padding);
-                @apply px-3 border-1 border-gray-300 rounded-md bg-white text-xs;
+                @apply px-3 border-1 border-gray-300 rounded-md bg-white shadow-ui-xs text-xs;
             }
 
             /* GROUP LOGIC TREE CONNECTORS / SOURCE

From 3468b9b9317bd4539354abdfae377fdd07e66fae Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 11:53:28 +0100
Subject: [PATCH 38/79] Tree view - add connector icon

---
 resources/js/pages/forms/LogicTree.vue | 28 ++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 6712a456c4..016aa97b3a 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -59,6 +59,24 @@ const hasPageRules = (page) => (page.rules ?? []).some((rule) => {
 });
 
 const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
+
+const connectorDestinationPageIndices = computed(() => {
+    const indices = new Set();
+
+    Object.values(fieldConnections.value).forEach((connection) => {
+        const pageNumber = Number(connection.endConnection.replace('--page-', ''));
+
+        if (! Number.isNaN(pageNumber)) {
+            indices.add(pageNumber - 1);
+        }
+    });
+
+    return indices;
+});
+
+const isConnectorDestination = (pageIndex) => connectorDestinationPageIndices.value.has(pageIndex);
+
+const hasPageNameLeadingIcons = (page, pageIndex) => isConnectorDestination(pageIndex) || hasPageRules(page);
 </script>
 
 <template>
@@ -74,8 +92,14 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
             >
                 <div
                     class="flex w-full min-w-0 flex-nowrap items-center justify-center gap-1.5"
-                    :class="{ '-ms-1.5': hasPageRules(page) }"
+                    :class="{ '-ms-1.5': hasPageNameLeadingIcons(page, pageIndex) }"
                 >
+                    <Icon
+                        v-if="isConnectorDestination(pageIndex)"
+                        name="chevron-right"
+                        class="size-3! shrink-0 -ms-1.5 relative -top-0.25 text-blue-400"
+                        aria-hidden="true"
+                    />
                     <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">
                         <Icon
                             name="logic-tree"
@@ -85,7 +109,7 @@ const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
                     </span>
                     <div
                         class="mx-auto flex w-full shrink-0 justify-center items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-xs font-medium text-gray-850 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
-                        :class="{ 'w-[85%]!': hasPageRules(page) }"
+                        :class="{ 'w-[85%]!': hasPageNameLeadingIcons(page, pageIndex) }"
                     >
                         <Icon name="page" class="size-4 shrink-0 -ms-1.5 text-gray-500 dark:text-gray-400" aria-hidden="true" />
                         <span class="line-clamp-1">{{ pageTitle(page, pageIndex) }}</span>

From 8c1e967ad6f960f06f98a8f594b518bc981fe287 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 11:59:16 +0100
Subject: [PATCH 39/79] Tree view - Tidy connector icon

---
 resources/js/pages/forms/LogicTree.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 016aa97b3a..0cd0e2fecf 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -97,7 +97,7 @@ const hasPageNameLeadingIcons = (page, pageIndex) => isConnectorDestination(page
                     <Icon
                         v-if="isConnectorDestination(pageIndex)"
                         name="chevron-right"
-                        class="size-3! shrink-0 -ms-1.5 relative -top-0.25 text-blue-400"
+                        class="size-3! shrink-0 -ms-2.5 relative -top-0.25 text-blue-400"
                         aria-hidden="true"
                     />
                     <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">

From 3732d90d3eebbf4a8e7943980a344944b147eb95 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 13:54:40 +0100
Subject: [PATCH 40/79] Tree view - Add icons

---
 resources/css/components/forms/logic-tree.css |  2 +-
 resources/js/pages/forms/LogicTree.vue        | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index ee7e38321e..1a8dcd9a1b 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -86,7 +86,7 @@
 
             li {
                 display: flex;
-                align-items: center;
+                gap: 0.5rem;
                 height: var(--item-height);
                 padding-block: var(--item-padding);
                 @apply px-3 border-1 border-gray-300 rounded-md bg-white shadow-ui-xs text-xs;
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 0cd0e2fecf..9403af2e34 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { Icon } from '@ui';
+import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -77,6 +78,12 @@ const connectorDestinationPageIndices = computed(() => {
 const isConnectorDestination = (pageIndex) => connectorDestinationPageIndices.value.has(pageIndex);
 
 const hasPageNameLeadingIcons = (page, pageIndex) => isConnectorDestination(pageIndex) || hasPageRules(page);
+
+const fieldIconClass = (category) => {
+    const color = categories[category]?.color || 'gray';
+
+    return categoryColorClasses[color]?.icon || 'text-gray-600 dark:text-gray-400';
+};
 </script>
 
 <template>
@@ -128,7 +135,12 @@ const hasPageNameLeadingIcons = (page, pageIndex) => isConnectorDestination(page
                     :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
                 >
                     <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
-                    <span class="line-clamp-2">{{ field.display }}</span>
+                    <Icon
+                        :name="field.icon || 'generic-field'"
+                        :class="['size-4 shrink-0', fieldIconClass(field.category)]"
+                        aria-hidden="true"
+                    />
+                    <span class="min-w-0 line-clamp-2">{{ field.display }}</span>
                 </li>
             </ul>
         </div>

From 70936e129c981a0f620f8312083746a4a8f7380f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 14:17:08 +0100
Subject: [PATCH 41/79] Tree view - Add density toggle

---
 resources/js/pages/forms/Logic.vue     | 35 ++++++++++++++++++++++----
 resources/js/pages/forms/LogicTree.vue |  3 ++-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 1ff59ab3e9..bfbd883849 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -26,6 +26,10 @@ const fields = ref(props.fields);
 const logicViewPreferenceKey = 'forms.logic.view';
 const logicView = ref(preferences.get(logicViewPreferenceKey, 'list'));
 watch(logicView, (view) => preferences.set(logicViewPreferenceKey, view));
+
+const treeDensityPreferenceKey = 'forms.logic.tree.density';
+const treeDensity = ref(preferences.get(treeDensityPreferenceKey, 'compressed'));
+watch(treeDensity, (density) => preferences.set(treeDensityPreferenceKey, density));
 const saving = ref(false);
 const saveBinding = ref(null);
 const errors = ref({});
@@ -116,10 +120,26 @@ onUnmounted(() => {
                     {{ form.title }}
                 </template>
                 <template #actions>
-                    <ToggleGroup v-model="logicView" size="sm">
-                        <ToggleItem value="list" icon="layout-list" :label="__('List')" />
-                        <ToggleItem value="tree" icon="logic-tree" :label="__('Tree')" />
-                    </ToggleGroup>
+                    <div class="flex items-start gap-4">
+                        <ToggleGroup v-if="logicView === 'tree'" v-model="treeDensity" size="xs">
+                            <ToggleItem
+                                value="compressed"
+                                icon="collapse"
+                                :aria-label="__('Compressed view')"
+                                v-tooltip="__('Compressed view')"
+                            />
+                            <ToggleItem
+                                value="expanded"
+                                icon="expand"
+                                :aria-label="__('Uncompressed view')"
+                                v-tooltip="__('Uncompressed view')"
+                            />
+                        </ToggleGroup>
+                        <ToggleGroup v-model="logicView" size="sm">
+                            <ToggleItem value="list" icon="layout-list" :label="__('List')" />
+                            <ToggleItem value="tree" icon="logic-tree" :label="__('Tree')" />
+                        </ToggleGroup>
+                    </div>
                 </template>
             </Header>
 
@@ -140,6 +160,11 @@ onUnmounted(() => {
             </template>
         </div>
 
-        <LogicTree v-if="logicView === 'tree'" :pages="pages" :fields="fields" />
+        <LogicTree
+            v-if="logicView === 'tree'"
+            :pages="pages"
+            :fields="fields"
+            :expanded="treeDensity === 'expanded'"
+        />
     </div>
 </template>
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 9403af2e34..99ee74e455 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -6,6 +6,7 @@ import { computed } from 'vue';
 const props = defineProps({
     pages: { type: Array, required: true },
     fields: { type: Array, required: true },
+    expanded: { type: Boolean, default: false },
 });
 
 const pageAnchor = (pageIndex) => `--page-${pageIndex + 1}`;
@@ -87,7 +88,7 @@ const fieldIconClass = (category) => {
 </script>
 
 <template>
-    <div class="linked-list w-full">
+    <div class="linked-list w-full" :class="{ 'linked-list--expanded': expanded }">
         <div
             v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage"
             :key="page._id"

From 6f2e2f9dbc434d30f6b0a1a0f3964e06d5354800 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 14:21:39 +0100
Subject: [PATCH 42/79] Tree view - remove unnecessary wrapper

---
 resources/js/pages/forms/Logic.vue | 104 ++++++++++++++---------------
 1 file changed, 51 insertions(+), 53 deletions(-)

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index bfbd883849..8fbb6a74e8 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -112,59 +112,57 @@ onUnmounted(() => {
         </Button>
     </Teleport>
 
-    <div class="py-4">
-        <div class="mx-auto max-w-5xl">
-            <Header class="mb-2">
-                <template #title>
-                    <StatusIndicator status="published" />
-                    {{ form.title }}
-                </template>
-                <template #actions>
-                    <div class="flex items-start gap-4">
-                        <ToggleGroup v-if="logicView === 'tree'" v-model="treeDensity" size="xs">
-                            <ToggleItem
-                                value="compressed"
-                                icon="collapse"
-                                :aria-label="__('Compressed view')"
-                                v-tooltip="__('Compressed view')"
-                            />
-                            <ToggleItem
-                                value="expanded"
-                                icon="expand"
-                                :aria-label="__('Uncompressed view')"
-                                v-tooltip="__('Uncompressed view')"
-                            />
-                        </ToggleGroup>
-                        <ToggleGroup v-model="logicView" size="sm">
-                            <ToggleItem value="list" icon="layout-list" :label="__('List')" />
-                            <ToggleItem value="tree" icon="logic-tree" :label="__('Tree')" />
-                        </ToggleGroup>
-                    </div>
-                </template>
-            </Header>
-
-            <template v-if="logicView === 'list'">
-                <PageLogic
-                    v-if="pages.length > 1"
-                    class="mb-6"
-                    v-model:pages="pages"
-                    :suggestable-fields
-                    :fieldtypes
-                />
-
-                <FieldLogic
-                    v-model:fields="fields"
-                    :suggestable-fields
-                    :fieldtypes
-                />
+    <div class="mx-auto max-w-5xl">
+        <Header class="mb-2">
+            <template #title>
+                <StatusIndicator status="published" />
+                {{ form.title }}
             </template>
-        </div>
-
-        <LogicTree
-            v-if="logicView === 'tree'"
-            :pages="pages"
-            :fields="fields"
-            :expanded="treeDensity === 'expanded'"
-        />
+            <template #actions>
+                <div class="flex items-start gap-4">
+                    <ToggleGroup v-if="logicView === 'tree'" v-model="treeDensity" size="xs">
+                        <ToggleItem
+                            value="compressed"
+                            icon="collapse"
+                            :aria-label="__('Compressed view')"
+                            v-tooltip="__('Compressed view')"
+                        />
+                        <ToggleItem
+                            value="expanded"
+                            icon="expand"
+                            :aria-label="__('Uncompressed view')"
+                            v-tooltip="__('Uncompressed view')"
+                        />
+                    </ToggleGroup>
+                    <ToggleGroup v-model="logicView" size="sm">
+                        <ToggleItem value="list" icon="layout-list" :label="__('List')" />
+                        <ToggleItem value="tree" icon="logic-tree" :label="__('Tree')" />
+                    </ToggleGroup>
+                </div>
+            </template>
+        </Header>
+
+        <template v-if="logicView === 'list'">
+            <PageLogic
+                v-if="pages.length > 1"
+                class="mb-6"
+                v-model:pages="pages"
+                :suggestable-fields
+                :fieldtypes
+            />
+
+            <FieldLogic
+                v-model:fields="fields"
+                :suggestable-fields
+                :fieldtypes
+            />
+        </template>
     </div>
+
+    <LogicTree
+        v-if="logicView === 'tree'"
+        :pages="pages"
+        :fields="fields"
+        :expanded="treeDensity === 'expanded'"
+    />
 </template>

From 202f0135f6b05b41d70257532cf284b9f6c02de4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 14:21:58 +0100
Subject: [PATCH 43/79] Tree view - adjust header to match the height of other
 tabs

---
 resources/js/pages/forms/Logic.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 8fbb6a74e8..1828b4a845 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -113,7 +113,7 @@ onUnmounted(() => {
     </Teleport>
 
     <div class="mx-auto max-w-5xl">
-        <Header class="mb-2">
+        <Header class="mb-2 md:py-9">
             <template #title>
                 <StatusIndicator status="published" />
                 {{ form.title }}

From 6d4b3de5f955bd79796d391bb462b403ec9b21a9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 14:34:42 +0100
Subject: [PATCH 44/79] Tree view / density toggle - hook up

---
 resources/css/components/forms/logic-tree.css | 19 +++++++++++++++++--
 resources/js/pages/forms/LogicTree.vue        |  2 +-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 1a8dcd9a1b..119faf2a6f 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -52,10 +52,10 @@
         --column-width: 12.5rem;
 
         --item-padding: 1rem;
-        --item-height: 4.5rem;
+        --item-height: 3.2rem;
 
         /* Bit of a magic number here to pull the line into the gap between the items */
-        --buffer-top-pull: calc(1.45rem + var(--item-padding));
+        --buffer-top-pull: calc(0.8rem + var(--item-padding));
         --buffer-left-pull: 1.5rem;
 
         /* GROUP LOGIC TREE CONNECTORS / LAYOUT
@@ -147,6 +147,21 @@
         }
     }
 
+    /* GROUP LOGIC TREE CONNECTORS / VIEW MODES
+    =================================================== */
+    .linked-list__field-name {
+        @apply line-clamp-1;
+    }
+
+    .linked-list--expanded {
+        /* Bit of a magic number here to pull the line into the gap between the items */
+        --buffer-top-pull: calc(1.45rem + var(--item-padding));
+        --item-height: 4.5rem;
+        .linked-list__field-name {
+            @apply line-clamp-2;
+        }
+    }
+
     /* GROUP LOGIC TREE CONNECTORS / LEAP BRIDGE (FIRST GAP + CORNER)
     =================================================== */
     .linked-list__extra-leap-connector {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 99ee74e455..e21a3f4f5b 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -141,7 +141,7 @@ const fieldIconClass = (category) => {
                         :class="['size-4 shrink-0', fieldIconClass(field.category)]"
                         aria-hidden="true"
                     />
-                    <span class="min-w-0 line-clamp-2">{{ field.display }}</span>
+                    <span class="linked-list__field-name">{{ field.display }}</span>
                 </li>
             </ul>
         </div>

From 921867517107f374a788e8d08a76d576ba861d1e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 14:37:00 +0100
Subject: [PATCH 45/79] Tree view - tweak gap

---
 resources/css/components/forms/logic-tree.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 119faf2a6f..0f0fdf8b34 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -48,7 +48,7 @@
         --join-stroke: 1px;
         --join-line: var(--join-stroke) solid var(--color-blue-400);
         --join-radius: 20px;
-        --gap: 7rem;
+        --gap: 6rem;
         --column-width: 12.5rem;
 
         --item-padding: 1rem;

From 3c693e513bd02653f7f175bb39064de306cb2f6d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 15:19:07 +0100
Subject: [PATCH 46/79] Tree view - add a container to handle overflow for lots
 of columns

---
 resources/css/components/forms/logic-tree.css | 23 ++++-
 resources/js/pages/forms/Logic.vue            | 13 +--
 resources/js/pages/forms/LogicTree.vue        | 94 ++++++++++---------
 3 files changed, 76 insertions(+), 54 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 0f0fdf8b34..41c26341e8 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -43,7 +43,23 @@
         anchor-scope: --start-connection — keeps each source’s connector isolated
 */
 @layer components {
-    /* Inspired by https://codepen.io/cbolson/pen/emzegWP */
+    /* .content-card is #content-card's grid item — min-width: auto lets it grow to fit max-content children */
+    .content-card:has(.linked-list-container) {
+        min-width: 0;
+        overflow-x: clip;
+    }
+
+    .linked-list-container {
+        /* Don't let max-content grid width expand ancestors — scroll inside here only */
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: visible;
+        contain: inline-size;
+        overscroll-behavior-x: contain;
+    }
+
     .linked-list {
         --join-stroke: 1px;
         --join-line: var(--join-stroke) solid var(--color-blue-400);
@@ -63,7 +79,10 @@
         position: relative;
         display: grid;
         align-items: start;
-        grid-template-columns: repeat(auto-fill, var(--column-width));
+        grid-auto-flow: column;
+        grid-auto-columns: var(--column-width);
+        width: max-content;
+        margin-inline: auto;
         gap: var(--gap);
 
         .linked-list__column {
diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 1828b4a845..bde27cdd98 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -159,10 +159,11 @@ onUnmounted(() => {
         </template>
     </div>
 
-    <LogicTree
-        v-if="logicView === 'tree'"
-        :pages="pages"
-        :fields="fields"
-        :expanded="treeDensity === 'expanded'"
-    />
+    <div v-if="logicView === 'tree'" class="min-w-0 w-full">
+        <LogicTree
+            :pages="pages"
+            :fields="fields"
+            :expanded="treeDensity === 'expanded'"
+        />
+    </div>
 </template>
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index e21a3f4f5b..adf0126d0b 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -88,62 +88,64 @@ const fieldIconClass = (category) => {
 </script>
 
 <template>
-    <div class="linked-list w-full" :class="{ 'linked-list--expanded': expanded }">
-        <div
-            v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage"
-            :key="page._id"
-            class="linked-list__column"
-        >
+    <div class="linked-list-container">
+        <div class="linked-list" :class="{ 'linked-list--expanded': expanded }">
             <div
-                class="linked-list__page-name"
-                :style="{ 'anchor-name': pageAnchor(pageIndex) }"
+                v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage"
+                :key="page._id"
+                class="linked-list__column"
             >
                 <div
-                    class="flex w-full min-w-0 flex-nowrap items-center justify-center gap-1.5"
-                    :class="{ '-ms-1.5': hasPageNameLeadingIcons(page, pageIndex) }"
+                    class="linked-list__page-name"
+                    :style="{ 'anchor-name': pageAnchor(pageIndex) }"
                 >
-                    <Icon
-                        v-if="isConnectorDestination(pageIndex)"
-                        name="chevron-right"
-                        class="size-3! shrink-0 -ms-2.5 relative -top-0.25 text-blue-400"
-                        aria-hidden="true"
-                    />
-                    <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">
+                    <div
+                        class="flex w-full min-w-0 flex-nowrap items-center justify-center gap-1.5"
+                        :class="{ '-ms-1.5': hasPageNameLeadingIcons(page, pageIndex) }"
+                    >
                         <Icon
-                            name="logic-tree"
-                            class="size-3.5! text-gray-400 dark:text-gray-500"
+                            v-if="isConnectorDestination(pageIndex)"
+                            name="chevron-right"
+                            class="size-3! shrink-0 -ms-2.5 relative -top-0.25 text-blue-400"
                             aria-hidden="true"
                         />
-                    </span>
-                    <div
-                        class="mx-auto flex w-full shrink-0 justify-center items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-xs font-medium text-gray-850 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
-                        :class="{ 'w-[85%]!': hasPageNameLeadingIcons(page, pageIndex) }"
-                    >
-                        <Icon name="page" class="size-4 shrink-0 -ms-1.5 text-gray-500 dark:text-gray-400" aria-hidden="true" />
-                        <span class="line-clamp-1">{{ pageTitle(page, pageIndex) }}</span>
+                        <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">
+                            <Icon
+                                name="logic-tree"
+                                class="size-3.5! text-gray-400 dark:text-gray-500"
+                                aria-hidden="true"
+                            />
+                        </span>
+                        <div
+                            class="mx-auto flex w-full shrink-0 justify-center items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-xs font-medium text-gray-850 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
+                            :class="{ 'w-[85%]!': hasPageNameLeadingIcons(page, pageIndex) }"
+                        >
+                            <Icon name="page" class="size-4 shrink-0 -ms-1.5 text-gray-500 dark:text-gray-400" aria-hidden="true" />
+                            <span class="line-clamp-1">{{ pageTitle(page, pageIndex) }}</span>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <ul>
-                <li
-                    v-for="field in pageFields"
-                    :key="field._id"
-                    :class="{
-                        'linked-list__connector': fieldConnection(field),
-                        'linked-list__page-leap': fieldConnection(field)?.leap,
-                    }"
-                    :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
-                >
-                    <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
-                    <Icon
-                        :name="field.icon || 'generic-field'"
-                        :class="['size-4 shrink-0', fieldIconClass(field.category)]"
-                        aria-hidden="true"
-                    />
-                    <span class="linked-list__field-name">{{ field.display }}</span>
-                </li>
-            </ul>
+                <ul>
+                    <li
+                        v-for="field in pageFields"
+                        :key="field._id"
+                        :class="{
+                            'linked-list__connector': fieldConnection(field),
+                            'linked-list__page-leap': fieldConnection(field)?.leap,
+                        }"
+                        :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
+                    >
+                        <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
+                        <Icon
+                            :name="field.icon || 'generic-field'"
+                            :class="['size-4 shrink-0', fieldIconClass(field.category)]"
+                            aria-hidden="true"
+                        />
+                        <span class="linked-list__field-name">{{ field.display }}</span>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
 </template>

From 9566b9872f81c543ad8c6a2cdebd69bc3255721f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 18:27:06 +0100
Subject: [PATCH 47/79] Tree view - add a utility class for breaking out of the
 .content container

---
 resources/css/components/forms/logic-tree.css |  6 ----
 resources/css/core/utilities.css              | 35 ++++++++++++++++---
 resources/js/pages/forms/Logic.vue            |  4 +--
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 41c26341e8..dcc3d77f61 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -43,12 +43,6 @@
         anchor-scope: --start-connection — keeps each source’s connector isolated
 */
 @layer components {
-    /* .content-card is #content-card's grid item — min-width: auto lets it grow to fit max-content children */
-    .content-card:has(.linked-list-container) {
-        min-width: 0;
-        overflow-x: clip;
-    }
-
     .linked-list-container {
         /* Don't let max-content grid width expand ancestors — scroll inside here only */
         width: 100%;
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 12381bb4fb..0433722a7d 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -14,10 +14,6 @@
     display: none;
 }
 
-@utility max-h-screen-px {
-    max-height: calc(100vh - 1px) !important;
-}
-
 .z-max {
     z-index: var(--z-index-max);
 }
@@ -76,6 +72,37 @@
     }
 }
 
+/*
+    Break out of .content-card horizontal padding and [data-max-width-wrapper] max-w-page
+    so content can span the card while staying aligned with padded siblings on scroll.
+
+    HTML Example:
+    <div class="content-card">
+        (direct descendants only)
+        <div class="st-full-bleed-content">
+            <div>…wide / scrollable content…</div>
+        </div>
+    </div>
+*/
+@utility st-full-bleed-content {
+    @apply -mx-2 sm:-mx-6 md:-mx-12 min-w-0;
+
+    & > * {
+        @apply px-2 sm:px-6 md:px-12 min-w-0;
+    }
+}
+.content-card:has(.st-full-bleed-content) {
+    min-width: 0;
+    overflow-x: clip;
+}
+[data-max-width-wrapper]:has(.st-full-bleed-content) {
+    max-width: none !important;
+}
+
+@utility max-h-screen-px {
+    max-height: calc(100vh - 1px) !important;
+}
+
 /* UTILITIES / TEXT
 =================================================== */
 /* Prefix things with `st-text-` (st for Statamic) because `text-` is a Tailwind prefix */
diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index bde27cdd98..d1c51eb7b9 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -112,7 +112,7 @@ onUnmounted(() => {
         </Button>
     </Teleport>
 
-    <div class="mx-auto max-w-5xl">
+    <div class="mx-auto max-w-5xl min-w-0">
         <Header class="mb-2 md:py-9">
             <template #title>
                 <StatusIndicator status="published" />
@@ -159,7 +159,7 @@ onUnmounted(() => {
         </template>
     </div>
 
-    <div v-if="logicView === 'tree'" class="min-w-0 w-full">
+    <div v-if="logicView === 'tree'" class="st-full-bleed-content">
         <LogicTree
             :pages="pages"
             :fields="fields"

From 69fd92909e5caf419a774eecddcbc55d5e1e28bc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 18:35:39 +0100
Subject: [PATCH 48/79] Tree view - fix utility class scrollbar position

---
 resources/css/core/utilities.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 0433722a7d..c80586f45d 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -88,12 +88,13 @@
     @apply -mx-2 sm:-mx-6 md:-mx-12 min-w-0;
 
     & > * {
-        @apply px-2 sm:px-6 md:px-12 min-w-0;
+        @apply px-2 sm:px-6 md:px-12 min-w-0 pb-6;
     }
 }
 .content-card:has(.st-full-bleed-content) {
     min-width: 0;
     overflow-x: clip;
+    padding-bottom: 0;
 }
 [data-max-width-wrapper]:has(.st-full-bleed-content) {
     max-width: none !important;

From ee34a89a38c4a86a02f920b532c15861791ad5fd Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 19:00:17 +0100
Subject: [PATCH 49/79] Tree view - make view options consistent with Edit tab

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

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index d1c51eb7b9..bdb7fc73cf 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -121,18 +121,18 @@ onUnmounted(() => {
             <template #actions>
                 <div class="flex items-start gap-4">
                     <ToggleGroup v-if="logicView === 'tree'" v-model="treeDensity" size="xs">
-                        <ToggleItem
-                            value="compressed"
-                            icon="collapse"
-                            :aria-label="__('Compressed view')"
-                            v-tooltip="__('Compressed view')"
-                        />
                         <ToggleItem
                             value="expanded"
                             icon="expand"
                             :aria-label="__('Uncompressed view')"
                             v-tooltip="__('Uncompressed view')"
                         />
+                        <ToggleItem
+                            value="compressed"
+                            icon="collapse"
+                            :aria-label="__('Compressed view')"
+                            v-tooltip="__('Compressed view')"
+                        />
                     </ToggleGroup>
                     <ToggleGroup v-model="logicView" size="sm">
                         <ToggleItem value="list" icon="layout-list" :label="__('List')" />

From c08e3aa382218247c2e07fae0f3b79aa931092b7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 20:36:20 +0100
Subject: [PATCH 50/79] ! Tree view - icons for linked fields

---
 resources/js/pages/forms/LogicTree.vue        | 24 ++++-
 src/Forms/Fields/FormFields.php               |  5 ++
 .../CP/Forms/FormLogicController.php          | 89 +++++++++++++------
 3 files changed, 92 insertions(+), 26 deletions(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index adf0126d0b..b52b38f1a1 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -142,7 +142,29 @@ const fieldIconClass = (category) => {
                             :class="['size-4 shrink-0', fieldIconClass(field.category)]"
                             aria-hidden="true"
                         />
-                        <span class="linked-list__field-name">{{ field.display }}</span>
+                        <span
+                            v-if="field.type === 'reference'"
+                            v-tooltip="__('Linked Field')"
+                            class="inline-flex shrink-0"
+                        >
+                            <Icon
+                                name="link"
+                                class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                aria-hidden="true"
+                            />
+                        </span>
+                        <span
+                            v-else-if="field.type === 'import' && field.fieldset_link"
+                            v-tooltip="__('Linked Fieldset')"
+                            class="inline-flex shrink-0"
+                        >
+                            <Icon
+                                name="link"
+                                class="size-4 shrink-0 rotate-90 text-indigo-500 dark:text-indigo-400"
+                                aria-hidden="true"
+                            />
+                        </span>
+                        <span class="linked-list__field-name min-w-0 flex-1">{{ field.display }}</span>
                     </li>
                 </ul>
             </div>
diff --git a/src/Forms/Fields/FormFields.php b/src/Forms/Fields/FormFields.php
index 91a8f7f058..0b18a64c48 100644
--- a/src/Forms/Fields/FormFields.php
+++ b/src/Forms/Fields/FormFields.php
@@ -74,6 +74,11 @@ public function field(string $handle): ?FormField
         return $this->fields()->get($handle);
     }
 
+    public function importedFields(array $config): array
+    {
+        return $this->getImportedFields($config);
+    }
+
     public function toBlueprint(): Blueprint
     {
         $tabs = $this->pages()
diff --git a/src/Http/Controllers/CP/Forms/FormLogicController.php b/src/Http/Controllers/CP/Forms/FormLogicController.php
index e8c9e225d8..404875599e 100644
--- a/src/Http/Controllers/CP/Forms/FormLogicController.php
+++ b/src/Http/Controllers/CP/Forms/FormLogicController.php
@@ -67,36 +67,35 @@ private function fieldsToVue($formFields): array
         foreach ($formFields->pages() as $pageIndex => $page) {
             foreach ($page['sections'] ?? [] as $section) {
                 foreach ($section['fields'] ?? [] as $config) {
-                    if (! isset($config['handle'])) {
+                    if (isset($config['import'])) {
+                        $isFirst = true;
+
+                        foreach ($formFields->importedFields($config) as $formField) {
+                            $fields[] = $this->formFieldToVue(
+                                $formField,
+                                $pageIndex,
+                                'import',
+                                fieldsetLink: $isFirst,
+                                importFieldset: $config['import'],
+                            );
+                            $isFirst = false;
+                        }
+
                         continue;
                     }
 
-                    $handle = $config['handle'];
-                    $field = $config['field'] ?? [];
-
-                    $formField = $formFields->field($handle);
-                    $fieldtype = $formField->fieldtype();
-
-                    $result = [
-                        '_id' => $handle,
-                        'handle' => $handle,
-                        'page_index' => $pageIndex,
-                        'display' => $field['display'] ?? $handle,
-                        'icon' => $fieldtype?->icon() ?? 'generic-field',
-                        'category' => $fieldtype->categories()[0] ?? 'other',
-                        'fieldtype' => $field['type'] ?? 'short_answer',
-                        'if' => $field['if'] ?? null,
-                        'unless' => $field['unless'] ?? null,
-                        'if_any' => $field['if_any'] ?? null,
-                        'unless_any' => $field['unless_any'] ?? null,
-                        'always_save' => $field['always_save'] ?? false,
-                    ];
-
-                    if (isset($field['options'])) {
-                        $result['options'] = $field['options'];
+                    if (! isset($config['handle'])) {
+                        continue;
                     }
 
-                    $fields[] = $result;
+                    $type = is_string($config['field'] ?? null) ? 'reference' : 'inline';
+
+                    $fields[] = $this->formFieldToVue(
+                        $formFields->field($config['handle']),
+                        $pageIndex,
+                        $type,
+                        handle: $config['handle'],
+                    );
                 }
             }
         }
@@ -104,6 +103,46 @@ private function fieldsToVue($formFields): array
         return $fields;
     }
 
+    private function formFieldToVue(
+        ?FormField $formField,
+        int $pageIndex,
+        string $type,
+        bool $fieldsetLink = false,
+        ?string $importFieldset = null,
+        ?string $handle = null,
+    ): array {
+        $handle = $handle ?? $formField?->handle();
+        $fieldConfig = $formField?->config() ?? [];
+        $fieldtype = $formField?->fieldtype();
+
+        $result = [
+            '_id' => $handle,
+            'handle' => $handle,
+            'page_index' => $pageIndex,
+            'display' => $fieldConfig['display'] ?? $handle,
+            'icon' => $fieldtype?->icon() ?? 'generic-field',
+            'category' => $fieldtype->categories()[0] ?? 'other',
+            'fieldtype' => $fieldConfig['type'] ?? 'short_answer',
+            'type' => $type,
+            'if' => $fieldConfig['if'] ?? null,
+            'unless' => $fieldConfig['unless'] ?? null,
+            'if_any' => $fieldConfig['if_any'] ?? null,
+            'unless_any' => $fieldConfig['unless_any'] ?? null,
+            'always_save' => $fieldConfig['always_save'] ?? false,
+        ];
+
+        if ($type === 'import') {
+            $result['fieldset_link'] = $fieldsetLink;
+            $result['import'] = $importFieldset;
+        }
+
+        if (isset($fieldConfig['options'])) {
+            $result['options'] = $fieldConfig['options'];
+        }
+
+        return $result;
+    }
+
     private function mergeLogicIntoForm(Request $request, Form $form): void
     {
         $pageRules = collect($request->input('pages', []))

From 0187d02375cc4c3683247d9afa331f6458b9d6e7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 21:25:57 +0100
Subject: [PATCH 51/79] Tree view - style fieldsets

---
 resources/css/components/forms/logic-tree.css |  51 ++++++-
 resources/js/pages/forms/LogicTree.vue        | 137 +++++++++++++-----
 .../CP/Forms/FormLogicController.php          |  14 +-
 3 files changed, 155 insertions(+), 47 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index dcc3d77f61..0ad6488ae5 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -97,7 +97,7 @@
             gap: 0.5rem;
             @apply p-1.5 px-1.5 bg-gray-100 rounded-lg;
 
-            li {
+            > li {
                 display: flex;
                 gap: 0.5rem;
                 height: var(--item-height);
@@ -105,9 +105,53 @@
                 @apply px-3 border-1 border-gray-300 rounded-md bg-white shadow-ui-xs text-xs;
             }
 
+            > li.linked-list__fieldset-wrap {
+                display: block;
+                height: auto;
+                padding: 0;
+                border: 0;
+                background: transparent;
+                box-shadow: none;
+                gap: 0;
+            }
+
+            /* GROUP LOGIC TREE / FIELDSETS (stacked cards)
+            =================================================== */
+            .linked-list__fieldset-group {
+                display: flex;
+                flex-direction: column;
+                @apply rounded-lg shadow-ui-xs;
+            }
+
+            .linked-list__field-row {
+                position: relative;
+                display: flex;
+                gap: 0.5rem;
+                height: var(--item-height);
+                padding-block: var(--item-padding);
+                @apply border-x border-b border-gray-300 bg-white px-3 text-xs;
+
+                &:first-child {
+                    @apply rounded-t-md border-t;
+                }
+
+                &:last-child {
+                    @apply rounded-b-md;
+                }
+
+                &:only-child {
+                    @apply rounded-md;
+                }
+
+                &:not(:first-child) {
+                    @apply border-t-0;
+                }
+            }
+
             /* GROUP LOGIC TREE CONNECTORS / SOURCE
             =================================================== */
-            .linked-list__connector {
+            > li.linked-list__connector,
+            .linked-list__field-row.linked-list__connector {
                 anchor-name: --start-connection;
                 anchor-scope: --start-connection; /* one anchor per source row */
 
@@ -147,7 +191,8 @@
             /* GROUP LOGIC TREE CONNECTORS / PAGE LEAP (SOURCE → NON-ADJACENT PAGE)
             =================================================== */
             /* Overrides the direct-hop ::before to terminate at the buffer rail instead of the source centre, leaving room for the bridge element. */
-            .linked-list__page-leap {
+            > li.linked-list__page-leap,
+            .linked-list__field-row.linked-list__page-leap {
                 &::before,
                 &::after {
                     border-style: dashed;
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index b52b38f1a1..6a659b9af0 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -11,11 +11,39 @@ const props = defineProps({
 
 const pageAnchor = (pageIndex) => `--page-${pageIndex + 1}`;
 
+const groupPageFields = (pageFields) => {
+    const groups = [];
+    let fieldsetGroup = null;
+
+    pageFields.forEach((field) => {
+        if (field.import) {
+            if (fieldsetGroup?.import === field.import) {
+                fieldsetGroup.fields.push(field);
+            } else {
+                fieldsetGroup = {
+                    type: 'fieldset',
+                    import: field.import,
+                    title: field.import_title,
+                    fields: [field],
+                };
+                groups.push(fieldsetGroup);
+            }
+
+            return;
+        }
+
+        fieldsetGroup = null;
+        groups.push({ type: 'field', field });
+    });
+
+    return groups;
+};
+
 const fieldsByPage = computed(() => {
     return props.pages.map((page, pageIndex) => ({
         page,
         pageIndex,
-        fields: props.fields.filter((field) => field.page_index === pageIndex),
+        groups: groupPageFields(props.fields.filter((field) => field.page_index === pageIndex)),
     }));
 });
 
@@ -91,7 +119,7 @@ const fieldIconClass = (category) => {
     <div class="linked-list-container">
         <div class="linked-list" :class="{ 'linked-list--expanded': expanded }">
             <div
-                v-for="{ page, pageIndex, fields: pageFields } in fieldsByPage"
+                v-for="{ page, pageIndex, groups } in fieldsByPage"
                 :key="page._id"
                 class="linked-list__column"
             >
@@ -127,45 +155,80 @@ const fieldIconClass = (category) => {
                 </div>
 
                 <ul>
-                    <li
-                        v-for="field in pageFields"
-                        :key="field._id"
-                        :class="{
-                            'linked-list__connector': fieldConnection(field),
-                            'linked-list__page-leap': fieldConnection(field)?.leap,
-                        }"
-                        :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
-                    >
-                        <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
-                        <Icon
-                            :name="field.icon || 'generic-field'"
-                            :class="['size-4 shrink-0', fieldIconClass(field.category)]"
-                            aria-hidden="true"
-                        />
-                        <span
-                            v-if="field.type === 'reference'"
-                            v-tooltip="__('Linked Field')"
-                            class="inline-flex shrink-0"
+                    <template v-for="group in groups" :key="group.type === 'field' ? group.field._id : group.import">
+                        <li
+                            v-if="group.type === 'field'"
+                            :class="{
+                                'linked-list__connector': fieldConnection(group.field),
+                                'linked-list__page-leap': fieldConnection(group.field)?.leap,
+                            }"
+                            :style="fieldConnection(group.field) ? { '--end-connection': fieldConnection(group.field).endConnection } : null"
                         >
+                            <div v-if="fieldConnection(group.field)?.leap" class="linked-list__extra-leap-connector" />
                             <Icon
-                                name="link"
-                                class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                :name="group.field.icon || 'generic-field'"
+                                :class="['size-4 shrink-0', fieldIconClass(group.field.category)]"
                                 aria-hidden="true"
                             />
-                        </span>
-                        <span
-                            v-else-if="field.type === 'import' && field.fieldset_link"
-                            v-tooltip="__('Linked Fieldset')"
-                            class="inline-flex shrink-0"
-                        >
-                            <Icon
-                                name="link"
-                                class="size-4 shrink-0 rotate-90 text-indigo-500 dark:text-indigo-400"
-                                aria-hidden="true"
-                            />
-                        </span>
-                        <span class="linked-list__field-name min-w-0 flex-1">{{ field.display }}</span>
-                    </li>
+                            <span
+                                v-if="group.field.type === 'reference'"
+                                v-tooltip="__('Linked Field')"
+                                class="inline-flex size-4 shrink-0"
+                            >
+                                <Icon
+                                    name="link"
+                                    class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                    aria-hidden="true"
+                                />
+                            </span>
+                            <span class="linked-list__field-name min-w-0 flex-1">{{ group.field.display }}</span>
+                        </li>
+                        <li v-else class="linked-list__fieldset-wrap">
+                            <div class="linked-list__fieldset-group">
+                                <div
+                                    v-for="(field, fieldIndex) in group.fields"
+                                    :key="field._id"
+                                    class="linked-list__field-row"
+                                    :class="{
+                                        'linked-list__connector': fieldConnection(field),
+                                        'linked-list__page-leap': fieldConnection(field)?.leap,
+                                    }"
+                                    :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
+                                >
+                                    <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
+                                    <span
+                                        v-if="fieldIndex === 0"
+                                        v-tooltip="group.title ? __('Linked Fieldset: :title', { title: group.title }) : __('Linked Fieldset')"
+                                        class="inline-flex size-4 shrink-0"
+                                    >
+                                        <Icon
+                                            name="link"
+                                            class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                            aria-hidden="true"
+                                        />
+                                    </span>
+                                    <span v-else class="inline-flex size-4 shrink-0" aria-hidden="true" />
+                                    <Icon
+                                        :name="field.icon || 'generic-field'"
+                                        :class="['size-4 shrink-0', fieldIconClass(field.category)]"
+                                        aria-hidden="true"
+                                    />
+                                    <span
+                                        v-if="field.type === 'reference'"
+                                        v-tooltip="__('Linked Field')"
+                                        class="inline-flex size-4 shrink-0"
+                                    >
+                                        <Icon
+                                            name="link"
+                                            class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                            aria-hidden="true"
+                                        />
+                                    </span>
+                                    <span class="linked-list__field-name min-w-0 flex-1">{{ field.display }}</span>
+                                </div>
+                            </div>
+                        </li>
+                    </template>
                 </ul>
             </div>
         </div>
diff --git a/src/Http/Controllers/CP/Forms/FormLogicController.php b/src/Http/Controllers/CP/Forms/FormLogicController.php
index 404875599e..72eb5dce96 100644
--- a/src/Http/Controllers/CP/Forms/FormLogicController.php
+++ b/src/Http/Controllers/CP/Forms/FormLogicController.php
@@ -9,6 +9,7 @@
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Forms\Fieldtypes\Fallback;
+use Statamic\Facades\Fieldset as FieldsetRepository;
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Support\Arr;
 use Statamic\Support\Str;
@@ -68,17 +69,16 @@ private function fieldsToVue($formFields): array
             foreach ($page['sections'] ?? [] as $section) {
                 foreach ($section['fields'] ?? [] as $config) {
                     if (isset($config['import'])) {
-                        $isFirst = true;
+                        $fieldset = FieldsetRepository::find($config['import']);
 
                         foreach ($formFields->importedFields($config) as $formField) {
                             $fields[] = $this->formFieldToVue(
                                 $formField,
                                 $pageIndex,
-                                'import',
-                                fieldsetLink: $isFirst,
+                                'inline',
                                 importFieldset: $config['import'],
+                                importTitle: $fieldset?->title(),
                             );
-                            $isFirst = false;
                         }
 
                         continue;
@@ -107,8 +107,8 @@ private function formFieldToVue(
         ?FormField $formField,
         int $pageIndex,
         string $type,
-        bool $fieldsetLink = false,
         ?string $importFieldset = null,
+        ?string $importTitle = null,
         ?string $handle = null,
     ): array {
         $handle = $handle ?? $formField?->handle();
@@ -131,9 +131,9 @@ private function formFieldToVue(
             'always_save' => $fieldConfig['always_save'] ?? false,
         ];
 
-        if ($type === 'import') {
-            $result['fieldset_link'] = $fieldsetLink;
+        if ($importFieldset) {
             $result['import'] = $importFieldset;
+            $result['import_title'] = $importTitle;
         }
 
         if (isset($fieldConfig['options'])) {

From 676017cb1b78851fbbb7d066b26b06296fbe6665 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 21:29:22 +0100
Subject: [PATCH 52/79] Tree view / Fieldsets - pull in the blueprint icons

---
 src/Forms/Fieldtypes/Fallback.php       | 26 +++++++++++++++++++++++++
 tests/Forms/Fieldtypes/FallbackTest.php | 17 ++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/src/Forms/Fieldtypes/Fallback.php b/src/Forms/Fieldtypes/Fallback.php
index 0870b37e9b..cf29699fb8 100644
--- a/src/Forms/Fieldtypes/Fallback.php
+++ b/src/Forms/Fieldtypes/Fallback.php
@@ -38,6 +38,32 @@ public function title(): string
         return $this->wrappedFieldtype?->title() ?? parent::title();
     }
 
+    public function icon(): string
+    {
+        if (! $this->wrappedFieldtype) {
+            return parent::icon();
+        }
+
+        if ($equivalent = $this->equivalentFormFieldtype()) {
+            return $equivalent->icon();
+        }
+
+        return $this->wrappedFieldtype->icon();
+    }
+
+    public function categories(): array
+    {
+        if (! $this->wrappedFieldtype) {
+            return parent::categories();
+        }
+
+        if ($equivalent = $this->equivalentFormFieldtype()) {
+            return $equivalent->categories();
+        }
+
+        return $this->wrappedFieldtype->categories();
+    }
+
     public function toArray(): array
     {
         if (! $this->wrappedFieldtype) {
diff --git a/tests/Forms/Fieldtypes/FallbackTest.php b/tests/Forms/Fieldtypes/FallbackTest.php
index 6040cfedfe..e88ce84fd1 100644
--- a/tests/Forms/Fieldtypes/FallbackTest.php
+++ b/tests/Forms/Fieldtypes/FallbackTest.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Support\Facades\View;
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fieldtypes\Code;
 use Statamic\Fieldtypes\Text;
 use Statamic\Fieldtypes\Textarea;
 use Statamic\Forms\Fieldtypes\Fallback;
@@ -30,4 +31,20 @@ public function it_falls_back_to_the_equivalent_form_fieldtype_view()
 
         $this->assertEquals('statamic::forms.antlers.fields.long_answer', $fallback->view());
     }
+
+    #[Test]
+    public function it_uses_the_blueprint_fieldtype_icon_when_there_is_no_form_fieldtype()
+    {
+        $fallback = (new Fallback)->wrapping(new Code);
+
+        $this->assertEquals('fieldtype-code', $fallback->icon());
+    }
+
+    #[Test]
+    public function it_uses_the_equivalent_form_fieldtype_icon_when_one_exists()
+    {
+        $fallback = (new Fallback)->wrapping(new Textarea);
+
+        $this->assertEquals('text-long', $fallback->icon());
+    }
 }

From 76fc3042c2eb27d908471e3af2553b763b87edb3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 21:34:42 +0100
Subject: [PATCH 53/79] Tree view / Fieldsets & fields - redesign

---
 resources/js/pages/forms/LogicTree.vue        | 37 +++++++++++--------
 .../CP/Forms/FormLogicController.php          |  1 -
 tests/Forms/Fieldtypes/FallbackTest.php       |  1 +
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 6a659b9af0..ad102848aa 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -108,10 +108,16 @@ const isConnectorDestination = (pageIndex) => connectorDestinationPageIndices.va
 
 const hasPageNameLeadingIcons = (page, pageIndex) => isConnectorDestination(pageIndex) || hasPageRules(page);
 
-const fieldIconClass = (category) => {
-    const color = categories[category]?.color || 'gray';
+const mutedIconClass = 'text-gray-600 dark:text-gray-400';
 
-    return categoryColorClasses[color]?.icon || 'text-gray-600 dark:text-gray-400';
+const fieldIconClass = (field) => {
+    if (field.type === 'reference' || field.import) {
+        return mutedIconClass;
+    }
+
+    const color = categories[field.category]?.color || 'gray';
+
+    return categoryColorClasses[color]?.icon || mutedIconClass;
 };
 </script>
 
@@ -167,9 +173,10 @@ const fieldIconClass = (category) => {
                             <div v-if="fieldConnection(group.field)?.leap" class="linked-list__extra-leap-connector" />
                             <Icon
                                 :name="group.field.icon || 'generic-field'"
-                                :class="['size-4 shrink-0', fieldIconClass(group.field.category)]"
+                                :class="['size-4 shrink-0', fieldIconClass(group.field)]"
                                 aria-hidden="true"
                             />
+                            <span class="linked-list__field-name min-w-0 flex-1">{{ group.field.display }}</span>
                             <span
                                 v-if="group.field.type === 'reference'"
                                 v-tooltip="__('Linked Field')"
@@ -181,7 +188,6 @@ const fieldIconClass = (category) => {
                                     aria-hidden="true"
                                 />
                             </span>
-                            <span class="linked-list__field-name min-w-0 flex-1">{{ group.field.display }}</span>
                         </li>
                         <li v-else class="linked-list__fieldset-wrap">
                             <div class="linked-list__fieldset-group">
@@ -196,9 +202,15 @@ const fieldIconClass = (category) => {
                                     :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
                                 >
                                     <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
+                                    <Icon
+                                        :name="field.icon || 'generic-field'"
+                                        :class="['size-4 shrink-0', fieldIconClass(field)]"
+                                        aria-hidden="true"
+                                    />
+                                    <span class="linked-list__field-name min-w-0 flex-1">{{ field.display }}</span>
                                     <span
-                                        v-if="fieldIndex === 0"
-                                        v-tooltip="group.title ? __('Linked Fieldset: :title', { title: group.title }) : __('Linked Fieldset')"
+                                        v-if="field.type === 'reference'"
+                                        v-tooltip="__('Linked Field')"
                                         class="inline-flex size-4 shrink-0"
                                     >
                                         <Icon
@@ -207,15 +219,9 @@ const fieldIconClass = (category) => {
                                             aria-hidden="true"
                                         />
                                     </span>
-                                    <span v-else class="inline-flex size-4 shrink-0" aria-hidden="true" />
-                                    <Icon
-                                        :name="field.icon || 'generic-field'"
-                                        :class="['size-4 shrink-0', fieldIconClass(field.category)]"
-                                        aria-hidden="true"
-                                    />
                                     <span
-                                        v-if="field.type === 'reference'"
-                                        v-tooltip="__('Linked Field')"
+                                        v-if="fieldIndex === 0"
+                                        v-tooltip="group.title ? __('Linked Fieldset: :title', { title: group.title }) : __('Linked Fieldset')"
                                         class="inline-flex size-4 shrink-0"
                                     >
                                         <Icon
@@ -224,7 +230,6 @@ const fieldIconClass = (category) => {
                                             aria-hidden="true"
                                         />
                                     </span>
-                                    <span class="linked-list__field-name min-w-0 flex-1">{{ field.display }}</span>
                                 </div>
                             </div>
                         </li>
diff --git a/src/Http/Controllers/CP/Forms/FormLogicController.php b/src/Http/Controllers/CP/Forms/FormLogicController.php
index 72eb5dce96..39acb1edbc 100644
--- a/src/Http/Controllers/CP/Forms/FormLogicController.php
+++ b/src/Http/Controllers/CP/Forms/FormLogicController.php
@@ -8,7 +8,6 @@
 use Statamic\Contracts\Forms\Form;
 use Statamic\Forms\Fields\FormField;
 use Statamic\Forms\Fields\FormFieldtype;
-use Statamic\Forms\Fieldtypes\Fallback;
 use Statamic\Facades\Fieldset as FieldsetRepository;
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Support\Arr;
diff --git a/tests/Forms/Fieldtypes/FallbackTest.php b/tests/Forms/Fieldtypes/FallbackTest.php
index e88ce84fd1..c9bb70798e 100644
--- a/tests/Forms/Fieldtypes/FallbackTest.php
+++ b/tests/Forms/Fieldtypes/FallbackTest.php
@@ -47,4 +47,5 @@ public function it_uses_the_equivalent_form_fieldtype_icon_when_one_exists()
 
         $this->assertEquals('text-long', $fallback->icon());
     }
+
 }

From f006e7b84d9b4c11ad194e550576b7f3cc432373 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 21:45:08 +0100
Subject: [PATCH 54/79] Tree view - fix layout for items with
 .linked-list__extra-leap-connector

---
 resources/css/components/forms/logic-tree.css | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 0ad6488ae5..3db744ccb6 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -98,7 +98,19 @@
             @apply p-1.5 px-1.5 bg-gray-100 rounded-lg;
 
             > li {
-                display: flex;
+                /* Use a grid instead of flexbox so we can force things into column 1 and 2.
+                   If we use flexbox then invisible items such as .linked-list__extra-leap-connector will take up an flex child space, changing the layout of items with a leap connector. */
+                display: grid;
+                grid-template-columns: 1rem 1fr;
+                > * {
+                    grid-row: 1;
+                }
+                & > svg {
+                    grid-column: 1;
+                }
+                .linked-list__field-name {
+                    grid-column: 2;
+                }
                 gap: 0.5rem;
                 height: var(--item-height);
                 padding-block: var(--item-padding);

From cd51714f8ac35a64c98b2a4b2c8c168223f521ec Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 21:50:29 +0100
Subject: [PATCH 55/79] Tree view - remove some overqualified connectors

---
 resources/css/components/forms/logic-tree.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 3db744ccb6..1c1e0519f3 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -162,8 +162,7 @@
 
             /* GROUP LOGIC TREE CONNECTORS / SOURCE
             =================================================== */
-            > li.linked-list__connector,
-            .linked-list__field-row.linked-list__connector {
+            .linked-list__connector {
                 anchor-name: --start-connection;
                 anchor-scope: --start-connection; /* one anchor per source row */
 
@@ -203,8 +202,7 @@
             /* GROUP LOGIC TREE CONNECTORS / PAGE LEAP (SOURCE → NON-ADJACENT PAGE)
             =================================================== */
             /* Overrides the direct-hop ::before to terminate at the buffer rail instead of the source centre, leaving room for the bridge element. */
-            > li.linked-list__page-leap,
-            .linked-list__field-row.linked-list__page-leap {
+            .linked-list__page-leap {
                 &::before,
                 &::after {
                     border-style: dashed;
@@ -220,7 +218,7 @@
     /* GROUP LOGIC TREE CONNECTORS / VIEW MODES
     =================================================== */
     .linked-list__field-name {
-        @apply line-clamp-1;
+        @apply line-clamp-1 select-none;
     }
 
     .linked-list--expanded {

From 6ff7137c0c3cdf046d86bb3ef152d80546a0d89d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 22:03:43 +0100
Subject: [PATCH 56/79] Optically align switcher text

---
 resources/js/components/ui/Toggle/Item.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Toggle/Item.vue b/resources/js/components/ui/Toggle/Item.vue
index d7ed43ed27..495a5e51b0 100644
--- a/resources/js/components/ui/Toggle/Item.vue
+++ b/resources/js/components/ui/Toggle/Item.vue
@@ -106,10 +106,10 @@ const restAttrs = computed(() => {
             class="text-gray-400"
             :aria-hidden="!iconOnly"
         />
-        <span v-if="hasDefaultSlot">
+        <span v-if="hasDefaultSlot" class="-mt-[1px]">
             <slot />
         </span>
-        <span v-else-if="label">
+        <span v-else-if="label" class="-mt-[1px]">
             {{ label }}
         </span>
     </ToggleGroupItem>

From 0c1cbbd2c98234b1b5b27d6c5b1e2514d860a46d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Jun 2026 22:07:48 +0100
Subject: [PATCH 57/79] Tree view - dark mode pass

---
 resources/css/components/forms/logic-tree.css | 12 ++++++++----
 resources/js/pages/forms/LogicTree.vue        |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 1c1e0519f3..dedd74fe02 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -58,6 +58,10 @@
         --join-stroke: 1px;
         --join-line: var(--join-stroke) solid var(--color-blue-400);
         --join-radius: 20px;
+
+        :where(.dark) & {
+            --join-line: var(--join-stroke) solid var(--color-blue-500);
+        }
         --gap: 6rem;
         --column-width: 12.5rem;
 
@@ -95,7 +99,7 @@
             list-style: none;
             display: grid;
             gap: 0.5rem;
-            @apply p-1.5 px-1.5 bg-gray-100 rounded-lg;
+            @apply p-1.5 px-1.5 bg-gray-100 rounded-lg dark:bg-gray-900/60;
 
             > li {
                 /* Use a grid instead of flexbox so we can force things into column 1 and 2.
@@ -114,7 +118,7 @@
                 gap: 0.5rem;
                 height: var(--item-height);
                 padding-block: var(--item-padding);
-                @apply px-3 border-1 border-gray-300 rounded-md bg-white shadow-ui-xs text-xs;
+                @apply px-3 border-1 border-gray-300 rounded-md bg-white shadow-ui-xs text-xs text-gray-850 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:shadow-none;
             }
 
             > li.linked-list__fieldset-wrap {
@@ -132,7 +136,7 @@
             .linked-list__fieldset-group {
                 display: flex;
                 flex-direction: column;
-                @apply rounded-lg shadow-ui-xs;
+                @apply rounded-lg shadow-ui-xs dark:shadow-none dark:ring-1 dark:ring-white/10;
             }
 
             .linked-list__field-row {
@@ -141,7 +145,7 @@
                 gap: 0.5rem;
                 height: var(--item-height);
                 padding-block: var(--item-padding);
-                @apply border-x border-b border-gray-300 bg-white px-3 text-xs;
+                @apply border-x border-b border-gray-300 bg-white px-3 text-xs text-gray-850 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200;
 
                 &:first-child {
                     @apply rounded-t-md border-t;
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index ad102848aa..8904df0faa 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -140,7 +140,7 @@ const fieldIconClass = (field) => {
                         <Icon
                             v-if="isConnectorDestination(pageIndex)"
                             name="chevron-right"
-                            class="size-3! shrink-0 -ms-2.5 relative -top-0.25 text-blue-400"
+                            class="size-3! shrink-0 -ms-2.5 relative -top-0.25 text-blue-400 dark:text-blue-500"
                             aria-hidden="true"
                         />
                         <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">
@@ -151,7 +151,7 @@ const fieldIconClass = (field) => {
                             />
                         </span>
                         <div
-                            class="mx-auto flex w-full shrink-0 justify-center items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-xs font-medium text-gray-850 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
+                            class="mx-auto flex w-full shrink-0 justify-center items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-xs font-medium text-gray-850 bg-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
                             :class="{ 'w-[85%]!': hasPageNameLeadingIcons(page, pageIndex) }"
                         >
                             <Icon name="page" class="size-4 shrink-0 -ms-1.5 text-gray-500 dark:text-gray-400" aria-hidden="true" />

From af3410a988734b8fa3dc69ef9c2780f87df8d516 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 07:39:11 +0100
Subject: [PATCH 58/79] Consistent view names

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

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index bdb7fc73cf..dcc11f2e56 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -124,14 +124,14 @@ onUnmounted(() => {
                         <ToggleItem
                             value="expanded"
                             icon="expand"
-                            :aria-label="__('Uncompressed view')"
-                            v-tooltip="__('Uncompressed view')"
+                            :aria-label="__('Expanded view')"
+                            v-tooltip="__('Expanded view')"
                         />
                         <ToggleItem
                             value="compressed"
                             icon="collapse"
-                            :aria-label="__('Compressed view')"
-                            v-tooltip="__('Compressed view')"
+                            :aria-label="__('Collapsed view')"
+                            v-tooltip="__('Collapsed view')"
                         />
                     </ToggleGroup>
                     <ToggleGroup v-model="logicView" size="sm">

From b853ccb3eda829884586091bd08c7950ad104a5a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 08:30:59 +0100
Subject: [PATCH 59/79] For the compressed view > fieldset, show the field icon

---
 .../components/forms/builder/ImportField.vue  | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/forms/builder/ImportField.vue b/resources/js/components/forms/builder/ImportField.vue
index b6da8fd789..4741ff620e 100644
--- a/resources/js/components/forms/builder/ImportField.vue
+++ b/resources/js/components/forms/builder/ImportField.vue
@@ -3,9 +3,10 @@ import { Button, Description, Field, Icon, Label } from '@ui';
 import { computed } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import { injectBuilderContext, InspectorType } from '@/pages/forms/Builder.vue';
-import { categoryColorClasses } from './categories';
 import { __ } from '@/bootstrap/globals';
 
+const mutedIconClass = 'text-gray-600 dark:text-gray-400';
+
 const props = defineProps<{
     field: any;
     isFirstRow?: boolean;
@@ -22,12 +23,15 @@ const fieldsets = Object.values(usePage().props.fieldsets);
 
 const isInspecting = computed(() => inspectorType.value === InspectorType.FieldsetImport && inspecting.value?._id === props.field._id);
 
+const fieldset = computed(() => fieldsets.find((fs) => fs.handle === props.field.fieldset));
+
 const fieldsetFields = computed(() => {
-    const fieldset = fieldsets.find((fs) => fs.handle === props.field.fieldset);
-    if (!fieldset) return [];
-    return fieldset.fields.filter((f) => f.type !== 'import');
+    if (!fieldset.value) return [];
+    return fieldset.value.fields.filter((f) => f.type !== 'import');
 });
 
+const fieldsetTitle = computed(() => fieldset.value?.title);
+
 const inspectFieldsetImport = () => inspect(InspectorType.FieldsetImport, props.field);
 
 const errorMessage = computed(() => {
@@ -76,11 +80,24 @@ const errorMessage = computed(() => {
                     <Field :label="__(fieldsetField.config.display)" :instructions="fieldsetField.config.instructions">
                         <template #label>
                             <Label>
-                                <span class="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
-                                    <Icon name="link" data-collapsed-field-icon class="size-3.5 me-1 " :class="categoryColorClasses['fieldsets']?.icon" aria-hidden="true" />
+                                <Icon
+                                    :name="fieldsetField.icon || 'generic-field'"
+                                    data-collapsed-field-icon
+                                    :class="['size-3.5 mb-0.25! me-2.5', mutedIconClass]"
+                                    aria-hidden="true"
+                                />
+                                <span>
                                     {{ __(fieldsetField.config.display) }}
                                     <span v-if="fieldsetField.config.validate?.includes('required')" class="relative -top-px ms-0.5 text-red-600">*</span>
                                 </span>
+                                <Icon
+                                    v-if="fieldsetFieldIndex === 0"
+                                    name="link"
+                                    data-collapsed-field-icon
+                                    class="inline-block size-3! text-indigo-500 dark:text-indigo-400 mb-0.5 ms-2"
+                                    :aria-label="__('Linked Fieldset')"
+                                    v-tooltip="fieldsetTitle ? __('Linked Fieldset: :title', { title: __(fieldsetTitle) }) : __('Linked Fieldset')"
+                                />
                             </Label>
                         </template>
                         <div class="pointer-events-none" inert>

From eb0952655e889dd29a7d7a98aa32d44b286d0c81 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 09:36:43 +0100
Subject: [PATCH 60/79] Compress spacing for fieldsets when the fields are
 collapsed

---
 resources/css/components/forms.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/resources/css/components/forms.css b/resources/css/components/forms.css
index 47303fb598..ecc555ea9a 100644
--- a/resources/css/components/forms.css
+++ b/resources/css/components/forms.css
@@ -156,6 +156,11 @@
     [data-collapsed-field-icon] {
         display: inline-flex;
     }
+
+    /* Compress spacing for fieldsets when the fields are collapsed */
+    [data-fieldset-group] {
+        @apply space-y-5;
+    }
 }
 
 

From b26e9c5ce952ae8f6bbd58213ef8ee57793d7758 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 09:57:23 +0100
Subject: [PATCH 61/79] Remove overqualified selectors

---
 resources/css/components/forms/logic-tree.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index dedd74fe02..9557813799 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -101,7 +101,7 @@
             gap: 0.5rem;
             @apply p-1.5 px-1.5 bg-gray-100 rounded-lg dark:bg-gray-900/60;
 
-            > li {
+            li {
                 /* Use a grid instead of flexbox so we can force things into column 1 and 2.
                    If we use flexbox then invisible items such as .linked-list__extra-leap-connector will take up an flex child space, changing the layout of items with a leap connector. */
                 display: grid;
@@ -121,7 +121,7 @@
                 @apply px-3 border-1 border-gray-300 rounded-md bg-white shadow-ui-xs text-xs text-gray-850 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:shadow-none;
             }
 
-            > li.linked-list__fieldset-wrap {
+            .linked-list__fieldset-wrap {
                 display: block;
                 height: auto;
                 padding: 0;

From b51d24633213de4351f4313993ee18b7e6feb10d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 09:57:35 +0100
Subject: [PATCH 62/79] Tree view - add sections

---
 resources/css/components/forms/logic-tree.css | 25 +++++++++
 resources/js/pages/forms/LogicTree.vue        | 21 +++++++-
 .../CP/Forms/FormLogicController.php          | 18 +++++++
 tests/Feature/Forms/FormLogicTest.php         | 53 +++++++++++++++++++
 4 files changed, 116 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 9557813799..ca07aa93cc 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -131,6 +131,31 @@
                 gap: 0;
             }
 
+            .linked-list__section-marker {
+                display: flex;
+                align-items: center;
+                gap: 0.375rem;
+                height: var(--item-height);
+                padding: 0 0.125rem;
+                border: 0;
+                background: transparent;
+                box-shadow: none;
+                grid-template-columns: unset;
+                @apply text-2xs font-medium text-gray-800 dark:text-gray-200;
+
+                &::before,
+                &::after {
+                    content: '';
+                    flex: 1;
+                    height: 1px;
+                    @apply border-b border-gray-400 dark:border-gray-600 border-dashed;
+                }
+            }
+
+            .linked-list__section-marker-label {
+                @apply max-w-[8rem] select-none;
+            }
+
             /* GROUP LOGIC TREE / FIELDSETS (stacked cards)
             =================================================== */
             .linked-list__fieldset-group {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 8904df0faa..590aa9d7df 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -119,6 +119,18 @@ const fieldIconClass = (field) => {
 
     return categoryColorClasses[color]?.icon || mutedIconClass;
 };
+
+const firstFieldInGroup = (group) => (group.type === 'field' ? group.field : group.fields[0]);
+
+const isSectionMarker = (groups, groupIndex) => {
+    if (groupIndex === 0) {
+        return false;
+    }
+
+    return firstFieldInGroup(groups[groupIndex]).section_start === true;
+};
+
+const sectionMarkerTitle = (group) => firstFieldInGroup(group).section_display || __('Section');
 </script>
 
 <template>
@@ -161,7 +173,14 @@ const fieldIconClass = (field) => {
                 </div>
 
                 <ul>
-                    <template v-for="group in groups" :key="group.type === 'field' ? group.field._id : group.import">
+                    <template v-for="(group, groupIndex) in groups" :key="group.type === 'field' ? group.field._id : group.import">
+                        <li
+                            v-if="isSectionMarker(groups, groupIndex)"
+                            class="linked-list__section-marker"
+                            :aria-label="sectionMarkerTitle(group)"
+                        >
+                            <span class="linked-list__section-marker-label line-clamp-2 text-center">{{ sectionMarkerTitle(group) }}</span>
+                        </li>
                         <li
                             v-if="group.type === 'field'"
                             :class="{
diff --git a/src/Http/Controllers/CP/Forms/FormLogicController.php b/src/Http/Controllers/CP/Forms/FormLogicController.php
index 39acb1edbc..f48d5032c9 100644
--- a/src/Http/Controllers/CP/Forms/FormLogicController.php
+++ b/src/Http/Controllers/CP/Forms/FormLogicController.php
@@ -66,6 +66,9 @@ private function fieldsToVue($formFields): array
 
         foreach ($formFields->pages() as $pageIndex => $page) {
             foreach ($page['sections'] ?? [] as $section) {
+                $sectionDisplay = $section['display'] ?? __('Section');
+                $isFirstFieldInSection = true;
+
                 foreach ($section['fields'] ?? [] as $config) {
                     if (isset($config['import'])) {
                         $fieldset = FieldsetRepository::find($config['import']);
@@ -77,7 +80,11 @@ private function fieldsToVue($formFields): array
                                 'inline',
                                 importFieldset: $config['import'],
                                 importTitle: $fieldset?->title(),
+                                sectionDisplay: $sectionDisplay,
+                                sectionStart: $isFirstFieldInSection,
                             );
+
+                            $isFirstFieldInSection = false;
                         }
 
                         continue;
@@ -94,7 +101,11 @@ private function fieldsToVue($formFields): array
                         $pageIndex,
                         $type,
                         handle: $config['handle'],
+                        sectionDisplay: $sectionDisplay,
+                        sectionStart: $isFirstFieldInSection,
                     );
+
+                    $isFirstFieldInSection = false;
                 }
             }
         }
@@ -109,6 +120,8 @@ private function formFieldToVue(
         ?string $importFieldset = null,
         ?string $importTitle = null,
         ?string $handle = null,
+        ?string $sectionDisplay = null,
+        bool $sectionStart = false,
     ): array {
         $handle = $handle ?? $formField?->handle();
         $fieldConfig = $formField?->config() ?? [];
@@ -135,6 +148,11 @@ private function formFieldToVue(
             $result['import_title'] = $importTitle;
         }
 
+        if ($sectionStart) {
+            $result['section_start'] = true;
+            $result['section_display'] = $sectionDisplay;
+        }
+
         if (isset($fieldConfig['options'])) {
             $result['options'] = $fieldConfig['options'];
         }
diff --git a/tests/Feature/Forms/FormLogicTest.php b/tests/Feature/Forms/FormLogicTest.php
index 5a3818193a..f4bd68ca55 100644
--- a/tests/Feature/Forms/FormLogicTest.php
+++ b/tests/Feature/Forms/FormLogicTest.php
@@ -108,6 +108,59 @@ public function it_provides_pages_with_rules()
             );
     }
 
+    #[Test]
+    public function it_marks_the_first_field_in_each_section()
+    {
+        Composer::shouldReceive('isInstalled')->with('statamic/forms-pro')->andReturn(true);
+
+        $this->setTestRoles(['test' => ['access cp', 'configure forms']]);
+        $user = User::make()->assignRole('test')->save();
+
+        $form = tap(Form::make('test')->formFields([
+            'pages' => [
+                [
+                    'sections' => [
+                        [
+                            'display' => 'Contact',
+                            'fields' => [
+                                [
+                                    'handle' => 'name',
+                                    'field' => [
+                                        'type' => 'short_answer',
+                                        'display' => 'Name',
+                                    ],
+                                ],
+                            ],
+                        ],
+                        [
+                            'display' => 'Details',
+                            'fields' => [
+                                [
+                                    'handle' => 'email',
+                                    'field' => [
+                                        'type' => 'short_answer',
+                                        'display' => 'Email',
+                                    ],
+                                ],
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]))->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('forms.logic.edit', $form->handle()))
+            ->assertSuccessful()
+            ->assertInertia(fn ($page) => $page
+                ->where('fields.0.section_start', true)
+                ->where('fields.0.section_display', 'Contact')
+                ->where('fields.1.section_start', true)
+                ->where('fields.1.section_display', 'Details')
+            );
+    }
+
     #[Test]
     public function it_provides_fields_with_conditions()
     {

From d41c7d94fd412b7d99ed0e44a869aa3c7d51ae97 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 10:05:50 +0100
Subject: [PATCH 63/79] Tree view - add first sections

---
 resources/css/components/forms/logic-tree.css | 11 ++++++++++-
 resources/js/pages/forms/LogicTree.vue        |  8 +-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index ca07aa93cc..d464d2fdf5 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -141,7 +141,7 @@
                 background: transparent;
                 box-shadow: none;
                 grid-template-columns: unset;
-                @apply text-2xs font-medium text-gray-800 dark:text-gray-200;
+                @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
 
                 &::before,
                 &::after {
@@ -150,6 +150,15 @@
                     height: 1px;
                     @apply border-b border-gray-400 dark:border-gray-600 border-dashed;
                 }
+
+                &:first-child {
+                    /* Make this small because it's less important, and we can get away with changing the list item height because the connectors never go above the second list item */
+                    height: 1rem;
+                    &::before,
+                    &::after {
+                        opacity: 0;
+                    }
+                }
             }
 
             .linked-list__section-marker-label {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 590aa9d7df..dfa288e7e5 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -122,13 +122,7 @@ const fieldIconClass = (field) => {
 
 const firstFieldInGroup = (group) => (group.type === 'field' ? group.field : group.fields[0]);
 
-const isSectionMarker = (groups, groupIndex) => {
-    if (groupIndex === 0) {
-        return false;
-    }
-
-    return firstFieldInGroup(groups[groupIndex]).section_start === true;
-};
+const isSectionMarker = (groups, groupIndex) => firstFieldInGroup(groups[groupIndex]).section_start === true;
 
 const sectionMarkerTitle = (group) => firstFieldInGroup(group).section_display || __('Section');
 </script>

From f9299e90e6f194b34418a49a159aa19bd09fd055 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 10:19:05 +0100
Subject: [PATCH 64/79] Tree view / Sections - start changing how we do them

---
 resources/css/components/forms/logic-tree.css | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index d464d2fdf5..8ed10918b5 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -133,7 +133,8 @@
 
             .linked-list__section-marker {
                 display: flex;
-                align-items: center;
+                align-items: end;
+                justify-content: center;
                 gap: 0.375rem;
                 height: var(--item-height);
                 padding: 0 0.125rem;
@@ -143,26 +144,14 @@
                 grid-template-columns: unset;
                 @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
 
-                &::before,
-                &::after {
-                    content: '';
-                    flex: 1;
-                    height: 1px;
-                    @apply border-b border-gray-400 dark:border-gray-600 border-dashed;
-                }
-
                 &:first-child {
                     /* Make this small because it's less important, and we can get away with changing the list item height because the connectors never go above the second list item */
                     height: 1rem;
-                    &::before,
-                    &::after {
-                        opacity: 0;
-                    }
                 }
             }
 
             .linked-list__section-marker-label {
-                @apply max-w-[8rem] select-none;
+                @apply max-w-[9rem] select-none;
             }
 
             /* GROUP LOGIC TREE / FIELDSETS (stacked cards)

From 9256bdcdd03fd0b7c8335dc0c2aee76a053d9d9f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 10:46:13 +0100
Subject: [PATCH 65/79] Revert "Tree view / Sections - start changing how we do
 them"

This reverts commit f9299e90e6f194b34418a49a159aa19bd09fd055.
---
 resources/css/components/forms/logic-tree.css | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 8ed10918b5..d464d2fdf5 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -133,8 +133,7 @@
 
             .linked-list__section-marker {
                 display: flex;
-                align-items: end;
-                justify-content: center;
+                align-items: center;
                 gap: 0.375rem;
                 height: var(--item-height);
                 padding: 0 0.125rem;
@@ -144,14 +143,26 @@
                 grid-template-columns: unset;
                 @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
 
+                &::before,
+                &::after {
+                    content: '';
+                    flex: 1;
+                    height: 1px;
+                    @apply border-b border-gray-400 dark:border-gray-600 border-dashed;
+                }
+
                 &:first-child {
                     /* Make this small because it's less important, and we can get away with changing the list item height because the connectors never go above the second list item */
                     height: 1rem;
+                    &::before,
+                    &::after {
+                        opacity: 0;
+                    }
                 }
             }
 
             .linked-list__section-marker-label {
-                @apply max-w-[9rem] select-none;
+                @apply max-w-[8rem] select-none;
             }
 
             /* GROUP LOGIC TREE / FIELDSETS (stacked cards)

From 9724a7418deb34d2faee53fbbbf333dd8488f295 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 11:07:15 +0100
Subject: [PATCH 66/79] Tree view / Sections - change alignment

---
 resources/css/components/forms/logic-tree.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index d464d2fdf5..71d13bdc38 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -141,7 +141,7 @@
                 background: transparent;
                 box-shadow: none;
                 grid-template-columns: unset;
-                @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
+                @apply text-2xs font-medium text-gray-700 dark:text-gray-200 pt-10;
 
                 &::before,
                 &::after {
@@ -154,6 +154,7 @@
                 &:first-child {
                     /* Make this small because it's less important, and we can get away with changing the list item height because the connectors never go above the second list item */
                     height: 1rem;
+                    @apply pt-0;
                     &::before,
                     &::after {
                         opacity: 0;

From 9b63845da0ac634f6f9b06edac0cb4f56b64e13f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 11:13:43 +0100
Subject: [PATCH 67/79] Tree view / Sections - split out sections

---
 resources/css/components/forms/logic-tree.css |  70 ++++---
 resources/js/pages/forms/LogicTree.vue        | 174 ++++++++++--------
 2 files changed, 135 insertions(+), 109 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 71d13bdc38..365fd3530c 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -8,7 +8,8 @@
 
     Markup (LogicTree.vue):
 
-        - Each page column is a .linked-list__column (.linked-list__page-name + <ul>).
+        - Each page column is a .linked-list__column (.linked-list__page-name + .linked-list__sections).
+        - Each section is a .linked-list__section (.linked-list__section-marker + <ul>).
         - Page headers: .linked-list__page-name with anchor-name: --page-N.
         - Source fields: .linked-list__connector with --end-connection: --page-N, pointing at the target page’s anchor name.
         - Multi-column hops: add .linked-list__page-leap on the source <li> and a .linked-list__extra-leap-connector child for the bridge segment. This helps separate multi-column connectors from adjacent pages.
@@ -94,6 +95,38 @@
             @apply px-2 pt-2;
         }
 
+        .linked-list__sections {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            min-width: 0;
+        }
+
+        .linked-list__section {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+        }
+
+        .linked-list__section-marker {
+            display: flex;
+            align-items: center;
+            padding: 0 0.5rem;
+            height: var(--item-height);
+            @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
+
+            &::before,
+            &::after {
+                content: '';
+                flex: 1;
+                @apply border-b border-gray-400 dark:border-gray-600 border-dashed;
+            }
+        }
+
+        .linked-list__section-marker-label {
+            @apply max-w-[8rem] shrink-0 select-none;
+        }
+
         ul {
             margin: 0;
             list-style: none;
@@ -131,41 +164,6 @@
                 gap: 0;
             }
 
-            .linked-list__section-marker {
-                display: flex;
-                align-items: center;
-                gap: 0.375rem;
-                height: var(--item-height);
-                padding: 0 0.125rem;
-                border: 0;
-                background: transparent;
-                box-shadow: none;
-                grid-template-columns: unset;
-                @apply text-2xs font-medium text-gray-700 dark:text-gray-200 pt-10;
-
-                &::before,
-                &::after {
-                    content: '';
-                    flex: 1;
-                    height: 1px;
-                    @apply border-b border-gray-400 dark:border-gray-600 border-dashed;
-                }
-
-                &:first-child {
-                    /* Make this small because it's less important, and we can get away with changing the list item height because the connectors never go above the second list item */
-                    height: 1rem;
-                    @apply pt-0;
-                    &::before,
-                    &::after {
-                        opacity: 0;
-                    }
-                }
-            }
-
-            .linked-list__section-marker-label {
-                @apply max-w-[8rem] select-none;
-            }
-
             /* GROUP LOGIC TREE / FIELDSETS (stacked cards)
             =================================================== */
             .linked-list__fieldset-group {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index dfa288e7e5..030a5589e9 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -39,11 +39,40 @@ const groupPageFields = (pageFields) => {
     return groups;
 };
 
+const firstFieldInGroup = (group) => (group.type === 'field' ? group.field : group.fields[0]);
+
+const groupPageSections = (pageFields) => {
+    const groups = groupPageFields(pageFields);
+
+    if (groups.length === 0) {
+        return [];
+    }
+
+    const sections = [];
+    let currentSection = null;
+
+    groups.forEach((group) => {
+        const field = firstFieldInGroup(group);
+
+        if (! currentSection || field.section_start) {
+            currentSection = {
+                title: field.section_display || __('Section'),
+                groups: [],
+            };
+            sections.push(currentSection);
+        }
+
+        currentSection.groups.push(group);
+    });
+
+    return sections;
+};
+
 const fieldsByPage = computed(() => {
     return props.pages.map((page, pageIndex) => ({
         page,
         pageIndex,
-        groups: groupPageFields(props.fields.filter((field) => field.page_index === pageIndex)),
+        sections: groupPageSections(props.fields.filter((field) => field.page_index === pageIndex)),
     }));
 });
 
@@ -120,18 +149,13 @@ const fieldIconClass = (field) => {
     return categoryColorClasses[color]?.icon || mutedIconClass;
 };
 
-const firstFieldInGroup = (group) => (group.type === 'field' ? group.field : group.fields[0]);
-
-const isSectionMarker = (groups, groupIndex) => firstFieldInGroup(groups[groupIndex]).section_start === true;
-
-const sectionMarkerTitle = (group) => firstFieldInGroup(group).section_display || __('Section');
 </script>
 
 <template>
     <div class="linked-list-container">
         <div class="linked-list" :class="{ 'linked-list--expanded': expanded }">
             <div
-                v-for="{ page, pageIndex, groups } in fieldsByPage"
+                v-for="{ page, pageIndex, sections } in fieldsByPage"
                 :key="page._id"
                 class="linked-list__column"
             >
@@ -166,63 +190,34 @@ const sectionMarkerTitle = (group) => firstFieldInGroup(group).section_display |
                     </div>
                 </div>
 
-                <ul>
-                    <template v-for="(group, groupIndex) in groups" :key="group.type === 'field' ? group.field._id : group.import">
-                        <li
-                            v-if="isSectionMarker(groups, groupIndex)"
-                            class="linked-list__section-marker"
-                            :aria-label="sectionMarkerTitle(group)"
-                        >
-                            <span class="linked-list__section-marker-label line-clamp-2 text-center">{{ sectionMarkerTitle(group) }}</span>
-                        </li>
-                        <li
-                            v-if="group.type === 'field'"
-                            :class="{
-                                'linked-list__connector': fieldConnection(group.field),
-                                'linked-list__page-leap': fieldConnection(group.field)?.leap,
-                            }"
-                            :style="fieldConnection(group.field) ? { '--end-connection': fieldConnection(group.field).endConnection } : null"
-                        >
-                            <div v-if="fieldConnection(group.field)?.leap" class="linked-list__extra-leap-connector" />
-                            <Icon
-                                :name="group.field.icon || 'generic-field'"
-                                :class="['size-4 shrink-0', fieldIconClass(group.field)]"
-                                aria-hidden="true"
-                            />
-                            <span class="linked-list__field-name min-w-0 flex-1">{{ group.field.display }}</span>
-                            <span
-                                v-if="group.field.type === 'reference'"
-                                v-tooltip="__('Linked Field')"
-                                class="inline-flex size-4 shrink-0"
-                            >
-                                <Icon
-                                    name="link"
-                                    class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
-                                    aria-hidden="true"
-                                />
-                            </span>
-                        </li>
-                        <li v-else class="linked-list__fieldset-wrap">
-                            <div class="linked-list__fieldset-group">
-                                <div
-                                    v-for="(field, fieldIndex) in group.fields"
-                                    :key="field._id"
-                                    class="linked-list__field-row"
+                <div class="linked-list__sections">
+                    <div
+                        v-for="(section, sectionIndex) in sections"
+                        :key="`${page._id}-section-${sectionIndex}`"
+                        class="linked-list__section"
+                    >
+                        <div class="linked-list__section-marker" :aria-label="section.title">
+                            <span class="linked-list__section-marker-label line-clamp-2 text-center">{{ section.title }}</span>
+                        </div>
+                        <ul>
+                            <template v-for="group in section.groups" :key="group.type === 'field' ? group.field._id : group.import">
+                                <li
+                                    v-if="group.type === 'field'"
                                     :class="{
-                                        'linked-list__connector': fieldConnection(field),
-                                        'linked-list__page-leap': fieldConnection(field)?.leap,
+                                        'linked-list__connector': fieldConnection(group.field),
+                                        'linked-list__page-leap': fieldConnection(group.field)?.leap,
                                     }"
-                                    :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
+                                    :style="fieldConnection(group.field) ? { '--end-connection': fieldConnection(group.field).endConnection } : null"
                                 >
-                                    <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
+                                    <div v-if="fieldConnection(group.field)?.leap" class="linked-list__extra-leap-connector" />
                                     <Icon
-                                        :name="field.icon || 'generic-field'"
-                                        :class="['size-4 shrink-0', fieldIconClass(field)]"
+                                        :name="group.field.icon || 'generic-field'"
+                                        :class="['size-4 shrink-0', fieldIconClass(group.field)]"
                                         aria-hidden="true"
                                     />
-                                    <span class="linked-list__field-name min-w-0 flex-1">{{ field.display }}</span>
+                                    <span class="linked-list__field-name min-w-0 flex-1">{{ group.field.display }}</span>
                                     <span
-                                        v-if="field.type === 'reference'"
+                                        v-if="group.field.type === 'reference'"
                                         v-tooltip="__('Linked Field')"
                                         class="inline-flex size-4 shrink-0"
                                     >
@@ -232,22 +227,55 @@ const sectionMarkerTitle = (group) => firstFieldInGroup(group).section_display |
                                             aria-hidden="true"
                                         />
                                     </span>
-                                    <span
-                                        v-if="fieldIndex === 0"
-                                        v-tooltip="group.title ? __('Linked Fieldset: :title', { title: group.title }) : __('Linked Fieldset')"
-                                        class="inline-flex size-4 shrink-0"
-                                    >
-                                        <Icon
-                                            name="link"
-                                            class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
-                                            aria-hidden="true"
-                                        />
-                                    </span>
-                                </div>
-                            </div>
-                        </li>
-                    </template>
-                </ul>
+                                </li>
+                                <li v-else class="linked-list__fieldset-wrap">
+                                    <div class="linked-list__fieldset-group">
+                                        <div
+                                            v-for="(field, fieldIndex) in group.fields"
+                                            :key="field._id"
+                                            class="linked-list__field-row"
+                                            :class="{
+                                                'linked-list__connector': fieldConnection(field),
+                                                'linked-list__page-leap': fieldConnection(field)?.leap,
+                                            }"
+                                            :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
+                                        >
+                                            <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
+                                            <Icon
+                                                :name="field.icon || 'generic-field'"
+                                                :class="['size-4 shrink-0', fieldIconClass(field)]"
+                                                aria-hidden="true"
+                                            />
+                                            <span class="linked-list__field-name min-w-0 flex-1">{{ field.display }}</span>
+                                            <span
+                                                v-if="field.type === 'reference'"
+                                                v-tooltip="__('Linked Field')"
+                                                class="inline-flex size-4 shrink-0"
+                                            >
+                                                <Icon
+                                                    name="link"
+                                                    class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                                    aria-hidden="true"
+                                                />
+                                            </span>
+                                            <span
+                                                v-if="fieldIndex === 0"
+                                                v-tooltip="group.title ? __('Linked Fieldset: :title', { title: group.title }) : __('Linked Fieldset')"
+                                                class="inline-flex size-4 shrink-0"
+                                            >
+                                                <Icon
+                                                    name="link"
+                                                    class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                                    aria-hidden="true"
+                                                />
+                                            </span>
+                                        </div>
+                                    </div>
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

From d1f0d5c211d63153b130dd43274b175f37fab952 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 11:17:34 +0100
Subject: [PATCH 68/79] Tree view / Sections - fix gap

---
 resources/css/components/forms/logic-tree.css | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 365fd3530c..0384a06389 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -87,7 +87,7 @@
         .linked-list__column {
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
+            gap: 0.25rem;
             min-width: 0;
         }
 
@@ -98,7 +98,7 @@
         .linked-list__sections {
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
+            gap: 0.25rem;
             min-width: 0;
         }
 
@@ -114,13 +114,6 @@
             padding: 0 0.5rem;
             height: var(--item-height);
             @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
-
-            &::before,
-            &::after {
-                content: '';
-                flex: 1;
-                @apply border-b border-gray-400 dark:border-gray-600 border-dashed;
-            }
         }
 
         .linked-list__section-marker-label {

From c02dacea6ce25d7c43c21a8be22939088777e58a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 11:25:51 +0100
Subject: [PATCH 69/79] Tree view / Sections - start fixing alignment

---
 resources/css/components/forms/logic-tree.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 0384a06389..885273cbc5 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -110,9 +110,12 @@
 
         .linked-list__section-marker {
             display: flex;
-            align-items: center;
+            align-items: end;
+            justify-content: center;
             padding: 0 0.5rem;
-            height: var(--item-height);
+            .linked-list__section:not(:first-child) & {
+                height: var(--item-height);
+            }
             @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
         }
 

From 6e6fa36fdb40ef18bc216a4a21ad4e4d023c7856 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 12:11:44 +0100
Subject: [PATCH 70/79] Tree view / Fieldsets - remove the stacked cards
 because it knocks off spacing and linked lines

---
 resources/css/components/forms/logic-tree.css |  43 ------
 resources/js/pages/forms/LogicTree.vue        | 138 ++++++------------
 2 files changed, 44 insertions(+), 137 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 885273cbc5..c42454275a 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -150,49 +150,6 @@
                 @apply px-3 border-1 border-gray-300 rounded-md bg-white shadow-ui-xs text-xs text-gray-850 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:shadow-none;
             }
 
-            .linked-list__fieldset-wrap {
-                display: block;
-                height: auto;
-                padding: 0;
-                border: 0;
-                background: transparent;
-                box-shadow: none;
-                gap: 0;
-            }
-
-            /* GROUP LOGIC TREE / FIELDSETS (stacked cards)
-            =================================================== */
-            .linked-list__fieldset-group {
-                display: flex;
-                flex-direction: column;
-                @apply rounded-lg shadow-ui-xs dark:shadow-none dark:ring-1 dark:ring-white/10;
-            }
-
-            .linked-list__field-row {
-                position: relative;
-                display: flex;
-                gap: 0.5rem;
-                height: var(--item-height);
-                padding-block: var(--item-padding);
-                @apply border-x border-b border-gray-300 bg-white px-3 text-xs text-gray-850 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200;
-
-                &:first-child {
-                    @apply rounded-t-md border-t;
-                }
-
-                &:last-child {
-                    @apply rounded-b-md;
-                }
-
-                &:only-child {
-                    @apply rounded-md;
-                }
-
-                &:not(:first-child) {
-                    @apply border-t-0;
-                }
-            }
-
             /* GROUP LOGIC TREE CONNECTORS / SOURCE
             =================================================== */
             .linked-list__connector {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 030a5589e9..b66935bd2e 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -11,35 +11,19 @@ const props = defineProps({
 
 const pageAnchor = (pageIndex) => `--page-${pageIndex + 1}`;
 
-const groupPageFields = (pageFields) => {
-    const groups = [];
-    let fieldsetGroup = null;
-
-    pageFields.forEach((field) => {
-        if (field.import) {
-            if (fieldsetGroup?.import === field.import) {
-                fieldsetGroup.fields.push(field);
-            } else {
-                fieldsetGroup = {
-                    type: 'fieldset',
-                    import: field.import,
-                    title: field.import_title,
-                    fields: [field],
-                };
-                groups.push(fieldsetGroup);
-            }
+const groupPageFields = (pageFields) => pageFields.map((field) => ({ field }));
 
-            return;
-        }
+const firstFieldInGroup = (group) => group.field;
 
-        fieldsetGroup = null;
-        groups.push({ type: 'field', field });
-    });
+const isFirstInFieldset = (field, index, groups) => {
+    if (! field.import) {
+        return false;
+    }
 
-    return groups;
-};
+    const previous = groups[index - 1]?.field;
 
-const firstFieldInGroup = (group) => (group.type === 'field' ? group.field : group.fields[0]);
+    return ! previous || previous.import !== field.import;
+};
 
 const groupPageSections = (pageFields) => {
     const groups = groupPageFields(pageFields);
@@ -200,79 +184,45 @@ const fieldIconClass = (field) => {
                             <span class="linked-list__section-marker-label line-clamp-2 text-center">{{ section.title }}</span>
                         </div>
                         <ul>
-                            <template v-for="group in section.groups" :key="group.type === 'field' ? group.field._id : group.import">
-                                <li
-                                    v-if="group.type === 'field'"
-                                    :class="{
-                                        'linked-list__connector': fieldConnection(group.field),
-                                        'linked-list__page-leap': fieldConnection(group.field)?.leap,
-                                    }"
-                                    :style="fieldConnection(group.field) ? { '--end-connection': fieldConnection(group.field).endConnection } : null"
+                            <li
+                                v-for="(group, groupIndex) in section.groups"
+                                :key="group.field._id"
+                                :class="{
+                                    'linked-list__connector': fieldConnection(group.field),
+                                    'linked-list__page-leap': fieldConnection(group.field)?.leap,
+                                }"
+                                :style="fieldConnection(group.field) ? { '--end-connection': fieldConnection(group.field).endConnection } : null"
+                            >
+                                <div v-if="fieldConnection(group.field)?.leap" class="linked-list__extra-leap-connector" />
+                                <Icon
+                                    :name="group.field.icon || 'generic-field'"
+                                    :class="['size-4 shrink-0', fieldIconClass(group.field)]"
+                                    aria-hidden="true"
+                                />
+                                <span class="linked-list__field-name min-w-0 flex-1">{{ group.field.display }}</span>
+                                <span
+                                    v-if="group.field.type === 'reference'"
+                                    v-tooltip="__('Linked Field')"
+                                    class="inline-flex size-4 shrink-0"
+                                >
+                                    <Icon
+                                        name="link"
+                                        class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                        aria-hidden="true"
+                                    />
+                                </span>
+                                <span
+                                    v-if="isFirstInFieldset(group.field, groupIndex, section.groups)"
+                                    v-tooltip="group.field.import_title ? __('Linked Fieldset: :title', { title: group.field.import_title }) : __('Linked Fieldset')"
+                                    class="inline-flex size-4 shrink-0"
                                 >
-                                    <div v-if="fieldConnection(group.field)?.leap" class="linked-list__extra-leap-connector" />
                                     <Icon
-                                        :name="group.field.icon || 'generic-field'"
-                                        :class="['size-4 shrink-0', fieldIconClass(group.field)]"
+                                        name="link"
+                                        class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
                                         aria-hidden="true"
                                     />
-                                    <span class="linked-list__field-name min-w-0 flex-1">{{ group.field.display }}</span>
-                                    <span
-                                        v-if="group.field.type === 'reference'"
-                                        v-tooltip="__('Linked Field')"
-                                        class="inline-flex size-4 shrink-0"
-                                    >
-                                        <Icon
-                                            name="link"
-                                            class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
-                                            aria-hidden="true"
-                                        />
-                                    </span>
-                                </li>
-                                <li v-else class="linked-list__fieldset-wrap">
-                                    <div class="linked-list__fieldset-group">
-                                        <div
-                                            v-for="(field, fieldIndex) in group.fields"
-                                            :key="field._id"
-                                            class="linked-list__field-row"
-                                            :class="{
-                                                'linked-list__connector': fieldConnection(field),
-                                                'linked-list__page-leap': fieldConnection(field)?.leap,
-                                            }"
-                                            :style="fieldConnection(field) ? { '--end-connection': fieldConnection(field).endConnection } : null"
-                                        >
-                                            <div v-if="fieldConnection(field)?.leap" class="linked-list__extra-leap-connector" />
-                                            <Icon
-                                                :name="field.icon || 'generic-field'"
-                                                :class="['size-4 shrink-0', fieldIconClass(field)]"
-                                                aria-hidden="true"
-                                            />
-                                            <span class="linked-list__field-name min-w-0 flex-1">{{ field.display }}</span>
-                                            <span
-                                                v-if="field.type === 'reference'"
-                                                v-tooltip="__('Linked Field')"
-                                                class="inline-flex size-4 shrink-0"
-                                            >
-                                                <Icon
-                                                    name="link"
-                                                    class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
-                                                    aria-hidden="true"
-                                                />
-                                            </span>
-                                            <span
-                                                v-if="fieldIndex === 0"
-                                                v-tooltip="group.title ? __('Linked Fieldset: :title', { title: group.title }) : __('Linked Fieldset')"
-                                                class="inline-flex size-4 shrink-0"
-                                            >
-                                                <Icon
-                                                    name="link"
-                                                    class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
-                                                    aria-hidden="true"
-                                                />
-                                            </span>
-                                        </div>
-                                    </div>
-                                </li>
-                            </template>
+                                </span>
+                            </li>
                         </ul>
                     </div>
                 </div>

From 0caa707aee0339ee37496b51cee583b96b41a7f8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 12:44:45 +0100
Subject: [PATCH 71/79] Tree view / Fieldsets - restyle fieldsets to keep
 spacing intact

---
 resources/css/components/forms/logic-tree.css |  6 ++++++
 resources/js/pages/forms/LogicTree.vue        | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index c42454275a..163ba17389 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -220,6 +220,12 @@
         }
     }
 
+    /* GROUP LOGIC TREE CONNECTORS / FIELDSETS
+    =================================================== */
+    .linked-list__fieldset-field {
+        @apply border-dashed border-gray-400! dark:border-gray-600!;
+    }
+
     /* GROUP LOGIC TREE CONNECTORS / LEAP BRIDGE (FIRST GAP + CORNER)
     =================================================== */
     .linked-list__extra-leap-connector {
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index b66935bd2e..87ba250fcd 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -25,6 +25,18 @@ const isFirstInFieldset = (field, index, groups) => {
     return ! previous || previous.import !== field.import;
 };
 
+const isLastInFieldset = (field, index, groups) => {
+    if (! field.import) {
+        return false;
+    }
+
+    const next = groups[index + 1]?.field;
+
+    return ! next || next.import !== field.import;
+};
+
+const isFieldsetField = (field, index, groups) => field.import && ! isFirstInFieldset(field, index, groups);
+
 const groupPageSections = (pageFields) => {
     const groups = groupPageFields(pageFields);
 
@@ -190,6 +202,9 @@ const fieldIconClass = (field) => {
                                 :class="{
                                     'linked-list__connector': fieldConnection(group.field),
                                     'linked-list__page-leap': fieldConnection(group.field)?.leap,
+                                    'linked-list__fieldset-start': isFirstInFieldset(group.field, groupIndex, section.groups),
+                                    'linked-list__fieldset-field': isFieldsetField(group.field, groupIndex, section.groups),
+                                    'linked-list__fieldset-end': isLastInFieldset(group.field, groupIndex, section.groups),
                                 }"
                                 :style="fieldConnection(group.field) ? { '--end-connection': fieldConnection(group.field).endConnection } : null"
                             >

From b8bb513aacf721ae7a44c174ce928f7c944dd1a9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 13:26:10 +0100
Subject: [PATCH 72/79] Tree view / Fieldsets - restyle fieldsets

---
 resources/css/components/forms/logic-tree.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 163ba17389..d7836d937c 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -223,7 +223,7 @@
     /* GROUP LOGIC TREE CONNECTORS / FIELDSETS
     =================================================== */
     .linked-list__fieldset-field {
-        @apply border-dashed border-gray-400! dark:border-gray-600!;
+        @apply border-dashed border-gray-400/75! dark:border-gray-600! opacity-75;
     }
 
     /* GROUP LOGIC TREE CONNECTORS / LEAP BRIDGE (FIRST GAP + CORNER)

From 703afcd89e1dfd756697286c302fb353b95f1252 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 13:40:38 +0100
Subject: [PATCH 73/79] Tree view / Fieldsets - restyle fieldset headings

---
 resources/css/components/forms/logic-tree.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index d7836d937c..76d932d230 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -87,7 +87,7 @@
         .linked-list__column {
             display: flex;
             flex-direction: column;
-            gap: 0.25rem;
+            gap: 1rem;
             min-width: 0;
         }
 
@@ -112,15 +112,19 @@
             display: flex;
             align-items: end;
             justify-content: center;
-            padding: 0 0.5rem;
             .linked-list__section:not(:first-child) & {
                 height: var(--item-height);
             }
             @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
+            + ul {
+                @apply rounded-t-none;
+            }
         }
 
         .linked-list__section-marker-label {
-            @apply max-w-[8rem] shrink-0 select-none;
+            @apply max-w-[8rem] shrink-0 select-none pt-1.5 rounded-t-xl bg-gray-100 dark:bg-transparent;
+            max-width: unset;
+            width: 100%;
         }
 
         ul {

From 6ade6f729dfb8faa9609c77ef42bf42f732ca8ac Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 13:44:38 +0100
Subject: [PATCH 74/79] Tree view - get rid of unneeded rules

---
 resources/css/components/forms/logic-tree.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
index 76d932d230..4f892fb341 100644
--- a/resources/css/components/forms/logic-tree.css
+++ b/resources/css/components/forms/logic-tree.css
@@ -47,7 +47,6 @@
     .linked-list-container {
         /* Don't let max-content grid width expand ancestors — scroll inside here only */
         width: 100%;
-        min-width: 0;
         max-width: 100%;
         overflow-x: auto;
         overflow-y: visible;
@@ -88,7 +87,6 @@
             display: flex;
             flex-direction: column;
             gap: 1rem;
-            min-width: 0;
         }
 
         .linked-list__page-name {
@@ -99,13 +97,11 @@
             display: flex;
             flex-direction: column;
             gap: 0.25rem;
-            min-width: 0;
         }
 
         .linked-list__section {
             display: flex;
             flex-direction: column;
-            min-width: 0;
         }
 
         .linked-list__section-marker {

From 3bebee603a9a9804c73290bab3a2a5ff2f51ca3e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 14:00:52 +0100
Subject: [PATCH 75/79] Number toggle across views

---
 resources/js/components/forms/FieldNumber.vue | 13 +++
 .../components/forms/FieldNumberingToggle.vue | 18 ++++
 .../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            | 11 ++-
 resources/js/pages/forms/LogicTree.vue        | 17 +++-
 11 files changed, 208 insertions(+), 7 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 0000000000..b976cfe56f
--- /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 0000000000..d07bb41dde
--- /dev/null
+++ b/resources/js/components/forms/FieldNumberingToggle.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { Button } from '@ui';
+import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
+
+const { showFieldNumbers } = useFieldNumberingPreference();
+</script>
+
+<template>
+    <Button
+        size="xs"
+        icon="list-ol"
+        :variant="showFieldNumbers ? 'filled' : 'subtle'"
+        :aria-label="__('Show field numbers')"
+        :aria-pressed="showFieldNumbers"
+        v-tooltip="__('Show field numbers')"
+        @click="showFieldNumbers = !showFieldNumbers"
+    />
+</template>
diff --git a/resources/js/components/forms/builder/ImportField.vue b/resources/js/components/forms/builder/ImportField.vue
index 4741ff620e..b4e379934f 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 { __ } from '@/bootstrap/globals';
 
@@ -17,7 +19,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);
 
@@ -80,6 +96,7 @@ const errorMessage = computed(() => {
                     <Field :label="__(fieldsetField.config.display)" :instructions="fieldsetField.config.instructions">
                         <template #label>
                             <Label>
+                                <FieldNumber :number="fieldsetFieldNumber(fieldsetField)" class="me-1" />
                                 <Icon
                                     :name="fieldsetField.icon || 'generic-field'"
                                     data-collapsed-field-icon
diff --git a/resources/js/components/forms/builder/RegularFormField.vue b/resources/js/components/forms/builder/RegularFormField.vue
index c46b648313..30739a2f7b 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 4ff3cfec9c..0e9657a395 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';
 
 const emit = defineEmits(['update:fields']);
@@ -11,6 +12,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([]);
@@ -45,12 +48,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),
     }));
 });
 
@@ -59,6 +71,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 ce4297eead..8a492c874f 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 1ccafb67b9..983e377f78 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 0000000000..cacea9a284
--- /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 667dceb30a..4254e63483 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">
+                    <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 c48557e708..643e9b69ad 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -3,10 +3,12 @@ import Layout from '@/pages/layout/Layout.vue';
 import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from './Layout.vue';
 import { Button, Header, Icon, StatusIndicator, ToggleGroup, ToggleItem } 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 LogicTree from './LogicTree.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, preferences } from '@api';
 import axios from 'axios';
@@ -30,6 +32,8 @@ watch(logicView, (view) => preferences.set(logicViewPreferenceKey, view));
 const treeDensityPreferenceKey = 'forms.logic.tree.density';
 const treeDensity = ref(preferences.get(treeDensityPreferenceKey, 'compressed'));
 watch(treeDensity, (density) => preferences.set(treeDensityPreferenceKey, density));
+const { showFieldNumbers } = useFieldNumberingPreference();
+const fieldNumbers = computed(() => buildFieldNumbersFromLogicFields(fields.value));
 const saving = ref(false);
 const saveBinding = ref(null);
 const errors = ref({});
@@ -121,7 +125,8 @@ onUnmounted(() => {
                 {{ form.title }}
             </template>
             <template #actions>
-                <div class="flex items-start gap-4">
+                <div class="flex items-start gap-2">
+                    <FieldNumberingToggle />
                     <ToggleGroup v-if="logicView === 'tree'" v-model="treeDensity" size="xs">
                         <ToggleItem
                             value="expanded"
@@ -157,6 +162,8 @@ onUnmounted(() => {
                 v-model:fields="fields"
                 :suggestable-fields
                 :fieldtypes
+                :show-field-numbers
+                :field-numbers
             />
         </template>
     </div>
@@ -166,6 +173,8 @@ onUnmounted(() => {
             :pages="pages"
             :fields="fields"
             :expanded="treeDensity === 'expanded'"
+            :show-field-numbers
+            :field-numbers
         />
     </div>
 </template>
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
index 87ba250fcd..d97526b823 100644
--- a/resources/js/pages/forms/LogicTree.vue
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -1,14 +1,26 @@
 <script setup>
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 import { Icon } from '@ui';
 import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
+import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { computed } from 'vue';
 
 const props = defineProps({
     pages: { type: Array, required: true },
     fields: { type: Array, required: true },
     expanded: { type: Boolean, default: false },
+    showFieldNumbers: { type: Boolean, default: false },
+    fieldNumbers: { type: Map, default: () => new Map() },
 });
 
+const fieldNumber = (field) => {
+    if (! props.showFieldNumbers) {
+        return null;
+    }
+
+    return fieldNumberFromMap(props.fieldNumbers, field.handle, field._id);
+};
+
 const pageAnchor = (pageIndex) => `--page-${pageIndex + 1}`;
 
 const groupPageFields = (pageFields) => pageFields.map((field) => ({ field }));
@@ -214,7 +226,10 @@ const fieldIconClass = (field) => {
                                     :class="['size-4 shrink-0', fieldIconClass(group.field)]"
                                     aria-hidden="true"
                                 />
-                                <span class="linked-list__field-name min-w-0 flex-1">{{ group.field.display }}</span>
+                                <span class="linked-list__field-name min-w-0 flex-1">
+                                    <FieldNumber :number="fieldNumber(group.field)" />
+                                    {{ group.field.display }}
+                                </span>
                                 <span
                                     v-if="group.field.type === 'reference'"
                                     v-tooltip="__('Linked Field')"

From 8309f6170ccd574a4fcd17339d8658088d036e8d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 14:10:25 +0100
Subject: [PATCH 76/79] Make number toggle button less floaty

---
 .../components/forms/FieldNumberingToggle.vue | 24 +++++++++++--------
 resources/js/pages/forms/Builder.vue          |  2 +-
 resources/js/pages/forms/Logic.vue            |  2 +-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/forms/FieldNumberingToggle.vue b/resources/js/components/forms/FieldNumberingToggle.vue
index d07bb41dde..641a152851 100644
--- a/resources/js/components/forms/FieldNumberingToggle.vue
+++ b/resources/js/components/forms/FieldNumberingToggle.vue
@@ -1,18 +1,22 @@
 <script setup>
-import { Button } from '@ui';
+import { ToggleGroup, ToggleItem } from '@ui';
 import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 
 const { showFieldNumbers } = useFieldNumberingPreference();
+
+const toggleFieldNumbers = () => {
+    showFieldNumbers.value = ! showFieldNumbers.value;
+};
 </script>
 
 <template>
-    <Button
-        size="xs"
-        icon="list-ol"
-        :variant="showFieldNumbers ? 'filled' : 'subtle'"
-        :aria-label="__('Show field numbers')"
-        :aria-pressed="showFieldNumbers"
-        v-tooltip="__('Show field numbers')"
-        @click="showFieldNumbers = !showFieldNumbers"
-    />
+    <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/pages/forms/Builder.vue b/resources/js/pages/forms/Builder.vue
index 4254e63483..3d714fe2eb 100644
--- a/resources/js/pages/forms/Builder.vue
+++ b/resources/js/pages/forms/Builder.vue
@@ -392,7 +392,7 @@ onUnmounted(() => {
                 {{ form.title }}
             </template>
             <template #actions>
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2.5">
                     <FieldNumberingToggle />
                     <ToggleGroup v-if="shouldShowViewSelector" v-model="fieldView" size="xs">
                     <ToggleItem
diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 643e9b69ad..55754b569f 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -125,7 +125,7 @@ onUnmounted(() => {
                 {{ form.title }}
             </template>
             <template #actions>
-                <div class="flex items-start gap-2">
+                <div class="flex items-start gap-2.5">
                     <FieldNumberingToggle />
                     <ToggleGroup v-if="logicView === 'tree'" v-model="treeDensity" size="xs">
                         <ToggleItem

From 8b3e4ca1ba52adae75e897e8c8c43761c762a30c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 14:59:41 +0100
Subject: [PATCH 77/79] Center buttons

---
 resources/js/pages/forms/Logic.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 55754b569f..c50512d213 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -125,7 +125,7 @@ onUnmounted(() => {
                 {{ form.title }}
             </template>
             <template #actions>
-                <div class="flex items-start gap-2.5">
+                <div class="flex items-center gap-2.5">
                     <FieldNumberingToggle />
                     <ToggleGroup v-if="logicView === 'tree'" v-model="treeDensity" size="xs">
                         <ToggleItem

From 0952bfef6b39906b1331899ae685ab0ca5c8e489 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Jun 2026 16:03:11 +0100
Subject: [PATCH 78/79] Revert "Temp unhide Pro"

This reverts commit 5472a6e34c220588ce91ec64c9e764632f72414d.
---
 src/Statamic.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Statamic.php b/src/Statamic.php
index 03afe4708b..7b0ce2bded 100644
--- a/src/Statamic.php
+++ b/src/Statamic.php
@@ -57,8 +57,7 @@ public static function enablePro()
 
     public static function formsProInstalled(): bool
     {
-        // return Composer::isInstalled('statamic/forms-pro');
-        return true;
+        return Composer::isInstalled('statamic/forms-pro');
     }
 
     public static function availableScripts(Request $request)

From d8fd09ae8de85bec777b0d61a94360457eb645bd Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Jun 2026 11:54:45 +0100
Subject: [PATCH 79/79] formatting

---
 src/Http/Controllers/CP/Forms/FormLogicController.php | 3 +--
 tests/Forms/Fieldtypes/FallbackTest.php               | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Http/Controllers/CP/Forms/FormLogicController.php b/src/Http/Controllers/CP/Forms/FormLogicController.php
index 963f927056..991c01f826 100644
--- a/src/Http/Controllers/CP/Forms/FormLogicController.php
+++ b/src/Http/Controllers/CP/Forms/FormLogicController.php
@@ -5,9 +5,8 @@
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 use Statamic\Contracts\Forms\Form;
-use Statamic\Forms\Fields\FormField;
-use Statamic\Forms\Fields\FormFieldtype;
 use Statamic\Facades\Fieldset as FieldsetRepository;
+use Statamic\Forms\Fields\FormField;
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Support\Arr;
 use Statamic\Support\Str;
diff --git a/tests/Forms/Fieldtypes/FallbackTest.php b/tests/Forms/Fieldtypes/FallbackTest.php
index c9bb70798e..e88ce84fd1 100644
--- a/tests/Forms/Fieldtypes/FallbackTest.php
+++ b/tests/Forms/Fieldtypes/FallbackTest.php
@@ -47,5 +47,4 @@ public function it_uses_the_equivalent_form_fieldtype_icon_when_one_exists()
 
         $this->assertEquals('text-long', $fallback->icon());
     }
-
 }