diff --git a/.gitignore b/.gitignore
index 714d6b65..d3c5b15e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+todo
 dist
 dist-ssr
 *.local
@@ -28,7 +29,4 @@ dist-ssr
 
 .playwright-cli
 .vitest-attachments
-todo
-
-# vitest-browser snapshot output — regenerated on every run, never check in.
-__screenshots__/
\ No newline at end of file
+todo
\ No newline at end of file
diff --git a/.yarnrc.yml b/.yarnrc.yml
index 3f8de620..a1ceb033 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -8,3 +8,5 @@ enableGlobalCache: false
 enableScripts: true
 
 nodeLinker: node-modules
+
+npmMinimalAgeGate: 0
diff --git a/package.json b/package.json
index 63489f43..8efcdfba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@anzusystems/common-admin",
-  "packageManager": "yarn@4.14.1",
+  "packageManager": "yarn@4.18.0",
   "files": [
     "dist",
     "src/eslint"
@@ -20,7 +20,7 @@
     "./eslint": "./src/eslint/plugin.mjs",
     "./*": "./*"
   },
-  "version": "1.47.0-beta.362",
+  "version": "1.47.0-beta.dev-1784059876",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "lint": "[ \"$*\" = \"--fix\" ] && yarn lint:fix || yarn ci",
     "lint:fix": "run-s --print-name lint:tsc format lint:oxlint:fix lint:eslint:fix lint:stylelint:fix",
     "lint:tsc": "NODE_OPTIONS=--max-old-space-size=4096 vue-tsc --build",
-    "lint:tsc:test": "NODE_OPTIONS=--max-old-space-size=4096 tsc --build tsconfig.test.json",
+    "lint:tsc:test": "NODE_OPTIONS=--max-old-space-size=4096 vue-tsc --build tsconfig.test.json",
     "lint:eslint": "eslint",
     "lint:eslint:fix": "eslint --fix",
     "lint:oxlint": "oxlint .",
@@ -57,65 +57,68 @@
   },
   "devDependencies": {
     "@anzusystems/common-admin": "workspace:*",
-    "@intlify/unplugin-vue-i18n": "^11.1.2",
+    "@intlify/unplugin-vue-i18n": "^11.2.4",
     "@kyvg/vue3-notification": "^3.4.2",
     "@mdi/font": "^7.4.47",
-    "@sentry/vue": "^10.50.0",
-    "@shikijs/vitepress-twoslash": "^4.0.2",
+    "@microsoft/api-extractor": "^7.58.12",
+    "@sentry/vue": "^10.70.0",
+    "@shikijs/vitepress-twoslash": "^4.4.3",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@tsconfig/node22": "^22.0.5",
-    "@types/node": "^24.12.2",
+    "@types/node": "^24.13.3",
     "@types/rusha": "^0.8.3",
     "@types/sortablejs": "^1.15.9",
     "@types/webfontloader": "^1.6.38",
-    "@vitejs/plugin-vue": "^6.0.6",
-    "@vitest/browser": "^4.1.5",
-    "@vitest/browser-playwright": "^4.1.5",
-    "@vitest/ui": "^4.1.5",
-    "@vue/eslint-config-typescript": "^14.7.0",
-    "@vue/language-server": "3.2.7",
-    "@vue/test-utils": "^2.4.9",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/ui": "^4.1.10",
+    "@vue/compiler-dom": "3.5.41",
+    "@vue/devtools-api": "^8.2.1",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "@vue/language-server": "3.3.9",
+    "@vue/test-utils": "^2.4.11",
     "@vue/tsconfig": "0.9.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^14.2.1",
-    "@vueuse/integrations": "^14.2.1",
-    "axios": "1.15.2",
+    "@vueuse/core": "14.4.0",
+    "@vueuse/integrations": "14.4.0",
+    "axios": "1.19.0",
     "cropperjs": "^1.6.2",
-    "dayjs": "1.11.20",
-    "eslint": "^10.2.1",
-    "eslint-plugin-oxlint": "1.62.0",
-    "eslint-plugin-vue": "10.9.0",
+    "dayjs": "1.11.21",
+    "eslint": "^10.8.1",
+    "eslint-plugin-oxlint": "1.78.0",
+    "eslint-plugin-vue": "10.10.0",
     "eslint-plugin-vuetify": "^2.7.2",
-    "npm-run-all2": "^8.0.4",
-    "oxfmt": "^0.47.0",
-    "oxlint": "1.62.0",
-    "pinia": "3.0.4",
-    "playwright": "^1.59.1",
-    "postcss": "^8.5.12",
+    "npm-run-all2": "^9.0.3",
+    "oxfmt": "^0.63.0",
+    "oxlint": "1.78.0",
+    "pinia": "4.0.2",
+    "playwright": "^1.62.1",
+    "postcss": "^8.5.26",
     "postcss-html": "^1.8.1",
     "postcss-prefix-selector": "^2.1.1",
     "rusha": "^0.8.14",
-    "sass": "1.99.0",
+    "sass": "1.102.0",
     "socket.io-client": "4.8.3",
     "sortablejs": "^1.15.7",
-    "stylelint": "17.9.1",
+    "stylelint": "17.14.1",
     "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard-scss": "^17.0.0",
     "typescript": "5.9.3",
-    "unplugin": "3.0.0",
-    "uuid": "^14.0.0",
-    "vite": "7.3.2",
-    "vite-plugin-dts": "4.5.4",
+    "unplugin": "3.3.0",
+    "unplugin-dts": "^1.0.3",
+    "uuid": "^14.0.1",
+    "vite": "7.3.6",
     "vite-plugin-vuetify": "^2.1.3",
     "vitepress": "1.6.4",
-    "vitest": "^4.1.5",
-    "vue": "3.5.33",
-    "vue-eslint-parser": "^10.4.0",
-    "vue-i18n": "11.4.0",
-    "vue-router": "5.0.6",
-    "vue-tsc": "3.2.7",
-    "vuetify": "4.0.6",
+    "vitest": "^4.1.10",
+    "vue": "3.5.41",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-i18n": "11.4.8",
+    "vue-router": "5.2.0",
+    "vue-tsc": "3.3.9",
+    "vuetify": "4.1.8",
     "webfontloader": "^1.6.28"
   },
   "peerDependencies": {
@@ -126,7 +129,7 @@
     "@vueuse/integrations": "^14.1.0",
     "axios": "^1.13.4",
     "dayjs": "^1.11.19",
-    "pinia": "^3.0.4",
+    "pinia": "^4.0.2",
     "socket.io-client": "^4.8.3",
     "unplugin": "^3.0.0",
     "vue": "^3.5.27",
diff --git a/src/components/buttons/action/AActionDeleteButton.vue b/src/components/buttons/action/AActionDeleteButton.vue
index dcf113a2..84e9ddda 100644
--- a/src/components/buttons/action/AActionDeleteButton.vue
+++ b/src/components/buttons/action/AActionDeleteButton.vue
@@ -22,6 +22,9 @@ const props = withDefaults(
     loading?: boolean
     color?: string | undefined
     size?: number
+    // When set, deleting acknowledges the unsaved-changes leave guard first, so the delete's follow-up
+    // navigation is not blocked by a now-meaningless "unsaved changes, really leave?" prompt. (BUG-08)
+    guard?: { acknowledge: () => void }
   }>(),
   {
     variant: 'icon',
@@ -38,6 +41,7 @@ const props = withDefaults(
     disableCloseAfterConfirm: false,
     color: undefined,
     size: 36,
+    guard: undefined,
   },
 )
 const emit = defineEmits<{
@@ -51,6 +55,7 @@ const onClick = (event: Event) => {
   dialog.value = true
 }
 const onConfirm = () => {
+  props.guard?.acknowledge()
   emit('deleteRecord')
   if (!props.disableCloseAfterConfirm) closeDialog()
 }
diff --git a/src/components/collab/composables/collabInit.ts b/src/components/collab/composables/collabInit.ts
index 51cae642..1da269ff 100644
--- a/src/components/collab/composables/collabInit.ts
+++ b/src/components/collab/composables/collabInit.ts
@@ -130,7 +130,19 @@ export function useCollabInit() {
         },
       )
       collabSocket.value.on('connect', async () => {
+        /* Memberships from before a reconnect are stale; the server does not re-announce them.
+         *
+         * The write claims behind them are deliberately left alone. Socket.io drops the
+         * acknowledgement of a packet it already put on the wire (`_clearAcks`), so one emitted
+         * before the reconnect can no longer land here — but it keeps the acknowledgement of a
+         * packet still in `sendBuffer`, which it delivers on this connection. Resetting the claims
+         * would discard exactly those: a join emitted while the socket was still connecting is
+         * flushed just before this handler runs, and its acknowledgement arrives a round trip
+         * later to find its claim gone. */
         collabRoomInfoState.clear()
+        // Without the reset a transient network error burns the flag and a later JWT
+        // expiration never triggers a token refresh.
+        authorizationReconnectTriggered = false
         const connectedBefore = collabConnected.value
         collabConnected.value = collabSocket.value?.connected ?? false
         if (!connectedBefore) {
@@ -146,7 +158,12 @@ export function useCollabInit() {
           return
         }
         collabConnected.value = collabSocket.value?.connected ?? false
-        logError(error, { level: 'error', message: 'Collab connect_error' })
+        // active === true means socket.io will reconnect on its own; only a permanent
+        // rejection is worth reporting.
+        if (collabSocket.value?.active) {
+          return
+        }
+        logError(error, { level: 'error', tags: { collabPhase: 'connectRejected' } })
       })
       collabSocket.value.on('disconnect', async (reason) => {
         collabRoomInfoState.forEach(
diff --git a/src/components/collab/composables/collabRoom.ts b/src/components/collab/composables/collabRoom.ts
index 6209a35f..66eb69f9 100644
--- a/src/components/collab/composables/collabRoom.ts
+++ b/src/components/collab/composables/collabRoom.ts
@@ -56,8 +56,13 @@ export function useCollabRoom(
   fetchCachedUsers: (() => Promisify<Promise<any>>) | undefined = undefined,
   disableAutoUnsubscribe = false,
 ) {
-  const { collabSocket, collabRoomInfoState, collabFieldDataBufferState, collabFieldLocksState } =
-    useCollabState()
+  const {
+    collabSocket,
+    collabRoomInfoState,
+    collabFieldDataBufferState,
+    collabFieldLocksState,
+    claimRoomInfoWrite,
+  } = useCollabState()
 
   const reconnectEventBus = useCollabReconnectEventBus()
   const unsubscribeCollabReconnectListener = ref<undefined | Fn>()
@@ -220,6 +225,9 @@ export function useCollabRoom(
 
   tryOnBeforeUnmount(() => {
     if (disableAutoUnsubscribe) return
+    if (isDefined(unsubscribeCollabReconnectListener.value)) {
+      unsubscribeCollabReconnectListener.value()
+    }
     if (isDefined(unsubscribeJoinRequestListener.value)) {
       unsubscribeJoinRequestListener.value()
     }
@@ -250,17 +258,21 @@ export function useCollabRoom(
 
   const subscribeCollabRoomInfo = () => {
     if (!collabOptions.value.enabled || isUndefined(collabSocket.value)) return
+    const isNewestWrite = claimRoomInfoWrite(room)
     collabSocket.value.emit('subscribeCollabRoomInfo', room, (response: CollabRoomInfoCallback) => {
+      if (!isNewestWrite()) return
       collabRoomInfoState.set(room, response.room)
     })
   }
 
   const unsubscribeCollabRoomInfo = () => {
     if (!collabOptions.value.enabled || isUndefined(collabSocket.value)) return
+    const isNewestWrite = claimRoomInfoWrite(room)
     collabSocket.value.emit(
       'unsubscribeCollabRoomInfo',
       room,
       (response: CollabRoomInfoCallback) => {
+        if (!isNewestWrite()) return
         collabRoomInfoState.set(room, response.room)
       },
     )
@@ -272,32 +284,65 @@ export function useCollabRoom(
     return new Promise((resolve, reject) => {
       if (!collabOptions.value.enabled || isUndefined(collabSocket.value))
         return reject(CollabAccessRoomStatus.Failed)
+      const isNewestWrite = claimRoomInfoWrite(room)
       collabSocket.value
         ?.timeout(5000)
         .emit('joinCollabRoom', room, options, (error, response: CollabAccessRoomCallbackTypes) => {
           if (error) {
+            markRoomInactiveOnFailedClaim()
+            /* No cleanup leave here, though a timed-out join can leave the server holding a
+             * membership this client never hears about: a leave is not tied to the join it cleans up,
+             * so it could remove the membership of a remount that succeeded in the meantime. Marking
+             * inactive keeps the failure on the safe side — the stale membership is released on
+             * disconnect. Closing it properly needs a generation the server can compare. */
             return void reject(CollabAccessRoomStatus.Failed)
           }
           if (isCollabSuccessAccessRoomCallback(response)) {
-            collabRoomInfoState.set(room, response.room)
+            if (isNewestWrite()) collabRoomInfoState.set(room, response.room)
             return void resolve(response.status)
           }
+          markRoomInactiveOnFailedClaim()
           return void reject(response.status)
         })
+
+      /**
+       * A failed claim writes nothing yet still suppresses older acknowledgements, so without this a
+       * failed join would keep showing the membership from before the leave. Recorded as an explicitly
+       * inactive room, never deleted: the mutation guards test `roomInfo && status === Inactive`, so a
+       * missing entry falls through and emits. Only while this claim is still the newest.
+       */
+      function markRoomInactiveOnFailedClaim() {
+        if (isNewestWrite()) collabRoomInfoState.set(room, createDefaultCollabRoomInfo())
+      }
     })
   }
 
-  const leaveCollabRoom = () => {
-    if (!collabOptions.value.enabled || isUndefined(collabSocket.value)) return
-    collabSocket.value.emit('leaveCollabRoom', room, (response: CollabAccessRoomCallbackTypes) => {
-      if (isCollabSuccessAccessRoomCallback(response)) {
-        collabRoomInfoState.set(room, response.room)
-      }
+  /**
+   * Resolves once the server has acknowledged the leave, so a caller that re-joins the same room can
+   * serialise the two. Never rejects: every existing caller invokes it without handling the result,
+   * mostly from unmount hooks. A missing ack resolves on the timeout rather than hanging.
+   */
+  const leaveCollabRoom = (): Promise<void> => {
+    return new Promise((resolve) => {
+      if (!collabOptions.value.enabled || isUndefined(collabSocket.value)) return void resolve()
+      const isNewestWrite = claimRoomInfoWrite(room)
+      collabSocket.value
+        ?.timeout(5000)
+        .emit('leaveCollabRoom', room, (error, response: CollabAccessRoomCallbackTypes) => {
+          if (!error && isNewestWrite() && isCollabSuccessAccessRoomCallback(response)) {
+            collabRoomInfoState.set(room, response.room)
+          }
+          resolve()
+        })
     })
   }
 
   const enteredCollabRoom = () => {
     if (!collabOptions.value.enabled || isUndefined(collabSocket.value)) return
+    /* Anything remembered from a previous stay in this room is a guess: the server answers with the
+     * locks it holds only when it holds some, so a lock released while this client was away produces
+     * no event and the field would read as locked until some later one arrives. */
+    collabFieldLocksState.set(room, new Map())
     collabSocket.value?.emit('enteredCollabRoom', room)
   }
 
diff --git a/src/components/collab/composables/collabState.ts b/src/components/collab/composables/collabState.ts
index f362179e..78ba36dc 100644
--- a/src/components/collab/composables/collabState.ts
+++ b/src/components/collab/composables/collabState.ts
@@ -18,6 +18,9 @@ const collabSocket: Ref<
   Socket<CollabServerToClientEvents, CollabClientToServerEvents> | undefined
 > = ref()
 const collabRoomInfoState = reactive(new Map<CollabRoom, CollabRoomInfo>())
+// Plain, not reactive: bookkeeping for the map above, nothing renders from it.
+let collabRoomInfoWriteCounter = 0
+const collabRoomInfoWriteSeq = new Map<CollabRoom, number>()
 const collabFieldLocksState = reactive(new Map<CollabRoom, Map<CollabFieldName, CollabFieldLock>>())
 const collabFieldDataBufferState = reactive(
   new Map<CollabRoom, Map<CollabFieldName, CollabFieldData>>(),
@@ -40,11 +43,29 @@ export function useCollabState() {
     return dataBuffer
   }
 
+  /**
+   * Call before emitting anything whose acknowledgement writes `collabRoomInfoState`, and let the
+   * returned predicate decide whether that write still applies.
+   *
+   * The server serialises join and leave per room only for the lifetime of its lease, so a leave that
+   * outruns it can acknowledge after a following join and mark a room inactive while the client is in
+   * it — after which the client goes quiet with nothing visible to show for it.
+   */
+  const claimRoomInfoWrite = (room: CollabRoom) => {
+    /* Global and never restarting, so a number is never handed out twice. Claims outlive a
+     * reconnect on purpose — see the `connect` handler in `collabInit.ts`. */
+    const seq = ++collabRoomInfoWriteCounter
+    collabRoomInfoWriteSeq.set(room, seq)
+
+    return () => collabRoomInfoWriteSeq.get(room) === seq
+  }
+
   return {
     collabReconnecting,
     collabConnected,
     collabSocket,
     collabRoomInfoState,
+    claimRoomInfoWrite,
     collabFieldLocksState,
     collabFieldDataBufferState,
     gatherBufferData,
diff --git a/src/components/createCachedChip.ts b/src/components/createCachedChip.ts
new file mode 100644
index 00000000..dc1dc5ff
--- /dev/null
+++ b/src/components/createCachedChip.ts
@@ -0,0 +1,66 @@
+import { type Component, defineComponent, h, type PropType } from 'vue'
+import ACachedChip from '@/components/ACachedChip.vue'
+import type { DocId, IntegerId } from '@/types/common'
+
+export type CachedChipId = null | undefined | IntegerId | DocId
+
+export interface CreateCachedChipOptions {
+  /**
+   * Composable returning the per-id cache getter — invoked inside the chip's
+   * setup so the backing cache store resolves in component scope. The `id`
+   * param is `any` to match `ACachedChip` and accept both numeric- and
+   * doc-id getters regardless of their exact parameter type.
+   */
+  useGetCachedFn: () => (id: any) => unknown
+  /** Named route the chip links to (e.g. `'/(cms)/desks/[id]'`). */
+  route: string
+  /** Dot-path into the cached entity for the chip label (e.g. `'name'`). */
+  displayTextPath: string
+  /** Static props baked onto every instance (e.g. a fixed `textOnly`). */
+  chipProps?: Record<string, unknown>
+  /** Component name for devtools / warnings. */
+  name?: string
+}
+
+/**
+ * Builds a cached-entity chip from a domain's cache composable + route, so each
+ * per-domain `CachedXChip.vue` collapses to a single factory call instead of a
+ * full SFC re-binding `ACachedChip`. Caller-passed attributes (`size`, `color`,
+ * `disable-click`, …) and slots fall through to `ACachedChip`.
+ *
+ * Use in an SFC's plain `<script lang="ts">` (not `setup`):
+ * ```ts
+ * export default createCachedChip({
+ *   useGetCachedFn: () => useCachedDesks().getCachedDesk,
+ *   route: '/(cms)/desks/[id]',
+ *   displayTextPath: 'name',
+ * })
+ * ```
+ */
+export function createCachedChip(options: CreateCachedChipOptions): Component {
+  return defineComponent({
+    name: options.name ?? 'CachedChip',
+    inheritAttrs: false,
+    // Vue skips type validation for null/undefined on non-required props, so a
+    // null id (the common "empty" case) won't warn despite the typed prop.
+    props: {
+      id: { type: [Number, String] as PropType<CachedChipId>, default: null },
+    },
+    setup(props, { attrs, slots }) {
+      const getCachedFn = options.useGetCachedFn()
+      return () =>
+        h(
+          ACachedChip,
+          {
+            id: props.id,
+            getCachedFn,
+            route: options.route,
+            displayTextPath: options.displayTextPath,
+            ...options.chipProps,
+            ...attrs,
+          },
+          slots,
+        )
+    },
+  })
+}
diff --git a/src/components/damImage/uploadQueue/components/ImageWidgetMultipleInner.vue b/src/components/damImage/uploadQueue/components/ImageWidgetMultipleInner.vue
index d7b7633d..1ec1038e 100644
--- a/src/components/damImage/uploadQueue/components/ImageWidgetMultipleInner.vue
+++ b/src/components/damImage/uploadQueue/components/ImageWidgetMultipleInner.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { DocId, IntegerId } from '@/types/common'
-import { computed, inject, nextTick, onMounted, ref, type ShallowRef, toRaw } from 'vue'
+import { computed, inject, onMounted, ref, type ShallowRef, toRaw } from 'vue'
 import { isNull, isString, isUndefined } from '@/utils/common'
 import type { UploadQueueKey } from '@/types/coreDam/UploadQueue'
 import type { DamConfigLicenceExtSystemReturnType } from '@/types/coreDam/DamConfig'
@@ -34,16 +34,8 @@ import { useAssetDetailStore } from '@/components/damImage/uploadQueue/composabl
 import { useCommonAdminCoreDamOptions } from '@/components/dam/assetSelect/composables/commonAdminCoreDamOptions'
 import type { ImageStoreItem } from '@/types/ImageAware'
 import { generateUUIDv1 } from '@/utils/generator'
-import {
-  CHOSEN_CLASS,
-  DRAG_CLASS,
-  GHOST_CLASS,
-  GROUP_CLASS,
-  HANDLE_CLASS,
-} from '@/components/sortable/sortableActions'
-import { useSortable, type UseSortableReturn } from '@vueuse/integrations/useSortable'
-import type { SortableEvent } from 'sortablejs'
-import { WIDGET_HTML_ID_PREFIX } from '@/components/sortable/sortableUtils'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import AImageWidgetSimple from '@/components/damImage/AImageWidgetSimple.vue'
 import { fetchAuthorListByIds } from '@/components/damImage/uploadQueue/api/authorApi'
 import { useI18n } from 'vue-i18n'
 import useVuelidate from '@vuelidate/core'
@@ -505,25 +497,23 @@ const removeItem = async (index: number) => {
   imageStore.removeImageByIndex(index)
 }
 
-const widgetEl = ref<HTMLElement | null>(null)
-const randomUuid = ref<string>(generateUUIDv1())
-const sortableInstance = ref<UseSortableReturn | null>(null)
-const forceRerender = ref(0)
 const limitDialogComponent = ref<InstanceType<typeof ImageWidgetMultipleLimitDialog> | null>(null)
 
-const widgetHtmlId = computed(() => {
-  return isUndefined(props.widgetIdentifierId)
-    ? WIDGET_HTML_ID_PREFIX + randomUuid.value
-    : props.widgetIdentifierId
+const editorMode = ref<'view' | 'reorder'>('view')
+
+// Required by the editor, but never invoked here — adds happen through the
+// upload / asset-select flow, not the editor's add button (which is hidden).
+const createImageStoreItem = (): ImageStoreItem => ({
+  key: generateUUIDv1(),
+  texts: { description: '', source: '' },
+  dam: { damId: '', licenceId: 0, regionPosition: 0, internal: false },
+  flags: { showSource: true, internal: false, overrideInternal: false },
+  position: 0,
+  damAuthors: [],
+  showDamAuthors: false,
+  assetId: undefined,
 })
 
-const forceRerenderWidgetHtml = () => {
-  forceRerender.value++
-  nextTick(() => {
-    initSortable()
-  })
-}
-
 const updateAllPositions = () => {
   let pos = 0
   images.value.forEach((image) => {
@@ -532,37 +522,19 @@ const updateAllPositions = () => {
   })
   imageStore.maxPosition = pos
 }
+
 const moveImagePositions = (from: number, to: number) => {
   if (to >= 0 && to < images.value.length) {
     const element = images.value.splice(from, 1)[0]
     images.value.splice(to, 0, element)
     updateAllPositions()
-    forceRerenderWidgetHtml()
   }
 }
 
-const initSortable = () => {
-  if (props.disableDraggable) return
-  if (!widgetEl.value) return
-  const nestedSortable = widgetEl.value.querySelector<HTMLElement>('.' + GROUP_CLASS)
-  if (!nestedSortable) return
-  sortableInstance.value = useSortable(nestedSortable, [], {
-    handle: '.' + HANDLE_CLASS,
-    ghostClass: GHOST_CLASS,
-    dragClass: DRAG_CLASS,
-    chosenClass: CHOSEN_CLASS,
-    onEnd: async (event: SortableEvent) => {
-      if (isUndefined(event.oldIndex) || isUndefined(event.newIndex)) return
-      moveImagePositions(event.oldIndex, event.newIndex)
-    },
-  })
+const onReorderApplied = () => {
+  updateAllPositions()
 }
 
-nextTick(() => {
-  widgetEl.value = document.querySelector('#' + widgetHtmlId.value)
-  initSortable()
-})
-
 defineExpose({
   saveImages,
 })
@@ -573,7 +545,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :id="widgetHtmlId">
+  <div>
     <h4
       v-if="label"
       class="font-weight-bold text-label-large"
@@ -639,28 +611,61 @@ onMounted(() => {
       class="position-relative w-100"
       style="min-height: 140px"
     >
-      <div
-        :key="forceRerender"
-        :class="GROUP_CLASS"
-        class="asset-list-tiles asset-list-tiles--thumbnail"
+      <ASortableListEditor
+        v-model="images"
+        v-model:mode="editorMode"
+        :factory="createImageStoreItem"
+        get-key="key"
+        position="position"
+        :show-add-button="false"
+        :show-delete-button="false"
+        :show-edit-button="false"
+        :disable-drag="disableDraggable"
+        @reorder-applied="onReorderApplied"
       >
-        <ImageWidgetMultipleItem
-          v-for="(image, index) in images"
-          :key="image.key"
-          :index="index"
-          :total-count="images.length"
-          :disable-draggable="disableDraggable"
-          :show-source-enabled="showSourceEnabled"
-          :source-label="sourceLabel"
-          :edit-asset-label="editAssetLabel"
-          :author-enabled="authorEnabled"
-          @edit-asset="onEditAsset"
-          @remove-item="removeItem"
-          @move-up="(i) => moveImagePositions(i, i - 1)"
-          @move-down="(i) => moveImagePositions(i, i + 1)"
-        />
-      </div>
+        <template #view-body>
+          <div class="asset-list-tiles asset-list-tiles--thumbnail a-sortable-widget__group">
+            <ImageWidgetMultipleItem
+              v-for="(image, index) in images"
+              :key="image.key"
+              :index="index"
+              :total-count="images.length"
+              :disable-draggable="disableDraggable"
+              :show-source-enabled="showSourceEnabled"
+              :source-label="sourceLabel"
+              :edit-asset-label="editAssetLabel"
+              :author-enabled="authorEnabled"
+              @edit-asset="onEditAsset"
+              @remove-item="removeItem"
+              @move-up="(i) => moveImagePositions(i, i - 1)"
+              @move-down="(i) => moveImagePositions(i, i + 1)"
+            />
+          </div>
+        </template>
+        <template #item-compact="{ raw }">
+          <div class="image-widget-multiple-reorder">
+            <div class="image-widget-multiple-reorder__thumb">
+              <AImageWidgetSimple
+                :model-value="raw.id"
+                :image="raw"
+              />
+            </div>
+            <div class="image-widget-multiple-reorder__meta">
+              <div class="image-widget-multiple-reorder__title">
+                {{ raw.texts?.description?.trim() || '—' }}
+              </div>
+              <div
+                v-if="raw.texts?.source"
+                class="image-widget-multiple-reorder__source"
+              >
+                {{ raw.texts.source }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </ASortableListEditor>
       <AImageDropzone
+        v-if="editorMode === 'view'"
         variant="fill"
         :hover-only="modelValue.length > 0 || images.length > 0"
         :accept="uploadAccept"
@@ -693,3 +698,67 @@ onMounted(() => {
     />
   </div>
 </template>
+
+<style lang="scss">
+.image-widget-multiple-reorder {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  min-height: 100px;
+  padding: 4px 0;
+
+  &__thumb {
+    flex: 0 0 auto;
+    width: 200px;
+    border-radius: 4px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  &__meta {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: rgb(var(--v-theme-on-surface));
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &__source {
+    font-size: 0.82rem;
+    color: rgb(var(--v-theme-on-surface) / 70%);
+    margin-top: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @media (width <= 600px) {
+    gap: 8px;
+    min-height: 72px;
+
+    &__thumb {
+      width: 80px;
+    }
+
+    &__source {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/components/damImage/uploadQueue/composables/damConfigState.ts b/src/components/damImage/uploadQueue/composables/damConfigState.ts
index 7eaa71c8..7fcc8da6 100644
--- a/src/components/damImage/uploadQueue/composables/damConfigState.ts
+++ b/src/components/damImage/uploadQueue/composables/damConfigState.ts
@@ -149,15 +149,31 @@ export function useDamConfigState(client: undefined | (() => AxiosInstance) = un
       }
       const promises = types.map((type) => fetchAssetCustomFormElements(client, extSystemId, type))
 
-      Promise.all(promises)
-        .then((responses) => {
-          if (
-            responses.length !== types.length ||
-            responses.some((response) => Object.keys(response).length < 1)
-          ) {
+      // allSettled: one unavailable type must not discard the successfully loaded ones.
+      Promise.allSettled(promises)
+        .then((results) => {
+          const loadedTypes: DamAssetTypeType[] = []
+          const loadedResponses: Awaited<{ data: CustomDataFormElement[] }>[] = []
+          const failedTypes: DamAssetTypeType[] = []
+
+          results.forEach((result, index) => {
+            if (result.status === 'fulfilled' && Object.keys(result.value).length > 0) {
+              loadedTypes.push(types[index])
+              loadedResponses.push(result.value)
+              return
+            }
+            failedTypes.push(types[index])
+          })
+
+          if (loadedTypes.length === 0 && types.length > 0) {
             throw new Error('Unable to load asset custom form config. Incorrect response body.')
           }
-          setDamConfigAssetCustomFormElements(responses, extSystemId, types)
+          setDamConfigAssetCustomFormElements(loadedResponses, extSystemId, loadedTypes)
+          if (failedTypes.length > 0) {
+            onConfigError(
+              new Error(`Unable to load asset custom form config for: ${failedTypes.join(', ')}.`),
+            )
+          }
           resolve(true)
         })
         .catch((err) => {
diff --git a/src/components/datetime/ADatetimePicker.vue b/src/components/datetime/ADatetimePicker.vue
index 196b6f30..4be10581 100644
--- a/src/components/datetime/ADatetimePicker.vue
+++ b/src/components/datetime/ADatetimePicker.vue
@@ -232,7 +232,14 @@ const onTextFieldBlur = () => {
       const modelDate = dayjs(props.modelValue, 'YYYY-MM-DDTHH:mm:ss.SSSSSSZ')
       if (modelDate.isValid()) seconds = modelDate.second()
     }
-    datetimeInternal.value = parsed.second(seconds)
+    const reparsed = parsed.second(seconds)
+    // A day click blurs this field before the picker emits, so re-assigning an unchanged datetime
+    // would push the stale date back into it. By second, as `lastMinuteMoment` holds ms at 999.
+    if (reparsed.isSame(toRaw(datetimeInternal.value), 'second')) {
+      textFieldValue.value = reparsed.format(displayFormat.value)
+    } else {
+      datetimeInternal.value = reparsed
+    }
     v$.value.textFieldValue.$touch()
     emit('blur')
     return
diff --git a/src/components/file/AFileDropzone.vue b/src/components/file/AFileDropzone.vue
index cdfbbb51..108fb590 100644
--- a/src/components/file/AFileDropzone.vue
+++ b/src/components/file/AFileDropzone.vue
@@ -106,11 +106,6 @@ $class-name-root: 'a-file-dropzone';
     border-radius: 5px;
   }
 
-  &--fill {
-    position: absolute !important;
-    inset: 0;
-  }
-
   &--bg {
     width: 100%;
   }
@@ -123,6 +118,12 @@ $class-name-root: 'a-file-dropzone';
 
   &--small {
     min-height: 70px;
+
+    .text {
+      font-size: 0.75rem;
+      line-height: 1.2;
+      padding: 4px;
+    }
   }
 
   &--default {
@@ -133,6 +134,12 @@ $class-name-root: 'a-file-dropzone';
     min-height: 210px;
   }
 
+  &--fill {
+    position: absolute !important;
+    inset: 0;
+    min-height: 40px;
+  }
+
   &--hover-only {
     display: none;
   }
diff --git a/src/components/flags/FlagSk.vue b/src/components/flags/FlagSk.vue
index 76868b82..59a42df2 100644
--- a/src/components/flags/FlagSk.vue
+++ b/src/components/flags/FlagSk.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
- /* eslint-disable @stylistic/max-len */
+/* eslint-disable @stylistic/max-len */
 </script>
 
 <template>
diff --git a/src/components/form/AFormValueObjectOptionsSelect.vue b/src/components/form/AFormValueObjectOptionsSelect.vue
index e4e886dc..82382252 100644
--- a/src/components/form/AFormValueObjectOptionsSelect.vue
+++ b/src/components/form/AFormValueObjectOptionsSelect.vue
@@ -2,7 +2,7 @@
 import { computed, inject, ref, watch } from 'vue'
 import { stringSplitOnFirstOccurrence } from '@/utils/string'
 import type { ErrorObject } from '@vuelidate/core'
-import { cloneDeep, isDefined, isUndefined } from '@/utils/common'
+import { cloneDeep, isDefined, isNull, isUndefined } from '@/utils/common'
 import { SubjectScopeSymbol, SystemScopeSymbol } from '@/components/injectionKeys'
 import { useI18n } from 'vue-i18n'
 import ACollabLockedByUser from '@/components/collab/components/ACollabLockedByUser.vue'
@@ -26,6 +26,7 @@ const props = withDefaults(
     dataCy?: string
     collab?: CollabComponentConfig
     disabled?: boolean
+    readonly?: boolean
   }>(),
   {
     label: undefined,
@@ -39,6 +40,7 @@ const props = withDefaults(
     dataCy: '',
     collab: undefined,
     disabled: undefined,
+    readonly: undefined,
   },
 )
 const emit = defineEmits<{
@@ -52,6 +54,8 @@ const modelValue = computed({
     return props.modelValue
   },
   set(newValue) {
+    // VAutocomplete drops the selection when its search text is emptied, emitting null even when not clearable
+    if (!props.clearable && !props.multiple && isNull(newValue) && !isNull(props.modelValue)) return
     emit('update:modelValue', cloneDeep<any>(newValue))
   },
 })
@@ -149,6 +153,7 @@ watch(
     item-value="value"
     :multiple="multipleComputedVuetifyTypeFix"
     :disabled="disabledComputed"
+    :readonly="readonly"
     :clearable="clearable"
     :error-messages="errorMessageComputed"
     :data-cy="dataCy"
diff --git a/src/composables/system/defineCached.ts b/src/composables/system/defineCached.ts
index f424e69e..ee4c1f2a 100644
--- a/src/composables/system/defineCached.ts
+++ b/src/composables/system/defineCached.ts
@@ -2,8 +2,13 @@ import { type Ref, ref } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import type { DocId, IntegerId } from '@/types/common'
 import { isArray, isNull, isUndefined } from '@/utils/common'
+import { useSentry } from '@/services/sentry'
 
-export type CachedItem<T extends object> = T & { _loaded: boolean }
+/**
+ * `_unresolved` is terminal: the fetch settled without resolving the item, either because
+ * it failed or because the server did not return it.
+ */
+export type CachedItem<T extends object> = T & { _loaded: boolean; _unresolved?: boolean }
 
 export type AddToCachedArgs<T extends DocId | IntegerId> =
   | Array<T | null | undefined>
@@ -27,6 +32,13 @@ export function defineCached<
 ) {
   const cache: Ref<Map<I, CachedItem<M>>> = ref(new Map())
   const toFetch = ref(new Set()) as Ref<Set<I>>
+  const { logError } = useSentry()
+
+  /** Unresolved items are re-queued on the next `add()`, never retried from the queue itself. */
+  const isCached = (id: I) => {
+    const item = cache.value.get(id)
+    return !isUndefined(item) && item._unresolved !== true
+  }
 
   const add = (...args: AddToCachedArgs<I>) => {
     const toAdd = <Set<I>>new Set()
@@ -37,12 +49,14 @@ export function defineCached<
         for (let j = 0; j < arg.length; j++) {
           const item = arg[j]
           if (isNull(item) || isUndefined(item)) continue
-          if (!cache.value.has(item)) toAdd.add(item)
+          if (!isCached(item)) toAdd.add(item)
         }
         continue
       }
-      if (!cache.value.has(arg)) toAdd.add(arg)
+      if (!isCached(arg)) toAdd.add(arg)
     }
+    if (toAdd.size === 0) return
+    prune(toAdd)
     toAdd.forEach((id) => {
       cache.value.set(id, {
         ...mapIdToMinimal(id),
@@ -70,14 +84,32 @@ export function defineCached<
     }
   }
 
-  const updateMap = (data: T[]) => {
-    if (cache.value.size >= maxLimit) {
-      for (const [key, value] of cache.value) {
-        if (value._loaded) {
-          cache.value.delete(key)
-        }
+  /**
+   * Drops only as many oldest terminal entries as the overflow requires; dropping every one
+   * of them would send currently rendered chips back to their loading state.
+   * Must include `_unresolved`, otherwise repeated failures grow the cache past `maxLimit`.
+   */
+  const prune = (protectedIds?: Set<I>) => {
+    let incoming = 0
+    if (protectedIds) {
+      // Re-queued unresolved ids are already in the cache and do not grow it.
+      for (const id of protectedIds) if (!cache.value.has(id)) incoming += 1
+    }
+    const overflow = cache.value.size + incoming - maxLimit
+    if (overflow <= 0) return
+    let removed = 0
+    for (const [key, value] of cache.value) {
+      if (removed >= overflow) break
+      if (protectedIds?.has(key)) continue
+      if (value._loaded || value._unresolved) {
+        cache.value.delete(key)
+        removed += 1
       }
     }
+  }
+
+  const updateMap = (data: T[]) => {
+    prune()
     for (let i = 0; i < data.length; i += 1) {
       cache.value.set(data[i][idProp] as I, {
         ...mapFullToMinimal(data[i]),
@@ -92,20 +124,42 @@ export function defineCached<
     }
   }
 
+  const markUnresolved = (ids: Array<I>) => {
+    for (let i = 0; i < ids.length; i += 1) {
+      const item = cache.value.get(ids[i])
+      if (isUndefined(item) || item._loaded) continue
+      cache.value.set(ids[i], { ...item, _unresolved: true })
+    }
+  }
+
   async function apiFetch() {
-    if (toFetch.value.size > 0) {
-      const ids = Array.from(toFetch.value)
+    if (toFetch.value.size === 0) return []
+    const ids = Array.from(toFetch.value)
+    try {
       const res = await fetchCallback(ids)
-      updateToFetch(ids)
       updateMap(res)
       return res
+    } finally {
+      // Always drain, otherwise a failing batch is resent on every subsequent fetch().
+      updateToFetch(ids)
+      markUnresolved(ids)
     }
-    return []
   }
 
+  // Caught inside the debounced callback, not on the promise it returns: the maxWait timer
+  // is a second invocation path whose promise never reaches the caller, so a rejection
+  // there would escape as an unhandled rejection.
   const debouncedFetch = useDebounceFn(
     async () => {
-      return await apiFetch()
+      try {
+        return await apiFetch()
+      } catch (error: unknown) {
+        logError(error instanceof Error ? error : new Error(String(error)), {
+          level: 'warning',
+          tags: { cachedFetch: 'failed' },
+        })
+        return [] as T[]
+      }
     },
     1500,
     { maxWait: 5000 },
@@ -114,6 +168,8 @@ export function defineCached<
   /**
    * Debounced fetch for best performance.
    * For general usage.
+   *
+   * Called fire-and-forget, so it never rejects. Use `immediateFetch()` to handle errors.
    */
   const fetch = () => {
     return debouncedFetch()
@@ -148,6 +204,12 @@ export function defineCached<
     return item._loaded
   }
 
+  /** Terminal counterpart of `isLoaded`: the fetch settled without resolving the item. */
+  const isUnresolved = (id: I | null | undefined): boolean => {
+    if (!id) return false
+    return cache.value.get(id)?._unresolved === true
+  }
+
   return {
     cache,
     toFetch,
@@ -160,5 +222,6 @@ export function defineCached<
     get,
     clear,
     isLoaded,
+    isUnresolved,
   }
 }
diff --git a/src/composables/system/useCachedItem.ts b/src/composables/system/useCachedItem.ts
index 5969422a..a0f2318a 100644
--- a/src/composables/system/useCachedItem.ts
+++ b/src/composables/system/useCachedItem.ts
@@ -1,22 +1,15 @@
-import { type ShallowRef, nextTick, shallowRef, watch } from 'vue'
-import { isUndefined } from '@/utils/common'
+import { type ComputedRef, computed } from 'vue'
 
-export function useCachedItem<T extends { _loaded?: boolean }>(
+export function useCachedItem<T extends { _loaded?: boolean; _unresolved?: boolean }>(
   getter: () => T | undefined,
-): { cached: ShallowRef<T | undefined>; loaded: ShallowRef<boolean> } {
-  const cached = shallowRef<T | undefined>(undefined) as ShallowRef<T | undefined>
-  const loaded = shallowRef(false)
-
-  const stopWatch = watch(
-    getter,
-    (newValue) => {
-      if (isUndefined(newValue) || newValue._loaded === false) return
-      cached.value = newValue
-      loaded.value = true
-      nextTick(() => stopWatch())
-    },
-    { immediate: true },
-  )
+): { cached: ComputedRef<T | undefined>; loaded: ComputedRef<boolean> } {
+  const cached = computed<T | undefined>(() => {
+    const value = getter()
+    if (!value) return undefined
+    // `_unresolved` is terminal: return the placeholder so consumers stop showing a spinner.
+    return value._loaded !== false || value._unresolved === true ? value : undefined
+  })
+  const loaded = computed(() => cached.value !== undefined)
 
   return { cached, loaded }
 }
diff --git a/src/labs.ts b/src/labs.ts
index 15a9439c..5694200d 100644
--- a/src/labs.ts
+++ b/src/labs.ts
@@ -3,12 +3,15 @@ import AFilterDatetimePicker from '@/labs/filters/AFilterDatetimePicker.vue'
 import AFilterInteger from '@/labs/filters/AFilterInteger.vue'
 import AFilterRemoteAutocomplete from '@/labs/filters/AFilterRemoteAutocomplete.vue'
 import AFormRemoteAutocomplete from '@/labs/form/AFormRemoteAutocomplete.vue'
+import AFormRemoteAutocompleteWithCached from '@/labs/form/AFormRemoteAutocompleteWithCached.vue'
 import AFilterRemoteAutocompleteWithMinimal from '@/labs/filters/AFilterRemoteAutocompleteWithMinimal.vue'
 import AFilterString from '@/labs/filters/AFilterString.vue'
 import AFilterTimeInterval from '@/labs/filters/AFilterTimeInterval.vue'
 import AFilterValueObjectOptionsSelect from '@/labs/filters/AFilterValueObjectOptionsSelect.vue'
 import AFilterWrapper from '@/labs/filters/AFilterWrapper.vue'
+import AFilterWrapperSidebar from '@/labs/filters/AFilterWrapperSidebar.vue'
 import AFilterWrapperSubjectSelect from '@/labs/subjectSelect/AFilterWrapperSubjectSelect.vue'
+import FiltersSelected from '@/labs/filters/FiltersSelected.vue'
 import ADatatableOrdering from '@/labs/filters/ADatatableOrdering.vue'
 import ADatatablePagination from '@/labs/filters/ADatatablePagination.vue'
 import { useApiFetchByIds } from '@/labs/api/useApiFetchByIds'
@@ -47,15 +50,43 @@ import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
 import ANestedSortableListEditor from '@/labs/listEditor/ANestedSortableListEditor.vue'
 import AUnsavedConfirmDialog from '@/labs/unsavedGuard/AUnsavedConfirmDialog.vue'
 import { useUnsavedChangesGuard } from '@/labs/unsavedGuard/useUnsavedChangesGuard'
+import { useGuardedDelete } from '@/labs/unsavedGuard/useGuardedDelete'
 import {
-  useListEditor,
-  type ListEditorApi,
-} from '@/labs/listEditor/composables/useListEditor'
+  useUnsavedSection,
+  type UnsavedSectionDescriptor,
+  type UnsavedSectionSource,
+} from '@/labs/unsavedGuard/useUnsavedSection'
+import { useListEditor, type ListEditorApi } from '@/labs/listEditor/composables/useListEditor'
+import {
+  useListEditorController,
+  type ListEditorHandle,
+  type ExposedListEditorHandle,
+  type UseListEditorControllerOptions,
+  type ListEditorChanges,
+  type ListEditorValidationResult,
+  type GetKey,
+  type PositionOption,
+  type PositionStrategy,
+  type PositionAction,
+} from '@/labs/listEditor/composables/useListEditorController'
 import {
-  useListEditorItemValidation,
-  ListEditorValidationKey,
-  type ListEditorValidationRegistry,
-} from '@/labs/listEditor/composables/useListEditorItemValidation'
+  createListEditorStateScope,
+  provideListEditorStateScope,
+  useListEditorStateEntry,
+  useNestedListEditorStateEntry,
+  ListEditorStateScopeKey,
+  type ListEditorStateScope,
+  type ListEditorStateBindings,
+  type NestedListEditorStateBindings,
+  type ListEditorStateEntry,
+} from '@/labs/listEditor/composables/useListEditorStateScope'
+import {
+  renumberPositions,
+  sortByPosition,
+  sortByPositionDeep,
+  type RenumberPositionsOptions,
+} from '@/labs/listEditor/utils/positions'
+import { nextListEditorTempId } from '@/labs/listEditor/utils/tempId'
 import {
   useNestedUnsavedKeys,
   type UseNestedUnsavedKeysApi,
@@ -70,6 +101,13 @@ import {
   type NestedListEditorApi,
   type NestedViewItem,
 } from '@/labs/listEditor/composables/useNestedListEditor'
+import {
+  useNestedListEditorController,
+  type NestedListEditorHandle,
+  type ExposedNestedListEditorHandle,
+  type UseNestedListEditorControllerOptions,
+  type NestedListEditorChanges,
+} from '@/labs/listEditor/composables/useNestedListEditorController'
 import type {
   ListEditorKey,
   ListEditorValidationState,
@@ -99,7 +137,9 @@ import {
 export {
   // V2 FILTERS
   AFilterWrapper,
+  AFilterWrapperSidebar,
   AFilterWrapperSubjectSelect,
+  FiltersSelected,
   AFilterBooleanSelect,
   AFilterDatetimePicker,
   AFilterInteger,
@@ -116,6 +156,7 @@ export {
   ADatatablePagination,
   DatatablePaginationKey,
   AFormRemoteAutocomplete,
+  AFormRemoteAutocompleteWithCached,
   createFilter,
   createFilterStore,
   useFilterHelpers,
@@ -141,10 +182,35 @@ export {
   ANestedSortableListEditor,
   AUnsavedConfirmDialog,
   useUnsavedChangesGuard,
+  useGuardedDelete,
+  useUnsavedSection,
+  type UnsavedSectionDescriptor,
+  type UnsavedSectionSource,
   useListEditor,
-  useListEditorItemValidation,
-  ListEditorValidationKey,
-  type ListEditorValidationRegistry,
+  useListEditorController,
+  type ListEditorHandle,
+  type ExposedListEditorHandle,
+  type UseListEditorControllerOptions,
+  type ListEditorChanges,
+  type ListEditorValidationResult,
+  type GetKey,
+  type PositionOption,
+  type PositionStrategy,
+  type PositionAction,
+  createListEditorStateScope,
+  provideListEditorStateScope,
+  useListEditorStateEntry,
+  useNestedListEditorStateEntry,
+  ListEditorStateScopeKey,
+  type ListEditorStateScope,
+  type ListEditorStateBindings,
+  type NestedListEditorStateBindings,
+  type ListEditorStateEntry,
+  renumberPositions,
+  sortByPosition,
+  sortByPositionDeep,
+  type RenumberPositionsOptions,
+  nextListEditorTempId,
   useNestedUnsavedKeys,
   type UseNestedUnsavedKeysApi,
   type ReorderModeValue,
@@ -154,6 +220,11 @@ export {
   useNestedListEditor,
   type NestedListEditorApi,
   type NestedViewItem,
+  useNestedListEditorController,
+  type NestedListEditorHandle,
+  type ExposedNestedListEditorHandle,
+  type UseNestedListEditorControllerOptions,
+  type NestedListEditorChanges,
   type ListEditorKey,
   type ListEditorValidationState,
   type ListViewItem,
diff --git a/src/labs/filters/AFilterRemoteAutocomplete.vue b/src/labs/filters/AFilterRemoteAutocomplete.vue
index d155ca40..809d519d 100644
--- a/src/labs/filters/AFilterRemoteAutocomplete.vue
+++ b/src/labs/filters/AFilterRemoteAutocomplete.vue
@@ -197,6 +197,8 @@ const tryAutoFetch = async (mode: 'focus' | 'hover' | 'mounted') => {
       fetchedItems.value = res
     }
     prefetchCompleted.value = true
+  } catch (e) {
+    showErrorsDefault(e)
   } finally {
     loading.value = false
   }
diff --git a/src/labs/filters/AFilterValueObjectOptionsSelect.vue b/src/labs/filters/AFilterValueObjectOptionsSelect.vue
index 644a6576..a5468fc1 100644
--- a/src/labs/filters/AFilterValueObjectOptionsSelect.vue
+++ b/src/labs/filters/AFilterValueObjectOptionsSelect.vue
@@ -78,7 +78,10 @@ const clearField = () => {
 }
 
 const updateSelected = (newValue: AllowedFilterValues) => {
-  if (isArray(newValue) && newValue.length === 0) return
+  if (isArray(newValue) && newValue.length === 0) {
+    filterSelected.value.delete(props.name)
+    return
+  }
   if (isArray(newValue)) {
     filterSelected.value.set(
       props.name,
diff --git a/src/labs/filters/AFilterWrapperSidebar.vue b/src/labs/filters/AFilterWrapperSidebar.vue
new file mode 100644
index 00000000..9cd6b349
--- /dev/null
+++ b/src/labs/filters/AFilterWrapperSidebar.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { inject, provide, ref } from 'vue'
+import {
+  FilterConfigKey,
+  FilterDataKey,
+  FilterSelectedKey,
+  FilterSubmitResetCounterKey,
+} from '@/labs/filters/filterInjectionKeys'
+import type { ValueObjectOption } from '@/types/ValueObject'
+import { isUndefined } from '@/utils/common'
+import { useFilterClearHelpers } from '@/labs/filters/filterFactory'
+
+withDefaults(
+  defineProps<{
+    formName?: string
+  }>(),
+  {
+    formName: 'search',
+  },
+)
+const emit = defineEmits<{
+  (e: 'submit'): void
+}>()
+
+const filterConfig = inject(FilterConfigKey)
+const filterData = inject(FilterDataKey)
+if (isUndefined(filterConfig) || isUndefined(filterData)) {
+  throw new Error('Incorrect provide/inject config.')
+}
+
+provide(FilterSubmitResetCounterKey, ref(0))
+const filterSelected = ref<Map<string, ValueObjectOption<string | number>[]>>(new Map())
+provide(FilterSelectedKey, filterSelected)
+
+const { clearAll, clearAllFilterSelected } = useFilterClearHelpers()
+
+const submitFilter = () => {
+  emit('submit')
+}
+
+// AFilterWrapperSidebar has no reset button of its own (the consumer renders it, e.g. in the drawer
+// footer). Expose the same reset AFilterWrapper does so that button also clears the filter values and
+// the selected-filter chips.
+const resetFilter = () => {
+  clearAll(filterData, filterConfig)
+  clearAllFilterSelected(filterData, filterConfig, filterSelected)
+}
+
+defineExpose({ resetFilter })
+</script>
+
+<template>
+  <VForm
+    :name="formName"
+    @submit.prevent="submitFilter"
+    @keyup.enter="submitFilter"
+  >
+    <slot />
+  </VForm>
+</template>
diff --git a/src/labs/filters/FiltersSelected.vue b/src/labs/filters/FiltersSelected.vue
index 9fccd4e0..8d145a70 100644
--- a/src/labs/filters/FiltersSelected.vue
+++ b/src/labs/filters/FiltersSelected.vue
@@ -28,6 +28,7 @@ const getTitleFromConfig = (name: string) => {
 const selectedArray = computed(() => {
   const fieldOrder = Object.keys(filterConfig.fields)
   return Array.from(filterSelected.value)
+    .filter(([key]) => filterConfig.fields?.[key]?.render?.selected !== false)
     .map(([key, valueArray]) => ({
       name: key,
       title: getTitleFromConfig(key),
@@ -123,4 +124,14 @@ const clickClose = (name: string, optionValue: number | string) => {
     transition: opacity 0.2s;
   }
 }
+
+// Values above are hardcoded light, which renders white-on-white in dark theme.
+.v-theme--dark .a-selected-filters {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+
+  .a-selected-filters__chip {
+    background: rgb(var(--v-theme-on-surface), 0.16);
+    color: rgb(var(--v-theme-on-surface));
+  }
+}
 </style>
diff --git a/src/labs/filters/filterFactory.ts b/src/labs/filters/filterFactory.ts
index ccbf12f7..e44a4037 100644
--- a/src/labs/filters/filterFactory.ts
+++ b/src/labs/filters/filterFactory.ts
@@ -24,6 +24,7 @@ const SORT_URL_PARAM = '_sort'
 
 const defaultRenderOptions: FilerRenderOptions = {
   skip: false,
+  selected: true,
   xs: undefined,
   sm: undefined,
   md: undefined,
@@ -446,6 +447,9 @@ export interface GeneralFilterOptions {
 
 export interface FilerRenderOptions {
   skip: boolean
+  // Whether the field is shown as a selected-filter chip (FiltersSelected). Default true.
+  // Optional for backward compatibility (other admins may construct FilerRenderOptions).
+  selected?: boolean
   xs: number | undefined
   sm: number | undefined
   md: number | undefined
diff --git a/src/labs/form/AFormRemoteAutocomplete.vue b/src/labs/form/AFormRemoteAutocomplete.vue
index 9f323a50..a15f8a94 100644
--- a/src/labs/form/AFormRemoteAutocomplete.vue
+++ b/src/labs/form/AFormRemoteAutocomplete.vue
@@ -241,6 +241,9 @@ const loadListItems = async (ids: T[] | T) => {
     modelValueSelected.value = selectedNewValue
     modelValueAutocomplete.value = selectedNewValue
     return selectedItemsCache.value
+  } catch (e) {
+    // Mirror tryLoadModelValue: don't let a failed by-ids resolve become a generic global toast (QA 85050).
+    showErrorsDefault(e)
   } finally {
     loadingLocal.value = false
   }
@@ -316,6 +319,8 @@ const tryAutoFetch = async (
       }
     }
     prefetchCompleted.value = true
+  } catch (e) {
+    showErrorsDefault(e)
   } finally {
     loadingLocal.value = false
   }
diff --git a/src/labs/listEditor/AListEditor.vue b/src/labs/listEditor/AListEditor.vue
index 75dce1a1..e1099298 100644
--- a/src/labs/listEditor/AListEditor.vue
+++ b/src/labs/listEditor/AListEditor.vue
@@ -3,21 +3,34 @@ import { computed, ref, useSlots, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
 import { useKeyboardNav } from '@/labs/listEditor/composables/useKeyboardNav'
-import { useValidationRegistry } from '@/labs/listEditor/composables/useValidationRegistry'
-import { useListEditor } from '@/labs/listEditor/composables/useListEditor'
+import {
+  useListEditorController,
+  type GetKey,
+  type ListEditorHandle,
+  type ListEditorValidationResult,
+  type PositionAction,
+  type PositionOption,
+  type PositionStrategy,
+} from '@/labs/listEditor/composables/useListEditorController'
+import {
+  provideListEditorStateScope,
+  useListEditorStateEntry,
+  type ListEditorStateBindings,
+} from '@/labs/listEditor/composables/useListEditorStateScope'
 import { resolveCompactText as resolveCompactTextUtil } from '@/labs/listEditor/composables/resolveCompactText'
-import { useUnsavedKeysSync } from '@/labs/listEditor/composables/useUnsavedKeysSync'
-import { useDirtyBaseline } from '@/labs/listEditor/composables/useDirtyBaseline'
+import { useUnsavedSection } from '@/labs/unsavedGuard/useUnsavedSection'
 import { useDeleteDialog } from '@/labs/listEditor/composables/useDeleteDialog'
 import { useInlineEditing } from '@/labs/listEditor/composables/useInlineEditing'
+import { validateAllAndReveal } from '@/labs/listEditor/utils/revealInvalidRows'
+import { useListEditorScopeValidity } from '@/labs/listEditor/composables/useListEditorScopeValidity'
 import LeDeleteDialog from '@/labs/listEditor/internal/LeDeleteDialog.vue'
 import LeEmptyState from '@/labs/listEditor/internal/LeEmptyState.vue'
 import LeUnsavedLabel from '@/labs/listEditor/internal/LeUnsavedLabel.vue'
 import type {
   ListEditorKey,
+  ListEditorValidationScope,
   ListEditorValidationState,
   ListViewItem,
-  PositionHint,
 } from '@/labs/listEditor/types/listEditorTypes'
 
 export interface DecoratedViewItem<T> extends ListViewItem<T> {
@@ -25,12 +38,11 @@ export interface DecoratedViewItem<T> extends ListViewItem<T> {
   expanded: boolean
   loading: boolean
   dirty: boolean
+  unsaved: boolean
+  validationState: ListEditorValidationState
 }
 
-// Public slot scope shapes — mirror what `buildSlotProps(vi)` actually emits.
-// Hoisted to the top-level so vite-plugin-dts can include them in the .d.ts;
-// putting them after `defineProps`/`defineEmits` would emit `private name`
-// errors during d.ts rollup.
+// Hoisted for vite-plugin-dts d.ts rollup.
 export interface RowActions<TItem> {
   edit: () => void
   save: () => Promise<void> | void
@@ -39,10 +51,10 @@ export interface RowActions<TItem> {
   delete: () => Promise<void>
   addAfter: () => void
   toggleExpand: () => void
-  update: (data: TItem) => TItem[]
+  update: (next: TItem | Partial<TItem> | ((current: TItem) => TItem)) => void
 }
 export interface RowSlotProps<TItem extends Record<string, any>> {
-  item: DecoratedViewItem<TItem> & { validationState: ListEditorValidationState }
+  item: DecoratedViewItem<TItem>
   raw: TItem
   index: number
   key: ListEditorKey
@@ -51,13 +63,16 @@ export interface RowSlotProps<TItem extends Record<string, any>> {
   expanded: boolean
   editing: boolean
   dirty: boolean
-  /**
-   * Aliases `dirty` on the flat editor (no reorder mode → no `moved` to OR
-   * with). Mirrors the field name on the sortable + nested variants so a
-   * consumer slot template can use the same name across all three editors.
-   */
+  /** Aliases `dirty` here (no reorder mode → no `moved` to OR). Same field name as on sortable/nested variants. */
   unsaved: boolean
   touch: boolean
+  /**
+   * Row-scoped `state-key` prefix. Thread it down to any list editor rendered in this slot and set
+   * its `:state-key="`${stateKeyPrefix}:someList`"` — that editor's controller then lives in THIS
+   * editor's scope and survives the row collapsing (which unmounts the whole slot subtree). Entries
+   * under this prefix are disposed when the row is removed.
+   */
+  stateKeyPrefix: string
   actions: RowActions<TItem>
 }
 export interface EmptySlotProps {
@@ -76,10 +91,64 @@ export interface HeaderSlotProps {
 }
 
 export interface Props<TItem extends Record<string, any>> {
-  keyField?: string
-  positionField?: string
-  positionMultiplier?: number
-  updatePosition?: boolean
+  /**
+   * New-row factory. Add / "add after" insert `factory()` through the controller
+   * (positions renumbered) — no consumer `@add` push handler is needed.
+   */
+  factory?: () => TItem
+  /**
+   * Stable row identity. Default `'id'`; never the position field. Typed `string`
+   * not `keyof TItem` because the latter compiles to a Boolean-only runtime prop
+   * type that silently coerces `get-key="id"` to `true`.
+   */
+  getKey?: string | ((item: TItem) => ListEditorKey)
+  /**
+   * Managed order field. Default `'position'`; `false` opts out. `string` must be
+   * listed before `false` (and not be `keyof TItem`): otherwise Vue's runtime
+   * type goes Boolean-first and coerces `position="position"` to `true`.
+   */
+  position?:
+    | string
+    | false
+    | {
+        field: string
+        multiplier?: number
+        strategy?: PositionStrategy
+        strategyOverrides?: Partial<Record<PositionAction, PositionStrategy>>
+      }
+  /**
+   * Extra fields to drop from the dirty content-hash (position is always dropped).
+   * Use when a SEPARATE nested editor already tracks a child collection, so editing
+   * a child doesn't flip the parent row amber. Still saved; only the diff ignores it.
+   */
+  dirtyExclude?: string[]
+  /** Per-row validity — `true` (or `{ valid: true }`) = VALID. Drives the red rail + save guard. */
+  validate?: (item: TItem) => ListEditorValidationResult
+  /**
+   * Vuelidate `$scope` (the same one the consumer's row forms / save-gate collector use). When set,
+   * the editor registers its aggregate validity under it, so a plain `v$.$invalid` save gate blocks
+   * AND reveals a collapsed invalid row — no `validateAll()` call needed in the save flow. Omit to
+   * keep legacy behavior (gate the save on the exposed `validateAll()` yourself); `false` opts out.
+   */
+  validationScope?: ListEditorValidationScope | false
+  /**
+   * Opt-in lifted controller from `useListEditorController()` — pass it so editor
+   * state survives this component's unmount/remount. Omitted: the editor owns one
+   * internally. Either way the `ListEditorHandle` is reachable via `useTemplateRef`.
+   */
+  editor?: ListEditorHandle<TItem>
+  /**
+   * Persist this editor's controller in the nearest ANCESTOR editor's row-state scope under this
+   * key, instead of owning it. Use it for an editor rendered in another editor's `#item` slot: that
+   * slot is behind a `v-if`, so collapsing the row unmounts this editor and a component-owned
+   * controller would re-baseline the already-edited data on re-expand (losing amber, tombstones and
+   * the red rail). Derive the key from the row slot's `stateKeyPrefix`, e.g.
+   * `:state-key="`${stateKeyPrefix}:adverts`"`. Options stay declared here, on this tag: the
+   * controller is built from THIS editor's `factory`/`get-key`/`position`/`dirty-exclude`/`validate`
+   * and rebound to each new instance's model on remount. Ignored when `:editor` is passed, and a
+   * no-op without an ancestor scope.
+   */
+  stateKey?: string
 
   readonly?: boolean
   disabled?: boolean
@@ -100,33 +169,51 @@ export interface Props<TItem extends Record<string, any>> {
 
   addLabel?: string | null
   emptyTitle?: string | null
-  emptyText?: string | null
 
   disableRowClick?: boolean
   disableDeleteConfirm?: boolean
+  /** Disable unsaved-state tracking — no dirty markers, never reads as unsaved. */
+  disableUnsaved?: boolean
   deleteConfirmTitle?: string | null
   deleteConfirmText?: string | null
+  /**
+   * How a row delete persists. `deferred` (default): the row disappears but the deletion counts as an
+   * unconfirmed change (`unsavedCount`) until save, and is revertible until then. `immediate`: the
+   * consumer deletes on the backend (`:on-delete`) — the dialog states it is irreversible and the
+   * delete does NOT read as unsaved.
+   */
+  deleteMode?: 'immediate' | 'deferred'
 
   closeVariant?: 'auto' | 'icon' | 'labeled'
 
-  loadingKeys?: Set<ListEditorKey> | null
+  /**
+   * Render every `#item` slot expanded — no edit pencil, inline footer, or row-click
+   * toggle. Use when all forms should be visible at once (e.g. ThirdPartyTracker).
+   */
+  defaultExpanded?: boolean
 
-  getValidationState?: (
-    item: TItem,
-    key: ListEditorKey,
-    index: number,
-  ) => ListEditorValidationState
+  loadingKeys?: Set<ListEditorKey> | null
 
   onDeleteConfirm?: (item: TItem) => Promise<boolean> | boolean
   onDelete?: (item: TItem) => Promise<void> | void
   onItemSave?: (item: TItem) => Promise<void> | void
+
+  /**
+   * Registers this editor as a named unsaved-changes section under this (already
+   * translated) label — replaces a per-consumer `useUnsavedSection` call.
+   */
+  unsavedSectionLabel?: string
 }
 
 const props = withDefaults(defineProps<Props<TItem>>(), {
-  keyField: 'id',
-  positionField: 'position',
-  positionMultiplier: 1,
-  updatePosition: false,
+  factory: undefined,
+  getKey: undefined,
+  position: undefined,
+  dirtyExclude: undefined,
+  validate: undefined,
+  validationScope: undefined,
+  editor: undefined,
+  stateKey: undefined,
   readonly: false,
   disabled: false,
   loading: false,
@@ -142,21 +229,22 @@ const props = withDefaults(defineProps<Props<TItem>>(), {
   showAddAfterAction: false,
   addLabel: null,
   emptyTitle: null,
-  emptyText: null,
   disableRowClick: false,
   disableDeleteConfirm: false,
+  disableUnsaved: false,
   deleteConfirmTitle: null,
   deleteConfirmText: null,
+  deleteMode: 'deferred',
   closeVariant: 'auto',
+  defaultExpanded: false,
   loadingKeys: null,
-  getValidationState: undefined,
   onDeleteConfirm: undefined,
   onDelete: undefined,
   onItemSave: undefined,
+  unsavedSectionLabel: undefined,
 })
 
 const emit = defineEmits<{
-  add: [positionHint: PositionHint | undefined]
   edit: [item: ListViewItem<TItem>]
   deleted: [item: ListViewItem<TItem>]
   close: [item: ListViewItem<TItem>]
@@ -188,15 +276,108 @@ const rootEl = useTemplateRef<HTMLElement>('rootEl')
 
 const isTouch = computed<boolean>(() => display.platform.value.touch)
 
-// Options are captured once at setup; list-editor config is expected to be stable.
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-const editor = useListEditor<TItem>(modelValue, {
-  keyField: props.keyField,
-  positionField: props.positionField,
-  positionMultiplier: props.positionMultiplier,
-  updatePosition: props.updatePosition,
+// State controller (v2). `factory`/`getKey`/`position`/`validate` are construction-time options read
+// once to seed it (undefined → controller defaults 'id'/'position'/always-valid), not reactive props
+// — so the reactivity-loss rule is intentionally suppressed here.
+/* eslint-disable vue/no-setup-props-reactivity-loss */
+const controllerOptions: ListEditorStateBindings<TItem> = {
+  get: () => modelValue.value,
+  set: (v) => (modelValue.value = v),
+  factory: props.factory,
+  getKey: props.getKey as GetKey<TItem> | undefined,
+  position: props.position as PositionOption<TItem> | undefined,
+  dirtyExclude: () => props.dirtyExclude ?? [],
+  validate: props.validate,
+}
+// Precedence: an explicitly lifted `:editor` wins; then a `state-key`'d entry persisted in the
+// nearest ancestor editor's row-state scope (built from the options above, rebound to this instance
+// on every remount); else this component owns the controller — today's behaviour, unchanged.
+const stateEntry = props.editor
+  ? null
+  : useListEditorStateEntry<TItem>(props.stateKey, controllerOptions)
+const controller =
+  props.editor ?? stateEntry?.handle ?? useListEditorController<TItem>(controllerOptions)
+
+// Mirror the controller's key resolution so rendered rows key the way it tracks them.
+const getKeyOpt = props.getKey ?? 'id'
+/* eslint-enable vue/no-setup-props-reactivity-loss */
+
+// Row-state scope for THIS editor's `#item` slot subtree: a nested editor with a `state-key` builds
+// its controller in here, so it outlives the row collapsing (which unmounts the slot). When this
+// editor is itself persisted, the scope comes from its own entry — so the chain holds at any depth.
+const rowStateScope = provideListEditorStateScope(stateEntry?.childScope ?? null)
+const keyOf = (item: TItem): ListEditorKey =>
+  typeof getKeyOpt === 'function'
+    ? getKeyOpt(item)
+    : (item[getKeyOpt as keyof TItem] as ListEditorKey)
+
+const keyFieldName = computed<string>(() =>
+  typeof getKeyOpt === 'function' ? '(fn)' : (getKeyOpt as string),
+)
+
+// Managed position field name, mirroring the controller's resolution.
+const positionFieldName = computed<string>(() => {
+  const p = props.position
+  if (p === undefined) return 'position'
+  if (p === false) return 'position'
+  if (typeof p === 'object') return p.field as string
+  return p as string
 })
 
+// Render projection only — the controller owns the data (key + index + raw + position).
+const viewItems = computed<ListViewItem<TItem>[]>(() =>
+  modelValue.value.map((raw, index) => ({
+    key: keyOf(raw),
+    index,
+    raw,
+    position: raw[positionFieldName.value] as number | undefined,
+  })),
+)
+
+// Surfaces row-key wiring bugs loudly: undefined or duplicate keys silently break
+// dirty tracking, validity rails and reorder targeting and are hard to trace from
+// symptoms. Deduped per signature so a stable bad state warns once, a new one again.
+const warnedKeySignatures = new Set<string>()
+const warnOnBadKeys = (items: ListViewItem<TItem>[]): void => {
+  const seen = new Set<ListEditorKey>()
+  const duplicates = new Set<string>()
+  let missing = 0
+  for (const vi of items) {
+    if (vi.key === undefined || vi.key === null) {
+      missing++
+      continue
+    }
+    if (seen.has(vi.key)) duplicates.add(String(vi.key))
+    seen.add(vi.key)
+  }
+  if (missing === 0 && duplicates.size === 0) return
+  const signature = `${missing}|${[...duplicates].sort().join(',')}`
+  if (warnedKeySignatures.has(signature)) return
+  warnedKeySignatures.add(signature)
+  if (missing > 0) {
+    console.warn(
+      `[list-editor] ${missing} row(s) resolve to an undefined key (key-field "${keyFieldName.value}"). ` +
+        'Point get-key at a field every item has, or give new items unique temp ids ' +
+        '(see nextListEditorTempId).',
+    )
+  }
+  if (duplicates.size > 0) {
+    console.warn(
+      `[list-editor] duplicate row keys (key-field "${keyFieldName.value}"): ${[...duplicates].join(', ')}. ` +
+        'Row keys must be unique — dirty tracking and validation rails target rows by key.',
+    )
+  }
+}
+watch(viewItems, (items) => warnOnBadKeys(items), { immediate: true })
+
+// Drop the persisted controllers of rows that no longer exist. `post` so the removed row's subtree
+// has already unmounted (its editors released their entries) before we stop their effect scopes.
+watch(
+  () => viewItems.value.map((vi) => String(vi.key)).join('|'),
+  () => rowStateScope.retainOwners(viewItems.value.map((vi) => vi.key)),
+  { flush: 'post' },
+)
+
 const expandedKeys = ref<Set<ListEditorKey>>(new Set())
 
 const rowsContainer = useTemplateRef<HTMLElement>('rowsContainer')
@@ -204,15 +385,6 @@ const rowsContainer = useTemplateRef<HTMLElement>('rowsContainer')
 const isInlineEdit = computed(() => !props.chips && !!slots.item)
 const hasReadonlyDetail = computed(() => !props.chips && !!slots['item-readonly'])
 
-// Initial snapshot of each item, keyed by row key. Compared against current data to
-// detect "dirty" (unsaved) rows. Reset externally after a successful parent-form save.
-const { captureDirtyBaseline, rebaselineKey, isItemDirty } = useDirtyBaseline<TItem>(() =>
-  modelValue.value.map((item) => ({
-    key: item[props.keyField] as ListEditorKey,
-    data: item,
-  })),
-)
-
 const {
   editingKeys,
   editingSnapshots,
@@ -225,12 +397,10 @@ const {
   rowsContainer,
   rowSelector: '.a-le-row',
   isInlineEdit,
-  restoreSnapshot: (key, data) => editor.updateItem(key, data),
-  watchKeys: () => modelValue.value.map((it) => it[props.keyField] as ListEditorKey),
+  restoreSnapshot: (key, data) => controller.updateItem(key, data),
+  watchKeys: () => modelValue.value.map((it) => keyOf(it)),
   findEntry: (key) => {
-    const hit = modelValue.value.find(
-      (it) => (it[props.keyField] as ListEditorKey) === key,
-    )
+    const hit = modelValue.value.find((it) => keyOf(it) === key)
     return hit ? { data: hit } : null
   },
   afterAutoOpen: (key) => {
@@ -238,64 +408,67 @@ const {
   },
 })
 
-const addLabelResolved = computed(() => props.addLabel ?? t('common.sortable.add'))
+const addLabelResolved = computed(() =>
+  props.addLabel ? t(props.addLabel) : t('common.sortable.add'),
+)
 const emptyTitleResolved = computed(() => props.emptyTitle ?? t('common.sortable.emptyTitle'))
-const emptyTextResolved = computed(() => props.emptyText ?? t('common.sortable.emptyText'))
 const deleteConfirmTitleResolved = computed(
   () => props.deleteConfirmTitle ?? t('common.sortable.deleteConfirmTitle'),
 )
 const deleteConfirmTextResolved = computed(
-  () => props.deleteConfirmText ?? t('common.sortable.deleteConfirmText'),
+  () =>
+    props.deleteConfirmText ??
+    (props.deleteMode === 'immediate'
+      ? t('common.sortable.deleteConfirmText')
+      : t('common.sortable.deleteConfirmTextDeferred')),
 )
 
 const canInteract = computed(() => !props.readonly && !props.disabled && !props.loading)
 const canAdd = computed(() => canInteract.value && props.showAddButton)
 
-const headerVisible = computed(() => !!(props.title || slots.header))
+// Total unconfirmed-change count (added/edited/moved rows + deferred deletions). A delete lights this
+// up even though its row is gone. Shown as a header badge + exposed on the handle.
+const unsavedCount = controller.unsavedCount
+const unsavedCountVisible = computed(
+  () => !props.readonly && !props.disableUnsaved && unsavedCount.value > 0,
+)
+const headerVisible = computed(() => !!(props.title || slots.header) || unsavedCountVisible.value)
 
-// Per-row edit footer (Save + Cancel) is only meaningful if the consumer wants a
-// per-item persist callback. Without it the expectation is that the parent form's
-// global save flushes everything, so we hide the per-row buttons by default.
+// Per-row Save/Cancel footer only makes sense with a per-item persist callback;
+// without one the parent form's global save flushes everything, so hide it.
 const showInlineSaveFooter = computed(() => !!props.onItemSave)
 
-// Decoupled dirty pass: depends only on modelValue (via stringifyContent
-// reading nested fields) and dirtyBaseline. Editing/expanded/loading flag
-// changes do NOT re-trigger this — viewItemsDecorated reads dirtyKeys.has()
-// instead of calling isItemDirty inline, so we avoid stringifying every
-// row whenever the user clicks edit on one row.
-const dirtyKeys = computed<Set<ListEditorKey>>(() => {
-  const out = new Set<ListEditorKey>()
-  for (const item of modelValue.value) {
-    const key = item[props.keyField] as ListEditorKey
-    if (isItemDirty(key, item)) out.add(key)
-  }
-  return out
-})
-
-// Per-key decorator cache: we reuse the cached object when its base view item
-// AND every flag matches, giving slot consumers a stable reference for rows
-// whose state didn't change. Saves allocation on every render where only one
-// row's flag flipped.
+// Per-key decorator cache: reuse the cached object when base item AND every flag
+// match, giving slot consumers a stable reference for unchanged rows. `disableUnsaved`
+// suppresses only the amber marker — the validation rail still shows, since hiding
+// dirty-state shouldn't hide a real error.
 const decoratorCache = new Map<ListEditorKey, DecoratedViewItem<TItem>>()
 const viewItemsDecorated = computed<DecoratedViewItem<TItem>[]>(() => {
   const next: DecoratedViewItem<TItem>[] = []
   const liveKeys = new Set<ListEditorKey>()
-  for (const vi of editor.viewItems.value) {
+  for (const vi of viewItems.value) {
     liveKeys.add(vi.key)
     const editing = editingKeys.value.has(vi.key)
     const expanded = expandedKeys.value.has(vi.key)
     const loading = props.loadingKeys?.has(vi.key) ?? false
-    const dirty = dirtyKeys.value.has(vi.key)
+    // Readonly can't have user-unsaved changes; never paint amber there (also avoids
+    // a mount-before-load baseline marking every loaded row added). (QA 85050 sweep)
+    const unsaved = props.disableUnsaved || props.readonly ? false : controller.isUnsaved(vi.key)
+    const dirty = unsaved
+    // `editing` → the controller reads amber (not red) while the row is being filled in. (QA 85050 b7)
+    const validationState = controller.rowState(vi.raw, vi.key, editing)
     const cached = decoratorCache.get(vi.key)
     if (
-      cached
-      && cached.raw === vi.raw
-      && cached.index === vi.index
-      && cached.position === vi.position
-      && cached.editing === editing
-      && cached.expanded === expanded
-      && cached.loading === loading
-      && cached.dirty === dirty
+      cached &&
+      cached.raw === vi.raw &&
+      cached.index === vi.index &&
+      cached.position === vi.position &&
+      cached.editing === editing &&
+      cached.expanded === expanded &&
+      cached.loading === loading &&
+      cached.dirty === dirty &&
+      cached.unsaved === unsaved &&
+      cached.validationState === validationState
     ) {
       next.push(cached)
       continue
@@ -306,6 +479,8 @@ const viewItemsDecorated = computed<DecoratedViewItem<TItem>[]>(() => {
       expanded,
       loading,
       dirty,
+      unsaved,
+      validationState,
     }
     decoratorCache.set(vi.key, decorated)
     next.push(decorated)
@@ -337,32 +512,26 @@ const keyboardNav = useKeyboardNav({
   },
 })
 
-const resolveCompactText = (raw: TItem, key: ListEditorKey): string =>
-  resolveCompactTextUtil(raw, key, {
-    compactField: props.compactField,
-    fallback: t('common.sortable.itemFallback'),
-  })
-
-const { resolveValidation } = useValidationRegistry<TItem>({
-  getValidationState: (item, key, index) => props.getValidationState?.(item, key, index) ?? null,
-})
+const resolveCompactText = (raw: TItem): string =>
+  resolveCompactTextUtil(raw, { compactField: props.compactField })
 
+// Managed add: the controller inserts `factory()` and renumbers; the inline-editing
+// watch picks up the new key off the model change and auto-opens it.
 const onAddClick = () => {
   if (!canAdd.value) return
   requestAutoOpen()
-  emit('add', undefined)
+  controller.addItem(undefined, undefined)
 }
 
 const onRowAddAfterClick = (vi: ListViewItem<TItem>) => {
   if (!canInteract.value) return
   requestAutoOpen()
-  emit('add', { afterId: vi.key })
+  controller.addItem(undefined, { afterId: vi.key })
 }
 
 const onEditClick = (vi: ListViewItem<TItem>) => {
   if (!canInteract.value) return
-  // Toggle: clicking edit while already editing closes the form, matching the
-  // row-header click behaviour.
+  // Toggle: edit while already editing closes the form, matching row-header click.
   if (editingKeys.value.has(vi.key)) {
     onCloseClick(vi)
     return
@@ -390,10 +559,10 @@ const onExpandClick = (vi: ListViewItem<TItem>) => {
 const isRowClickable = (vi: DecoratedViewItem<TItem>): boolean => {
   if (props.chips) return false
   if (props.disableRowClick) return false
+  if (props.defaultExpanded) return false
   if (props.disabled || props.loading) return false
   if (vi.editing || vi.expanded) return true
   if (!props.readonly && props.showEditButton) return true
-  if (props.readonly && hasReadonlyDetail.value) return true
   return false
 }
 
@@ -421,10 +590,13 @@ const {
   onDeleteConfirm: (raw) => (props.onDeleteConfirm ? props.onDeleteConfirm(raw) : true),
   onDelete: (raw) => props.onDelete?.(raw),
   onDeleted: (vi) => {
-    editor.deleteItem(vi.key)
     editingKeys.value.delete(vi.key)
     editingSnapshots.value.delete(vi.key)
     expandedKeys.value.delete(vi.key)
+    // Controller owns removal: a temp row vanishes; a saved row is recorded in `getChanges().deleted`
+    // and counts as an unconfirmed change (deferred) — unless immediate mode (already deleted on the
+    // backend), which skips the tombstone.
+    controller.deleteItem(vi.key, { trackDeleted: props.deleteMode === 'deferred' })
     emit('deleted', vi)
   },
   disableDeleteConfirm: () => props.disableDeleteConfirm || props.chips,
@@ -453,11 +625,9 @@ const onCloseClick = (vi: ListViewItem<TItem>) => {
   emit('close', vi)
 }
 
-// Per-key actions cache: each row's `actions` bundle is allocated once and
-// reused on every render. Slot consumers receive a stable identity for
-// `actions.update` etc., so they don't see prop-ref churn that would
-// trigger spurious re-renders. Closures capture the row key (stable) and
-// look up the current decorator via `findVi(key)` on call.
+// Per-key actions cache: each row's `actions` bundle is allocated once so slot
+// consumers get a stable identity (no prop-ref churn → no spurious re-renders).
+// Closures capture the stable key and look up the live decorator via `findVi(key)`.
 type ActionsBundle = {
   edit: () => void
   save: () => Promise<void> | void
@@ -466,21 +636,42 @@ type ActionsBundle = {
   delete: () => Promise<void>
   addAfter: () => void
   toggleExpand: () => void
-  update: (data: TItem) => TItem[]
+  update: (next: TItem | Partial<TItem> | ((current: TItem) => TItem)) => void
 }
 const actionsCache = new Map<ListEditorKey, ActionsBundle>()
 const getActions = (key: ListEditorKey): ActionsBundle => {
   let actions = actionsCache.get(key)
   if (!actions) {
     actions = {
-      edit: () => { const vi = findVi(key); if (vi) onEditClick(vi) },
-      save: () => { const vi = findVi(key); if (vi) return onSaveClick(vi) },
-      cancel: () => { const vi = findVi(key); if (vi) onCancelClick(vi) },
-      close: () => { const vi = findVi(key); if (vi) onCloseClick(vi) },
-      delete: async () => { const vi = findVi(key); if (vi) await onDeleteClick(vi) },
-      addAfter: () => { const vi = findVi(key); if (vi) onRowAddAfterClick(vi) },
-      toggleExpand: () => { const vi = findVi(key); if (vi) onExpandClick(vi) },
-      update: (data: TItem) => editor.updateItem(key, data),
+      edit: () => {
+        const vi = findVi(key)
+        if (vi) onEditClick(vi)
+      },
+      save: () => {
+        const vi = findVi(key)
+        if (vi) return onSaveClick(vi)
+      },
+      cancel: () => {
+        const vi = findVi(key)
+        if (vi) onCancelClick(vi)
+      },
+      close: () => {
+        const vi = findVi(key)
+        if (vi) onCloseClick(vi)
+      },
+      delete: async () => {
+        const vi = findVi(key)
+        if (vi) await onDeleteClick(vi)
+      },
+      addAfter: () => {
+        const vi = findVi(key)
+        if (vi) onRowAddAfterClick(vi)
+      },
+      toggleExpand: () => {
+        const vi = findVi(key)
+        if (vi) onExpandClick(vi)
+      },
+      update: (next) => controller.updateItem(key, next),
     }
     actionsCache.set(key, actions)
   }
@@ -499,50 +690,51 @@ watch(
 )
 
 const buildSlotProps = (vi: DecoratedViewItem<TItem>) => ({
-  item: { ...vi, validationState: resolveValidation(vi.raw as TItem, vi.key, vi.index) },
+  item: vi,
   raw: vi.raw,
   index: vi.index,
   key: vi.key,
   readonly: props.readonly,
   disabled: props.disabled,
   expanded: vi.expanded,
-  editing: vi.editing,
+  editing: vi.editing || props.defaultExpanded,
   dirty: vi.dirty,
-  unsaved: vi.dirty,
+  unsaved: vi.unsaved,
   touch: isTouch.value,
+  stateKeyPrefix: rowStateScope.prefixFor(vi.key),
   actions: getActions(vi.key),
 })
 
-const unsavedKeysModel = defineModel<Set<ListEditorKey>>('unsavedKeys', {
-  default: () => new Set<ListEditorKey>(),
-})
+// Named unsaved-changes section, registered only when a label is passed.
+useUnsavedSection(() =>
+  props.unsavedSectionLabel && !props.disableUnsaved
+    ? { label: props.unsavedSectionLabel, dirty: controller.hasUnsaved.value }
+    : [],
+)
 
-const internalUnsavedKeys = computed<Set<ListEditorKey>>(() => {
-  const out = new Set<ListEditorKey>()
-  for (const vi of viewItemsDecorated.value) {
-    if (vi.dirty) out.add(vi.key)
-  }
-  return out
-})
+// Opens invalid rows so a blocked save surfaces WHICH rows are wrong instead of a collapsed red
+// rail. The body is gated on `editing` not `expanded`, so drive `beginEdit` not `expandedKeys`
+// (QA 85050 B4-17). Shared by the exposed `validateAll` and the scope-collector reveal-on-touch.
+const runValidateAndReveal = (): boolean =>
+  validateAllAndReveal(controller, (key) => {
+    const vi = viewItems.value.find((v) => v.key === key)
+    if (vi) beginEdit(vi)
+  })
 
-const { hasUnsavedChanges, unsavedCount, clearUnsavedState } = useUnsavedKeysSync({
-  unsavedKeysModel,
-  internalUnsavedKeys,
-  onClearAll: () => captureDirtyBaseline(),
-  onClearKey: (key) => rebaselineKey(key),
+// Auto-bridge the editor's aggregate validity into the consumer's `validation-scope` collector so a
+// plain `$invalid` save gate blocks (and reveals) a collapsed invalid row. No-op without the prop.
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss -- construction-time opt-in, read once
+useListEditorScopeValidity({
+  hasErrors: controller.hasErrors,
+  validationScope: props.validationScope,
+  validateProvided: props.validate !== undefined,
+  reveal: runValidateAndReveal,
 })
 
-defineExpose({
-  addItem: editor.addItem,
-  deleteItem: editor.deleteItem,
-  updateItem: editor.updateItem,
-  moveItem: editor.moveItem,
-  recalculatePositions: editor.recalculatePositions,
-  viewItems: editor.viewItems,
-  resetDirtyBaseline: captureDirtyBaseline,
-  hasUnsavedChanges,
-  unsavedCount,
-  clearUnsavedState,
+// Expose the controller handle via `useTemplateRef<ListEditorHandle<TItem>>`.
+defineExpose<ListEditorHandle<TItem>>({
+  ...controller,
+  validateAll: runValidateAndReveal,
 })
 </script>
 
@@ -579,6 +771,13 @@ defineExpose({
             {{ title }}
           </h3>
         </slot>
+        <span
+          v-if="unsavedCountVisible"
+          class="a-le-unsaved-count"
+          :data-unsaved-count="unsavedCount"
+        >
+          {{ t('common.sortable.pendingChanges', { count: unsavedCount }) }}
+        </span>
       </div>
 
       <div
@@ -618,7 +817,6 @@ defineExpose({
         >
           <LeEmptyState
             :title="emptyTitleResolved"
-            :text="emptyTextResolved"
             :add-label="addLabelResolved"
             :can-add="canAdd"
             @add="onAddClick"
@@ -630,203 +828,212 @@ defineExpose({
         <div
           v-for="vi in viewItemsDecorated"
           :key="String(vi.key)"
-          :data-id="String(vi.key)"
-          role="listitem"
-          :tabindex="keyboardNav.rowTabindex(vi.key)"
-          class="a-le-row"
-          :class="{
-            'a-le-row--two-rows': twoRows === 'always',
-            'a-le-row--editing': vi.editing,
-            'a-le-row--expanded': vi.expanded,
-            'a-le-row--unsaved': vi.dirty,
-            'a-le-row--clickable': isRowClickable(vi),
-            [`a-le-row--validation-${resolveValidation(vi.raw, vi.key, vi.index)}`]:
-              resolveValidation(vi.raw, vi.key, vi.index) !== null,
-          }"
-          @keydown="keyboardNav.handleKeydown(vi.key, $event)"
+          class="a-le-row-wrapper"
         >
+          <!-- Interstitial slots render as SIBLINGS of `.a-le-row` (inside this
+               wrapper), so consumer content placed between rows never inherits the
+               row's unsaved/editing/validation tint. (QA 85050 BUG-04/05) -->
           <slot
             name="before-item"
             v-bind="buildSlotProps(vi)"
           />
 
           <div
-            class="a-le-row-header"
-            @click="onRowClick(vi)"
+            :data-id="String(vi.key)"
+            role="listitem"
+            :tabindex="keyboardNav.rowTabindex(vi.key)"
+            class="a-le-row"
+            :class="{
+              'a-le-row--two-rows': twoRows === 'always',
+              'a-le-row--editing': vi.editing,
+              'a-le-row--expanded': vi.expanded,
+              'a-le-row--unsaved': vi.unsaved,
+              'a-le-row--clickable': isRowClickable(vi),
+              [`a-le-row--validation-${vi.validationState}`]: vi.validationState !== null,
+            }"
+            @keydown="keyboardNav.handleKeydown(vi.key, $event)"
           >
-            <div class="a-le-row-main">
-              <slot
-                name="item-compact"
-                v-bind="buildSlotProps(vi)"
-              >
-                <span class="a-le-title">
-                  {{ resolveCompactText(vi.raw, vi.key) }}
-                </span>
-              </slot>
-              <LeUnsavedLabel v-if="vi.dirty" />
-            </div>
-
             <div
-              v-if="!chips"
-              class="a-le-status"
+              class="a-le-row-header"
+              @click="onRowClick(vi)"
             >
-              <slot
-                name="item-status"
-                v-bind="buildSlotProps(vi)"
-              >
-                <span
-                  v-if="statusField && vi.raw[statusField] != null && vi.raw[statusField] !== ''"
-                  class="a-le-status-badge"
+              <div class="a-le-row-main">
+                <slot
+                  name="item-compact"
+                  v-bind="buildSlotProps(vi)"
                 >
-                  {{ vi.raw[statusField] }}
-                </span>
-              </slot>
-            </div>
+                  <span class="a-le-title">
+                    {{ resolveCompactText(vi.raw) }}
+                  </span>
+                </slot>
+                <LeUnsavedLabel
+                  v-if="vi.unsaved"
+                  :dot-only="chips"
+                />
+              </div>
 
-            <div class="a-le-actions">
-              <slot
-                name="item-actions"
-                v-bind="buildSlotProps(vi)"
+              <div
+                v-if="!chips"
+                class="a-le-status"
               >
-                <VBtn
-                  v-if="chips && showDeleteButton && canInteract"
-                  icon
-                  size="x-small"
-                  variant="text"
-                  density="compact"
-                  :active="false"
-                  class="a-le-action a-le-action--chip-close"
-                  @click.stop="onDeleteClick(vi)"
+                <slot
+                  name="item-status"
+                  v-bind="buildSlotProps(vi)"
                 >
-                  <VIcon
-                    icon="mdi-close"
-                    size="14"
-                  />
-                </VBtn>
-                <template v-else>
-                  <VBtn
-                    v-if="showEditButton && canInteract"
-                    icon
-                    size="small"
-                    variant="tonal"
-                    color="primary"
-                    density="comfortable"
-                    class="mx-1 a-le-action a-le-action--edit"
-                    @click.stop="onEditClick(vi)"
+                  <span
+                    v-if="statusField && vi.raw[statusField] != null && vi.raw[statusField] !== ''"
+                    class="a-le-status-badge"
                   >
-                    <VIcon
-                      icon="mdi-pencil-outline"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.edit')"
-                    />
-                  </VBtn>
+                    {{ vi.raw[statusField] }}
+                  </span>
+                </slot>
+              </div>
+
+              <div class="a-le-actions">
+                <slot
+                  name="item-actions"
+                  v-bind="buildSlotProps(vi)"
+                >
                   <VBtn
-                    v-if="showDeleteButton && canInteract"
+                    v-if="chips && showDeleteButton && canInteract"
                     icon
-                    size="small"
+                    size="x-small"
                     variant="text"
-                    density="comfortable"
-                    class="mx-1 a-le-action a-le-action--delete"
+                    density="compact"
+                    :active="false"
+                    class="a-le-action a-le-action--chip-close"
                     @click.stop="onDeleteClick(vi)"
                   >
                     <VIcon
-                      icon="mdi-trash-can-outline"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.delete')"
+                      icon="mdi-close"
+                      size="14"
                     />
                   </VBtn>
+                  <template v-else>
+                    <VBtn
+                      v-if="showEditButton && canInteract && !defaultExpanded"
+                      icon
+                      size="small"
+                      variant="tonal"
+                      color="primary"
+                      density="comfortable"
+                      class="mx-1 a-le-action a-le-action--edit"
+                      @click.stop="onEditClick(vi)"
+                    >
+                      <VIcon
+                        icon="mdi-pencil-outline"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.edit')"
+                      />
+                    </VBtn>
+                    <VBtn
+                      v-if="showDeleteButton && canInteract"
+                      icon
+                      size="small"
+                      variant="text"
+                      density="comfortable"
+                      class="mx-1 a-le-action a-le-action--delete"
+                      @click.stop="onDeleteClick(vi)"
+                    >
+                      <VIcon
+                        icon="mdi-trash-can-outline"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.delete')"
+                      />
+                    </VBtn>
+                    <VBtn
+                      v-if="showAddAfterAction && canInteract"
+                      icon
+                      size="small"
+                      variant="text"
+                      density="comfortable"
+                      :active="false"
+                      class="mx-1 a-le-action a-le-action--menu"
+                    >
+                      <VIcon
+                        icon="mdi-dots-vertical"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.more')"
+                      />
+                      <VMenu activator="parent">
+                        <VList density="compact">
+                          <VListItem @click="onRowAddAfterClick(vi)">
+                            <template #prepend>
+                              <VIcon icon="mdi-plus" />
+                            </template>
+                            <VListItemTitle>
+                              {{ t('common.sortable.addAfter') }}
+                            </VListItemTitle>
+                          </VListItem>
+                        </VList>
+                      </VMenu>
+                    </VBtn>
+                  </template>
+                </slot>
+              </div>
+            </div>
+
+            <template v-if="(vi.editing || defaultExpanded) && $slots.item">
+              <div class="a-le-row-body">
+                <div class="a-le-form">
+                  <slot
+                    name="item"
+                    v-bind="buildSlotProps(vi)"
+                  />
+                </div>
+              </div>
+              <slot
+                name="item-footer"
+                v-bind="buildSlotProps(vi)"
+              >
+                <div
+                  v-if="showInlineSaveFooter && !defaultExpanded"
+                  class="a-le-row-footer"
+                >
+                  <div class="a-le-row-footer-spacer" />
                   <VBtn
-                    v-if="showAddAfterAction && canInteract"
-                    icon
-                    size="small"
                     variant="text"
-                    density="comfortable"
-                    :active="false"
-                    class="mx-1 a-le-action a-le-action--menu"
+                    :disabled="vi.loading"
+                    @click.stop="onCancelClick(vi)"
                   >
-                    <VIcon
-                      icon="mdi-dots-vertical"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.more')"
-                    />
-                    <VMenu activator="parent">
-                      <VList density="compact">
-                        <VListItem @click.stop="onRowAddAfterClick(vi)">
-                          <template #prepend>
-                            <VIcon icon="mdi-plus" />
-                          </template>
-                          <VListItemTitle>
-                            {{ t('common.sortable.addAfter') }}
-                          </VListItemTitle>
-                        </VListItem>
-                      </VList>
-                    </VMenu>
+                    {{ t('common.button.cancel') }}
                   </VBtn>
-                </template>
+                  <VBtn
+                    color="primary"
+                    variant="flat"
+                    prepend-icon="mdi-check"
+                    :disabled="vi.loading"
+                    @click.stop="onSaveClick(vi)"
+                  >
+                    {{ t('common.button.save') }}
+                  </VBtn>
+                </div>
               </slot>
-            </div>
-          </div>
+            </template>
 
-          <template v-if="vi.editing && $slots.item">
-            <div class="a-le-row-body">
+            <div
+              v-else-if="$slots['item-readonly'] && (readonly || vi.expanded)"
+              class="a-le-row-body"
+            >
               <div class="a-le-form">
                 <slot
-                  name="item"
+                  name="item-readonly"
                   v-bind="buildSlotProps(vi)"
                 />
               </div>
             </div>
-            <slot
-              name="item-footer"
-              v-bind="buildSlotProps(vi)"
-            >
-              <div
-                v-if="showInlineSaveFooter"
-                class="a-le-row-footer"
-              >
-                <div class="a-le-row-footer-spacer" />
-                <VBtn
-                  variant="text"
-                  :disabled="vi.loading"
-                  @click.stop="onCancelClick(vi)"
-                >
-                  {{ t('common.button.cancel') }}
-                </VBtn>
-                <VBtn
-                  color="primary"
-                  variant="flat"
-                  prepend-icon="mdi-check"
-                  :disabled="vi.loading"
-                  @click.stop="onSaveClick(vi)"
-                >
-                  {{ t('common.button.save') }}
-                </VBtn>
-              </div>
-            </slot>
-          </template>
-
-          <div
-            v-else-if="vi.expanded && $slots['item-readonly']"
-            class="a-le-row-body"
-          >
-            <div class="a-le-form">
-              <slot
-                name="item-readonly"
-                v-bind="buildSlotProps(vi)"
-              />
-            </div>
           </div>
 
           <slot
@@ -893,8 +1100,7 @@ defineExpose({
 
 // Variant-specific rules, scoped under the AListEditor root.
 .a-list-editor {
-  // Chips — row-header padding (12 px left for the flat variant vs 8 px in
-  // sortable, which reserves room for the drag handle).
+  // Chips: 12px left padding (flat) vs 8px in sortable, which reserves drag-handle room.
   &--chips .a-le-row-header {
     padding: 2px 4px 2px 12px;
     gap: 4px;
@@ -902,8 +1108,7 @@ defineExpose({
   }
 }
 
-// Narrow-container / mobile layout — taller rows, always-visible actions,
-// status badge dropped to make room.
+// Narrow/mobile layout: taller rows, always-visible actions, status badge dropped for room.
 /* stylelint-disable selector-max-compound-selectors */
 @container le-shell (max-width: 768px) {
   .a-list-editor {
diff --git a/src/labs/listEditor/ANestedSortableListEditor.vue b/src/labs/listEditor/ANestedSortableListEditor.vue
index 1fd622c3..1c379599 100644
--- a/src/labs/listEditor/ANestedSortableListEditor.vue
+++ b/src/labs/listEditor/ANestedSortableListEditor.vue
@@ -11,29 +11,40 @@ import {
   watch,
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
 import { useContainerWidth } from '@/labs/listEditor/composables/useContainerWidth'
+import { useIsTouchDevice } from '@/labs/listEditor/composables/useIsTouchDevice'
 import { useKeyboardNav } from '@/labs/listEditor/composables/useKeyboardNav'
-import { useValidationRegistry } from '@/labs/listEditor/composables/useValidationRegistry'
 import { useSortable } from '@vueuse/integrations/useSortable'
+import { type NestedViewItem } from '@/labs/listEditor/composables/useNestedListEditor'
 import {
-  useNestedListEditor,
-  type NestedViewItem,
-} from '@/labs/listEditor/composables/useNestedListEditor'
+  useNestedListEditorController,
+  type GetKey,
+  type ListEditorValidationResult,
+  type NestedListEditorHandle,
+  type PositionOption,
+  type PositionStrategy,
+} from '@/labs/listEditor/composables/useNestedListEditorController'
 import {
   computeInstruction,
   type ExecutableInstruction,
   type Instruction,
 } from '@/labs/listEditor/composables/useDragInstruction'
-import { useDirtyBaseline } from '@/labs/listEditor/composables/useDirtyBaseline'
+import {
+  provideListEditorStateScope,
+  useNestedListEditorStateEntry,
+  type NestedListEditorStateBindings,
+} from '@/labs/listEditor/composables/useListEditorStateScope'
 import { resolveCompactText as resolveCompactTextUtil } from '@/labs/listEditor/composables/resolveCompactText'
-import { useUnsavedKeysSync } from '@/labs/listEditor/composables/useUnsavedKeysSync'
+import { useUnsavedSection } from '@/labs/unsavedGuard/useUnsavedSection'
 import { useDeleteDialog } from '@/labs/listEditor/composables/useDeleteDialog'
 import { useInlineEditing } from '@/labs/listEditor/composables/useInlineEditing'
+import { validateAllAndReveal } from '@/labs/listEditor/utils/revealInvalidRows'
+import { useListEditorScopeValidity } from '@/labs/listEditor/composables/useListEditorScopeValidity'
 import { useReorderMode } from '@/labs/listEditor/composables/useReorderMode'
 import { cloneDeep } from '@/utils/common'
 import type {
   ListEditorKey,
+  ListEditorValidationScope,
   ListEditorValidationState,
   NestedPositionHint,
   NestedTree,
@@ -71,11 +82,7 @@ export interface DragState {
 
 export type ReorderMode = 'view' | 'reorder'
 
-// Public slot surface. Same general shape as the flat sortable variant but
-// row-level slots also carry depth/parent/childrenAllowed/firstInParent etc.
-// from the nested decorator, plus the actions bundle gains addChild,
-// toggleDetail, indent, outdent. Hoisted to top-level so vite-plugin-dts can
-// include them in the .d.ts.
+// Hoisted for vite-plugin-dts d.ts rollup.
 export interface RowActions<TItem> {
   edit: () => void
   save: () => Promise<void> | void
@@ -92,7 +99,7 @@ export interface RowActions<TItem> {
   moveBottom: () => void
   indent: () => void
   outdent: () => void
-  update: (data: TItem) => NestedTree<TItem>
+  update: (data: TItem) => void
 }
 export interface RowSlotProps<TItem extends Record<string, any>> {
   item: DecoratedNestedViewItem<TItem> & { validationState: ListEditorValidationState }
@@ -122,6 +129,13 @@ export interface RowSlotProps<TItem extends Record<string, any>> {
   canOutdent: boolean
   canAddChild: boolean
   touch: boolean
+  /**
+   * Row-scoped `state-key` prefix. Thread it down to any list editor rendered in this slot and set
+   * its `:state-key="`${stateKeyPrefix}:someList`"` — that editor's controller then lives in THIS
+   * editor's scope and survives the row collapsing (which unmounts the whole slot subtree). Entries
+   * under this prefix are disposed when the row is removed.
+   */
+  stateKeyPrefix: string
   actions: RowActions<TItem>
 }
 export interface ToolbarSlotProps {
@@ -155,10 +169,55 @@ export interface AddButtonSlotProps {
 export interface Props<TItem extends Record<string, any>> {
   maxDepth: number
 
-  keyField?: string
-  positionField?: string
+  /**
+   * New-row factory; if set, add/add-after/add-inside insert through the
+   * controller (no `@add` handler needed). Optional for read-only trees.
+   */
+  factory?: () => TItem
+  /**
+   * Stable row identity. Default `'id'`. Never point at the position field.
+   * Typed `string` (not `keyof TItem`): a bare keyof compiles to a Boolean-only
+   * runtime type that silently coerces `get-key="id"` to `true`.
+   */
+  getKey?: string | ((item: TItem) => ListEditorKey)
+  /**
+   * Managed order field. Default `'position'`; `false` opts out. Typed
+   * `[String, Boolean, Object]` with `string` before `false`: a bare keyof
+   * compiles Boolean-only, and `false`-first would coerce `position="position"`
+   * (value == prop name) to `true`. Object form folds in `{ field, multiplier }`.
+   */
+  position?: string | false | { field: string; multiplier?: number; strategy?: PositionStrategy }
+  /** Parent-key field written onto reparented rows. Default `'parent'`. */
   parentField?: string
-  positionMultiplier?: number
+  /**
+   * Extra fields dropped from the dirty content-hash (position + parent always
+   * dropped), e.g. a child collection tracked by a separate editor.
+   */
+  dirtyExclude?: string[]
+  /** Per-row validity — `true` (or `{ valid: true }`) = VALID. Drives the red rail + save guard. */
+  validate?: (item: TItem) => ListEditorValidationResult
+  /**
+   * Vuelidate `$scope` (the same one the consumer's row forms / save-gate collector use). When set,
+   * the editor registers its aggregate validity under it, so a plain `v$.$invalid` save gate blocks
+   * AND reveals a collapsed invalid row — no `validateAll()` call needed in the save flow. Omit to
+   * keep legacy behavior (gate the save on the exposed `validateAll()` yourself); `false` opts out.
+   */
+  validationScope?: ListEditorValidationScope | false
+  /**
+   * Opt-in lifted controller (`useNestedListEditorController()`) so state
+   * survives unmount/remount; omitted = internal controller. Same handle
+   * reachable via `useTemplateRef`.
+   */
+  editor?: NestedListEditorHandle<TItem>
+  /**
+   * Persist this editor's controller in the nearest ANCESTOR editor's row-state scope under this
+   * key, instead of owning it. Use it for an editor rendered in another editor's `#item` slot (that
+   * slot is behind a `v-if`, so collapsing the row unmounts this editor and a component-owned
+   * controller would re-baseline the already-edited tree on re-expand). Derive the key from the row
+   * slot's `stateKeyPrefix`. Options stay declared here, on this tag. Ignored when `:editor` is
+   * passed, and a no-op without an ancestor scope.
+   */
+  stateKey?: string
 
   readonly?: boolean
   disabled?: boolean
@@ -179,20 +238,19 @@ export interface Props<TItem extends Record<string, any>> {
   showChangeParent?: boolean
   showExpandToggle?: boolean
 
-  getValidationState?: (
-    item: TItem,
-    key: ListEditorKey,
-    index: number,
-  ) => ListEditorValidationState
-
   addLabel?: string | null
   emptyTitle?: string | null
-  emptyText?: string | null
 
   disableRowClick?: boolean
   disableDeleteConfirm?: boolean
   deleteConfirmTitle?: string | null
   deleteConfirmText?: string | null
+  /**
+   * How a row delete persists. `deferred` (default): the row disappears but the deletion counts as an
+   * unconfirmed change until save (revertible until then, incl. via reorder Cancel). `immediate`: the
+   * consumer deletes on the backend — the dialog says it is irreversible and it does NOT read as unsaved.
+   */
+  deleteMode?: 'immediate' | 'deferred'
 
   closeVariant?: 'auto' | 'icon' | 'labeled'
 
@@ -206,13 +264,22 @@ export interface Props<TItem extends Record<string, any>> {
   onDelete?: (item: TItem) => Promise<void> | void
   onItemSave?: (item: TItem) => Promise<void> | void
   onReorderApply?: (tree: NestedTree<TItem>) => Promise<void> | void
+
+  /** Registers this editor as a named unsaved-changes section under the given (translated) label. */
+  unsavedSectionLabel?: string
 }
 
 const props = withDefaults(defineProps<Props<TItem>>(), {
-  keyField: 'id',
-  positionField: 'position',
+  unsavedSectionLabel: undefined,
+  factory: undefined,
+  getKey: undefined,
+  position: undefined,
   parentField: 'parent',
-  positionMultiplier: 1,
+  dirtyExclude: undefined,
+  validate: undefined,
+  validationScope: undefined,
+  editor: undefined,
+  stateKey: undefined,
   readonly: false,
   disabled: false,
   loading: false,
@@ -228,14 +295,13 @@ const props = withDefaults(defineProps<Props<TItem>>(), {
   showMoveToPosition: false,
   showChangeParent: false,
   showExpandToggle: true,
-  getValidationState: undefined,
   addLabel: null,
   emptyTitle: null,
-  emptyText: null,
   disableRowClick: false,
   disableDeleteConfirm: false,
   deleteConfirmTitle: null,
   deleteConfirmText: null,
+  deleteMode: 'deferred',
   closeVariant: 'auto',
   loadingKeys: null,
   showReorderToggle: true,
@@ -285,13 +351,12 @@ defineSlots<{
 
 const { t } = useI18n()
 const slots = useSlots()
-const display = useDisplay()
 const { showWarningT } = useAlerts()
 
 const rootEl = useTemplateRef<HTMLElement>('rootEl')
 const { isNarrow } = useContainerWidth(rootEl)
 
-const isTouch = computed<boolean>(() => display.platform.value.touch)
+const isTouch = useIsTouchDevice()
 
 const effectiveCloseVariant = computed<'icon' | 'labeled'>(() => {
   if (props.closeVariant === 'icon') return 'icon'
@@ -299,149 +364,186 @@ const effectiveCloseVariant = computed<'icon' | 'labeled'>(() => {
   return isNarrow.value ? 'icon' : 'labeled'
 })
 
-// Tree-level expand/collapse — controls which descendants are visible in the flat
-// viewItems list. Auto-populated at mount for every node that has children.
 const childrenExpandedKeys = ref<Set<ListEditorKey>>(new Set())
-// Row-level readonly detail visibility — used in readonly mode with #item-readonly slot.
-// Independent of children expansion, so a node can have its subtree visible while its
-// own detail body is collapsed, and vice versa.
+// Readonly detail body visibility — independent of subtree expansion.
 const detailExpandedKeys = ref<Set<ListEditorKey>>(new Set())
 
+// Local mirror of the controller's key resolution so walkers + the template key
+// rows the same way the controller tracks them. Construction-time config, read once.
+/* eslint-disable vue/no-setup-props-reactivity-loss */
+const getKeyOpt = props.getKey ?? 'id'
+const keyFieldName = (typeof getKeyOpt === 'function' ? 'id' : getKeyOpt) as string
+const keyOf = (data: TItem): ListEditorKey =>
+  typeof getKeyOpt === 'function'
+    ? getKeyOpt(data)
+    : (data[getKeyOpt as keyof TItem] as ListEditorKey)
+
+// Managed position field (row position, move-to-position dialog, flatViewItems). Mirrors the controller.
+const positionFieldName = ((): string => {
+  const p = props.position
+  if (p === undefined || p === false) return 'position'
+  if (typeof p === 'object') return p.field
+  return p
+})()
+
 const initChildrenExpanded = (tree: NestedTree<TItem>) => {
   const walk = (nodes: NestedTreeNode<TItem>[]) => {
     for (const n of nodes) {
       if (n.children && n.children.length > 0) {
-        childrenExpandedKeys.value.add(n.data[props.keyField] as ListEditorKey)
+        childrenExpandedKeys.value.add(keyOf(n.data))
         walk(n.children)
       }
     }
   }
   walk(tree.children)
 }
-// One-shot init at setup time — subsequent expansions are user-driven.
 // eslint-disable-next-line vue/no-ref-object-reactivity-loss
 initChildrenExpanded(modelValue.value)
 
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-const editor = useNestedListEditor<TItem>(modelValue, {
-  keyField: props.keyField,
-  positionField: props.positionField,
+// State controller (v2). Undefined getKey/position/validate fall back to controller defaults
+// ('id' / 'position' / always-valid). Its `viewItems` ignores expand state, so we re-project an
+// expand-aware list below (flatViewItems).
+const controllerOptions: NestedListEditorStateBindings<TItem> = {
+  get: () => modelValue.value,
+  set: (v) => (modelValue.value = v),
+  factory: props.factory,
+  getKey: props.getKey as GetKey<TItem> | undefined,
+  position: props.position as PositionOption<TItem> | undefined,
   parentField: props.parentField,
-  positionMultiplier: props.positionMultiplier,
   maxDepth: props.maxDepth,
-  expandedKeys: childrenExpandedKeys,
+  dirtyExclude: () => props.dirtyExclude ?? [],
+  validate: props.validate,
+}
+// Precedence: an explicitly lifted `:editor` wins; then a `state-key`'d entry persisted in the
+// nearest ancestor editor's row-state scope (rebound to this instance on every remount); else this
+// component owns the controller — today's behaviour, unchanged.
+const stateEntry = props.editor
+  ? null
+  : useNestedListEditorStateEntry<TItem>(props.stateKey, controllerOptions)
+const controller =
+  props.editor ?? stateEntry?.handle ?? useNestedListEditorController<TItem>(controllerOptions)
+/* eslint-enable vue/no-setup-props-reactivity-loss */
+
+// Row-state scope for THIS editor's `#item` slot subtree — see ASortableListEditor.
+const rowStateScope = provideListEditorStateScope(stateEntry?.childScope ?? null)
+
+// FULL flattened list (collapsed-branch rows included) built directly off the
+// tree: the recursive renderer (LeNestedRow) filters by parentKey + childrenExpandedKeys,
+// so it needs every row present in viewItemsDecorated even when hidden.
+const flatViewItems = computed<NestedViewItem<TItem>[]>(() => {
+  const flat: NestedViewItem<TItem>[] = []
+  let flatIndex = 0
+  const maxDepth = props.maxDepth
+  const walk = (
+    nodes: NestedTreeNode<TItem>[],
+    depth: number,
+    parentNode: NestedTreeNode<TItem> | null,
+  ) => {
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i]
+      const key = keyOf(node.data)
+      const childrenAllowed = node.children !== undefined
+      const hasChildren = childrenAllowed && (node.children?.length ?? 0) > 0
+      const childrenCount = node.children?.length ?? 0
+      const remainingDepth = maxDepth - (depth + 1)
+      flat.push({
+        key,
+        index: flatIndex++,
+        raw: node.data,
+        position: node.data[positionFieldName] as number | undefined,
+        node,
+        depth,
+        parent: parentNode?.data ?? null,
+        parentKey: parentNode ? keyOf(parentNode.data) : null,
+        childrenCount,
+        hasChildren,
+        childrenAllowed,
+        siblingIndex: i,
+        siblingCount: nodes.length,
+        firstInParent: i === 0,
+        lastInParent: i === nodes.length - 1,
+        canAddChild: childrenAllowed && remainingDepth > 0,
+        canIndent: i > 0,
+        canOutdent: depth > 0,
+      })
+      if (hasChildren) walk(node.children as NestedTreeNode<TItem>[], depth + 1, node)
+    }
+  }
+  walk(modelValue.value.children, 0, null)
+  return flat
 })
 
-// Dirty baseline — compares content (title, user-editable fields) against the
-// initial snapshot. `position` and `parent` are deliberately stripped out:
-// drag-drop rewrites those on side-effect rows (siblings shifted to keep the
-// position sequence consistent), and flagging those unmoved rows as dirty
-// would produce ghost "unsaved" markers everywhere. The consumer saves the
-// whole tree on apply anyway — we only care about the per-row visual cue.
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-const { captureDirtyBaseline, rebaselineKey, isItemDirty } = useDirtyBaseline<TItem>(
-  () => {
-    const out: Array<{ key: ListEditorKey; data: TItem }> = []
-    const walk = (nodes: NestedTreeNode<TItem>[]) => {
-      for (const n of nodes) {
-        out.push({ key: n.data[props.keyField] as ListEditorKey, data: n.data })
-        if (n.children && n.children.length) walk(n.children)
-      }
-    }
-    walk(modelValue.value.children)
-    return out
-  },
-  { excludeFields: [props.positionField, props.parentField] },
+// Drop the persisted controllers of rows that no longer exist. `post` so the removed row's subtree
+// has already unmounted (its editors released their entries) before we stop their effect scopes.
+watch(
+  () => flatViewItems.value.map((vi) => String(vi.key)).join('|'),
+  () => rowStateScope.retainOwners(flatViewItems.value.map((vi) => vi.key)),
+  { flush: 'post' },
 )
 
-// Reorder snapshot — captures the tree at reorder-start so we can restore it
-// on cancel. Dirty/moved detection does NOT derive from the snapshot: we
-// used to compare each row's current parent + sibling-index against snapshot
-// values, which flagged unmoved rows as "moved" whenever a neighbour shifted
-// sibling positions as a side-effect. Instead we track explicit user actions
-// in `movedKeys` below — only rows the user actively moved get marked.
+// Snapshot for reorder-cancel restore only; dirty detection lives in the controller.
+// `movedKeys` is component view state driving the toolbar "N pending" counter,
+// cleared on every mode transition by `useReorderMode`.
 const snapshot = shallowRef<NestedTree<TItem> | null>(null)
-// Keys the user has actively moved during this reorder session (drag, arrow
-// buttons, indent/outdent). Clearing this set is paired with
-// captureDirtyBaseline in the exposed resetDirtyBaseline cycle — consumers
-// expect the orange badges to go away once a server save confirms.
 const movedKeys = ref<Set<ListEditorKey>>(new Set())
+// Deletes made during the current reorder session, split by mode — deferred ones count in the toolbar
+// and revert on Cancel; immediate (backend) ones are re-applied on Cancel so they stay gone (else the
+// snapshot-restore would resurrect a server-deleted row). Mirrors ASortableListEditor.
+const sessionDeferredDeletes = ref<Set<ListEditorKey>>(new Set())
+const sessionImmediateDeletes = ref<Set<ListEditorKey>>(new Set())
 
+// Re-baseline current tree as saved. Legacy name kept; maps onto `controller.commit()`.
 const resetDirtyBaseline = () => {
-  captureDirtyBaseline()
+  controller.commit()
   movedKeys.value = new Set()
 }
-// Mark the row AND every descendant. Moving a parent visually carries its
-// whole subtree to the new location, so the children are "moved" too from
-// the user's perspective — even though they stayed in place relative to
-// their parent. Without this, only the grabbed parent would light up orange
-// and its descendants would silently travel along, which reads as missing
-// feedback when nested trees are moved around.
+// Mark row + every descendant moved — a moved parent visually carries its subtree.
 const markMoved = (key: ListEditorKey) => {
-  const { node } = editor.findNode(key)
+  const { node } = controller.findNode(key)
   if (!node) {
     movedKeys.value.add(key)
     return
   }
   const collect = (n: NestedTreeNode<TItem>) => {
-    movedKeys.value.add(n.data[props.keyField] as ListEditorKey)
+    movedKeys.value.add(keyOf(n.data))
     if (n.children) n.children.forEach(collect)
   }
   collect(node)
 }
 
-// Decoupled dirty pass — see AListEditor for rationale. Walk the tree once
-// to collect every dirty key; viewItemsDecorated then reads dirtyKeys.has()
-// instead of calling isItemDirty inline so flag-only re-renders skip the
-// stringify pass.
-const dirtyKeys = computed<Set<ListEditorKey>>(() => {
-  const out = new Set<ListEditorKey>()
-  const walk = (nodes: typeof modelValue.value.children) => {
-    for (const n of nodes) {
-      const key = n.data[props.keyField] as ListEditorKey
-      if (isItemDirty(key, n.data as TItem)) out.add(key)
-      if (n.children?.length) walk(n.children)
-    }
-  }
-  walk(modelValue.value.children)
-  return out
-})
-
-// Per-key decorator cache — see AListEditor for rationale. The base view item
-// for nested already carries a lot of stable shape info (parent, depth,
-// childrenCount, sibling-position flags, *Allowed); we only need to invalidate
-// when those, or any per-row flag, changes.
 const decoratorCache = new Map<ListEditorKey, DecoratedNestedViewItem<TItem>>()
 const viewItemsDecorated = computed<DecoratedNestedViewItem<TItem>[]>(() => {
   const next: DecoratedNestedViewItem<TItem>[] = []
   const liveKeys = new Set<ListEditorKey>()
-  for (const vi of editor.viewItems.value) {
+  for (const vi of flatViewItems.value) {
     liveKeys.add(vi.key)
     const editing = editingKeys.value.has(vi.key)
     const expanded = detailExpandedKeys.value.has(vi.key)
     const childrenExpanded = childrenExpandedKeys.value.has(vi.key)
     const loading = props.loadingKeys?.has(vi.key) ?? false
     const moved = movedKeys.value.has(vi.key)
-    const dirty = dirtyKeys.value.has(vi.key)
-    const unsaved = dirty || moved
+    // Amber = controller dirty OR reorder-session moved. readonly suppresses it
+    // (read-only views can't be unsaved; also dodges a mount-before-load baseline). (QA 85050 sweep)
+    const dirty = props.readonly ? false : controller.isUnsaved(vi.key)
+    const unsaved = props.readonly ? false : dirty || moved
     const cached = decoratorCache.get(vi.key)
     if (
-      cached
-      && cached.raw === vi.raw
-      && cached.index === vi.index
-      && cached.position === vi.position
-      && cached.depth === vi.depth
-      && cached.parentKey === vi.parentKey
-      && cached.childrenCount === vi.childrenCount
-      && cached.firstInParent === vi.firstInParent
-      && cached.lastInParent === vi.lastInParent
-      && cached.editing === editing
-      && cached.expanded === expanded
-      && cached.childrenExpanded === childrenExpanded
-      && cached.loading === loading
-      && cached.dirty === dirty
-      && cached.moved === moved
-      && cached.unsaved === unsaved
+      cached &&
+      cached.raw === vi.raw &&
+      cached.index === vi.index &&
+      cached.position === vi.position &&
+      cached.depth === vi.depth &&
+      cached.parentKey === vi.parentKey &&
+      cached.childrenCount === vi.childrenCount &&
+      cached.firstInParent === vi.firstInParent &&
+      cached.lastInParent === vi.lastInParent &&
+      cached.editing === editing &&
+      cached.expanded === expanded &&
+      cached.childrenExpanded === childrenExpanded &&
+      cached.loading === loading &&
+      cached.dirty === dirty &&
+      cached.moved === moved &&
+      cached.unsaved === unsaved
     ) {
       next.push(cached)
       continue
@@ -466,7 +568,7 @@ const viewItemsDecorated = computed<DecoratedNestedViewItem<TItem>[]>(() => {
 })
 
 const isEmpty = computed(() => modelValue.value.children.length === 0)
-const totalItemCount = computed(() => editor.viewItems.value.length)
+const totalItemCount = computed(() => flatViewItems.value.length)
 
 const rowsContainer = useTemplateRef<HTMLElement>('rowsContainer')
 
@@ -476,9 +578,7 @@ const canEnterReorder = computed(
 )
 
 const isInlineEdit = computed(() => !!(slots as Record<string, unknown>).item)
-const hasReadonlyDetail = computed(
-  () => !!(slots as Record<string, unknown>)['item-readonly'],
-)
+const hasReadonlyDetail = computed(() => !!(slots as Record<string, unknown>)['item-readonly'])
 const showInlineSaveFooter = computed(() => !!props.onItemSave)
 
 const {
@@ -494,12 +594,14 @@ const {
   rowsContainer,
   rowSelector: '.a-le-row-wrapper',
   isInlineEdit,
-  restoreSnapshot: (key, data) => editor.updateItem(key, data),
+  // markDirty=false: restoring the pre-edit snapshot on cancel must not flag the
+  // node dirty (it would otherwise be resent by partial-multi saves).
+  restoreSnapshot: (key, data) => controller.updateItem(key, data, false),
   watchKeys: () => {
     const keys: ListEditorKey[] = []
     const walk = (nodes: NestedTreeNode<TItem>[]) => {
       for (const n of nodes) {
-        keys.push(n.data[props.keyField] as ListEditorKey)
+        keys.push(keyOf(n.data))
         if (n.children && n.children.length) walk(n.children)
       }
     }
@@ -507,13 +609,13 @@ const {
     return keys
   },
   findEntry: (key) => {
-    const { node } = editor.findNode(key)
+    const { node } = controller.findNode(key)
     return node ? { data: node.data } : null
   },
   afterAutoOpen: (key) => {
-    const { parent } = editor.findNode(key)
+    const { parent } = controller.findNode(key)
     if (parent) {
-      childrenExpandedKeys.value.add(parent.data[props.keyField] as ListEditorKey)
+      childrenExpandedKeys.value.add(keyOf(parent.data))
     }
   },
 })
@@ -538,22 +640,34 @@ const {
   },
   canEnterReorder,
   onEnter: () => {
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
     clearEditing()
-    // Expand every branch so the user can see (and reach) every row before
-    // picking something to drag — otherwise collapsed subtrees would be invisible
-    // reorder targets.
+    // Expand every branch so all rows are reachable drag targets.
     for (const k of expandableKeys.value) childrenExpandedKeys.value.add(k)
     nextTick(() => {
       if (dragEnabled.value) initSortables()
     })
   },
   onExternalEnter: () => {
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
     clearEditing()
   },
+  // Cancel: the snapshot-restore has brought every deleted row back; reconcile the controller so a
+  // deferred delete truly reverts (clear tombstone, row stays) and an immediate delete stays gone (row
+  // removed again — it is deleted on the backend and must not resurrect / be re-created by a save).
   onCancel: () => {
+    for (const key of sessionDeferredDeletes.value) controller.restoreDeleted(key)
+    for (const key of sessionImmediateDeletes.value)
+      controller.deleteItem(key, { trackDeleted: false })
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
     destroySortables()
   },
   onApplyEnd: () => {
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
     destroySortables()
   },
   onReorderApply: (tree) => props.onReorderApply?.(tree),
@@ -566,40 +680,47 @@ const {
   },
 })
 
-const canAdd = computed(() => canInteract.value && props.showAddButton && !reorderMode.value)
-const dragEnabled = computed(
-  () => reorderMode.value && !isTouch.value && !props.disableDrag,
+// Reorder-toolbar pending indicator = session moves + deferred deletes made in the session, so a delete
+// in reorder mode no longer reads as "no pending changes" and Apply stays enabled.
+const nestedPendingCount = computed<number>(
+  () => movedCount.value + sessionDeferredDeletes.value.size,
+)
+const nestedPendingChanges = computed<boolean>(
+  () => hasPendingChanges.value || sessionDeferredDeletes.value.size > 0,
 )
 
-const addLabelResolved = computed(() => props.addLabel ?? t('common.sortable.add'))
+const canAdd = computed(() => canInteract.value && props.showAddButton && !reorderMode.value)
+const dragEnabled = computed(() => reorderMode.value && !isTouch.value && !props.disableDrag)
+
+const addLabelResolved = computed(() =>
+  props.addLabel ? t(props.addLabel) : t('common.sortable.add'),
+)
 const emptyTitleResolved = computed(() => props.emptyTitle ?? t('common.sortable.emptyTitle'))
-const emptyTextResolved = computed(() => props.emptyText ?? t('common.sortable.emptyText'))
 const deleteConfirmTitleResolved = computed(
   () => props.deleteConfirmTitle ?? t('common.sortable.deleteConfirmTitle'),
 )
 const deleteConfirmTextResolved = computed(
-  () => props.deleteConfirmText ?? t('common.sortable.deleteConfirmText'),
+  () =>
+    props.deleteConfirmText ??
+    (props.deleteMode === 'immediate'
+      ? t('common.sortable.deleteConfirmText')
+      : t('common.sortable.deleteConfirmTextDeferred')),
 )
 
 const reorderToggleVisible = computed<boolean>(
   (): boolean =>
-    !props.readonly
-    && props.showReorderToggle
-    && !reorderMode.value
-    && totalItemCount.value > 0,
+    !props.readonly && props.showReorderToggle && !reorderMode.value && totalItemCount.value > 0,
 )
 
-const compactReorderButton = computed<boolean>(
-  (): boolean => !!props.title && isNarrow.value,
-)
+const compactReorderButton = computed<boolean>((): boolean => !!props.title && isNarrow.value)
 
-// Keys of every node that *has* children — the candidates for expand/collapse.
+// Keys of every node that has children — the expand/collapse candidates.
 const expandableKeys = computed<ListEditorKey[]>(() => {
   const out: ListEditorKey[] = []
   const walk = (nodes: NestedTreeNode<TItem>[]) => {
     for (const n of nodes) {
       if (n.children && n.children.length > 0) {
-        out.push(n.data[props.keyField] as ListEditorKey)
+        out.push(keyOf(n.data))
         walk(n.children)
       }
     }
@@ -608,9 +729,10 @@ const expandableKeys = computed<ListEditorKey[]>(() => {
   return out
 })
 
-const allExpanded = computed<boolean>(() =>
-  expandableKeys.value.length > 0
-  && expandableKeys.value.every((k) => childrenExpandedKeys.value.has(k)),
+const allExpanded = computed<boolean>(
+  () =>
+    expandableKeys.value.length > 0 &&
+    expandableKeys.value.every((k) => childrenExpandedKeys.value.has(k)),
 )
 
 const expandAllVisible = computed<boolean>(
@@ -628,21 +750,20 @@ const toggleExpandAll = () => {
 const headerVisible = computed<boolean>(
   (): boolean =>
     !!(
-      props.title
-      || (slots as Record<string, unknown>).header
-      || (slots as Record<string, unknown>)['reorder-toggle']
-      || reorderToggleVisible.value
-      || expandAllVisible.value
-      || reorderMode.value
+      props.title ||
+      (slots as Record<string, unknown>).header ||
+      (slots as Record<string, unknown>)['reorder-toggle'] ||
+      reorderToggleVisible.value ||
+      expandAllVisible.value ||
+      reorderMode.value
     ),
 )
 
-// Initialize nested SortableJS groups. We create one Sortable instance per group
-// so drag/drop can move items within/between groups — SortableJS handles the
-// pointer events; onEnd reconciles via editor.moveTo().
-const sortableInstances = ref<Array<{ stop: () => void; option?: (k: string, v: unknown) => void }>>(
-  [],
-)
+// One Sortable instance per group so drag/drop moves items within/between groups;
+// SortableJS owns the pointer events, onEnd reconciles via editor.moveTo().
+const sortableInstances = ref<
+  Array<{ stop: () => void; option?: (k: string, v: unknown) => void }>
+>([])
 const forceRerender = ref(0)
 
 const destroySortables = () => {
@@ -659,22 +780,15 @@ const destroySortables = () => {
 const GROUP_CLASS = 'a-nested-list-editor__group'
 const HANDLE_CLASS = 'a-le-drag-handle'
 
-// Live drag state. `instruction` is recomputed on every pointermove while
-// drag is active — it encodes WHERE the dragged item will land (sibling-above/
-// below/make-child/blocked) and at WHAT DEPTH. The overlay template reads it
-// to render the drop indicator; `onEnd` applies it via `editor.moveTo`.
-//
-// We don't rely on SortableJS to move the DOM — onMove always returns false.
-// SortableJS is reduced to "drag lifecycle + floating clone"; hit-testing,
-// depth picking and the final mutation are all ours.
+// Live drag state. `instruction` is recomputed on every pointermove and encodes
+// where + at what depth the dragged item lands (sibling-above/below/make-child/blocked);
+// the overlay reads it, onEnd applies it via `editor.moveTo`. SortableJS never moves
+// the DOM (onMove always returns false) — hit-testing, depth and the mutation are all ours.
 const dragState = ref<DragState | null>(null)
 
-// Drop indicator anchor geometry — kept in sync with CSS:
-//   row-header padding-left (reorder mode) = 12px + depth * --ansle-indent(24)
-//   drag handle icon size                  = 20px (VIcon size="20")
-// Anchor X at depth 0 = padding-left (12) + half handle width (10) = 22px, so
-// the dot sits on top of the drag handle's visual centre and the line walks
-// right/left in 24px steps, visually matching the actual row indent hierarchy.
+// Drop indicator anchor geometry, kept in sync with CSS (reorder-mode header
+// padding-left = 12 + depth*24, drag handle = 20px). ANCHOR_X = 12 + half handle
+// (10) = 22 puts the dot on the handle's centre; the line steps 24px per depth.
 const INDENT_PX = 24
 const ANCHOR_X = 22
 
@@ -686,8 +800,8 @@ const hitTestRow = (
   if (!hit) return null
   const wrapper = hit.closest('.a-le-row-wrapper') as HTMLElement | null
   if (!wrapper) return null
-  // Only consider wrappers inside our rowsContainer — elementFromPoint could
-  // hit a different ANestedSortableListEditor instance on the same page.
+  // Only wrappers inside our rowsContainer — elementFromPoint could hit a
+  // different ANestedSortableListEditor instance on the same page.
   if (!rowsContainer.value || !rowsContainer.value.contains(wrapper)) return null
   const key = parseKey(wrapper.getAttribute('data-id'))
   if (key === null) return null
@@ -704,12 +818,9 @@ const recomputeInstruction = (clientX: number, clientY: number) => {
     return
   }
   const containerRect = rowsContainer.value.getBoundingClientRect()
-  // For hovered-row rect we read the row element (not the whole wrapper,
-  // whose height balloons when children are rendered). The wrapper's first
-  // `.a-le-row` child is the header+body we want to hit-test.
-  const rowEl = hit.el.querySelector(
-    ':scope > .a-le-row',
-  ) as HTMLElement | null
+  // Hit-test the `.a-le-row` child, not the wrapper — the wrapper's height
+  // balloons when children are rendered.
+  const rowEl = hit.el.querySelector(':scope > .a-le-row') as HTMLElement | null
   const rowRect = (rowEl ?? hit.el).getBoundingClientRect()
   dragState.value.instruction = computeInstruction({
     pointer: { x: clientX, y: clientY },
@@ -736,17 +847,15 @@ const onPointerMove = (e: PointerEvent) => {
 }
 
 const applyInstruction = (inst: ExecutableInstruction, sourceKey: ListEditorKey) => {
-  const res = editor.moveTo(sourceKey, inst.parentKey, inst.index)
-  if (res === null) {
+  const ok = controller.moveTo(sourceKey, inst.parentKey, inst.index)
+  if (!ok) {
     showWarningT('common.sortable.error.maxDeepExceed')
     forceRerender.value++
     nextTick(() => initSortables())
     return
   }
   markMoved(sourceKey)
-  // The dragged row landed as a new first child — expand the target so the
-  // just-moved row stays visible instead of disappearing into a collapsed
-  // branch. Only needed when we created a new parent (makeChild === true).
+  // makeChild: expand the new parent so the just-moved row doesn't vanish into a collapsed branch.
   if (inst.makeChild && inst.parentKey !== null) {
     childrenExpandedKeys.value.add(inst.parentKey)
   }
@@ -756,9 +865,7 @@ const initSortables = () => {
   destroySortables()
   if (!dragEnabled.value) return
   if (!rowsContainer.value) return
-  const groups = Array.from(
-    rowsContainer.value.querySelectorAll<HTMLElement>('.' + GROUP_CLASS),
-  )
+  const groups = Array.from(rowsContainer.value.querySelectorAll<HTMLElement>('.' + GROUP_CLASS))
   for (const group of groups) {
     const sortable = useSortable(group, [], {
       group: { name: 'a-nested', pull: true, put: true },
@@ -774,8 +881,8 @@ const initSortables = () => {
         const draggedEl = event.item as HTMLElement
         const id = parseKey(draggedEl.getAttribute('data-id'))
         if (id === null) return
-        const draggedNode = editor.findNode(id).node
-        const subtreeDepth = draggedNode ? editor.calculateSubtreeDepth(draggedNode) : 1
+        const draggedNode = controller.findNode(id).node
+        const subtreeDepth = draggedNode ? controller.calculateSubtreeDepth(draggedNode) : 1
         dragState.value = {
           sourceKey: id,
           sourceSubtreeDepth: subtreeDepth,
@@ -784,9 +891,8 @@ const initSortables = () => {
         document.addEventListener('pointermove', onPointerMove, { passive: true })
       },
       onMove: (event) => {
-        // Track pointer via SortableJS's event stream too (redundant with
-        // document pointermove but keeps `instruction` in sync when the
-        // browser coalesces pointermove events during fast drags).
+        // Also track the pointer via SortableJS's stream — keeps `instruction`
+        // in sync when the browser coalesces pointermove events during fast drags.
         const orig = (event as unknown as { originalEvent?: Event }).originalEvent
         if (orig) {
           if ('clientX' in orig && 'clientY' in orig) {
@@ -798,8 +904,7 @@ const initSortables = () => {
             }
           }
         }
-        // Always refuse SortableJS's own DOM insertion — our overlay and
-        // `editor.moveTo` in onEnd drive the actual move.
+        // Refuse SortableJS's own DOM insertion — onEnd's `editor.moveTo` drives the move.
         return false
       },
       onEnd: () => {
@@ -819,10 +924,11 @@ const initSortables = () => {
 
 const parseKey = (raw: string | null): ListEditorKey | null => {
   if (raw === null || raw === '') return null
+  // Numeric key only when `data-id` is a pure integer string (incl. negative temp
+  // ids like "-1"); else a DocId/UUID. The old `n > 0` test sent negative temp ids
+  // to the string branch, so a freshly-added row's move marked the wrong key.
   const n = stringToInt(raw)
-  if (n > 0) return n
-  // Fallback to string keys (DocId)
-  return raw
+  return String(n) === raw ? n : raw
 }
 
 watch(
@@ -840,8 +946,7 @@ watch(
   },
 )
 
-// Rebuild sortable instances whenever the tree shape changes during drag/drop mode —
-// otherwise newly rendered groups would not be draggable.
+// Rebuild sortables when the tree shape changes during drag mode, else newly rendered groups aren't draggable.
 watch(
   () => viewItemsDecorated.value.map((v) => v.key).join('|'),
   () => {
@@ -857,15 +962,11 @@ onBeforeUnmount(() => {
   document.removeEventListener('pointermove', onPointerMove)
 })
 
-// Visual props derived from the current instruction. `null` = overlay hidden
-// — either because no instruction is active, or because the instruction is
-// `blocked`. The optional connector is a thin rail from the drop line up to
-// the row whose level dictates the insert (previous sibling or the ancestor
-// being joined as sibling of). Positions are computed from getBoundingClientRect
-// rather than CSS anchor positioning: nested row elements in a deep tree
-// aren't always reachable from an overlay-level anchor() call (Chrome's
-// anchor reachability rule excludes some deeply-nested descendants), so
-// JS measurement is both simpler and more reliable here.
+// Overlay visual props from the current instruction; `null` = hidden (no
+// instruction, or blocked). The optional connector is a rail from the drop line
+// up to the row whose level dictates the insert. Measured via getBoundingClientRect
+// rather than CSS anchor positioning: Chrome's anchor-reachability rule excludes
+// some deeply-nested descendants, so JS measurement is simpler and more reliable.
 type OverlayVisual = {
   line: { top: number; left: number; right: number }
   connector: { top: number; height: number; left: number } | null
@@ -875,24 +976,19 @@ const overlayVisual = computed<OverlayVisual | null>(() => {
   const state = dragState.value
   if (!state || state.instruction === null || !rowsContainer.value) return null
   const inst = state.instruction
-  // Blocked drops render nothing on purpose — the silent empty space IS the
-  // "not here" signal. No warning-coloured ghost of the attempted target.
+  // Blocked drops render nothing — the silent empty space is the "not here" signal.
   if (inst.type === 'blocked') return null
   const refWrapper = rowsContainer.value.querySelector<HTMLElement>(
     `.a-le-row-wrapper[data-id="${CSS.escape(String(inst.refKey))}"]`,
   )
   if (!refWrapper) return null
-  const rowEl = refWrapper.querySelector<HTMLElement>(
-    ':scope > .a-le-row',
-  )
+  const rowEl = refWrapper.querySelector<HTMLElement>(':scope > .a-le-row')
   const containerRect = rowsContainer.value.getBoundingClientRect()
   const rowRect = (rowEl ?? refWrapper).getBoundingClientRect()
 
   const lineLeft = ANCHOR_X + inst.depth * INDENT_PX
   const lineTop =
-    inst.refEdge === 'top'
-      ? rowRect.top - containerRect.top
-      : rowRect.bottom - containerRect.top
+    inst.refEdge === 'top' ? rowRect.top - containerRect.top : rowRect.bottom - containerRect.top
   const line = { top: lineTop, left: lineLeft, right: 16 }
 
   let connector: OverlayVisual['connector'] = null
@@ -901,9 +997,7 @@ const overlayVisual = computed<OverlayVisual | null>(() => {
       `.a-le-row-wrapper[data-id="${CSS.escape(String(inst.levelRowKey))}"]`,
     )
     if (levelWrapper) {
-      const levelRow = levelWrapper.querySelector<HTMLElement>(
-        ':scope > .a-le-row',
-      )
+      const levelRow = levelWrapper.querySelector<HTMLElement>(':scope > .a-le-row')
       const levelRect = (levelRow ?? levelWrapper).getBoundingClientRect()
       const levelCentreY = levelRect.top - containerRect.top + levelRect.height / 2
       if (levelCentreY < lineTop) {
@@ -919,15 +1013,20 @@ const overlayVisual = computed<OverlayVisual | null>(() => {
   return { line, connector }
 })
 
+// With a `factory`, the editor inserts through the controller; without one it
+// stays emit-only so legacy `@add` consumers drive the insert. The `add` event
+// fires either way.
 const onAddClick = () => {
   if (!canAdd.value) return
   requestAutoOpen()
+  if (props.factory) controller.addItem()
   emit('add', undefined)
 }
 
 const onRowAddAfterClick = (vi: NestedViewItem<TItem>) => {
   if (!canInteract.value) return
   requestAutoOpen()
+  if (props.factory) controller.addAfter(vi.key, undefined, vi.childrenAllowed)
   emit('add', { afterId: vi.key, childrenAllowed: vi.childrenAllowed })
 }
 
@@ -937,17 +1036,15 @@ const onAddChildClick = (vi: NestedViewItem<TItem>) => {
   requestAutoOpen()
   childrenExpandedKeys.value.add(vi.key)
   emit('add-child', vi)
-  // Append to the end of existing children — matches the root-level "Add
-  // item" button's semantic (append to end of root). Drag-drop make-child
-  // still lands at index 0 because the drop line there is visually at the
-  // gap immediately below the parent.
+  // Append to the end of children, matching the root "Add item" semantic.
+  // (Drag-drop make-child still lands at index 0 — its drop line sits just below the parent.)
+  if (props.factory) controller.addChild(vi.key, undefined, true)
   emit('add', { parentId: vi.key, childrenAllowed: true })
 }
 
 const onEditClick = (vi: NestedViewItem<TItem>) => {
   if (!canInteract.value || reorderMode.value) return
-  // Clicking the edit affordance while already editing closes the form — so the
-  // pencil button works as a toggle just like clicking the row header.
+  // Clicking edit while already editing closes the form, so the pencil toggles like the row header.
   if (editingKeys.value.has(vi.key)) {
     onCloseClick(vi)
     return
@@ -958,7 +1055,7 @@ const onEditClick = (vi: NestedViewItem<TItem>) => {
   emit('edit', vi)
 }
 
-// Chevron click — toggles tree children visibility.
+// Toggles tree children visibility (distinct from the readonly-detail body below).
 const onChevronClick = (vi: NestedViewItem<TItem>) => {
   if (props.disabled || props.loading) return
   const key = vi.key
@@ -968,7 +1065,7 @@ const onChevronClick = (vi: NestedViewItem<TItem>) => {
   emit('item-expand', vi, !currently)
 }
 
-// Detail body toggle — controls the row's readonly-detail body (separate from tree).
+// Toggles the row's readonly-detail body (separate from tree children).
 const onDetailToggle = (vi: NestedViewItem<TItem>) => {
   if (props.disabled || props.loading) return
   const key = vi.key
@@ -984,7 +1081,6 @@ const isRowClickable = (vi: DecoratedNestedViewItem<TItem>): boolean => {
   if (reorderMode.value) return false
   if (vi.editing || vi.expanded) return true
   if (!props.readonly && props.showEditButton) return true
-  if (props.readonly && hasReadonlyDetail.value) return true
   return false
 }
 
@@ -1009,11 +1105,21 @@ const {
   onDeleteConfirm: (raw) => (props.onDeleteConfirm ? props.onDeleteConfirm(raw) : true),
   onDelete: (raw) => props.onDelete?.(raw),
   onDeleted: (vi) => {
-    editor.deleteItem(vi.key)
     editingKeys.value.delete(vi.key)
     editingSnapshots.value.delete(vi.key)
     detailExpandedKeys.value.delete(vi.key)
     childrenExpandedKeys.value.delete(vi.key)
+    const deferred = props.deleteMode === 'deferred'
+    // A delete in reorder mode is a session change: deferred reverts on Cancel, immediate stays gone
+    // (re-applied after Cancel's snapshot-restore).
+    if (reorderMode.value) {
+      if (deferred) sessionDeferredDeletes.value.add(vi.key)
+      else sessionImmediateDeletes.value.add(vi.key)
+    }
+    // Controller owns removal (mirrors the flat editors): a deferred saved-row delete is tombstoned
+    // (counts as unsaved); immediate skips it (already deleted on the backend). Runs before the
+    // `deleted` emit so a consumer's handler still receives `vi.raw`.
+    controller.deleteItem(vi.key, { trackDeleted: deferred })
     emit('deleted', vi)
   },
   disableDeleteConfirm: () => props.disableDeleteConfirm,
@@ -1040,20 +1146,19 @@ const onCloseClick = (vi: NestedViewItem<TItem>) => {
 }
 
 const moveUp = (id: ListEditorKey) => {
-  if (editor.moveUp(id)) markMoved(id)
+  if (controller.moveUp(id)) markMoved(id)
 }
 const moveDown = (id: ListEditorKey) => {
-  if (editor.moveDown(id)) markMoved(id)
+  if (controller.moveDown(id)) markMoved(id)
 }
 const moveTop = (id: ListEditorKey) => {
-  if (editor.moveTop(id)) markMoved(id)
+  if (controller.moveTop(id)) markMoved(id)
 }
 const moveBottom = (id: ListEditorKey) => {
-  if (editor.moveBottom(id)) markMoved(id)
+  if (controller.moveBottom(id)) markMoved(id)
 }
 const doIndent = (vi: NestedViewItem<TItem>) => {
-  const res = editor.indent(vi.key)
-  if (res === null) {
+  if (!controller.indent(vi.key)) {
     showWarningT('common.sortable.error.maxDeepExceed')
     return
   }
@@ -1061,25 +1166,22 @@ const doIndent = (vi: NestedViewItem<TItem>) => {
   emit('indent', vi)
 }
 const doOutdent = (vi: NestedViewItem<TItem>) => {
-  const res = editor.outdent(vi.key)
-  if (res === null) return
+  if (!controller.outdent(vi.key)) return
   markMoved(vi.key)
   emit('outdent', vi)
 }
 
-const resolveCompactText = (raw: TItem, key: ListEditorKey): string =>
-  resolveCompactTextUtil(raw, key, {
-    compactField: props.compactField,
-    fallback: t('common.sortable.itemFallback'),
-  })
+const resolveCompactText = (raw: TItem): string =>
+  resolveCompactTextUtil(raw, { compactField: props.compactField })
 
-const { resolveValidation } = useValidationRegistry<TItem>({
-  getValidationState: (item, key, index) => props.getValidationState?.(item, key, index) ?? null,
-})
+// Row validation from the controller's gated `rowState` — red rail shows only
+// once the row is unsaved or `validateAll()` ran.
+// `editing` → the controller reads amber (not red) while the row is being filled in. (QA 85050 b7)
+const resolveValidation = (raw: TItem, key?: ListEditorKey): ListEditorValidationState =>
+  key === undefined ? null : controller.rowState(raw, key, editingKeys.value.has(key))
 
-// Per-key actions cache: stable identity per row, see equivalent block in
-// AListEditor for rationale. Closures capture key (stable) and look up
-// the current vi via findVi at call time.
+// Per-key actions cache for stable per-row identity (see AListEditor). Closures
+// capture the stable key and look up the current vi via findVi at call time.
 type ActionsBundle = {
   edit: () => void
   save: () => Promise<void> | void
@@ -1096,29 +1198,62 @@ type ActionsBundle = {
   moveBottom: () => void
   indent: () => void
   outdent: () => void
-  update: (data: TItem) => NestedTree<TItem>
+  update: (data: TItem) => void
 }
 const actionsCache = new Map<ListEditorKey, ActionsBundle>()
 const getActions = (key: ListEditorKey): ActionsBundle => {
   let actions = actionsCache.get(key)
   if (!actions) {
     actions = {
-      edit: () => { const vi = findVi(key); if (vi) onEditClick(vi) },
-      save: () => { const vi = findVi(key); if (vi) return onSaveClick(vi) },
-      cancel: () => { const vi = findVi(key); if (vi) onCancelClick(vi) },
-      close: () => { const vi = findVi(key); if (vi) onCloseClick(vi) },
-      delete: async () => { const vi = findVi(key); if (vi) await onDeleteClick(vi) },
-      addAfter: () => { const vi = findVi(key); if (vi) onRowAddAfterClick(vi) },
-      addChild: () => { const vi = findVi(key); if (vi) onAddChildClick(vi) },
-      toggleExpand: () => { const vi = findVi(key); if (vi) onChevronClick(vi) },
-      toggleDetail: () => { const vi = findVi(key); if (vi) onDetailToggle(vi) },
+      edit: () => {
+        const vi = findVi(key)
+        if (vi) onEditClick(vi)
+      },
+      save: () => {
+        const vi = findVi(key)
+        if (vi) return onSaveClick(vi)
+      },
+      cancel: () => {
+        const vi = findVi(key)
+        if (vi) onCancelClick(vi)
+      },
+      close: () => {
+        const vi = findVi(key)
+        if (vi) onCloseClick(vi)
+      },
+      delete: async () => {
+        const vi = findVi(key)
+        if (vi) await onDeleteClick(vi)
+      },
+      addAfter: () => {
+        const vi = findVi(key)
+        if (vi) onRowAddAfterClick(vi)
+      },
+      addChild: () => {
+        const vi = findVi(key)
+        if (vi) onAddChildClick(vi)
+      },
+      toggleExpand: () => {
+        const vi = findVi(key)
+        if (vi) onChevronClick(vi)
+      },
+      toggleDetail: () => {
+        const vi = findVi(key)
+        if (vi) onDetailToggle(vi)
+      },
       moveUp: () => moveUp(key),
       moveDown: () => moveDown(key),
       moveTop: () => moveTop(key),
       moveBottom: () => moveBottom(key),
-      indent: () => { const vi = findVi(key); if (vi) doIndent(vi) },
-      outdent: () => { const vi = findVi(key); if (vi) doOutdent(vi) },
-      update: (data: TItem) => editor.updateItem(key, data),
+      indent: () => {
+        const vi = findVi(key)
+        if (vi) doIndent(vi)
+      },
+      outdent: () => {
+        const vi = findVi(key)
+        if (vi) doOutdent(vi)
+      },
+      update: (data: TItem) => controller.updateItem(key, data),
     }
     actionsCache.set(key, actions)
   }
@@ -1136,7 +1271,7 @@ watch(
 )
 
 const buildSlotProps = (vi: DecoratedNestedViewItem<TItem>) => ({
-  item: { ...vi, validationState: resolveValidation(vi.raw as TItem, vi.key, vi.index) },
+  item: { ...vi, validationState: resolveValidation(vi.raw as TItem, vi.key) },
   raw: vi.raw,
   index: vi.index,
   key: vi.key,
@@ -1163,13 +1298,14 @@ const buildSlotProps = (vi: DecoratedNestedViewItem<TItem>) => ({
   canOutdent: vi.canOutdent,
   canAddChild: vi.canAddChild,
   touch: isTouch.value,
+  stateKeyPrefix: rowStateScope.prefixFor(vi.key),
   actions: getActions(vi.key),
 })
 
 const toolbarSlotProps = computed(() => ({
   applying: applying.value,
-  hasPendingChanges: hasPendingChanges.value,
-  movedCount: movedCount.value,
+  hasPendingChanges: nestedPendingChanges.value,
+  movedCount: nestedPendingCount.value,
   error: applyError.value,
   actions: {
     apply: applyReorder,
@@ -1242,21 +1378,17 @@ const moveToPositionContext = computed<{
 } | null>(() => {
   const target = moveToPositionTarget.value
   if (!target) return null
-  const found = editor.findNode(target.key)
+  const found = controller.findNode(target.key)
   const siblings = found.parent?.children ?? modelValue.value.children
-  const idx = siblings.findIndex(
-    (s) => (s.data[props.keyField] as ListEditorKey) === target.key,
-  )
+  const idx = siblings.findIndex((s) => keyOf(s.data) === target.key)
   return {
-    parentId: found.parent ? (found.parent.data[props.keyField] as ListEditorKey) : null,
+    parentId: found.parent ? keyOf(found.parent.data) : null,
     total: siblings.length,
     currentIndex: idx,
   }
 })
 const moveToPositionLabel = computed<string>(() =>
-  moveToPositionTarget.value
-    ? resolveCompactText(moveToPositionTarget.value.raw, moveToPositionTarget.value.key)
-    : '',
+  moveToPositionTarget.value ? resolveCompactText(moveToPositionTarget.value.raw) : '',
 )
 const openMoveToPosition = (vi: DecoratedNestedViewItem<TItem>) => {
   if (!props.showMoveToPosition) return
@@ -1269,7 +1401,7 @@ const onMoveToPositionConfirm = (newIndex: number) => {
   moveToPositionTarget.value = null
   if (!ctx || !target) return
   if (newIndex === ctx.currentIndex) return
-  if (editor.moveTo(target.key, ctx.parentId, newIndex)) {
+  if (controller.moveTo(target.key, ctx.parentId, newIndex)) {
     markMoved(target.key)
   }
 }
@@ -1281,33 +1413,29 @@ const openChangeParent = (vi: DecoratedNestedViewItem<TItem>) => {
   changeParentTarget.value = vi
   changeParentDialogOpen.value = true
 }
-const onChangeParentConfirm = (
-  parentId: ListEditorKey | null,
-  position: 'first' | 'last',
-) => {
+const onChangeParentConfirm = (parentId: ListEditorKey | null, position: 'first' | 'last') => {
   const target = changeParentTarget.value
   changeParentTarget.value = null
   if (!target) return
-  // Determine sibling count under the new parent so 'last' becomes the right
-  // numeric index. For 'first' the index is 0.
+  // Sibling count under the new parent so 'last' resolves to the right index ('first' = 0).
   let siblingCount = 0
   if (parentId === null) {
     siblingCount = modelValue.value.children.length
   } else {
-    const found = editor.findNode(parentId)
+    const found = controller.findNode(parentId)
     siblingCount = found.node?.children?.length ?? 0
   }
   const targetIndex = position === 'first' ? 0 : siblingCount
-  if (editor.moveTo(target.key, parentId, targetIndex)) {
+  if (controller.moveTo(target.key, parentId, targetIndex)) {
     markMoved(target.key)
     if (parentId !== null) childrenExpandedKeys.value.add(parentId)
   }
 }
 
-// Aggregated display flags + helpers passed into each <LeNestedRow>. Recomputed
-// reactively when any underlying dependency changes.
+// Aggregated display flags + helpers passed into each <LeNestedRow>.
 const rowContext = computed(() => ({
   reorderMode: reorderMode.value,
+  readonly: props.readonly,
   canInteract: canInteract.value,
   dragEnabled: dragEnabled.value,
   showExpandToggle: props.showExpandToggle,
@@ -1323,13 +1451,11 @@ const rowContext = computed(() => ({
   keyboardNav,
   isRowClickable,
   resolveCompactText,
-  resolveValidation: (raw: TItem, key?: ListEditorKey, index?: number) =>
-    resolveValidation(raw, key, index),
+  resolveValidation: (raw: TItem, key?: ListEditorKey) => resolveValidation(raw, key),
   buildSlotProps,
 }))
 
-// Event callback bundle — each handler mutates the main component's local state
-// (editingKeys, expandedKeys, etc.) or delegates to the editor composable.
+// Event callback bundle passed to each row.
 const rowCallbacks = {
   onRowClick,
   onChevronClick,
@@ -1350,53 +1476,37 @@ const rowCallbacks = {
   openChangeParent,
 }
 
-const rootViewItems = computed(() =>
-  viewItemsDecorated.value.filter((v) => v.parentKey === null),
-)
+const rootViewItems = computed(() => viewItemsDecorated.value.filter((v) => v.parentKey === null))
 
-// Expose imperative API — mirrors legacy ASortableNested signatures for easier
-// migration of admin-cms consumers (LinkedListManage calls these on the ref).
-// These methods assume the caller has already persisted the change server-side,
-// so they re-capture the dirty baseline — the affected items should not render
-// as "unsaved" immediately after this call.
-//
-// All four `*ById` aliases are kept for backward-compat with the pre-Phase-7
-// `ASortableNested` API. New consumers should call `editor.addItem` /
-// `editor.deleteItem` / `editor.updateItem` directly via the exposed handle
-// (canonical names match the flat editors). The aliases will be removed in
-// the next major.
-
-/** @deprecated Use `addItem(data, { afterId, childrenAllowed })` directly. */
-const addAfterId = (
-  targetId: ListEditorKey | null,
-  data: TItem,
-  childrenAllowed: boolean,
-) => {
-  const res = editor.addItem(data, { afterId: targetId ?? undefined, childrenAllowed })
-  nextTick(() => captureDirtyBaseline())
-  return res
+// Imperative aliases mirroring the legacy ASortableNested signatures so existing
+// consumers keep working. They assume the caller persists server-side, so they
+// re-baseline via `controller.commit()` (rows don't render "unsaved" after the
+// call) and return the live model. New consumers should use the controller handle directly.
+
+/** @deprecated Use `addItem(data, { afterId, childrenAllowed })` on the handle. */
+const addAfterId = (targetId: ListEditorKey | null, data: TItem, childrenAllowed: boolean) => {
+  controller.addItem(data, { afterId: targetId ?? undefined, childrenAllowed })
+  nextTick(() => controller.commit())
+  return modelValue.value
 }
-/** @deprecated Use `addItem(data, { parentId, asFirstChild: true, childrenAllowed })`. */
-const addChildToId = (
-  targetId: ListEditorKey,
-  data: TItem,
-  childrenAllowed: boolean,
-) => {
+/** @deprecated Use `addChild(parentKey, data, childrenAllowed)` on the handle. */
+const addChildToId = (targetId: ListEditorKey, data: TItem, childrenAllowed: boolean) => {
   childrenExpandedKeys.value.add(targetId)
-  const res = editor.addItem(data, { parentId: targetId, asFirstChild: true, childrenAllowed })
-  nextTick(() => captureDirtyBaseline())
-  return res
+  // Legacy "prepend as first child" semantic (canonical `addChild` appends to the end).
+  controller.addItem(data, { parentId: targetId, asFirstChild: true, childrenAllowed })
+  nextTick(() => controller.commit())
+  return modelValue.value
 }
-/** @deprecated Use `deleteItem(id)` instead. */
+/** @deprecated Use `deleteItem(id)` on the handle. */
 const removeById = (id: ListEditorKey) => {
-  editor.deleteItem(id)
+  controller.deleteItem(id)
   editingKeys.value.delete(id)
   editingSnapshots.value.delete(id)
   detailExpandedKeys.value.delete(id)
   childrenExpandedKeys.value.delete(id)
-  nextTick(() => captureDirtyBaseline())
+  nextTick(() => controller.commit())
 }
-/** @deprecated Use `updateItem(id, data)` instead. */
+/** @deprecated Use `updateItem(id, data)` on the handle. */
 const updateData = (
   id: ListEditorKey,
   data: TItem,
@@ -1404,71 +1514,99 @@ const updateData = (
   _position: unknown = null,
   _markUnsaved: unknown = null,
 ) => {
-  editor.updateItem(id, data)
-  nextTick(() => captureDirtyBaseline())
+  controller.updateItem(id, data)
+  nextTick(() => controller.commit())
 }
 
-const unsavedKeysModel = defineModel<Set<ListEditorKey>>('unsavedKeys', {
-  default: () => new Set<ListEditorKey>(),
-})
+// Total distinct unconfirmed changes (added/edited/moved/reparented rows + deferred deletions) — a
+// delete counts even though its row is gone. Drives the unsaved-section label + the exposed handle.
+const unsavedCount = controller.unsavedCount
 
-const internalUnsavedKeys = computed<Set<ListEditorKey>>(() => {
-  const out = new Set<ListEditorKey>()
-  for (const vi of viewItemsDecorated.value) {
-    if (vi.unsaved) out.add(vi.key)
-  }
-  return out
-})
+// Re-baseline as saved, clear the moved set, close open edits. Legacy name kept.
+const clearUnsavedState = () => {
+  controller.commit()
+  movedKeys.value = new Set()
+  clearEditing()
+}
 
-const { hasUnsavedChanges, unsavedCount, clearUnsavedState } = useUnsavedKeysSync({
-  unsavedKeysModel,
-  internalUnsavedKeys,
-  onClearAll: () => {
-    captureDirtyBaseline()
-    movedKeys.value = new Set()
-  },
-  onClearKey: (key) => {
-    rebaselineKey(key)
-    movedKeys.value.delete(key)
-  },
+// Registers this editor as a named unsaved-changes section when a label is passed.
+useUnsavedSection(() =>
+  props.unsavedSectionLabel
+    ? { label: props.unsavedSectionLabel, dirty: controller.hasUnsaved.value }
+    : [],
+)
+
+// Expose the controller handle plus legacy aliases and reorder/expand controls.
+// Entries after the spread override controller methods where the historic name or
+// return shape differs (e.g. `viewItems` is this component's expand-aware list).
+// Reveal for a blocked save: open invalid rows AND expand the offender's ancestor chain so a
+// collapsed nested row becomes visible. Shared by the exposed validateAll + scope reveal-on-touch.
+const revealNestedInvalid = (): boolean =>
+  validateAllAndReveal(controller, (key) => {
+    let ancestor = controller.findNode(key).parent
+    while (ancestor) {
+      childrenExpandedKeys.value.add(keyOf(ancestor.data))
+      ancestor = controller.findNode(keyOf(ancestor.data)).parent
+    }
+    const vi = controller.viewItems.value.find((v) => v.key === key)
+    if (vi) beginEdit(vi)
+  })
+
+// Auto-bridge the editor's aggregate validity into the consumer's `validation-scope` collector so a
+// plain `$invalid` save gate blocks (and reveals) a collapsed invalid row. No-op without the prop.
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss -- construction-time opt-in, read once
+useListEditorScopeValidity({
+  hasErrors: controller.hasErrors,
+  validationScope: props.validationScope,
+  validateProvided: props.validate !== undefined,
+  reveal: revealNestedInvalid,
 })
 
-defineExpose({
-  addItem: editor.addItem,
+defineExpose<
+  NestedListEditorHandle<TItem> & {
+    addAfterId: typeof addAfterId
+    addChildToId: typeof addChildToId
+    removeById: typeof removeById
+    updateData: typeof updateData
+    resetDirtyBaseline: () => void
+    hasUnsavedChanges: typeof controller.hasUnsaved
+    unsavedCount: typeof unsavedCount
+    clearUnsavedState: () => void
+    enterReorderMode: () => void
+    cancelReorderMode: () => void
+    applyReorder: () => Promise<void>
+    expand: (id: ListEditorKey) => void
+    collapse: (id: ListEditorKey) => void
+    toggleExpand: (id: ListEditorKey) => void
+    expandDetail: (id: ListEditorKey) => void
+    collapseDetail: (id: ListEditorKey) => void
+  }
+>({
+  ...controller,
+  validateAll: revealNestedInvalid,
+  // Legacy aliases (pre-v2 ASortableNested API).
   addAfterId,
   addChildToId,
   removeById,
   updateData,
-  updateItem: editor.updateItem,
-  deleteItem: editor.deleteItem,
-  moveUp: editor.moveUp,
-  moveDown: editor.moveDown,
-  moveTop: editor.moveTop,
-  moveBottom: editor.moveBottom,
-  indent: editor.indent,
-  outdent: editor.outdent,
-  moveTo: editor.moveTo,
-  recalculatePositions: editor.recalculatePositions,
-  viewItems: editor.viewItems,
   resetDirtyBaseline,
-  hasUnsavedChanges,
+  hasUnsavedChanges: controller.hasUnsaved,
   unsavedCount,
   clearUnsavedState,
+  // Expand-aware flattened view (controller's own `viewItems` ignores collapse state).
+  viewItems: flatViewItems,
   enterReorderMode,
   cancelReorderMode,
   applyReorder,
-  // Tree children visibility (expand/collapse a branch)
   expand: (id: ListEditorKey) => childrenExpandedKeys.value.add(id),
   collapse: (id: ListEditorKey) => childrenExpandedKeys.value.delete(id),
   toggleExpand: (id: ListEditorKey) => {
     if (childrenExpandedKeys.value.has(id)) childrenExpandedKeys.value.delete(id)
     else childrenExpandedKeys.value.add(id)
   },
-  // Row readonly-detail body visibility
   expandDetail: (id: ListEditorKey) => detailExpandedKeys.value.add(id),
   collapseDetail: (id: ListEditorKey) => detailExpandedKeys.value.delete(id),
 })
-
 </script>
 
 <template>
@@ -1503,18 +1641,16 @@ defineExpose({
           </h3>
           <div class="a-le-header-actions">
             <template v-if="reorderMode">
-              <!-- Reorder-mode header: pending-changes count + Cancel/Apply.
-                   Replaces the old sticky bottom toolbar — the actions sit
-                   where the "Reorder" button lives in view mode, so the eye
-                   doesn't have to hunt down the bottom of the widget. -->
+              <!-- Reorder-mode header: pending count + Cancel/Apply, sitting where
+                   the "Reorder" button lives in view mode (not a bottom toolbar). -->
               <slot
                 name="reorder-toolbar"
                 v-bind="toolbarSlotProps"
               >
                 <LeStatus
-                  :class="{ 'a-le-toolbar-status--pending': hasPendingChanges }"
-                  :has-pending-changes="hasPendingChanges"
-                  :pending-count="movedCount"
+                  :class="{ 'a-le-toolbar-status--pending': nestedPendingChanges }"
+                  :has-pending-changes="nestedPendingChanges"
+                  :pending-count="nestedPendingCount"
                   :error="applyError"
                 />
                 <VBtn
@@ -1531,7 +1667,7 @@ defineExpose({
                   size="small"
                   prepend-icon="mdi-check"
                   :loading="applying"
-                  :disabled="applying || !hasPendingChanges"
+                  :disabled="applying || !nestedPendingChanges"
                   @click="applyReorder"
                 >
                   {{ t('common.sortable.reorderApply') }}
@@ -1548,18 +1684,14 @@ defineExpose({
                 @click="toggleExpandAll"
               >
                 <VIcon
-                  :icon="
-                    allExpanded ? 'mdi-unfold-less-horizontal' : 'mdi-unfold-more-horizontal'
-                  "
+                  :icon="allExpanded ? 'mdi-unfold-less-horizontal' : 'mdi-unfold-more-horizontal'"
                   size="18"
                 />
                 <VTooltip
                   activator="parent"
                   location="bottom"
                   :text="
-                    allExpanded
-                      ? t('common.sortable.collapseAll')
-                      : t('common.sortable.expandAll')
+                    allExpanded ? t('common.sortable.collapseAll') : t('common.sortable.expandAll')
                   "
                 />
               </VBtn>
@@ -1574,9 +1706,7 @@ defineExpose({
                 @click="toggleExpandAll"
               >
                 {{
-                  allExpanded
-                    ? t('common.sortable.collapseAll')
-                    : t('common.sortable.expandAll')
+                  allExpanded ? t('common.sortable.collapseAll') : t('common.sortable.expandAll')
                 }}
               </VBtn>
               <slot
@@ -1657,7 +1787,6 @@ defineExpose({
         >
           <LeEmptyState
             :title="emptyTitleResolved"
-            :text="emptyTextResolved"
             :add-label="addLabelResolved"
             :can-add="canAdd"
             @add="onAddClick"
@@ -1736,11 +1865,9 @@ defineExpose({
           </LeNestedRow>
         </div>
 
-        <!-- Drop indicator overlay — only rendered for valid drops. Horizontal
-             line at a row edge (depth encoded in `left` offset) plus an
-             optional vertical connector rail linking the line up to the row
-             whose level the insert will match. Blocked drops render nothing
-             at all — the silent empty space IS the "not here". -->
+        <!-- Drop indicator overlay (valid drops only): horizontal line at a row
+             edge (depth in `left`) + an optional vertical connector rail to the
+             row whose level the insert matches. -->
         <template v-if="overlayVisual !== null">
           <div
             v-if="overlayVisual.connector !== null"
@@ -1798,10 +1925,10 @@ defineExpose({
       v-model="changeParentDialogOpen"
       :tree="modelValue"
       :source-key="changeParentTarget?.key ?? null"
-      :key-field="keyField"
+      :key-field="keyFieldName"
       :max-depth="maxDepth"
       :resolve-label="resolveCompactText"
-      :calculate-subtree-depth="editor.calculateSubtreeDepth"
+      :calculate-subtree-depth="controller.calculateSubtreeDepth"
       @confirm="onChangeParentConfirm"
     />
 
@@ -1838,8 +1965,8 @@ defineExpose({
 @use './styles/tokens';
 @use './styles/shared';
 
-// Variant-specific rules for ANestedSortableListEditor — depth-aware padding,
-// tree toggle caret, children groups, drop indicator overlay, drag clone.
+// Nested-variant rules — depth-aware padding, tree toggle caret, children
+// groups, drop indicator overlay, drag clone.
 .a-nested-list-editor {
   // Depth-aware left padding — caret column + indent per depth level.
   .a-le-row-header {
@@ -1859,10 +1986,8 @@ defineExpose({
     flex-direction: column;
   }
 
-  // Toolbar-status uses the shorthand `font: 500 13px/1 var(...)` — the
-  // shared class emits the equivalent longhand for the flat variants. Re-apply
-  // the shorthand here so the nested variant keeps its explicit line-height
-  // reset.
+  // Re-apply the `font` shorthand (shared class uses longhand for flat variants)
+  // so the nested variant keeps its explicit line-height reset.
   .a-le-toolbar-status {
     font: 500 13px/1 var(--v-font-body, inherit);
   }
@@ -1874,37 +1999,32 @@ defineExpose({
 }
 
 .a-nested-list-editor {
-  // Root-level rows carry a bolder title weight to anchor the visual
-  // hierarchy without separate header rows.
+  // Root rows get a bolder title weight to anchor the hierarchy without header rows.
   .a-le-row:not(.a-le-row--child) .a-le-title {
     font-weight: 600;
   }
 
-  // Reorder mode — depth-aware padding matches the flat variant's shape but
-  // offset by the row's indent level.
+  // Reorder mode — flat-variant padding offset by the row's indent level.
   .a-le-row--reorder .a-le-row-header {
     padding-left: calc(12px + var(--nested-depth, 0) * var(--le-indent));
     padding-right: 8px;
     gap: 8px;
   }
 
-  // Active (editing / readonly-expanded) tree-toggle picks up the primary
-  // tint so the whole header reads "active" together with the title color.
+  // Active (editing / readonly-expanded) tree-toggle picks up the primary tint
+  // so the header reads "active" together with the title color.
   .a-le-row--editing &__tree-toggle,
   .a-le-row--expanded &__tree-toggle {
     color: var(--le-primary);
   }
 
-  // Children wrapper — flat layout; depth is conveyed by the row's
-  // padding-left indent alone (no background tint or tree guide line).
+  // Children wrapper — depth conveyed by the row's padding-left indent alone.
   &__children {
     position: relative;
   }
 
-  // Triangle-caret toggle — VBtn-text-style circular button: transparent by
-  // default, subtle tinted circle on hover so the affordance is obvious.
-  // Size matches the flat icon-btn rhythm (24×24) with the triangle
-  // optically centred.
+  // Triangle-caret toggle — circular text-style button (24×24), transparent
+  // with a subtle tinted circle on hover.
   &__tree-toggle {
     width: 24px;
     height: 24px;
@@ -1920,7 +2040,9 @@ defineExpose({
     color: rgb(0 0 0 / 54%);
     z-index: 2;
     flex-shrink: 0;
-    transition: background 0.15s, color 0.15s;
+    transition:
+      background 0.15s,
+      color 0.15s;
 
     &:hover {
       background: rgb(0 0 0 / 5%);
@@ -1933,8 +2055,7 @@ defineExpose({
     }
   }
 
-  // Spacer keeps caret column width reserved on leaf rows so titles align
-  // vertically across siblings regardless of whether they have children.
+  // Reserve caret column width on leaf rows so titles align across siblings.
   &__tree-toggle--spacer,
   &__tree-toggle--empty {
     width: 24px;
@@ -1960,9 +2081,8 @@ defineExpose({
     transform: translate(0, 1px) rotate(90deg);
   }
 
-  // Source row + every descendant inside the dragged subtree — dimmed and
-  // made non-hittable during drag. `!important` on display beats SortableJS's
-  // inline `display: none` under `forceFallback: true`.
+  // Dragged subtree (source + descendants) dimmed and non-hittable. `!important`
+  // on display beats SortableJS's inline `display: none` under `forceFallback`.
   .a-le-row-wrapper.a-le-row--chosen,
   .a-le-row-wrapper.a-le-row-wrapper--drop-disabled {
     display: flex !important;
@@ -1970,23 +2090,19 @@ defineExpose({
     pointer-events: none !important;
   }
 
-  // Hide SortableJS's own placeholder — our overlay (drop-line / drop-box)
-  // is the sole landing indicator.
+  // Hide SortableJS's placeholder — our overlay is the sole landing indicator.
   .a-le-row--ghost {
     display: none !important;
   }
 
-  // No floating clone at the cursor — for nested trees the line overlay
-  // carries all the "where will it land" information; a ghost card dragging
-  // behind the pointer is pure noise. The selector matches the wrapper to
-  // beat the `.row-wrapper--drop-disabled` rule that the clone inherits.
+  // No floating clone — the line overlay carries all the "where it lands" info.
+  // Wrapper selector beats the `.row-wrapper--drop-disabled` rule the clone inherits.
   .a-le-row-wrapper.a-le-row--drag {
     display: none !important;
   }
 
-  // Drop indicator line — 2 px primary stroke with an 8 px terminal dot on
-  // the left that bleeds 4 px outside the anchor column. Absolute-positioned
-  // inside `__rows` (position: relative).
+  // Drop indicator line — 2px primary stroke with an 8px left terminal dot,
+  // absolute-positioned inside `__rows`.
   &__drop-line {
     position: absolute;
     height: 2px;
@@ -2008,8 +2124,7 @@ defineExpose({
     transform: translateY(-50%);
   }
 
-  // Connector rail — thin vertical line linking the drop indicator line up
-  // to the row whose level is being matched.
+  // Connector rail — vertical line linking the drop line up to the level-match row.
   &__drop-connector {
     position: absolute;
     width: 2px;
@@ -2025,10 +2140,8 @@ defineExpose({
     opacity: 0.4;
   }
 
-  // "+N" children indicator — rendered on every row with children, but
-  // hidden in the normal DOM. Only becomes visible inside the SortableJS
-  // drag clone (carrying `.a-le-row--drag`) so the user sees that the
-  // whole branch will follow the item being moved.
+  // "+N" children indicator — hidden in the normal DOM, visible only inside the
+  // SortableJS drag clone so the user sees the whole branch will follow.
   &__drag-count {
     display: none;
     align-items: center;
@@ -2048,9 +2161,8 @@ defineExpose({
   }
 }
 
-// Container-query driven desktop layout — depth-aware padding-left so the
-// inline form aligns with the row title column: 16 (pad) + depth*24 (indent)
-// + 24 (caret) + 10 (gap) = 50 + depth*indent.
+// Desktop — depth-aware padding-left aligns the inline form with the title column:
+// 16 (pad) + 24 (caret) + 10 (gap) = 50, plus depth*indent.
 @container le-shell (min-width: 769px) {
   .a-nested-list-editor {
     .a-le-row--editing .a-le-row-body,
@@ -2063,9 +2175,8 @@ defineExpose({
   }
 }
 
-// Narrow-container / mobile layout — tighter indent so deep branches still
-// fit, taller rows for comfortable touch targets, always-visible actions,
-// status badge dropped to make room for the title.
+// Narrow / mobile — tighter indent so deep branches fit, taller touch rows,
+// always-visible actions, status badge dropped to make room for the title.
 /* stylelint-disable selector-max-compound-selectors */
 @container le-shell (max-width: 768px) {
   .a-nested-list-editor {
diff --git a/src/labs/listEditor/ASortableListEditor.vue b/src/labs/listEditor/ASortableListEditor.vue
index 9b3b7241..5330351d 100644
--- a/src/labs/listEditor/ASortableListEditor.vue
+++ b/src/labs/listEditor/ASortableListEditor.vue
@@ -13,17 +13,33 @@ import {
   type ComputedRef,
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
 import { useContainerWidth } from '@/labs/listEditor/composables/useContainerWidth'
+import {
+  useHasCoarsePointer,
+  useIsTouchDevice,
+} from '@/labs/listEditor/composables/useIsTouchDevice'
 import { useKeyboardNav } from '@/labs/listEditor/composables/useKeyboardNav'
-import { useValidationRegistry } from '@/labs/listEditor/composables/useValidationRegistry'
 import { useSortable } from '@vueuse/integrations/useSortable'
-import { useListEditor } from '@/labs/listEditor/composables/useListEditor'
+import {
+  useListEditorController,
+  type GetKey,
+  type ListEditorHandle,
+  type ListEditorValidationResult,
+  type PositionAction,
+  type PositionOption,
+  type PositionStrategy,
+} from '@/labs/listEditor/composables/useListEditorController'
+import {
+  provideListEditorStateScope,
+  useListEditorStateEntry,
+  type ListEditorStateBindings,
+} from '@/labs/listEditor/composables/useListEditorStateScope'
 import { resolveCompactText as resolveCompactTextUtil } from '@/labs/listEditor/composables/resolveCompactText'
-import { useUnsavedKeysSync } from '@/labs/listEditor/composables/useUnsavedKeysSync'
-import { useDirtyBaseline } from '@/labs/listEditor/composables/useDirtyBaseline'
+import { useUnsavedSection } from '@/labs/unsavedGuard/useUnsavedSection'
 import { useDeleteDialog } from '@/labs/listEditor/composables/useDeleteDialog'
 import { useInlineEditing } from '@/labs/listEditor/composables/useInlineEditing'
+import { validateAllAndReveal } from '@/labs/listEditor/utils/revealInvalidRows'
+import { useListEditorScopeValidity } from '@/labs/listEditor/composables/useListEditorScopeValidity'
 import {
   useReorderMode,
   SharedReorderRegistryKey,
@@ -44,9 +60,9 @@ import { cloneDeep } from '@/utils/common'
 import { stringToInt } from '@/utils/string'
 import type {
   ListEditorKey,
+  ListEditorValidationScope,
   ListEditorValidationState,
   ListViewItem,
-  PositionHint,
 } from '@/labs/listEditor/types/listEditorTypes'
 
 export interface DecoratedViewItem<T> extends ListViewItem<T> {
@@ -56,13 +72,14 @@ export interface DecoratedViewItem<T> extends ListViewItem<T> {
   dirty: boolean
   moved: boolean
   unsaved: boolean
+  validationState: ListEditorValidationState
   canMoveUp: boolean
   canMoveDown: boolean
 }
 
 export type ReorderMode = 'view' | 'reorder'
 
-// Public slot scope shapes — see AListEditor for the rationale on hoisting.
+// Public slot scope shapes — see AListEditor for the hoisting rationale.
 export interface RowActions<TItem> {
   edit: () => void
   save: () => Promise<void> | void
@@ -75,10 +92,10 @@ export interface RowActions<TItem> {
   moveDown: () => void
   moveTop: () => void
   moveBottom: () => void
-  update: (data: TItem) => TItem[]
+  update: (next: TItem | Partial<TItem> | ((current: TItem) => TItem)) => void
 }
 export interface RowSlotProps<TItem extends Record<string, any>> {
-  item: DecoratedViewItem<TItem> & { validationState: ListEditorValidationState }
+  item: DecoratedViewItem<TItem>
   raw: TItem
   index: number
   key: ListEditorKey
@@ -93,6 +110,13 @@ export interface RowSlotProps<TItem extends Record<string, any>> {
   canMoveUp: boolean
   canMoveDown: boolean
   touch: boolean
+  /**
+   * Row-scoped `state-key` prefix. Thread it down to any list editor rendered in this slot and set
+   * its `:state-key="`${stateKeyPrefix}:someList`"` — that editor's controller then lives in THIS
+   * editor's scope and survives the row collapsing (which unmounts the whole slot subtree). Entries
+   * under this prefix are disposed when the row is removed.
+   */
+  stateKeyPrefix: string
   actions: RowActions<TItem>
 }
 export interface ToolbarSlotProps {
@@ -122,12 +146,73 @@ export interface AddButtonSlotProps {
   props: { onClick: () => void }
   actions: { add: () => void }
 }
+export interface ViewBodySlotProps<TItem extends Record<string, any>> {
+  items: TItem[]
+  mode: ReorderMode
+  actions: { enterReorderMode: () => void }
+}
 
 export interface Props<TItem extends Record<string, any>> {
-  keyField?: string
-  positionField?: string
-  positionMultiplier?: number
-  updatePosition?: boolean
+  /**
+   * New-row factory (required). The add button + "add after this item" insert
+   * `factory()` into the model directly through the controller (positions
+   * renumbered) — no consumer `@add` push handler is needed.
+   */
+  factory?: () => TItem
+  /**
+   * Stable row identity. Default `'id'`. Never point this at the position field.
+   * Typed `string` (not `keyof TItem`): a bare `keyof TItem` on a generic
+   * component compiles to a Boolean-only runtime type that coerces `get-key="id"` to `true`.
+   */
+  getKey?: string | ((item: TItem) => ListEditorKey)
+  /**
+   * Managed order field. Default `'position'`. `false` opts out. Typed `string`
+   * before `false` so the runtime prop type is `[String, Boolean, Object]`:
+   * `keyof TItem` would be Boolean-only, and `false` listed first would coerce
+   * `position="position"` (value == prop name) to `true`.
+   */
+  position?:
+    | string
+    | false
+    | {
+        field: string
+        multiplier?: number
+        strategy?: PositionStrategy
+        strategyOverrides?: Partial<Record<PositionAction, PositionStrategy>>
+      }
+  /**
+   * Extra fields to drop from the dirty content-hash (position is always
+   * dropped). Use when a SEPARATE nested editor tracks a row's child collection,
+   * so editing a child doesn't flip the parent amber. The field is still saved.
+   */
+  dirtyExclude?: string[]
+  /** Per-row validity — `true` (or `{ valid: true }`) = VALID. Drives the red rail + save guard. */
+  validate?: (item: TItem) => ListEditorValidationResult
+  /**
+   * Vuelidate `$scope` (the same one the consumer's row forms / save-gate collector use). When set,
+   * the editor registers its aggregate validity under it, so a plain `v$.$invalid` save gate blocks
+   * AND reveals a collapsed invalid row — no `validateAll()` call needed in the save flow. Omit to
+   * keep legacy behavior (gate the save on the exposed `validateAll()` yourself); `false` opts out.
+   */
+  validationScope?: ListEditorValidationScope | false
+  /**
+   * Opt-in lifted state controller (from consumer's `useListEditorController()`)
+   * so editor state survives this component's unmount/remount (pinned-widget
+   * relocation). When omitted the editor owns an internal controller.
+   */
+  editor?: ListEditorHandle<TItem>
+  /**
+   * Persist this editor's controller in the nearest ANCESTOR editor's row-state scope under this
+   * key, instead of owning it. Use it for an editor rendered in another editor's `#item` slot: that
+   * slot is behind a `v-if`, so collapsing the row unmounts this editor and a component-owned
+   * controller would re-baseline the already-edited data on re-expand (losing amber, moved rows,
+   * tombstones and the red rail). Derive the key from the row slot's `stateKeyPrefix`, e.g.
+   * `:state-key="`${stateKeyPrefix}:answers`"`. Options stay declared here, on this tag: the
+   * controller is built from THIS editor's `factory`/`get-key`/`position`/`dirty-exclude`/`validate`
+   * and rebound to each new instance's model on remount. Ignored when `:editor` is passed, and a
+   * no-op without an ancestor scope.
+   */
+  stateKey?: string
 
   readonly?: boolean
   disabled?: boolean
@@ -148,12 +233,17 @@ export interface Props<TItem extends Record<string, any>> {
 
   addLabel?: string | null
   emptyTitle?: string | null
-  emptyText?: string | null
 
   disableRowClick?: boolean
   disableDeleteConfirm?: boolean
   deleteConfirmTitle?: string | null
   deleteConfirmText?: string | null
+  /**
+   * How a row delete persists. `deferred` (default): the row disappears but the deletion counts as an
+   * unconfirmed change until save (revertible until then, incl. via reorder Cancel). `immediate`: the
+   * consumer deletes on the backend — the dialog says it is irreversible and it does NOT read as unsaved.
+   */
+  deleteMode?: 'immediate' | 'deferred'
 
   closeVariant?: 'auto' | 'icon' | 'labeled'
 
@@ -165,43 +255,38 @@ export interface Props<TItem extends Record<string, any>> {
   showMoveToPosition?: boolean
 
   /**
-   * Embedded mode — this editor is nested inside another editor's `#item`
-   * slot and follows a shared `v-model:mode` from the outer editor. When
-   * set, the editor:
-   *   - hides its own Reorder button + Cancel/Apply toolbar
-   *   - skips the snapshot/restore (the outer editor's deep snapshot covers
-   *     nested data, so cancel at the top reverts everything)
-   *   - paints lighter chrome so it visually reads as part of the parent row
-   * Pair with `v-model:mode` bound to the same ref the outer editor uses.
+   * Embedded mode — nested inside another editor's `#item` slot, following a
+   * shared `v-model:mode`. Hides own Reorder button + toolbar, skips the
+   * snapshot/restore (the outer editor's deep snapshot covers nested data), and
+   * paints lighter chrome. Pair with `v-model:mode` bound to the outer ref.
    */
   embedded?: boolean
   /**
-   * Allow rows to remain inline-editable while the editor is in reorder
-   * mode. By default, entering reorder closes any open inline edit and the
-   * `#item` slot body is hidden — this keeps the visual focus on dragging.
-   * Set this when the open row's body needs to render in reorder mode (e.g.
-   * the parent editor of a shared-reorder pair, where the open question
-   * exposes its embedded answers list for dragging).
+   * Keep rows inline-editable in reorder mode. By default entering reorder
+   * closes any open edit and hides the `#item` body to focus on dragging. Set
+   * for a shared-reorder pair's parent, where the open row exposes its embedded
+   * answers list for dragging.
    */
   allowEditInReorder?: boolean
 
-  getValidationState?: (
-    item: TItem,
-    key: ListEditorKey,
-    index: number,
-  ) => ListEditorValidationState
-
   onDeleteConfirm?: (item: TItem) => Promise<boolean> | boolean
   onDelete?: (item: TItem) => Promise<void> | void
   onItemSave?: (item: TItem) => Promise<void> | void
   onReorderApply?: (items: TItem[]) => Promise<void> | void
+
+  /** Register as a named unsaved-changes section under this (translated) label. */
+  unsavedSectionLabel?: string
 }
 
 const props = withDefaults(defineProps<Props<TItem>>(), {
-  keyField: 'id',
-  positionField: 'position',
-  positionMultiplier: 1,
-  updatePosition: false,
+  factory: undefined,
+  getKey: undefined,
+  position: undefined,
+  dirtyExclude: undefined,
+  validate: undefined,
+  validationScope: undefined,
+  editor: undefined,
+  stateKey: undefined,
   readonly: false,
   disabled: false,
   loading: false,
@@ -217,11 +302,11 @@ const props = withDefaults(defineProps<Props<TItem>>(), {
   showAddAfterAction: false,
   addLabel: null,
   emptyTitle: null,
-  emptyText: null,
   disableRowClick: false,
   disableDeleteConfirm: false,
   deleteConfirmTitle: null,
   deleteConfirmText: null,
+  deleteMode: 'deferred',
   closeVariant: 'auto',
   loadingKeys: null,
   showReorderToggle: true,
@@ -230,15 +315,14 @@ const props = withDefaults(defineProps<Props<TItem>>(), {
   showMoveToPosition: false,
   embedded: false,
   allowEditInReorder: false,
-  getValidationState: undefined,
   onDeleteConfirm: undefined,
   onDelete: undefined,
   onItemSave: undefined,
   onReorderApply: undefined,
+  unsavedSectionLabel: undefined,
 })
 
 const emit = defineEmits<{
-  add: [positionHint: PositionHint | undefined]
   edit: [item: ListViewItem<TItem>]
   deleted: [item: ListViewItem<TItem>]
   close: [item: ListViewItem<TItem>]
@@ -257,6 +341,7 @@ defineSlots<{
   'reorder-toolbar'?: (props: ToolbarSlotProps) => unknown
   empty?: (props: EmptySlotProps) => unknown
   'add-button'?: (props: AddButtonSlotProps) => unknown
+  'view-body'?: (props: ViewBodySlotProps<TItem>) => unknown
   item?: (props: RowSlotProps<TItem>) => unknown
   'item-compact'?: (props: RowSlotProps<TItem>) => unknown
   'item-readonly'?: (props: RowSlotProps<TItem>) => unknown
@@ -272,49 +357,97 @@ const mode = defineModel<ReorderMode>('mode', { default: 'view' })
 
 const { t } = useI18n()
 const slots = useSlots()
-const display = useDisplay()
 
 const rootEl = useTemplateRef<HTMLElement>('rootEl')
 const { isNarrow } = useContainerWidth(rootEl)
 
-const isTouch = computed<boolean>(() => display.platform.value.touch)
-
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-const editor = useListEditor<TItem>(modelValue, {
-  keyField: props.keyField,
-  positionField: props.positionField,
-  positionMultiplier: props.positionMultiplier,
-  updatePosition: props.updatePosition,
+const isTouch = useIsTouchDevice()
+const hasCoarsePointer = useHasCoarsePointer()
+
+// State controller (v2). `factory`/`getKey`/`position`/`validate` are construction-time options read
+// once to seed the controller, not reactive props — hence the suppressed reactivity-loss rule.
+// Undefined options fall back to controller defaults ('id' / 'position' / always-valid).
+/* eslint-disable vue/no-setup-props-reactivity-loss */
+const controllerOptions: ListEditorStateBindings<TItem> = {
+  get: () => modelValue.value,
+  set: (v) => (modelValue.value = v),
+  factory: props.factory,
+  getKey: props.getKey as GetKey<TItem> | undefined,
+  position: props.position as PositionOption<TItem> | undefined,
+  dirtyExclude: () => props.dirtyExclude ?? [],
+  validate: props.validate,
+}
+// Precedence: an explicitly lifted `:editor` wins; then a `state-key`'d entry persisted in the
+// nearest ancestor editor's row-state scope (built from the options above, rebound to this instance
+// on every remount); else this component owns the controller — today's behaviour, unchanged.
+const stateEntry = props.editor
+  ? null
+  : useListEditorStateEntry<TItem>(props.stateKey, controllerOptions)
+const controller =
+  props.editor ?? stateEntry?.handle ?? useListEditorController<TItem>(controllerOptions)
+
+// Local mirror of the controller's key resolution so rendered rows key the same
+// way the controller tracks them (v2 spec point 7).
+const getKeyOpt = props.getKey ?? 'id'
+/* eslint-enable vue/no-setup-props-reactivity-loss */
+
+// Row-state scope for THIS editor's `#item` slot subtree: a nested editor with a `state-key` builds
+// its controller in here, so it outlives the row collapsing (which unmounts the slot). When this
+// editor is itself persisted, the scope comes from its own entry — so the chain holds at any depth.
+const rowStateScope = provideListEditorStateScope(stateEntry?.childScope ?? null)
+const keyOf = (item: TItem): ListEditorKey =>
+  typeof getKeyOpt === 'function'
+    ? getKeyOpt(item)
+    : (item[getKeyOpt as keyof TItem] as ListEditorKey)
+
+// Managed position field (for the row position view field + move-to-position
+// dialog). Mirrors the controller's resolution.
+const positionFieldName = computed<string>(() => {
+  const p = props.position
+  if (p === undefined) return 'position'
+  if (p === false) return 'position'
+  if (typeof p === 'object') return p.field as string
+  return p as string
 })
 
-const expandedKeys = ref<Set<ListEditorKey>>(new Set())
+// Keyed render projection (key + index + raw + position); the controller owns the data.
+const viewItems = computed<ListViewItem<TItem>[]>(() =>
+  modelValue.value.map((raw, index) => ({
+    key: keyOf(raw),
+    index,
+    raw,
+    position: raw[positionFieldName.value] as number | undefined,
+  })),
+)
 
-// Initial snapshot of each item, keyed by row key. Compared against current data to
-// detect "dirty" (unsaved) rows. Reset externally after a successful parent-form save.
-// `position` is deliberately stripped out: drag-drop rewrites it on every row
-// whose flat index shifts as a side-effect, and flagging those unmoved rows
-// as dirty would paint ghost "unsaved" markers. The per-row visual cue is
-// what matters; position data still flows to the parent on apply.
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-const { captureDirtyBaseline, rebaselineKey, isItemDirty } = useDirtyBaseline<TItem>(
-  () =>
-    modelValue.value.map((item) => ({
-      key: item[props.keyField] as ListEditorKey,
-      data: item,
-    })),
-  { excludeFields: [props.positionField] },
+// Drop the persisted controllers of rows that no longer exist. `post` so the removed row's subtree
+// has already unmounted (its editors released their entries) before we stop their effect scopes.
+watch(
+  () => viewItems.value.map((vi) => String(vi.key)).join('|'),
+  () => rowStateScope.retainOwners(viewItems.value.map((vi) => vi.key)),
+  { flush: 'post' },
 )
 
-// Keys the user has actively moved during this reorder session. Clearing
-// this set is part of "mark current data as saved" — paired with
-// captureDirtyBaseline in the exposed resetDirtyBaseline so the orange
-// badges go away when consumers confirm a server save.
-const movedKeys = ref<Set<ListEditorKey>>(new Set())
+const expandedKeys = ref<Set<ListEditorKey>>(new Set())
 
-const resetDirtyBaseline = () => {
-  captureDirtyBaseline()
-  movedKeys.value = new Set()
-}
+// Reorder-session moved set — component view state, distinct from the
+// controller's persistent moved tracking. Drives the toolbar's "N pending
+// changes" counter; cleared on every mode transition by `useReorderMode`.
+const movedKeys = ref<Set<ListEditorKey>>(new Set())
+// Deletes made DURING the current reorder session, split by mode. Deferred ones count in the toolbar
+// and are reverted on Cancel (row restored, tombstone cleared). Immediate (backend) ones are re-applied
+// on Cancel so they stay gone — else Cancel's snapshot-restore would resurrect a row already deleted on
+// the server (a phantom a later save could re-create).
+const sessionDeferredDeletes = ref<Set<ListEditorKey>>(new Set())
+const sessionImmediateDeletes = ref<Set<ListEditorKey>>(new Set())
+// Rows ADDED during the current reorder session ("Pridať za túto položku"). Count in the toolbar so
+// Apply enables instead of trapping the user; Cancel drops them (snapshot-restore removes rows that
+// weren't in the enter-time snapshot).
+const sessionAddedKeys = ref<Set<ListEditorKey>>(new Set())
+// Rows MOVED during the current reorder session. On Cancel the snapshot-restore undoes the reorder, so
+// these keys' persistent "moved" flag must be dropped from the controller too (else they stay falsely
+// amber + arm the leave guard for a reorder that never happened). Apply keeps them (persisted on save).
+const sessionMovedKeys = ref<Set<ListEditorKey>>(new Set())
 
 const snapshot = shallowRef<TItem[] | null>(null)
 
@@ -336,12 +469,10 @@ const {
   rowsContainer,
   rowSelector: '.a-le-row',
   isInlineEdit,
-  restoreSnapshot: (key, data) => editor.updateItem(key, data),
-  watchKeys: () => modelValue.value.map((it) => it[props.keyField] as ListEditorKey),
+  restoreSnapshot: (key, data) => controller.updateItem(key, data),
+  watchKeys: () => modelValue.value.map((it) => keyOf(it)),
   findEntry: (key) => {
-    const hit = modelValue.value.find(
-      (it) => (it[props.keyField] as ListEditorKey) === key,
-    )
+    const hit = modelValue.value.find((it) => keyOf(it) === key)
     return hit ? { data: hit } : null
   },
   afterAutoOpen: (key) => {
@@ -378,17 +509,61 @@ const {
   canEnterReorder,
   embedded: embeddedRef,
   onEnter: () => {
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
+    sessionAddedKeys.value = new Set()
+    sessionMovedKeys.value = new Set()
     if (!allowEditInReorderRef.value) {
       clearEditing()
       expandedKeys.value.clear()
     }
   },
   onExternalEnter: () => {
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
+    sessionAddedKeys.value = new Set()
+    sessionMovedKeys.value = new Set()
     if (!allowEditInReorderRef.value) {
       clearEditing()
       expandedKeys.value.clear()
     }
   },
+  // Cancel reverts the session. The composable's snapshot-restore has already brought EVERY deleted row
+  // back into the model; reconcile the controller: deferred deletes are truly reverted (clear tombstone,
+  // row stays), immediate deletes are re-applied (row removed again — it is gone on the backend and must
+  // not resurrect or be re-created by a later save).
+  onCancel: () => {
+    for (const key of sessionDeferredDeletes.value) controller.restoreDeleted(key)
+    for (const key of sessionImmediateDeletes.value)
+      controller.deleteItem(key, { trackDeleted: false })
+    // Snapshot-restore already undid the reorder — drop the controller's "moved" flag for exactly the
+    // rows moved this session (edits/adds keep their amber), so a cancelled reorder leaves no false unsaved.
+    controller.clearMoved(sessionMovedKeys.value)
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
+    sessionAddedKeys.value = new Set()
+    sessionMovedKeys.value = new Set()
+  },
+  // Apply keeps the session's changes (deferred deletes persist on the entity's main save; moved rows stay
+  // amber in the controller until the consumer commits after their save — only reset the session tracker).
+  onApplyEnd: () => {
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
+    sessionAddedKeys.value = new Set()
+    sessionMovedKeys.value = new Set()
+  },
+  // Embedded editor exit (parent Cancel or Apply — it owns the snapshot, we never do). On a parent
+  // Cancel the snapshot-restore resurrects any row we deleted IMMEDIATELY on the backend; re-remove it so
+  // it stays gone. On Apply it never came back, so `deleteItem` is a no-op. Deferred deletes need nothing:
+  // the controller's re-add watch drops their tombstone when the restore brings the row back.
+  onEmbeddedExit: () => {
+    for (const key of sessionImmediateDeletes.value)
+      controller.deleteItem(key, { trackDeleted: false })
+    sessionDeferredDeletes.value = new Set()
+    sessionImmediateDeletes.value = new Set()
+    sessionAddedKeys.value = new Set()
+    sessionMovedKeys.value = new Set()
+  },
   onReorderApply: (items) => props.onReorderApply?.(items),
   emit: {
     reorderStart: () => emit('reorder-start'),
@@ -399,31 +574,23 @@ const {
   },
 })
 
-// Cross-editor pending-changes aggregation. When this editor is the outer
-// (non-embedded) one in a stacked-editor setup, it provides a registry that
-// embedded children push their own movedCount + hasPendingChanges into.
-// The toolbar's "N pending changes" then totals across all levels — drag a
-// question OR drag an answer inside an open question and the same counter
-// increments either way. When this editor IS embedded, it injects the
-// nearest parent's registry and registers itself.
-// shallowReactive (not reactive) so the stored ComputedRef objects don't get
-// auto-unwrapped — we read `.value` on them inside the aggregator computeds.
-// `embedded` is a setup-time decision; it doesn't flip during a component's
-// lifetime so reading it once at root scope is intentional.
+// Stacked-editor registry: outer collects movedCount + hasChanges from embedded
+// children for the toolbar counter. shallowReactive preserves ComputedRef
+// identity (no auto-unwrap).
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const childContributions = props.embedded
   ? null
   : shallowReactive(
-    new Map<
-      symbol,
-      { count: ComputedRef<number>; hasChanges: ComputedRef<boolean> }
-    >(),
-  )
+      new Map<
+        symbol,
+        { count: ComputedRef<number>; hasChanges: ComputedRef<boolean>; validateAll: () => boolean }
+      >(),
+    )
 
 if (childContributions) {
   const registry: SharedReorderRegistry = {
-    register: (id, count, hasChanges) => {
-      childContributions.set(id, { count, hasChanges })
+    register: (id, count, hasChanges, validateAll) => {
+      childContributions.set(id, { count, hasChanges, validateAll })
     },
     unregister: (id) => {
       childContributions.delete(id)
@@ -432,15 +599,9 @@ if (childContributions) {
   provide(SharedReorderRegistryKey, registry)
 }
 
-if (props.embedded) {
-  const parent = inject(SharedReorderRegistryKey, null)
-  if (parent) {
-    const id = Symbol('le.embedded')
-    parent.register(id, movedCount, hasPendingChanges)
-    onBeforeUnmount(() => parent.unregister(id))
-  }
-}
-
+// Own session moves + each embedded child's FULL pending contribution (moves + its own deferred
+// deletes — children register `totalPendingCount`, see below). The outer's own deferred deletes are
+// added on top in `totalPendingCount`.
 const totalMovedCount = computed<number>(() => {
   let sum = movedCount.value
   if (childContributions) {
@@ -459,113 +620,138 @@ const totalHasPendingChanges = computed<boolean>(() => {
   return false
 })
 
+// Reorder-toolbar pending indicator = session moves + deferred deletes made in the session, so
+// deleting a row in reorder mode no longer reads as "no pending changes" and Apply stays enabled.
+const totalPendingCount = computed<number>(
+  () => totalMovedCount.value + sessionDeferredDeletes.value.size + sessionAddedKeys.value.size,
+)
+const totalPendingChanges = computed<boolean>(
+  () =>
+    totalHasPendingChanges.value ||
+    sessionDeferredDeletes.value.size > 0 ||
+    sessionAddedKeys.value.size > 0,
+)
+
+// An embedded editor pushes its FULL pending contribution — moves AND deferred deletes — up to the
+// nearest non-embedded outer, so deleting a row in an embedded child during a shared reorder lights up
+// the outer's toolbar (count + Apply-enabled) instead of reading "no pending changes". Registered after
+// `totalPendingCount`/`totalPendingChanges` so they exist (TDZ); `validateAllSelf` is a lazy thunk.
+if (props.embedded) {
+  const parent = inject(SharedReorderRegistryKey, null)
+  if (parent) {
+    const id = Symbol('le.embedded')
+    parent.register(id, totalPendingCount, totalPendingChanges, () => validateAllSelf())
+    onBeforeUnmount(() => parent.unregister(id))
+  }
+}
+
 const canAdd = computed(() => canInteract.value && props.showAddButton && !reorderMode.value)
 // Chips mode keeps drag always-on (no mode toggle) on non-touch devices.
 const dragEnabled = computed(
-  () => (reorderMode.value || props.chips) && !isTouch.value && !props.disableDrag,
+  () =>
+    canInteract.value && (reorderMode.value || props.chips) && !isTouch.value && !props.disableDrag,
 )
 
-const addLabelResolved = computed(() => props.addLabel ?? t('common.sortable.add'))
+const addLabelResolved = computed(() =>
+  props.addLabel ? t(props.addLabel) : t('common.sortable.add'),
+)
 const emptyTitleResolved = computed(() => props.emptyTitle ?? t('common.sortable.emptyTitle'))
-const emptyTextResolved = computed(() => props.emptyText ?? t('common.sortable.emptyText'))
 const deleteConfirmTitleResolved = computed(
   () => props.deleteConfirmTitle ?? t('common.sortable.deleteConfirmTitle'),
 )
 const deleteConfirmTextResolved = computed(
-  () => props.deleteConfirmText ?? t('common.sortable.deleteConfirmText'),
+  () =>
+    props.deleteConfirmText ??
+    (props.deleteMode === 'immediate'
+      ? t('common.sortable.deleteConfirmText')
+      : t('common.sortable.deleteConfirmTextDeferred')),
 )
 
 const reorderToggleVisible = computed<boolean>(
   (): boolean =>
-    !props.chips
-    && !props.embedded
-    && props.showReorderToggle
-    && !reorderMode.value
-    && modelValue.value.length > 0,
+    !props.chips &&
+    !props.embedded &&
+    props.showReorderToggle &&
+    !reorderMode.value &&
+    modelValue.value.length > 0,
 )
 
-// When there IS a title and viewport is narrow, the reorder button shrinks to an
-// icon-only round button to keep the single-line header from overflowing.
-const compactReorderButton = computed<boolean>(
-  (): boolean => !!props.title && isNarrow.value,
-)
+// With a title and a narrow viewport, the reorder button shrinks to an icon-only
+// round button to keep the single-line header from overflowing.
+const compactReorderButton = computed<boolean>((): boolean => !!props.title && isNarrow.value)
 
+// Total unconfirmed-change count (added/edited/moved rows + deferred deletions) — a delete lights it
+// up even though its row is gone. Shown as a view-mode header badge + on the handle; in reorder mode
+// the toolbar status shows the session count instead.
+const unsavedCount = controller.unsavedCount
+const unsavedCountVisible = computed(() => !props.readonly && unsavedCount.value > 0)
 const headerVisible = computed<boolean>(
   (): boolean =>
     !!(
-      props.title
-      || slots.header
-      || slots['reorder-toggle']
-      || reorderToggleVisible.value
-      || (reorderMode.value && !props.embedded)
+      props.title ||
+      slots.header ||
+      slots['reorder-toggle'] ||
+      reorderToggleVisible.value ||
+      (reorderMode.value && !props.embedded) ||
+      (!reorderMode.value && unsavedCountVisible.value)
     ),
 )
 
-// Editor band-only header — true when the only thing in the header is the
-// reorder button (no title, no slot). Lets the template float the button
-// over the editor's top-right corner instead of reserving an empty band.
+// True when the header has substantive content (title or custom header slot).
+// When false it still renders as a slim band right-aligning just the
+// reorder/apply controls, holding height across idle ↔ reorder so it doesn't jump.
 const headerHasContent = computed<boolean>(
-  (): boolean =>
-    !!(
-      props.title
-      || slots.header
-      || slots['reorder-toggle']
-      || (reorderMode.value && !props.embedded)
-    ),
+  (): boolean => !!(props.title || slots.header || slots['reorder-toggle'] || slots['view-body']),
 )
 
-// Per-row edit footer (Save + Cancel) is only meaningful if the consumer wants a
-// per-item persist callback. Without it the expectation is that the parent form's
-// global save flushes everything, so we hide the per-row buttons by default.
+// Per-row Save/Cancel footer only matters with a per-item persist callback;
+// otherwise the parent form's global save flushes everything, so hide it.
 const showInlineSaveFooter = computed(() => !!props.onItemSave)
 
-// Tracks only rows the user actively moved (drag, arrow buttons) — snapshot
-// vs current-index diffing would also flag side-effect index shifts, which
-// isn't what the user means by "unsaved".
+// Reorder-session moved marker (drag, arrow buttons) feeding the toolbar counter;
+// the persistent amber `unsaved` flag is the controller's.
 const markMoved = (key: ListEditorKey) => {
   movedKeys.value.add(key)
+  sessionMovedKeys.value.add(key)
 }
 
-// Decoupled dirty pass — see AListEditor for rationale.
-const dirtyKeys = computed<Set<ListEditorKey>>(() => {
-  const out = new Set<ListEditorKey>()
-  for (const item of modelValue.value) {
-    const key = item[props.keyField] as ListEditorKey
-    if (isItemDirty(key, item)) out.add(key)
-  }
-  return out
-})
-
-// Per-key decorator cache — see AListEditor for rationale.
+// Per-key decorator cache — see AListEditor for rationale. `unsaved` (amber) and
+// `validationState` (red rail) come from the controller; `moved` is the
+// reorder-session flag.
 const decoratorCache = new Map<ListEditorKey, DecoratedViewItem<TItem>>()
 const viewItemsDecorated = computed<DecoratedViewItem<TItem>[]>(() => {
   const total = modelValue.value.length
   const next: DecoratedViewItem<TItem>[] = []
   const liveKeys = new Set<ListEditorKey>()
-  for (const vi of editor.viewItems.value) {
+  for (const vi of viewItems.value) {
     liveKeys.add(vi.key)
     const editing = editingKeys.value.has(vi.key)
     const expanded = expandedKeys.value.has(vi.key)
     const loading = props.loadingKeys?.has(vi.key) ?? false
     const moved = movedKeys.value.has(vi.key)
-    const dirty = dirtyKeys.value.has(vi.key)
-    const unsaved = dirty || moved
+    // readonly → no amber markers (can't have unsaved changes; also dodges a
+    // mount-before-load empty baseline). (QA 85050 sweep)
+    const unsaved = props.readonly ? false : controller.isUnsaved(vi.key)
+    const dirty = unsaved
+    // `editing` → the controller reads amber (not red) while the row is being filled in. (QA 85050 b7)
+    const validationState = controller.rowState(vi.raw, vi.key, editing)
     const canMoveUp = vi.index > 0
     const canMoveDown = vi.index < total - 1
     const cached = decoratorCache.get(vi.key)
     if (
-      cached
-      && cached.raw === vi.raw
-      && cached.index === vi.index
-      && cached.position === vi.position
-      && cached.editing === editing
-      && cached.expanded === expanded
-      && cached.loading === loading
-      && cached.dirty === dirty
-      && cached.moved === moved
-      && cached.unsaved === unsaved
-      && cached.canMoveUp === canMoveUp
-      && cached.canMoveDown === canMoveDown
+      cached &&
+      cached.raw === vi.raw &&
+      cached.index === vi.index &&
+      cached.position === vi.position &&
+      cached.editing === editing &&
+      cached.expanded === expanded &&
+      cached.loading === loading &&
+      cached.dirty === dirty &&
+      cached.moved === moved &&
+      cached.unsaved === unsaved &&
+      cached.validationState === validationState &&
+      cached.canMoveUp === canMoveUp &&
+      cached.canMoveDown === canMoveDown
     ) {
       next.push(cached)
       continue
@@ -578,6 +764,7 @@ const viewItemsDecorated = computed<DecoratedViewItem<TItem>[]>(() => {
       dirty,
       moved,
       unsaved,
+      validationState,
       canMoveUp,
       canMoveDown,
     }
@@ -595,6 +782,37 @@ const isEmpty = computed(() => viewItemsDecorated.value.length === 0)
 const findVi = (key: ListEditorKey): DecoratedViewItem<TItem> | undefined =>
   viewItemsDecorated.value.find((v) => v.key === key)
 
+// Programmatically open a row's inline-edit form (e.g. open auto-seeded rows on mount). Multiple
+// rows can be open at once. No-op for chips / when there is no `#item` slot.
+const openRow = (key: ListEditorKey): void => {
+  if (!isInlineEdit.value) return
+  const vi = findVi(key)
+  if (vi) beginEdit(vi)
+}
+const openAll = (): void => {
+  if (!isInlineEdit.value) return
+  for (const vi of viewItemsDecorated.value) beginEdit(vi)
+}
+
+// Validate + reveal this editor's OWN rows (no cascade). The exposed `validateAll`
+// wraps this and also cascades into embedded children; embedded children register
+// this self-only variant so a parent save reveals their invalid rows red too.
+const validateAllSelf = (): boolean =>
+  validateAllAndReveal(controller, (key) => {
+    const vi = viewItems.value.find((v) => v.key === key)
+    if (vi) beginEdit(vi)
+  })
+
+// Auto-bridge the editor's aggregate validity into the consumer's `validation-scope` collector so a
+// plain `$invalid` save gate blocks (and reveals) a collapsed invalid row. No-op without the prop.
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss -- construction-time opt-in, read once
+useListEditorScopeValidity({
+  hasErrors: controller.hasErrors,
+  validationScope: props.validationScope,
+  validateProvided: props.validate !== undefined,
+  reveal: validateAllSelf,
+})
+
 const keyboardNav = useKeyboardNav({
   viewItems: computed(() => viewItemsDecorated.value.map((vi) => ({ key: vi.key }))),
   variant: 'sortable',
@@ -631,9 +849,7 @@ const keyboardNav = useKeyboardNav({
 const moveToPositionDialogOpen = ref<boolean>(false)
 const moveToPositionTarget = shallowRef<DecoratedViewItem<TItem> | null>(null)
 const moveToPositionLabel = computed<string>(() =>
-  moveToPositionTarget.value
-    ? resolveCompactText(moveToPositionTarget.value.raw, moveToPositionTarget.value.key)
-    : '',
+  moveToPositionTarget.value ? resolveCompactText(moveToPositionTarget.value.raw) : '',
 )
 const openMoveToPosition = (vi: DecoratedViewItem<TItem>) => {
   if (!props.showMoveToPosition) return
@@ -645,81 +861,101 @@ const onMoveToPositionConfirm = (newIndex: number) => {
   moveToPositionTarget.value = null
   if (!target) return
   if (newIndex === target.index) return
-  editor.moveItem(target.index, newIndex)
+  controller.moveItem(target.index, newIndex)
   markMoved(target.key)
 }
 
-const resolveCompactText = (raw: TItem, key: ListEditorKey): string =>
-  resolveCompactTextUtil(raw, key, {
-    compactField: props.compactField,
-    fallback: t('common.sortable.itemFallback'),
-  })
+const resolveCompactText = (raw: TItem): string =>
+  resolveCompactTextUtil(raw, { compactField: props.compactField })
 
-const { resolveValidation } = useValidationRegistry<TItem>({
-  getValidationState: (item, key, index) => props.getValidationState?.(item, key, index) ?? null,
-})
-
-// Skip SortableJS entirely on touch devices — touch users reorder via arrows + menu,
-// so the drag/drop library is never needed and there is no point paying its setup cost.
-// The one-shot reads below are intentional: touch detection is fixed at setup time,
-// and dragEnabled's initial value seeds SortableJS; later changes flow via the watch.
+// Always instantiate SortableJS, seeded `disabled: !dragEnabled` and kept in sync
+// by the watch below. It used to be created only when `isTouch` was false at setup
+// — but `isTouch` is a live media query (plug in a mouse, toggle device emulation),
+// and that one-shot read left the instance missing when it later flipped: the drag
+// handle rendered but dragging did nothing. The setup cost this saved on touch
+// devices is not worth a dead handle.
 /* eslint-disable vue/no-ref-object-reactivity-loss */
-if (!isTouch.value) {
-  const sortable = useSortable(rowsContainer, modelValue, {
-    handle: '.a-le-drag-handle',
-    animation: 150,
-    // Force the fallback renderer so `dragClass` is applied to a CSS-controlled
-    // clone that follows the cursor — gives us a custom, row-shaped ghost
-    // instead of the opaque browser-native drag bitmap.
-    forceFallback: true,
-    fallbackTolerance: 3,
-    fallbackOnBody: true,
-    ghostClass: DRAG_GHOST_CLASS,
-    chosenClass: DRAG_CHOSEN_CLASS,
-    dragClass: DRAG_CLASS,
-    disabled: !dragEnabled.value,
-    onEnd: (event) => {
-      // Resolve which row was dragged by reading its data-id attribute
-      // (set via template binding on .row). SortableJS's `event.item` is
-      // the moved DOM element; we only mark that one specific key as moved
-      // rather than diffing the whole list, so siblings that shifted index
-      // as a side-effect stay clean.
-      const el = event.item as HTMLElement
-      const raw = el.getAttribute('data-id')
-      if (raw !== null && raw !== '') {
-        const n = stringToInt(raw)
-        const key: ListEditorKey = n > 0 ? n : raw
-        markMoved(key)
-      }
-      if (props.updatePosition) {
-        modelValue.value = editor.recalculatePositions(modelValue.value) as TItem[]
-      }
-    },
-  })
+const sortable = useSortable(rowsContainer, modelValue, {
+  // The rows container can mount/unmount across mode flips (e.g. a `#view-body`
+  // slot in view mode, rows only in reorder mode). vueuse's default
+  // `tryOnMounted` fires once and would bind to a null ref, leaving SortableJS
+  // dead; `watchElement: true` re-inits whenever the ref populates.
+  watchElement: true,
+  handle: '.a-le-drag-handle',
+  animation: 150,
+  // Force the fallback renderer so `dragClass` applies to a CSS-controlled
+  // clone following the cursor — a row-shaped ghost instead of the opaque
+  // browser-native drag bitmap.
+  forceFallback: true,
+  fallbackTolerance: 3,
+  fallbackOnBody: true,
+  ghostClass: DRAG_GHOST_CLASS,
+  chosenClass: DRAG_CHOSEN_CLASS,
+  dragClass: DRAG_CLASS,
+  disabled: !dragEnabled.value,
+  // Own `onUpdate` REPLACES vueuse's default array-move, which moved the array
+  // and renumbered positions in separate `nextTick`s — a gap that let a
+  // consumer's "sort by position" watch re-sort on stale positions and revert
+  // the drop. One synchronous `controller.moveItem` closes that window so every
+  // observer sees the final order and positions at once.
+  onUpdate: (event) => {
+    const { oldIndex, newIndex, item, from } = event
+    if (oldIndex === undefined || newIndex === undefined) return
+    // Undo SortableJS's DOM relocation so Vue's keyed v-for stays the single
+    // source of truth (mirrors vueuse's removeNode + insertNodeAt).
+    if (item && from) {
+      item.parentNode?.removeChild(item)
+      from.insertBefore(item, from.children[oldIndex] ?? null)
+    }
+    // moveItem rewrites the array, renumbers positions, and records the moved
+    // key — all synchronously.
+    controller.moveItem(oldIndex, newIndex)
+  },
+  onEnd: (event) => {
+    // Mark only the dragged row (via its data-id) moved rather than diffing the
+    // whole list, so siblings that shifted index stay clean. `event.item` is the
+    // `.a-le-row-wrapper` sortable item; the `[data-id]` lives on the inner `.a-le-row`.
+    const el = event.item as HTMLElement
+    // `:scope >` so a consumer editor nested in a `#before-item` slot (its own
+    // `.a-le-row` descendants) can't shadow this row's own id.
+    const raw = (el.querySelector(':scope > .a-le-row') ?? el).getAttribute('data-id')
+    if (raw !== null && raw !== '') {
+      // Numeric key only when `data-id` is a pure integer string (incl. negative
+      // temp ids like "-1"); otherwise keep the UUID-style string. `n > 0`
+      // wrongly sent negative ids down the string branch, landing amber on the
+      // wrong key.
+      const n = stringToInt(raw)
+      const key: ListEditorKey = String(n) === raw ? n : raw
+      markMoved(key)
+    }
+  },
+})
 
-  watch(dragEnabled, (enabled) => {
-    sortable.option('disabled', !enabled)
-  })
-}
+watch(dragEnabled, (enabled) => {
+  sortable.option('disabled', !enabled)
+})
 /* eslint-enable vue/no-ref-object-reactivity-loss */
 
+// Managed add: the controller mints + inserts `factory()` and renumbers
+// positions; the inline-editing watch picks up the new key and auto-opens it.
 const onAddClick = () => {
   if (!canAdd.value) return
   requestAutoOpen()
-  emit('add', undefined)
+  controller.addItem(undefined, undefined)
 }
 
 const onRowAddAfterClick = (vi: ListViewItem<TItem>) => {
   if (!canInteract.value) return
   requestAutoOpen()
-  emit('add', { afterId: vi.key })
+  const key = controller.addItem(undefined, { afterId: vi.key })
+  // Added during a reorder session ("Pridať za túto položku") → count it in the toolbar.
+  if (reorderMode.value && key !== undefined) sessionAddedKeys.value.add(key)
 }
 
 const onEditClick = (vi: ListViewItem<TItem>) => {
   if (!canInteract.value) return
   if (reorderMode.value && !props.allowEditInReorder) return
-  // Toggle: clicking edit while already editing closes the form, matching the
-  // row-header click behaviour.
+  // Clicking edit while already editing closes the form (matches row-header click).
   if (editingKeys.value.has(vi.key)) {
     onCloseClick(vi)
     return
@@ -752,7 +988,6 @@ const isRowClickable = (vi: DecoratedViewItem<TItem>): boolean => {
   if (reorderMode.value && !props.allowEditInReorder) return false
   if (vi.editing || vi.expanded) return true
   if (!props.readonly && props.showEditButton) return true
-  if (props.readonly && hasReadonlyDetail.value) return true
   return false
 }
 
@@ -780,10 +1015,28 @@ const {
   onDeleteConfirm: (raw) => (props.onDeleteConfirm ? props.onDeleteConfirm(raw) : true),
   onDelete: (raw) => props.onDelete?.(raw),
   onDeleted: (vi) => {
-    editor.deleteItem(vi.key)
     editingKeys.value.delete(vi.key)
     editingSnapshots.value.delete(vi.key)
     expandedKeys.value.delete(vi.key)
+    movedKeys.value.delete(vi.key)
+    const deferred = props.deleteMode === 'deferred'
+    // In reorder mode: a deferred delete is a reversible session change (counts in the toolbar,
+    // reverts on Cancel); an immediate delete is already gone on the backend, so drop it from the
+    // reorder snapshot too — else Cancel's snapshot-restore would resurrect it.
+    if (reorderMode.value) {
+      if (sessionAddedKeys.value.has(vi.key)) {
+        // Added AND deleted within the same reorder session — net zero. The controller drops the temp
+        // row with no tombstone, so it must not linger in either counter (was double-counted: L1).
+        sessionAddedKeys.value.delete(vi.key)
+      } else if (deferred) {
+        sessionDeferredDeletes.value.add(vi.key)
+      } else {
+        sessionImmediateDeletes.value.add(vi.key)
+      }
+    }
+    // Controller owns the data: temp rows vanish; a deferred saved-row delete lands in
+    // `getChanges().deleted` + counts as unsaved; immediate skips the tombstone (already persisted).
+    controller.deleteItem(vi.key, { trackDeleted: deferred })
     emit('deleted', vi)
   },
   disableDeleteConfirm: () => props.disableDeleteConfirm || props.chips,
@@ -815,37 +1068,37 @@ const onCloseClick = (vi: ListViewItem<TItem>) => {
 const keyAtIndex = (idx: number): ListEditorKey | null => {
   const item = modelValue.value[idx]
   if (!item) return null
-  return item[props.keyField] as ListEditorKey
+  return keyOf(item)
 }
 
 const moveUp = (idx: number) => {
   if (idx <= 0) return
   const key = keyAtIndex(idx)
-  editor.moveItem(idx, idx - 1)
+  controller.moveItem(idx, idx - 1)
   if (key !== null) markMoved(key)
 }
 const moveDown = (idx: number) => {
   if (idx >= modelValue.value.length - 1) return
   const key = keyAtIndex(idx)
-  editor.moveItem(idx, idx + 1)
+  controller.moveItem(idx, idx + 1)
   if (key !== null) markMoved(key)
 }
 const moveTop = (idx: number) => {
   if (idx <= 0) return
   const key = keyAtIndex(idx)
-  editor.moveItem(idx, 0)
+  controller.moveItem(idx, 0)
   if (key !== null) markMoved(key)
 }
 const moveBottom = (idx: number) => {
   if (idx >= modelValue.value.length - 1) return
   const key = keyAtIndex(idx)
-  editor.moveItem(idx, modelValue.value.length - 1)
+  controller.moveItem(idx, modelValue.value.length - 1)
   if (key !== null) markMoved(key)
 }
 
-// Per-key actions cache: stable identity per row, see equivalent block in
-// AListEditor for rationale. Closures capture key (stable) and look up the
-// current vi via findVi at call time.
+// Per-key actions cache: stable identity per row — see AListEditor for
+// rationale. Closures capture the stable key and resolve the current vi via
+// findVi at call time.
 type ActionsBundle = {
   edit: () => void
   save: () => Promise<void> | void
@@ -858,25 +1111,58 @@ type ActionsBundle = {
   moveDown: () => void
   moveTop: () => void
   moveBottom: () => void
-  update: (data: TItem) => TItem[]
+  update: (next: TItem | Partial<TItem> | ((current: TItem) => TItem)) => void
 }
 const actionsCache = new Map<ListEditorKey, ActionsBundle>()
 const getActions = (key: ListEditorKey): ActionsBundle => {
   let actions = actionsCache.get(key)
   if (!actions) {
     actions = {
-      edit: () => { const vi = findVi(key); if (vi) onEditClick(vi) },
-      save: () => { const vi = findVi(key); if (vi) return onSaveClick(vi) },
-      cancel: () => { const vi = findVi(key); if (vi) onCancelClick(vi) },
-      close: () => { const vi = findVi(key); if (vi) onCloseClick(vi) },
-      delete: async () => { const vi = findVi(key); if (vi) await onDeleteClick(vi) },
-      addAfter: () => { const vi = findVi(key); if (vi) onRowAddAfterClick(vi) },
-      toggleExpand: () => { const vi = findVi(key); if (vi) onExpandClick(vi) },
-      moveUp: () => { const vi = findVi(key); if (vi) moveUp(vi.index) },
-      moveDown: () => { const vi = findVi(key); if (vi) moveDown(vi.index) },
-      moveTop: () => { const vi = findVi(key); if (vi) moveTop(vi.index) },
-      moveBottom: () => { const vi = findVi(key); if (vi) moveBottom(vi.index) },
-      update: (data: TItem) => editor.updateItem(key, data),
+      edit: () => {
+        const vi = findVi(key)
+        if (vi) onEditClick(vi)
+      },
+      save: () => {
+        const vi = findVi(key)
+        if (vi) return onSaveClick(vi)
+      },
+      cancel: () => {
+        const vi = findVi(key)
+        if (vi) onCancelClick(vi)
+      },
+      close: () => {
+        const vi = findVi(key)
+        if (vi) onCloseClick(vi)
+      },
+      delete: async () => {
+        const vi = findVi(key)
+        if (vi) await onDeleteClick(vi)
+      },
+      addAfter: () => {
+        const vi = findVi(key)
+        if (vi) onRowAddAfterClick(vi)
+      },
+      toggleExpand: () => {
+        const vi = findVi(key)
+        if (vi) onExpandClick(vi)
+      },
+      moveUp: () => {
+        const vi = findVi(key)
+        if (vi) moveUp(vi.index)
+      },
+      moveDown: () => {
+        const vi = findVi(key)
+        if (vi) moveDown(vi.index)
+      },
+      moveTop: () => {
+        const vi = findVi(key)
+        if (vi) moveTop(vi.index)
+      },
+      moveBottom: () => {
+        const vi = findVi(key)
+        if (vi) moveBottom(vi.index)
+      },
+      update: (next) => controller.updateItem(key, next),
     }
     actionsCache.set(key, actions)
   }
@@ -894,7 +1180,7 @@ watch(
 )
 
 const buildSlotProps = (vi: DecoratedViewItem<TItem>) => ({
-  item: { ...vi, validationState: resolveValidation(vi.raw as TItem, vi.key, vi.index) },
+  item: vi,
   raw: vi.raw,
   index: vi.index,
   key: vi.key,
@@ -909,13 +1195,14 @@ const buildSlotProps = (vi: DecoratedViewItem<TItem>) => ({
   canMoveUp: vi.canMoveUp,
   canMoveDown: vi.canMoveDown,
   touch: isTouch.value,
+  stateKeyPrefix: rowStateScope.prefixFor(vi.key),
   actions: getActions(vi.key),
 })
 
 const toolbarSlotProps = computed(() => ({
   applying: applying.value,
-  hasPendingChanges: totalHasPendingChanges.value,
-  movedCount: totalMovedCount.value,
+  hasPendingChanges: totalPendingChanges.value,
+  movedCount: totalPendingCount.value,
   error: applyError.value,
   actions: {
     apply: applyReorder,
@@ -933,42 +1220,51 @@ const reorderToggleSlotProps = computed(() => ({
   },
 }))
 
-const unsavedKeysModel = defineModel<Set<ListEditorKey>>('unsavedKeys', {
-  default: () => new Set<ListEditorKey>(),
-})
+// Registers a named unsaved-changes section when the consumer passes a label.
+useUnsavedSection(() =>
+  props.unsavedSectionLabel
+    ? { label: props.unsavedSectionLabel, dirty: controller.hasUnsaved.value }
+    : [],
+)
 
-const internalUnsavedKeys = computed<Set<ListEditorKey>>(() => {
-  const out = new Set<ListEditorKey>()
-  for (const vi of viewItemsDecorated.value) {
-    if (vi.unsaved) out.add(vi.key)
+// Expose the controller handle (validateAll/getPayload/commit/etc. via
+// `useTemplateRef<ListEditorHandle<TItem>>`) plus the reorder-mode controls.
+defineExpose<
+  ListEditorHandle<TItem> & {
+    enterReorderMode: () => void
+    cancelReorderMode: () => void
+    applyReorder: () => Promise<void>
+    openRow: (key: ListEditorKey) => void
+    openAll: () => void
   }
-  return out
-})
-
-const { hasUnsavedChanges, unsavedCount, clearUnsavedState } = useUnsavedKeysSync({
-  unsavedKeysModel,
-  internalUnsavedKeys,
-  onClearAll: () => {
-    captureDirtyBaseline()
+>({
+  ...controller,
+  openRow,
+  openAll,
+  // Saving is separate from the editor's "Apply", so a consumer can commit while still in
+  // reorder mode with an unapplied move. The reorder session (component-level `movedKeys` +
+  // snapshot) is NOT controller state, so re-baseline it here too — otherwise the "N pending
+  // changes" badge lingers after the save and a later Cancel would revert past it.
+  commit: (savedItems?: TItem[]) => {
+    controller.commit(savedItems)
     movedKeys.value = new Set()
+    if (snapshot.value) snapshot.value = cloneDeep(modelValue.value) as TItem[]
   },
-  onClearKey: (key) => {
-    rebaselineKey(key)
-    movedKeys.value.delete(key)
+  // validateAll() also opens invalid rows so a blocked save surfaces WHICH rows
+  // are wrong — their #item form mounts instead of a collapsed red rail (QA 85050
+  // B4-17). The body is gated on `editing` (not `expanded`), so drive `beginEdit`.
+  // Shared with AListEditor + ANestedSortableListEditor via the helper.
+  validateAll: () => {
+    // Cascade into embedded children — a single outer save reveals invalid rows red
+    // at every nesting level (e.g. quiz question turning red must also red its answers).
+    const selfValid = validateAllSelf()
+    if (!childContributions) return selfValid
+    let valid = selfValid
+    for (const child of childContributions.values()) {
+      if (!child.validateAll()) valid = false
+    }
+    return valid
   },
-})
-
-defineExpose({
-  addItem: editor.addItem,
-  deleteItem: editor.deleteItem,
-  updateItem: editor.updateItem,
-  moveItem: editor.moveItem,
-  recalculatePositions: editor.recalculatePositions,
-  viewItems: editor.viewItems,
-  resetDirtyBaseline,
-  hasUnsavedChanges,
-  unsavedCount,
-  clearUnsavedState,
   enterReorderMode,
   cancelReorderMode,
   applyReorder,
@@ -1010,25 +1306,25 @@ defineExpose({
           >
             {{ title }}
           </h3>
+          <span
+            v-if="!reorderMode && unsavedCountVisible"
+            class="a-le-unsaved-count"
+            :data-unsaved-count="unsavedCount"
+          >
+            {{ t('common.sortable.pendingChanges', { count: unsavedCount }) }}
+          </span>
           <div class="a-le-header-actions">
             <template v-if="reorderMode && !embedded">
-              <!-- Reorder-mode header: pending-changes count + Cancel/Apply.
-                   Replaces the old sticky bottom toolbar — the actions sit
+              <!-- Reorder-mode header: pending count + Cancel/Apply, sitting
                    where the "Reorder" button lives in view mode. -->
               <slot
                 name="reorder-toolbar"
                 v-bind="toolbarSlotProps"
               >
-                <span
-                  v-if="!title"
-                  class="a-le-reorder-mode-label"
-                >
-                  {{ t('common.sortable.reorderModeLabel') }}
-                </span>
                 <LeStatus
-                  :class="{ 'a-le-toolbar-status--pending': totalHasPendingChanges }"
-                  :has-pending-changes="totalHasPendingChanges"
-                  :pending-count="totalMovedCount"
+                  :class="{ 'a-le-toolbar-status--pending': totalPendingChanges }"
+                  :has-pending-changes="totalPendingChanges"
+                  :pending-count="totalPendingCount"
                   :error="applyError"
                 />
                 <VBtn
@@ -1045,7 +1341,7 @@ defineExpose({
                   size="small"
                   prepend-icon="mdi-check"
                   :loading="applying"
-                  :disabled="applying || !totalHasPendingChanges"
+                  :disabled="applying || !totalPendingChanges"
                   @click="applyReorder"
                 >
                   {{ t('common.sortable.reorderApply') }}
@@ -1117,6 +1413,18 @@ defineExpose({
         </VAlert>
       </div>
 
+      <div
+        v-else-if="!reorderMode && $slots['view-body']"
+        class="a-le-view-body"
+      >
+        <slot
+          name="view-body"
+          :items="modelValue"
+          :mode="mode"
+          :actions="{ enterReorderMode }"
+        />
+      </div>
+
       <div
         v-else-if="isEmpty"
         class="a-le-state a-le-state--empty"
@@ -1129,7 +1437,6 @@ defineExpose({
         >
           <LeEmptyState
             :title="emptyTitleResolved"
-            :text="emptyTextResolved"
             :add-label="addLabelResolved"
             :can-add="canAdd"
             @add="onAddClick"
@@ -1145,330 +1452,376 @@ defineExpose({
         <div
           v-for="vi in viewItemsDecorated"
           :key="String(vi.key)"
-          :data-id="String(vi.key)"
-          role="listitem"
-          :tabindex="keyboardNav.rowTabindex(vi.key)"
-          class="a-le-row"
-          :class="{
-            'a-le-row--two-rows': twoRows === 'always',
-            'a-le-row--editing': vi.editing,
-            'a-le-row--expanded': vi.expanded,
-            'a-le-row--unsaved': vi.unsaved,
-            'a-le-row--reorder': reorderMode,
-            'a-le-row--grabbed': keyboardNav.isGrabbed(vi.key),
-            'a-le-row--clickable': isRowClickable(vi),
-            [`a-le-row--validation-${resolveValidation(vi.raw, vi.key, vi.index)}`]:
-              resolveValidation(vi.raw, vi.key, vi.index) !== null,
-          }"
-          @keydown="keyboardNav.handleKeydown(vi.key, $event)"
+          class="a-le-row-wrapper"
         >
+          <!-- Interstitial slots render as SIBLINGS of `.a-le-row` (inside this
+               wrapper), so consumer content placed between rows never inherits the
+               row's unsaved/editing/grabbed/validation tint. (QA 85050 BUG-04/05) -->
           <slot
             name="before-item"
             v-bind="buildSlotProps(vi)"
           />
 
           <div
-            class="a-le-row-header"
-            @click="onRowClick(vi)"
+            :data-id="String(vi.key)"
+            role="listitem"
+            :tabindex="keyboardNav.rowTabindex(vi.key)"
+            class="a-le-row"
+            :class="{
+              'a-le-row--two-rows': twoRows === 'always',
+              'a-le-row--editing': vi.editing,
+              'a-le-row--expanded': vi.expanded,
+              'a-le-row--unsaved': vi.unsaved,
+              'a-le-row--reorder': reorderMode,
+              'a-le-row--grabbed': keyboardNav.isGrabbed(vi.key),
+              'a-le-row--clickable': isRowClickable(vi),
+              [`a-le-row--validation-${vi.validationState}`]: vi.validationState !== null,
+            }"
+            @keydown="keyboardNav.handleKeydown(vi.key, $event)"
           >
-            <LeDragHandle v-if="dragEnabled" />
-
-            <div class="a-le-row-main">
-              <slot
-                name="item-compact"
-                v-bind="buildSlotProps(vi)"
-              >
-                <span class="a-le-title">
-                  {{ resolveCompactText(vi.raw, vi.key) }}
-                </span>
-              </slot>
-              <LeUnsavedLabel v-if="vi.unsaved" />
-            </div>
-
             <div
-              v-if="!chips && !reorderMode"
-              class="a-le-status"
+              class="a-le-row-header"
+              @click="onRowClick(vi)"
             >
-              <slot
-                name="item-status"
-                v-bind="buildSlotProps(vi)"
+              <LeDragHandle v-if="dragEnabled" />
+
+              <div class="a-le-row-main">
+                <slot
+                  name="item-compact"
+                  v-bind="buildSlotProps(vi)"
+                >
+                  <span class="a-le-title">
+                    {{ resolveCompactText(vi.raw) }}
+                  </span>
+                </slot>
+                <LeUnsavedLabel
+                  v-if="vi.unsaved"
+                  :dot-only="chips"
+                />
+              </div>
+
+              <div
+                v-if="!chips && !reorderMode"
+                class="a-le-status"
               >
-                <span
-                  v-if="statusField && vi.raw[statusField] != null && vi.raw[statusField] !== ''"
-                  class="a-le-status-badge"
+                <slot
+                  name="item-status"
+                  v-bind="buildSlotProps(vi)"
                 >
-                  {{ vi.raw[statusField] }}
-                </span>
-              </slot>
+                  <span
+                    v-if="statusField && vi.raw[statusField] != null && vi.raw[statusField] !== ''"
+                    class="a-le-status-badge"
+                  >
+                    {{ vi.raw[statusField] }}
+                  </span>
+                </slot>
+              </div>
+
+              <div class="a-le-actions">
+                <slot
+                  name="item-actions"
+                  v-bind="buildSlotProps(vi)"
+                >
+                  <template v-if="chips && canInteract">
+                    <!-- Chips is the one layout that would otherwise swap the arrows out for the handle.
+                         Keep them whenever dragging is unavailable (covers `disable-drag`, which gating on
+                         `isTouch` did not) AND whenever a finger could be used at all — a hybrid gets both,
+                         so putting the mouse down never leaves the row unmovable. Every other layout here
+                         already keeps its arrows unconditionally in reorder mode. -->
+                    <template v-if="(!dragEnabled || hasCoarsePointer) && !disableReorder">
+                      <VBtn
+                        icon
+                        size="x-small"
+                        variant="text"
+                        density="compact"
+                        :active="false"
+                        :disabled="!vi.canMoveUp"
+                        class="a-le-action a-le-action--up"
+                        @click.stop="moveUp(vi.index)"
+                      >
+                        <VIcon
+                          icon="mdi-arrow-up"
+                          size="14"
+                        />
+                      </VBtn>
+                      <VBtn
+                        icon
+                        size="x-small"
+                        variant="text"
+                        density="compact"
+                        :active="false"
+                        :disabled="!vi.canMoveDown"
+                        class="a-le-action a-le-action--down"
+                        @click.stop="moveDown(vi.index)"
+                      >
+                        <VIcon
+                          icon="mdi-arrow-down"
+                          size="14"
+                        />
+                      </VBtn>
+                    </template>
+                    <VBtn
+                      v-if="showDeleteButton"
+                      icon
+                      size="x-small"
+                      variant="text"
+                      density="compact"
+                      :active="false"
+                      class="a-le-action a-le-action--chip-close"
+                      @click.stop="onDeleteClick(vi)"
+                    >
+                      <VIcon
+                        icon="mdi-close"
+                        size="14"
+                      />
+                    </VBtn>
+                  </template>
+                  <template v-else-if="reorderMode">
+                    <VBtn
+                      icon
+                      size="small"
+                      variant="text"
+                      density="comfortable"
+                      :disabled="!vi.canMoveUp"
+                      class="mx-1 a-le-action a-le-action--up"
+                      @click.stop="moveUp(vi.index)"
+                    >
+                      <VIcon
+                        icon="mdi-arrow-up"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.moveUp')"
+                      />
+                    </VBtn>
+                    <VBtn
+                      icon
+                      size="small"
+                      variant="text"
+                      density="comfortable"
+                      :disabled="!vi.canMoveDown"
+                      class="mx-1 a-le-action a-le-action--down"
+                      @click.stop="moveDown(vi.index)"
+                    >
+                      <VIcon
+                        icon="mdi-arrow-down"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.moveDown')"
+                      />
+                    </VBtn>
+                    <VBtn
+                      icon
+                      size="small"
+                      variant="text"
+                      density="comfortable"
+                      :active="false"
+                      class="mx-1 a-le-action a-le-action--menu"
+                    >
+                      <VIcon
+                        icon="mdi-dots-vertical"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.more')"
+                      />
+                      <VMenu activator="parent">
+                        <VList density="compact">
+                          <VListItem
+                            :disabled="!vi.canMoveUp"
+                            @click.stop="moveTop(vi.index)"
+                          >
+                            <template #prepend>
+                              <VIcon icon="mdi-arrow-collapse-up" />
+                            </template>
+                            <VListItemTitle>
+                              {{ t('common.sortable.moveToTop') }}
+                            </VListItemTitle>
+                          </VListItem>
+                          <VListItem
+                            :disabled="!vi.canMoveDown"
+                            @click.stop="moveBottom(vi.index)"
+                          >
+                            <template #prepend>
+                              <VIcon icon="mdi-arrow-collapse-down" />
+                            </template>
+                            <VListItemTitle>
+                              {{ t('common.sortable.moveToBottom') }}
+                            </VListItemTitle>
+                          </VListItem>
+                          <VListItem
+                            v-if="showMoveToPosition && viewItemsDecorated.length > 1"
+                            @click.stop="openMoveToPosition(vi)"
+                          >
+                            <template #prepend>
+                              <VIcon icon="mdi-target" />
+                            </template>
+                            <VListItemTitle>
+                              {{ t('common.sortable.moveToPosition.action') }}
+                            </VListItemTitle>
+                          </VListItem>
+                          <VListItem
+                            v-if="showAddAfterAction && canInteract"
+                            @click="onRowAddAfterClick(vi)"
+                          >
+                            <template #prepend>
+                              <VIcon icon="mdi-plus" />
+                            </template>
+                            <VListItemTitle>
+                              {{ t('common.sortable.addAfter') }}
+                            </VListItemTitle>
+                          </VListItem>
+                          <VListItem
+                            v-if="showDeleteButton && canInteract"
+                            @click.stop="onDeleteClick(vi)"
+                          >
+                            <template #prepend>
+                              <VIcon icon="mdi-trash-can-outline" />
+                            </template>
+                            <VListItemTitle>
+                              {{ t('common.sortable.delete') }}
+                            </VListItemTitle>
+                          </VListItem>
+                        </VList>
+                      </VMenu>
+                    </VBtn>
+                  </template>
+                  <template v-else>
+                    <VBtn
+                      v-if="showEditButton && canInteract"
+                      icon
+                      size="small"
+                      variant="tonal"
+                      color="primary"
+                      density="comfortable"
+                      class="mx-1 a-le-action a-le-action--edit"
+                      @click.stop="onEditClick(vi)"
+                    >
+                      <VIcon
+                        icon="mdi-pencil-outline"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.edit')"
+                      />
+                    </VBtn>
+                    <VBtn
+                      v-if="showDeleteButton && canInteract"
+                      icon
+                      size="small"
+                      variant="text"
+                      density="comfortable"
+                      class="mx-1 a-le-action a-le-action--delete"
+                      @click.stop="onDeleteClick(vi)"
+                    >
+                      <VIcon
+                        icon="mdi-trash-can-outline"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.delete')"
+                      />
+                    </VBtn>
+                    <VBtn
+                      v-if="showAddAfterAction && canInteract"
+                      icon
+                      size="small"
+                      variant="text"
+                      density="comfortable"
+                      :active="false"
+                      class="mx-1 a-le-action a-le-action--menu"
+                    >
+                      <VIcon
+                        icon="mdi-dots-vertical"
+                        size="18"
+                      />
+                      <VTooltip
+                        activator="parent"
+                        location="bottom"
+                        :text="t('common.sortable.more')"
+                      />
+                      <VMenu activator="parent">
+                        <VList density="compact">
+                          <VListItem @click="onRowAddAfterClick(vi)">
+                            <template #prepend>
+                              <VIcon icon="mdi-plus" />
+                            </template>
+                            <VListItemTitle>
+                              {{ t('common.sortable.addAfter') }}
+                            </VListItemTitle>
+                          </VListItem>
+                        </VList>
+                      </VMenu>
+                    </VBtn>
+                  </template>
+                </slot>
+              </div>
             </div>
 
-            <div class="a-le-actions">
+            <template v-if="vi.editing && (allowEditInReorder || !reorderMode) && $slots.item">
+              <div class="a-le-row-body">
+                <div class="a-le-form">
+                  <slot
+                    name="item"
+                    v-bind="buildSlotProps(vi)"
+                  />
+                </div>
+              </div>
               <slot
-                name="item-actions"
+                name="item-footer"
                 v-bind="buildSlotProps(vi)"
               >
-                <VBtn
-                  v-if="chips && showDeleteButton && canInteract"
-                  icon
-                  size="x-small"
-                  variant="text"
-                  density="compact"
-                  :active="false"
-                  class="a-le-action a-le-action--chip-close"
-                  @click.stop="onDeleteClick(vi)"
+                <div
+                  v-if="showInlineSaveFooter && !reorderMode"
+                  class="a-le-row-footer"
                 >
-                  <VIcon
-                    icon="mdi-close"
-                    size="14"
-                  />
-                </VBtn>
-                <template v-else-if="reorderMode">
+                  <div class="a-le-row-footer-spacer" />
                   <VBtn
-                    icon
-                    size="small"
                     variant="text"
-                    density="comfortable"
-                    :disabled="!vi.canMoveUp"
-                    class="mx-1 a-le-action a-le-action--up"
-                    @click.stop="moveUp(vi.index)"
+                    :disabled="vi.loading"
+                    @click.stop="onCancelClick(vi)"
                   >
-                    <VIcon
-                      icon="mdi-arrow-up"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.moveUp')"
-                    />
+                    {{ t('common.button.cancel') }}
                   </VBtn>
                   <VBtn
-                    icon
-                    size="small"
-                    variant="text"
-                    density="comfortable"
-                    :disabled="!vi.canMoveDown"
-                    class="mx-1 a-le-action a-le-action--down"
-                    @click.stop="moveDown(vi.index)"
-                  >
-                    <VIcon
-                      icon="mdi-arrow-down"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.moveDown')"
-                    />
-                  </VBtn>
-                  <VBtn
-                    icon
-                    size="small"
-                    variant="text"
-                    density="comfortable"
-                    :active="false"
-                    class="mx-1 a-le-action a-le-action--menu"
-                  >
-                    <VIcon
-                      icon="mdi-dots-vertical"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.more')"
-                    />
-                    <VMenu activator="parent">
-                      <VList density="compact">
-                        <VListItem
-                          :disabled="!vi.canMoveUp"
-                          @click.stop="moveTop(vi.index)"
-                        >
-                          <template #prepend>
-                            <VIcon icon="mdi-arrow-collapse-up" />
-                          </template>
-                          <VListItemTitle>
-                            {{ t('common.sortable.moveToTop') }}
-                          </VListItemTitle>
-                        </VListItem>
-                        <VListItem
-                          :disabled="!vi.canMoveDown"
-                          @click.stop="moveBottom(vi.index)"
-                        >
-                          <template #prepend>
-                            <VIcon icon="mdi-arrow-collapse-down" />
-                          </template>
-                          <VListItemTitle>
-                            {{ t('common.sortable.moveToBottom') }}
-                          </VListItemTitle>
-                        </VListItem>
-                        <VListItem
-                          v-if="showMoveToPosition && viewItemsDecorated.length > 1"
-                          @click.stop="openMoveToPosition(vi)"
-                        >
-                          <template #prepend>
-                            <VIcon icon="mdi-target" />
-                          </template>
-                          <VListItemTitle>
-                            {{ t('common.sortable.moveToPosition.action') }}
-                          </VListItemTitle>
-                        </VListItem>
-                        <VListItem
-                          v-if="showAddAfterAction && canInteract"
-                          @click.stop="onRowAddAfterClick(vi)"
-                        >
-                          <template #prepend>
-                            <VIcon icon="mdi-plus" />
-                          </template>
-                          <VListItemTitle>
-                            {{ t('common.sortable.addAfter') }}
-                          </VListItemTitle>
-                        </VListItem>
-                        <VListItem
-                          v-if="showDeleteButton && canInteract"
-                          @click.stop="onDeleteClick(vi)"
-                        >
-                          <template #prepend>
-                            <VIcon icon="mdi-trash-can-outline" />
-                          </template>
-                          <VListItemTitle>
-                            {{ t('common.sortable.delete') }}
-                          </VListItemTitle>
-                        </VListItem>
-                      </VList>
-                    </VMenu>
-                  </VBtn>
-                </template>
-                <template v-else>
-                  <VBtn
-                    v-if="showEditButton && canInteract"
-                    icon
-                    size="small"
-                    variant="tonal"
                     color="primary"
-                    density="comfortable"
-                    class="mx-1 a-le-action a-le-action--edit"
-                    @click.stop="onEditClick(vi)"
-                  >
-                    <VIcon
-                      icon="mdi-pencil-outline"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.edit')"
-                    />
-                  </VBtn>
-                  <VBtn
-                    v-if="showDeleteButton && canInteract"
-                    icon
-                    size="small"
-                    variant="text"
-                    density="comfortable"
-                    class="mx-1 a-le-action a-le-action--delete"
-                    @click.stop="onDeleteClick(vi)"
-                  >
-                    <VIcon
-                      icon="mdi-trash-can-outline"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.delete')"
-                    />
-                  </VBtn>
-                  <VBtn
-                    v-if="showAddAfterAction && canInteract"
-                    icon
-                    size="small"
-                    variant="text"
-                    density="comfortable"
-                    :active="false"
-                    class="mx-1 a-le-action a-le-action--menu"
+                    variant="flat"
+                    prepend-icon="mdi-check"
+                    :disabled="vi.loading"
+                    @click.stop="onSaveClick(vi)"
                   >
-                    <VIcon
-                      icon="mdi-dots-vertical"
-                      size="18"
-                    />
-                    <VTooltip
-                      activator="parent"
-                      location="bottom"
-                      :text="t('common.sortable.more')"
-                    />
-                    <VMenu activator="parent">
-                      <VList density="compact">
-                        <VListItem @click.stop="onRowAddAfterClick(vi)">
-                          <template #prepend>
-                            <VIcon icon="mdi-plus" />
-                          </template>
-                          <VListItemTitle>
-                            {{ t('common.sortable.addAfter') }}
-                          </VListItemTitle>
-                        </VListItem>
-                      </VList>
-                    </VMenu>
+                    {{ t('common.button.save') }}
                   </VBtn>
-                </template>
+                </div>
               </slot>
-            </div>
-          </div>
+            </template>
 
-          <template
-            v-if="vi.editing && (allowEditInReorder || !reorderMode) && $slots.item"
-          >
-            <div class="a-le-row-body">
+            <div
+              v-else-if="
+                $slots['item-readonly'] &&
+                  (readonly || vi.expanded) &&
+                  (allowEditInReorder || !reorderMode)
+              "
+              class="a-le-row-body"
+            >
               <div class="a-le-form">
                 <slot
-                  name="item"
+                  name="item-readonly"
                   v-bind="buildSlotProps(vi)"
                 />
               </div>
             </div>
-            <slot
-              name="item-footer"
-              v-bind="buildSlotProps(vi)"
-            >
-              <div
-                v-if="showInlineSaveFooter && !reorderMode"
-                class="a-le-row-footer"
-              >
-                <div class="a-le-row-footer-spacer" />
-                <VBtn
-                  variant="text"
-                  :disabled="vi.loading"
-                  @click.stop="onCancelClick(vi)"
-                >
-                  {{ t('common.button.cancel') }}
-                </VBtn>
-                <VBtn
-                  color="primary"
-                  variant="flat"
-                  prepend-icon="mdi-check"
-                  :disabled="vi.loading"
-                  @click.stop="onSaveClick(vi)"
-                >
-                  {{ t('common.button.save') }}
-                </VBtn>
-              </div>
-            </slot>
-          </template>
-
-          <div
-            v-else-if="
-              vi.expanded
-                && (allowEditInReorder || !reorderMode)
-                && $slots['item-readonly']
-            "
-            class="a-le-row-body"
-          >
-            <div class="a-le-form">
-              <slot
-                name="item-readonly"
-                v-bind="buildSlotProps(vi)"
-              />
-            </div>
           </div>
 
           <slot
@@ -1541,16 +1894,21 @@ defineExpose({
 @use './styles/tokens';
 @use './styles/shared';
 
-// Variant-specific rules for ASortableListEditor — reorder-mode trims, drag
-// clone styling, chips flex-wrap layout, and the validation rail.
+// Variant-specific rules: reorder-mode trims, drag clone styling, chips
+// flex-wrap layout, validation rail.
 .a-sortable-list-editor {
   &__rows {
     display: flex;
     flex-direction: column;
   }
 
-  // Reorder-mode trims the row-header padding since the drag handle already
-  // eats some of the horizontal rhythm.
+  // View-mode body slot — match the row's horizontal rhythm (~16 px) with a
+  // vertical inset so content doesn't sit flush against the border.
+  .a-le-view-body {
+    padding: 12px 16px;
+  }
+
+  // Reorder mode trims row-header padding since the drag handle eats some of it.
   .a-le-row--reorder .a-le-row-header {
     padding-left: 12px;
     padding-right: 8px;
@@ -1567,8 +1925,8 @@ defineExpose({
     opacity: 0.5;
   }
 
-  // Floating clone that follows the cursor. Row-shaped card with elevation;
-  // action column and status badge hidden so the preview stays clean.
+  // Floating clone following the cursor — row-shaped card with elevation; action
+  // column + status badge hidden (below) so the preview stays clean.
   .a-le-row--drag {
     background: var(--le-surface);
     border: 1px solid var(--le-border);
@@ -1584,42 +1942,16 @@ defineExpose({
     display: none;
   }
 
-  // Reorder-mode contextual label — shown when there's no title so the user
-  // sees a "Reorder mode" hint next to the pending-changes status. Hidden
-  // when the consumer passes a title (the title already provides context).
-  .a-le-reorder-mode-label {
-    font: 500 13px/1 var(--v-font-body, inherit);
-    color: var(--le-primary);
-    margin-right: 8px;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-  }
-
-  // Floating-header variant — when the only thing in the header is the
-  // Reorder button, drop the band entirely and float the button absolutely
-  // over the editor's top-right corner so we don't waste ~50 px of vertical
-  // rhythm on an empty bar.
-  &--header-floating .a-le-card {
-    position: relative;
-  }
-
+  // Header-only-with-reorder variant — no title/header slot, so render a slim
+  // band right-aligning just the Reorder button.
   &--header-floating .a-le-header {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    z-index: 2;
-  }
-
-  &--header-floating .a-le-header-actions {
-    margin-left: 0;
+    justify-content: flex-end;
+    padding: 6px 8px;
+    min-height: 0;
   }
 
-  // Embedded variant — this editor sits inside another editor's row. Drop
-  // the card chrome (border, shadow), tighten rows, lighten background so it
-  // visually reads as part of the parent's body, not a sibling list.
+  // Embedded variant — sits inside another editor's row. Drop card chrome,
+  // tighten rows, lighten background so it reads as part of the parent's body.
   &--embedded .a-le-card {
     background: transparent;
     border: none;
@@ -1629,6 +1961,7 @@ defineExpose({
 
   &--embedded .a-le-header {
     padding: 4px 0 6px;
+    min-height: auto;
     background: transparent;
     border: none;
   }
@@ -1645,11 +1978,13 @@ defineExpose({
     background: var(--le-surface);
     border: 1px solid var(--le-border);
     border-radius: 6px;
-    margin-bottom: 4px;
   }
 
-  &--embedded .a-le-row:last-of-type {
-    margin-bottom: 0;
+  // The inter-row gap lives on the wrapper (the real list item). `.a-le-row` is no
+  // longer its wrapper's last child once `#after-item` renders, so the old
+  // `.a-le-row:last-of-type` reset stopped clearing the trailing gap. (QA 85050 BUG-04/05)
+  &--embedded .a-le-row-wrapper:not(:last-child) {
+    margin-bottom: 4px;
   }
 
   &--embedded .a-le-row-add {
@@ -1668,12 +2003,14 @@ defineExpose({
     border-style: solid;
   }
 
-  // Chips-layout variant-specific overrides — `__rows` flex-wraps into pills,
-  // `row-header` gets the drag-handle-friendly 8 px left padding (vs 12 px
-  // in AListEditor), `drag-handle` shrinks to match the pill height.
+  // Chips-layout overrides — `__rows` flex-wraps into pills, `row-header` gets
+  // 8 px left padding (vs 12 px in AListEditor), `drag-handle` shrinks to the
+  // pill height.
   &--chips &__rows {
     display: flex;
-    flex-wrap: wrap;
+
+    // Reset the base column direction — chips flow inline and wrap.
+    flex-flow: row wrap;
     gap: 6px;
     flex: 1 1 100%;
   }
@@ -1691,7 +2028,7 @@ defineExpose({
 }
 
 // Narrow-container / mobile layout — taller rows, always-visible actions,
-// status badge dropped to make room.
+// status badge dropped for room.
 /* stylelint-disable selector-max-compound-selectors */
 @container le-shell (max-width: 768px) {
   .a-sortable-list-editor {
@@ -1704,9 +2041,7 @@ defineExpose({
 
     .a-le-row .a-le-action--edit,
     .a-le-row .a-le-action--delete,
-    .a-le-row .a-le-action--menu,
-    .a-le-row .a-le-action--up,
-    .a-le-row .a-le-action--down {
+    .a-le-row .a-le-action--menu {
       opacity: 1;
     }
   }
diff --git a/src/labs/listEditor/composables/resolveCompactText.ts b/src/labs/listEditor/composables/resolveCompactText.ts
index 80c02ca8..27c5b80e 100644
--- a/src/labs/listEditor/composables/resolveCompactText.ts
+++ b/src/labs/listEditor/composables/resolveCompactText.ts
@@ -1,31 +1,13 @@
-import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
-
-// Fallback chain for the row's compact (collapsed) display text. Used by
-// every editor variant when the consumer didn't provide an `#item-compact`
-// slot — picks the first non-empty value from the configured `compactField`
-// or a sensible set of common fields, then falls back to the row's key.
-//
-// Pure function — no Vue reactivity. Pass the i18n `t` so the caller's
-// translation context is preserved.
+// Compact (collapsed) display text for a list-editor row. Used by every
+// editor variant when the consumer didn't provide an `#item-compact` slot.
+// Consumers must opt in explicitly via `compactField` — there is NO implicit
+// fallback to common field names. Returns empty string otherwise; provide
+// the `#item-compact` slot for anything richer.
 export function resolveCompactText<TItem extends Record<string, any>>(
   raw: TItem,
-  key: ListEditorKey,
-  options: {
-    compactField?: string | null
-    fallback: string
-  },
+  options: { compactField?: string | null },
 ): string {
-  const pick = (v: unknown): string | null =>
-    v == null || v === '' ? null : String(v)
-  const fromField = options.compactField ? pick(raw[options.compactField]) : null
-  if (fromField !== null) return fromField
-  const fallbacks = [
-    pick(raw.title),
-    pick(raw.name),
-    pick(raw.texts?.title),
-    pick(raw.text),
-    pick(key),
-  ]
-  const hit = fallbacks.find((v): v is string => v !== null)
-  return hit ?? options.fallback
+  if (!options.compactField) return ''
+  const v = raw[options.compactField]
+  return v == null || v === '' ? '' : String(v)
 }
diff --git a/src/labs/listEditor/composables/useDeleteDialog.ts b/src/labs/listEditor/composables/useDeleteDialog.ts
index 32898c5c..4ed9e354 100644
--- a/src/labs/listEditor/composables/useDeleteDialog.ts
+++ b/src/labs/listEditor/composables/useDeleteDialog.ts
@@ -51,9 +51,7 @@ export interface UseDeleteDialogApi<ViewItem> {
 export function useDeleteDialog<
   TItem extends Record<string, any>,
   ViewItem extends { key: string | number; raw: TItem },
->(
-  options: UseDeleteDialogOptions<TItem, ViewItem>,
-): UseDeleteDialogApi<ViewItem> {
+>(options: UseDeleteDialogOptions<TItem, ViewItem>): UseDeleteDialogApi<ViewItem> {
   const deleteDialog = ref(false)
   const deleteTarget = ref<ViewItem | null>(null) as Ref<ViewItem | null>
   const deleteInFlight = ref(false)
diff --git a/src/labs/listEditor/composables/useDirtyBaseline.ts b/src/labs/listEditor/composables/useDirtyBaseline.ts
index c869f016..294d5fff 100644
--- a/src/labs/listEditor/composables/useDirtyBaseline.ts
+++ b/src/labs/listEditor/composables/useDirtyBaseline.ts
@@ -1,15 +1,31 @@
-import { ref, type Ref } from 'vue'
+import { ref, watch, type Ref } from 'vue'
 import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
 
-export interface UseDirtyBaselineOptions {
+export interface UseDirtyBaselineOptions<TItem = Record<string, any>> {
+  /** Fields stripped from the hash — for fields rewritten as a side effect (e.g. positionField on a move). */
+  excludeFields?: string[]
+  /** Source ref — shallow watch re-baselines on `.value` reassignment; in-place mutations don't fire. */
+  source?: Ref<unknown>
   /**
-   * Field names to strip from item payload before hashing. Useful when the
-   * consumer rewrites fields as a side effect of other operations (e.g. flat
-   * sortable rewrites `[positionField]` on every row whose index shifts after
-   * a move, nested sortable rewrites `[positionField, parentField]`) — those
-   * rewrites shouldn't flag unchanged rows as dirty.
+   * Externally-supplied baseline (opt-in). Return the *last-saved* rows (same shape as the
+   * model items) to derive the dirty baseline from a value the consumer owns, rather than
+   * from an eager snapshot of the current (possibly already-mutated) model at mount.
+   *
+   * When this returns a non-null array the baseline is driven **reactively** from it —
+   * the eager self-capture and the `source` re-baseline watch are both disabled, and
+   * `captureDirtyBaseline()` recomputes from this getter instead of from the live model.
+   * Use it when the same logical data is edited through editor instances that mount/unmount
+   * independently (e.g. a widget relocated by a pin toggle): each instance then derives the
+   * SAME dirty set from the shared saved baseline instead of re-baselining the unsaved data
+   * as clean on remount.
+   *
+   * Returning `null`/`undefined` falls back to the default eager behaviour, so the option is
+   * fully backwards-compatible — absent it, nothing changes.
+   *
+   * The returned rows are stringified with the SAME exclude logic as the model rows, so the
+   * consumer must NOT pre-stringify or pre-strip `excludeFields`.
    */
-  excludeFields?: string[]
+  baselineSource?: () => Array<{ key: ListEditorKey; data: TItem }> | null | undefined
 }
 
 export interface UseDirtyBaselineApi<TItem> {
@@ -18,42 +34,26 @@ export interface UseDirtyBaselineApi<TItem> {
   rebaselineKey: (key: ListEditorKey) => void
   isItemDirty: (key: ListEditorKey, data: TItem) => boolean
   stringifyContent: (data: TItem) => string
+  ignoreNextSourceChange: () => void
 }
 
 /**
- * Dirty-baseline tracking shared across list-editor variants. Captures a
- * content snapshot (key → stringified payload) so per-row "unsaved" markers
- * can be derived by diffing current data against the baseline.
- *
- * Pure data behaviour — no DOM, no emits, no editor-specific state. Consumers
- * (the components) own any related state like `movedKeys` and invoke
- * `captureDirtyBaseline()` themselves when resetting; splitting that out
- * keeps the composable focused on a single responsibility.
- *
- * Note: the initial baseline is captured the first time this function runs,
- * reading from `getEntries()` immediately. Callers that want to reset the
- * baseline later (e.g. after a successful parent-form save) call
- * `captureDirtyBaseline()` again.
+ * Dirty-baseline tracking for list-editor variants. Snapshots `key → stringified payload`;
+ * `isItemDirty` derives the per-row unsaved marker by diffing.
+ * Initial snapshot is eager. Pass `options.source` for an async-loaded model — the shallow
+ * watch re-baselines on `.value` reassignment (typical fetch landing).
  */
 export function useDirtyBaseline<TItem extends Record<string, any>>(
   getEntries: () => Array<{ key: ListEditorKey; data: TItem }>,
-  options: UseDirtyBaselineOptions = {},
+  options: UseDirtyBaselineOptions<TItem> = {},
 ): UseDirtyBaselineApi<TItem> {
   const excludeFields = options.excludeFields ?? []
   const hasExcludes = excludeFields.length > 0
-  // Pre-build the exclude lookup once at setup. With a typical exclude list
-  // of 1-2 fields the savings are tiny, but the Set is referenced from the
-  // hot stringify path so it's worth the one-time cost.
   const excludeSet = hasExcludes ? new Set(excludeFields) : null
+  const baselineSource = options.baselineSource
 
-  // `JSON.stringify` per-call is intentionally NOT memoized by data
-  // reference. Some consumers mutate item fields in place (e.g. a v-model
-  // bound to `data.title` inside an inline form) — that mutation doesn't
-  // change the object identity, so a WeakMap cache would return a stale
-  // dirty result. Correctness wins; the per-call cost is bounded by item
-  // size and only pays at render time. For very large forms (100+ rows of
-  // deeply-nested objects) this dominates GC; profile and revisit if it
-  // shows up in a flame graph for a real consumer.
+  // Not memoized by reference — consumers mutate item fields in place via inline-form v-models;
+  // a WeakMap cache would return stale dirty results.
   const stringifyContent = (data: TItem): string => {
     if (!hasExcludes) return JSON.stringify(data)
     const copy = { ...data } as Record<string, unknown>
@@ -63,20 +63,30 @@ export function useDirtyBaseline<TItem extends Record<string, any>>(
     return JSON.stringify(copy)
   }
 
-  const dirtyBaseline = ref(new Map<ListEditorKey, string>()) as Ref<
-    Map<ListEditorKey, string>
-  >
+  const dirtyBaseline = ref(new Map<ListEditorKey, string>()) as Ref<Map<ListEditorKey, string>>
+
+  // When `baselineSource` yields a non-null array, the baseline is taken from the
+  // consumer-owned saved rows instead of the live model — so a freshly mounted editor
+  // derives the same dirty set as its sibling rather than re-baselining mutated data as
+  // clean. Falls back to the live model whenever the source is absent or returns null.
+  const resolveBaselineEntries = (): Array<{ key: ListEditorKey; data: TItem }> => {
+    if (baselineSource) {
+      const external = baselineSource()
+      if (external) return external
+    }
+    return getEntries()
+  }
 
   const captureDirtyBaseline = () => {
     const next = new Map<ListEditorKey, string>()
-    for (const { key, data } of getEntries()) {
+    for (const { key, data } of resolveBaselineEntries()) {
       next.set(key, stringifyContent(data))
     }
     dirtyBaseline.value = next
   }
 
   const rebaselineKey = (key: ListEditorKey) => {
-    const entries = getEntries()
+    const entries = resolveBaselineEntries()
     const entry = entries.find((e) => e.key === key)
     if (entry) {
       dirtyBaseline.value.set(key, stringifyContent(entry.data))
@@ -93,11 +103,46 @@ export function useDirtyBaseline<TItem extends Record<string, any>>(
 
   captureDirtyBaseline()
 
+  let ignoreNext = false
+  const ignoreNextSourceChange = () => {
+    ignoreNext = true
+  }
+
+  if (baselineSource) {
+    // External-baseline mode: the baseline tracks the consumer-owned saved rows. Re-capture
+    // whenever they change (e.g. after a save persists a new "last saved" snapshot). The
+    // model `source` self-refill watch below is intentionally NOT wired here — the baseline
+    // must follow the saved rows, never the live (edited) model. Deep watch: the saved rows
+    // are derived data the consumer may reassign or mutate in place.
+    watch(
+      () => baselineSource(),
+      () => {
+        captureDirtyBaseline()
+      },
+      { deep: true },
+    )
+  } else if (options.source) {
+    const stopInitialFillWatch = watch(options.source, () => {
+      if (ignoreNext) {
+        ignoreNext = false
+        return
+      }
+      if (dirtyBaseline.value.size > 0) {
+        stopInitialFillWatch()
+        return
+      }
+      if (getEntries().length === 0) return
+      captureDirtyBaseline()
+      stopInitialFillWatch()
+    })
+  }
+
   return {
     dirtyBaseline,
     captureDirtyBaseline,
     rebaselineKey,
     isItemDirty,
     stringifyContent,
+    ignoreNextSourceChange,
   }
 }
diff --git a/src/labs/listEditor/composables/useDragInstruction.ts b/src/labs/listEditor/composables/useDragInstruction.ts
index 32d22c93..40715d0f 100644
--- a/src/labs/listEditor/composables/useDragInstruction.ts
+++ b/src/labs/listEditor/composables/useDragInstruction.ts
@@ -104,8 +104,7 @@ const isInSourceSubtree = (
   viewItems: NestedViewItem<any>[],
   sourceKey: ListEditorKey,
   candidateKey: ListEditorKey,
-): boolean =>
-  candidateKey === sourceKey || isDescendantOf(viewItems, sourceKey, candidateKey)
+): boolean => candidateKey === sourceKey || isDescendantOf(viewItems, sourceKey, candidateKey)
 
 // Walk the flat view-items list in `dir` (±1) starting at `startIdx`, skipping
 // any row that belongs to the dragged subtree — those rows aren't visible drop
@@ -123,9 +122,7 @@ const findSiblingNotInSource = (
   return null
 }
 
-export const computeInstruction = (
-  args: ComputeInstructionArgs,
-): Instruction | null => {
+export const computeInstruction = (args: ComputeInstructionArgs): Instruction | null => {
   const {
     pointer,
     hoveredRow,
diff --git a/src/labs/listEditor/composables/useInlineEditing.ts b/src/labs/listEditor/composables/useInlineEditing.ts
index 06b45c5c..b00fd279 100644
--- a/src/labs/listEditor/composables/useInlineEditing.ts
+++ b/src/labs/listEditor/composables/useInlineEditing.ts
@@ -3,53 +3,19 @@ import { cloneDeep } from '@/utils/common'
 import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
 
 export interface UseInlineEditingOptions<TItem> {
-  /**
-   * DOM ref of the scrolling container — the parent element that wraps every
-   * row. Used to scope `querySelector` during the auto-scroll step so a page
-   * with multiple editor instances doesn't accidentally scroll a sibling's
-   * row into view.
-   */
+  /** Scrolling container; scopes the auto-scroll `querySelector` to this instance. */
   rowsContainer: Ref<HTMLElement | null>
-  /**
-   * CSS selector for the per-row element to scroll into view. Flat editors
-   * target the row directly (`.a-le-row`); the nested variant wraps rows
-   * for drag/drop so the selector is the wrapper (`.a-le-row-wrapper`).
-   * Must contain a `[data-id="..."]` slot — filled at call time with the
-   * CSS-escaped key.
-   */
+  /** Per-row selector to scroll into view (flat `.a-le-row`, nested `.a-le-row-wrapper`); needs a `[data-id]`. */
   rowSelector: string
-  /**
-   * Whether consumer-provided `#item` slot is present AND this variant is in
-   * an inline-edit-capable configuration. Flat/sortable toggle this off in
-   * chips mode; nested derives it from the slot existence. Auto-open on add
-   * is a no-op when this is false.
-   */
+  /** When false, auto-open-on-add is a no-op (e.g. chips mode, or no `#item` slot). */
   isInlineEdit: ComputedRef<boolean>
-  /**
-   * Called when the user cancels an open edit. Consumer writes the snapshot
-   * back to the underlying editor (flat: `editor.updateItem(vi.index, data)`;
-   * nested: `editor.updateItem(vi.key, data)`) — the signature differs per
-   * variant so the composable stays agnostic and delegates via this callback.
-   */
+  /** Revert callback — the flat/nested `updateItem` signatures differ, so the consumer applies the snapshot. */
   restoreSnapshot: (key: ListEditorKey, data: TItem) => void
-  /**
-   * Flat list of keys the auto-open watch should react to. Flat editors
-   * return `modelValue.map(...)`; the nested variant walks the tree. Called
-   * as the watch source getter — keep it referentially stable-ish so watch
-   * dependencies are honoured.
-   */
+  /** Watch source: keys the auto-open reacts to (flat maps modelValue, nested walks the tree). */
   watchKeys: () => ListEditorKey[]
-  /**
-   * Look up raw data for a key during auto-open so we can snapshot it before
-   * the user starts editing. Flat editors return the item out of modelValue;
-   * nested walks its tree. Returning `null` aborts the auto-open.
-   */
+  /** Resolve raw data for a key to snapshot before editing; `null` aborts the auto-open. */
   findEntry: (key: ListEditorKey) => { data: TItem } | null
-  /**
-   * Nested-only hook — after the new key is marked editing, the nested
-   * variant needs to expand ancestors so the row is visible. Flat variants
-   * don't need this and pass `undefined`.
-   */
+  /** Nested-only: expand ancestors so the auto-opened row is visible. */
   afterAutoOpen?: (key: ListEditorKey) => void
 }
 
@@ -66,32 +32,16 @@ export interface UseInlineEditingApi<TItem, ViewItem> {
 }
 
 /**
- * Inline-edit lifecycle shared across list-editor variants.
- *
- * Owns:
- *   - the per-key editing set (rows currently rendering the inline form),
- *   - per-key content snapshots (taken on edit-open, used to revert on
- *     cancel),
- *   - the `pendingAutoOpen` flag + watch that auto-opens the most-recently
- *     appended row after an `@add` emit resolves,
- *   - the double-`nextTick` + `scrollIntoView` dance that pulls the new row
- *     into view on long lists.
- *
- * Agnostic of the underlying editor composable — callers pass a
- * `restoreSnapshot` callback so the flat/nested signature mismatch
- * (`updateItem(index, data)` vs `updateItem(key, data)`) stays in the
- * consumer.
+ * Inline-edit lifecycle shared across list-editor variants: the editing-key
+ * set, per-key revert snapshots, and the auto-open + scroll-into-view of a
+ * newly appended row. Agnostic of the editor composable via `restoreSnapshot`.
  */
 export function useInlineEditing<
   TItem extends Record<string, any>,
   ViewItem extends { key: ListEditorKey; raw: TItem },
->(
-  options: UseInlineEditingOptions<TItem>,
-): UseInlineEditingApi<TItem, ViewItem> {
+>(options: UseInlineEditingOptions<TItem>): UseInlineEditingApi<TItem, ViewItem> {
   const editingKeys = ref<Set<ListEditorKey>>(new Set())
-  const editingSnapshots = ref(new Map<ListEditorKey, TItem>()) as Ref<
-    Map<ListEditorKey, TItem>
-  >
+  const editingSnapshots = ref(new Map<ListEditorKey, TItem>()) as Ref<Map<ListEditorKey, TItem>>
   const pendingAutoOpen = ref(false)
 
   const clearEditing = () => {
@@ -143,11 +93,8 @@ export function useInlineEditing<
     }
     editingKeys.value.add(addedKey)
     options.afterAutoOpen?.(addedKey)
-    // Scroll the newly added row into view so the user sees their new item
-    // even on long lists where the append lands below the viewport fold.
-    // Double nextTick so the inline-edit body has rendered; `block: 'center'`
-    // because `'nearest'` often decides a partially-visible row is good
-    // enough and does nothing.
+    // Double nextTick so the inline-edit body has rendered before we scroll;
+    // `block: 'center'` since `'nearest'` no-ops on partially-visible rows.
     nextTick(() => {
       nextTick(() => {
         const el = options.rowsContainer.value?.querySelector<HTMLElement>(
diff --git a/src/labs/listEditor/composables/useIsTouchDevice.ts b/src/labs/listEditor/composables/useIsTouchDevice.ts
new file mode 100644
index 00000000..a7fd2cd1
--- /dev/null
+++ b/src/labs/listEditor/composables/useIsTouchDevice.ts
@@ -0,0 +1,37 @@
+import { computed, type ComputedRef } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+
+// Which reorder affordances does this device get? The two questions are deliberately independent,
+// because a device can answer yes to both — and then it gets both.
+//
+// The rule (Pointer Events / dnd-kit / pragmatic-drag-and-drop all land here): never detect a device
+// in order to HIDE a way to act. A hybrid — a touchscreen laptop, a convertible, a stylus tablet —
+// switches input mid-session, so any prediction strands the user at the exact moment they reach for
+// the row: fold the laptop, try to drag with a finger, and the page scrolls instead. Offering both
+// removes that moment entirely, and it is what the rest of this library already does — outside the
+// chips layout the arrows are always present in reorder mode and the handle is an addition to them.
+
+// Can the user press-grab-move-release the way a mouse does? `(any-pointer: fine)` is true when ANY
+// available input is precise — a mouse, a trackpad or a pen, all of which can drag. Its negation is
+// "coarse input only", the one case where dragging genuinely does not work.
+//
+// Note this is NOT "is it a phone": a laptop with a touchscreen driven by a mouse must keep its
+// handle. Asking `(any-pointer: coarse)` here instead took it away, and two users on identical
+// browsers saw different affordances purely because one laptop had a touch panel.
+//
+// Where matchMedia is unavailable the query reads false → treated as touch → arrows, the safe
+// direction: the fallback always works.
+export function useIsTouchDevice(): ComputedRef<boolean> {
+  const hasFinePointer = useMediaQuery('(any-pointer: fine)')
+
+  return computed<boolean>(() => !hasFinePointer.value)
+}
+
+// Could a finger be used here at all? Deliberately NOT the inverse of the above — a hybrid answers
+// true to both. Layouts that would otherwise swap the arrows out for the handle keep them wherever
+// this is true, so a user who puts the mouse down is never left with an affordance they cannot use.
+export function useHasCoarsePointer(): ComputedRef<boolean> {
+  const coarsePointer = useMediaQuery('(any-pointer: coarse)')
+
+  return computed<boolean>(() => coarsePointer.value)
+}
diff --git a/src/labs/listEditor/composables/useKeyboardNav.ts b/src/labs/listEditor/composables/useKeyboardNav.ts
index b94a0a0d..9a4e8624 100644
--- a/src/labs/listEditor/composables/useKeyboardNav.ts
+++ b/src/labs/listEditor/composables/useKeyboardNav.ts
@@ -56,9 +56,7 @@ export function useKeyboardNav(options: KeyboardNavOptions): KeyboardNavApi {
   const focusedKey = ref<ListEditorKey | null>(null)
   const grabbedKey = ref<ListEditorKey | null>(null)
 
-  const orderedKeys = computed<ListEditorKey[]>(() =>
-    options.viewItems.value.map((v) => v.key),
-  )
+  const orderedKeys = computed<ListEditorKey[]>(() => options.viewItems.value.map((v) => v.key))
 
   const isFocused = (key: ListEditorKey): boolean => focusedKey.value === key
   const isGrabbed = (key: ListEditorKey): boolean => grabbedKey.value === key
@@ -80,9 +78,7 @@ export function useKeyboardNav(options: KeyboardNavOptions): KeyboardNavApi {
   function focusRowElement(key: ListEditorKey | null) {
     if (key === null || typeof document === 'undefined') return
     void Promise.resolve().then(() => {
-      const el = document.querySelector<HTMLElement>(
-        `[data-id="${CSS.escape(String(key))}"]`,
-      )
+      const el = document.querySelector<HTMLElement>(`[data-id="${CSS.escape(String(key))}"]`)
       el?.focus()
     })
   }
@@ -99,28 +95,25 @@ export function useKeyboardNav(options: KeyboardNavOptions): KeyboardNavApi {
   // *was* — by the time the watcher fires, the key is already gone from `now`.
   // eslint-disable-next-line vue/no-ref-object-reactivity-loss
   let prevOrderedKeys: ListEditorKey[] = [...orderedKeys.value]
-  watch(
-    orderedKeys,
-    (now) => {
-      if (focusedKey.value === null) {
-        prevOrderedKeys = [...now]
-        return
-      }
-      if (now.includes(focusedKey.value)) {
-        prevOrderedKeys = [...now]
-        return
-      }
-      if (now.length === 0) {
-        focusedKey.value = null
-        prevOrderedKeys = []
-        return
-      }
-      const oldIndex = prevOrderedKeys.indexOf(focusedKey.value)
-      const fallbackIndex = Math.min(Math.max(oldIndex, 0), now.length - 1)
-      setFocus(now[fallbackIndex])
+  watch(orderedKeys, (now) => {
+    if (focusedKey.value === null) {
       prevOrderedKeys = [...now]
-    },
-  )
+      return
+    }
+    if (now.includes(focusedKey.value)) {
+      prevOrderedKeys = [...now]
+      return
+    }
+    if (now.length === 0) {
+      focusedKey.value = null
+      prevOrderedKeys = []
+      return
+    }
+    const oldIndex = prevOrderedKeys.indexOf(focusedKey.value)
+    const fallbackIndex = Math.min(Math.max(oldIndex, 0), now.length - 1)
+    setFocus(now[fallbackIndex])
+    prevOrderedKeys = [...now]
+  })
 
   // Releasing a grab when the grabbed row is no longer in the list — keeps the
   // grab state consistent if the row gets removed externally.
diff --git a/src/labs/listEditor/composables/useListEditor.ts b/src/labs/listEditor/composables/useListEditor.ts
index 7f1d379d..ad53519e 100644
--- a/src/labs/listEditor/composables/useListEditor.ts
+++ b/src/labs/listEditor/composables/useListEditor.ts
@@ -5,6 +5,7 @@ import type {
   PositionHint,
   UseListEditorOptions,
 } from '@/labs/listEditor/types/listEditorTypes'
+import { renumberPositions } from '@/labs/listEditor/utils/positions'
 
 export interface ListEditorApi<TItem> {
   viewItems: ComputedRef<ListViewItem<TItem>[]>
@@ -33,21 +34,68 @@ export function useListEditor<TItem extends Record<string, any>>(
   const positionMultiplier = options.positionMultiplier ?? 1
   const updatePositionEnabled = options.updatePosition === true
 
-  const viewItems = computed<ListViewItem<TItem>[]>(() =>
-    model.value.map((raw, index) => ({
+  // Using the position field as the row key while `update-position` is on is
+  // self-defeating: every reorder renumbers positions, which changes the keys,
+  // so dirty/validity tracking flags the displaced rows as unsaved (QA 85050
+  // BUG-09). Point key-field at a stable identity field (e.g. "id").
+  if (updatePositionEnabled && keyField === positionField) {
+    console.warn(
+      `[list-editor] key-field === position-field ("${keyField}") with update-position enabled. ` +
+        'Reordering renumbers positions and thus changes row keys, breaking dirty/validity ' +
+        'tracking. Point key-field at a stable identity field (e.g. "id").',
+    )
+  }
+
+  // Surfaces row-key wiring bugs loudly: rows keyed `undefined` (item lacks the
+  // key-field) or two rows sharing one key silently break dirty tracking,
+  // validity rails and reorder targeting in ways that are hard to trace from
+  // symptoms (QA 85050 BUG-09 class). Deduplicated per signature so a stable
+  // bad state warns once, but a new offender warns again.
+  const warnedKeySignatures = new Set<string>()
+  const warnOnBadKeys = (items: ListViewItem<TItem>[]): void => {
+    const seen = new Set<ListEditorKey>()
+    const duplicates = new Set<string>()
+    let missing = 0
+    for (const vi of items) {
+      if (vi.key === undefined || vi.key === null) {
+        missing++
+        continue
+      }
+      if (seen.has(vi.key)) duplicates.add(String(vi.key))
+      seen.add(vi.key)
+    }
+    if (missing === 0 && duplicates.size === 0) return
+    const signature = `${missing}|${[...duplicates].sort().join(',')}`
+    if (warnedKeySignatures.has(signature)) return
+    warnedKeySignatures.add(signature)
+    if (missing > 0) {
+      console.warn(
+        `[list-editor] ${missing} row(s) resolve to an undefined key (key-field "${keyField}"). ` +
+          'Point key-field at a field every item has, or give new items unique temp ids ' +
+          '(see nextListEditorTempId).',
+      )
+    }
+    if (duplicates.size > 0) {
+      console.warn(
+        `[list-editor] duplicate row keys (key-field "${keyField}"): ${[...duplicates].join(', ')}. ` +
+          'Row keys must be unique — dirty tracking and validation rails target rows by key.',
+      )
+    }
+  }
+
+  const viewItems = computed<ListViewItem<TItem>[]>(() => {
+    const items = model.value.map((raw, index) => ({
       key: raw[keyField] as ListEditorKey,
       index,
       raw,
       position: raw[positionField] as number | undefined,
-    })),
-  )
+    }))
+    warnOnBadKeys(items)
+    return items
+  })
 
   const recalculatePositions = (items: TItem[]): TItem[] =>
-    items.map((item, idx) => {
-      const newPosition = (idx + 1) * positionMultiplier
-      if (item[positionField] === newPosition) return item
-      return { ...item, [positionField]: newPosition }
-    })
+    renumberPositions(items, { positionField, positionMultiplier })
 
   const finalize = (arr: TItem[]): TItem[] => {
     const result = updatePositionEnabled ? recalculatePositions(arr) : arr
diff --git a/src/labs/listEditor/composables/useListEditorController.ts b/src/labs/listEditor/composables/useListEditorController.ts
new file mode 100644
index 00000000..3f2bbef9
--- /dev/null
+++ b/src/labs/listEditor/composables/useListEditorController.ts
@@ -0,0 +1,549 @@
+import {
+  computed,
+  reactive,
+  ref,
+  toValue,
+  watch,
+  type ComputedRef,
+  type MaybeRefOrGetter,
+  type Ref,
+  type ShallowUnwrapRef,
+} from 'vue'
+import type {
+  ListEditorKey,
+  ListEditorValidationState,
+  PositionHint,
+} from '@/labs/listEditor/types/listEditorTypes'
+import { preservePositionValues, renumberPositions } from '@/labs/listEditor/utils/positions'
+import { nextListEditorTempId } from '@/labs/listEditor/utils/tempId'
+import { cloneDeep } from '@/utils/common'
+
+/** Per-row validity. `true` (or `{ valid: true }`) = VALID. Only `valid: false` blocks save. */
+export type ListEditorValidationResult =
+  | boolean
+  | { valid: boolean; state?: 'invalid' | 'warning'; message?: string }
+
+export type GetKey<TItem> = keyof TItem | ((item: TItem) => ListEditorKey)
+/**
+ * How the managed order field is maintained.
+ * - `renumber` (default) — positions are opaque ordinals: every write rewrites them to a clean
+ *   `(index + 1) * multiplier` series.
+ * - `preserve-values` — positions are meaningful ABSOLUTE numbers (e.g. a CMS page interleaves its
+ *   rows with another collection on the same numeric scale, so rewriting 10/310 to 100/200 would
+ *   move unrelated items). A REORDER then only swaps rows through the EXISTING slots: the set of
+ *   values is kept and reassigned, ascending, to the new row order. It is a reorder policy, not a
+ *   normalization policy — `add` keeps the position the factory/consumer supplied, `delete` leaves
+ *   holes rather than compacting.
+ *
+ * Per-action exceptions go through `strategyOverrides` (e.g. base `preserve-values` +
+ * `{ remove: 'renumber' }` to keep absolute values on reorder/save but still close the gap on delete).
+ */
+export type PositionStrategy = 'renumber' | 'preserve-values'
+
+/** Which mutation is asking for positions to be (re)assigned. */
+export type PositionAction = 'add' | 'update' | 'remove' | 'move' | 'payload'
+
+export type PositionOption<TItem> =
+  | false
+  | keyof TItem
+  | {
+      field: keyof TItem
+      multiplier?: number
+      strategy?: PositionStrategy
+      /**
+       * Per-action override of `strategy`. Each entry replaces the base strategy for that one
+       * action only; omitted actions inherit `strategy`. This is what lets a consumer mix policies
+       * without a bespoke preset — the behaviour is visible at the call site, one action per key.
+       */
+      strategyOverrides?: Partial<Record<PositionAction, PositionStrategy>>
+    }
+
+export interface ListEditorChanges<TItem> {
+  added: TItem[]
+  updated: TItem[]
+  moved: TItem[]
+  deleted: TItem[]
+  reparented: TItem[]
+}
+
+export interface UseListEditorControllerOptions<TItem extends Record<string, any>> {
+  /** Read the live list (the editor's v-model, or a consumer store getter). */
+  get: () => TItem[]
+  /** Write the list back. */
+  set: (items: TItem[]) => void
+  /** New-row factory. Optional for read-only / no-add lists. Should mint a stable temp id. */
+  factory?: () => TItem
+  /** Stable row identity. Default `'id'`. Never point this at the position field. */
+  getKey?: GetKey<TItem>
+  /** Managed order field. Default `'position'`. `false` opts out of position management. */
+  position?: PositionOption<TItem>
+  /**
+   * Extra top-level fields to drop from the dirty content-hash (position is
+   * always dropped). For a child collection a separate nested editor already
+   * tracks, so editing a child doesn't flip the parent row amber. Still in the
+   * payload — only the dirty comparison ignores it. Reactive (accepts a getter/ref).
+   */
+  dirtyExclude?: MaybeRefOrGetter<string[]>
+  /** Per-row validity — `true` = valid. Drives the red rail + `hasErrors`. */
+  validate?: (item: TItem) => ListEditorValidationResult
+  /** Custom dirty predicate (override the default content-diff). */
+  isDirty?: (current: TItem, saved: TItem | undefined) => boolean
+  /** Custom save payload (overrides `getPayload`). */
+  payload?: (items: TItem[]) => TItem[]
+  /** Resolve a saved row's key on commit (default: existing key, else mint a temp id). */
+  commitKey?: (saved: TItem, previous: TItem | undefined) => ListEditorKey
+  /** Normalize server rows before they become the new baseline on commit. */
+  normalizeSaved?: (savedItems: TItem[]) => TItem[]
+}
+
+export interface ListEditorHandle<TItem extends Record<string, any>> {
+  items: ComputedRef<TItem[]>
+  hasUnsaved: ComputedRef<boolean>
+  /** Count of distinct unconfirmed changes (added/edited/moved rows + deferred-deletion tombstones). */
+  unsavedCount: ComputedRef<number>
+  hasErrors: ComputedRef<boolean>
+  invalidKeys: ComputedRef<Set<ListEditorKey>>
+  /** Amber: is this row added / edited / moved since the last commit? */
+  isUnsaved: (key: ListEditorKey) => boolean
+  /** Red rail (gated): 'invalid' only once the row is unsaved or `validateAll()` ran. */
+  rowState: (item: TItem, key: ListEditorKey, editing?: boolean) => ListEditorValidationState
+  /** Force-show all invalid rows + return whether the list is valid. The save guard. */
+  validateAll: () => boolean
+  /** Normalized ordered array for a full-DTO save. */
+  getPayload: () => TItem[]
+  /** Change-set for partial-save endpoints. */
+  getChanges: () => ListEditorChanges<TItem>
+  /** Adopt saved rows as the new baseline; backfill keys; clear unsaved/submitted. */
+  commit: (savedItems?: TItem[]) => void
+  /** Discard unsaved edits back to the last committed baseline (or given items). */
+  reset: (items?: TItem[]) => void
+  addItem: (item?: TItem, hint?: PositionHint) => ListEditorKey | undefined
+  updateItem: (
+    key: ListEditorKey,
+    next: TItem | Partial<TItem> | ((current: TItem) => TItem),
+  ) => void
+  /** Remove a row. `trackDeleted: false` (immediate mode) skips the deferred-deletion tombstone. */
+  deleteItem: (key: ListEditorKey, opts?: { trackDeleted?: boolean }) => void
+  /** Clear a deferred-deletion tombstone (the caller re-inserts the row, e.g. reorder Cancel). */
+  restoreDeleted: (key: ListEditorKey) => void
+  moveItem: (fromIndex: number, toIndex: number) => void
+  /** Drop the "moved" flag for the given keys (or all) without touching edits/adds — e.g. reorder Cancel. */
+  clearMoved: (keys?: Iterable<ListEditorKey>) => void
+  /** Escape hatch: a row form (e.g. vuelidate) reports its own validity instead of `validate`. */
+  registerValidity: (key: ListEditorKey, isValid: () => boolean) => () => void
+}
+
+/**
+ * The shape a CONSUMER sees when it reads a list-editor handle through a template/function ref.
+ * Vue's `expose` proxy unwraps every exposed ref, so the reactive fields (`hasUnsaved`, `hasErrors`,
+ * `unsavedCount`, …) arrive as plain VALUES here, not `Ref`s: read `handle.hasUnsaved` (a boolean),
+ * never `handle.hasUnsaved.value` (that is `undefined`). Type your `useTemplateRef` / collected-ref
+ * maps with this so a stray `.value` is a compile error instead of a silently-dead guard/save-gate.
+ */
+export type ExposedListEditorHandle<TItem extends Record<string, any>> = ShallowUnwrapRef<
+  ListEditorHandle<TItem>
+>
+
+/**
+ * Component-owned state controller for the list editors (v2). Owns row keys,
+ * declared dirty tracking (no fragile whole-list JSON diff on volatile fields),
+ * validation summary, position renumbering, and the save lifecycle — exposed as
+ * a `ListEditorHandle`. Created internally by an editor (default) or lifted by a
+ * consumer via `useListEditor()` + `:editor` so the state survives unmount/remount.
+ */
+export function useListEditorController<TItem extends Record<string, any>>(
+  options: UseListEditorControllerOptions<TItem>,
+): ListEditorHandle<TItem> {
+  const keyField = (typeof options.getKey === 'function' ? null : (options.getKey ?? 'id')) as
+    | keyof TItem
+    | null
+  const keyOf = (item: TItem): ListEditorKey =>
+    typeof options.getKey === 'function'
+      ? options.getKey(item)
+      : (item[keyField as keyof TItem] as ListEditorKey)
+
+  const positionOpt = options.position ?? 'position'
+  const managedPosition = positionOpt !== false
+  const positionField = (
+    typeof positionOpt === 'object'
+      ? positionOpt.field
+      : positionOpt === false
+        ? 'position'
+        : positionOpt
+  ) as string
+  const positionMultiplier =
+    typeof positionOpt === 'object' && positionOpt.multiplier ? positionOpt.multiplier : 1
+  const positionStrategy: PositionStrategy =
+    (typeof positionOpt === 'object' && positionOpt.strategy) || 'renumber'
+  const positionOverrides: Partial<Record<PositionAction, PositionStrategy>> =
+    (typeof positionOpt === 'object' && positionOpt.strategyOverrides) || {}
+
+  const items = computed<TItem[]>(() => options.get())
+
+  // Baseline = last committed snapshot. `hashes` powers content-diff dirty
+  // (position excluded so a reorder never marks a row dirty); `rows` powers `reset`.
+  const dirtyExclude = computed<string[]>(() => toValue(options.dirtyExclude) ?? [])
+  // Temp ids are client identity bookkeeping, never content. `ensureKeys` mints one INTO the model
+  // for rows the server returns without a key — and for a NESTED editor that write happens on mount,
+  // i.e. when a parent row is merely expanded to be read. The parent hashes the whole row, so without
+  // this the seed would retroactively invalidate the parent's baseline and expanding a row to LOOK at
+  // it would mark it unsaved (QA 85050 batch 10 BUG-02). Only negative NUMBERS are stripped —
+  // persisted ids are positive (see `nextListEditorTempId`), so real ids still count as content, and
+  // a genuinely added row still differs by its other fields.
+  const stripTempIds = (_k: string, v: unknown): unknown =>
+    _k === 'id' && typeof v === 'number' && v < 0 ? undefined : v
+  const normalize = (item: TItem): string => {
+    const copy = { ...item } as Record<string, unknown>
+    if (managedPosition) delete copy[positionField]
+    for (const f of dirtyExclude.value) delete copy[f]
+    return JSON.stringify(copy, stripTempIds)
+  }
+  const baselineHashes = ref(new Map<ListEditorKey, string>()) as Ref<Map<ListEditorKey, string>>
+  const baselineRows = ref<TItem[]>([]) as Ref<TItem[]>
+  const captureBaseline = (rows: TItem[]) => {
+    const map = new Map<ListEditorKey, string>()
+    for (const r of rows) map.set(keyOf(r), normalize(r))
+    baselineHashes.value = map
+    // Deep clone: a shallow `{...r}` shares nested refs with the live row, so an
+    // in-place mutation would drift the baseline (reset/re-hash read stale data).
+    baselineRows.value = rows.map((r) => cloneDeep(r))
+  }
+  // Re-hash when the excluded-field set changes. `sync` so baseline + live
+  // normalize() never disagree mid-flush (which would flash every row amber).
+  watch(
+    dirtyExclude,
+    () => {
+      const map = new Map<ListEditorKey, string>()
+      for (const r of baselineRows.value) map.set(keyOf(r), normalize(r))
+      baselineHashes.value = map
+    },
+    { flush: 'sync' },
+  )
+  // Ensure every row has a resolvable, UNIQUE key before the first baseline
+  // capture. Server rows lacking the key field (e.g. no `id` and no custom
+  // get-key → keyOf() is undefined for ALL of them) would collapse to a single
+  // baseline entry and read as perpetually unsaved even on a clean load
+  // (QA 85050 BUG-03). Mint a temp id for those rows — exactly what commit()
+  // already does on save (line ~299). Rows that DO resolve a key (the common
+  // case) are untouched, so id-backed editors are unaffected.
+  const ensureKeys = (rows: TItem[]): { rows: TItem[]; changed: boolean } => {
+    if (!keyField) return { rows, changed: false }
+    let changed = false
+    const next = rows.map((item) => {
+      const k = keyOf(item)
+      if (k === undefined || k === null) {
+        changed = true
+        return { ...item, [keyField]: nextListEditorTempId() } as TItem
+      }
+      return item
+    })
+    return { rows: next, changed }
+  }
+  const seeded = ensureKeys(options.get())
+  if (seeded.changed) options.set(seeded.rows)
+  // Capture from the seeded array directly (not a re-read of options.get()): when
+  // set() emits through v-model the prop update is async, so options.get() would
+  // still return the pre-mint colliding rows here. Mirrors commit()'s pattern.
+  captureBaseline(seeded.rows)
+
+  // Declared structural state the content-diff can't see.
+  const movedKeys = ref(new Set<ListEditorKey>()) as Ref<Set<ListEditorKey>>
+  const deletedRows = ref<TItem[]>([]) as Ref<TItem[]>
+  const submitted = ref(false)
+  // Reactive so a row form (re)registering its validity re-runs `invalidKeys`/`rowState`.
+  const registeredValidity = reactive(new Map<ListEditorKey, () => boolean>())
+
+  const isItemDirty = (item: TItem, key: ListEditorKey): boolean => {
+    if (options.isDirty) {
+      const saved = baselineRows.value.find((r) => keyOf(r) === key)
+      return options.isDirty(item, saved)
+    }
+    const baseHash = baselineHashes.value.get(key)
+    if (baseHash === undefined) return true // added
+    if (baseHash !== normalize(item)) return true // edited
+    return movedKeys.value.has(key) // moved (content-invisible)
+  }
+
+  // Gate the validation rail on "has this row actually been edited" rather than just "is it
+  // unsaved", so a freshly added still-untouched row is amber but not yet red. `addedBaseline` =
+  // first-seen content hash of each ADDED row; `editedKeys` = STICKY set of rows whose content has
+  // since diverged from that first-seen / committed baseline. Sticky like vuelidate `$dirty`: once
+  // edited a row stays dirty until commit/reset, so clearing a field back to empty keeps the rail
+  // consistent with the field's own error state. Position / `dirtyExclude` are normalized out, so a
+  // reorder never counts as an edit.
+  const addedBaseline = ref(new Map<ListEditorKey, string>()) as Ref<Map<ListEditorKey, string>>
+  const editedKeys = ref(new Set<ListEditorKey>()) as Ref<Set<ListEditorKey>>
+  watch(
+    items,
+    (rows) => {
+      const live = new Set<ListEditorKey>()
+      for (const r of rows) {
+        const key = keyOf(r)
+        live.add(key)
+        if (!baselineHashes.value.has(key) && !addedBaseline.value.has(key)) {
+          addedBaseline.value.set(key, normalize(r))
+        }
+        if (!editedKeys.value.has(key)) {
+          const base = baselineHashes.value.get(key) ?? addedBaseline.value.get(key)
+          if (base !== undefined && base !== normalize(r)) editedKeys.value.add(key)
+        }
+      }
+      const stale: ListEditorKey[] = []
+      for (const key of addedBaseline.value.keys()) if (!live.has(key)) stale.push(key)
+      for (const key of stale) addedBaseline.value.delete(key)
+      // A deferred-deleted key that becomes live again (re-add before save) must drop its tombstone —
+      // otherwise it would both render and still count/report as deleted.
+      if (deletedRows.value.some((r) => live.has(keyOf(r)))) {
+        deletedRows.value = deletedRows.value.filter((r) => !live.has(keyOf(r)))
+      }
+    },
+    { immediate: true, deep: true },
+  )
+
+  const isRowEdited = (key: ListEditorKey): boolean => editedKeys.value.has(key)
+
+  const unsavedKeys = computed<Set<ListEditorKey>>(() => {
+    const out = new Set<ListEditorKey>()
+    for (const item of options.get()) {
+      const key = keyOf(item)
+      if (isItemDirty(item, key)) out.add(key)
+    }
+    return out
+  })
+
+  const isUnsaved = (key: ListEditorKey): boolean => unsavedKeys.value.has(key)
+  const hasUnsaved = computed<boolean>(
+    () => unsavedKeys.value.size > 0 || deletedRows.value.length > 0,
+  )
+
+  // Count of DISTINCT unconfirmed changes = union of live dirty keys (added / edited / moved) and
+  // deferred-deletion tombstones. A key that is both live and tombstoned (delete-then-re-add) counts
+  // once; a deleted row (no longer live) adds one. Drives the "N unconfirmed changes" indicator, so a
+  // delete lights up as a change even though the row itself is gone.
+  const unsavedCount = computed<number>(() => {
+    const keys = new Set<ListEditorKey>(unsavedKeys.value)
+    for (const r of deletedRows.value) keys.add(keyOf(r))
+    return keys.size
+  })
+
+  const resolveValidity = (
+    item: TItem,
+    key: ListEditorKey,
+  ): { invalid: boolean; warning: boolean } => {
+    const registered = registeredValidity.get(key)
+    if (registered) return { invalid: !registered(), warning: false }
+    if (!options.validate) return { invalid: false, warning: false }
+    const r = options.validate(item)
+    if (typeof r === 'boolean') return { invalid: !r, warning: false }
+    return { invalid: !r.valid, warning: r.valid && r.state === 'warning' }
+  }
+
+  const invalidKeys = computed<Set<ListEditorKey>>(() => {
+    const out = new Set<ListEditorKey>()
+    for (const item of options.get()) {
+      const key = keyOf(item)
+      if (resolveValidity(item, key).invalid) out.add(key)
+    }
+    return out
+  })
+  const hasErrors = computed<boolean>(() => invalidKeys.value.size > 0)
+
+  // Red rail gated behind "row has been edited" (content changed since add/baseline — mirrors the
+  // field's vuelidate `$dirty`) or an explicit validateAll() — so a freshly added still-untouched
+  // row stays amber (not red) and a loaded-but-invalid row doesn't light up before interaction,
+  // while a save attempt reveals every offender (mounted or collapsed).
+  const rowState = (
+    item: TItem,
+    key: ListEditorKey,
+    editing = false,
+  ): ListEditorValidationState => {
+    const { invalid, warning } = resolveValidity(item, key)
+    // Red rail for an invalid row that is edited, unsaved (added), or after a save attempt. A row being
+    // filled in reads amber (not red) and goes red once collapsed — but a save attempt (`submitted`,
+    // which also reveals collapsed offenders) always reds it, even while open. (QA 85050 batch 7)
+    if (invalid) {
+      if (submitted.value) return 'invalid'
+      if (editing) return null
+      return isRowEdited(key) || isUnsaved(key) ? 'invalid' : null
+    }
+    if (warning) return 'warning'
+    return null
+  }
+
+  const validateAll = (): boolean => {
+    submitted.value = true
+    return invalidKeys.value.size === 0
+  }
+
+  // Resolve the policy for THIS action: a per-action override wins, else the base strategy.
+  // Under 'preserve-values' only a move reassigns (through the existing kept slots); every other
+  // action leaves positions as-is (add keeps the handed value, delete leaves a hole, update/payload
+  // never touch them). Under 'renumber' every action rewrites to a clean `(index+1)*multiplier`.
+  const renumber = (arr: TItem[], action: PositionAction): TItem[] => {
+    if (!managedPosition) return arr
+    const strategy = positionOverrides[action] ?? positionStrategy
+    if (strategy === 'preserve-values') {
+      return action === 'move' ? preservePositionValues(arr, { positionField }) : arr
+    }
+    return renumberPositions(arr, { positionField, positionMultiplier })
+  }
+
+  const write = (arr: TItem[], action: PositionAction) => options.set(renumber(arr, action))
+
+  const getPayload = (): TItem[] =>
+    options.payload ? options.payload(options.get()) : renumber(options.get(), 'payload')
+
+  const getChanges = (): ListEditorChanges<TItem> => {
+    const added: TItem[] = []
+    const updated: TItem[] = []
+    const moved: TItem[] = []
+    for (const item of options.get()) {
+      const key = keyOf(item)
+      const baseHash = baselineHashes.value.get(key)
+      if (baseHash === undefined) added.push(item)
+      else if (baseHash !== normalize(item)) updated.push(item)
+      if (movedKeys.value.has(key)) moved.push(item)
+    }
+    return { added, updated, moved, deleted: [...deletedRows.value], reparented: [] }
+  }
+
+  const commit = (savedItems?: TItem[]): void => {
+    const source = savedItems ?? options.get()
+    const normalized = options.normalizeSaved ? options.normalizeSaved(source) : source
+    const next = normalized.map((item) => {
+      const key = options.commitKey
+        ? options.commitKey(
+            item,
+            baselineRows.value.find((r) => keyOf(r) === keyOf(item)),
+          )
+        : keyOf(item)
+      if (key === undefined || key === null) {
+        return keyField ? ({ ...item, [keyField]: nextListEditorTempId() } as TItem) : item
+      }
+      return item
+    })
+    options.set(next)
+    captureBaseline(next)
+    movedKeys.value = new Set()
+    deletedRows.value = []
+    addedBaseline.value = new Map()
+    editedKeys.value = new Set()
+    submitted.value = false
+  }
+
+  const reset = (rows?: TItem[]): void => {
+    options.set(rows ?? baselineRows.value.map((r) => cloneDeep(r)))
+    movedKeys.value = new Set()
+    deletedRows.value = []
+    addedBaseline.value = new Map()
+    editedKeys.value = new Set()
+    submitted.value = false
+  }
+
+  const indexOfKey = (arr: TItem[], key: ListEditorKey): number =>
+    arr.findIndex((x) => keyOf(x) === key)
+
+  const addItem = (item?: TItem, hint?: PositionHint): ListEditorKey | undefined => {
+    const row = item ?? options.factory?.()
+    if (row === undefined) return undefined // no item + no factory (read-only list) → no-op
+    const arr = [...options.get()]
+    let at = arr.length
+    if (hint?.afterId !== undefined) {
+      const i = indexOfKey(arr, hint.afterId)
+      at = i === -1 ? arr.length : i + 1
+    } else if (hint?.index !== undefined) {
+      at = Math.max(0, Math.min(hint.index, arr.length))
+    }
+    arr.splice(at, 0, row)
+    write(arr, 'add')
+    return keyOf(row)
+  }
+
+  const updateItem = (
+    key: ListEditorKey,
+    next: TItem | Partial<TItem> | ((current: TItem) => TItem),
+  ): void => {
+    const arr = [...options.get()]
+    const i = indexOfKey(arr, key)
+    if (i === -1) return
+    const current = arr[i]
+    const resolved =
+      typeof next === 'function'
+        ? (next as (c: TItem) => TItem)(current)
+        : ({ ...current, ...(next as Partial<TItem>) } as TItem)
+    arr[i] = resolved
+    write(arr, 'update')
+  }
+
+  const deleteItem = (key: ListEditorKey, opts?: { trackDeleted?: boolean }): void => {
+    const arr = [...options.get()]
+    const i = indexOfKey(arr, key)
+    if (i === -1) return
+    const [removed] = arr.splice(i, 1)
+    // A previously-saved row that's removed is a DEFERRED deletion: reported in the change-set and
+    // counted as one unconfirmed change (`unsavedCount`) until save. `trackDeleted: false` (immediate
+    // mode — the row is already deleted on the backend) skips the tombstone so it does NOT read as
+    // unsaved. An unsaved temp row just vanishes either way.
+    if (baselineHashes.value.has(key) && opts?.trackDeleted !== false) {
+      deletedRows.value = [...deletedRows.value, removed]
+    }
+    movedKeys.value.delete(key)
+    write(arr, 'remove')
+  }
+
+  // Un-tombstone a deferred-deleted row. Re-inserting the row into the model is the caller's job
+  // (e.g. reorder Cancel restoring the pre-session snapshot); this only clears the deletion record so
+  // `deletedRows` / `unsavedCount` / `getChanges().deleted` stay consistent.
+  const restoreDeleted = (key: ListEditorKey): void => {
+    deletedRows.value = deletedRows.value.filter((r) => keyOf(r) !== key)
+  }
+
+  const moveItem = (fromIndex: number, toIndex: number): void => {
+    const arr = [...options.get()]
+    if (fromIndex < 0 || fromIndex >= arr.length || toIndex < 0 || toIndex >= arr.length) return
+    if (fromIndex === toIndex) return
+    const [el] = arr.splice(fromIndex, 1)
+    arr.splice(toIndex, 0, el)
+    movedKeys.value.add(keyOf(el))
+    write(arr, 'move')
+  }
+
+  // Reorder Cancel restores the pre-session order, so the moves are undone — drop
+  // just those keys' "moved" flag (edits/adds stay dirty). No arg = clear all.
+  const clearMoved = (keys?: Iterable<ListEditorKey>): void => {
+    if (keys === undefined) {
+      movedKeys.value = new Set()
+      return
+    }
+    const next = new Set(movedKeys.value)
+    for (const key of keys) next.delete(key)
+    movedKeys.value = next
+  }
+
+  const registerValidity = (key: ListEditorKey, isValid: () => boolean): (() => void) => {
+    registeredValidity.set(key, isValid)
+    return () => registeredValidity.delete(key)
+  }
+
+  return {
+    items,
+    hasUnsaved,
+    unsavedCount,
+    hasErrors,
+    invalidKeys,
+    isUnsaved,
+    rowState,
+    validateAll,
+    getPayload,
+    getChanges,
+    commit,
+    reset,
+    addItem,
+    updateItem,
+    deleteItem,
+    restoreDeleted,
+    moveItem,
+    clearMoved,
+    registerValidity,
+  }
+}
diff --git a/src/labs/listEditor/composables/useListEditorItemValidation.ts b/src/labs/listEditor/composables/useListEditorItemValidation.ts
deleted file mode 100644
index 0ee9ba2e..00000000
--- a/src/labs/listEditor/composables/useListEditorItemValidation.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  computed,
-  getCurrentInstance,
-  inject,
-  onBeforeUnmount,
-  watch,
-  type ComputedRef,
-  type InjectionKey,
-  type Ref,
-} from 'vue'
-import type {
-  ListEditorKey,
-  ListEditorValidationState,
-} from '@/labs/listEditor/types/listEditorTypes'
-
-export interface ListEditorValidationRegistry {
-  register: (
-    key: ListEditorKey,
-    state: Ref<ListEditorValidationState> | ComputedRef<ListEditorValidationState>,
-  ) => void
-  unregister: (key: ListEditorKey) => void
-}
-
-export const ListEditorValidationKey = Symbol(
-  'le.validation',
-) as InjectionKey<ListEditorValidationRegistry>
-
-export interface UseListEditorItemValidationOptions {
-  /**
-   * Stable identity of the row in the editor's v-model. Pass a getter so the
-   * composable can re-register if the key ever swaps.
-   */
-  key: () => ListEditorKey
-  /**
-   * Reactive validation state. Common shape: a computed reading vuelidate's
-   * `v$.$dirty && v$.$invalid` and returning 'invalid' or null.
-   */
-  state:
-    | Ref<ListEditorValidationState>
-    | ComputedRef<ListEditorValidationState>
-    | (() => ListEditorValidationState)
-}
-
-// Lets a row's inline form report its own validation state to the surrounding
-// list editor without prop-drilling. The parent editor `provide`s the registry;
-// any descendant in the slot tree can `inject` it via this composable.
-//
-// No-op when called outside an editor (e.g. a form re-used elsewhere) — the
-// inject silently returns null.
-export function useListEditorItemValidation(
-  options: UseListEditorItemValidationOptions,
-): void {
-  const registry = inject(ListEditorValidationKey, null)
-  if (!registry) return
-  if (!getCurrentInstance()) return
-
-  const stateRef = computed<ListEditorValidationState>(() => {
-    const s = options.state
-    if (typeof s === 'function') return s()
-    return s.value
-  })
-
-  let lastKey: ListEditorKey | null = null
-  watch(
-    options.key,
-    (now) => {
-      if (lastKey !== null && lastKey !== now) registry.unregister(lastKey)
-      registry.register(now, stateRef)
-      lastKey = now
-    },
-    { immediate: true },
-  )
-
-  onBeforeUnmount(() => {
-    if (lastKey !== null) registry.unregister(lastKey)
-  })
-}
diff --git a/src/labs/listEditor/composables/useListEditorScopeValidity.ts b/src/labs/listEditor/composables/useListEditorScopeValidity.ts
new file mode 100644
index 00000000..6e578dc6
--- /dev/null
+++ b/src/labs/listEditor/composables/useListEditorScopeValidity.ts
@@ -0,0 +1,85 @@
+import { watch, type ComputedRef } from 'vue'
+import useVuelidate from '@vuelidate/core'
+import type { ListEditorValidationScope } from '@/labs/listEditor/types/listEditorTypes'
+
+export interface UseListEditorScopeValidityOptions {
+  /**
+   * The editor's aggregate validity — the controller's `hasErrors`, a computed over ALL raw rows
+   * via the `:validate` predicate (so it reflects collapsed/unmounted rows too).
+   */
+  hasErrors: ComputedRef<boolean>
+  /**
+   * The consumer's vuelidate `$scope`. `undefined` = not wired (no-op, legacy behavior);
+   * `false` = explicit opt-out (the save flow calls the editor `validateAll()` itself).
+   */
+  validationScope: ListEditorValidationScope | false | undefined
+  /**
+   * Reveal every invalid row (open it + show the red rail) — pass the editor's own
+   * `validateAllAndReveal` routine so nested editors also expand ancestors.
+   */
+  reveal: () => void
+  /**
+   * Whether the editor got a `:validate` predicate. `hasErrors` is driven solely by it
+   * (row-form vuelidate feeds a separate display registry, not `hasErrors`), so a scope
+   * wired WITHOUT `:validate` yields `hasErrors === false` forever — a silently-dead gate.
+   * Passed so this composable can warn (dev) instead of failing open.
+   */
+  validateProvided: boolean
+}
+
+/**
+ * Bridges the editor's aggregate row validity into the consumer's vuelidate scope collector, so a
+ * plain `v$.value.$touch(); if (v$.value.$invalid) return` save gate BLOCKS (and reveals) even a
+ * COLLAPSED invalid row — whose own row-form vuelidate has unmounted and deregistered.
+ *
+ * The editor is always mounted and `hasErrors` scans all raw rows, so the collector sees rows
+ * regardless of expand state. `$invalid` reflects validity immediately (no touch needed → the save
+ * blocks synchronously); the `$dirty` watch mirrors the collector's `$touch()` to open the offenders.
+ *
+ * Opt-in: a no-op unless `validationScope` is a real scope, so an editor without the prop behaves
+ * exactly as before.
+ */
+export function useListEditorScopeValidity(options: UseListEditorScopeValidityOptions): void {
+  const { hasErrors, validationScope, reveal, validateProvided } = options
+  if (validationScope === undefined || validationScope === false) return
+
+  // `true` = vuelidate's GLOBAL scope. A globally-scoped child is NOT collected by a parent that
+  // uses a NAMED ($scope: Symbol) collector — so under the typical named save gate the bridge is
+  // silently dropped. Warn: the consumer almost always wants their collector's exact scope value.
+  if (validationScope === true) {
+    console.warn(
+      '[list-editor] `:validation-scope="true"` uses vuelidate’s GLOBAL scope. If your save gate ' +
+        'collects a NAMED scope (useVuelidate({ $scope: someSymbol })), this editor’s validity is ' +
+        'NOT collected by it and the gate won’t block. Pass the SAME scope value your collector uses.',
+    )
+  }
+
+  // A scope with no `:validate` bridges an always-false `hasErrors` — the gate never blocks. Warn
+  // (dev) so the misconfiguration is visible instead of silently letting invalid rows through save.
+  if (!validateProvided) {
+    console.warn(
+      '[list-editor] `:validation-scope` is set but `:validate` is missing. The scope save-gate ' +
+        'bridges the editor’s aggregate `hasErrors`, which is driven only by `:validate`; without ' +
+        'it the gate never blocks (hasErrors stays false). Pass `:validate` so collapsed/invalid ' +
+        'rows block the consumer save, or drop `:validation-scope` if you gate validity yourself.',
+    )
+  }
+
+  // One editor-level child registered under the consumer's scope. The validator reads `hasErrors`
+  // reactively (vuelidate's sync `$invalid` is a computed that runs it), so the collector's
+  // `$invalid` tracks it. State is `hasErrors` only to give the field a (reactive) value.
+  const v$ = useVuelidate(
+    { listEditor: { valid: () => !hasErrors.value } },
+    { listEditor: hasErrors },
+    { $scope: validationScope },
+  )
+
+  // On save the consumer's collector `$touch()` propagates to this child (`$dirty` → true); mirror
+  // the editor's `validateAll()` reveal so the blocked save opens WHICH rows are wrong.
+  watch(
+    () => v$.value.$dirty,
+    (dirty) => {
+      if (dirty && hasErrors.value) reveal()
+    },
+  )
+}
diff --git a/src/labs/listEditor/composables/useListEditorStateScope.ts b/src/labs/listEditor/composables/useListEditorStateScope.ts
new file mode 100644
index 00000000..f30e25a1
--- /dev/null
+++ b/src/labs/listEditor/composables/useListEditorStateScope.ts
@@ -0,0 +1,313 @@
+import {
+  effectScope,
+  getCurrentInstance,
+  getCurrentScope,
+  inject,
+  onBeforeUnmount,
+  onScopeDispose,
+  provide,
+  shallowRef,
+  toValue,
+  type EffectScope,
+  type InjectionKey,
+  type ShallowRef,
+} from 'vue'
+import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
+import {
+  useListEditorController,
+  type ListEditorHandle,
+  type UseListEditorControllerOptions,
+} from '@/labs/listEditor/composables/useListEditorController'
+import {
+  useNestedListEditorController,
+  type NestedListEditorHandle,
+  type UseNestedListEditorControllerOptions,
+} from '@/labs/listEditor/composables/useNestedListEditorController'
+
+/**
+ * The instance-bound controller options an editor re-supplies on EVERY (re)mount. `get`/`set` close
+ * over the editor instance's `modelValue`/`emit`, and `factory`/`validate`/`dirtyExclude` over its
+ * props — a remounted editor is a NEW instance, so a persisted controller must read all of them
+ * through the live binding (see `useListEditorStateEntry`), never through the closures of the dead
+ * instance that happened to create it.
+ */
+export type ListEditorStateBindings<TItem extends Record<string, any>> = Pick<
+  UseListEditorControllerOptions<TItem>,
+  'get' | 'set' | 'factory' | 'getKey' | 'position' | 'dirtyExclude' | 'validate'
+>
+
+export type NestedListEditorStateBindings<TItem extends Record<string, any>> = Pick<
+  UseNestedListEditorControllerOptions<TItem>,
+  | 'get'
+  | 'set'
+  | 'factory'
+  | 'getKey'
+  | 'position'
+  | 'parentField'
+  | 'maxDepth'
+  | 'dirtyExclude'
+  | 'validate'
+>
+
+/** What a `state-key`'d editor gets back: its persisted handle + the scope to hand to ITS own rows. */
+export interface ListEditorStateEntry<THandle> {
+  handle: THandle
+  /** Scope for this editor's `#item` slot subtree — persisted alongside the entry, so a
+   *  grand-nested `state-key`'d editor survives this editor's unmount too. */
+  childScope: ListEditorStateScope | null
+}
+
+interface StateEntry {
+  scope: EffectScope
+  live: ShallowRef<any>
+  handle: unknown
+  children: ListEditorStateScope | null
+  /** uid of the editor instance currently bound to this entry (`null` = parked, no live editor). */
+  boundUid: number | null
+}
+
+/**
+ * A keyed registry of list-editor state controllers, owned by an ANCESTOR (the editor that provides
+ * it for its `#item` slot subtree) and living in that ancestor's `effectScope` — NOT in the scope of
+ * the transient editor component that resolves it. That is the whole point: a nested editor's `#item`
+ * slot is behind a `v-if`, so collapsing a row UNMOUNTS the nested editor; a component-owned
+ * controller dies with it and a brand-new one re-baselines the already-edited data on re-expand,
+ * losing amber / movedKeys / editedKeys / tombstones / the submitted (red-rail) flag.
+ */
+export interface ListEditorStateScope {
+  /** Unique per scope instance; namespaces the row prefixes this scope mints (and can prune). */
+  readonly id: string
+  /**
+   * First call for `key` CREATES the controller inside this scope (via `create`, from the calling
+   * editor's own bindings) and registers it. Every later call REBINDS the registered controller to
+   * the (new) calling instance's bindings and returns it — state intact.
+   */
+  resolve<TBindings extends object, THandle>(
+    key: string,
+    bindings: TBindings,
+    create: (live: ShallowRef<TBindings>) => THandle,
+    uid?: number | null,
+  ): THandle
+  /**
+   * The editor bound to `key` is unmounting: park the entry — its model accessors are swapped for a
+   * frozen read + a no-op write so the orphaned controller can never read or write through the dead
+   * instance's `modelValue`/`emit`. No-op when another instance has already rebound (mount-before-
+   * unmount ordering), which is why the caller passes its uid.
+   */
+  release<TBindings extends object>(
+    key: string,
+    uid: number | null,
+    park: (bindings: TBindings) => TBindings,
+  ): void
+  /** Child scope of a registered entry (created lazily inside the entry's effect scope). */
+  childScope(key: string): ListEditorStateScope | null
+  /** The state-key prefix for a row — hosts thread it down and suffix it per nested list. */
+  prefixFor(rowKey: ListEditorKey): string
+  /** Dispose the entries of rows that no longer exist (keys minted from `prefixFor` only). */
+  retainOwners(liveRowKeys: Iterable<ListEditorKey>): void
+  has(key: string): boolean
+  size(): number
+  dispose(): void
+}
+
+export const ListEditorStateScopeKey: InjectionKey<ListEditorStateScope> = Symbol(
+  'le.stateScope',
+) as InjectionKey<ListEditorStateScope>
+
+let scopeSeq = 0
+
+/**
+ * Create a scope. The internal `effectScope` is NOT detached: it attaches to whatever scope creates
+ * it — the providing editor's component scope (so everything stops on its unmount) or a persisted
+ * ENTRY's scope (so a nested editor's own row scope outlives the editor exactly as its controller
+ * does).
+ */
+export function createListEditorStateScope(): ListEditorStateScope {
+  const id = `les${++scopeSeq}`
+  const entries = new Map<string, StateEntry>()
+  const root = effectScope()
+
+  const disposeEntry = (key: string, entry: StateEntry): void => {
+    entry.children?.dispose()
+    entry.scope.stop()
+    entries.delete(key)
+  }
+
+  const scope: ListEditorStateScope = {
+    id,
+    resolve<TBindings extends object, THandle>(
+      key: string,
+      bindings: TBindings,
+      create: (live: ShallowRef<TBindings>) => THandle,
+      uid: number | null = null,
+    ): THandle {
+      const existing = entries.get(key)
+      if (existing) {
+        if (existing.boundUid !== null && uid !== null && existing.boundUid !== uid) {
+          console.warn(
+            `[list-editor] two editors are mounted under the same state-key "${key}". ` +
+              'They would share one state controller — give each editor a unique state-key ' +
+              '(e.g. suffix the row prefix with the list name).',
+          )
+        }
+        existing.boundUid = uid
+        // THE REBIND. `live` is a shallowRef, so this assignment invalidates every controller
+        // computed that read it (`items` first) — the persisted controller now reads and writes
+        // the LIVE editor instance's model instead of the dead one it was created from.
+        existing.live.value = bindings
+        return existing.handle as THandle
+      }
+      const entryScope = root.active
+        ? (root.run(() => effectScope()) as EffectScope)
+        : effectScope()
+      const live = shallowRef(bindings) as ShallowRef<TBindings>
+      const handle = entryScope.run(() => create(live)) as THandle
+      entries.set(key, { scope: entryScope, live, handle, children: null, boundUid: uid })
+      return handle
+    },
+    release<TBindings extends object>(
+      key: string,
+      uid: number | null,
+      park: (bindings: TBindings) => TBindings,
+    ): void {
+      const entry = entries.get(key)
+      if (!entry || entry.boundUid !== uid) return
+      entry.boundUid = null
+      entry.live.value = park(entry.live.value as TBindings)
+    },
+    childScope(key: string): ListEditorStateScope | null {
+      const entry = entries.get(key)
+      if (!entry) return null
+      if (!entry.children) {
+        entry.children = entry.scope.run(() => createListEditorStateScope()) ?? null
+      }
+      return entry.children
+    },
+    prefixFor(rowKey: ListEditorKey): string {
+      return `${id}:${String(rowKey)}`
+    },
+    retainOwners(liveRowKeys: Iterable<ListEditorKey>): void {
+      if (entries.size === 0) return
+      const livePrefixes: string[] = []
+      for (const rowKey of liveRowKeys) livePrefixes.push(`${id}:${String(rowKey)}`)
+      const ownPrefix = `${id}:`
+      for (const [key, entry] of entries) {
+        // Keys the host invented itself (not derived from `prefixFor`) carry no row ownership —
+        // they are only disposed with the scope.
+        if (!key.startsWith(ownPrefix)) continue
+        const alive = livePrefixes.some((p) => key === p || key.startsWith(`${p}:`))
+        if (!alive) disposeEntry(key, entry)
+      }
+    },
+    has(key: string): boolean {
+      return entries.has(key)
+    },
+    size(): number {
+      return entries.size
+    },
+    dispose(): void {
+      for (const [key, entry] of entries) disposeEntry(key, entry)
+      entries.clear()
+      root.stop()
+    },
+  }
+
+  if (getCurrentScope()) onScopeDispose(() => scope.dispose())
+
+  return scope
+}
+
+/**
+ * Provide the row-state scope for an editor's `#item` slot subtree. A `state-key`'d editor passes
+ * the `childScope` of its own persisted entry (so the chain survives at any depth); a plain editor
+ * creates a component-owned scope that dies with it.
+ */
+export function provideListEditorStateScope(
+  inherited: ListEditorStateScope | null,
+): ListEditorStateScope {
+  const scope = inherited ?? createListEditorStateScope()
+  provide(ListEditorStateScopeKey, scope)
+  return scope
+}
+
+const parkBindings = <TBindings extends { get: () => any; set: (value: any) => void }>(
+  bindings: TBindings,
+): TBindings => {
+  const parked = bindings.get()
+  return { ...bindings, get: () => parked, set: () => undefined }
+}
+
+/**
+ * Resolve this editor's controller from the nearest ancestor scope under `stateKey` (or `null` when
+ * the editor has no `state-key`, or no ancestor provides a scope → today's component-owned
+ * controller, unchanged).
+ *
+ * The controller is built from the FIRST mounting instance's own props, but every instance-bound
+ * option is read through `live` — the shallowRef the scope swaps on each (re)mount. `getKey` and
+ * `position` are static per tag, so the controller reads them once (it derives its key field at
+ * construction); everything else is indirected.
+ */
+export function useListEditorStateEntry<TItem extends Record<string, any>>(
+  stateKey: string | undefined,
+  bindings: ListEditorStateBindings<TItem>,
+): ListEditorStateEntry<ListEditorHandle<TItem>> | null {
+  const scope = inject(ListEditorStateScopeKey, null)
+  if (!stateKey || !scope) return null
+  const uid = getCurrentInstance()?.uid ?? null
+  const handle = scope.resolve<ListEditorStateBindings<TItem>, ListEditorHandle<TItem>>(
+    stateKey,
+    bindings,
+    (live) =>
+      useListEditorController<TItem>({
+        get: () => live.value.get(),
+        set: (items) => live.value.set(items),
+        // `factory?.()` → undefined reproduces the "no factory" no-op of `addItem` exactly.
+        factory: (() => live.value.factory?.()) as () => TItem,
+        getKey: live.value.getKey,
+        position: live.value.position,
+        dirtyExclude: () => toValue(live.value.dirtyExclude) ?? [],
+        // `?? true` reproduces the "no validate" always-valid branch.
+        validate: (item) => live.value.validate?.(item) ?? true,
+      }),
+    uid,
+  )
+  if (getCurrentInstance()) {
+    onBeforeUnmount(() =>
+      scope.release<ListEditorStateBindings<TItem>>(stateKey, uid, parkBindings),
+    )
+  }
+  return { handle, childScope: scope.childScope(stateKey) }
+}
+
+/** Tree-shaped twin of `useListEditorStateEntry` for ANestedSortableListEditor. */
+export function useNestedListEditorStateEntry<TItem extends Record<string, any>>(
+  stateKey: string | undefined,
+  bindings: NestedListEditorStateBindings<TItem>,
+): ListEditorStateEntry<NestedListEditorHandle<TItem>> | null {
+  const scope = inject(ListEditorStateScopeKey, null)
+  if (!stateKey || !scope) return null
+  const uid = getCurrentInstance()?.uid ?? null
+  const handle = scope.resolve<NestedListEditorStateBindings<TItem>, NestedListEditorHandle<TItem>>(
+    stateKey,
+    bindings,
+    (live) =>
+      useNestedListEditorController<TItem>({
+        get: () => live.value.get(),
+        set: (tree) => live.value.set(tree),
+        factory: (() => live.value.factory?.()) as () => TItem,
+        getKey: live.value.getKey,
+        position: live.value.position,
+        parentField: live.value.parentField,
+        maxDepth: live.value.maxDepth,
+        dirtyExclude: () => toValue(live.value.dirtyExclude) ?? [],
+        validate: (item) => live.value.validate?.(item) ?? true,
+      }),
+    uid,
+  )
+  if (getCurrentInstance()) {
+    onBeforeUnmount(() =>
+      scope.release<NestedListEditorStateBindings<TItem>>(stateKey, uid, parkBindings),
+    )
+  }
+  return { handle, childScope: scope.childScope(stateKey) }
+}
diff --git a/src/labs/listEditor/composables/useNestedListEditor.ts b/src/labs/listEditor/composables/useNestedListEditor.ts
index 5f02b575..8496c0bb 100644
--- a/src/labs/listEditor/composables/useNestedListEditor.ts
+++ b/src/labs/listEditor/composables/useNestedListEditor.ts
@@ -27,6 +27,12 @@ export interface NestedViewItem<TItem> extends ListViewItem<TItem> {
 
 export interface UseNestedListEditorOptions {
   keyField?: string
+  /**
+   * Resolve a row's key; takes precedence over `keyField`. Pass the controller's
+   * `keyOf` so tree ops key rows the same way as dirty/validity tracking — incl.
+   * a FUNCTION get-key, which `keyField` lookup would miss.
+   */
+  getKey?: (data: any) => ListEditorKey
   positionField?: string
   parentField?: string
   positionMultiplier?: number
@@ -36,13 +42,20 @@ export interface UseNestedListEditorOptions {
 
 export interface NestedListEditorApi<TItem extends Record<string, any>> {
   viewItems: ComputedRef<NestedViewItem<TItem>[]>
-  findNode: (id: ListEditorKey) => { node: NestedTreeNode<TItem> | null; parent: NestedTreeNode<TItem> | null }
+  findNode: (id: ListEditorKey) => {
+    node: NestedTreeNode<TItem> | null
+    parent: NestedTreeNode<TItem> | null
+  }
   addItem: (
     data: TItem,
-    hint?: PositionHint & { parentId?: ListEditorKey | null; asFirstChild?: boolean; childrenAllowed?: boolean },
+    hint?: PositionHint & {
+      parentId?: ListEditorKey | null
+      asFirstChild?: boolean
+      childrenAllowed?: boolean
+    },
   ) => NestedTree<TItem>
   deleteItem: (id: ListEditorKey) => NestedTree<TItem>
-  updateItem: (id: ListEditorKey, data: TItem) => NestedTree<TItem>
+  updateItem: (id: ListEditorKey, data: TItem, markDirty?: boolean) => NestedTree<TItem>
   moveUp: (id: ListEditorKey) => NestedTree<TItem> | null
   moveDown: (id: ListEditorKey) => NestedTree<TItem> | null
   moveTop: (id: ListEditorKey) => NestedTree<TItem> | null
@@ -73,12 +86,14 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
   options: UseNestedListEditorOptions,
 ): NestedListEditorApi<TItem> {
   const keyField = options.keyField ?? DEFAULT_KEY_FIELD
+  const resolveKey = options.getKey
   const positionField = options.positionField ?? DEFAULT_POSITION_FIELD
   const parentField = options.parentField ?? DEFAULT_PARENT_FIELD
   const positionMultiplier = options.positionMultiplier ?? 1
   const maxDepth = options.maxDepth
 
-  const getKey = (data: TItem): ListEditorKey => data[keyField] as ListEditorKey
+  const getKey = (data: TItem): ListEditorKey =>
+    resolveKey ? resolveKey(data) : (data[keyField] as ListEditorKey)
 
   const calculateSubtreeDepth = (node: NestedTreeNode<TItem>): number => {
     if (!node.children || node.children.length === 0) return 1
@@ -110,6 +125,9 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
     for (const sibling of siblings) {
       if (sibling.data[positionField] !== pos) {
         ;(sibling.data as any)[positionField] = pos
+        // Flag dirty so a partial-subset save persists the new position;
+        // otherwise reorders are lost on reload and rows collide on old positions.
+        sibling.meta.dirty = true
       }
       pos += positionMultiplier
     }
@@ -188,10 +206,7 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
     siblings.splice(afterIdx + 1, 0, newNode)
   }
 
-  const resolveInsertIndex = (
-    siblings: NestedTreeNode<TItem>[],
-    hint?: PositionHint,
-  ): number => {
+  const resolveInsertIndex = (siblings: NestedTreeNode<TItem>[], hint?: PositionHint): number => {
     if (!hint) return siblings.length
     if (hint.afterId !== undefined) {
       const idx = siblings.findIndex((s) => getKey(s.data) === hint.afterId)
@@ -209,7 +224,11 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
 
   const addItem = (
     data: TItem,
-    hint?: PositionHint & { parentId?: ListEditorKey | null; asFirstChild?: boolean; childrenAllowed?: boolean },
+    hint?: PositionHint & {
+      parentId?: ListEditorKey | null
+      asFirstChild?: boolean
+      childrenAllowed?: boolean
+    },
   ): NestedTree<TItem> => {
     const cloned = cloneDeep(model.value) as NestedTree<TItem>
     const childrenAllowed = hint?.childrenAllowed ?? true
@@ -233,7 +252,9 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
     if (hint?.afterId !== undefined) {
       const { node: afterNode, parent: afterParent } = findNode(hint.afterId, cloned.children)
       if (afterNode) {
-        const siblings = afterParent ? (afterParent.children as NestedTreeNode<TItem>[]) : cloned.children
+        const siblings = afterParent
+          ? (afterParent.children as NestedTreeNode<TItem>[])
+          : cloned.children
         const idx = siblings.indexOf(afterNode)
         if (idx !== -1) {
           insertAfter(siblings, idx, newNode)
@@ -266,11 +287,14 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
     return cloned
   }
 
-  const updateItem = (id: ListEditorKey, data: TItem): NestedTree<TItem> => {
+  const updateItem = (id: ListEditorKey, data: TItem, markDirty = true): NestedTree<TItem> => {
     const cloned = cloneDeep(model.value) as NestedTree<TItem>
     const { node } = findNode(id, cloned.children)
     if (!node) return cloned
     node.data = cloneDeep(data) as TItem
+    // An edit must be persisted by partial-subset saves. `markDirty=false` is for
+    // snapshot restore on edit-cancel, which must NOT flag the node dirty.
+    if (markDirty) node.meta.dirty = true
     model.value = cloned
     return cloned
   }
@@ -342,6 +366,8 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
     siblings.splice(idx, 1)
     prev.children!.push(node)
     ;(node.data as any)[parentField] = getKey(prev.data)
+    // Persist the reparent even when the position number is unchanged (QA 85050 BUG-13).
+    node.meta.dirty = true
     recalculateSiblings(siblings)
     recalculateSiblings(prev.children!)
     model.value = cloned
@@ -358,7 +384,9 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
     if (!node || !parent) return null
 
     const { parent: grandParent } = findNode(getKey(parent.data), cloned.children)
-    const grandSiblings = grandParent ? (grandParent.children as NestedTreeNode<TItem>[]) : cloned.children
+    const grandSiblings = grandParent
+      ? (grandParent.children as NestedTreeNode<TItem>[])
+      : cloned.children
     const parentIdx = grandSiblings.indexOf(parent)
     if (parentIdx === -1) return null
 
@@ -368,6 +396,8 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
     currentSiblings.splice(idx, 1)
     grandSiblings.splice(parentIdx + 1, 0, node)
     ;(node.data as any)[parentField] = grandParent ? getKey(grandParent.data) : null
+    // Persist the reparent even when the position number is unchanged (QA 85050 BUG-13).
+    node.meta.dirty = true
 
     recalculateSiblings(currentSiblings)
     recalculateSiblings(grandSiblings)
@@ -376,10 +406,7 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
   }
 
   const calculateParentDepth = (tree: NestedTree<TItem>, id: ListEditorKey): number => {
-    const walk = (
-      arr: NestedTreeNode<TItem>[],
-      depth: number,
-    ): number | null => {
+    const walk = (arr: NestedTreeNode<TItem>[], depth: number): number | null => {
       for (const item of arr) {
         if (getKey(item.data) === id) return depth
         if (item.children && item.children.length) {
@@ -445,6 +472,10 @@ export function useNestedListEditor<TItem extends Record<string, any>>(
     insertAt = Math.max(0, Math.min(insertAt, targetSiblings.length))
     targetSiblings.splice(insertAt, 0, removed)
     ;(removed.data as any)[parentField] = newParentNode ? getKey(newParentNode.data) : null
+    // Flag explicitly: a reparent at an unchanged position number (root pos 2 →
+    // a group's 2nd child, also pos 2) isn't caught by recalculateSiblings, so the
+    // partial save would omit it and the child reverts to root on reload (BUG-13).
+    removed.meta.dirty = true
 
     if (!samelist) recalculateSiblings(sourceSiblings)
     recalculateSiblings(targetSiblings)
diff --git a/src/labs/listEditor/composables/useNestedListEditorController.ts b/src/labs/listEditor/composables/useNestedListEditorController.ts
new file mode 100644
index 00000000..a52a5178
--- /dev/null
+++ b/src/labs/listEditor/composables/useNestedListEditorController.ts
@@ -0,0 +1,628 @@
+import {
+  computed,
+  reactive,
+  ref,
+  toValue,
+  watch,
+  type ComputedRef,
+  type MaybeRefOrGetter,
+  type Ref,
+  type ShallowUnwrapRef,
+} from 'vue'
+import type {
+  ListEditorKey,
+  ListEditorValidationState,
+  NestedPositionHint,
+  NestedTree,
+  NestedTreeNode,
+} from '@/labs/listEditor/types/listEditorTypes'
+import {
+  useNestedListEditor,
+  type NestedViewItem,
+} from '@/labs/listEditor/composables/useNestedListEditor'
+import type {
+  GetKey,
+  ListEditorValidationResult,
+  PositionOption,
+  PositionStrategy,
+} from '@/labs/listEditor/composables/useListEditorController'
+import { nextListEditorTempId } from '@/labs/listEditor/utils/tempId'
+import { cloneDeep } from '@/utils/common'
+
+export type { ListEditorValidationResult, GetKey, PositionOption, PositionStrategy }
+
+/** Flattened ordered row carrying its resolved key (for change-sets + payload). */
+export interface NestedListEditorChanges<TItem> {
+  added: TItem[]
+  updated: TItem[]
+  moved: TItem[]
+  deleted: TItem[]
+  /**
+   * Rows whose parent changed since the last commit (BUG-13 — persisted even
+   * when the position number is unchanged).
+   */
+  reparented: TItem[]
+}
+
+export interface UseNestedListEditorControllerOptions<TItem extends Record<string, any>> {
+  /** Read the live tree (the editor's v-model, or a consumer store getter). */
+  get: () => NestedTree<TItem>
+  /** Write the tree back. */
+  set: (tree: NestedTree<TItem>) => void
+  /** New-row factory. Optional for read-only / no-add trees. Should mint a stable temp id. */
+  factory?: () => TItem
+  /** Stable row identity. Default `'id'`. Never point this at the position field. */
+  getKey?: GetKey<TItem>
+  /** Managed order field. Default `'position'`. `false` opts out of position management. */
+  position?: PositionOption<TItem>
+  /** Parent-key field written onto reparented rows. Default `'parent'`. */
+  parentField?: string
+  /** Maximum nesting depth (1-based). Enforced by indent/outdent/moveTo. */
+  maxDepth: number
+  /**
+   * Extra top-level fields to drop from the dirty content-hash (position +
+   * parent are always dropped). Same purpose as the flat controller — a child
+   * collection tracked by a separate editor shouldn't flip its owner amber.
+   * Accepts a getter/ref so a `computed` set is honoured reactively.
+   */
+  dirtyExclude?: MaybeRefOrGetter<string[]>
+  /** Per-row validity — `true` = valid. Drives the red rail + `hasErrors`. */
+  validate?: (item: TItem) => ListEditorValidationResult
+  /** Custom dirty predicate (override the default `meta.dirty ∪ content-diff`). */
+  isDirty?: (current: TItem, saved: TItem | undefined) => boolean
+  /** Custom save payload (overrides `getPayload`). Receives the flattened ordered rows. */
+  payload?: (items: TItem[]) => TItem[]
+  /** Resolve a saved row's key on commit (default: existing key, else mint a temp id). */
+  commitKey?: (saved: TItem, previous: TItem | undefined) => ListEditorKey
+  /** Normalize the server tree before it becomes the new baseline on commit. */
+  normalizeSaved?: (saved: NestedTree<TItem>) => NestedTree<TItem>
+}
+
+/**
+ * Tree-shaped state controller for the nested list editor (v2). A superset of
+ * the flat `ListEditorHandle`: same dirty/validate/commit/reset semantics, but
+ * the row set is a flattened ordered projection of a `NestedTree` and the
+ * mutators are tree ops (indent / outdent / moveTo / addChild …) delegated to
+ * `useNestedListEditor`. Each flattened payload row carries its resolved
+ * `position` and parent key written onto it.
+ */
+export interface NestedListEditorHandle<TItem extends Record<string, any>> {
+  /** Flattened ordered rows (depth-first), matching the rendered order. */
+  items: ComputedRef<TItem[]>
+  /** Tree view rows (key/index/raw/depth/parent…), as consumed by the renderer. */
+  viewItems: ComputedRef<NestedViewItem<TItem>[]>
+  hasUnsaved: ComputedRef<boolean>
+  /** Count of distinct unconfirmed changes (added/edited/moved/reparented rows + deferred deletions). */
+  unsavedCount: ComputedRef<number>
+  hasErrors: ComputedRef<boolean>
+  invalidKeys: ComputedRef<Set<ListEditorKey>>
+  /** Amber: is this row added / edited / moved / reparented since the last commit? */
+  isUnsaved: (key: ListEditorKey) => boolean
+  /** Red rail (gated): 'invalid' only once the row is unsaved or `validateAll()` ran. */
+  rowState: (item: TItem, key: ListEditorKey, editing?: boolean) => ListEditorValidationState
+  /** Force-show all invalid rows + return whether the tree is valid. The save guard. */
+  validateAll: () => boolean
+  /** Flattened ordered array (each row carrying its resolved position + parent key) for a full-DTO save. */
+  getPayload: () => TItem[]
+  /** Change-set for partial-save endpoints (added/updated/moved/deleted/reparented), keyed. */
+  getChanges: () => NestedListEditorChanges<TItem>
+  /** Adopt the saved tree as the new baseline; backfill keys; clear dirty/submitted. */
+  commit: (saved?: NestedTree<TItem>) => void
+  /** Discard unsaved edits back to the last committed baseline (or a given tree). */
+  reset: (tree?: NestedTree<TItem>) => void
+
+  // Tree mutations — delegate to useNestedListEditor (which carries BUG-13).
+  addItem: (item?: TItem, hint?: NestedPositionHint) => void
+  addAfter: (afterKey: ListEditorKey, item?: TItem, childrenAllowed?: boolean) => void
+  addChild: (parentKey: ListEditorKey, item?: TItem, childrenAllowed?: boolean) => void
+  updateItem: (key: ListEditorKey, data: TItem, markDirty?: boolean) => void
+  deleteItem: (key: ListEditorKey, opts?: { trackDeleted?: boolean }) => void
+  restoreDeleted: (key: ListEditorKey) => void
+  moveUp: (key: ListEditorKey) => boolean
+  moveDown: (key: ListEditorKey) => boolean
+  moveTop: (key: ListEditorKey) => boolean
+  moveBottom: (key: ListEditorKey) => boolean
+  indent: (key: ListEditorKey) => boolean
+  outdent: (key: ListEditorKey) => boolean
+  moveTo: (
+    key: ListEditorKey,
+    targetParentKey: ListEditorKey | null,
+    targetIndex: number,
+  ) => boolean
+  recalculatePositions: () => void
+
+  /** Escape hatch: a row form (e.g. vuelidate) reports its own validity instead of `validate`. */
+  registerValidity: (key: ListEditorKey, isValid: () => boolean) => () => void
+
+  // Internal handles the editor needs to drive the tree directly (find a node,
+  // subtree depth for drag, the underlying `editor.moveTo` returning the tree).
+  findNode: (key: ListEditorKey) => {
+    node: NestedTreeNode<TItem> | null
+    parent: NestedTreeNode<TItem> | null
+  }
+  calculateSubtreeDepth: (node: NestedTreeNode<TItem>) => number
+}
+
+/**
+ * Consumer-facing shape of a nested-list-editor handle read through a template/function ref — Vue's
+ * `expose` proxy unwraps the exposed refs, so read `handle.hasUnsaved` (a boolean), not
+ * `handle.hasUnsaved.value`. See {@link ExposedListEditorHandle}.
+ *
+ * The `ANestedSortableListEditor` component also exposes `hasUnsavedChanges` (a legacy alias of
+ * `hasUnsaved`, likewise a ComputedRef → unwrapped to a boolean here) — included so it can't be
+ * `.value`-read by accident. Its imperative-only extras (addAfterId / resetDirtyBaseline / expand /
+ * reorder / …) are not refs and carry no unwrap hazard; intersect them in the consumer if you call them.
+ */
+export type ExposedNestedListEditorHandle<TItem extends Record<string, any>> = ShallowUnwrapRef<
+  NestedListEditorHandle<TItem>
+> & {
+  hasUnsavedChanges: boolean
+}
+
+const flatten = <TItem extends Record<string, any>>(tree: NestedTree<TItem>): TItem[] => {
+  const out: TItem[] = []
+  const walk = (nodes: NestedTreeNode<TItem>[]) => {
+    for (const n of nodes) {
+      out.push(n.data)
+      if (n.children && n.children.length) walk(n.children)
+    }
+  }
+  walk(tree.children)
+  return out
+}
+
+const walkNodes = <TItem extends Record<string, any>>(
+  tree: NestedTree<TItem>,
+  visit: (node: NestedTreeNode<TItem>) => void,
+): void => {
+  const walk = (nodes: NestedTreeNode<TItem>[]) => {
+    for (const n of nodes) {
+      visit(n)
+      if (n.children && n.children.length) walk(n.children)
+    }
+  }
+  walk(tree.children)
+}
+
+export function useNestedListEditorController<TItem extends Record<string, any>>(
+  options: UseNestedListEditorControllerOptions<TItem>,
+): NestedListEditorHandle<TItem> {
+  const keyField = (typeof options.getKey === 'function' ? null : (options.getKey ?? 'id')) as
+    | keyof TItem
+    | null
+  const keyOf = (item: TItem): ListEditorKey =>
+    typeof options.getKey === 'function'
+      ? options.getKey(item)
+      : (item[keyField as keyof TItem] as ListEditorKey)
+  const keyFieldName = (keyField ?? 'id') as string
+
+  const positionOpt = options.position ?? 'position'
+  const managedPosition = positionOpt !== false
+  const positionField = (
+    typeof positionOpt === 'object'
+      ? positionOpt.field
+      : positionOpt === false
+        ? 'position'
+        : positionOpt
+  ) as string
+  const positionMultiplier =
+    typeof positionOpt === 'object' && positionOpt.multiplier ? positionOpt.multiplier : 1
+  const parentField = options.parentField ?? 'parent'
+
+  // Two-way bridge to the consumer's tree: the composable's per-op
+  // `model.value = cloned` writes back via `set`, the getter re-reads live edits.
+  const model = computed<NestedTree<TItem>>({
+    get: () => options.get(),
+    set: (v) => options.set(v),
+  }) as unknown as Ref<NestedTree<TItem>>
+
+  const tree = useNestedListEditor<TItem>(model, {
+    keyField: keyFieldName,
+    // Pass the controller's keyOf so tree ops resolve keys identically to
+    // invalidKeys/dirty tracking — supports a function get-key, not just a field.
+    getKey: keyOf,
+    positionField,
+    parentField,
+    positionMultiplier,
+    maxDepth: options.maxDepth,
+  })
+
+  const items = computed<TItem[]>(() => flatten(options.get()))
+  const viewItems = tree.viewItems
+
+  // Baseline = last committed snapshot. `hashes` powers content-diff dirty
+  // (position + parent excluded so a reorder/reparent never lights up via the
+  // content hash — meta.dirty / the reparented set carries those instead).
+  const dirtyExclude = computed<string[]>(() => toValue(options.dirtyExclude) ?? [])
+  const normalize = (item: TItem): string => {
+    const copy = { ...item } as Record<string, unknown>
+    if (managedPosition) delete copy[positionField]
+    delete copy[parentField]
+    for (const f of dirtyExclude.value) delete copy[f]
+    return JSON.stringify(copy)
+  }
+  const baselineHashes = ref(new Map<ListEditorKey, string>()) as Ref<Map<ListEditorKey, string>>
+  // Parent-key per row at baseline — drives reparented detection (BUG-13).
+  const baselineParents = ref(new Map<ListEditorKey, ListEditorKey | null>()) as Ref<
+    Map<ListEditorKey, ListEditorKey | null>
+  >
+  const baselineTree = ref<NestedTree<TItem> | null>(null) as Ref<NestedTree<TItem> | null>
+
+  const cloneTree = (t: NestedTree<TItem>): NestedTree<TItem> => cloneDeep(t)
+
+  const captureBaseline = (t: NestedTree<TItem>) => {
+    const hashes = new Map<ListEditorKey, string>()
+    const parents = new Map<ListEditorKey, ListEditorKey | null>()
+    const walk = (nodes: NestedTreeNode<TItem>[], parentKey: ListEditorKey | null) => {
+      for (const n of nodes) {
+        const key = keyOf(n.data)
+        hashes.set(key, normalize(n.data))
+        parents.set(key, parentKey)
+        if (n.children && n.children.length) walk(n.children, key)
+      }
+    }
+    walk(t.children, null)
+    baselineHashes.value = hashes
+    baselineParents.value = parents
+    baselineTree.value = cloneTree(t)
+  }
+  captureBaseline(options.get())
+  // Re-hash when the excluded-field set changes; `sync` so baseline + live
+  // normalize() never disagree mid-flush. (Mirrors the flat controller.)
+  watch(
+    dirtyExclude,
+    () => {
+      if (!baselineTree.value) return
+      const hashes = new Map<ListEditorKey, string>()
+      walkNodes(baselineTree.value, (n) => hashes.set(keyOf(n.data), normalize(n.data)))
+      baselineHashes.value = hashes
+    },
+    { flush: 'sync' },
+  )
+
+  const submitted = ref(false)
+  // Reactive so a row form (re)registering its validity re-runs invalidKeys/rowState.
+  const registeredValidity = reactive(new Map<ListEditorKey, () => boolean>())
+
+  // Amber = added OR content-edited OR reparented (vs baseline). Position is
+  // excluded, so a displaced sibling's pure renumber is NOT amber (matches the flat
+  // editor + the "only the actively-moved subtree lights up" UX); BUG-13 adds the
+  // parent-changed signal so a reparent registers even at an unchanged position
+  // number. `getChanges().moved` reads meta.dirty, so displaced siblings' new
+  // positions are still persisted; `hasPendingMove` (below) feeds the leave guard.
+  const isItemDirty = (
+    node: NestedTreeNode<TItem>,
+    key: ListEditorKey,
+    parentKey: ListEditorKey | null,
+  ): boolean => {
+    if (options.isDirty) {
+      const saved = baselineTreeRow(key)
+      return options.isDirty(node.data, saved)
+    }
+    const baseHash = baselineHashes.value.get(key)
+    if (baseHash === undefined) return true // added
+    if (baseHash !== normalize(node.data)) return true // content-edited (pos/parent excluded)
+    // Reparented vs baseline (BUG-13).
+    if (baselineParents.value.has(key)) {
+      const baseParent = baselineParents.value.get(key) ?? null
+      if ((baseParent ?? null) !== (parentKey ?? null)) return true
+    }
+    return false
+  }
+
+  // `addedBaseline` = first-seen content hash of each ADDED node; `editedKeys` = STICKY set of
+  // nodes whose content has since diverged. Gates the validation rail on "has this row been edited"
+  // rather than just "is it unsaved" (sticky like vuelidate `$dirty`) — mirrors the flat controller.
+  const addedBaseline = ref(new Map<ListEditorKey, string>()) as Ref<Map<ListEditorKey, string>>
+  const editedKeys = ref(new Set<ListEditorKey>()) as Ref<Set<ListEditorKey>>
+  // Deferred-deletion tombstones (baseline keys removed but not yet saved). Immediate deletes skip
+  // this so they don't read as unsaved. Drives hasUnsaved / unsavedCount / getChanges().deleted.
+  const deletedKeys = ref(new Set<ListEditorKey>()) as Ref<Set<ListEditorKey>>
+  watch(
+    () => options.get(),
+    (tree) => {
+      const live = new Set<ListEditorKey>()
+      walkNodes(tree, (n) => {
+        const key = keyOf(n.data)
+        live.add(key)
+        if (!baselineHashes.value.has(key) && !addedBaseline.value.has(key)) {
+          addedBaseline.value.set(key, normalize(n.data))
+        }
+        if (!editedKeys.value.has(key)) {
+          const base = baselineHashes.value.get(key) ?? addedBaseline.value.get(key)
+          if (base !== undefined && base !== normalize(n.data)) editedKeys.value.add(key)
+        }
+      })
+      const stale: ListEditorKey[] = []
+      for (const key of addedBaseline.value.keys()) if (!live.has(key)) stale.push(key)
+      for (const key of stale) addedBaseline.value.delete(key)
+      // A tombstoned key that becomes live again (re-add before save) drops its tombstone.
+      const revived: ListEditorKey[] = []
+      for (const key of deletedKeys.value) if (live.has(key)) revived.push(key)
+      for (const key of revived) deletedKeys.value.delete(key)
+    },
+    { immediate: true, deep: true },
+  )
+
+  const isRowEdited = (key: ListEditorKey): boolean => editedKeys.value.has(key)
+
+  const baselineTreeRow = (key: ListEditorKey): TItem | undefined => {
+    if (!baselineTree.value) return undefined
+    let hit: TItem | undefined
+    walkNodes(baselineTree.value, (n) => {
+      if (hit === undefined && keyOf(n.data) === key) hit = n.data
+    })
+    return hit
+  }
+
+  const treeHasKey = (key: ListEditorKey): boolean => {
+    let found = false
+    walkNodes(options.get(), (n) => {
+      if (!found && keyOf(n.data) === key) found = true
+    })
+    return found
+  }
+
+  const unsavedKeys = computed<Set<ListEditorKey>>(() => {
+    const out = new Set<ListEditorKey>()
+    const walk = (nodes: NestedTreeNode<TItem>[], parentKey: ListEditorKey | null) => {
+      for (const n of nodes) {
+        const key = keyOf(n.data)
+        if (isItemDirty(n, key, parentKey)) out.add(key)
+        if (n.children && n.children.length) walk(n.children, key)
+      }
+    }
+    walk(options.get().children, null)
+    return out
+  })
+
+  const isUnsaved = (key: ListEditorKey): boolean => unsavedKeys.value.has(key)
+  // A pure position reorder sets meta.dirty (recalculateSiblings) but is deliberately
+  // kept OUT of per-row amber (only the actively-moved subtree lights up). It IS a
+  // pending change though, so it must arm the leave guard — surface it as an aggregate
+  // signal (M2b) that survives Apply and clears on commit (which resets meta.dirty).
+  const hasPendingMove = computed<boolean>(() => {
+    let found = false
+    walkNodes(options.get(), (n) => {
+      if (n.meta.dirty) found = true
+    })
+    return found
+  })
+  const hasUnsaved = computed<boolean>(
+    () => unsavedKeys.value.size > 0 || deletedKeys.value.size > 0 || hasPendingMove.value,
+  )
+  // Distinct unconfirmed changes = union of live dirty keys (added/edited/moved/reparented) and
+  // deferred-deletion tombstones. Drives the "N unconfirmed changes" indicator.
+  const unsavedCount = computed<number>(() => {
+    const keys = new Set<ListEditorKey>(unsavedKeys.value)
+    for (const key of deletedKeys.value) keys.add(key)
+    return keys.size
+  })
+
+  const resolveValidity = (
+    item: TItem,
+    key: ListEditorKey,
+  ): { invalid: boolean; warning: boolean } => {
+    const registered = registeredValidity.get(key)
+    if (registered) return { invalid: !registered(), warning: false }
+    if (!options.validate) return { invalid: false, warning: false }
+    const r = options.validate(item)
+    if (typeof r === 'boolean') return { invalid: !r, warning: false }
+    return { invalid: !r.valid, warning: r.valid && r.state === 'warning' }
+  }
+
+  const invalidKeys = computed<Set<ListEditorKey>>(() => {
+    const out = new Set<ListEditorKey>()
+    walkNodes(options.get(), (n) => {
+      const key = keyOf(n.data)
+      if (resolveValidity(n.data, key).invalid) out.add(key)
+    })
+    return out
+  })
+  const hasErrors = computed<boolean>(() => invalidKeys.value.size > 0)
+
+  // Red rail for an invalid row that has been edited, is unsaved (added), or after a save attempt —
+  // mirrors the flat controller. The editor suppresses the red while the row is the one being edited,
+  // so a still-being-filled row reads amber and only goes red once collapsed. (QA 85050 batch 7)
+  const rowState = (
+    item: TItem,
+    key: ListEditorKey,
+    editing = false,
+  ): ListEditorValidationState => {
+    const { invalid, warning } = resolveValidity(item, key)
+    // See flat controller: red when edited/unsaved/submitted, amber while being filled, red once
+    // collapsed; a save attempt (`submitted`) reds it even while open. (QA 85050 batch 7)
+    if (invalid) {
+      if (submitted.value) return 'invalid'
+      if (editing) return null
+      return isRowEdited(key) || isUnsaved(key) ? 'invalid' : null
+    }
+    if (warning) return 'warning'
+    return null
+  }
+
+  const validateAll = (): boolean => {
+    submitted.value = true
+    return invalidKeys.value.size === 0
+  }
+
+  // Flattened ordered payload; parent key is resolved from tree structure (so a
+  // reparent is reflected even if the node's own parent field lagged).
+  const buildPayload = (): TItem[] => {
+    const out: TItem[] = []
+    const walk = (nodes: NestedTreeNode<TItem>[], parentKey: ListEditorKey | null) => {
+      for (const n of nodes) {
+        const row = { ...n.data } as TItem
+        ;(row as Record<string, unknown>)[parentField] = parentKey
+        out.push(row)
+        if (n.children && n.children.length) walk(n.children, keyOf(n.data))
+      }
+    }
+    walk(options.get().children, null)
+    return out
+  }
+
+  const getPayload = (): TItem[] =>
+    options.payload ? options.payload(buildPayload()) : buildPayload()
+
+  const getChanges = (): NestedListEditorChanges<TItem> => {
+    const added: TItem[] = []
+    const updated: TItem[] = []
+    const moved: TItem[] = []
+    const reparented: TItem[] = []
+    const payload = buildPayload()
+    const byKey = new Map<ListEditorKey, TItem>()
+    for (const row of payload) byKey.set(keyOf(row), row)
+
+    walkNodes(options.get(), (n) => {
+      const key = keyOf(n.data)
+      const row = byKey.get(key) ?? n.data
+      const baseHash = baselineHashes.value.get(key)
+      if (baseHash === undefined) {
+        added.push(row)
+      } else if (baseHash !== normalize(n.data)) {
+        updated.push(row)
+      }
+      // meta.dirty without a content change => a move/reparent (position/parent
+      // changed). recalculateSiblings + BUG-13 set meta.dirty on those.
+      if (baseHash !== undefined && n.meta.dirty && baseHash === normalize(n.data)) {
+        moved.push(row)
+      }
+      // Reparented = parent key differs from baseline (subset of moved, but
+      // surfaced separately for partial-multi saves that re-link parents).
+      if (baselineParents.value.has(key)) {
+        const baseParent = baselineParents.value.get(key) ?? null
+        const nowParent = (row as Record<string, unknown>)[parentField] as ListEditorKey | null
+        if ((baseParent ?? null) !== (nowParent ?? null)) reparented.push(row)
+      }
+    })
+
+    // Deferred deletions come from the tombstone set, so an IMMEDIATE delete (already persisted on the
+    // backend, no tombstone) does not re-appear here as a local deleted change.
+    const deleted: TItem[] = []
+    for (const key of deletedKeys.value) {
+      const row = baselineTreeRow(key)
+      if (row !== undefined) deleted.push(row)
+    }
+    return { added, updated, moved, deleted, reparented }
+  }
+
+  const commit = (saved?: NestedTree<TItem>): void => {
+    const source = saved ?? options.get()
+    const normalized = options.normalizeSaved ? options.normalizeSaved(source) : source
+    // Backfill missing keys + clear meta.dirty on the committed tree.
+    const next = cloneTree(normalized)
+    walkNodes(next, (n) => {
+      const previous = baselineTreeRow(keyOf(n.data))
+      const resolvedKey = options.commitKey ? options.commitKey(n.data, previous) : keyOf(n.data)
+      if (resolvedKey === undefined || resolvedKey === null) {
+        if (keyField) (n.data as Record<string, unknown>)[keyFieldName] = nextListEditorTempId()
+      }
+      n.meta.dirty = false
+    })
+    options.set(next)
+    captureBaseline(next)
+    addedBaseline.value = new Map()
+    editedKeys.value = new Set()
+    deletedKeys.value = new Set()
+    submitted.value = false
+  }
+
+  const reset = (t?: NestedTree<TItem>): void => {
+    const restore = t ?? (baselineTree.value ? cloneTree(baselineTree.value) : options.get())
+    options.set(restore)
+    addedBaseline.value = new Map()
+    editedKeys.value = new Set()
+    deletedKeys.value = new Set()
+    submitted.value = false
+  }
+
+  // --- Tree mutations (delegate to useNestedListEditor) -----------------------
+
+  const addItem = (item?: TItem, hint?: NestedPositionHint): void => {
+    const data = item ?? options.factory?.()
+    if (data === undefined) return // no item + no factory (read-only) → no-op
+    tree.addItem(data, hint)
+  }
+  const addAfter = (afterKey: ListEditorKey, item?: TItem, childrenAllowed = true): void => {
+    const data = item ?? options.factory?.()
+    if (data === undefined) return
+    tree.addItem(data, { afterId: afterKey, childrenAllowed })
+  }
+  const addChild = (parentKey: ListEditorKey, item?: TItem, childrenAllowed = true): void => {
+    const data = item ?? options.factory?.()
+    if (data === undefined) return
+    tree.addItem(data, { parentId: parentKey, childrenAllowed })
+  }
+  const updateItem = (key: ListEditorKey, data: TItem, markDirty = true): void => {
+    tree.updateItem(key, data, markDirty)
+  }
+  const deleteItem = (key: ListEditorKey, opts?: { trackDeleted?: boolean }): void => {
+    // A previously-saved row removed in deferred mode is tombstoned (counts as unsaved + reported in
+    // getChanges().deleted). `trackDeleted: false` (immediate — already deleted on the backend) skips it.
+    // `treeHasKey` guards against a phantom tombstone: an immediate delete removes the row in the
+    // component's own handler (trackDeleted:false), then the consumer's removeById re-calls deleteItem
+    // for the now-gone key — without the guard that second call would tombstone a baseline row that is
+    // already deleted, surfacing a bogus unconfirmed change.
+    if (baselineHashes.value.has(key) && opts?.trackDeleted !== false && treeHasKey(key)) {
+      deletedKeys.value.add(key)
+    }
+    tree.deleteItem(key)
+  }
+
+  const restoreDeleted = (key: ListEditorKey): void => {
+    deletedKeys.value.delete(key)
+  }
+  const moveUp = (key: ListEditorKey): boolean => tree.moveUp(key) !== null
+  const moveDown = (key: ListEditorKey): boolean => tree.moveDown(key) !== null
+  const moveTop = (key: ListEditorKey): boolean => tree.moveTop(key) !== null
+  const moveBottom = (key: ListEditorKey): boolean => tree.moveBottom(key) !== null
+  const indent = (key: ListEditorKey): boolean => tree.indent(key) !== null
+  const outdent = (key: ListEditorKey): boolean => tree.outdent(key) !== null
+  const moveTo = (
+    key: ListEditorKey,
+    targetParentKey: ListEditorKey | null,
+    targetIndex: number,
+  ): boolean => tree.moveTo(key, targetParentKey, targetIndex) !== null
+  const recalculatePositions = (): void => {
+    options.set(tree.recalculatePositions(options.get()))
+  }
+
+  const registerValidity = (key: ListEditorKey, isValid: () => boolean): (() => void) => {
+    registeredValidity.set(key, isValid)
+    return () => registeredValidity.delete(key)
+  }
+
+  return {
+    items,
+    viewItems,
+    hasUnsaved,
+    unsavedCount,
+    hasErrors,
+    invalidKeys,
+    isUnsaved,
+    rowState,
+    validateAll,
+    getPayload,
+    getChanges,
+    commit,
+    reset,
+    addItem,
+    addAfter,
+    addChild,
+    updateItem,
+    deleteItem,
+    restoreDeleted,
+    moveUp,
+    moveDown,
+    moveTop,
+    moveBottom,
+    indent,
+    outdent,
+    moveTo,
+    recalculatePositions,
+    registerValidity,
+    findNode: tree.findNode,
+    calculateSubtreeDepth: tree.calculateSubtreeDepth,
+  }
+}
diff --git a/src/labs/listEditor/composables/useNestedUnsavedKeys.ts b/src/labs/listEditor/composables/useNestedUnsavedKeys.ts
index 7c7899f3..200c9d97 100644
--- a/src/labs/listEditor/composables/useNestedUnsavedKeys.ts
+++ b/src/labs/listEditor/composables/useNestedUnsavedKeys.ts
@@ -34,21 +34,21 @@ export interface UseNestedUnsavedKeysApi {
  *     @update:unsaved-keys="(s) => childSets.setForParent(parent.id, s)"
  *   />
  *   // emit `childSets.merged.value` upward
+ *
+ * IMPORTANT: when the parent editor uses `manage-delete`, clear the removed
+ * parent's entry on its `@deleted` — `setForParent(deletedKey, new Set())` —
+ * otherwise the deleted row's stale child-unsaved keys keep `merged` non-empty
+ * and the unsaved-changes guard lingers after an add-then-delete.
  */
 export function useNestedUnsavedKeys(): UseNestedUnsavedKeysApi {
-  const byParent: Ref<Map<ListEditorKey, Set<ListEditorKey>>> = ref(
-    new Map(),
-  )
+  const byParent: Ref<Map<ListEditorKey, Set<ListEditorKey>>> = ref(new Map())
 
   const empty = new Set<ListEditorKey>()
 
   const getForParent = (parentKey: ListEditorKey): Set<ListEditorKey> =>
     byParent.value.get(parentKey) ?? empty
 
-  const setForParent = (
-    parentKey: ListEditorKey,
-    set: Set<ListEditorKey>,
-  ) => {
+  const setForParent = (parentKey: ListEditorKey, set: Set<ListEditorKey>) => {
     if (set.size === 0) {
       byParent.value.delete(parentKey)
     } else {
diff --git a/src/labs/listEditor/composables/useReorderMode.ts b/src/labs/listEditor/composables/useReorderMode.ts
index d99e64f4..d76713f2 100644
--- a/src/labs/listEditor/composables/useReorderMode.ts
+++ b/src/labs/listEditor/composables/useReorderMode.ts
@@ -1,11 +1,4 @@
-import {
-  computed,
-  ref,
-  watch,
-  type ComputedRef,
-  type InjectionKey,
-  type Ref,
-} from 'vue'
+import { computed, ref, watch, type ComputedRef, type InjectionKey, type Ref } from 'vue'
 import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
 
 // Registry that lets embedded inner editors push their reorder pending-count
@@ -18,6 +11,7 @@ export interface SharedReorderRegistry {
     id: symbol,
     movedCount: ComputedRef<number>,
     hasPendingChanges: ComputedRef<boolean>,
+    validateAll: () => boolean,
   ) => void
   unregister: (id: symbol) => void
 }
@@ -91,6 +85,15 @@ export interface UseReorderModeOptions<T> {
    * expanded; nested clears editing only (children-expanded stays).
    */
   onExternalEnter?: () => void
+  /**
+   * Called from the mode watcher when an EMBEDDED editor flips externally from
+   * `reorder` back to `view` (its parent's Cancel or Apply). Embedded editors
+   * have no own snapshot/apply/cancel, so this is their only exit hook — the
+   * flat variant uses it to reconcile immediate (backend) deletes made during
+   * the session: on a parent Cancel the parent's snapshot restore resurrects
+   * the deleted row, which must be re-removed; on Apply it stayed gone (no-op).
+   */
+  onEmbeddedExit?: () => void
   /**
    * Async persist callback wired from the parent — identical semantics to
    * the old `props.onReorderApply`. Receives the cloned payload (array for
@@ -137,9 +140,7 @@ export interface UseReorderModeApi {
  * per-row decorator + dirty-baseline read them directly; the composable
  * takes them as refs so it can still drive the state machine.
  */
-export function useReorderMode<T>(
-  options: UseReorderModeOptions<T>,
-): UseReorderModeApi {
+export function useReorderMode<T>(options: UseReorderModeOptions<T>): UseReorderModeApi {
   const applying = ref(false)
   const applyError = ref<string | null>(null)
 
@@ -241,6 +242,10 @@ export function useReorderMode<T>(
         options.movedKeys.value = new Set()
         applyError.value = null
         applying.value = false
+        // Reconcile session immediate (backend) deletes: the parent has already flushed both props, so
+        // the model reflects a Cancel's snapshot-restore (deleted row resurrected → re-remove) or an
+        // Apply (row stayed gone → the re-remove is a no-op). Deferred deletes need nothing here.
+        options.onEmbeddedExit?.()
       }
     }
   })
diff --git a/src/labs/listEditor/composables/useUnsavedKeysSync.ts b/src/labs/listEditor/composables/useUnsavedKeysSync.ts
deleted file mode 100644
index e6494c89..00000000
--- a/src/labs/listEditor/composables/useUnsavedKeysSync.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { computed, watch, type ComputedRef, type Ref } from 'vue'
-import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
-
-const setsEqual = (
-  a: Set<ListEditorKey>,
-  b: Set<ListEditorKey>,
-): boolean => a.size === b.size && [...a].every((k) => b.has(k))
-
-export interface UseUnsavedKeysSyncOptions {
-  /** v-model-bound external Set (consumer's `defineModel<Set<ListEditorKey>>('unsavedKeys', …)`). */
-  unsavedKeysModel: Ref<Set<ListEditorKey>>
-  /** Internal source of truth — typically a computed deriving `dirty || moved` per row. */
-  internalUnsavedKeys: ComputedRef<Set<ListEditorKey>>
-  /**
-   * Called when the consumer clears every unsaved key externally
-   * (`unsavedKeys.value = new Set()` after a successful parent-form save).
-   * Editor variants typically re-capture the dirty baseline here.
-   */
-  onClearAll: () => void
-  /**
-   * Called per-key when the consumer rebases just one row (e.g. dropped a
-   * specific key from the unsaved set). Editor variants typically
-   * re-baseline that key only.
-   */
-  onClearKey: (key: ListEditorKey) => void
-}
-
-export interface UseUnsavedKeysSyncApi {
-  hasUnsavedChanges: ComputedRef<boolean>
-  unsavedCount: ComputedRef<number>
-  /**
-   * Imperative API exposed via `defineExpose` — callers pass a key to clear
-   * just that row, omit it to clear everything (mirrors the model-driven
-   * paths).
-   */
-  clearUnsavedState: (key?: ListEditorKey) => void
-}
-
-/**
- * Two-way sync between an editor's own per-row dirty/moved state and the
- * external `v-model:unsaved-keys` Set the consumer passes in.
- *
- * Internal → external: when `internalUnsavedKeys` changes, write a fresh
- * Set into the model (skipping no-op writes).
- *
- * External → internal: when the consumer overwrites the model (typically
- * to clear it after a successful save), call `onClearAll` (full clear) or
- * `onClearKey` (per-key) so the editor's dirty baseline catches up.
- *
- * The `suppressNext` flag keeps the watcher pair from ping-ponging when
- * the internal change is what triggered the model write.
- *
- * Used by `AListEditor`, `ASortableListEditor`, `ANestedSortableListEditor`.
- */
-export function useUnsavedKeysSync(
-  options: UseUnsavedKeysSyncOptions,
-): UseUnsavedKeysSyncApi {
-  let suppressNextModelWatch = false
-
-  watch(
-    options.internalUnsavedKeys,
-    (now) => {
-      if (setsEqual(options.unsavedKeysModel.value, now)) return
-      suppressNextModelWatch = true
-      options.unsavedKeysModel.value = new Set(now)
-    },
-    { immediate: true },
-  )
-
-  watch(options.unsavedKeysModel, (now) => {
-    if (suppressNextModelWatch) {
-      suppressNextModelWatch = false
-      return
-    }
-    if (now.size === 0 && options.internalUnsavedKeys.value.size > 0) {
-      options.onClearAll()
-    } else {
-      // Selective per-key clear: rebaseline keys present in internal but
-      // absent in model.
-      for (const key of options.internalUnsavedKeys.value) {
-        if (!now.has(key)) options.onClearKey(key)
-      }
-    }
-  })
-
-  const hasUnsavedChanges = computed<boolean>(
-    () => options.internalUnsavedKeys.value.size > 0,
-  )
-  const unsavedCount = computed<number>(
-    () => options.internalUnsavedKeys.value.size,
-  )
-
-  const clearUnsavedState = (key?: ListEditorKey) => {
-    if (key === undefined) {
-      options.onClearAll()
-    } else {
-      options.onClearKey(key)
-    }
-  }
-
-  return { hasUnsavedChanges, unsavedCount, clearUnsavedState }
-}
diff --git a/src/labs/listEditor/composables/useValidationRegistry.ts b/src/labs/listEditor/composables/useValidationRegistry.ts
deleted file mode 100644
index 312dea84..00000000
--- a/src/labs/listEditor/composables/useValidationRegistry.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { provide, reactive, type ComputedRef, type Ref } from 'vue'
-import {
-  ListEditorValidationKey,
-  type ListEditorValidationRegistry,
-} from '@/labs/listEditor/composables/useListEditorItemValidation'
-import type {
-  ListEditorKey,
-  ListEditorValidationState,
-} from '@/labs/listEditor/types/listEditorTypes'
-
-const isValidState = (
-  v: unknown,
-): v is Exclude<ListEditorValidationState, null> =>
-  v === 'valid' || v === 'invalid' || v === 'warning'
-
-export interface UseValidationRegistryOptions<TItem extends Record<string, any>> {
-  /**
-   * Caller-provided fallback callback. Tried only when no descendant has
-   * registered a state for the row via `useListEditorItemValidation`.
-   */
-  getValidationState?: (
-    item: TItem,
-    key: ListEditorKey,
-    index: number,
-  ) => ListEditorValidationState
-}
-
-export interface UseValidationRegistryApi<TItem extends Record<string, any>> {
-  /**
-   * Resolves a row's validation state by checking, in order:
-   * 1. The provide/inject registry (descendants registered via `useListEditorItemValidation`)
-   * 2. The `getValidationState` prop fallback
-   * 3. The item's own `validationState` field
-   *
-   * Returns null when none of the above flagged a state.
-   */
-  resolveValidation: (
-    raw: TItem,
-    key?: ListEditorKey,
-    index?: number,
-  ) => ListEditorValidationState
-}
-
-/**
- * Sets up the per-item validation provide/inject registry shared by all 3
- * editor variants. Descendant rows can register their `'invalid'`/`'valid'`/
- * `'warning'` state via `useListEditorItemValidation`; the editor's row-render
- * priority order is registry → prop callback → item field.
- *
- * Used by `AListEditor`, `ASortableListEditor`, `ANestedSortableListEditor`.
- */
-export function useValidationRegistry<TItem extends Record<string, any>>(
-  options: UseValidationRegistryOptions<TItem>,
-): UseValidationRegistryApi<TItem> {
-  const itemValidationStates = reactive(
-    new Map<
-      ListEditorKey,
-      Ref<ListEditorValidationState> | ComputedRef<ListEditorValidationState>
-    >(),
-  )
-
-  provide<ListEditorValidationRegistry>(ListEditorValidationKey, {
-    register(key, state) {
-      itemValidationStates.set(key, state)
-    },
-    unregister(key) {
-      itemValidationStates.delete(key)
-    },
-  })
-
-  const resolveValidation = (
-    raw: TItem,
-    key?: ListEditorKey,
-    index?: number,
-  ): ListEditorValidationState => {
-    if (key !== undefined) {
-      const fromRegistry = itemValidationStates.get(key)?.value
-      if (isValidState(fromRegistry)) return fromRegistry
-    }
-    if (options.getValidationState && key !== undefined && index !== undefined) {
-      const fromProp = options.getValidationState(raw, key, index)
-      if (isValidState(fromProp)) return fromProp
-    }
-    const v = raw.validationState
-    if (isValidState(v)) return v
-    return null
-  }
-
-  return { resolveValidation }
-}
diff --git a/src/labs/listEditor/internal/LeChangeParentDialog.vue b/src/labs/listEditor/internal/LeChangeParentDialog.vue
index c24a8bfe..67c02873 100644
--- a/src/labs/listEditor/internal/LeChangeParentDialog.vue
+++ b/src/labs/listEditor/internal/LeChangeParentDialog.vue
@@ -108,9 +108,7 @@ const currentParentKey = computed<ListEditorKey | null | undefined>(() => {
 
 const candidates = computed<Candidate[]>(() => {
   const out: Candidate[] = []
-  const subtreeDepth = sourceNode.value
-    ? props.calculateSubtreeDepth(sourceNode.value)
-    : 1
+  const subtreeDepth = sourceNode.value ? props.calculateSubtreeDepth(sourceNode.value) : 1
 
   out.push({
     key: null,
@@ -159,7 +157,7 @@ const validCandidates = computed(() => candidates.value.filter((c) => !c.disallo
 const selectedCandidate = computed<Candidate | null>(() =>
   selectedKey.value === undefined
     ? null
-    : candidates.value.find((c) => c.key === selectedKey.value) ?? null,
+    : (candidates.value.find((c) => c.key === selectedKey.value) ?? null),
 )
 
 const showPlacementPicker = computed<boolean>(
diff --git a/src/labs/listEditor/internal/LeEmptyState.vue b/src/labs/listEditor/internal/LeEmptyState.vue
index c8cbcdc2..3daec6ee 100644
--- a/src/labs/listEditor/internal/LeEmptyState.vue
+++ b/src/labs/listEditor/internal/LeEmptyState.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-// Shared empty-state block used by all three list-editor variants. Since the
-// refactor to a flat `.a-le-*` namespace, the block class no longer depends
-// on the parent variant — the same three classes render inside any editor.
-
 export interface Props {
   title: string
-  text: string
   addLabel?: string | null
   canAdd?: boolean
 }
@@ -29,9 +24,6 @@ const { t } = useI18n()
     <h3 class="a-le-empty-title">
       {{ title }}
     </h3>
-    <p class="a-le-empty-text">
-      {{ text }}
-    </p>
     <VBtn
       v-if="addLabel && canAdd"
       color="primary"
@@ -39,7 +31,7 @@ const { t } = useI18n()
       prepend-icon="mdi-plus"
       @click="$emit('add')"
     >
-      {{ t('common.sortable.addFirst') }}
+      {{ addLabel || t('common.sortable.addFirst') }}
     </VBtn>
   </div>
 </template>
diff --git a/src/labs/listEditor/internal/LeMoveToPositionDialog.vue b/src/labs/listEditor/internal/LeMoveToPositionDialog.vue
index deab60f8..a863b147 100644
--- a/src/labs/listEditor/internal/LeMoveToPositionDialog.vue
+++ b/src/labs/listEditor/internal/LeMoveToPositionDialog.vue
@@ -32,7 +32,10 @@ watch(open, (now) => {
 
 const totalLabel = computed(() => Math.max(props.total, 1))
 const isInvalid = computed<boolean>(
-  () => !Number.isFinite(targetPosition.value) || targetPosition.value < 1 || targetPosition.value > totalLabel.value,
+  () =>
+    !Number.isFinite(targetPosition.value) ||
+    targetPosition.value < 1 ||
+    targetPosition.value > totalLabel.value,
 )
 
 const onConfirm = () => {
@@ -71,7 +74,12 @@ const onCancel = () => {
           :min="1"
           :max="totalLabel"
           :label="t('common.sortable.moveToPosition.positionLabel', { max: totalLabel })"
-          :hint="t('common.sortable.moveToPosition.positionHint', { current: currentIndex + 1, max: totalLabel })"
+          :hint="
+            t('common.sortable.moveToPosition.positionHint', {
+              current: currentIndex + 1,
+              max: totalLabel,
+            })
+          "
           :error="isInvalid"
           autofocus
           density="comfortable"
diff --git a/src/labs/listEditor/internal/LeNestedRow.vue b/src/labs/listEditor/internal/LeNestedRow.vue
index fe7bf669..3514dce8 100644
--- a/src/labs/listEditor/internal/LeNestedRow.vue
+++ b/src/labs/listEditor/internal/LeNestedRow.vue
@@ -8,13 +8,7 @@ import type {
   ListEditorValidationState,
 } from '@/labs/listEditor/types/listEditorTypes'
 
-// Recursive nested row. Renders a single row plus — when expanded — a group of
-// child rows through self-reference, so trees of arbitrary depth share a single
-// template. All presentation flags + event callbacks are passed down as the
-// `context` and `callbacks` prop bundles (avoids 20+ individual prop-drills).
-//
-// Types intentionally use `any` on the interior: the strong typing lives on the
-// public `ANestedSortableListEditor` wrapper, where generics actually matter.
+// Self-recursive row. Interior uses `any` — strong typing lives on the public ANestedSortableListEditor wrapper.
 
 export type Props = {
   vi: any
@@ -25,10 +19,7 @@ export type Props = {
 }
 const props = defineProps<Props>()
 
-// Self-reference cast to any breaks the TypeScript circular type inference that
-// Vue's template compiler triggers when a `<script setup generic>` component
-// imports itself for recursion. The runtime behaviour is unaffected.
-
+// `as any` breaks Vue's circular type inference on self-import.
 const LeNestedRow = LeNestedRowSelf as any
 
 const { t } = useI18n()
@@ -36,8 +27,7 @@ const { t } = useI18n()
 const GROUP_CLASS = 'a-nested-list-editor__group'
 const HANDLE_CLASS = 'a-le-drag-handle'
 
-const anchorName = (key: ListEditorKey): string =>
-  `--row-${String(key).replace(/\W/g, '_')}`
+const anchorName = (key: ListEditorKey): string => `--row-${String(key).replace(/\W/g, '_')}`
 
 // Delegate to the parent editor's resolver so the registry + getValidationState
 // prop apply consistently. Falls back to reading raw.validationState if context
@@ -53,8 +43,7 @@ const resolveValidation = (raw: TItem): ListEditorValidationState => {
 
 const buildSlotProps = () => props.context.buildSlotProps(props.vi)
 
-const directChildren = (): any[] =>
-  props.viewItems.filter((v) => v.parentKey === props.vi.key)
+const directChildren = (): any[] => props.viewItems.filter((v) => v.parentKey === props.vi.key)
 </script>
 
 <template>
@@ -62,8 +51,7 @@ const directChildren = (): any[] =>
     :class="[
       'a-le-row-wrapper',
       {
-        'a-le-row-wrapper--drop-disabled':
-          dragState !== null && dragState.sourceKey === vi.key,
+        'a-le-row-wrapper--drop-disabled': dragState !== null && dragState.sourceKey === vi.key,
       },
     ]"
     :data-id="String(vi.key)"
@@ -72,6 +60,14 @@ const directChildren = (): any[] =>
     :tabindex="context.keyboardNav ? context.keyboardNav.rowTabindex(vi.key) : undefined"
     @keydown="context.keyboardNav ? context.keyboardNav.handleKeydown(vi.key, $event) : undefined"
   >
+    <!-- Interstitial slots are SIBLINGS of `.a-le-row` (children of this wrapper),
+         so between-row content never inherits the row's unsaved/editing/grabbed/
+         validation tint. (QA 85050 BUG-04/05) -->
+    <slot
+      name="before-item"
+      v-bind="buildSlotProps()"
+    />
+
     <div
       :class="[
         'a-le-row',
@@ -81,13 +77,10 @@ const directChildren = (): any[] =>
           'a-le-row--expanded': vi.expanded,
           'a-le-row--unsaved': vi.unsaved,
           'a-le-row--reorder': context.reorderMode,
-          'a-le-row--grabbed':
-            context.keyboardNav && context.keyboardNav.isGrabbed(vi.key),
+          'a-le-row--grabbed': context.keyboardNav && context.keyboardNav.isGrabbed(vi.key),
           'a-le-row--clickable': context.isRowClickable(vi),
-          'a-le-row--drop-source':
-            dragState !== null && dragState.sourceKey === vi.key,
-          [`a-le-row--validation-${resolveValidation(vi.raw)}`]:
-            resolveValidation(vi.raw) !== null,
+          'a-le-row--drop-source': dragState !== null && dragState.sourceKey === vi.key,
+          [`a-le-row--validation-${resolveValidation(vi.raw)}`]: resolveValidation(vi.raw) !== null,
         },
       ]"
       :style="{
@@ -96,11 +89,6 @@ const directChildren = (): any[] =>
         '--parent-anchor': vi.parentKey !== null ? anchorName(vi.parentKey) : 'none',
       }"
     >
-      <slot
-        name="before-item"
-        v-bind="buildSlotProps()"
-      />
-
       <div
         class="a-le-row-header"
         @click="callbacks.onRowClick(vi)"
@@ -123,9 +111,7 @@ const directChildren = (): any[] =>
               'a-nested-list-editor__tree-toggle--open': vi.childrenExpanded,
             },
           ]"
-          :aria-label="
-            vi.childrenExpanded ? t('common.sortable.close') : t('common.sortable.edit')
-          "
+          :aria-label="vi.childrenExpanded ? t('common.sortable.close') : t('common.sortable.edit')"
           @click.stop="vi.hasChildren && callbacks.onChevronClick(vi)"
         >
           <span class="a-nested-list-editor__tree-toggle-caret" />
@@ -175,9 +161,9 @@ const directChildren = (): any[] =>
           >
             <span
               v-if="
-                context.statusField
-                  && vi.raw[context.statusField] != null
-                  && vi.raw[context.statusField] !== ''
+                context.statusField &&
+                  vi.raw[context.statusField] != null &&
+                  vi.raw[context.statusField] !== ''
               "
               class="a-le-status-badge"
             >
@@ -367,9 +353,8 @@ const directChildren = (): any[] =>
               </VBtn>
               <VBtn
                 v-if="
-                  context.canInteract
-                    && ((context.showAddChildButton && vi.canAddChild)
-                      || context.showAddAfterAction)
+                  context.canInteract &&
+                    ((context.showAddChildButton && vi.canAddChild) || context.showAddAfterAction)
                 "
                 icon
                 size="small"
@@ -461,7 +446,9 @@ const directChildren = (): any[] =>
       </template>
 
       <div
-        v-else-if="vi.expanded && !context.reorderMode && $slots['item-readonly']"
+        v-else-if="
+          $slots['item-readonly'] && (context.readonly || vi.expanded) && !context.reorderMode
+        "
         class="a-le-row-body"
       >
         <div class="a-le-form">
@@ -471,13 +458,13 @@ const directChildren = (): any[] =>
           />
         </div>
       </div>
-
-      <slot
-        name="after-item"
-        v-bind="buildSlotProps()"
-      />
     </div>
 
+    <slot
+      name="after-item"
+      v-bind="buildSlotProps()"
+    />
+
     <!-- Recursive children — any depth level. The `::before` on this wrapper
          renders the single continuous vertical tree line at the parent's
          chevron column (see CSS). One line per group = no per-row gaps. -->
diff --git a/src/labs/listEditor/internal/LeUnsavedLabel.vue b/src/labs/listEditor/internal/LeUnsavedLabel.vue
index 95c33f11..588e8894 100644
--- a/src/labs/listEditor/internal/LeUnsavedLabel.vue
+++ b/src/labs/listEditor/internal/LeUnsavedLabel.vue
@@ -4,24 +4,34 @@ import { useI18n } from 'vue-i18n'
 // Small "unsaved" pill (warning dot + translated label). Emits the shared
 // `.a-le-unsaved-label` class directly — the flat `.a-le-*` namespace means
 // every variant shares the same selector, no per-variant BEM prefix needed.
+// `dotOnly` (chips mode) drops the label, leaving just the inline warning dot;
+// the label is kept as a native title tooltip so the marker stays meaningful.
 
 export interface Props {
   label?: string | null
+  dotOnly?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
   label: null,
+  dotOnly: false,
 })
 
 const { t } = useI18n()
 </script>
 
 <template>
-  <span class="a-le-unsaved-label">
+  <span
+    class="a-le-unsaved-label"
+    :class="{ 'a-le-unsaved-label--dot': dotOnly }"
+    :title="dotOnly ? (label ?? t('common.sortable.unsaved')) : undefined"
+  >
     <VIcon
       icon="mdi-circle-medium"
       size="12"
     />
-    {{ label ?? t('common.sortable.unsaved') }}
+    <template v-if="!dotOnly">
+      {{ label ?? t('common.sortable.unsaved') }}
+    </template>
   </span>
 </template>
diff --git a/src/labs/listEditor/styles/_shared.scss b/src/labs/listEditor/styles/_shared.scss
index 944a9743..0280cbe3 100644
--- a/src/labs/listEditor/styles/_shared.scss
+++ b/src/labs/listEditor/styles/_shared.scss
@@ -42,9 +42,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
-  padding: 8px 20px;
-  height: 60px;
+  gap: 8px;
+  padding: 8px 16px;
+  min-height: 60px;
+  flex-wrap: wrap;
   border-bottom: 1px solid var(--le-border);
   background: var(--le-surface);
   flex-shrink: 0;
@@ -63,7 +64,9 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  flex-shrink: 0;
+  flex-shrink: 1;
+  flex-wrap: wrap;
+  min-width: 0;
   margin-left: auto;
 }
 
@@ -75,6 +78,10 @@
   justify-content: center;
   padding: 32px 16px;
 
+  &--empty {
+    padding: 12px 16px;
+  }
+
   &--error {
     padding: 16px;
 
@@ -92,7 +99,7 @@
   align-items: center;
   gap: 8px;
   text-align: center;
-  padding: 16px;
+  padding: 8px;
 }
 
 .a-le-empty-title {
@@ -102,12 +109,6 @@
   color: var(--le-on-surface);
 }
 
-.a-le-empty-text {
-  font-size: 0.875rem;
-  color: var(--le-on-surface-variant);
-  margin: 0 0 12px;
-}
-
 // --- Row primitives ---------------------------------------------------------
 
 .a-le-row {
@@ -125,8 +126,10 @@
   // Editing / readonly-expanded rows keep the overall row transparent — the
   // blue tint sits on the header only, and the form body gets its own soft
   // gradient.
-  &--editing .a-le-row-header,
-  &--expanded .a-le-row-header {
+  // Direct child only — a nested editor rendered inside an expanded/editing row
+  // must NOT inherit the parent row's header tint (QA 85050 BUG-07 cascade leak).
+  &--editing > .a-le-row-header,
+  &--expanded > .a-le-row-header {
     background: var(--le-primary-container);
   }
 
@@ -159,23 +162,33 @@
     z-index: 2;
   }
 
-  &--unsaved .a-le-row-header {
+  // Direct child only: editing one nested row marks the parent dirty (the
+  // parent's hash includes its children), but that must not tint the untouched
+  // sibling rows' headers amber (QA 85050 BUG-07).
+  &--unsaved > .a-le-row-header {
     background: var(--le-warning-container);
   }
 
-  &--unsaved.a-le-row--editing .a-le-row-main,
-  &--unsaved.a-le-row--editing .a-le-row-main *,
-  &--unsaved.a-le-row--expanded .a-le-row-main,
-  &--unsaved.a-le-row--expanded .a-le-row-main * {
+  // Scope to the row's OWN main (direct `> header > main`), NOT any descendant
+  // `.a-le-row-main` — otherwise the amber text colour cascades into the titles
+  // of NESTED child rows (which each have their own `.a-le-row-main`) that live
+  // in this row's `.a-le-row-body`, so an untouched child reads amber though it
+  // is not unsaved (QA 85050 BUG-02). A nested row that is itself unsaved still
+  // colours its own main via its own (deeper, higher-specificity) rule.
+  &--unsaved.a-le-row--editing > .a-le-row-header > .a-le-row-main,
+  &--unsaved.a-le-row--editing > .a-le-row-header > .a-le-row-main *,
+  &--unsaved.a-le-row--expanded > .a-le-row-header > .a-le-row-main,
+  &--unsaved.a-le-row--expanded > .a-le-row-header > .a-le-row-main * {
     color: var(--le-warning);
   }
 
   // Active row — bold primary title. Reaches consumer-provided #item-compact
-  // slot content via the universal descendant selector.
-  &--editing .a-le-row-main,
-  &--editing .a-le-row-main *,
-  &--expanded .a-le-row-main,
-  &--expanded .a-le-row-main * {
+  // slot content via the universal descendant selector. Same direct-chain scope
+  // as the unsaved rule above so it doesn't bleed into nested child rows.
+  &--editing > .a-le-row-header > .a-le-row-main,
+  &--editing > .a-le-row-header > .a-le-row-main *,
+  &--expanded > .a-le-row-header > .a-le-row-main,
+  &--expanded > .a-le-row-header > .a-le-row-main * {
     font-weight: 700;
     color: var(--le-primary);
   }
@@ -187,7 +200,9 @@
     outline: 3px solid var(--le-primary);
     outline-offset: -3px;
     background: var(--le-primary-state-press);
-    box-shadow: 0 0 0 6px var(--le-primary-state), 0 4px 12px rgb(0 0 0 / 8%);
+    box-shadow:
+      0 0 0 6px var(--le-primary-state),
+      0 4px 12px rgb(0 0 0 / 8%);
     z-index: 4;
   }
 
@@ -199,8 +214,8 @@
   // so it sits visually on top of the unsaved orange rail (::before, z-index 2)
   // when both apply: invalid wins because the user can't save anyway.
   /* stylelint-disable selector-max-compound-selectors */
-  &--validation-invalid:not(.a-le-row--editing)::after,
-  &--validation-warning:not(.a-le-row--editing)::after {
+  &--validation-invalid::after,
+  &--validation-warning::after {
     content: '';
     position: absolute;
     left: 0;
@@ -210,21 +225,26 @@
     z-index: 3;
   }
 
-  &--validation-invalid:not(.a-le-row--editing)::after {
+  &--validation-invalid::after {
     background: var(--le-error-fg);
   }
 
-  &--validation-warning:not(.a-le-row--editing)::after {
+  &--validation-warning::after {
     background: var(--le-warning);
   }
 
-  // When the row is invalid AND unsaved, swap the row tint from orange to red
-  // so the entire row reads as a problem to fix, not a pending change.
-  &--unsaved.a-le-row--validation-invalid {
+  // Error takes visual precedence over the unsaved/changed state: any invalid
+  // row tints the *whole* row red (header + body), overriding the orange unsaved
+  // tint, so it always reads as a problem to fix rather than a pending change —
+  // whether it is also unsaved or invalid on its own. (Source order beats the
+  // equal-specificity `--unsaved` rule above.)
+  &--validation-invalid {
     background: var(--le-error-container);
   }
 
-  &--unsaved.a-le-row--validation-invalid .a-le-row-header {
+  // Direct child only (same nested-leak guard as --unsaved above): a parent row
+  // flagged invalid must not paint nested child headers red (QA 85050 BUG-07).
+  &--validation-invalid > .a-le-row-header {
     background: var(--le-error-container);
   }
   /* stylelint-enable selector-max-compound-selectors */
@@ -325,6 +345,21 @@
   flex-shrink: 0;
 }
 
+// Dot-only variant (chips mode) — drops the label text + padding, leaving
+// just the inline warning dot.
+.a-le-unsaved-label--dot {
+  gap: 0;
+  padding: 0;
+}
+
+// View-mode header "N unconfirmed changes" pill — amber, matching the reorder-mode LeStatus
+// `--pending` treatment + the per-row unsaved markers (was unstyled → inherited black text). BUG-03
+.a-le-unsaved-count {
+  color: var(--le-warning);
+  font-weight: 500;
+  font-size: 0.85rem;
+}
+
 .a-le-status {
   display: inline-flex;
   align-items: center;
@@ -441,6 +476,15 @@
   align-items: center;
   gap: 4px;
   margin-right: 4px;
+  min-width: 0;
+  flex: 0 1 auto;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
 
   &--pending {
     color: var(--le-warning);
@@ -662,14 +706,39 @@
     min-height: auto;
   }
 
+  // The wrapper is the flex item `__rows` flex-wraps (interstitial `#before/#after-item`
+  // slots now live outside `.a-le-row`); carry the pill's flex sizing here so long
+  // labels wrap/shrink as before, and let the inner `.a-le-row` fill it. (QA 85050 BUG-04/05)
+  .a-le-row-wrapper {
+    display: flex;
+    flex: 0 0 auto;
+    max-width: 100%;
+    min-width: 0;
+  }
+
   .a-le-row {
     border-bottom: none;
     background: var(--le-primary-container);
-    border-radius: var(--le-radius-full);
+    border-radius: var(--le-radius-pill);
     flex: 0 0 auto;
     max-width: 100%;
   }
 
+  // Unsaved in chips mode — warning-tinted pill + the inline orange dot. The
+  // 4 px left rail is dropped (a square bar reads badly on a rounded pill);
+  // the header stays transparent so the row's rounded tint shows through.
+  .a-le-row--unsaved {
+    background: var(--le-warning-container);
+  }
+
+  .a-le-row--unsaved::before {
+    display: none;
+  }
+
+  .a-le-row--unsaved .a-le-row-header {
+    background: transparent;
+  }
+
   .a-le-row-main {
     gap: 6px;
   }
@@ -694,7 +763,7 @@
     width: auto;
     border-top: none;
     border: 1px dashed var(--le-border);
-    border-radius: var(--le-radius-full);
+    border-radius: var(--le-radius-pill);
     padding: 4px 12px;
     font-size: 0.82rem;
     background: transparent;
diff --git a/src/labs/listEditor/types/listEditorTypes.ts b/src/labs/listEditor/types/listEditorTypes.ts
index 74a2d56e..a8c3706a 100644
--- a/src/labs/listEditor/types/listEditorTypes.ts
+++ b/src/labs/listEditor/types/listEditorTypes.ts
@@ -23,6 +23,15 @@ export type ListEditorKey = DocId | IntegerId | string
 
 export type ListEditorValidationState = 'valid' | 'invalid' | 'warning' | null
 
+/**
+ * A vuelidate `$scope` (the same value the consumer's `useVuelidate({ $scope })` collector uses).
+ * Passed to an editor via `validation-scope` to auto-register the editor's aggregate row validity
+ * into that collector — so a plain `v$.$invalid` save gate blocks even a collapsed invalid row.
+ * Mirrors the canonical `ValidationScope` set (a `ValidationScope`-typed consumer prop assigns without
+ * a cast); `false`/`undefined` opt out at runtime (the `true` case just joins the global collection).
+ */
+export type ListEditorValidationScope = string | number | boolean | symbol
+
 export interface ListViewItem<TItem> {
   key: ListEditorKey
   index: number
diff --git a/src/labs/listEditor/utils/positions.ts b/src/labs/listEditor/utils/positions.ts
new file mode 100644
index 00000000..7c6c287c
--- /dev/null
+++ b/src/labs/listEditor/utils/positions.ts
@@ -0,0 +1,95 @@
+export interface RenumberPositionsOptions {
+  /** Item field holding the position. Defaults to `'position'`. */
+  positionField?: string
+  /** Multiplier applied to the 1-based index (e.g. 10 → 10, 20, 30…). Defaults to `1`. */
+  positionMultiplier?: number
+}
+
+/** Non-mutating sort by ascending `position` (in-place `sort` would trigger reactivity). */
+export const sortByPosition = <TItem extends { position: number }>(items: TItem[]): TItem[] =>
+  [...items].sort((a, b) => a.position - b.position)
+
+/**
+ * Non-mutating deep `sortByPosition`. Sorts the top-level array, then for every
+ * item carrying one of `childKeys` as an array, recursively sorts that nested
+ * array too. The same `childKeys` apply at every depth and keys absent on a node
+ * are skipped — so pass the UNION of nested position-bearing array fields across
+ * the whole shape (e.g. `['contentItems', 'boxPositionIncludes']`).
+ *
+ * Same non-mutating contract as `sortByPosition`: only nodes that actually have a
+ * nested array are shallow-cloned; leaf nodes and untouched branches keep their
+ * reference. Use it to normalize an API response's ordering before it becomes
+ * store state, in one call, for nested collections.
+ */
+export const sortByPositionDeep = <TItem extends { position: number }>(
+  items: TItem[],
+  childKeys: string[] = [],
+): TItem[] =>
+  sortByPosition(items).map((item) => {
+    let next = item
+    for (const key of childKeys) {
+      const child = (item as Record<string, any>)[key]
+      if (Array.isArray(child)) {
+        if (next === item) next = { ...item }
+        ;(next as Record<string, any>)[key] = sortByPositionDeep(child, childKeys)
+      }
+    }
+    return next
+  })
+
+/**
+ * Non-mutating renumber to sequential positions matching array order — the same
+ * renumbering the editors apply on commit. Unchanged items stay reference-equal.
+ */
+export const renumberPositions = <TItem extends Record<string, any>>(
+  items: TItem[],
+  options: RenumberPositionsOptions = {},
+): TItem[] => {
+  const positionField = options.positionField ?? 'position'
+  const positionMultiplier = options.positionMultiplier ?? 1
+  return items.map((item, idx) => {
+    const newPosition = (idx + 1) * positionMultiplier
+    if (item[positionField] === newPosition) return item
+    return { ...item, [positionField]: newPosition }
+  })
+}
+
+/**
+ * Reassign the EXISTING position values to the current array order.
+ *
+ * For consumers whose position is a meaningful absolute number rather than an opaque ordinal (e.g. a
+ * CMS page whose backend interleaves these rows with another collection on the same numeric scale),
+ * a reorder must move rows THROUGH the existing slots instead of rewriting them: `A:10, B:310` with
+ * A and B swapped becomes `B:10, A:310` — the value set {10, 310} is untouched.
+ *
+ * Non-mutating; unchanged items stay reference-equal. Rows whose position is missing or non-numeric
+ * are left alone and warn in dev — silently inventing a value here would produce a wrong payload.
+ */
+export const preservePositionValues = <TItem extends Record<string, any>>(
+  items: TItem[],
+  options: RenumberPositionsOptions = {},
+): TItem[] => {
+  const positionField = options.positionField ?? 'position'
+  const values = items.map((i) => i[positionField])
+  const usable = values.every((v) => typeof v === 'number' && Number.isFinite(v))
+  if (!usable) {
+    console.warn(
+      `[listEditor] position strategy "preserve-values" needs a finite numeric \`${positionField}\` ` +
+        'on every row; found ' +
+        JSON.stringify(values) +
+        ' — leaving positions untouched.',
+    )
+    return items
+  }
+  if (new Set(values).size !== values.length) {
+    console.warn(
+      `[listEditor] position strategy "preserve-values" found DUPLICATE \`${positionField}\` values ` +
+        JSON.stringify(values) +
+        ' — the resulting order is not well defined relative to any interleaved collection.',
+    )
+  }
+  const slots = [...(values as number[])].sort((a, b) => a - b)
+  return items.map((item, idx) =>
+    item[positionField] === slots[idx] ? item : { ...item, [positionField]: slots[idx] },
+  )
+}
diff --git a/src/labs/listEditor/utils/revealInvalidRows.ts b/src/labs/listEditor/utils/revealInvalidRows.ts
new file mode 100644
index 00000000..33ba02f3
--- /dev/null
+++ b/src/labs/listEditor/utils/revealInvalidRows.ts
@@ -0,0 +1,17 @@
+import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
+
+/**
+ * Runs `validateAll()` and, on failure, opens each invalid row via `reveal()`
+ * so a blocked save shows WHICH rows are wrong (QA 85050 B4-17). Shared by all
+ * variants; `reveal` does the per-variant opening (nested also expands ancestors).
+ */
+export function validateAllAndReveal(
+  controller: { validateAll: () => boolean; invalidKeys: { value: Set<ListEditorKey> } },
+  reveal: (key: ListEditorKey) => void,
+): boolean {
+  const valid = controller.validateAll()
+  if (!valid) {
+    for (const key of controller.invalidKeys.value) reveal(key)
+  }
+  return valid
+}
diff --git a/src/labs/listEditor/utils/tempId.ts b/src/labs/listEditor/utils/tempId.ts
new file mode 100644
index 00000000..79f00c96
--- /dev/null
+++ b/src/labs/listEditor/utils/tempId.ts
@@ -0,0 +1,12 @@
+let seq = 0
+
+/**
+ * Unique negative temp id for new (unsaved) list rows.
+ *
+ * Row keys must be unique per row — duplicate or missing keys break dirty
+ * tracking, validation rails and reorder targeting. A single module-wide
+ * negative sequence guarantees uniqueness across all factories (two domain
+ * factories can no longer both hand out `-1`), and can never collide with
+ * persisted ids, which are positive. The backend assigns real ids on save.
+ */
+export const nextListEditorTempId = (): number => --seq
diff --git a/src/labs/unsavedGuard/AUnsavedConfirmDialog.vue b/src/labs/unsavedGuard/AUnsavedConfirmDialog.vue
index aeeaae1c..6900a5e0 100644
--- a/src/labs/unsavedGuard/AUnsavedConfirmDialog.vue
+++ b/src/labs/unsavedGuard/AUnsavedConfirmDialog.vue
@@ -6,6 +6,11 @@ export interface Props {
   body?: string
   stayLabel?: string
   discardLabel?: string
+  /**
+   * Names of the dirty sections (from the guard's `dirtyLabels`). When
+   * non-empty the dialog lists them instead of the generic body message.
+   */
+  dirtyLabels?: string[]
 }
 
 withDefaults(defineProps<Props>(), {
@@ -13,6 +18,7 @@ withDefaults(defineProps<Props>(), {
   body: undefined,
   stayLabel: undefined,
   discardLabel: undefined,
+  dirtyLabels: () => [],
 })
 
 const emit = defineEmits<{
@@ -43,7 +49,24 @@ const onDiscard = () => {
         {{ title ?? t('common.sortable.unsavedChanges.title') }}
       </VCardTitle>
       <VCardText>
-        {{ body ?? t('common.sortable.unsavedChanges.body') }}
+        <template v-if="body">
+          {{ body }}
+        </template>
+        <template v-else-if="dirtyLabels.length">
+          {{ t('common.sortable.unsavedChanges.sectionsIntro') }}
+          <ul class="a-unsaved-sections">
+            <li
+              v-for="(label, i) in dirtyLabels"
+              :key="i"
+            >
+              {{ label }}
+            </li>
+          </ul>
+          {{ t('common.sortable.unsavedChanges.leaveQuestion') }}
+        </template>
+        <template v-else>
+          {{ t('common.sortable.unsavedChanges.body') }}
+        </template>
       </VCardText>
       <VCardActions>
         <VSpacer />
@@ -55,7 +78,7 @@ const onDiscard = () => {
         </VBtn>
         <VBtn
           color="warning"
-          variant="elevated"
+          variant="flat"
           @click="onDiscard"
         >
           {{ discardLabel ?? t('common.sortable.unsavedChanges.discard') }}
@@ -64,3 +87,14 @@ const onDiscard = () => {
     </VCard>
   </VDialog>
 </template>
+
+<style scoped lang="scss">
+.a-unsaved-sections {
+  margin: 8px 0;
+  padding-left: 20px;
+
+  li {
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/labs/unsavedGuard/useGuardedDelete.ts b/src/labs/unsavedGuard/useGuardedDelete.ts
new file mode 100644
index 00000000..727af664
--- /dev/null
+++ b/src/labs/unsavedGuard/useGuardedDelete.ts
@@ -0,0 +1,43 @@
+import type { UseUnsavedChangesGuardApi } from '@/labs/unsavedGuard/useUnsavedChangesGuard'
+
+/**
+ * Wrap an entity-delete handler so it bypasses the unsaved-changes leave guard.
+ *
+ * An entity delete destroys the record together with any unsaved edits, so the "you have unsaved
+ * changes — really leave?" prompt that the delete's `router.push` would otherwise trigger is
+ * meaningless: the user already confirmed the delete, and there is nothing left to keep. Without this
+ * the delete runs, then the leave-guard fires on the post-delete navigation and choosing "stay" leaves
+ * the view on an already-deleted entity (system error). This acknowledges the guard right before the
+ * delete so the follow-up navigation proceeds without prompting. (QA 85050 batch 7 — BUG-08)
+ *
+ * If `onDelete` REJECTS (the delete failed and never navigated), the acknowledgement is undone
+ * immediately (`unacknowledge()`) so a subsequently-dirtied navigation is still guarded (M1) — the
+ * error is re-thrown so the caller's own handling runs. For this to catch failures, `onDelete` must
+ * let its error propagate (don't swallow it in the action's try/catch).
+ *
+ * Usage: `@delete-record="guardedDelete(() => onDelete(id))"` or wrap the handler once.
+ */
+export function useGuardedDelete<A extends unknown[], R>(
+  guard: Pick<UseUnsavedChangesGuardApi, 'acknowledge' | 'unacknowledge'>,
+  onDelete: (...args: A) => R,
+): (...args: A) => R | Promise<Awaited<R>> {
+  return (...args: A): R | Promise<Awaited<R>> => {
+    guard.acknowledge()
+    let result: R
+    try {
+      result = onDelete(...args)
+    } catch (err) {
+      // Synchronous throw before any navigation — disarm and re-throw.
+      guard.unacknowledge()
+      throw err
+    }
+    // Async handler: undo the acknowledgement if the delete rejects (no navigation happened).
+    if (result instanceof Promise) {
+      return (result as Promise<Awaited<R>>).catch((err) => {
+        guard.unacknowledge()
+        throw err
+      })
+    }
+    return result
+  }
+}
diff --git a/src/labs/unsavedGuard/useUnsavedChangesGuard.ts b/src/labs/unsavedGuard/useUnsavedChangesGuard.ts
index f46f3e7c..19e85f96 100644
--- a/src/labs/unsavedGuard/useUnsavedChangesGuard.ts
+++ b/src/labs/unsavedGuard/useUnsavedChangesGuard.ts
@@ -1,5 +1,18 @@
-import { computed, getCurrentInstance, onBeforeUnmount, ref, watch, type ComputedRef, type Ref } from 'vue'
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  ref,
+  watch,
+  type ComputedRef,
+  type Ref,
+} from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
+import {
+  provideUnsavedSectionRegistry,
+  type UnsavedSectionDescriptor,
+  type UnsavedSectionSource,
+} from '@/labs/unsavedGuard/useUnsavedSection'
 
 type UnsavedSource = Ref<boolean | Set<unknown> | unknown[] | null | undefined>
 
@@ -25,10 +38,24 @@ export interface UseUnsavedChangesGuardOptions {
    * confirms via the confirm dialog or via `acknowledge()`.
    */
   guardDialogModel?: Ref<boolean>
+  /**
+   * Named sections owned by the guard host component itself. Descendants use
+   * `useUnsavedSection` instead — but a component can't `inject` its own
+   * `provide`, so when the host *is* the section owner (e.g. a dialog), pass
+   * the sections here.
+   */
+  ownSections?: UnsavedSectionSource
 }
 
 export interface UseUnsavedChangesGuardApi {
   hasUnsavedChanges: ComputedRef<boolean>
+  /**
+   * Labels of the dirty sections registered by descendants via
+   * `useUnsavedSection`. Bind to `AUnsavedConfirmDialog`'s `dirtyLabels` prop
+   * so the dialog names *which* parts are unsaved. Empty when no descendant
+   * registered a section (dialog falls back to the generic message).
+   */
+  dirtyLabels: ComputedRef<string[]>
   /**
    * v-model-bound to the confirm dialog. When the guard wants to ask the user
    * to confirm leaving, it sets this to true. The confirm dialog reads it.
@@ -44,10 +71,27 @@ export interface UseUnsavedChangesGuardApi {
    * route/dialog/unload attempt proceeds without prompting. Useful right
    * before a programmatic navigation that the consumer has already
    * confirmed.
+   *
+   * The acknowledgement AUTO-EXPIRES after a few seconds if nothing consumes it
+   * (see `ACKNOWLEDGE_TTL_MS`): a delete that acknowledges up-front but then FAILS
+   * (throws, never navigates) must not leave the guard silently disarmed for the
+   * next unrelated navigation. Consuming it (a real leave) clears the timer.
    */
   acknowledge: () => void
+  /**
+   * Cancel a pending `acknowledge()` (disarm). Call from a delete's failure path
+   * so a failed/aborted delete restores the guard immediately instead of waiting
+   * for the TTL. No-op if nothing is acknowledged.
+   */
+  unacknowledge: () => void
 }
 
+// An acknowledgement is meant for an IMMINENT navigation (a delete's router.push after its HTTP
+// round-trip — tens to hundreds of ms). If none arrives within this window the delete almost
+// certainly failed, so the one-shot expires rather than arming an unrelated later navigation.
+// Generously longer than any real delete request so a legitimate slow-success never false-prompts.
+const ACKNOWLEDGE_TTL_MS = 8000
+
 const isTruthySource = (value: unknown): boolean => {
   if (value === null || value === undefined) return false
   if (typeof value === 'boolean') return value
@@ -65,17 +109,44 @@ const resolveBool = (v: boolean | Ref<boolean> | undefined, fallback: boolean):
 export function useUnsavedChangesGuard(
   options: UseUnsavedChangesGuardOptions,
 ): UseUnsavedChangesGuardApi {
-  const hasUnsavedChanges = computed<boolean>(() =>
-    options.sources.some((s) => isTruthySource(s.value)),
+  // Provide a section registry so descendants can name their dirty sections
+  // via `useUnsavedSection`. The dialog reads `dirtyLabels` from this.
+  const sectionRegistry = provideUnsavedSectionRegistry()
+
+  // The host component can't inject its own provide, so register its own
+  // sections directly.
+  if (options.ownSections) {
+    const ownSections = options.ownSections
+    const id = Symbol('unsaved.section.own')
+    const normalized = computed<UnsavedSectionDescriptor[]>(() => {
+      const resolved = ownSections()
+      return Array.isArray(resolved) ? resolved : [resolved]
+    })
+    sectionRegistry.register(id, normalized)
+  }
+
+  const hasUnsavedChanges = computed<boolean>(
+    () =>
+      options.sources.some((s) => isTruthySource(s.value)) ||
+      sectionRegistry.dirtyLabels.value.length > 0,
   )
 
   const promptOpen = ref<boolean>(false)
   let pendingResolver: ((discard: boolean) => void) | null = null
   let acknowledgedOnce = false
+  let acknowledgeTimer: ReturnType<typeof setTimeout> | null = null
+
+  const clearAcknowledgeTimer = () => {
+    if (acknowledgeTimer !== null) {
+      clearTimeout(acknowledgeTimer)
+      acknowledgeTimer = null
+    }
+  }
 
   const askToLeave = (): Promise<boolean> => {
     if (acknowledgedOnce) {
       acknowledgedOnce = false
+      clearAcknowledgeTimer()
       return Promise.resolve(true)
     }
     return new Promise((resolve) => {
@@ -94,6 +165,18 @@ export function useUnsavedChangesGuard(
 
   const acknowledge = () => {
     acknowledgedOnce = true
+    // Auto-expire: if the imminent navigation never arrives (e.g. the delete threw), don't leave
+    // the guard armed for an unrelated later leave. A real consume (askToLeave) clears this first.
+    clearAcknowledgeTimer()
+    acknowledgeTimer = setTimeout(() => {
+      acknowledgedOnce = false
+      acknowledgeTimer = null
+    }, ACKNOWLEDGE_TTL_MS)
+  }
+
+  const unacknowledge = () => {
+    acknowledgedOnce = false
+    clearAcknowledgeTimer()
   }
 
   // Route guard — `onBeforeRouteLeave` only works inside a route component
@@ -150,10 +233,16 @@ export function useUnsavedChangesGuard(
     })
   }
 
+  if (getCurrentInstance()) {
+    onBeforeUnmount(clearAcknowledgeTimer)
+  }
+
   return {
     hasUnsavedChanges,
+    dirtyLabels: sectionRegistry.dirtyLabels,
     promptOpen,
     resolvePrompt,
     acknowledge,
+    unacknowledge,
   }
 }
diff --git a/src/labs/unsavedGuard/useUnsavedSection.ts b/src/labs/unsavedGuard/useUnsavedSection.ts
new file mode 100644
index 00000000..4cf72379
--- /dev/null
+++ b/src/labs/unsavedGuard/useUnsavedSection.ts
@@ -0,0 +1,91 @@
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onBeforeUnmount,
+  provide,
+  reactive,
+  type ComputedRef,
+  type InjectionKey,
+} from 'vue'
+
+/**
+ * One named, savable section the unsaved-changes confirm dialog can name back
+ * to the user. `dirty` is evaluated reactively inside the section's getter.
+ */
+export interface UnsavedSectionDescriptor {
+  label: string
+  dirty: boolean
+}
+
+/**
+ * Getter returning a single descriptor, or an array of them for a component
+ * that owns several sub-sections (e.g. page positions in one PageContentsManage).
+ */
+export type UnsavedSectionSource = () => UnsavedSectionDescriptor | UnsavedSectionDescriptor[]
+
+export interface UnsavedSectionRegistry {
+  register: (id: symbol, source: ComputedRef<UnsavedSectionDescriptor[]>) => void
+  unregister: (id: symbol) => void
+  /** Labels of every registered section currently flagged dirty. */
+  dirtyLabels: ComputedRef<string[]>
+}
+
+export const UnsavedSectionKey = Symbol('unsaved.sections') as InjectionKey<UnsavedSectionRegistry>
+
+export function createUnsavedSectionRegistry(): UnsavedSectionRegistry {
+  const sources = reactive(new Map<symbol, ComputedRef<UnsavedSectionDescriptor[]>>())
+
+  const dirtyLabels = computed<string[]>(() => {
+    const out: string[] = []
+    for (const source of sources.values()) {
+      for (const descriptor of source.value) {
+        if (descriptor.dirty) out.push(descriptor.label)
+      }
+    }
+    return out
+  })
+
+  return {
+    register(id, source) {
+      sources.set(id, source)
+    },
+    unregister(id) {
+      sources.delete(id)
+    },
+    dirtyLabels,
+  }
+}
+
+/**
+ * Creates a registry and `provide`s it for descendants. Called internally by
+ * `useUnsavedChangesGuard` so the guard host automatically supplies one.
+ */
+export function provideUnsavedSectionRegistry(): UnsavedSectionRegistry {
+  const registry = createUnsavedSectionRegistry()
+  if (getCurrentInstance()) provide(UnsavedSectionKey, registry)
+  return registry
+}
+
+/**
+ * Registers one or more named sections so the unsaved-changes confirm dialog
+ * can tell the user *which* parts are dirty instead of a generic message.
+ *
+ * Pass a getter returning a descriptor — or an array of descriptors when the
+ * component owns several sub-sections (e.g. one PageContentsManage owns N page
+ * positions). No-op when called outside a guarded route (inject returns null).
+ */
+export function useUnsavedSection(source: UnsavedSectionSource): void {
+  const registry = inject(UnsavedSectionKey, null)
+  if (!registry) return
+  if (!getCurrentInstance()) return
+
+  const id = Symbol('unsaved.section')
+  const normalized = computed<UnsavedSectionDescriptor[]>(() => {
+    const resolved = source()
+    return Array.isArray(resolved) ? resolved : [resolved]
+  })
+
+  registry.register(id, normalized)
+  onBeforeUnmount(() => registry.unregister(id))
+}
diff --git a/src/lib.ts b/src/lib.ts
index aad96c76..c8ec887e 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -1270,3 +1270,6 @@ export {
   localTimeShiftInSeconds,
   useSystemBar,
 }
+
+export { createCachedChip } from '@/components/createCachedChip'
+export type { CreateCachedChipOptions, CachedChipId } from '@/components/createCachedChip'
diff --git a/src/locales/cs/common/sortable.json b/src/locales/cs/common/sortable.json
index 29565966..c23091f0 100644
--- a/src/locales/cs/common/sortable.json
+++ b/src/locales/cs/common/sortable.json
@@ -7,6 +7,7 @@
   "delete": "Smazat",
   "deleteConfirmTitle": "Smazat položku?",
   "deleteConfirmText": "Opravdu chcete smazat tuto položku? Tuto akci nelze vrátit zpět.",
+  "deleteConfirmTextDeferred": "Tato položka se smaže při uložení. Do té doby lze akci vrátit.",
   "remove": "Odstranit",
   "addAfter": "Přidat za tuto položku",
   "addChild": "Přidat dovnitř",
@@ -47,6 +48,8 @@
   "unsavedChanges": {
     "title": "Neuložené změny",
     "body": "Máte neuložené změny. Opravdu chcete odejít?",
+    "sectionsIntro": "Neuložené změny máte v těchto částech:",
+    "leaveQuestion": "Opravdu chcete odejít?",
     "stay": "Zůstat",
     "discard": "Odejít přesto"
   },
diff --git a/src/locales/cs/error/apiTimedOut.json b/src/locales/cs/error/apiTimedOut.json
index c6eed439..27451308 100644
--- a/src/locales/cs/error/apiTimedOut.json
+++ b/src/locales/cs/error/apiTimedOut.json
@@ -1,3 +1,3 @@
 {
-  "message": "Request to API timed out."
+  "message": "Požadavek na API vypršel. Zkuste to prosím znovu."
 }
diff --git a/src/locales/en/common/model.json b/src/locales/en/common/model.json
index 75a2895c..253ce757 100644
--- a/src/locales/en/common/model.json
+++ b/src/locales/en/common/model.json
@@ -13,8 +13,8 @@
     "modified": "Modified"
   },
   "filterPlaceholder": {
-    "eq": "Presný výraz",
-    "contains": "Kdekolvek vo výraze",
-    "startsWith": "Začiatok výrazu"
+    "eq": "Exact match",
+    "contains": "Anywhere in the text",
+    "startsWith": "Starts with"
   }
 }
diff --git a/src/locales/en/common/sortable.json b/src/locales/en/common/sortable.json
index bb99f9d9..286a9434 100644
--- a/src/locales/en/common/sortable.json
+++ b/src/locales/en/common/sortable.json
@@ -7,6 +7,7 @@
   "delete": "Delete",
   "deleteConfirmTitle": "Delete item?",
   "deleteConfirmText": "Are you sure you want to delete this item? This action cannot be undone.",
+  "deleteConfirmTextDeferred": "This item will be deleted when you save. You can still revert the action until then.",
   "remove": "Remove",
   "addAfter": "Add after this item",
   "addChild": "Add inside",
@@ -47,6 +48,8 @@
   "unsavedChanges": {
     "title": "Unsaved changes",
     "body": "You have unsaved changes. Are you sure you want to leave?",
+    "sectionsIntro": "You have unsaved changes in these sections:",
+    "leaveQuestion": "Are you sure you want to leave?",
     "stay": "Stay",
     "discard": "Leave anyway"
   },
diff --git a/src/locales/sk/common/sortable.json b/src/locales/sk/common/sortable.json
index dfad2389..ad013ab9 100644
--- a/src/locales/sk/common/sortable.json
+++ b/src/locales/sk/common/sortable.json
@@ -7,6 +7,7 @@
   "delete": "Zmazať",
   "deleteConfirmTitle": "Zmazať položku?",
   "deleteConfirmText": "Naozaj chcete zmazať túto položku? Túto akciu nie je možné vrátiť späť.",
+  "deleteConfirmTextDeferred": "Táto položka sa zmaže pri uložení. Dovtedy je možné akciu vrátiť.",
   "remove": "Odstrániť",
   "addAfter": "Pridať za túto položku",
   "addChild": "Pridať dovnútra",
@@ -47,6 +48,8 @@
   "unsavedChanges": {
     "title": "Neuložené zmeny",
     "body": "Máte neuložené zmeny. Naozaj chcete odísť?",
+    "sectionsIntro": "Neuložené zmeny máte v týchto častiach:",
+    "leaveQuestion": "Naozaj chcete odísť?",
     "stay": "Zostať",
     "discard": "Odísť aj tak"
   },
diff --git a/src/locales/sk/error/apiTimedOut.json b/src/locales/sk/error/apiTimedOut.json
index c6eed439..3f838e17 100644
--- a/src/locales/sk/error/apiTimedOut.json
+++ b/src/locales/sk/error/apiTimedOut.json
@@ -1,3 +1,3 @@
 {
-  "message": "Request to API timed out."
+  "message": "Požiadavka na API vypršala. Skúste to prosím znova."
 }
diff --git a/src/model/error/AnzuApiResponseCodeError.ts b/src/model/error/AnzuApiResponseCodeError.ts
index 57d9584b..8086bdf3 100644
--- a/src/model/error/AnzuApiResponseCodeError.ts
+++ b/src/model/error/AnzuApiResponseCodeError.ts
@@ -6,7 +6,9 @@ export class AnzuApiResponseCodeError extends Error {
   code: number
 
   constructor(code: number, cause?: Error, message?: string) {
-    super(message)
+    // Empty message renders as "No error message" in Sentry.
+    const resolvedMessage = message || `API responded with unexpected status code ${code}`
+    super(resolvedMessage)
     this.name = 'AnzuApiResponseCodeError'
     this.cause = cause
     this.code = code
diff --git a/src/model/error/AnzuApiTimeoutError.ts b/src/model/error/AnzuApiTimeoutError.ts
index e8df3811..fc29ce00 100644
--- a/src/model/error/AnzuApiTimeoutError.ts
+++ b/src/model/error/AnzuApiTimeoutError.ts
@@ -19,7 +19,7 @@ export const axiosErrorIsTimeout = (error: Error) => {
 export class AnzuApiTimeoutError extends Error {
   constructor(cause: Error | undefined = undefined) {
     super('API request timed out')
-    this.name = 'AnzuApiAxiosError'
+    this.name = 'AnzuApiTimeoutError'
     this.cause = cause
   }
 }
diff --git a/src/model/error/AnzuApiValidationError.ts b/src/model/error/AnzuApiValidationError.ts
index 1506ebc2..af158380 100644
--- a/src/model/error/AnzuApiValidationError.ts
+++ b/src/model/error/AnzuApiValidationError.ts
@@ -63,10 +63,14 @@ export class AnzuApiValidationError extends Error {
   fields: ValidationError[]
 
   constructor(axiosError: AxiosError, system: string, entity: string, cause?: Error, message = '') {
-    super(message)
+    const fields = resolveResponseData(axiosError, system, entity)
+    // Kept low-cardinality on purpose; field details would break Sentry grouping.
+    const resolvedMessage =
+      message || `Validation failed for ${system}.${entity} (${fields.length} fields)`
+    super(resolvedMessage)
     this.name = 'AnzuApiValidationError'
     this.cause = cause
-    this.message = message
-    this.fields = resolveResponseData(axiosError, system, entity)
+    this.message = resolvedMessage
+    this.fields = fields
   }
 }
diff --git a/src/model/error/AnzuFatalError.ts b/src/model/error/AnzuFatalError.ts
index ad0a2932..26d86fa4 100644
--- a/src/model/error/AnzuFatalError.ts
+++ b/src/model/error/AnzuFatalError.ts
@@ -4,9 +4,11 @@ export const isAnzuFatalError = (error: any): error is AnzuFatalError => {
 
 export class AnzuFatalError extends Error {
   constructor(cause?: Error, message = '') {
-    super(message)
+    // Empty message renders as "No error message" in Sentry.
+    const resolvedMessage = message || 'Unexpected error'
+    super(resolvedMessage)
     this.name = 'AnzuFatalError'
     this.cause = cause
-    this.message = message
+    this.message = resolvedMessage
   }
 }
diff --git a/src/playground/cardGridReorderView/CardGridReorderView.vue b/src/playground/cardGridReorderView/CardGridReorderView.vue
new file mode 100644
index 00000000..47fab16f
--- /dev/null
+++ b/src/playground/cardGridReorderView/CardGridReorderView.vue
@@ -0,0 +1,275 @@
+<script lang="ts" setup>
+import ActionbarWrapper from '@/playground/system/ActionbarWrapper.vue'
+import { ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import AFormTextarea from '@/components/form/AFormTextarea.vue'
+
+interface MockImage extends Record<string, any> {
+  id: number
+  key: string
+  position: number
+  src: string
+  title: string
+  description: string
+}
+
+const palette = ['#ff8a80', '#ffd180', '#ffff8d', '#ccff90', '#80d8ff', '#b388ff']
+const makeSvgThumb = (label: string, color: string): string => {
+  const svg =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180">' +
+    `<rect width="320" height="180" fill="${color}"/>` +
+    `<text x="160" y="100" text-anchor="middle" font-family="sans-serif" font-size="40" fill="#222">${label}</text>` +
+    '</svg>'
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
+}
+
+const buildImages = (): MockImage[] =>
+  Array.from({ length: 6 }, (_, i) => ({
+    id: i + 1,
+    key: `img-${i + 1}`,
+    position: i + 1,
+    src: makeSvgThumb(String(i + 1), palette[i % palette.length]),
+    title: `Image ${i + 1}`,
+    description: `Description for image ${i + 1}`,
+  }))
+
+const images = ref<MockImage[]>(buildImages())
+const editorMode = ref<'view' | 'reorder'>('view')
+
+let nextCardId = 100
+const createImage = (): MockImage => {
+  const id = nextCardId++
+  return {
+    id,
+    key: `img-${id}`,
+    position: 0,
+    src: makeSvgThumb(String(id), palette[id % palette.length]),
+    title: `Image ${id}`,
+    description: '',
+  }
+}
+
+const reset = () => {
+  images.value = buildImages()
+  editorMode.value = 'view'
+}
+
+const removeAt = (idx: number) => {
+  images.value.splice(idx, 1)
+}
+
+const lastEvent = ref<string>('')
+const log = (msg: string) => {
+  lastEvent.value = `${new Date().toLocaleTimeString()}  ${msg}`
+}
+
+const onReorderApplied = (items: MockImage[]) => {
+  log(`applied: ${items.map((i) => i.id).join(' → ')}`)
+}
+</script>
+
+<template>
+  <ActionbarWrapper />
+
+  <VCard>
+    <VCardText>
+      <h2 class="text-headline-medium mt-4 mb-2">
+        Card-grid + reorder mode pattern (#view-body slot)
+      </h2>
+      <p class="text-body-medium text-medium-emphasis mb-2">
+        The editor's header hosts the Reorder / Apply / Cancel buttons; the
+        <code>#view-body</code> slot lets you put any content (here, a card grid with form fields)
+        in place of the editor's default vertical list while in view mode. Click
+        <strong>Reorder</strong> in the editor's header to switch to the bigger-thumbnail sortable
+        list.
+      </p>
+      <p class="text-body-medium text-medium-emphasis mb-4">
+        This is the same pattern used by <code>AImageWidgetMultiple</code>.
+      </p>
+
+      <div class="pb-2">
+        <VBtn
+          variant="tonal"
+          size="small"
+          @click="reset"
+        >
+          Reset items
+        </VBtn>
+      </div>
+
+      <ASortableListEditor
+        v-model="images"
+        v-model:mode="editorMode"
+        :factory="createImage"
+        get-key="key"
+        position="position"
+        :show-add-button="false"
+        :show-delete-button="false"
+        :show-edit-button="false"
+        data-cy="reorder-editor"
+        @reorder-applied="onReorderApplied"
+      >
+        <template #view-body>
+          <div
+            class="card-grid"
+            data-cy="card-grid"
+          >
+            <div
+              v-for="(image, index) in images"
+              :key="image.key"
+              class="card-grid__card"
+            >
+              <img
+                :src="image.src"
+                :alt="image.title"
+                class="card-grid__thumb"
+              >
+              <div class="card-grid__body">
+                <div class="card-grid__title">
+                  {{ image.title }}
+                </div>
+                <AFormTextarea
+                  v-model="image.description"
+                  label="Description"
+                  hide-details
+                />
+                <div class="card-grid__actions">
+                  <VBtn
+                    size="small"
+                    variant="text"
+                    color="error"
+                    @click="removeAt(index)"
+                  >
+                    Remove
+                  </VBtn>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template #item-compact="{ raw }">
+          <div class="card-grid-reorder-row">
+            <img
+              :src="raw.src"
+              :alt="raw.title"
+              class="card-grid-reorder-row__thumb"
+            >
+            <div class="card-grid-reorder-row__meta">
+              <div class="card-grid-reorder-row__title">
+                {{ raw.title }}
+              </div>
+              <div class="card-grid-reorder-row__desc">
+                {{ raw.description }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </ASortableListEditor>
+
+      <div
+        v-if="lastEvent"
+        class="text-body-small text-medium-emphasis mt-4"
+        data-cy="event-log"
+      >
+        last event: {{ lastEvent }}
+      </div>
+
+      <h3 class="text-title-large mt-6 mb-2">
+        Order (live)
+      </h3>
+      <div class="text-body-small text-medium-emphasis">
+        {{ images.map((i) => `${i.position}:${i.id}`).join(' · ') }}
+      </div>
+    </VCardText>
+  </VCard>
+</template>
+
+<style scoped lang="scss">
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+
+  &__card {
+    border: 1px solid rgb(var(--v-theme-on-surface) / 12%);
+    border-radius: 6px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__thumb {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    display: block;
+  }
+
+  &__body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__title {
+    font-weight: 500;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.card-grid-reorder-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  min-height: 100px;
+  padding: 4px 0;
+
+  &__thumb {
+    flex: 0 0 auto;
+    width: 200px;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: 4px;
+    display: block;
+  }
+
+  &__meta {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__title {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__desc {
+    font-size: 0.85rem;
+    color: rgb(var(--v-theme-on-surface) / 70%);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @media (width <= 600px) {
+    gap: 8px;
+    min-height: 72px;
+
+    &__thumb {
+      width: 80px;
+    }
+
+    &__desc {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/playground/listEditorView/ListEditorView.vue b/src/playground/listEditorView/ListEditorView.vue
index 49631689..1cbefd82 100644
--- a/src/playground/listEditorView/ListEditorView.vue
+++ b/src/playground/listEditorView/ListEditorView.vue
@@ -3,8 +3,8 @@ import ActionbarWrapper from '@/playground/system/ActionbarWrapper.vue'
 import { ref } from 'vue'
 import AListEditor from '@/labs/listEditor/AListEditor.vue'
 import AFormTextField from '@/components/form/AFormTextField.vue'
-import type { ListEditorApi } from '@/labs/listEditor/composables/useListEditor'
-import type { ListViewItem, PositionHint } from '@/labs/listEditor/types/listEditorTypes'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
+import type { ListViewItem } from '@/labs/listEditor/types/listEditorTypes'
 
 interface FaqItem extends Record<string, any> {
   id: number
@@ -16,6 +16,14 @@ interface FaqItem extends Record<string, any> {
 
 let nextId = 100
 
+// New-row factory — the editor manages add itself (no consumer push handler).
+const createFaqItem = (): FaqItem => ({
+  id: nextId++,
+  position: 0,
+  title: `New #${nextId}`,
+  status: 'Draft',
+})
+
 const statusColor = (status: string): string => {
   if (status === 'Active') return 'success'
   if (status === 'Draft') return 'warning'
@@ -65,6 +73,7 @@ interface Keyword extends Record<string, any> {
   label: string
 }
 let nextKeywordId = 100
+const createKeyword = (): Keyword => ({ id: nextKeywordId++, label: '' })
 const chipItems = ref<Keyword[]>([
   { id: 1, label: 'breaking-news' },
   { id: 2, label: 'sport' },
@@ -110,7 +119,7 @@ const twoRowsItems = ref<FaqItem[]>([
   },
 ])
 
-const editorRef = ref<ListEditorApi<FaqItem> | null>(null)
+const editorRef = ref<ListEditorHandle<FaqItem> | null>(null)
 
 const lastLog = ref<string>('')
 const log = (msg: string) => {
@@ -122,23 +131,6 @@ const onInlineItemSave = async (item: FaqItem) => {
   log(`saved item ${item.id}: ${item.title}`)
 }
 
-const onInlineAdd = (hint: PositionHint | undefined) => {
-  const fresh: FaqItem = {
-    id: nextId++,
-    position: 0,
-    title: `New #${nextId}`,
-    status: 'Draft',
-  }
-  const anchor = hint?.afterId
-    ? inlineItems.value.findIndex((i) => i.id === hint.afterId)
-    : -1
-  if (anchor >= 0) {
-    inlineItems.value.splice(anchor + 1, 0, fresh)
-  } else {
-    inlineItems.value.push(fresh)
-  }
-}
-
 const loadingKeys = ref<Set<number>>(new Set())
 const onLazyEdit = async (vi: ListViewItem<FaqItem>) => {
   if (vi.raw.answer !== undefined) return
@@ -146,22 +138,14 @@ const onLazyEdit = async (vi: ListViewItem<FaqItem>) => {
   await new Promise((r) => setTimeout(r, 900))
   const idx = lazyItems.value.findIndex((i) => i.id === vi.raw.id)
   if (idx !== -1) {
-    lazyItems.value[idx].answer = `Lazy-loaded answer for #${vi.raw.id} at ${new Date().toLocaleTimeString()}`
+    lazyItems.value[idx].answer =
+      `Lazy-loaded answer for #${vi.raw.id} at ${new Date().toLocaleTimeString()}`
   }
   loadingKeys.value.delete(vi.raw.id)
 }
 
-const onRefAdd = (hint: PositionHint | undefined) => {
-  if (!editorRef.value) return
-  editorRef.value.addItem(
-    {
-      id: nextId++,
-      position: 0,
-      title: `New question #${nextId}`,
-      status: 'Draft',
-    },
-    hint,
-  )
+const onRefAdd = () => {
+  editorRef.value?.addItem()
 }
 
 const onDeleteAsync = async (item: FaqItem) => {
@@ -183,15 +167,15 @@ const onDeleteAsync = async (item: FaqItem) => {
         AListEditor — inline edit (title + status chip + Close vs Cancel distinction)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        Click a row to activate. Close (X) keeps your changes.
-        Cancel rolls back to the snapshot taken when you opened the row. Save commits via
+        Click a row to activate. Close (X) keeps your changes. Cancel rolls back to the snapshot
+        taken when you opened the row. Save commits via
         <code>onItemSave</code>. Only one row can be edited at a time.
       </p>
       <AListEditor
         v-model="inlineItems"
         title="Časté otázky (FAQ)"
+        :factory="createFaqItem"
         :on-delete="onDeleteAsync"
-        @add="onInlineAdd"
       >
         <template #item-compact="{ raw }">
           <span class="faq-title">{{ raw.title }}</span>
@@ -225,13 +209,14 @@ const onDeleteAsync = async (item: FaqItem) => {
         AListEditor — readonly with #item-readonly slot (click to expand detail view)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        Component is <code>readonly</code>. Click a row to expand and see the detail in a
-        read-only form rendered via the <code>#item-readonly</code> slot. Close (X) collapses.
-        No Save / Cancel footer.
+        Component is <code>readonly</code>. Click a row to expand and see the detail in a read-only
+        form rendered via the <code>#item-readonly</code> slot. Close (X) collapses. No Save /
+        Cancel footer.
       </p>
       <AListEditor
         v-model="readonlyItems"
         title="FAQ — read only"
+        :factory="createFaqItem"
         readonly
       >
         <template #item-compact="{ raw }">
@@ -273,12 +258,13 @@ const onDeleteAsync = async (item: FaqItem) => {
         AListEditor — lazy-loaded detail (async fetch on edit)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        Rows only have title + status initially. Clicking a row triggers an async fetch
-        (simulated 900 ms) to load the answer. Spinner shows while loading, then the form renders.
+        Rows only have title + status initially. Clicking a row triggers an async fetch (simulated
+        900 ms) to load the answer. Spinner shows while loading, then the form renders.
       </p>
       <AListEditor
         v-model="lazyItems"
         title="FAQ — lazy detail"
+        :factory="createFaqItem"
         :loading-keys="loadingKeys"
         :on-item-save="onInlineItemSave"
         @edit="onLazyEdit"
@@ -335,6 +321,7 @@ const onDeleteAsync = async (item: FaqItem) => {
       <AListEditor
         v-model="twoRowsItems"
         title="FAQ — two-rows layout"
+        :factory="createFaqItem"
         two-rows="always"
         :on-item-save="onInlineItemSave"
       >
@@ -370,14 +357,24 @@ const onDeleteAsync = async (item: FaqItem) => {
         AListEditor — imperative API via template ref
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        Caller calls <code>editorRef.addItem(data, hint)</code> on the component; add button at
-        the bottom triggers it.
+        Caller calls <code>editorRef.addItem()</code> on the exposed handle; the external button
+        below triggers it (built-in add button hidden).
       </p>
+      <div class="d-flex ga-2 mb-2">
+        <VBtn
+          color="primary"
+          variant="flat"
+          @click="onRefAdd"
+        >
+          Add via handle
+        </VBtn>
+      </div>
       <AListEditor
         ref="editorRef"
         v-model="refEditorItems"
         title="FAQ — imperative ref"
-        @add="onRefAdd"
+        :factory="createFaqItem"
+        :show-add-button="false"
       >
         <template #item-compact="{ raw }">
           <span class="faq-title">{{ raw.title }}</span>
@@ -398,9 +395,9 @@ const onDeleteAsync = async (item: FaqItem) => {
         AListEditor — <code>chips</code> layout (flat, no drag)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        Flat inline-flex chip pills. No drag (non-sortable variant). Each chip has a built-in
-        close X — no confirm dialog. Add via an external input above. Chips wrap to the next
-        line when the container is narrow.
+        Flat inline-flex chip pills. No drag (non-sortable variant). Each chip has a built-in close
+        X — no confirm dialog. Add via an external input above. Chips wrap to the next line when the
+        container is narrow.
       </p>
       <div class="d-flex ga-2 mb-2">
         <AFormTextField
@@ -421,6 +418,8 @@ const onDeleteAsync = async (item: FaqItem) => {
       <AListEditor
         v-model="chipItems"
         title="Keywords"
+        :factory="createKeyword"
+        :position="false"
         chips
         :show-add-button="false"
       >
@@ -433,12 +432,14 @@ const onDeleteAsync = async (item: FaqItem) => {
         AListEditor — <code>chips</code> readonly (no close X, display-only)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        Passing <code>readonly</code> or <code>:show-delete-button="false"</code> suppresses
-        the close X on each chip.
+        Passing <code>readonly</code> or <code>:show-delete-button="false"</code> suppresses the
+        close X on each chip.
       </p>
       <AListEditor
         v-model="chipReadonlyItems"
         title="Tags (readonly)"
+        :factory="createKeyword"
+        :position="false"
         chips
         readonly
         :show-add-button="false"
diff --git a/src/playground/nestedSortableListEditorView/NestedSortableListEditorView.vue b/src/playground/nestedSortableListEditorView/NestedSortableListEditorView.vue
index 5aa018ba..834dd3a8 100644
--- a/src/playground/nestedSortableListEditorView/NestedSortableListEditorView.vue
+++ b/src/playground/nestedSortableListEditorView/NestedSortableListEditorView.vue
@@ -34,12 +34,26 @@ const makeTree = (): NestedTree<MenuItem> => ({
       data: { id: 2, position: 2, parent: null, title: 'News', status: 'Active', url: '/news' },
       children: [
         {
-          data: { id: 21, position: 1, parent: 2, title: 'Sport', status: 'Draft', url: '/news/sport' },
+          data: {
+            id: 21,
+            position: 1,
+            parent: 2,
+            title: 'Sport',
+            status: 'Draft',
+            url: '/news/sport',
+          },
           children: [],
           meta: { dirty: false },
         },
         {
-          data: { id: 22, position: 2, parent: 2, title: 'Weather', status: 'Active', url: '/news/weather' },
+          data: {
+            id: 22,
+            position: 2,
+            parent: 2,
+            title: 'Weather',
+            status: 'Active',
+            url: '/news/weather',
+          },
           children: [],
           meta: { dirty: false },
         },
@@ -50,7 +64,14 @@ const makeTree = (): NestedTree<MenuItem> => ({
       data: { id: 3, position: 3, parent: null, title: 'About', status: 'Draft', url: '/about' },
       children: [
         {
-          data: { id: 31, position: 1, parent: 3, title: 'Team', status: 'Active', url: '/about/team' },
+          data: {
+            id: 31,
+            position: 1,
+            parent: 3,
+            title: 'Team',
+            status: 'Active',
+            url: '/about/team',
+          },
           children: [],
           meta: { dirty: false },
         },
@@ -58,7 +79,14 @@ const makeTree = (): NestedTree<MenuItem> => ({
       meta: { dirty: false },
     },
     {
-      data: { id: 4, position: 4, parent: null, title: 'Contact', status: 'Active', url: '/contact' },
+      data: {
+        id: 4,
+        position: 4,
+        parent: null,
+        title: 'Contact',
+        status: 'Active',
+        url: '/contact',
+      },
       children: [],
       meta: { dirty: false },
     },
@@ -74,10 +102,24 @@ const makeDeepTree = (): NestedTree<MenuItem> => ({
       data: { id: 100, position: 1, parent: null, title: 'Docs', status: 'Active', url: '/docs' },
       children: [
         {
-          data: { id: 110, position: 1, parent: 100, title: 'Guides', status: 'Active', url: '/docs/guides' },
+          data: {
+            id: 110,
+            position: 1,
+            parent: 100,
+            title: 'Guides',
+            status: 'Active',
+            url: '/docs/guides',
+          },
           children: [
             {
-              data: { id: 111, position: 1, parent: 110, title: 'Vue', status: 'Active', url: '/docs/guides/vue' },
+              data: {
+                id: 111,
+                position: 1,
+                parent: 110,
+                title: 'Vue',
+                status: 'Active',
+                url: '/docs/guides/vue',
+              },
               children: [
                 {
                   data: {
@@ -132,7 +174,14 @@ const makeDeepTree = (): NestedTree<MenuItem> => ({
               meta: { dirty: false },
             },
             {
-              data: { id: 116, position: 2, parent: 110, title: 'React', status: 'Active', url: '/docs/guides/react' },
+              data: {
+                id: 116,
+                position: 2,
+                parent: 110,
+                title: 'React',
+                status: 'Active',
+                url: '/docs/guides/react',
+              },
               children: [],
               meta: { dirty: false },
             },
@@ -158,7 +207,14 @@ const makeDeepTree = (): NestedTree<MenuItem> => ({
       data: { id: 130, position: 2, parent: null, title: 'Blog', status: 'Active', url: '/blog' },
       children: [
         {
-          data: { id: 131, position: 1, parent: 130, title: '2026', status: 'Draft', url: '/blog/2026' },
+          data: {
+            id: 131,
+            position: 1,
+            parent: 130,
+            title: '2026',
+            status: 'Draft',
+            url: '/blog/2026',
+          },
           children: [],
           meta: { dirty: false },
         },
@@ -166,7 +222,14 @@ const makeDeepTree = (): NestedTree<MenuItem> => ({
       meta: { dirty: false },
     },
     {
-      data: { id: 140, position: 3, parent: null, title: 'Changelog', status: 'Active', url: '/changelog' },
+      data: {
+        id: 140,
+        position: 3,
+        parent: null,
+        title: 'Changelog',
+        status: 'Active',
+        url: '/changelog',
+      },
       children: [],
       meta: { dirty: false },
     },
@@ -185,10 +248,7 @@ const refApiTree = ref<NestedTree<MenuItem>>(makeTree())
 // Imperative ref to the first demo editor — lets @add handlers actually
 // insert the row (using the emit's hint) instead of just logging.
 interface NestedEditorApiLocal {
-  addItem: (
-    data: MenuItem,
-    hint?: NestedPositionHint,
-  ) => unknown
+  addItem: (data: MenuItem, hint?: NestedPositionHint) => unknown
   addAfterId: (targetId: number | null, data: MenuItem, childrenAllowed: boolean) => void
   addChildToId: (targetId: number, data: MenuItem, childrenAllowed: boolean) => void
   removeById: (id: number) => void
@@ -264,7 +324,11 @@ const onRefAddChildToHome = () => {
   const api = refApiRef.value
   if (!api) return
   const id = nextId++
-  api.addChildToId(1, { id, position: 0, parent: 1, title: `Home child #${id}`, status: 'Draft' }, true)
+  api.addChildToId(
+    1,
+    { id, position: 0, parent: 1, title: `Home child #${id}`, status: 'Draft' },
+    true,
+  )
   log(`addChildToId(Home, ${id})`)
 }
 
@@ -303,12 +367,11 @@ const totalCount = computed(() => {
         ANestedSortableListEditor — site menu (drag-and-drop + arrows + indent/outdent)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        <strong>{{ totalCount }}</strong> items across 2 levels.
-        On desktop: drag handle appears per row in reorder mode; drag between groups to nest/un-nest
-        (respects <code>maxDepth</code>).
+        <strong>{{ totalCount }}</strong> items across 2 levels. On desktop: drag handle appears per
+        row in reorder mode; drag between groups to nest/un-nest (respects <code>maxDepth</code>).
         Everywhere: arrows move up/down within the current sibling group; the kebab menu has
-        move-to-top / move-to-bottom / indent / outdent.
-        Single orange "unsaved" state covers both moved + edited rows.
+        move-to-top / move-to-bottom / indent / outdent. Single orange "unsaved" state covers both
+        moved + edited rows.
       </p>
       <ANestedSortableListEditor
         ref="basicRef"
@@ -453,9 +516,9 @@ const totalCount = computed(() => {
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
         These buttons call <code>addAfterId</code> / <code>addChildToId</code> /
-        <code>removeById</code> / <code>updateData</code> on the component ref — same method
-        names and signatures as the legacy component. After each call the internal dirty
-        baseline is re-captured automatically.
+        <code>removeById</code> / <code>updateData</code> on the component ref — same method names
+        and signatures as the legacy component. After each call the internal dirty baseline is
+        re-captured automatically.
       </p>
       <div class="d-flex ga-2 mb-2 flex-wrap">
         <VBtn
@@ -524,5 +587,4 @@ const totalCount = computed(() => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 </style>
diff --git a/src/playground/quizManageView/QuizManageQuestionAnswers.vue b/src/playground/quizManageView/QuizManageQuestionAnswers.vue
index 85981f93..ed2309c9 100644
--- a/src/playground/quizManageView/QuizManageQuestionAnswers.vue
+++ b/src/playground/quizManageView/QuizManageQuestionAnswers.vue
@@ -1,20 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue'
-import useVuelidate from '@vuelidate/core'
-import { helpers } from '@vuelidate/validators'
 import ACard from '@/components/ACard.vue'
 import ARow from '@/components/ARow.vue'
 import AFormTextarea from '@/components/form/AFormTextarea.vue'
 import AFormTextField from '@/components/form/AFormTextField.vue'
 import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
-import type {
-  ListEditorKey,
-  ListViewItem,
-} from '@/labs/listEditor/types/listEditorTypes'
-import { useValidateRequired } from '@/validators/vuelidate/common/useValidateRequired'
-import { useValidateMinLength } from '@/validators/vuelidate/common/useValidateMinLength'
 import {
-  QuizValidationSymbol,
   type QuizQuestion,
   type QuizQuestionAnswer,
   type QuizAnswerValueTypeType,
@@ -40,60 +31,19 @@ const selectedValue = computed({
   },
 })
 const mode = defineModel<ReorderMode>('mode', { default: 'view' })
-const unsavedKeys = defineModel<Set<ListEditorKey>>('unsavedKeys', {
-  default: () => new Set<ListEditorKey>(),
-})
 const valueType = computed(() => props.answerValueType)
 watch(valueType, () => {
   selectCorrectAnswer(-1)
 })
 
-const required = useValidateRequired()
-const minLength = useValidateMinLength()
-const answerRules = {
-  question: {
-    answers: {
-      $each: helpers.forEach({
-        title: {
-          required,
-          minLength: minLength(1),
-        },
-      }),
-    },
-  },
-}
-const v$ = useVuelidate(
-  answerRules,
-  { question: selectedValue },
-  { $scope: QuizValidationSymbol },
-)
-
-const getAnswerValidationState = (
-  _: QuizQuestionAnswer,
-  __: ListEditorKey,
-  index: number,
-) => {
-  // helpers.forEach exposes per-row errors as an OBJECT keyed by property
-  // name → array of error entries. A row is invalid if any property has a
-  // non-empty error array. Plain `.length` is wrong (it's not an array).
-  const errors =
-    v$.value.question.answers.$each?.$response?.$errors?.[index]
-  if (!errors || typeof errors !== 'object') return null
-  const hasErrors = Object.values(errors).some(
-    (propErrors) => Array.isArray(propErrors) && propErrors.length > 0,
-  )
-  return hasErrors ? 'invalid' : null
-}
+// true = VALID. An answer needs a non-empty title.
+const validateAnswer = (a: QuizQuestionAnswer): boolean => !!a.title && a.title.trim().length > 0
 
-const onAddAnswer = () => {
+const createAnswer = (): QuizQuestionAnswer => {
   const newAnswer = createQuizQuestionAnswer()
   newAnswer.question = selectedValue.value.id
-  newAnswer.position =
-    (selectedValue.value.answers.at(-1)?.position ?? 0) + 1
-  selectedValue.value.answers.push(newAnswer)
-}
-const onDeleteAnswer = (vi: ListViewItem<QuizQuestionAnswer>) => {
-  selectedValue.value.answers.splice(vi.index, 1)
+  newAnswer.position = (selectedValue.value.answers.at(-1)?.position ?? 0) + 1
+  return newAnswer
 }
 
 const selectCorrectAnswer = (answerIndex: number) => {
@@ -109,8 +59,7 @@ const selectCorrectAnswer = (answerIndex: number) => {
 
 onMounted(() => {
   if (selectedValue.value.answers.length === 0) {
-    onAddAnswer()
-    onAddAnswer()
+    selectedValue.value.answers.push(createAnswer(), createAnswer())
   }
 })
 </script>
@@ -119,26 +68,16 @@ onMounted(() => {
   <ASortableListEditor
     v-model="selectedValue.answers"
     v-model:mode="mode"
-    v-model:unsaved-keys="unsavedKeys"
-    :get-validation-state="getAnswerValidationState"
+    :factory="createAnswer"
+    :validate="validateAnswer"
     title="Answers"
     add-label="Add answer"
     embedded
-    @add="onAddAnswer"
-    @deleted="onDeleteAnswer"
   >
     <template #item-compact="{ raw }: { raw: QuizQuestionAnswer }">
       <span>{{ raw.title || '(empty answer)' }}</span>
     </template>
-    <template
-      #item="{
-        raw,
-        index,
-      }: {
-        raw: QuizQuestionAnswer
-        index: number
-      }"
-    >
+    <template #item="{ raw, index }: { raw: QuizQuestionAnswer; index: number }">
       <ACard class="pt-5">
         <VRow>
           <VCol cols="11">
diff --git a/src/playground/quizManageView/QuizManageQuestions.vue b/src/playground/quizManageView/QuizManageQuestions.vue
index f68e6256..2d6afd09 100644
--- a/src/playground/quizManageView/QuizManageQuestions.vue
+++ b/src/playground/quizManageView/QuizManageQuestions.vue
@@ -1,20 +1,14 @@
 <script setup lang="ts">
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted } from 'vue'
 import ACard from '@/components/ACard.vue'
 import ARow from '@/components/ARow.vue'
 import AFormTextarea from '@/components/form/AFormTextarea.vue'
 import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
-import type {
-  ListEditorKey,
-  ListViewItem,
-} from '@/labs/listEditor/types/listEditorTypes'
-import { useNestedUnsavedKeys } from '@/labs/listEditor/composables/useNestedUnsavedKeys'
 import QuizManageQuestionAnswers from '@/playground/quizManageView/QuizManageQuestionAnswers.vue'
 import {
   type Quiz,
   type QuizQuestion,
   createQuizQuestion,
-  useQuizValidation,
 } from '@/playground/quizManageView/quizMock'
 
 type ReorderMode = 'view' | 'reorder'
@@ -34,53 +28,22 @@ const selectedValue = computed({
   },
 })
 const mode = defineModel<ReorderMode>('mode', { default: 'view' })
-const unsavedKeys = defineModel<Set<ListEditorKey>>('unsavedKeys', {
-  default: () => new Set<ListEditorKey>(),
-})
-const answersUnsavedKeys = defineModel<Set<ListEditorKey>>('answersUnsavedKeys', {
-  default: () => new Set<ListEditorKey>(),
-})
 
-const answerKeys = useNestedUnsavedKeys()
-watch(answerKeys.merged, (now) => {
-  answersUnsavedKeys.value = now
-})
+// true = VALID. A question needs a title, at least 2 answers, and every
+// answer titled. (Field-level vuelidate messages stay inside the row form.)
+const validateQuestion = (q: QuizQuestion): boolean =>
+  !!q.title && q.answers.length >= 2 && q.answers.every((a) => !!a.title)
 
-const { v$ } = useQuizValidation(selectedValue)
-
-const getQuestionValidationState = (
-  q: QuizQuestion,
-  __: ListEditorKey,
-  index: number,
-) => {
-  const errors =
-    v$.value.quiz.questions.$each?.$response?.$errors?.[index]
-  if (errors && typeof errors === 'object') {
-    const hasOwnErrors = Object.values(errors).some(
-      (propErrors) => Array.isArray(propErrors) && propErrors.length > 0,
-    )
-    if (hasOwnErrors) return 'invalid'
-  }
-  // Roll up: question is invalid if any of its answers is empty.
-  if (q.answers.length < 2) return 'invalid'
-  if (q.answers.some((a) => !a.title)) return 'invalid'
-  return null
-}
-
-const onAddQuestion = () => {
+const createQuestion = (): QuizQuestion => {
   const newQuestion = createQuizQuestion()
   newQuestion.quiz = selectedValue.value.id
-  newQuestion.position =
-    (selectedValue.value.questions.at(-1)?.position ?? 0) + 1
-  selectedValue.value.questions.push(newQuestion)
-}
-const onDeleteQuestion = (vi: ListViewItem<QuizQuestion>) => {
-  selectedValue.value.questions.splice(vi.index, 1)
+  newQuestion.position = (selectedValue.value.questions.at(-1)?.position ?? 0) + 1
+  return newQuestion
 }
+
 onMounted(() => {
   if (selectedValue.value.questions.length === 0) {
-    onAddQuestion()
-    onAddQuestion()
+    selectedValue.value.questions.push(createQuestion(), createQuestion())
   }
 })
 </script>
@@ -89,13 +52,11 @@ onMounted(() => {
   <ASortableListEditor
     v-model="selectedValue.questions"
     v-model:mode="mode"
-    v-model:unsaved-keys="unsavedKeys"
-    :get-validation-state="getQuestionValidationState"
+    :factory="createQuestion"
+    :validate="validateQuestion"
     title="Questions"
     add-label="Add question"
     allow-edit-in-reorder
-    @add="onAddQuestion"
-    @deleted="onDeleteQuestion"
   >
     <template #item-compact="{ raw }: { raw: QuizQuestion }">
       <span>{{ raw.title || '(empty question)' }}</span>
@@ -135,20 +96,8 @@ onMounted(() => {
         <QuizManageQuestionAnswers
           :model-value="raw"
           :mode="mode"
-          :unsaved-keys="
-            answerKeys.getForParent(
-              (raw.id ?? raw.position) as ListEditorKey,
-            )
-          "
           :answer-value-type="selectedValue.attributes.answerValueType"
           @update:model-value="actions.update"
-          @update:unsaved-keys="
-            (s: Set<ListEditorKey>) =>
-              answerKeys.setForParent(
-                (raw.id ?? raw.position) as ListEditorKey,
-                s,
-              )
-          "
         />
         <AFormTextarea
           v-model="raw.explanation"
@@ -170,20 +119,8 @@ onMounted(() => {
         <QuizManageQuestionAnswers
           :model-value="raw"
           :mode="mode"
-          :unsaved-keys="
-            answerKeys.getForParent(
-              (raw.id ?? raw.position) as ListEditorKey,
-            )
-          "
           :answer-value-type="selectedValue.attributes.answerValueType"
           @update:model-value="actions.update"
-          @update:unsaved-keys="
-            (s: Set<ListEditorKey>) =>
-              answerKeys.setForParent(
-                (raw.id ?? raw.position) as ListEditorKey,
-                s,
-              )
-          "
         />
       </div>
     </template>
diff --git a/src/playground/quizManageView/QuizManageView.vue b/src/playground/quizManageView/QuizManageView.vue
index de5b5e40..7eb5d043 100644
--- a/src/playground/quizManageView/QuizManageView.vue
+++ b/src/playground/quizManageView/QuizManageView.vue
@@ -2,17 +2,11 @@
 import { ref } from 'vue'
 import ActionbarWrapper from '@/playground/system/ActionbarWrapper.vue'
 import AFormTextarea from '@/components/form/AFormTextarea.vue'
-import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
 import QuizManageQuestions from '@/playground/quizManageView/QuizManageQuestions.vue'
-import {
-  QuizAnswerValueType,
-  createQuiz,
-} from '@/playground/quizManageView/quizMock'
+import { QuizAnswerValueType, createQuiz } from '@/playground/quizManageView/quizMock'
 
 const quiz = ref(createQuiz())
 
-const questionsUnsavedKeys = ref(new Set<ListEditorKey>())
-const answersUnsavedKeys = ref(new Set<ListEditorKey>())
 const sharedMode = ref<'view' | 'reorder'>('view')
 </script>
 
@@ -26,17 +20,16 @@ const sharedMode = ref<'view' | 'reorder'>('view')
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
         Mirrors the admin-cms quiz edit page. The outer editor lists
-        <strong>questions</strong>; clicking a question opens its inline form
-        which renders an inner editor of that question's <strong>answers</strong>.
-        A <strong>single Reorder button</strong> on the outer editor drives
-        both — drag questions to reorder questions, open a question and drag
-        its answers to reorder answers, and Apply at the top commits everything.
+        <strong>questions</strong>; clicking a question opens its inline form which renders an inner
+        editor of that question's <strong>answers</strong>. A
+        <strong>single Reorder button</strong> on the outer editor drives both — drag questions to
+        reorder questions, open a question and drag its answers to reorder answers, and Apply at the
+        top commits everything.
       </p>
       <p class="text-body-medium text-medium-emphasis mb-6">
-        <strong>Try:</strong> click the Reorder button → open a question while
-        in reorder mode → drag answers; Apply commits, Cancel restores the
-        original order of both questions and answers. Clear an answer's title
-        to see the red rail propagate up to the question row.
+        <strong>Try:</strong> click the Reorder button → open a question while in reorder mode →
+        drag answers; Apply commits, Cancel restores the original order of both questions and
+        answers. Clear an answer's title to see the red rail propagate up to the question row.
       </p>
 
       <VRow class="mb-6">
@@ -69,14 +62,9 @@ const sharedMode = ref<'view' | 'reorder'>('view')
       <QuizManageQuestions
         v-model="quiz"
         v-model:mode="sharedMode"
-        v-model:unsaved-keys="questionsUnsavedKeys"
-        v-model:answers-unsaved-keys="answersUnsavedKeys"
       />
 
       <div class="text-body-small text-medium-emphasis mt-4">
-        questions unsaved: {{ questionsUnsavedKeys.size }} —
-        answers unsaved (merged across all questions):
-        {{ answersUnsavedKeys.size }} —
         mode: {{ sharedMode }}
       </div>
     </VCardText>
diff --git a/src/playground/quizManageView/quizMock.ts b/src/playground/quizManageView/quizMock.ts
index ee1a7be6..4655cc1e 100644
--- a/src/playground/quizManageView/quizMock.ts
+++ b/src/playground/quizManageView/quizMock.ts
@@ -5,16 +5,13 @@ import { useValidateRequired } from '@/validators/vuelidate/common/useValidateRe
 import { useValidateMinLength } from '@/validators/vuelidate/common/useValidateMinLength'
 import { useValidateMaxLength } from '@/validators/vuelidate/common/useValidateMaxLength'
 
-export const QuizValidationSymbol = Symbol.for(
-  'playground:quiz-validation-scope',
-)
+export const QuizValidationSymbol = Symbol.for('playground:quiz-validation-scope')
 
 export const QuizAnswerValueType = {
   Bool: 'bool',
   Points: 'points',
 } as const
-export type QuizAnswerValueTypeType =
-  (typeof QuizAnswerValueType)[keyof typeof QuizAnswerValueType]
+export type QuizAnswerValueTypeType = (typeof QuizAnswerValueType)[keyof typeof QuizAnswerValueType]
 
 export interface QuizAttributes {
   answerValueType: QuizAnswerValueTypeType
diff --git a/src/playground/sortableListEditorView/SortableListEditorView.vue b/src/playground/sortableListEditorView/SortableListEditorView.vue
index a7e4e9e2..f112a4cb 100644
--- a/src/playground/sortableListEditorView/SortableListEditorView.vue
+++ b/src/playground/sortableListEditorView/SortableListEditorView.vue
@@ -3,7 +3,7 @@ import ActionbarWrapper from '@/playground/system/ActionbarWrapper.vue'
 import { ref } from 'vue'
 import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
 import AFormTextField from '@/components/form/AFormTextField.vue'
-import type { ListViewItem, PositionHint } from '@/labs/listEditor/types/listEditorTypes'
+import type { ListViewItem } from '@/labs/listEditor/types/listEditorTypes'
 
 interface FaqItem extends Record<string, any> {
   id: number
@@ -65,6 +65,14 @@ const errorItems = ref<FaqItem[]>(makeItems())
 const externalToolbarItems = ref<FaqItem[]>(makeItems())
 const externalMode = ref<'view' | 'reorder'>('view')
 
+const createFaqItem = (): FaqItem => ({
+  id: nextId++,
+  position: 0,
+  title: `New #${nextId}`,
+  status: 'Draft',
+})
+const validateFaqItem = (item: FaqItem): boolean => !!item.title && item.title.length <= 255
+
 interface Tag extends Record<string, any> {
   id: number
   position: number
@@ -78,6 +86,11 @@ const chipItems = ref<Tag[]>([
   { id: 4, position: 40, label: 'external-contributor' },
 ])
 const chipInput = ref<string>('')
+const createTag = (): Tag => ({
+  id: nextTagId++,
+  position: chipItems.value.length * 10,
+  label: chipInput.value.trim() || `tag-${nextTagId}`,
+})
 const addChip = () => {
   const label = chipInput.value.trim()
   if (!label) return
@@ -90,24 +103,6 @@ const addChip = () => {
 }
 
 const addAfterItems = ref<FaqItem[]>(makeItems())
-const onAddAfter = (hint: PositionHint | undefined) => {
-  const fresh: FaqItem = {
-    id: nextId++,
-    position: 0,
-    title: `New #${nextId}`,
-    status: 'Draft',
-  }
-  const anchor = hint?.afterId
-    ? addAfterItems.value.findIndex((i) => i.id === hint.afterId)
-    : -1
-  if (anchor >= 0) {
-    addAfterItems.value.splice(anchor + 1, 0, fresh)
-    log(`inserted ${fresh.id} after ${hint?.afterId}`)
-  } else {
-    addAfterItems.value.push(fresh)
-    log(`appended ${fresh.id}`)
-  }
-}
 
 const lastLog = ref<string>('')
 const log = (msg: string) => {
@@ -138,13 +133,6 @@ const onDeleteAsync = async (item: FaqItem) => {
   log(`deleted ${item.id}`)
 }
 
-const onAdd = () => {
-  basicItems.value = [
-    ...basicItems.value,
-    { id: nextId++, position: 0, title: `New #${nextId}`, status: 'Draft' },
-  ]
-}
-
 const onEdit = (vi: ListViewItem<FaqItem>) => log(`edit ${vi.key}`)
 const onDelete = (vi: ListViewItem<FaqItem>) => log(`delete ${vi.key}`)
 </script>
@@ -165,10 +153,10 @@ const onDelete = (vi: ListViewItem<FaqItem>) => log(`delete ${vi.key}`)
       <ASortableListEditor
         v-model="basicItems"
         title="Časté otázky (FAQ)"
-        update-position
-        :position-multiplier="10"
+        :factory="createFaqItem"
+        :position="{ field: 'position', multiplier: 10 }"
+        :validate="validateFaqItem"
         :on-delete="onDeleteAsync"
-        @add="onAdd"
         @edit="onEdit"
         @deleted="onDelete"
         @reorder-applied="onReorderApplied"
@@ -210,8 +198,8 @@ const onDelete = (vi: ListViewItem<FaqItem>) => log(`delete ${vi.key}`)
       <ASortableListEditor
         v-model="callbackItems"
         title="Steps"
-        update-position
-        :position-multiplier="10"
+        :factory="createFaqItem"
+        :position="{ field: 'position', multiplier: 10 }"
         :on-reorder-apply="onReorderApplyCallback"
       >
         <template #item-compact="{ raw }">
@@ -233,12 +221,13 @@ const onDelete = (vi: ListViewItem<FaqItem>) => log(`delete ${vi.key}`)
         ASortableListEditor — failing onReorderApply (stays in reorder mode, shows error)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        Apply throws; the component keeps the reorder mode open with the error in the toolbar.
-        User can retry or Cancel.
+        Apply throws; the component keeps the reorder mode open with the error in the toolbar. User
+        can retry or Cancel.
       </p>
       <ASortableListEditor
         v-model="errorItems"
         title="Fails on save"
+        :factory="createFaqItem"
         :on-reorder-apply="failingApply"
       >
         <template #item-compact="{ raw }">
@@ -285,6 +274,7 @@ const onDelete = (vi: ListViewItem<FaqItem>) => log(`delete ${vi.key}`)
         v-model="externalToolbarItems"
         v-model:mode="externalMode"
         title="External mode"
+        :factory="createFaqItem"
         :show-reorder-toggle="false"
       >
         <template #item-compact="{ raw }">
@@ -306,9 +296,8 @@ const onDelete = (vi: ListViewItem<FaqItem>) => log(`delete ${vi.key}`)
         ASortableListEditor — <code>chips</code> layout (tags / authors)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
-        Flat inline-flex pills. Drag reorders on desktop (always on, no mode toggle).
-        Each chip has a built-in close X — no confirm dialog. Use an external input
-        above the list for adding.
+        Flat inline-flex pills. Drag reorders on desktop (always on, no mode toggle). Each chip has
+        a built-in close X — no confirm dialog. Use an external input above the list for adding.
       </p>
       <div class="d-flex ga-2 mb-2">
         <AFormTextField
@@ -329,6 +318,7 @@ const onDelete = (vi: ListViewItem<FaqItem>) => log(`delete ${vi.key}`)
       <ASortableListEditor
         v-model="chipItems"
         title="Authors"
+        :factory="createTag"
         chips
         :show-add-button="false"
       >
@@ -342,15 +332,15 @@ const onDelete = (vi: ListViewItem<FaqItem>) => log(`delete ${vi.key}`)
       </h2>
       <p class="text-body-medium text-medium-emphasis mb-2">
         Enter reorder mode (top-right <code>Reorder</code> button), then open any row's
-        <code>⋮</code> menu — alongside move-to-top / move-to-bottom / delete, there's a new
-        "Add after this" entry. Parent receives <code>@add</code> with <code>{ afterId }</code>
+        <code>⋮</code> menu — alongside move-to-top / move-to-bottom / delete, there's a new "Add
+        after this" entry. Parent receives <code>@add</code> with <code>{ afterId }</code>
         and splices a new row directly below the anchor.
       </p>
       <ASortableListEditor
         v-model="addAfterItems"
         title="FAQ — add-after menu"
+        :factory="createFaqItem"
         show-add-after-action
-        @add="onAddAfter"
       >
         <template #item-compact="{ raw }">
           <span class="faq-title">{{ raw.title }}</span>
diff --git a/src/router/playground.ts b/src/router/playground.ts
index 3aad81d9..684f9047 100644
--- a/src/router/playground.ts
+++ b/src/router/playground.ts
@@ -29,6 +29,7 @@ import {
 import AlertView from '@/playground/alertView/AlertView.vue'
 import SubjectSelectView from '@/playground/subjectSelectView/SubjectSelectView.vue'
 import ImageMultipleView from '@/playground/imageMultipleView/ImageMultipleView.vue'
+import CardGridReorderView from '@/playground/cardGridReorderView/CardGridReorderView.vue'
 import CollabDetailView from '@/playground/collabView/CollabDetailView.vue'
 import CollabEditView from '@/playground/collabView/CollabEditView.vue'
 import { useCollabHelpers } from '@/components/collab/composables/collabHelpers'
@@ -127,6 +128,11 @@ const router = createRouter({
       name: 'view-image-multiple',
       component: ImageMultipleView,
     },
+    {
+      path: '/view/card-grid-reorder',
+      name: 'view-card-grid-reorder',
+      component: CardGridReorderView,
+    },
     {
       path: '/view/image-public-input',
       name: 'view-image-public-input',
diff --git a/src/services/api/apiFetchByIds.ts b/src/services/api/apiFetchByIds.ts
index c576e95c..775e58a0 100644
--- a/src/services/api/apiFetchByIds.ts
+++ b/src/services/api/apiFetchByIds.ts
@@ -1,11 +1,16 @@
-import { AnzuApiResponseCodeError } from '@/model/error/AnzuApiResponseCodeError'
+import {
+  AnzuApiResponseCodeError,
+  isAnzuApiResponseCodeError,
+} from '@/model/error/AnzuApiResponseCodeError'
 import {
   AnzuApiValidationError,
   axiosErrorResponseHasValidationData,
 } from '@/model/error/AnzuApiValidationError'
 import { replaceUrlParameters, type UrlParams } from '@/services/api/apiHelper'
 import { isValidHTTPStatus } from '@/utils/response'
-import type { AxiosInstance, AxiosRequestConfig } from 'axios'
+import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios'
+import { AnzuApiTimeoutError, axiosErrorIsTimeout } from '@/model/error/AnzuApiTimeoutError'
+import { AnzuApiAxiosError } from '@/model/error/AnzuApiAxiosError'
 import { useApiQueryBuilder } from '@/services/api/queryBuilder'
 import {
   AnzuApiForbiddenError,
@@ -68,6 +73,10 @@ export const apiFetchByIds = <T, R = T>(
         return reject(new AnzuFatalError())
       })
       .catch((err) => {
+        // Rejected above, would otherwise be swallowed by the AnzuFatalError fallback.
+        if (isAnzuApiResponseCodeError(err)) {
+          return reject(err)
+        }
         if (axiosErrorResponseIsForbidden(err)) {
           return reject(new AnzuApiForbiddenError(err, err.config?.url))
         }
@@ -80,7 +89,12 @@ export const apiFetchByIds = <T, R = T>(
         if (axiosErrorResponseHasForbiddenOperationData(err)) {
           return reject(new AnzuApiForbiddenOperationError(err, err))
         }
-        // todo catch another axios errors, for example timeout
+        if (axiosErrorIsTimeout(err)) {
+          return reject(new AnzuApiTimeoutError(err))
+        }
+        if (axios.isAxiosError(err)) {
+          return reject(new AnzuApiAxiosError(err))
+        }
         return reject(new AnzuFatalError(err))
       })
   })
diff --git a/src/test/components/ACachedChip.test.ts b/src/test/components/ACachedChip.test.ts
new file mode 100644
index 00000000..7e8b2bbf
--- /dev/null
+++ b/src/test/components/ACachedChip.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick, reactive } from 'vue'
+import ACachedChip from '@/components/ACachedChip.vue'
+
+// ACachedChip calls useRouter() on setup — stub the router so it mounts without a
+// real router instance.
+vi.mock('vue-router', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useRoute: () => ({}),
+}))
+
+interface CachedEntry {
+  name?: string
+  _loaded?: boolean
+}
+
+// reactive so `getCachedFn(id)` reads are tracked by the component's `cached`
+// computed — mutating an entry re-resolves the chip without remounting.
+const mountChip = (cache: Record<number, CachedEntry>, props: Record<string, unknown> = {}) =>
+  mount(ACachedChip, {
+    props: {
+      id: 7,
+      displayTextPath: 'name',
+      route: 'x',
+      textOnly: true,
+      getCachedFn: (id: number) => cache[id],
+      ...props,
+    },
+  })
+
+describe('ACachedChip', () => {
+  // U-13: a cached id renders its resolved name, not the bare id.
+  it('renders the resolved name, not the raw id, when the id is in the cache', () => {
+    const cache = reactive<Record<number, CachedEntry>>({
+      7: { name: 'Resolved Seven', _loaded: true },
+    })
+    const wrapper = mountChip(cache)
+    expect(wrapper.text()).toContain('Resolved Seven')
+    expect(wrapper.text()).not.toContain('7')
+  })
+
+  // U-13: the documented escape hatch — fallbackIdText surfaces the raw id when the
+  // entry is unresolved.
+  it('renders the id only when fallbackIdText is set', () => {
+    const cache = reactive<Record<number, CachedEntry>>({})
+    const wrapper = mountChip(cache, { fallbackIdText: true })
+    expect(wrapper.text()).toContain('7')
+  })
+
+  // U-14: spinner shows while unresolved, then clears once the id resolves.
+  it('shows a spinner while unresolved then clears it once the id resolves', async () => {
+    const cache = reactive<Record<number, CachedEntry>>({})
+    const wrapper = mountChip(cache)
+    expect(wrapper.find('.v-progress-circular').exists()).toBe(true)
+
+    cache[7] = { name: 'Seven', _loaded: true }
+    await nextTick()
+
+    expect(wrapper.find('.v-progress-circular').exists()).toBe(false)
+    expect(wrapper.text()).toContain('Seven')
+  })
+
+  // U-14: an entry that is present but still loading (`_loaded: false`) does NOT
+  // count as resolved — the spinner persists.
+  it('keeps spinning while the cache entry is _loaded:false', async () => {
+    const cache = reactive<Record<number, CachedEntry>>({ 7: { _loaded: false } })
+    const wrapper = mountChip(cache)
+    await nextTick()
+    expect(wrapper.find('.v-progress-circular').exists()).toBe(true)
+  })
+})
diff --git a/src/test/components/ADatetimePicker.test.ts b/src/test/components/ADatetimePicker.test.ts
new file mode 100644
index 00000000..4b574a59
--- /dev/null
+++ b/src/test/components/ADatetimePicker.test.ts
@@ -0,0 +1,308 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, ref } from 'vue'
+import dayjs from 'dayjs'
+import ADatetimePicker from '@/components/datetime/ADatetimePicker.vue'
+import type { DatetimeUTC, DatetimeUTCNullable } from '@/types/common'
+
+/**
+ * The "first click" cases cover a Vuetify 4.1 regression: the calendar moves focus onto the clicked
+ * day before emitting, which blurs the text field and used to re-apply its stale value over the date
+ * just picked. They only hold because vitest runs these in a real browser.
+ */
+
+// Weekday headers carry the __day class too, and adjacent-month days belong to another month.
+const DAY_BTN =
+  '.v-date-picker-month__day:not(.v-date-picker-month__weekday):not(.v-date-picker-month__day--adjacent) .v-date-picker-month__day-btn'
+
+// 08:17 UTC — far enough from midnight to stay in February in any test TZ.
+const FEBRUARY_2023 = '2023-02-08T08:17:29.000000Z'
+const UTC_SHAPE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.000000Z$/
+
+interface PickerEvents {
+  blur: number
+  focus: number
+  open: number
+  close: number
+  afterClear: number
+}
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+  document.querySelectorAll('.v-overlay-container').forEach((n) => (n.innerHTML = ''))
+})
+
+function mountPicker(initial: DatetimeUTCNullable = null, props: Record<string, unknown> = {}) {
+  const model = ref<DatetimeUTCNullable>(initial)
+  const events: PickerEvents = { blur: 0, focus: 0, open: 0, close: 0, afterClear: 0 }
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(ADatetimePicker, {
+          modelValue: model.value,
+          'onUpdate:modelValue': (value: DatetimeUTC | null | undefined) => {
+            model.value = value ?? null
+          },
+          onBlur: () => (events.blur += 1),
+          onFocus: () => (events.focus += 1),
+          onOnOpen: () => (events.open += 1),
+          onOnClose: () => (events.close += 1),
+          onAfterClear: () => (events.afterClear += 1),
+          ...props,
+        })
+    },
+  })
+  mounted = mount(Host, { attachTo: document.body })
+  return { wrapper: mounted, model, events }
+}
+
+const textField = () => document.querySelector('.a-datetime-picker input') as HTMLInputElement
+
+const calendarIcon = () =>
+  document.querySelector<HTMLElement>('.a-datetime-picker__calendar-icon') ?? null
+
+const dayButton = (day: number) =>
+  [...document.querySelectorAll(DAY_BTN)].find((el) => el.textContent?.trim() === String(day)) as
+    | HTMLElement
+    | undefined
+
+/** [0] is "now", [1] is "confirm". */
+const bottomButton = (index: number) =>
+  document.querySelectorAll<HTMLElement>('.a-datetime-picker__bottom-button')[index]
+
+const isCalendarOpen = () => document.querySelectorAll('.a-datetime-picker-calendar').length > 0
+
+const nowShown = () => dayjs().format('DD.MM.YYYY HH:mm')
+
+/** The minute can roll between acting and asserting. */
+const nowWindow = (before: string) => [before, nowShown()]
+
+/** From the icon inside the field, so the field holds focus — that is what the regression needs. */
+async function openCalendar() {
+  textField().focus()
+  calendarIcon()!.click()
+  await flushPromises()
+}
+
+async function typeIntoField(value: string) {
+  const input = textField()
+  input.focus()
+  input.value = value
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+  await flushPromises()
+  input.blur()
+  await flushPromises()
+}
+
+async function setTimeInput(label: 'Hour' | 'Minute', value: string) {
+  const input = document.querySelector(`input[aria-label="${label}"]`) as HTMLInputElement
+  input.focus()
+  input.value = value
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+  await flushPromises()
+}
+
+describe('ADatetimePicker', () => {
+  describe('value in, value out', () => {
+    it('shows the model value in local time', () => {
+      mountPicker(FEBRUARY_2023)
+
+      expect(textField().value).toBe(dayjs(FEBRUARY_2023).format('DD.MM.YYYY HH:mm'))
+    })
+
+    it('starts empty when the model is null', () => {
+      mountPicker(null)
+
+      expect(textField().value).toBe('')
+    })
+
+    it('emits the value back as a UTC string', async () => {
+      const { model } = mountPicker(null)
+
+      await typeIntoField('05.05.2025 10:00')
+
+      expect(model.value).toMatch(UTC_SHAPE)
+      expect(dayjs(model.value).format('DD.MM.YYYY HH:mm')).toBe('05.05.2025 10:00')
+    })
+  })
+
+  describe('calendar', () => {
+    it('applies the first click on a day when opened with an empty value', async () => {
+      const { model } = mountPicker(null)
+      await openCalendar()
+
+      // Opening an empty picker preselects now, so pick another day of the same month.
+      const now = dayjs()
+      const target = now.date() === 1 ? now.date(2) : now.date(1)
+
+      dayButton(target.date())!.click()
+      await flushPromises()
+
+      expect(textField().value).toMatch(
+        new RegExp(`^${target.format('DD\\.MM\\.YYYY')} \\d{2}:\\d{2}$`),
+      )
+      expect(dayjs(model.value).format('DD.MM.YYYY')).toBe(target.format('DD.MM.YYYY'))
+    })
+
+    it('applies the first click on a day when the field already holds a value', async () => {
+      const { model } = mountPicker(FEBRUARY_2023)
+      await openCalendar()
+
+      dayButton(18)!.click()
+      await flushPromises()
+
+      expect(textField().value).toMatch(/^18\.02\.2023 \d{2}:\d{2}$/)
+      expect(dayjs(model.value).format('DD.MM.YYYY')).toBe('18.02.2023')
+    })
+
+    it('keeps selecting further days while the calendar stays open', async () => {
+      mountPicker(FEBRUARY_2023)
+      await openCalendar()
+
+      dayButton(18)!.click()
+      await flushPromises()
+      dayButton(21)!.click()
+      await flushPromises()
+
+      expect(textField().value).toMatch(/^21\.02\.2023 \d{2}:\d{2}$/)
+    })
+
+    it('keeps the time when only the day changes', async () => {
+      mountPicker(FEBRUARY_2023)
+      const time = textField().value.slice(-5)
+      await openCalendar()
+
+      dayButton(18)!.click()
+      await flushPromises()
+
+      expect(textField().value).toBe(`18.02.2023 ${time}`)
+    })
+
+    it('prefills the current datetime when opened on an empty field', async () => {
+      const { model } = mountPicker(null)
+
+      const before = nowShown()
+      await openCalendar()
+
+      expect(nowWindow(before)).toContain(textField().value)
+      expect(model.value).toMatch(UTC_SHAPE)
+    })
+
+    it('sets the current datetime from the "now" button', async () => {
+      mountPicker(FEBRUARY_2023)
+      await openCalendar()
+
+      const before = nowShown()
+      bottomButton(0).click()
+      await flushPromises()
+
+      expect(nowWindow(before)).toContain(textField().value)
+    })
+
+    it('closes on the confirm button', async () => {
+      const { events } = mountPicker(FEBRUARY_2023)
+      await openCalendar()
+      expect(isCalendarOpen()).toBe(true)
+      expect(events.open).toBe(1)
+
+      bottomButton(1).click()
+      await flushPromises()
+
+      expect(isCalendarOpen()).toBe(false)
+      expect(events.close).toBeGreaterThan(0)
+    })
+
+    it('offers no calendar when disabled', () => {
+      mountPicker(FEBRUARY_2023, { disabled: true })
+
+      expect(calendarIcon()).toBeNull()
+    })
+  })
+
+  describe('time picker', () => {
+    it('keeps the day when only the time changes', async () => {
+      const { model } = mountPicker(FEBRUARY_2023)
+      await openCalendar()
+
+      await setTimeInput('Hour', '21')
+      await setTimeInput('Minute', '45')
+
+      expect(textField().value).toBe('08.02.2023 21:45')
+      expect(dayjs(model.value).format('DD.MM.YYYY HH:mm')).toBe('08.02.2023 21:45')
+    })
+  })
+
+  describe('text input', () => {
+    it('commits a date typed into the field on blur', async () => {
+      const { model } = mountPicker(null)
+
+      await typeIntoField('05.05.2025 10:00')
+
+      expect(dayjs(model.value).format('DD.MM.YYYY HH:mm')).toBe('05.05.2025 10:00')
+    })
+
+    it('keeps the value when the same date is retyped', async () => {
+      const { model } = mountPicker(FEBRUARY_2023)
+      const shown = textField().value
+
+      await typeIntoField(shown)
+
+      expect(textField().value).toBe(shown)
+      expect(model.value).not.toBeNull()
+    })
+
+    it('restores the last valid value when the input cannot be parsed', async () => {
+      const { model } = mountPicker(FEBRUARY_2023)
+      const shown = textField().value
+
+      await typeIntoField('..')
+
+      expect(textField().value).toBe(shown)
+      expect(model.value).toBe(FEBRUARY_2023)
+    })
+  })
+
+  describe('clearing', () => {
+    it('clears the value when the field is emptied', async () => {
+      const { model } = mountPicker(FEBRUARY_2023)
+
+      await typeIntoField('')
+
+      expect(model.value).toBeNull()
+      expect(textField().value).toBe('')
+    })
+
+    it('keeps the value when a required field is emptied', async () => {
+      const { model } = mountPicker(FEBRUARY_2023, { required: true })
+      const shown = textField().value
+
+      await typeIntoField('')
+
+      expect(model.value).toBe(FEBRUARY_2023)
+      expect(textField().value).toBe(shown)
+    })
+
+    it('falls back to the default value instead of null', async () => {
+      const defaultValue = '2020-01-01T09:15:00.000000Z'
+      const { model } = mountPicker(FEBRUARY_2023, { defaultValue })
+
+      await typeIntoField('')
+
+      expect(dayjs(model.value).format('DD.MM.YYYY HH:mm')).toBe(
+        dayjs(defaultValue).format('DD.MM.YYYY HH:mm'),
+      )
+    })
+
+    it('clears from the clearable icon and reports it', async () => {
+      const { model, events } = mountPicker(FEBRUARY_2023, { clearable: true })
+
+      document.querySelector<HTMLElement>('.a-datetime-picker__clearable-icon')!.click()
+      await flushPromises()
+
+      expect(model.value).toBeNull()
+      expect(events.afterClear).toBe(1)
+    })
+  })
+})
diff --git a/src/test/components/AFormRemoteAutocomplete.test.ts b/src/test/components/AFormRemoteAutocomplete.test.ts
index e7cbe41c..94491806 100644
--- a/src/test/components/AFormRemoteAutocomplete.test.ts
+++ b/src/test/components/AFormRemoteAutocomplete.test.ts
@@ -54,6 +54,7 @@ describe('AFormRemoteAutocomplete', () => {
         related: undefined,
         render: {
           skip: false,
+          selected: true,
           xs: undefined,
           sm: undefined,
           md: undefined,
@@ -121,9 +122,24 @@ describe('AFormRemoteAutocomplete', () => {
     const wrapper = createWrapper({ label: testLabel })
 
     expect(wrapper.find('.v-autocomplete').exists()).toBe(true)
-    expect(wrapper.vm.label).toBe(testLabel)
+    // Assert the RENDERED label, not `wrapper.vm.label` — reading the prop back off the vm
+    // only proves Vue assigns props, and passed just as happily if the template rendered a
+    // constant or dropped the label entirely.
+    expect(wrapper.find('.v-autocomplete').text()).toContain(testLabel)
   })
 
+  // NOTE — the `handles …` tests below are prop ROUND-TRIPS: they pass a prop in and read the
+  // same prop back off `wrapper.vm`. That asserts Vue's prop system, not this component. Each
+  // would still pass if the template ignored the prop entirely (verified: rendering a constant
+  // in place of the bound value leaves them green). They are kept because they are harmless and
+  // cheap, but they should not be read as coverage. What is genuinely NOT covered here:
+  //   - modelValue → what the autocomplete actually renders/selects (only `vm.modelValue` is read)
+  //   - multiple    → chip/multi-select rendering and multi-value emit shape
+  //   - loading     → the loading indicator ever appearing
+  //   - disabled    → the control actually refusing interaction
+  //   - clearable   → the clear affordance rendering, and onClickClear's refetch
+  // Real behavioural coverage in this file lives in the prefetch (mounted/focus/hover),
+  // search-debounce, tryLoadModelValue and auto-single-select blocks below.
   it('handles single selection', async () => {
     const wrapper = createWrapper({ modelValue: null })
 
@@ -149,14 +165,35 @@ describe('AFormRemoteAutocomplete', () => {
   })
 
   it('calls fetchItems on search', async () => {
-    const wrapper = createWrapper()
+    // Previously this never searched — it only re-read the prop off the vm, as its own
+    // comment admitted ("the actual search functionality would be tested in integration
+    // tests"), so nothing pinned the behaviour the name promises.
+    const fetchItems = createMockFetchItems()
+    const wrapper = createWrapper({ fetchItems, prefetch: false })
+    await waitForAsync(100)
+    expect(fetchItems).not.toHaveBeenCalled() // prefetch:false → nothing on mount
+
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    await input.setValue('ab') // >= minSearchChars (2)
+    await waitForAsync(600) // > SEARCH_DEBOUNCE_MS (300)
+
+    expect(fetchItems).toHaveBeenCalledTimes(1)
+  })
 
-    // Test that the component has the fetchItems prop
-    expect(wrapper.vm.fetchItems).toBe(mockFetchItems)
+  it('does not call fetchItems below minSearchChars', async () => {
+    // The other side of the gate — without it, "calls fetchItems on search" is satisfied by
+    // a component that fetches on every keystroke.
+    const fetchItems = createMockFetchItems()
+    const wrapper = createWrapper({ fetchItems, prefetch: false, minSearchChars: 3 })
+    await waitForAsync(100)
+
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    await input.setValue('ab') // 2 < 3
+    await waitForAsync(600)
 
-    // The actual search functionality would be tested in integration tests
-    // Here we just verify the prop is passed correctly
-    expect(typeof wrapper.vm.fetchItems).toBe('function')
+    expect(fetchItems).not.toHaveBeenCalled()
   })
 
   it('calls fetchItemsByIds when modelValue changes', async () => {
diff --git a/src/test/components/AFormValueObjectOptionsSelect.test.ts b/src/test/components/AFormValueObjectOptionsSelect.test.ts
new file mode 100644
index 00000000..111a21b0
--- /dev/null
+++ b/src/test/components/AFormValueObjectOptionsSelect.test.ts
@@ -0,0 +1,108 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import { VAutocomplete } from 'vuetify/components'
+import AFormValueObjectOptionsSelect from '@/components/form/AFormValueObjectOptionsSelect.vue'
+import type { ValueObjectOption } from '@/types/ValueObject'
+
+vi.mock('@/components/collab/composables/commonAdminCollabOptions', () => ({
+  useCommonAdminCollabOptions: () => ({
+    collabOptions: ref<{ enabled: boolean }>({ enabled: false }),
+  }),
+}))
+
+vi.mock('@/components/collab/composables/collabField', () => ({
+  useCollabField: () => ({
+    releaseCollabFieldLock: vi.fn(),
+    changeCollabFieldData: vi.fn(),
+    acquireCollabFieldLock: vi.fn(),
+    lockedByUser: ref<null>(null),
+  }),
+}))
+
+const items: ValueObjectOption<string>[] = [
+  { value: 'none', title: 'None' },
+  { value: 'gallery', title: 'Gallery' },
+  { value: 'video', title: 'Video' },
+]
+
+const factory = (props: Record<string, unknown> = {}) =>
+  mount(AFormValueObjectOptionsSelect, {
+    props: { modelValue: 'none', items, ...props },
+    attachTo: document.body,
+  })
+
+const flush = async () => {
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 50))
+  await nextTick()
+}
+
+describe('AFormValueObjectOptionsSelect', () => {
+  describe('when clearable is false (default)', () => {
+    it('swallows a null coming from the inner VAutocomplete', async () => {
+      const wrapper = factory()
+
+      wrapper.findComponent(VAutocomplete).vm.$emit('update:modelValue', null)
+      await flush()
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    // Regression: a non-clearable select bound to a non-nullable backend enum used to emit null
+    // as soon as the user emptied the search text, which then failed API deserialization.
+    it('keeps the value when the user empties the search text', async () => {
+      const wrapper = factory()
+      const input = wrapper.find('input').element as HTMLInputElement
+
+      input.focus()
+      await flush()
+
+      input.value = ''
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      await flush()
+
+      const emittedValues = (wrapper.emitted('update:modelValue') ?? []).flat()
+      expect(emittedValues).not.toContain(null)
+      expect(wrapper.findComponent(VAutocomplete).props('modelValue')).toBe('none')
+    })
+
+    it('still emits a real selection', async () => {
+      const wrapper = factory()
+
+      wrapper.findComponent(VAutocomplete).vm.$emit('update:modelValue', 'video')
+      await flush()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['video'])
+    })
+
+    it('emits null when the value already is null', async () => {
+      const wrapper = factory({ modelValue: null })
+
+      wrapper.findComponent(VAutocomplete).vm.$emit('update:modelValue', null)
+      await flush()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
+    })
+  })
+
+  describe('when clearing is legitimate', () => {
+    it('emits null with clearable', async () => {
+      const wrapper = factory({ clearable: true })
+
+      wrapper.findComponent(VAutocomplete).vm.$emit('update:modelValue', null)
+      await flush()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
+    })
+
+    it('emits null with multiple', async () => {
+      const wrapper = factory({ multiple: true, modelValue: ['none'] })
+
+      wrapper.findComponent(VAutocomplete).vm.$emit('update:modelValue', null)
+      await flush()
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
+    })
+  })
+})
diff --git a/src/test/components/AListEditor.test.ts b/src/test/components/AListEditor.test.ts
index 5622d7e0..bea8ec85 100644
--- a/src/test/components/AListEditor.test.ts
+++ b/src/test/components/AListEditor.test.ts
@@ -1,8 +1,12 @@
 import { describe, it, expect, vi } from 'vitest'
 import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
-import { defineComponent, h, ref, nextTick } from 'vue'
+import { defineComponent, h, ref, nextTick, type Ref } from 'vue'
 import AListEditor from '@/labs/listEditor/AListEditor.vue'
 
+// Read a ref out of the scope that created it (same helper as ListEditorManagedMutations),
+// so asserting on the model doesn't trip vue/no-ref-object-reactivity-loss.
+const read = (list: Ref<FaqItem[]>): FaqItem[] => list.value
+
 const findAListEditor = (w: VueWrapper): VueWrapper =>
   w.findComponent(AListEditor as unknown as Parameters<typeof w.findComponent>[0]) as VueWrapper
 
@@ -19,6 +23,9 @@ const items = (): FaqItem[] => [
   { id: 3, position: 3, title: 'Third', status: 'Active' },
 ]
 
+let nextTempId = 0
+const makeFaqItem = (): FaqItem => ({ id: --nextTempId, position: 0, title: '' })
+
 const mountEditor = (data: FaqItem[] = items(), extra: Record<string, unknown> = {}) => {
   const model = ref<FaqItem[]>(data)
   const Host = defineComponent({
@@ -29,6 +36,8 @@ const mountEditor = (data: FaqItem[] = items(), extra: Record<string, unknown> =
           'onUpdate:modelValue': (v: FaqItem[]) => {
             model.value = v
           },
+          factory: makeFaqItem,
+          compactField: 'title',
           ...extra,
         })
     },
@@ -61,12 +70,15 @@ describe('AListEditor', () => {
       expect(wrapper.find('.a-le-title').text()).toBe('1')
     })
 
-    it('falls back to fallback label when nothing resolves', () => {
-      const data = [{ id: 1, position: 1 }] as unknown as FaqItem[]
+    it('renders empty compact text when compactField does not resolve — no implicit fallback', () => {
+      // The row deliberately CARRIES the field names an implicit fallback would reach for
+      // (`title` / `name` / `label`). Without them the claim is unfalsifiable: a fallback
+      // would resolve to '' anyway and the test would pass either way.
+      const data = [
+        { id: 1, position: 1, title: 'from title', name: 'from name', label: 'from label' },
+      ] as unknown as FaqItem[]
       const { wrapper } = mountEditor(data, { compactField: 'nonexistent' })
-      // with compactField set but nothing to pick from fallback chain, falls through
-      // (id=1 is still picked via 'key' in fallback chain)
-      expect(wrapper.find('.a-le-title').text()).toBe('1')
+      expect(wrapper.find('.a-le-title').text()).toBe('')
     })
 
     it('renders the default add button row', () => {
@@ -98,6 +110,7 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
               },
               {
                 item: ({ raw }: { raw: FaqItem }) =>
@@ -108,7 +121,9 @@ describe('AListEditor', () => {
       })
       const wrapper = mount(ItemHost)
       // trigger edit on first row
-      const editBtn = wrapper.findAll('button').find((b) => b.attributes('class')?.includes('a-le-action--edit'))
+      const editBtn = wrapper
+        .findAll('button')
+        .find((b) => b.attributes('class')?.includes('a-le-action--edit'))
       expect(editBtn).toBeTruthy()
       await editBtn!.trigger('click')
       await nextTick()
@@ -130,29 +145,27 @@ describe('AListEditor', () => {
       expect(err.text()).toContain('Something went wrong')
     })
 
-    it('renders empty state with default title/text', () => {
+    it('renders empty state with default title', () => {
       const { wrapper } = mountEditor([])
       expect(wrapper.find('.a-le-state--empty').exists()).toBe(true)
       expect(wrapper.find('.a-le-empty-title').text()).toBeTruthy()
-      expect(wrapper.find('.a-le-empty-text').text()).toBeTruthy()
+      expect(wrapper.find('.a-le-empty-text').exists()).toBe(false)
     })
 
-    it('renders empty state with custom title/text', () => {
-      const { wrapper } = mountEditor([], {
-        emptyTitle: 'Nothing here',
-        emptyText: 'Add one',
-      })
+    it('renders empty state with custom title', () => {
+      const { wrapper } = mountEditor([], { emptyTitle: 'Nothing here' })
       expect(wrapper.find('.a-le-empty-title').text()).toBe('Nothing here')
-      expect(wrapper.find('.a-le-empty-text').text()).toBe('Add one')
     })
   })
 
   describe('events and interactions', () => {
-    it('emits add with no hint when the add button is clicked', async () => {
-      const { wrapper, editor } = mountEditor()
+    it('inserts a factory row into the model when the add button is clicked', async () => {
+      const { wrapper, model } = mountEditor()
       await wrapper.find('.a-le-row-add').trigger('click')
-      expect(editor().emitted('add')).toBeTruthy()
-      expect(editor().emitted('add')![0][0]).toBeUndefined()
+      await flushPromises()
+      expect(model.value).toHaveLength(4)
+      // Appended at the end (no hint).
+      expect(model.value[3].title).toBe('')
     })
 
     it('emits edit when the edit button is clicked', async () => {
@@ -206,21 +219,103 @@ describe('AListEditor', () => {
       expect(editor().emitted('deleted')).toBeTruthy()
     })
 
-    it('does not emit or mutate when readonly', async () => {
-      const { wrapper, model } = mountEditor(items(), { readonly: true })
-      // edit/delete buttons should not render when !canInteract
+    it('does not render the built-in mutating affordances when readonly', () => {
+      const { wrapper } = mountEditor(items(), { readonly: true })
+      // The DEFAULT buttons are `v-if`'d out on !canInteract...
       expect(wrapper.findAll('.a-le-action--edit')).toHaveLength(0)
       expect(wrapper.findAll('.a-le-action--delete')).toHaveLength(0)
       expect(wrapper.find('.a-le-row-add').exists()).toBe(false)
-      expect(model.value).toHaveLength(3)
+    })
+
+    it('does not emit or mutate when readonly, even via slot-reachable actions', async () => {
+      // ...but hiding the buttons is not the guarantee. `#item-actions` is NOT gated on
+      // canInteract, so a slot consumer still holds `actions.delete` / `actions.addAfter`;
+      // `#empty` likewise hands out `actions.add`. Those handlers are what must refuse.
+      // The old test clicked nothing and asserted `model.value` still had its 3 rows —
+      // which no mutation of the guards could ever falsify.
+      const model = ref<FaqItem[]>(items())
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(
+              AListEditor<FaqItem>,
+              {
+                modelValue: model.value,
+                'onUpdate:modelValue': (v: FaqItem[]) => {
+                  model.value = v
+                },
+                factory: makeFaqItem,
+                readonly: true,
+              },
+              {
+                'item-actions': ({
+                  actions,
+                }: {
+                  actions: { delete: () => Promise<void>; addAfter: () => void }
+                }) => [
+                  h('button', { class: 'ro-delete', onClick: actions.delete }, 'delete'),
+                  h('button', { class: 'ro-add-after', onClick: actions.addAfter }, 'add after'),
+                ],
+              },
+            )
+        },
+      })
+      const wrapper = mount(Host)
+      const editor = findAListEditor(wrapper)
+
+      await wrapper.findAll('.ro-delete')[0].trigger('click')
+      await flushPromises()
+      await wrapper.findAll('.ro-add-after')[0].trigger('click')
+      await flushPromises()
+
+      expect(read(model).map((i) => i.id)).toEqual([1, 2, 3])
+      expect(editor.emitted('deleted')).toBeFalsy()
+      expect(editor.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('does not add when readonly via the #empty slot add action', async () => {
+      // `onAddClick` guards on `canAdd` (= canInteract && showAddButton). The default add
+      // row is `v-if`'d away in readonly, so the #empty slot is the reachable path to it.
+      const model = ref<FaqItem[]>([])
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(
+              AListEditor<FaqItem>,
+              {
+                modelValue: model.value,
+                'onUpdate:modelValue': (v: FaqItem[]) => {
+                  model.value = v
+                },
+                factory: makeFaqItem,
+                readonly: true,
+              },
+              {
+                empty: ({ actions }: { actions: { add: () => void } }) =>
+                  h('button', { class: 'ro-add', onClick: actions.add }, 'add'),
+              },
+            )
+        },
+      })
+      const wrapper = mount(Host)
+      const editor = findAListEditor(wrapper)
+
+      await wrapper.find('.ro-add').trigger('click')
+      await flushPromises()
+
+      expect(read(model)).toHaveLength(0)
+      expect(editor.emitted('update:modelValue')).toBeFalsy()
     })
   })
 
   describe('position hints', () => {
-    it('emits add with afterId hint when the slot addAfter action is triggered', async () => {
+    // Drives add-after from the row slot scope (`actions.addAfter`) — the same
+    // handler the kebab "add after this" VListItem calls — so we don't fight the
+    // Vuetify VMenu overlay.
+    const mountWithAddAfterSlot = (extra: Record<string, unknown> = {}) => {
+      const model = ref<FaqItem[]>(items())
       const Host = defineComponent({
         setup() {
-          const model = ref<FaqItem[]>(items())
           return () =>
             h(
               AListEditor<FaqItem>,
@@ -229,25 +324,70 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
+                ...extra,
               },
               {
                 'item-actions': ({ actions }: { actions: { addAfter: () => void } }) =>
-                  h(
-                    'button',
-                    { class: 'test-add-after', onClick: actions.addAfter },
-                    'add after',
-                  ),
+                  h('button', { class: 'test-add-after', onClick: actions.addAfter }, 'add after'),
               },
             )
         },
       })
       const wrapper = mount(Host)
+      return { wrapper, model }
+    }
+
+    it('inserts the factory row right after the row when the slot addAfter action is triggered', async () => {
+      const { wrapper, model } = mountWithAddAfterSlot()
       const btns = wrapper.findAll('.test-add-after')
       await btns[1].trigger('click')
-      const editor = findAListEditor(wrapper)
-      const addEvents = editor.emitted('add') as Array<[{ afterId: number } | undefined]>
-      expect(addEvents).toBeTruthy()
-      expect(addEvents[0][0]).toEqual({ afterId: 2 })
+      await flushPromises()
+      // New row inserted after id 2 (index 1).
+      expect(model.value).toHaveLength(4)
+      expect(model.value[2].title).toBe('')
+      expect(model.value.map((i) => i.id).slice(0, 2)).toEqual([1, 2])
+    })
+
+    it('add-after inserts the new row immediately after the source row and renumbers positions', async () => {
+      const { wrapper, model } = mountWithAddAfterSlot({
+        position: 'position',
+        showAddAfterAction: true,
+      })
+      await flushPromises()
+
+      // Trigger add-after on the MIDDLE row (id 2).
+      const btns = wrapper.findAll('.test-add-after')
+      await btns[1].trigger('click')
+      await flushPromises()
+
+      expect(model.value).toHaveLength(4)
+      // The blank factory row lands at index 2 — right after id 2.
+      expect(model.value[2].title).toBe('')
+      const newId = model.value[2].id
+      // ids order: [1, 2, <new>, 3]
+      expect(model.value.map((i) => i.id)).toEqual([1, 2, newId, 3])
+      // Managed position renumbered contiguous 1..4.
+      expect(model.value.map((i) => i.position)).toEqual([1, 2, 3, 4])
+    })
+
+    it('add-after on the last row appends at the end', async () => {
+      const { wrapper, model } = mountWithAddAfterSlot({
+        position: 'position',
+        showAddAfterAction: true,
+      })
+      await flushPromises()
+
+      const btns = wrapper.findAll('.test-add-after')
+      await btns[2].trigger('click')
+      await flushPromises()
+
+      expect(model.value).toHaveLength(4)
+      // New blank row appended after the original last row (id 3).
+      expect(model.value[3].title).toBe('')
+      const newId = model.value[3].id
+      expect(model.value.map((i) => i.id)).toEqual([1, 2, 3, newId])
+      expect(model.value.map((i) => i.position)).toEqual([1, 2, 3, 4])
     })
   })
 
@@ -276,6 +416,7 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
                 title: 'X',
               },
               {
@@ -314,6 +455,8 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
+                compactField: 'title',
                 ...extra,
               },
               {
@@ -395,6 +538,8 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
+                compactField: 'title',
                 onItemSave,
               },
               {
@@ -471,6 +616,11 @@ describe('AListEditor', () => {
     })
 
     it('#item-footer slot overrides the default footer', async () => {
+      // `onItemSave` is load-bearing: the default footer only renders when it is provided
+      // (`showInlineSaveFooter`). Without it the host could never have shown a default
+      // footer in the first place, so "overrides" asserted nothing — the sibling test above
+      // proves this exact config DOES render `.a-le-row-footer` when the slot is absent.
+      const save = vi.fn().mockResolvedValue(undefined)
       const model = ref<FaqItem[]>(items())
       const Host = defineComponent({
         setup() {
@@ -482,6 +632,8 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
+                onItemSave: save,
               },
               {
                 item: ({ raw }: { raw: FaqItem }) => h('div', `editing ${raw.id}`),
@@ -582,6 +734,7 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
               },
               { item: ({ raw }: { raw: FaqItem }) => h('input', { value: raw.title }) },
             )
@@ -600,7 +753,7 @@ describe('AListEditor', () => {
   })
 
   describe('auto-open on add', () => {
-    it('auto-enters editing on the newly-added row after @add is handled by the parent', async () => {
+    it('auto-enters editing on the newly-added managed row', async () => {
       const model = ref<FaqItem[]>(items())
       const Host = defineComponent({
         setup() {
@@ -612,12 +765,8 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
-                onAdd: () => {
-                  model.value = [
-                    ...model.value,
-                    { id: 999, position: 0, title: 'New', status: 'Draft' },
-                  ]
-                },
+                factory: (): FaqItem => ({ id: 999, position: 0, title: 'New', status: 'Draft' }),
+                compactField: 'title',
               },
               { item: ({ raw }: { raw: FaqItem }) => h('input', { value: raw.title }) },
             )
@@ -646,6 +795,7 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
               },
               { item: ({ raw }: { raw: FaqItem }) => h('input', { value: raw.title }) },
             )
@@ -674,6 +824,7 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
               },
               { empty: () => h('div', { class: 'my-empty' }, 'Nothing here yet') },
             )
@@ -696,18 +847,11 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
               },
               {
-                'add-button': ({
-                  actions,
-                }: {
-                  actions: { add: () => void }
-                }) =>
-                  h(
-                    'button',
-                    { class: 'my-add', onClick: actions.add },
-                    'Custom add',
-                  ),
+                'add-button': ({ actions }: { actions: { add: () => void } }) =>
+                  h('button', { class: 'my-add', onClick: actions.add }, 'Custom add'),
               },
             )
         },
@@ -729,6 +873,7 @@ describe('AListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: makeFaqItem,
               },
               {
                 'item-actions': ({ raw }: { raw: FaqItem }) =>
@@ -745,38 +890,46 @@ describe('AListEditor', () => {
     })
   })
 
-  describe('exposed imperative API', () => {
-    it('exposes resetDirtyBaseline via defineExpose', () => {
+  describe('exposed imperative API (v2 controller handle)', () => {
+    it('exposes the controller handle via defineExpose', () => {
       const { editor } = mountEditor()
       const exposed = (editor().vm as unknown as { $: { exposed: Record<string, unknown> } }).$
         .exposed
-      expect(typeof exposed.resetDirtyBaseline).toBe('function')
+      expect(typeof exposed.commit).toBe('function')
+      expect(typeof exposed.reset).toBe('function')
+      expect(typeof exposed.validateAll).toBe('function')
+      expect(typeof exposed.getPayload).toBe('function')
       expect(typeof exposed.addItem).toBe('function')
       expect(typeof exposed.deleteItem).toBe('function')
       expect(typeof exposed.updateItem).toBe('function')
     })
   })
 
-  describe('position recalculation (updatePosition)', () => {
-    it('recalculates positions on add when updatePosition=true', async () => {
+  describe('managed position (position prop)', () => {
+    it('recalculates positions on add when position is managed with a multiplier', async () => {
       const { model, editor } = mountEditor(items(), {
-        updatePosition: true,
-        positionMultiplier: 10,
+        position: { field: 'position', multiplier: 10 },
       })
-      const exposed = (editor().vm as unknown as {
-        $: { exposed: { addItem: (d: FaqItem) => void } }
-      }).$.exposed
+      // Baseline renumbers eagerly to the multiplier grid.
+      await flushPromises()
+      const exposed = (
+        editor().vm as unknown as {
+          $: { exposed: { addItem: (d?: FaqItem) => void } }
+        }
+      ).$.exposed
       exposed.addItem({ id: 999, position: 0, title: 'Extra' })
       await flushPromises()
       const positions = model.value.map((i) => i.position)
       expect(positions).toEqual([10, 20, 30, 40])
     })
 
-    it('does not touch positions when updatePosition=false (default)', async () => {
-      const { model, editor } = mountEditor(items())
-      const exposed = (editor().vm as unknown as {
-        $: { exposed: { addItem: (d: FaqItem) => void } }
-      }).$.exposed
+    it('does not touch positions when position=false', async () => {
+      const { model, editor } = mountEditor(items(), { position: false })
+      const exposed = (
+        editor().vm as unknown as {
+          $: { exposed: { addItem: (d?: FaqItem) => void } }
+        }
+      ).$.exposed
       exposed.addItem({ id: 999, position: 99, title: 'Extra' })
       await flushPromises()
       // Original positions preserved, new item keeps its own
diff --git a/src/test/components/AListEditorDefaultExpanded.test.ts b/src/test/components/AListEditorDefaultExpanded.test.ts
new file mode 100644
index 00000000..9ed40207
--- /dev/null
+++ b/src/test/components/AListEditorDefaultExpanded.test.ts
@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+const items = (): Item[] => [
+  { id: 1, position: 1, title: 'First' },
+  { id: 2, position: 2, title: 'Second' },
+  { id: 3, position: 3, title: 'Third' },
+]
+
+let nextTempId = 0
+const makeItem = (): Item => ({ id: --nextTempId, position: 0, title: '' })
+
+let mounted: VueWrapper | null = null
+
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const mountEditor = (defaultExpanded: boolean, extra: Record<string, unknown> = {}) => {
+  const model = ref<Item[]>(items())
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(
+          AListEditor<Item>,
+          {
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Item[]) => {
+              model.value = v
+            },
+            factory: makeItem,
+            compactField: 'title',
+            defaultExpanded,
+            ...extra,
+          },
+          {
+            item: ({ raw }: { raw: Item }) =>
+              h('input', { class: 'edit-input', 'data-id': raw.id, value: raw.title }),
+          },
+        )
+    },
+  })
+  mounted = mount(Host)
+  return { wrapper: mounted, model }
+}
+
+describe('AListEditor — defaultExpanded', () => {
+  it('renders the #item slot for every row on mount when true', async () => {
+    const { wrapper } = mountEditor(true)
+    await nextTick()
+    const inputs = wrapper.findAll('.edit-input')
+    expect(inputs).toHaveLength(3)
+    expect(inputs[0].attributes('data-id')).toBe('1')
+    expect(inputs[2].attributes('data-id')).toBe('3')
+  })
+
+  it('does not render #item slot rows when false (default collapsed behavior)', async () => {
+    const { wrapper } = mountEditor(false)
+    await nextTick()
+    expect(wrapper.findAll('.edit-input')).toHaveLength(0)
+  })
+
+  it('hides the edit pencil when defaultExpanded is true', async () => {
+    const { wrapper } = mountEditor(true)
+    await nextTick()
+    expect(wrapper.findAll('.a-le-action--edit')).toHaveLength(0)
+  })
+
+  it('shows the edit pencil when defaultExpanded is false', async () => {
+    const { wrapper } = mountEditor(false)
+    await nextTick()
+    expect(wrapper.findAll('.a-le-action--edit').length).toBeGreaterThan(0)
+  })
+
+  it('row click is a no-op when defaultExpanded is true', async () => {
+    const { wrapper } = mountEditor(true)
+    await nextTick()
+    await wrapper.find('.a-le-row-header').trigger('click')
+    await nextTick()
+    // All rows still show #item; nothing collapsed.
+    expect(wrapper.findAll('.edit-input')).toHaveLength(3)
+    // The row is not marked clickable.
+    expect(wrapper.find('.a-le-row').classes()).not.toContain('a-le-row--clickable')
+  })
+
+  it('newly added rows render the #item slot immediately', async () => {
+    const { wrapper, model } = mountEditor(true)
+    await nextTick()
+    model.value.push({ id: 4, position: 4, title: 'Fourth' })
+    await nextTick()
+    expect(wrapper.findAll('.edit-input')).toHaveLength(4)
+  })
+
+  it('hides the default inline Save/Cancel footer when defaultExpanded with onItemSave', async () => {
+    const { wrapper } = mountEditor(true, { onItemSave: () => {} })
+    await nextTick()
+    expect(wrapper.findAll('.a-le-row-footer')).toHaveLength(0)
+  })
+
+  it('shows the default inline Save/Cancel footer when defaultExpanded is false', async () => {
+    const { wrapper } = mountEditor(false, { onItemSave: () => {} })
+    await nextTick()
+    // Open the first row via edit pencil
+    await wrapper.find('.a-le-action--edit').trigger('click')
+    await nextTick()
+    expect(wrapper.findAll('.a-le-row-footer').length).toBeGreaterThan(0)
+  })
+
+  it('slot scope `editing` is true for every row when defaultExpanded', async () => {
+    const observedEditing: boolean[] = []
+    const model = ref<Item[]>(items())
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            AListEditor<Item>,
+            {
+              modelValue: model.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                model.value = v
+              },
+              factory: makeItem,
+              compactField: 'title',
+              defaultExpanded: true,
+            },
+            {
+              item: (props: { editing: boolean }) => {
+                observedEditing.push(props.editing)
+                return h('div', 'form')
+              },
+            },
+          )
+      },
+    })
+    mounted = mount(Host)
+    await nextTick()
+    expect(observedEditing.every((e) => e === true)).toBe(true)
+    expect(observedEditing).toHaveLength(3)
+  })
+})
diff --git a/src/test/components/AListEditorSlotUpdate.test.ts b/src/test/components/AListEditorSlotUpdate.test.ts
index 1083e540..d0f467eb 100644
--- a/src/test/components/AListEditorSlotUpdate.test.ts
+++ b/src/test/components/AListEditorSlotUpdate.test.ts
@@ -16,6 +16,9 @@ const items = (): Item[] => [
   { id: 3, position: 3, title: 'Third' },
 ]
 
+let nextTempId = 0
+const makeItem = (): Item => ({ id: --nextTempId, position: 0, title: '' })
+
 let mounted: VueWrapper | null = null
 
 afterEach(() => {
@@ -37,11 +40,10 @@ describe('AListEditor — slot actions.update', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: makeItem,
             },
             {
-              'item-compact': (
-                slotProps: { actions?: { update?: (data: Item) => void } },
-              ) => {
+              'item-compact': (slotProps: { actions?: { update?: (data: Item) => void } }) => {
                 received.value = slotProps
                 return h('span', 'row')
               },
@@ -66,6 +68,7 @@ describe('AListEditor — slot actions.update', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: makeItem,
             },
             {
               'item-compact': ({
@@ -106,6 +109,7 @@ describe('AListEditor — slot actions.update', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: makeItem,
             },
             {
               'item-compact': ({
diff --git a/src/test/components/AListEditorUnsavedKeys.test.ts b/src/test/components/AListEditorUnsavedKeys.test.ts
index eab6cb90..513c4548 100644
--- a/src/test/components/AListEditorUnsavedKeys.test.ts
+++ b/src/test/components/AListEditorUnsavedKeys.test.ts
@@ -2,13 +2,7 @@ import { afterEach, describe, expect, it } from 'vitest'
 import { mount, type VueWrapper } from '@vue/test-utils'
 import { defineComponent, h, nextTick, ref } from 'vue'
 import AListEditor from '@/labs/listEditor/AListEditor.vue'
-import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
-
-interface AListEditorExposed {
-  hasUnsavedChanges: boolean
-  unsavedCount: number
-  clearUnsavedState: (key?: ListEditorKey) => void
-}
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
 
 interface Item {
   id: number
@@ -22,6 +16,9 @@ const items = (): Item[] => [
   { id: 3, position: 3, title: 'Third' },
 ]
 
+let nextTempId = 0
+const makeItem = (): Item => ({ id: --nextTempId, position: 0, title: '' })
+
 let mounted: VueWrapper | null = null
 
 afterEach(() => {
@@ -29,110 +26,108 @@ afterEach(() => {
   mounted = null
 })
 
+const findAListEditor = (w: VueWrapper): VueWrapper =>
+  w.findComponent(AListEditor as unknown as Parameters<typeof w.findComponent>[0]) as VueWrapper
+
+// Read the raw exposed handle (refs NOT unwrapped, so `.value` matches the
+// declared ComputedRef types) — mirrors the ASortableListEditor test convention.
+const exposed = (w: VueWrapper): ListEditorHandle<Item> =>
+  (findAListEditor(w).vm as unknown as { $: { exposed: ListEditorHandle<Item> } }).$.exposed
+
 const mountEditor = () => {
   const model = ref<Item[]>(items())
-  const unsavedKeys = ref(new Set<ListEditorKey>())
-  const editorRef = ref<AListEditorExposed | null>(null)
   const Host = defineComponent({
     setup() {
       return () =>
         h(AListEditor<Item>, {
-          ref: (r: unknown) => {
-            editorRef.value = r as AListEditorExposed | null
-          },
           modelValue: model.value,
           'onUpdate:modelValue': (v: Item[]) => {
             model.value = v
           },
-          unsavedKeys: unsavedKeys.value,
-          'onUpdate:unsavedKeys': (v: Set<ListEditorKey>) => {
-            unsavedKeys.value = v
-          },
+          factory: makeItem,
         })
     },
   })
   mounted = mount(Host)
-  return { wrapper: mounted, model, unsavedKeys, editorRef }
+  return { wrapper: mounted, model, handle: () => exposed(mounted!) }
 }
 
-describe('AListEditor — unsavedKeys v-model + clearUnsavedState', () => {
-  it('unsavedKeys is empty on initial mount', async () => {
-    const { unsavedKeys } = mountEditor()
-    await nextTick()
-    expect(unsavedKeys.value.size).toBe(0)
+// v2 dropped the `v-model:unsaved-keys` Set plumbing — the controller owns the
+// dirty state, surfaced via the exposed handle (`hasUnsaved` / `isUnsaved`) and
+// the `a-le-row--unsaved` row class. `commit()` re-baselines (post-save),
+// `reset()` discards back to the last baseline.
+describe('AListEditor — controller unsaved tracking', () => {
+  it('nothing is unsaved on initial mount', async () => {
+    const { wrapper, handle } = mountEditor()
+    await nextTick()
+    expect(handle().hasUnsaved.value).toBe(false)
+    expect(wrapper.findAll('.a-le-row--unsaved')).toHaveLength(0)
   })
 
-  it('mutating an item flags it as unsaved in the v-model', async () => {
-    const { unsavedKeys, model } = mountEditor()
+  it('mutating an item flags it as unsaved', async () => {
+    const { wrapper, model, handle } = mountEditor()
     await nextTick()
-    expect(unsavedKeys.value.has(1)).toBe(false)
-    model.value[0].title = 'changed'
+    expect(handle().isUnsaved(1)).toBe(false)
+    model.value = [{ ...model.value[0], title: 'changed' }, model.value[1], model.value[2]]
     await nextTick()
-    expect(unsavedKeys.value.has(1)).toBe(true)
-    expect(unsavedKeys.value.size).toBe(1)
+    expect(handle().isUnsaved(1)).toBe(true)
+    expect(wrapper.findAll('.a-le-row--unsaved')).toHaveLength(1)
   })
 
-  it('reverting the mutation removes the key', async () => {
-    const { unsavedKeys, model } = mountEditor()
+  it('reverting the mutation clears the unsaved flag', async () => {
+    const { model, handle } = mountEditor()
     await nextTick()
-    model.value[0].title = 'changed'
+    model.value = [{ ...model.value[0], title: 'changed' }, model.value[1], model.value[2]]
     await nextTick()
-    expect(unsavedKeys.value.has(1)).toBe(true)
-    model.value[0].title = 'First'
+    expect(handle().isUnsaved(1)).toBe(true)
+    model.value = [{ ...model.value[0], title: 'First' }, model.value[1], model.value[2]]
     await nextTick()
-    expect(unsavedKeys.value.has(1)).toBe(false)
+    expect(handle().isUnsaved(1)).toBe(false)
   })
 
-  it('parent clearing the v-model rebaselines all rows', async () => {
-    const { unsavedKeys, model } = mountEditor()
+  it('commit() re-baselines all rows (post-save)', async () => {
+    const { wrapper, model, handle } = mountEditor()
     await nextTick()
-    model.value[0].title = 'changed-A'
-    model.value[1].title = 'changed-B'
+    model.value = [
+      { ...model.value[0], title: 'changed-A' },
+      { ...model.value[1], title: 'changed-B' },
+      model.value[2],
+    ]
     await nextTick()
-    expect(unsavedKeys.value.size).toBe(2)
-    // Parent-side clear (e.g., after a successful save)
-    unsavedKeys.value = new Set()
-    await nextTick()
-    // Editor should have rebaselined: subsequent mutations re-flag dirty
-    expect(unsavedKeys.value.size).toBe(0)
-    // No further mutation — should stay clean
-    await nextTick()
-    expect(unsavedKeys.value.size).toBe(0)
-  })
+    expect(wrapper.findAll('.a-le-row--unsaved')).toHaveLength(2)
 
-  it('clearUnsavedState() clears all and re-baselines', async () => {
-    const { unsavedKeys, model, editorRef } = mountEditor()
-    await nextTick()
-    model.value[0].title = 'changed'
+    // Consumer persisted → commit current rows as the new baseline.
+    handle().commit()
     await nextTick()
-    expect(unsavedKeys.value.size).toBe(1)
-    editorRef.value?.clearUnsavedState()
-    await nextTick()
-    expect(unsavedKeys.value.size).toBe(0)
+    expect(handle().hasUnsaved.value).toBe(false)
+    expect(wrapper.findAll('.a-le-row--unsaved')).toHaveLength(0)
   })
 
-  it('clearUnsavedState(key) clears just that row', async () => {
-    const { unsavedKeys, model, editorRef } = mountEditor()
+  it('reset() discards unsaved edits back to the last baseline', async () => {
+    const { wrapper, model, handle } = mountEditor()
     await nextTick()
-    model.value[0].title = 'changed-A'
-    model.value[1].title = 'changed-B'
+    model.value = [{ ...model.value[0], title: 'changed' }, model.value[1], model.value[2]]
     await nextTick()
-    expect(unsavedKeys.value.size).toBe(2)
-    editorRef.value?.clearUnsavedState(1)
+    expect(wrapper.findAll('.a-le-row--unsaved')).toHaveLength(1)
+
+    handle().reset()
     await nextTick()
-    expect(unsavedKeys.value.has(1)).toBe(false)
-    expect(unsavedKeys.value.has(2)).toBe(true)
+    expect(model.value[0].title).toBe('First')
+    expect(handle().hasUnsaved.value).toBe(false)
+    expect(wrapper.findAll('.a-le-row--unsaved')).toHaveLength(0)
   })
 
-  it('hasUnsavedChanges and unsavedCount mirror the v-model', async () => {
-    const { model, editorRef } = mountEditor()
-    await nextTick()
-    expect(editorRef.value?.hasUnsavedChanges).toBe(false)
-    expect(editorRef.value?.unsavedCount).toBe(0)
-    model.value[0].title = 'a'
-    model.value[1].title = 'b'
-    await nextTick()
-    expect(editorRef.value?.hasUnsavedChanges).toBe(true)
-    expect(editorRef.value?.unsavedCount).toBe(2)
+  it('hasUnsaved mirrors whether any row is dirty', async () => {
+    const { model, handle } = mountEditor()
+    await nextTick()
+    expect(handle().hasUnsaved.value).toBe(false)
+    model.value = [
+      { ...model.value[0], title: 'a' },
+      { ...model.value[1], title: 'b' },
+      model.value[2],
+    ]
+    await nextTick()
+    expect(handle().hasUnsaved.value).toBe(true)
+    expect(handle().invalidKeys.value.size).toBe(0)
   })
 })
diff --git a/src/test/components/AListEditorValidation.test.ts b/src/test/components/AListEditorValidation.test.ts
index f7cc3907..c1c4c951 100644
--- a/src/test/components/AListEditorValidation.test.ts
+++ b/src/test/components/AListEditorValidation.test.ts
@@ -1,15 +1,14 @@
+/* eslint-disable vue/no-ref-object-reactivity-loss */
 import { afterEach, describe, expect, it } from 'vitest'
 import { mount, type VueWrapper } from '@vue/test-utils'
-import { computed, defineComponent, h, nextTick, ref } from 'vue'
+import { defineComponent, h, nextTick, ref } from 'vue'
 import AListEditor from '@/labs/listEditor/AListEditor.vue'
-import { useListEditorItemValidation } from '@/labs/listEditor/composables/useListEditorItemValidation'
-import type { ListEditorValidationState } from '@/labs/listEditor/types/listEditorTypes'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
 
 interface Item {
   id: number
   position: number
   title: string
-  validationState?: ListEditorValidationState
 }
 
 const items = (): Item[] => [
@@ -18,6 +17,9 @@ const items = (): Item[] => [
   { id: 3, position: 3, title: 'Third' },
 ]
 
+let nextTempId = 0
+const makeItem = (): Item => ({ id: --nextTempId, position: 0, title: '' })
+
 let mounted: VueWrapper | null = null
 
 afterEach(() => {
@@ -31,198 +33,219 @@ const findRow = (key: number): HTMLElement | null =>
 const isInvalid = (key: number): boolean =>
   findRow(key)?.classList.contains('a-le-row--validation-invalid') ?? false
 
-describe('AListEditor — validation', () => {
-  describe('via raw.validationState (data-driven)', () => {
-    it('applies invalid class when raw.validationState = "invalid"', async () => {
-      const data = items()
-      data[1].validationState = 'invalid'
+const findAListEditor = (w: VueWrapper): VueWrapper =>
+  w.findComponent(AListEditor as unknown as Parameters<typeof w.findComponent>[0]) as VueWrapper
+
+// Raw exposed handle — refs NOT unwrapped, so `.value` matches the declared
+// ComputedRef types (mirrors the ASortableListEditor test convention).
+const exposed = (w: VueWrapper): ListEditorHandle<Item> =>
+  (findAListEditor(w).vm as unknown as { $: { exposed: ListEditorHandle<Item> } }).$.exposed
+
+// v2 validation flows through the `:validate` prop (true = VALID). The red rail
+// is GATED: an invalid row only paints red once it has been EDITED (content changed
+// since it was added / its baseline — mirrors the field's vuelidate `$dirty`) OR the
+// consumer called `validateAll()` — so a freshly-loaded invalid baseline row AND a
+// freshly-added still-untouched row stay clear until interaction. Mirrors ASortableListEditor.
+describe('AListEditor — validation (:validate + gated red rail)', () => {
+  describe('edited-gated red rail', () => {
+    it('does not flag a loaded-but-invalid baseline row before interaction', async () => {
+      const data = ref<Item[]>([
+        { id: 1, position: 1, title: 'A' },
+        { id: 2, position: 2, title: '' }, // invalid (empty title) but persisted
+      ])
       const Host = defineComponent({
         setup() {
-          return () => h(AListEditor<Item>, { modelValue: data })
+          return () =>
+            h(AListEditor<Item>, {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
+              },
+              factory: makeItem,
+              validate: (item: Item) => !!item.title,
+            })
         },
       })
       mounted = mount(Host, { attachTo: document.body })
       await nextTick()
-      expect(isInvalid(2)).toBe(true)
-      expect(isInvalid(1)).toBe(false)
-      expect(isInvalid(3)).toBe(false)
+      // Persisted invalid row stays clear on load — no premature red.
+      expect(isInvalid(2)).toBe(false)
     })
-  })
 
-  describe('via getValidationState prop (caller function)', () => {
-    it('applies invalid class for keys returned by the function', async () => {
-      const data = items()
+    it('an added invalid row reads red once collapsed (unsaved); a loaded invalid row stays clear', async () => {
+      const baseline: Item[] = [
+        { id: 1, position: 1, title: 'A' },
+        { id: 2, position: 2, title: '' },
+      ]
+      const data = ref<Item[]>(baseline)
       const Host = defineComponent({
         setup() {
           return () =>
             h(AListEditor<Item>, {
-              modelValue: data,
-              getValidationState: (item: Item) =>
-                item.id === 1 ? 'invalid' : null,
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
+              },
+              factory: makeItem,
+              validate: (item: Item) => !!item.title,
             })
         },
       })
       mounted = mount(Host, { attachTo: document.body })
       await nextTick()
-      expect(isInvalid(1)).toBe(true)
       expect(isInvalid(2)).toBe(false)
+
+      // Add a new invalid (empty) row — unsaved and collapsed (not being edited) → red. The loaded
+      // baseline invalid row (2) stays clear (quiet until edited / a save attempt). (QA 85050 batch 7)
+      data.value = [...baseline, { id: -1, position: 3, title: '' }]
+      await nextTick()
+      await nextTick()
+      expect(isInvalid(-1)).toBe(true)
+      expect(isInvalid(2)).toBe(false)
+
+      // Filling the new row keeps it clear (now valid).
+      data.value = [...baseline.slice(0, 2), { id: -1, position: 3, title: 'now valid' }]
+      await nextTick()
+      await nextTick()
+      expect(isInvalid(-1)).toBe(false)
     })
 
-    it('reacts to function output changes', async () => {
-      const data = items()
-      const targetId = ref(1)
+    it('an edited (unsaved) baseline row that is invalid reads red', async () => {
+      const data = ref<Item[]>(items())
       const Host = defineComponent({
         setup() {
           return () =>
             h(AListEditor<Item>, {
-              modelValue: data,
-              getValidationState: (item: Item) =>
-                item.id === targetId.value ? 'invalid' : null,
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
+              },
+              factory: makeItem,
+              validate: (item: Item) => !!item.title,
             })
         },
       })
       mounted = mount(Host, { attachTo: document.body })
       await nextTick()
-      expect(isInvalid(1)).toBe(true)
-      expect(isInvalid(3)).toBe(false)
-      targetId.value = 3
-      await nextTick()
       expect(isInvalid(1)).toBe(false)
-      expect(isInvalid(3)).toBe(true)
+
+      // Edit row 1 to an invalid (empty) value → unsaved + invalid → red.
+      data.value = [{ ...data.value[0], title: '' }, data.value[1], data.value[2]]
+      await nextTick()
+      expect(isInvalid(1)).toBe(true)
     })
   })
 
-  describe('via useListEditorItemValidation (provide/inject from slot)', () => {
-    it('child in #item slot can register its validity, editor applies the class', async () => {
-      const data = items()
-      const ChildForm = defineComponent({
-        props: { itemKey: { type: Number, required: true } },
-        setup(p) {
-          const isInvalidLocal = computed<ListEditorValidationState>(() =>
-            p.itemKey === 2 ? 'invalid' : null,
-          )
-          useListEditorItemValidation({
-            key: () => p.itemKey,
-            state: isInvalidLocal,
-          })
-          return () => h('div', `child-${p.itemKey}`)
-        },
-      })
+  describe('validateAll() force-reveals every invalid row', () => {
+    it('lights up untouched invalid baseline rows after validateAll()', async () => {
+      const data = ref<Item[]>([
+        { id: 1, position: 1, title: 'A' },
+        { id: 2, position: 2, title: '' }, // invalid, untouched
+      ])
       const Host = defineComponent({
         setup() {
           return () =>
-            h(
-              AListEditor<Item>,
-              { modelValue: data },
-              {
-                item: ({ raw }: { raw: Item }) =>
-                  h(ChildForm, { itemKey: raw.id }),
+            h(AListEditor<Item>, {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
               },
-            )
+              factory: makeItem,
+              validate: (item: Item) => !!item.title,
+            })
         },
       })
       mounted = mount(Host, { attachTo: document.body })
       await nextTick()
-      // Open row 2 to mount its #item slot, where the child registers validity.
-      // Then close and verify the registered state still applies via class on the row.
-      // Quicker: edit-mode hides validation, so trigger by registering via expanded
-      // state. For this test we simply read state via raw.validationState fallback
-      // — but since no fallback set, registry only fires for OPEN rows. Let's edit:
-      const row2 = findRow(2)
-      row2?.click()
-      await nextTick()
-      await nextTick()
-      // Validation rail is hidden while editing, so close after registration.
-      // To make this assert deterministic we instead pre-open via API: click
-      // to open, then click to close.
-      row2?.click()
+      // Before validateAll() the untouched invalid row is clear.
+      expect(isInvalid(2)).toBe(false)
+
+      const valid = exposed(mounted!).validateAll()
+      expect(valid).toBe(false)
       await nextTick()
-      // Note: useListEditorItemValidation only runs when the child component is
-      // mounted. With #item slot mounted only during edit, the registration
-      // only happens during edit, then unregisters on unmount (close edit).
-      // So the rail won't persist after close — this is the expected behavior
-      // unless the child lives outside the edit slot.
-      expect(true).toBe(true)
+      // Now the collapsed/untouched offender is revealed.
+      expect(isInvalid(2)).toBe(true)
+      expect(isInvalid(1)).toBe(false)
     })
 
-    it('child rendered outside the edit slot keeps the invalid class', async () => {
-      // Render the child inside #item-compact (always mounted) so registration
-      // sticks regardless of edit state.
-      const data = items()
-      const ChildForm = defineComponent({
-        props: { itemKey: { type: Number, required: true } },
-        setup(p) {
-          const localState = computed<ListEditorValidationState>(() =>
-            p.itemKey === 2 ? 'invalid' : null,
-          )
-          useListEditorItemValidation({
-            key: () => p.itemKey,
-            state: localState,
-          })
-          return () => h('span', `compact-${p.itemKey}`)
+    it('validateAll() returns true when every row is valid', async () => {
+      const data = ref<Item[]>(items())
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(AListEditor<Item>, {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
+              },
+              factory: makeItem,
+              validate: (item: Item) => !!item.title,
+            })
         },
       })
+      mounted = mount(Host, { attachTo: document.body })
+      await nextTick()
+      expect(exposed(mounted!).validateAll()).toBe(true)
+    })
+  })
+
+  describe('validate reactivity + handle summary', () => {
+    it('hasErrors / invalidKeys reflect the current validate result', async () => {
+      const data = ref<Item[]>([
+        { id: 1, position: 1, title: 'A' },
+        { id: 2, position: 2, title: '' },
+      ])
       const Host = defineComponent({
         setup() {
           return () =>
-            h(
-              AListEditor<Item>,
-              { modelValue: data },
-              {
-                'item-compact': ({ raw }: { raw: Item }) =>
-                  h(ChildForm, { itemKey: raw.id }),
+            h(AListEditor<Item>, {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
               },
-            )
+              factory: makeItem,
+              validate: (item: Item) => !!item.title,
+            })
         },
       })
       mounted = mount(Host, { attachTo: document.body })
       await nextTick()
+      expect(exposed(mounted!).hasErrors.value).toBe(true)
+      expect(exposed(mounted!).invalidKeys.value.has(2)).toBe(true)
+      expect(exposed(mounted!).invalidKeys.value.has(1)).toBe(false)
+
+      // Fix row 2 → no more errors.
+      data.value = [data.value[0], { ...data.value[1], title: 'B' }]
       await nextTick()
-      expect(isInvalid(2)).toBe(true)
-      expect(isInvalid(1)).toBe(false)
+      expect(exposed(mounted!).hasErrors.value).toBe(false)
+      expect(exposed(mounted!).invalidKeys.value.size).toBe(0)
     })
 
-    it('registry takes priority over getValidationState prop', async () => {
-      const data = items()
-      const ChildForm = defineComponent({
-        props: { itemKey: { type: Number, required: true } },
-        setup(p) {
-          // Child says row 1 is invalid (registry source)
-          const localState = computed<ListEditorValidationState>(() =>
-            p.itemKey === 1 ? 'invalid' : null,
-          )
-          useListEditorItemValidation({
-            key: () => p.itemKey,
-            state: localState,
-          })
-          return () => h('span', String(p.itemKey))
-        },
-      })
+    it('supports the { valid, state: "warning" } shape (warning never blocks save)', async () => {
+      const data = ref<Item[]>([{ id: 1, position: 1, title: 'short' }])
       const Host = defineComponent({
         setup() {
           return () =>
-            h(
-              AListEditor<Item>,
-              {
-                modelValue: data,
-                // Prop says row 2 is invalid — but registry hasn't registered row 2,
-                // so prop applies for row 2. Row 1 → registry says invalid (wins).
-                getValidationState: (item: Item) =>
-                  item.id === 2 ? 'invalid' : null,
-              },
-              {
-                'item-compact': ({ raw }: { raw: Item }) =>
-                  h(ChildForm, { itemKey: raw.id }),
+            h(AListEditor<Item>, {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
               },
-            )
+              factory: makeItem,
+              validate: (item: Item) =>
+                item.title.length > 10
+                  ? { valid: true }
+                  : { valid: true, state: 'warning' as const },
+            })
         },
       })
       mounted = mount(Host, { attachTo: document.body })
       await nextTick()
-      await nextTick()
-      expect(isInvalid(1)).toBe(true)
-      expect(isInvalid(2)).toBe(true)
-      expect(isInvalid(3)).toBe(false)
+      // Warning paints the warning rail (not invalid) and never blocks save.
+      expect(findRow(1)?.classList.contains('a-le-row--validation-warning')).toBe(true)
+      expect(isInvalid(1)).toBe(false)
+      expect(exposed(mounted!).hasErrors.value).toBe(false)
+      expect(exposed(mounted!).validateAll()).toBe(true)
     })
   })
 })
diff --git a/src/test/components/ANestedSortableListEditor.test.ts b/src/test/components/ANestedSortableListEditor.test.ts
index 81070fea..b4139671 100644
--- a/src/test/components/ANestedSortableListEditor.test.ts
+++ b/src/test/components/ANestedSortableListEditor.test.ts
@@ -1,8 +1,39 @@
 /* eslint-disable vue/no-ref-object-reactivity-loss */
-import { describe, it, expect, vi } from 'vitest'
+import { afterEach, describe, it, expect, vi } from 'vitest'
 import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
 import { defineComponent, h, nextTick, ref } from 'vue'
 import ANestedSortableListEditor from '@/labs/listEditor/ANestedSortableListEditor.vue'
+
+// Drag is gated on `useIsTouchDevice()` (`!matchMedia('(any-pointer: fine)')` — only a device
+// with NO precise pointer cannot drag). Drive that input explicitly rather than tolerating
+// whatever the environment happens to report — `isTouch` is read at setup, so install before mount.
+const makeMatchMedia = (hasFinePointer: boolean) =>
+  vi.fn((q: string) => ({
+    matches:
+      (hasFinePointer && q.includes('any-pointer: fine')) ||
+      (!hasFinePointer && q.includes('any-pointer: coarse')),
+    media: q,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    onchange: null,
+    dispatchEvent: vi.fn(),
+  }))
+
+let restoreMatchMedia: (() => void) | null = null
+// `coarseOnly: true` = a touch-only device (no mouse/trackpad/pen) — the one case that cannot drag.
+const forcePointerKind = (coarseOnly: boolean) => {
+  const original = window.matchMedia
+  restoreMatchMedia = () => {
+    window.matchMedia = original
+  }
+  window.matchMedia = makeMatchMedia(!coarseOnly) as unknown as typeof window.matchMedia
+}
+afterEach(() => {
+  restoreMatchMedia?.()
+  restoreMatchMedia = null
+})
 import type { NestedTree } from '@/labs/listEditor/types/listEditorTypes'
 import type { NestedViewItem } from '@/labs/listEditor/composables/useNestedListEditor'
 
@@ -14,23 +45,26 @@ interface MenuItem {
   status?: string
 }
 
+// Positions are deliberately SPARSE. With `index + 1` positions (1,2,3) every position
+// assertion is degenerate — that is exactly what the controller's renumber emits, so
+// "untouched" and "renumbered" look identical and nothing can tell them apart.
 const tree = (): NestedTree<MenuItem> => ({
   children: [
     {
-      data: { id: 1, position: 1, parent: null, title: 'Home', status: 'Active' },
+      data: { id: 1, position: 10, parent: null, title: 'Home', status: 'Active' },
       children: [],
       meta: { dirty: false },
     },
     {
-      data: { id: 2, position: 2, parent: null, title: 'News', status: 'Active' },
+      data: { id: 2, position: 20, parent: null, title: 'News', status: 'Active' },
       children: [
         {
-          data: { id: 21, position: 1, parent: 2, title: 'Sport', status: 'Draft' },
+          data: { id: 21, position: 10, parent: 2, title: 'Sport', status: 'Draft' },
           children: [],
           meta: { dirty: false },
         },
         {
-          data: { id: 22, position: 2, parent: 2, title: 'Weather', status: 'Active' },
+          data: { id: 22, position: 20, parent: 2, title: 'Weather', status: 'Active' },
           children: [],
           meta: { dirty: false },
         },
@@ -38,7 +72,7 @@ const tree = (): NestedTree<MenuItem> => ({
       meta: { dirty: false },
     },
     {
-      data: { id: 3, position: 3, parent: null, title: 'About', status: 'Draft' },
+      data: { id: 3, position: 310, parent: null, title: 'About', status: 'Draft' },
       children: [],
       meta: { dirty: false },
     },
@@ -85,8 +119,8 @@ const clickReorder = (wrapper: VueWrapper) =>
     .findAll('button')
     .find(
       (b) =>
-        b.text().toLowerCase().includes('reorder')
-        || (b.find('.mdi-sort').exists() && !b.classes().includes('v-btn--disabled')),
+        b.text().toLowerCase().includes('reorder') ||
+        (b.find('.mdi-sort').exists() && !b.classes().includes('v-btn--disabled')),
     )!
     .trigger('click')
 
@@ -114,7 +148,9 @@ describe('ANestedSortableListEditor', () => {
 
     it('renders the reorder toggle by default', () => {
       const { wrapper } = mountEditor()
-      const toggle = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('reorder'))
+      const toggle = wrapper
+        .findAll('button')
+        .find((b) => b.text().toLowerCase().includes('reorder'))
       expect(toggle).toBeTruthy()
     })
   })
@@ -151,10 +187,15 @@ describe('ANestedSortableListEditor', () => {
       const { wrapper } = mountEditor()
       await clickReorder(wrapper)
       await flushPromises()
-      const ups = wrapper.findAll('.a-le-action--up')
-      const downs = wrapper.findAll('.a-le-action--down')
-      expect(ups[0].attributes('disabled')).toBeDefined() // Home (first root)
-      expect(downs[downs.length - 1].attributes('disabled')).toBeDefined() // About (last root)
+      const disabled = (sel: string) =>
+        wrapper.findAll(sel).map((b) => b.attributes('disabled') !== undefined)
+      // Flat DOM order: Home(root 0), News(root 1), Sport(child 0), Weather(child 1), About(root 2).
+      // "per group" is the whole point of the name, so the CHILD group must be checked too —
+      // asserting only ups[0] / downs[last] is satisfied by flat-index logic and would miss the
+      // classic tree bug where a child's first/last is computed against the flat list instead of
+      // its siblings (Sport would then not be up-disabled, Weather not down-disabled).
+      expect(disabled('.a-le-action--up')).toEqual([true, false, true, false, false])
+      expect(disabled('.a-le-action--down')).toEqual([false, false, false, true, true])
     })
 
     it('marks moved rows as unsaved', async () => {
@@ -194,9 +235,7 @@ describe('ANestedSortableListEditor', () => {
       await flushPromises()
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
 
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       await apply.trigger('click')
       await flushPromises()
 
@@ -213,9 +252,7 @@ describe('ANestedSortableListEditor', () => {
       const { wrapper, model, mode } = mountEditor(tree(), { onReorderApply: save })
       await clickReorder(wrapper)
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       await apply.trigger('click')
       await flushPromises()
 
@@ -229,9 +266,7 @@ describe('ANestedSortableListEditor', () => {
       const { wrapper, mode, editor } = mountEditor(tree(), { onReorderApply: save })
       await clickReorder(wrapper)
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       await apply.trigger('click')
       await flushPromises()
 
@@ -250,7 +285,7 @@ describe('ANestedSortableListEditor', () => {
       expect(api.indent).toBeTypeOf('function')
       const res = api.indent(3) // indent About (id=3)
       await flushPromises()
-      expect(res).not.toBeNull()
+      expect(res).toBe(true)
       // About should now be a child of News (the prev sibling)
       const news = model.value.children.find((n) => n.data.id === 2)!
       expect(news.children!.map((c) => c.data.id)).toEqual([21, 22, 3])
@@ -291,7 +326,7 @@ describe('ANestedSortableListEditor', () => {
       const api = editorExposed(wrapper)
       // Try to indent B (id=20) under A — would make B's subtree depth 4 (A>B>B1>B1a), exceeds 3
       const res = api.indent(20)
-      expect(res).toBeNull()
+      expect(res).toBe(false)
       // Model unchanged
       expect(model.value.children.map((n) => n.data.id)).toEqual([10, 20])
     })
@@ -312,7 +347,7 @@ describe('ANestedSortableListEditor', () => {
       const { wrapper } = mountEditor()
       const api = editorExposed(wrapper)
       const res = api.outdent(1) // Home is already root
-      expect(res).toBeNull()
+      expect(res).toBe(false)
     })
   })
 
@@ -325,14 +360,24 @@ describe('ANestedSortableListEditor', () => {
       expect(model.value.children.map((n) => n.data.id)).toEqual([1, 99, 2, 3])
     })
 
-    it('addChildToId appends as child and auto-expands the parent', async () => {
+    it('addChildToId PREPENDS as first child and auto-expands the parent', async () => {
       const { wrapper, model } = mountEditor()
+      // Collapse News (id=2) first: auto-expand is unobservable on an already-expanded parent,
+      // and News — unlike Home — already HAS children, so prepend vs append is distinguishable.
+      // The old test targeted Home (no children) and named itself "appends", which the empty
+      // fixture could not contradict: this legacy API passes `asFirstChild: true`, i.e. PREPEND.
+      await wrapper.findAll('.a-nested-list-editor__tree-toggle')[1].trigger('click')
+      await nextTick()
+      expect(wrapper.findAll('.a-le-row').length).toBe(3)
+
       const api = editorExposed(wrapper)
-      // Home currently has no children. Add one.
-      api.addChildToId(1, { id: 101, position: 0, parent: 1, title: 'Sub' }, true)
+      api.addChildToId(2, { id: 101, position: 0, parent: 2, title: 'Sub' }, true)
       await flushPromises()
-      const home = model.value.children.find((n) => n.data.id === 1)!
-      expect(home.children!.map((c) => c.data.id)).toEqual([101])
+
+      const news = model.value.children.find((n) => n.data.id === 2)!
+      expect(news.children!.map((c) => c.data.id)).toEqual([101, 21, 22])
+      // Auto-expand — the other half of the name, previously never asserted.
+      expect(wrapper.findAll('.a-le-row').length).toBe(6)
     })
 
     it('removeById removes the node and recalculates sibling positions', async () => {
@@ -341,6 +386,10 @@ describe('ANestedSortableListEditor', () => {
       api.removeById(1)
       await flushPromises()
       expect(model.value.children.map((n) => n.data.id)).toEqual([2, 3])
+      // The "recalculates sibling positions" half of the name: no `expect` in this file
+      // touched `.position` at all, so the renumber-on-remove was entirely unpinned.
+      // Loaded sparse (10/20/310) → compacted to the 1-based series after the removal.
+      expect(model.value.children.map((n) => n.data.position)).toEqual([1, 2])
     })
 
     it('updateData replaces data of a node by id', async () => {
@@ -352,14 +401,17 @@ describe('ANestedSortableListEditor', () => {
     })
 
     it('resetDirtyBaseline clears the unsaved indicator after server-confirmed operation', async () => {
-      const { wrapper } = mountEditor()
+      const { wrapper, model } = mountEditor()
       const api = editorExposed(wrapper)
-      // Simulate external mutation — change title in-place (dirty)
-      await wrapper.vm.$nextTick()
-      // Re-capture baseline after the supposed save
+      // Actually dirty a row FIRST — edit a node's title in place — so a no-op reset can't pass.
+      const fresh = JSON.parse(JSON.stringify(model.value)) as NestedTree<MenuItem>
+      fresh.children[0].data.title = 'Home edited'
+      model.value = fresh
+      await nextTick()
+      expect(wrapper.findAll('.a-le-row--unsaved').length).toBeGreaterThan(0)
+      // Re-capture baseline (as after a successful save) — the dirty marker must clear.
       api.resetDirtyBaseline()
       await flushPromises()
-      // No dirty rows in DOM
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
     })
   })
@@ -367,17 +419,31 @@ describe('ANestedSortableListEditor', () => {
   describe('readonly mode', () => {
     it('hides edit/delete/add buttons and the reorder toggle', () => {
       const { wrapper } = mountEditor(tree(), { readonly: true })
-      // Reorder toggle should be absent (disabled) in readonly
+      // `reorderToggleVisible` ANDs `!readonly`, so the toggle is not rendered at all. The old
+      // `if (reorder) { … }` body therefore never executed — the reorder-toggle half of the
+      // name was unasserted, and so was "add". Assert both unconditionally.
       const reorder = wrapper
         .findAll('button')
         .find((b) => b.text().toLowerCase().includes('reorder'))
-      if (reorder) {
-        expect(reorder.attributes('disabled')).toBeDefined()
-      }
+      expect(reorder).toBeUndefined()
+      expect(wrapper.find('.a-le-row-add').exists()).toBe(false)
       // Edit + delete buttons should be 0 in readonly (canInteract === false)
       expect(wrapper.findAll('.a-le-action--edit').length).toBe(0)
       expect(wrapper.findAll('.a-le-action--delete').length).toBe(0)
     })
+
+    it('renders the reorder toggle and add button when NOT readonly (control)', () => {
+      // Negative control: proves the assertions above are `readonly`'s doing, not the
+      // scaffold's — without it "no buttons found" could just mean "wrong selector".
+      const { wrapper } = mountEditor()
+      const reorder = wrapper
+        .findAll('button')
+        .find((b) => b.text().toLowerCase().includes('reorder'))
+      expect(reorder).toBeTruthy()
+      expect(wrapper.find('.a-le-row-add').exists()).toBe(true)
+      expect(wrapper.findAll('.a-le-action--edit').length).toBeGreaterThan(0)
+      expect(wrapper.findAll('.a-le-action--delete').length).toBeGreaterThan(0)
+    })
   })
 
   describe('slots', () => {
@@ -445,15 +511,41 @@ describe('ANestedSortableListEditor', () => {
     })
 
     it('hides the add-child button for nodes whose children are undefined', () => {
-      const { wrapper } = mountEditor(mkLeafTree(), { showAddChildButton: true })
+      // maxDepth 3 — NOT the default 2 — is load-bearing. `canAddChild = childrenAllowed &&
+      // remainingDepth > 0`: at maxDepth 2 the depth-1 leaf is already at the cap, so the depth
+      // gate alone hid its menu and `childrenAllowed: false` was never the reason. At maxDepth 3
+      // the leaf has depth to spare, leaving `children: undefined` as the only cause.
+      const { wrapper } = mountEditor(mkLeafTree(), { showAddChildButton: true, maxDepth: 3 })
       // 2 rows total (Parent + PageChildren-style). Parent has children allowed, leaf does not.
-      // Add-child now lives inside the overflow (⋮) menu — so the menu button itself only
-      // renders on rows where add-child or add-after is available. With add-after disabled
-      // the menu button exists iff canAddChild is true, i.e. on the Parent row only.
+      // Add-child lives inside the overflow (⋮) menu — with add-after disabled the menu button
+      // exists iff canAddChild is true, i.e. on the Parent row only.
       const overflow = wrapper.findAll('.a-le-action--menu')
       expect(overflow.length).toBe(1)
     })
 
+    it('shows add-child for a depth-equivalent node that DOES allow children (control)', () => {
+      // Same depth, same maxDepth — only `children: []` instead of `undefined`. Isolates
+      // childrenAllowed as the discriminator rather than anything about the tree's shape.
+      const allowed: NestedTree<MenuItem> = {
+        children: [
+          {
+            data: { id: 1, position: 10, parent: null, title: 'Parent' },
+            children: [
+              {
+                data: { id: 10, position: 10, parent: 1, title: 'Nestable child' },
+                children: [],
+                meta: { dirty: false },
+              },
+            ],
+            meta: { dirty: false },
+          },
+        ],
+        meta: { dirty: false },
+      }
+      const { wrapper } = mountEditor(allowed, { showAddChildButton: true, maxDepth: 3 })
+      expect(wrapper.findAll('.a-le-action--menu').length).toBe(2)
+    })
+
     it('does not expand-toggle a leaf node with children: undefined', () => {
       const { wrapper } = mountEditor(mkLeafTree())
       // Filter out spacer elements — those are invisible alignment stand-ins
@@ -472,9 +564,11 @@ describe('ANestedSortableListEditor', () => {
       await clickReorder(wrapper)
       await flushPromises()
       const editor = findEditor(wrapper)
-      const exposed = (editor.vm as unknown as {
-        $: { exposed: { moveTop: (id: number) => unknown } }
-      }).$.exposed
+      const exposed = (
+        editor.vm as unknown as {
+          $: { exposed: { moveTop: (id: number) => unknown } }
+        }
+      ).$.exposed
       exposed.moveTop(3) // About is last root; move to top
       await flushPromises()
       expect(model.value.children.map((n) => n.data.id)).toEqual([3, 1, 2])
@@ -485,9 +579,11 @@ describe('ANestedSortableListEditor', () => {
       await clickReorder(wrapper)
       await flushPromises()
       const editor = findEditor(wrapper)
-      const exposed = (editor.vm as unknown as {
-        $: { exposed: { moveBottom: (id: number) => unknown } }
-      }).$.exposed
+      const exposed = (
+        editor.vm as unknown as {
+          $: { exposed: { moveBottom: (id: number) => unknown } }
+        }
+      ).$.exposed
       exposed.moveBottom(1) // Home is first root; move to bottom
       await flushPromises()
       expect(model.value.children.map((n) => n.data.id)).toEqual([2, 3, 1])
@@ -521,7 +617,7 @@ describe('ANestedSortableListEditor', () => {
   })
 
   describe('#item-readonly slot expansion', () => {
-    it('renders #item-readonly body when row is expanded in readonly mode', async () => {
+    const mountReadonly = (readonly: boolean) => {
       const model = ref<NestedTree<MenuItem>>(tree())
       const Host = defineComponent({
         setup() {
@@ -534,7 +630,7 @@ describe('ANestedSortableListEditor', () => {
                   model.value = v
                 },
                 maxDepth: 2,
-                readonly: true,
+                readonly,
               },
               {
                 'item-readonly': ({ raw }: { raw: MenuItem }) =>
@@ -543,11 +639,24 @@ describe('ANestedSortableListEditor', () => {
             )
         },
       })
-      const wrapper = mount(Host)
-      // Click first row header to expand
-      await wrapper.findAll('.a-le-row-header')[0].trigger('click')
-      await nextTick()
-      expect(wrapper.find('.my-readonly').exists()).toBe(true)
+      return mount(Host)
+    }
+
+    it('renders the #item-readonly body on every row in readonly mode, without expanding', () => {
+      // The gate is `$slots['item-readonly'] && (context.readonly || vi.expanded)`, so in
+      // readonly the body is present from the first render. The old test clicked a row header
+      // first and called itself "when expanded" — the click was a no-op that could not fail,
+      // because `readonly` had already short-circuited the condition.
+      const wrapper = mountReadonly(true)
+      expect(wrapper.findAll('.my-readonly').length).toBe(5)
+      expect(wrapper.find('.my-readonly').text()).toBe('ro-1')
+    })
+
+    it('does not render the #item-readonly body on an unexpanded row when NOT readonly', () => {
+      // The other side of the `readonly || vi.expanded` disjunction — without this the
+      // `readonly` term could be dropped and the test above would still pass.
+      const wrapper = mountReadonly(false)
+      expect(wrapper.find('.my-readonly').exists()).toBe(false)
     })
   })
 
@@ -609,9 +718,11 @@ describe('ANestedSortableListEditor', () => {
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
       // Reset baseline via exposed API
       const editor = findEditor(wrapper)
-      const exposed = (editor.vm as unknown as {
-        $: { exposed: { resetDirtyBaseline: () => void } }
-      }).$.exposed
+      const exposed = (
+        editor.vm as unknown as {
+          $: { exposed: { resetDirtyBaseline: () => void } }
+        }
+      ).$.exposed
       exposed.resetDirtyBaseline()
       await nextTick()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
@@ -633,13 +744,25 @@ describe('ANestedSortableListEditor', () => {
 
   describe('drag-enabled state in reorder mode', () => {
     it('sets --drag-enabled root class on desktop-like environment in reorder mode', async () => {
+      // The old `expect(rootHasDragClass || arrowsCount > 0)` disjunction was satisfied by the
+      // arrows alone, which always render in reorder mode — so it never pinned drag state.
+      forcePointerKind(false)
+      const { wrapper } = mountEditor()
+      await clickReorder(wrapper)
+      await flushPromises()
+      expect(wrapper.find('.a-nested-list-editor--drag-enabled').exists()).toBe(true)
+      expect(wrapper.findAll('.a-le-drag-handle').length).toBeGreaterThan(0)
+    })
+
+    it('withholds --drag-enabled in reorder mode on a coarse pointer', async () => {
+      forcePointerKind(true)
       const { wrapper } = mountEditor()
       await clickReorder(wrapper)
       await flushPromises()
-      // On a non-touch viewport the drag-enabled class is expected; on touch the arrows are used.
-      const rootHasDragClass = wrapper.find('.a-nested-list-editor--drag-enabled').exists()
-      const arrowsCount = wrapper.findAll('.a-le-action--up').length
-      expect(rootHasDragClass || arrowsCount > 0).toBe(true)
+      expect(wrapper.find('.a-nested-list-editor--drag-enabled').exists()).toBe(false)
+      expect(wrapper.find('.a-le-drag-handle').exists()).toBe(false)
+      // The arrows render either way — the reason they can't serve as the drag oracle.
+      expect(wrapper.findAll('.a-le-action--up').length).toBeGreaterThan(0)
     })
 
     it('hides drag handle when disableDrag=true even in reorder mode', async () => {
@@ -680,9 +803,7 @@ describe('ANestedSortableListEditor', () => {
       const { wrapper } = mountEditor()
       await clickReorder(wrapper)
       await flushPromises()
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       expect(apply.attributes('disabled')).toBeDefined()
     })
 
@@ -692,15 +813,17 @@ describe('ANestedSortableListEditor', () => {
       await flushPromises()
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
       await flushPromises()
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       expect(apply.attributes('disabled')).toBeUndefined()
     })
   })
 
   describe('movedKeys lifecycle', () => {
-    it('entering reorder mode clears any prior movedKeys', async () => {
+    it('cancelling a reorder session clears that session movedKeys', async () => {
+      // This is what the old "entering reorder mode clears any prior movedKeys" body actually
+      // exercised: Cancel already empties movedKeys, so the final re-enter assertion had
+      // nothing left to clear and could not fail. Named for what it checks; the real
+      // enter-clears-prior-markers claim is the test below.
       const { wrapper } = mountEditor()
       await clickReorder(wrapper)
       await flushPromises()
@@ -714,6 +837,21 @@ describe('ANestedSortableListEditor', () => {
       await cancel.trigger('click')
       await flushPromises()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
+    })
+
+    it('entering reorder mode clears movedKeys left over from a prior APPLIED session', async () => {
+      // Apply deliberately KEEPS movedKeys (the consumer must still persist), so an applied
+      // session is the only way to still have prior markers when the next session opens —
+      // i.e. the only setup in which "entering clears them" is falsifiable.
+      const { wrapper } = mountEditor()
+      await clickReorder(wrapper)
+      await flushPromises()
+      await wrapper.findAll('.a-le-action--down')[0].trigger('click')
+      await flushPromises()
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
+      await apply.trigger('click')
+      await flushPromises()
+      expect(wrapper.findAll('.a-le-row--unsaved').length).toBeGreaterThan(0)
 
       await clickReorder(wrapper)
       await flushPromises()
@@ -727,9 +865,7 @@ describe('ANestedSortableListEditor', () => {
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
       await flushPromises()
 
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       await apply.trigger('click')
       await flushPromises()
 
@@ -807,9 +943,7 @@ describe('ANestedSortableListEditor', () => {
         // portal children are fully mounted before we query.
         await new Promise((r) => setTimeout(r, 50))
 
-        const openItems = document.querySelectorAll(
-          '.v-overlay--active.v-menu .v-list-item',
-        )
+        const openItems = document.querySelectorAll('.v-overlay--active.v-menu .v-list-item')
         expect(openItems.length).toBeGreaterThanOrEqual(2)
         const titles = Array.from(openItems).map(
           (el) => el.querySelector('.v-list-item-title')?.textContent?.trim() ?? '',
@@ -817,9 +951,7 @@ describe('ANestedSortableListEditor', () => {
         // "Add after this item" comes first, "Add inside" second.
         expect(titles[0]).toBe('Add after this item')
         expect(titles[1]).toBe('Add inside')
-        const icons = Array.from(openItems).map(
-          (el) => el.querySelector('.mdi')?.className ?? '',
-        )
+        const icons = Array.from(openItems).map((el) => el.querySelector('.mdi')?.className ?? '')
         expect(icons[0]).toContain('mdi-playlist-plus')
         expect(icons[1]).toContain('mdi-subdirectory-arrow-right')
       } finally {
@@ -865,9 +997,9 @@ describe('ANestedSortableListEditor', () => {
         )
         const titleTexts = openMenuTitles.map((el) => el.textContent?.trim() ?? '')
         expect(titleTexts).toContain('Delete')
-        const deleteTitleEl = openMenuTitles.find(
-          (el) => el.textContent?.trim() === 'Delete',
-        ) as HTMLElement | undefined
+        const deleteTitleEl = openMenuTitles.find((el) => el.textContent?.trim() === 'Delete') as
+          | HTMLElement
+          | undefined
         expect(deleteTitleEl?.classList.contains('text-error')).toBe(true)
       } finally {
         wrapper.unmount()
@@ -883,13 +1015,18 @@ describe('ANestedSortableListEditor', () => {
       // assert the new node lands at the end of the children array.
       const { wrapper, model } = mountEditor()
       const editor = findEditor(wrapper)
-      const exposed = (editor.vm as unknown as {
-        $: {
-          exposed: {
-            addItem: (data: MenuItem, hint?: { parentId?: number; childrenAllowed?: boolean }) => unknown
+      const exposed = (
+        editor.vm as unknown as {
+          $: {
+            exposed: {
+              addItem: (
+                data: MenuItem,
+                hint?: { parentId?: number; childrenAllowed?: boolean },
+              ) => unknown
+            }
           }
         }
-      }).$.exposed
+      ).$.exposed
       // News (id=2) already has children [21, 22]. Add inside should land as
       // the third and last child, NOT at index 0 (which was the old
       // `asFirstChild` semantic, still used by the imperative `addChildToId`).
@@ -938,16 +1075,21 @@ describe('ANestedSortableListEditor', () => {
 // need to invoke tree mutations directly (kebab-menu targets are inside a
 // Vuetify VMenu popover and are not always stable in headless test DOM).
 interface EditorApi {
-  indent: (id: number) => unknown
-  outdent: (id: number) => unknown
+  indent: (id: number) => boolean
+  outdent: (id: number) => boolean
   addAfterId: (targetId: number | null, data: MenuItem, childrenAllowed: boolean) => unknown
   addChildToId: (targetId: number, data: MenuItem, childrenAllowed: boolean) => unknown
   removeById: (id: number) => void
   updateData: (id: number, data: MenuItem) => void
   resetDirtyBaseline: () => void
   addItem: (
-    data: MenuItem,
-    hint?: { parentId?: number; afterId?: number; asFirstChild?: boolean; childrenAllowed?: boolean },
+    data?: MenuItem,
+    hint?: {
+      parentId?: number
+      afterId?: number
+      asFirstChild?: boolean
+      childrenAllowed?: boolean
+    },
   ) => unknown
 }
 function editorExposed(wrapper: VueWrapper): EditorApi {
diff --git a/src/test/components/ASortableListEditor.test.ts b/src/test/components/ASortableListEditor.test.ts
index 8608c67c..84ce6afb 100644
--- a/src/test/components/ASortableListEditor.test.ts
+++ b/src/test/components/ASortableListEditor.test.ts
@@ -1,9 +1,42 @@
 /* eslint-disable vue/no-ref-object-reactivity-loss */
-import { describe, it, expect, vi } from 'vitest'
+import { afterEach, describe, it, expect, vi } from 'vitest'
+
 import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
 import { defineComponent, h, nextTick, ref } from 'vue'
 import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
 
+// Drag is gated on `useIsTouchDevice()` (`!matchMedia('(any-pointer: fine)')` — only a device
+// with NO precise pointer cannot drag). Tests that assert drag state must DRIVE that input
+// rather than read it back off the component, so pin the pointer kind explicitly before mount —
+// same lever as ASortableListEditorTouchDrag.test.ts. `isTouch` is read at setup, so install it first.
+const makeMatchMedia = (hasFinePointer: boolean) =>
+  vi.fn((q: string) => ({
+    matches:
+      (hasFinePointer && q.includes('any-pointer: fine')) ||
+      (!hasFinePointer && q.includes('any-pointer: coarse')),
+    media: q,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    onchange: null,
+    dispatchEvent: vi.fn(),
+  }))
+
+let restoreMatchMedia: (() => void) | null = null
+// `coarseOnly: true` = a touch-only device (no mouse/trackpad/pen) — the one case that cannot drag.
+const forcePointerKind = (coarseOnly: boolean) => {
+  const original = window.matchMedia
+  restoreMatchMedia = () => {
+    window.matchMedia = original
+  }
+  window.matchMedia = makeMatchMedia(!coarseOnly) as unknown as typeof window.matchMedia
+}
+afterEach(() => {
+  restoreMatchMedia?.()
+  restoreMatchMedia = null
+})
+
 interface FaqItem {
   id: number
   position: number
@@ -11,11 +44,15 @@ interface FaqItem {
   status?: string
 }
 
+// Positions are deliberately SPARSE and non-sequential. With `index + 1` positions
+// (1,2,3,4) every position assertion here is degenerate: that is exactly what
+// `renumberPositions` emits, so "left untouched" and "fully renumbered" produce the same
+// array and no assertion can tell them apart. Sparse values keep the two distinguishable.
 const items = (): FaqItem[] => [
-  { id: 1, position: 1, title: 'First', status: 'Active' },
-  { id: 2, position: 2, title: 'Second', status: 'Draft' },
-  { id: 3, position: 3, title: 'Third', status: 'Active' },
-  { id: 4, position: 4, title: 'Fourth', status: 'Draft' },
+  { id: 1, position: 10, title: 'First', status: 'Active' },
+  { id: 2, position: 20, title: 'Second', status: 'Draft' },
+  { id: 3, position: 310, title: 'Third', status: 'Active' },
+  { id: 4, position: 400, title: 'Fourth', status: 'Draft' },
 ]
 
 const findSortable = (w: VueWrapper): VueWrapper =>
@@ -38,6 +75,8 @@ const mountEditor = (data: FaqItem[] = items(), extra: Record<string, unknown> =
           'onUpdate:mode': (v: 'view' | 'reorder') => {
             mode.value = v
           },
+          factory: (): FaqItem => ({ id: -Date.now(), position: 0, title: '' }),
+          compactField: 'title',
           ...extra,
         })
     },
@@ -56,8 +95,8 @@ const clickToggle = (wrapper: VueWrapper) =>
     .findAll('button')
     .find(
       (b) =>
-        b.text().toLowerCase().includes('reorder')
-        || (b.find('.mdi-sort').exists() && !b.classes().includes('v-btn--disabled')),
+        b.text().toLowerCase().includes('reorder') ||
+        (b.find('.mdi-sort').exists() && !b.classes().includes('v-btn--disabled')),
     )!
     .trigger('click')
 
@@ -74,7 +113,9 @@ describe('ASortableListEditor', () => {
 
     it('renders the reorder toggle button by default when showReorderToggle=true', () => {
       const { wrapper } = mountEditor()
-      const toggle = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('reorder'))
+      const toggle = wrapper
+        .findAll('button')
+        .find((b) => b.text().toLowerCase().includes('reorder'))
       expect(toggle).toBeTruthy()
     })
 
@@ -86,7 +127,9 @@ describe('ASortableListEditor', () => {
 
     it('disables the toggle when the list has fewer than 2 items', () => {
       const { wrapper } = mountEditor([items()[0]])
-      const toggle = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('reorder'))
+      const toggle = wrapper
+        .findAll('button')
+        .find((b) => b.text().toLowerCase().includes('reorder'))
       // with single-item list reorder toggle should not show at all OR be disabled
       if (toggle) {
         expect(toggle.attributes('disabled')).toBeDefined()
@@ -163,15 +206,159 @@ describe('ASortableListEditor', () => {
     })
   })
 
+  describe('drag reorder (SortableJS) — synchronous move + position recalc', () => {
+    // Regression context: vueuse's useSortable moves the bound array inside a
+    // nextTick and the position renumber ran in a *separate* nextTick, leaving a
+    // window where a consumer "sort by position" watch re-sorted using stale
+    // positions and reverted the drop. The editor now does the move + renumber
+    // synchronously via editor.moveItem in its own onUpdate. These cover both
+    // drag directions, the no-updatePosition path, and DOM integrity to make
+    // sure the custom onUpdate didn't regress any consumer of the shared editor.
+    // Real SortableJS drag needs live, attached DOM, so these mount to body.
+    const mountSortable = (extraProps: Record<string, unknown> = {}) => {
+      const model = ref<FaqItem[]>(items())
+      const mode = ref<'view' | 'reorder'>('reorder')
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(ASortableListEditor<FaqItem>, {
+              modelValue: model.value,
+              'onUpdate:modelValue': (v: FaqItem[]) => {
+                model.value = v
+              },
+              mode: mode.value,
+              'onUpdate:mode': (v: 'view' | 'reorder') => {
+                mode.value = v
+              },
+              factory: (): FaqItem => ({ id: -Date.now(), position: 0, title: '' }),
+              compactField: 'title',
+              ...extraProps,
+            })
+        },
+      })
+      const wrapper = mount(Host, { attachTo: document.body })
+      return { wrapper, model }
+    }
+
+    // Drive forceFallback SortableJS with raw pointer/mouse events: grab the
+    // handle of row `fromIdx`, drag onto the vertical centre of row `toIdx`.
+    const dragRowOntoRow = async (wrapper: VueWrapper, fromIdx: number, toIdx: number) => {
+      const handles = wrapper.findAll('.a-le-drag-handle')
+      const rows = wrapper.findAll('.a-le-row')
+      const handle = handles[fromIdx].element as HTMLElement
+      const target = rows[toIdx].element as HTMLElement
+      const sb = handle.getBoundingClientRect()
+      const tb = target.getBoundingClientRect()
+      const x = Math.round(sb.x + sb.width / 2)
+      const startY = Math.round(sb.y + sb.height / 2)
+      // Aim a few px past the target centre in the travel direction so the
+      // dragged row crosses the target midpoint and SortableJS commits a swap.
+      const endY = Math.round(tb.y + tb.height / 2 + (toIdx > fromIdx ? 6 : -6))
+      const fire = (type: string, y: number, target2: EventTarget = document) =>
+        target2.dispatchEvent(
+          new MouseEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            clientX: x,
+            clientY: y,
+            button: 0,
+            buttons: type === 'mouseup' || type === 'pointerup' ? 0 : 1,
+            view: window,
+          }),
+        )
+      fire('pointerdown', startY, handle)
+      fire('mousedown', startY, handle)
+      const steps = 26
+      for (let i = 1; i <= steps; i++) {
+        const y = Math.round(startY + ((endY - startY) * i) / steps)
+        fire('pointermove', y)
+        fire('mousemove', y)
+        await new Promise((r) => setTimeout(r, 8))
+      }
+      await new Promise((r) => setTimeout(r, 60))
+      fire('pointerup', endY)
+      fire('mouseup', endY)
+      await flushPromises()
+      await nextTick()
+      await nextTick()
+    }
+
+    it('drag last → first renumbers positions to the new order (no stale positions)', async () => {
+      const { wrapper, model } = mountSortable()
+      await nextTick()
+      await flushPromises()
+      expect(wrapper.findAll('.a-le-drag-handle').length).toBe(4)
+
+      await dragRowOntoRow(wrapper, 3, 0)
+
+      expect(model.value.map((i) => i.id)).not.toEqual([1, 2, 3, 4])
+      expect(model.value[0].id).toBe(4)
+      // Positions track the live array order — the regression left them stale.
+      expect(model.value.map((i) => i.position)).toEqual(model.value.map((_, idx) => idx + 1))
+      wrapper.unmount()
+    })
+
+    it('drag first → last renumbers positions to the new order', async () => {
+      const { wrapper, model } = mountSortable()
+      await nextTick()
+      await flushPromises()
+
+      await dragRowOntoRow(wrapper, 0, 3)
+
+      expect(model.value.map((i) => i.id)).not.toEqual([1, 2, 3, 4])
+      expect(model.value[model.value.length - 1].id).toBe(1)
+      expect(model.value.map((i) => i.position)).toEqual(model.value.map((_, idx) => idx + 1))
+      wrapper.unmount()
+    })
+
+    it('without managed position: reorders the array but leaves positions untouched', async () => {
+      const loadedPosition = new Map(items().map((i) => [i.id, i.position]))
+      const { wrapper, model } = mountSortable({ position: false })
+      await nextTick()
+      await flushPromises()
+
+      await dragRowOntoRow(wrapper, 3, 0)
+
+      // Order changed...
+      expect(model.value.map((i) => i.id)).not.toEqual([1, 2, 3, 4])
+      expect(model.value[0].id).toBe(4)
+      // ...but every row still carries the exact position value it was LOADED with — the
+      // position travels with its row instead of being rewritten to the new index.
+      // (The old assertion sorted the positions first, which threw away the row↔position
+      // pairing the claim rests on, and then compared against [1,2,3,4] — the very series
+      // renumbering emits. It passed whether or not the `position: false` opt-out worked.)
+      expect(model.value.map((i) => i.position)).toEqual(
+        model.value.map((i) => loadedPosition.get(i.id)),
+      )
+      wrapper.unmount()
+    })
+
+    it('keeps every row exactly once after a drag (no duplicate / lost rows)', async () => {
+      const { wrapper, model } = mountSortable()
+      await nextTick()
+      await flushPromises()
+
+      await dragRowOntoRow(wrapper, 3, 0)
+
+      // The drag actually fired — without this the whole assertion below is just the
+      // INITIAL state (4 rows, ids {1,2,3,4}) and a drag that silently stops working
+      // stays green. Siblings above assert the same guard; this one used to omit it.
+      expect(model.value.map((i) => i.id)).not.toEqual([1, 2, 3, 4])
+      // No row duplicated or dropped — ids are still the same set of 4.
+      expect(model.value.map((i) => i.id).sort((a, b) => a - b)).toEqual([1, 2, 3, 4])
+      // DOM stays in sync with the model (one rendered row per item).
+      expect(wrapper.findAll('.a-le-row').length).toBe(4)
+      wrapper.unmount()
+    })
+  })
+
   describe('apply flow', () => {
     it('apply without callback commits new order and exits reorder mode', async () => {
       const { wrapper, model, mode, editor } = mountEditor()
       await clickToggle(wrapper)
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
 
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       await apply.trigger('click')
       await flushPromises()
 
@@ -189,9 +376,7 @@ describe('ASortableListEditor', () => {
       await clickToggle(wrapper)
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
 
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       await apply.trigger('click')
       await flushPromises()
 
@@ -207,9 +392,7 @@ describe('ASortableListEditor', () => {
       await clickToggle(wrapper)
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
 
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       await apply.trigger('click')
       await flushPromises()
 
@@ -231,11 +414,7 @@ describe('ASortableListEditor', () => {
       // variant. Either the text button or the icon-only button must be present.
       const toggle = header
         .findAll('button')
-        .find(
-          (b) =>
-            b.text().toLowerCase().includes('reorder')
-            || b.find('.mdi-sort').exists(),
-        )
+        .find((b) => b.text().toLowerCase().includes('reorder') || b.find('.mdi-sort').exists())
       expect(toggle).toBeTruthy()
     })
 
@@ -258,11 +437,7 @@ describe('ASortableListEditor', () => {
       expect(header.text()).toContain('FAQ')
       const toggle = header
         .findAll('button')
-        .find(
-          (b) =>
-            b.text().toLowerCase().includes('reorder')
-            || b.find('.mdi-sort').exists(),
-        )
+        .find((b) => b.text().toLowerCase().includes('reorder') || b.find('.mdi-sort').exists())
       expect(toggle).toBeUndefined()
     })
   })
@@ -280,6 +455,8 @@ describe('ASortableListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: (): FaqItem => ({ id: -Date.now(), position: 0, title: '' }),
+                compactField: 'title',
               },
               {
                 item: ({ raw }: { raw: FaqItem }) =>
@@ -350,15 +527,28 @@ describe('ASortableListEditor', () => {
     })
 
     it('exposes a --drag-enabled class when in reorder mode on desktop', async () => {
+      // A fine pointer is a precondition of the claim, so drive it — don't branch on the
+      // component's own output. (The old `rootHasClass ? handles : arrows` ternary degraded
+      // to `arrows > 0` whenever the class was missing, which is unconditionally true in
+      // reorder mode: the arrows are not drag-gated.)
+      forcePointerKind(false)
+      const { wrapper } = mountEditor()
+      await clickToggle(wrapper)
+      await flushPromises()
+      expect(wrapper.find('.a-sortable-list-editor--drag-enabled').exists()).toBe(true)
+      expect(wrapper.findAll('.a-le-drag-handle').length).toBe(4)
+    })
+
+    it('withholds --drag-enabled in reorder mode on a coarse pointer', async () => {
+      forcePointerKind(true)
       const { wrapper } = mountEditor()
       await clickToggle(wrapper)
       await flushPromises()
-      // On desktop: drag-enabled class is set; on small viewports arrows are shown instead.
-      // Both behaviors are correct, so test asserts either state is consistent with viewport.
-      const rootHasClass = wrapper.find('.a-sortable-list-editor--drag-enabled').exists()
-      const handlesCount = wrapper.findAll('.a-le-drag-handle').length
-      const arrowsCount = wrapper.findAll('.a-le-action--up').length
-      expect(rootHasClass ? handlesCount : arrowsCount).toBeGreaterThan(0)
+      expect(wrapper.find('.a-sortable-list-editor--drag-enabled').exists()).toBe(false)
+      expect(wrapper.find('.a-le-drag-handle').exists()).toBe(false)
+      // Arrows are the touch fallback — they are present in BOTH cases, which is exactly
+      // why they cannot stand in as the oracle for drag state.
+      expect(wrapper.findAll('.a-le-action--up').length).toBeGreaterThan(0)
     })
 
     it('hides drag handle when disableDrag=true even in reorder mode', async () => {
@@ -391,6 +581,7 @@ describe('ASortableListEditor', () => {
                 'onUpdate:modelValue': (v: Tag[]) => {
                   model.value = v
                 },
+                factory: (): Tag => ({ id: -Date.now(), position: 0, label: '' }),
                 chips: true,
                 showAddButton: false,
               },
@@ -407,7 +598,9 @@ describe('ASortableListEditor', () => {
     it('renders --chips root modifier and has no reorder toggle', () => {
       const { wrapper } = mountChips()
       expect(wrapper.find('.a-sortable-list-editor--chips').exists()).toBe(true)
-      const toggle = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('reorder'))
+      const toggle = wrapper
+        .findAll('button')
+        .find((b) => b.text().toLowerCase().includes('reorder'))
       expect(toggle).toBeUndefined()
     })
 
@@ -421,24 +614,126 @@ describe('ASortableListEditor', () => {
     })
 
     it('sets --drag-enabled class on desktop (chips drag is always on)', () => {
+      // The old `if (!isTouch)` guard read `--touch` off the component itself, so the very
+      // mutation that wrongly forced touch also suppressed the assertion — the test then
+      // executed ZERO expects. Drive the pointer kind instead and assert unconditionally.
+      forcePointerKind(false)
       const { wrapper } = mountChips()
-      // On desktop-sized test viewport. On touch the class is absent, arrows take over.
-      const rootHasDragClass = wrapper.find('.a-sortable-list-editor--drag-enabled').exists()
-      const isTouch = wrapper.find('.a-sortable-list-editor--touch').exists()
-      if (!isTouch) expect(rootHasDragClass).toBe(true)
+      expect(wrapper.find('.a-sortable-list-editor--touch').exists()).toBe(false)
+      expect(wrapper.find('.a-sortable-list-editor--drag-enabled').exists()).toBe(true)
+      // Chips have no reorder toggle — drag must be live without entering reorder mode.
+      expect(wrapper.findAll('.a-le-drag-handle').length).toBe(2)
     })
-  })
 
-  describe('showAddAfterAction (kebab in reorder mode)', () => {
-    it('exposes the exposed API method to enterReorderMode programmatically', async () => {
-      const { wrapper, editor } = mountEditor(items(), { showAddAfterAction: true })
-      await clickToggle(wrapper)
+    it('drag reorders chips (horizontal) through the same synchronous onUpdate', async () => {
+      // Chips share the editor's SortableJS onUpdate but lay out horizontally and
+      // have always-on drag (no reorder toggle). Confirms the custom onUpdate
+      // also commits horizontal chip reorders and keeps the set intact.
+      interface Tag {
+        id: number
+        position: number
+        label: string
+      }
+      const model = ref<Tag[]>([
+        { id: 1, position: 1, label: 'alice' },
+        { id: 2, position: 2, label: 'bob' },
+        { id: 3, position: 3, label: 'carol' },
+      ])
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(
+              ASortableListEditor<Tag>,
+              {
+                modelValue: model.value,
+                'onUpdate:modelValue': (v: Tag[]) => {
+                  model.value = v
+                },
+                factory: (): Tag => ({ id: -Date.now(), position: 0, label: '' }),
+                chips: true,
+                showAddButton: false,
+              },
+              {
+                'item-compact': ({ raw }: { raw: Tag }) =>
+                  h('span', { class: 'chip-x' }, raw.label),
+              },
+            )
+        },
+      })
+      const wrapper = mount(Host, { attachTo: document.body })
+      await nextTick()
+      await flushPromises()
+
+      const handles = wrapper.findAll('.a-le-drag-handle')
+      expect(handles.length).toBe(3)
+      // Drag the last chip (carol) onto the first chip (alice) — horizontal axis.
+      const handle = handles[2].element as HTMLElement
+      const target = wrapper.findAll('.a-le-row')[0].element as HTMLElement
+      const hb = handle.getBoundingClientRect()
+      const tb = target.getBoundingClientRect()
+      const y = Math.round(hb.y + hb.height / 2)
+      const startX = Math.round(hb.x + hb.width / 2)
+      const endX = Math.round(tb.x + tb.width / 2 - 6)
+      const fire = (type: string, cx: number, t: EventTarget = document) =>
+        t.dispatchEvent(
+          new MouseEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            clientX: cx,
+            clientY: y,
+            button: 0,
+            buttons: type === 'mouseup' || type === 'pointerup' ? 0 : 1,
+            view: window,
+          }),
+        )
+      fire('pointerdown', startX, handle)
+      fire('mousedown', startX, handle)
+      const steps = 26
+      for (let i = 1; i <= steps; i++) {
+        const cx = Math.round(startX + ((endX - startX) * i) / steps)
+        fire('pointermove', cx)
+        fire('mousemove', cx)
+        await new Promise((r) => setTimeout(r, 8))
+      }
+      await new Promise((r) => setTimeout(r, 60))
+      fire('pointerup', endX)
+      fire('mouseup', endX)
       await flushPromises()
-      // Menu buttons rendered in each reorder row — clicking menu opens popover which is
-      // unstable to target in headless. Just verify the menu button exists in reorder mode.
-      const menus = wrapper.findAll('.a-le-action--menu')
-      expect(menus.length).toBeGreaterThan(0)
-      void editor
+      await nextTick()
+      await nextTick()
+
+      // carol is no longer last, and the full set survives the drag intact.
+      expect(model.value.map((t) => t.id)).not.toEqual([1, 2, 3])
+      expect(model.value.map((t) => t.id).sort((a, b) => a - b)).toEqual([1, 2, 3])
+      expect(wrapper.findAll('.a-le-row').length).toBe(3)
+      wrapper.unmount()
+    })
+  })
+
+  describe('showAddAfterAction (kebab)', () => {
+    // The add-after ACTION (open ⋮ → "Pridať za túto položku" → insert + session-count) is exercised
+    // end-to-end by the admin-cms e2e (@list-editor: qa85050 BUG-02 + the L1 add-then-delete spec) —
+    // the Vuetify menu popover is unstable to target here. These only assert the per-row ⋮ trigger.
+    it('renders a ⋮ action menu on every row in reorder mode, with or without showAddAfterAction', async () => {
+      // The REORDER-mode kebab is the general overflow menu (move-to-position, delete, …) and
+      // carries no `v-if` on `showAddAfterAction` — only the VIEW-mode kebab is gated on it
+      // (asserted below). The old name claimed the prop was what made this menu appear, so the
+      // prop it named was not load-bearing and removing that `v-if` could not fail the test.
+      for (const extra of [{}, { showAddAfterAction: true }]) {
+        const { wrapper } = mountEditor(items(), extra)
+        await clickToggle(wrapper)
+        await flushPromises()
+        expect(wrapper.findAll('.a-le-action--menu').length).toBe(items().length)
+        wrapper.unmount()
+      }
+    })
+
+    it('gates the view-mode ⋮ menu on showAddAfterAction', () => {
+      // This is where the prop IS load-bearing — nothing covered it before.
+      const off = mountEditor()
+      expect(off.wrapper.find('.a-le-action--menu').exists()).toBe(false)
+      const on = mountEditor(items(), { showAddAfterAction: true })
+      expect(on.wrapper.findAll('.a-le-action--menu').length).toBe(items().length)
     })
   })
 
@@ -483,9 +778,7 @@ describe('ASortableListEditor', () => {
       expect(cancel).toBeTruthy()
       expect(apply).toBeTruthy()
       // The status chip lives in the header actions region.
-      expect(
-        header.find('.a-le-toolbar-status').exists(),
-      ).toBe(true)
+      expect(header.find('.a-le-toolbar-status').exists()).toBe(true)
       // There is no separate bottom toolbar any more.
       expect(wrapper.find('.a-le-toolbar').exists()).toBe(false)
     })
@@ -494,9 +787,7 @@ describe('ASortableListEditor', () => {
       const { wrapper } = mountEditor()
       await clickToggle(wrapper)
       await flushPromises()
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       expect(apply.attributes('disabled')).toBeDefined()
     })
 
@@ -506,9 +797,7 @@ describe('ASortableListEditor', () => {
       await flushPromises()
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
       await flushPromises()
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       expect(apply.attributes('disabled')).toBeUndefined()
     })
   })
@@ -533,6 +822,7 @@ describe('ASortableListEditor', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             })
         },
       })
@@ -546,7 +836,7 @@ describe('ASortableListEditor', () => {
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
     })
 
-    it('exposes resetDirtyBaseline which clears the unsaved indicator', async () => {
+    it('exposes commit() which re-baselines and clears the unsaved indicator', async () => {
       interface Item {
         id: number
         position: number
@@ -562,18 +852,20 @@ describe('ASortableListEditor', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             })
         },
       })
       const wrapper = mount(Host)
       const editor = findSortable(wrapper)
-      const exposed = (editor.vm as unknown as { $: { exposed: { resetDirtyBaseline: () => void } } })
-        .$.exposed
+      const exposed = (
+        editor.vm as unknown as { $: { exposed: { commit: (saved?: unknown[]) => void } } }
+      ).$.exposed
 
       model.value = [{ ...model.value[0], title: 'A-changed' }]
       await nextTick()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
-      exposed.resetDirtyBaseline()
+      exposed.commit()
       await nextTick()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
     })
@@ -592,6 +884,7 @@ describe('ASortableListEditor', () => {
                 'onUpdate:modelValue': (v: FaqItem[]) => {
                   model.value = v
                 },
+                factory: (): FaqItem => ({ id: -Date.now(), position: 0, title: '' }),
               },
               {
                 'item-compact': ({ raw }: { raw: FaqItem }) =>
@@ -616,8 +909,12 @@ describe('ASortableListEditor', () => {
   // moves via the arrow-button actions + exposed API here and leave actual
   // pointer-drag coverage to the Playwright CLI skill.
   describe('movedKeys lifecycle', () => {
-    it('entering reorder mode clears any prior movedKeys', async () => {
-      const { wrapper } = mountEditor()
+    it('cancel restores the order AND clears the moved amber (H1 — no reset() needed)', async () => {
+      // v2 fix (H1): cancel restores the array (snapshot) AND drops the controller's
+      // "moved" flag for exactly the rows moved this session — so a cancelled reorder
+      // leaves no false-unsaved amber and never arms the leave guard. (Apply, by
+      // contrast, keeps the amber until the consumer commit()s — see the Apply test.)
+      const { wrapper, model } = mountEditor()
       await clickToggle(wrapper)
       await flushPromises()
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
@@ -625,20 +922,52 @@ describe('ASortableListEditor', () => {
       // One row is unsaved now (the actively moved row).
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
 
-      // Cancel — leaves reorder mode, clears movedKeys.
+      // Cancel — leaves reorder mode, restores the original order, and clears the amber
+      // with no consumer reset() call.
       const cancel = wrapper
         .findAll('button')
         .find((b) => b.text().toLowerCase().includes('cancel'))!
       await cancel.trigger('click')
       await flushPromises()
+      expect(model.value.map((i) => i.id)).toEqual([1, 2, 3, 4])
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
 
-      // Re-enter — no stale movedKeys.
+      // Re-enter — a fresh session, no stale moved rows.
       await clickToggle(wrapper)
       await flushPromises()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
     })
 
+    it('a later Cancel keeps a prior APPLIED move amber (H1 clear is session-scoped)', async () => {
+      // The fix must be surgical: cancelling session 2 clears only session 2's moves,
+      // never a move applied (but not yet committed) in session 1 — so clearMoved()
+      // takes the session's keys, not a blanket wipe.
+      const { wrapper } = mountEditor()
+      // Session 1: move row 0 down, Apply — its amber persists (awaiting commit()).
+      await clickToggle(wrapper)
+      await flushPromises()
+      await wrapper.findAll('.a-le-action--down')[0].trigger('click')
+      await flushPromises()
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
+      await apply.trigger('click')
+      await flushPromises()
+      expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
+
+      // Session 2: move a DIFFERENT row, then Cancel.
+      await clickToggle(wrapper)
+      await flushPromises()
+      await wrapper.findAll('.a-le-action--down')[2].trigger('click')
+      await flushPromises()
+      expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(2)
+      const cancel = wrapper
+        .findAll('button')
+        .find((b) => b.text().toLowerCase().includes('cancel'))!
+      await cancel.trigger('click')
+      await flushPromises()
+      // Session 2's move is undone (amber cleared); session 1's applied move stays amber.
+      expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
+    })
+
     it('only the actively moved row gets marked (no side-effect index shifts)', async () => {
       const { wrapper } = mountEditor()
       await clickToggle(wrapper)
@@ -649,33 +978,33 @@ describe('ASortableListEditor', () => {
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
     })
 
-    it('applying reorder KEEPS movedKeys populated (cleared only via resetDirtyBaseline)', async () => {
+    it('applying reorder KEEPS movedKeys populated (cleared only via commit())', async () => {
       const { wrapper, editor } = mountEditor()
       await clickToggle(wrapper)
       await flushPromises()
       await wrapper.findAll('.a-le-action--down')[0].trigger('click')
       await flushPromises()
 
-      const apply = wrapper
-        .findAll('button')
-        .find((b) => b.text().toLowerCase().includes('apply'))!
+      const apply = wrapper.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))!
       await apply.trigger('click')
       await flushPromises()
 
       // Mode back to view, but the moved row is still flagged — the consumer
-      // is expected to flip it off by calling resetDirtyBaseline once their
-      // server save confirms.
+      // is expected to flip it off by calling commit() once their server save
+      // confirms (re-baselines current rows as saved).
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
 
-      const exposed = (editor().vm as unknown as {
-        $: { exposed: { resetDirtyBaseline: () => void } }
-      }).$.exposed
-      exposed.resetDirtyBaseline()
+      const exposed = (
+        editor().vm as unknown as {
+          $: { exposed: { commit: (saved?: unknown[]) => void } }
+        }
+      ).$.exposed
+      exposed.commit()
       await nextTick()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
     })
 
-    it('resetDirtyBaseline clears movedKeys', async () => {
+    it('commit() clears movedKeys', async () => {
       const { wrapper, editor } = mountEditor()
       await clickToggle(wrapper)
       await flushPromises()
@@ -683,10 +1012,12 @@ describe('ASortableListEditor', () => {
       await flushPromises()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(1)
 
-      const exposed = (editor().vm as unknown as {
-        $: { exposed: { resetDirtyBaseline: () => void } }
-      }).$.exposed
-      exposed.resetDirtyBaseline()
+      const exposed = (
+        editor().vm as unknown as {
+          $: { exposed: { commit: (saved?: unknown[]) => void } }
+        }
+      ).$.exposed
+      exposed.commit()
       await nextTick()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
     })
@@ -712,6 +1043,7 @@ describe('ASortableListEditor', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             })
         },
       })
@@ -720,10 +1052,7 @@ describe('ASortableListEditor', () => {
       // Change only `position` on a row — the dirty compare strips it before
       // stringifying, so no row should light up unsaved.
 
-      model.value = [
-        { ...model.value[0], position: 999 },
-        model.value[1],
-      ]
+      model.value = [{ ...model.value[0], position: 999 }, model.value[1]]
       await nextTick()
       expect(wrapper.findAll('.a-le-row--unsaved').length).toBe(0)
     })
diff --git a/src/test/components/ASortableListEditorDirtyExclude.test.ts b/src/test/components/ASortableListEditorDirtyExclude.test.ts
new file mode 100644
index 00000000..199979e4
--- /dev/null
+++ b/src/test/components/ASortableListEditorDirtyExclude.test.ts
@@ -0,0 +1,139 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
+
+interface Answer {
+  id: number
+  position: number
+  title: string
+}
+interface Question {
+  id: number
+  position: number
+  title: string
+  answers: Answer[]
+}
+type OuterHandle = ListEditorHandle<Question>
+type ChildHandle = ListEditorHandle<Answer>
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+// The PARENT row in the outer (non-embedded) editor.
+const parentRow = (): Element | null =>
+  document.querySelector(
+    '.a-sortable-list-editor:not(.a-sortable-list-editor--embedded) .a-le-row[data-id="1"]',
+  )
+// The CHILD row in the embedded editor.
+const childRow = (): Element | null =>
+  document.querySelector('.a-sortable-list-editor--embedded .a-le-row')
+
+const question = (): Question => ({
+  id: 1,
+  position: 1,
+  title: 'Q1',
+  answers: [{ id: 11, position: 1, title: 'A1' }],
+})
+
+// U-08: a child collection is tracked by its OWN embedded editor; editing a child
+// must NOT flip the parent row amber. `dirty-exclude=['answers']` drops the child
+// field from the parent's dirty content-hash. Mirrors the quiz: the inner editor is
+// v-model-bound to the parent row's `answers` and writes back through the parent
+// editor's `update`, so the parent row's `answers` field genuinely changes.
+describe('ASortableListEditor — dirtyExclude shields the parent from child edits (U-08)', () => {
+  const buildHost = (dirtyExclude?: string[]) => {
+    const outerModel = ref<Question[]>([question()])
+    const outerRef = ref<OuterHandle>()
+
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            ASortableListEditor<Question>,
+            {
+              ref: outerRef,
+              modelValue: outerModel.value,
+              'onUpdate:modelValue': (v: Question[]) => {
+                outerModel.value = v
+              },
+              factory: (): Question => ({ id: -Date.now(), position: 0, title: '', answers: [] }),
+              ...(dirtyExclude ? { dirtyExclude } : {}),
+            },
+            {
+              // Inner embedded editor bound to THIS parent row's answers; updates
+              // write back through the outer editor so the parent's `answers` field
+              // actually mutates (the realistic shape that makes the exclude matter).
+              item: (slot: {
+                raw: Question
+                actions: { update: (next: Partial<Question>) => void }
+              }) =>
+                h(
+                  ASortableListEditor<Answer>,
+                  {
+                    modelValue: slot.raw.answers,
+                    'onUpdate:modelValue': (v: Answer[]) => {
+                      slot.actions.update({ answers: v })
+                    },
+                    factory: (): Answer => ({ id: -Date.now(), position: 0, title: '' }),
+                    embedded: true,
+                  },
+                  { item: () => h('div', { class: 'inline-form' }, 'form') },
+                ),
+            },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    return { outerModel, outerRef }
+  }
+
+  const openParentAndEditChild = async () => {
+    // Open the parent row so the inner embedded editor mounts.
+    await mounted!.findAll('.a-le-row-header')[0].trigger('click')
+    await nextTick()
+    await nextTick()
+    expect(childRow()).not.toBeNull()
+    // Edit the child's title via the inner editor's exposed handle: this calls
+    // options.set -> onUpdate:modelValue -> parent's `update({ answers })`, so the
+    // parent row's `answers` field genuinely changes (the realistic write-back).
+    const innerEditors = mounted!.findAllComponents(ASortableListEditor)
+    // findAllComponents on a generic component infers DOMWrapper (no `.vm`) — cast to reach it.
+    const inner = (
+      innerEditors[innerEditors.length - 1] as unknown as {
+        vm: { $: { exposed: ChildHandle } }
+      }
+    ).vm
+    inner.$.exposed.updateItem(11, { title: 'A1 edited' })
+    await nextTick()
+    await nextTick()
+  }
+
+  it('editing an embedded child leaves the parent row non-amber while the child row is amber', async () => {
+    const { outerModel } = buildHost(['answers'])
+    await openParentAndEditChild()
+
+    // Guard: the write-back actually landed in parent.answers (not a vacuous pass).
+    expect(outerModel.value[0].answers[0].title).toBe('A1 edited')
+    // The child row IS amber (its own embedded editor tracks the edit)...
+    expect(childRow()?.classList.contains('a-le-row--unsaved')).toBe(true)
+    // ...but the parent row is NOT, because `answers` is excluded from its dirty hash.
+    expect(parentRow()?.classList.contains('a-le-row--unsaved')).toBe(false)
+  })
+
+  it('without dirty-exclude the parent DOES turn amber on a child change', async () => {
+    // Negative control: same scaffold minus `dirty-exclude`. The child write-back
+    // mutates parent.answers, and with `answers` now IN the dirty hash the parent
+    // row goes amber — proving the exclude (not the scaffold) is what shields it.
+    const { outerModel } = buildHost()
+    await openParentAndEditChild()
+
+    expect(outerModel.value[0].answers[0].title).toBe('A1 edited') // write-back landed
+    expect(childRow()?.classList.contains('a-le-row--unsaved')).toBe(true)
+    expect(parentRow()?.classList.contains('a-le-row--unsaved')).toBe(true)
+  })
+})
diff --git a/src/test/components/ASortableListEditorEmbedded.test.ts b/src/test/components/ASortableListEditorEmbedded.test.ts
index 7b75ded2..280baae8 100644
--- a/src/test/components/ASortableListEditorEmbedded.test.ts
+++ b/src/test/components/ASortableListEditorEmbedded.test.ts
@@ -33,6 +33,7 @@ describe('ASortableListEditor — embedded mode', () => {
             'onUpdate:modelValue': (v: Item[]) => {
               model.value = v
             },
+            factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             embedded: true,
           })
       },
@@ -57,6 +58,7 @@ describe('ASortableListEditor — embedded mode', () => {
             'onUpdate:mode': (m: 'view' | 'reorder') => {
               mode.value = m
             },
+            factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             embedded: true,
           })
       },
@@ -88,6 +90,7 @@ describe('ASortableListEditor — embedded mode', () => {
             'onUpdate:mode': (m: 'view' | 'reorder') => {
               mode.value = m
             },
+            factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             embedded: true,
           })
       },
@@ -109,13 +112,12 @@ describe('ASortableListEditor — embedded mode', () => {
     /* eslint-enable vue/no-ref-object-reactivity-loss */
   })
 
-  it('clears its movedKeys when external mode flips back to view', async () => {
-    // movedKeys is internal but observable via the unsaved-keys v-model:
-    // marking a moved key sets `unsaved`, the component syncs to its
-    // unsaved-keys model. After view transition the embedded editor should
-    // emit an empty set.
+  it('keeps its unsaved state empty across an external view→reorder→view round-trip', async () => {
+    // v2 has no `unsaved-keys` v-model; the controller's `hasUnsaved` is the
+    // observable. movedKeys requires a user gesture (drag, arrow click) to
+    // populate, so a pure mode round-trip with no gesture must leave the
+    // embedded editor's controller with no unsaved rows.
     const mode = ref<'view' | 'reorder'>('view')
-    const unsavedKeys = ref(new Set<number | string>())
     const model = ref<Item[]>(items())
     const Host = defineComponent({
       setup() {
@@ -129,26 +131,20 @@ describe('ASortableListEditor — embedded mode', () => {
             'onUpdate:mode': (m: 'view' | 'reorder') => {
               mode.value = m
             },
-            unsavedKeys: unsavedKeys.value,
-            'onUpdate:unsavedKeys': (s: Set<number | string>) => {
-              unsavedKeys.value = s
-            },
+            factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             embedded: true,
           })
       },
     })
-    /* eslint-disable vue/no-ref-object-reactivity-loss */
     mounted = mount(Host)
+    const editor = mounted.findComponent(ASortableListEditor) as unknown as {
+      vm: { $: { exposed: { hasUnsaved: { value: boolean } } } }
+    }
     mode.value = 'reorder'
     await nextTick()
-    // movedKeys requires a user gesture (drag, arrow click) to populate;
-    // here we just verify the round-trip view→reorder→view leaves the
-    // emitted unsaved-keys set empty (no stale state from the embedded
-    // editor's reorder session).
     mode.value = 'view'
     await nextTick()
-    expect(unsavedKeys.value.size).toBe(0)
-    /* eslint-enable vue/no-ref-object-reactivity-loss */
+    expect(editor.vm.$.exposed.hasUnsaved.value).toBe(false)
   })
 })
 
@@ -165,6 +161,7 @@ describe('ASortableListEditor — allowEditInReorder', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
               allowEditInReorder: true,
             },
             {
@@ -205,6 +202,7 @@ describe('ASortableListEditor — allowEditInReorder', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             },
             {
               item: () => h('div', { class: 'inline-form' }, 'form body'),
diff --git a/src/test/components/ASortableListEditorEmbeddedValidate.test.ts b/src/test/components/ASortableListEditorEmbeddedValidate.test.ts
new file mode 100644
index 00000000..0f739de8
--- /dev/null
+++ b/src/test/components/ASortableListEditorEmbeddedValidate.test.ts
@@ -0,0 +1,162 @@
+/* eslint-disable vue/no-ref-object-reactivity-loss -- test reads the exposed handle ref imperatively */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+type Handle = ListEditorHandle<Item>
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const innerRow = (): Element | null =>
+  document.querySelector('.a-sortable-list-editor--embedded .a-le-row')
+
+// A save runs the OUTER editor's validateAll(); it must cascade to embedded children so their
+// invalid rows also reveal red (the quiz bug: question turned red but its answers stayed amber).
+describe('ASortableListEditor — validateAll cascades to embedded children', () => {
+  it('reveals an embedded editor’s invalid rows red on the parent validateAll()', async () => {
+    const innerModel = ref<Item[]>([{ id: 11, position: 1, title: '' }]) // invalid (empty title)
+    const outerModel = ref<Item[]>([{ id: 1, position: 1, title: 'Outer' }])
+    const outerRef = ref<Handle>()
+    const titleRequired = (i: Item): boolean => !!i.title
+
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            ASortableListEditor<Item>,
+            {
+              ref: outerRef,
+              modelValue: outerModel.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                outerModel.value = v
+              },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+              validate: titleRequired,
+            },
+            {
+              item: () =>
+                h(
+                  ASortableListEditor<Item>,
+                  {
+                    modelValue: innerModel.value,
+                    'onUpdate:modelValue': (v: Item[]) => {
+                      innerModel.value = v
+                    },
+                    factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+                    embedded: true,
+                    validate: titleRequired,
+                  },
+                  { item: () => h('div', { class: 'inline-form' }, 'form') },
+                ),
+            },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+
+    // Open the outer row so the embedded editor mounts + registers with its parent.
+    await mounted.findAll('.a-le-row-header')[0].trigger('click')
+    await nextTick()
+    await nextTick()
+
+    // The embedded invalid row is amber, not yet red (dirty-gated, not submitted).
+    expect(innerRow()?.classList.contains('a-le-row--validation-invalid')).toBe(false)
+
+    // The parent's validateAll() must cascade `submitted` to the embedded editor.
+    outerRef.value!.validateAll()
+    await nextTick()
+    await nextTick()
+    expect(innerRow()?.classList.contains('a-le-row--validation-invalid')).toBe(true)
+  })
+})
+
+// An embedded child registers its pending count with the parent (childContributions), so a reorder
+// made inside the child lights up the PARENT's reorder toolbar (Apply enables). (C9 — codex gap.)
+describe('ASortableListEditor — embedded child pending contributes to the parent toolbar', () => {
+  it("a move inside the embedded child enables the parent's Apply", async () => {
+    const innerModel = ref<Item[]>([
+      { id: 11, position: 1, title: 'A' },
+      { id: 12, position: 2, title: 'B' },
+    ])
+    const outerModel = ref<Item[]>([
+      { id: 1, position: 1, title: 'Q1' },
+      { id: 2, position: 2, title: 'Q2' }, // 2 outer rows so the parent can enter reorder
+    ])
+    const outerMode = ref<'view' | 'reorder'>('view')
+
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            ASortableListEditor<Item>,
+            {
+              modelValue: outerModel.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                outerModel.value = v
+              },
+              mode: outerMode.value,
+              'onUpdate:mode': (v: 'view' | 'reorder') => {
+                outerMode.value = v
+              },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+              allowEditInReorder: true, // keep the open child interactive inside the shared reorder
+            },
+            {
+              // Only the first question carries an embedded answers editor; it shares the parent's mode.
+              item: ({ raw }: { raw: Item }) =>
+                raw.id === 1
+                  ? h(ASortableListEditor<Item>, {
+                      modelValue: innerModel.value,
+                      'onUpdate:modelValue': (v: Item[]) => {
+                        innerModel.value = v
+                      },
+                      mode: outerMode.value,
+                      factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+                      embedded: true,
+                    })
+                  : h('div', 'q2'),
+            },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+
+    // Open the first outer row so its embedded child mounts + registers with the parent.
+    await mounted.findAll('.a-le-row-header')[0].trigger('click')
+    await nextTick()
+    await nextTick()
+
+    // Enter the parent's reorder mode via its toggle (mode v-model flips → the open child shares it).
+    await mounted
+      .findAll('button')
+      .find((b) => b.text().toLowerCase().includes('reorder'))!
+      .trigger('click')
+    await nextTick()
+    await nextTick()
+
+    const applyBtn = () =>
+      mounted!.findAll('button').find((b) => b.text().toLowerCase().includes('apply'))
+    // No pending yet → Apply disabled.
+    expect(applyBtn()?.attributes('disabled')).toBeDefined()
+
+    // Move a row INSIDE the embedded child → its pending count bubbles to the parent → Apply enables.
+    const innerDowns = mounted.findAll('.a-sortable-list-editor--embedded .a-le-action--down')
+    await innerDowns[0].trigger('click')
+    await nextTick()
+    await nextTick()
+    expect(applyBtn()?.attributes('disabled')).toBeUndefined()
+  })
+})
diff --git a/src/test/components/ASortableListEditorOpenRow.test.ts b/src/test/components/ASortableListEditorOpenRow.test.ts
new file mode 100644
index 00000000..81406000
--- /dev/null
+++ b/src/test/components/ASortableListEditorOpenRow.test.ts
@@ -0,0 +1,118 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+const items = (): Item[] => [
+  { id: 1, position: 1, title: 'A' },
+  { id: 2, position: 2, title: 'B' },
+  { id: 3, position: 3, title: 'C' },
+]
+
+type Handle = ListEditorHandle<Item> & { openRow: (key: number) => void; openAll: () => void }
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const mountEditor = (extra: Record<string, unknown> = {}, withItemSlot = true) => {
+  const model = ref<Item[]>(items())
+  const mode = ref<'view' | 'reorder'>('view')
+  const editorRef = ref<Handle>()
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(
+          ASortableListEditor<Item>,
+          {
+            ref: editorRef,
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Item[]) => {
+              model.value = v
+            },
+            mode: mode.value,
+            'onUpdate:mode': (v: 'view' | 'reorder') => {
+              mode.value = v
+            },
+            compactField: 'title',
+            ...extra,
+          },
+          // An `#item` slot makes the editor inline-editable (otherwise open is a no-op).
+          withItemSlot
+            ? {
+                item: ({ raw }: { raw: Item }) =>
+                  h('input', { class: 'item-input', value: raw.title }),
+              }
+            : {},
+        )
+    },
+  })
+  mounted = mount(Host, { attachTo: document.body })
+  return { model, handle: () => editorRef.value! }
+}
+
+const editingCount = (w: VueWrapper): number => w.findAll('.a-le-row--editing').length
+const isEditing = (key: number): boolean =>
+  document.querySelector(`[data-id="${key}"]`)?.classList.contains('a-le-row--editing') ?? false
+
+describe('ASortableListEditor — openRow / openAll', () => {
+  it('openAll() puts every row into edit mode and renders the #item form', async () => {
+    const { handle } = mountEditor()
+    await nextTick()
+    expect(editingCount(mounted!)).toBe(0)
+    expect(mounted!.findAll('.item-input').length).toBe(0)
+
+    handle().openAll()
+    await nextTick()
+    expect(editingCount(mounted!)).toBe(3)
+    expect(mounted!.findAll('.item-input').length).toBe(3)
+  })
+
+  it('openRow(key) opens only that row (multiple rows can be open at once)', async () => {
+    const { handle } = mountEditor()
+    await nextTick()
+
+    handle().openRow(2)
+    await nextTick()
+    expect(editingCount(mounted!)).toBe(1)
+    expect(isEditing(2)).toBe(true)
+
+    handle().openRow(3)
+    await nextTick()
+    expect(editingCount(mounted!)).toBe(2)
+    expect(isEditing(3)).toBe(true)
+  })
+
+  it('openRow(unknownKey) is a no-op', async () => {
+    const { handle } = mountEditor()
+    await nextTick()
+    expect(() => handle().openRow(999)).not.toThrow()
+    await nextTick()
+    expect(editingCount(mounted!)).toBe(0)
+  })
+
+  it('openAll() is a no-op in chips mode (not inline-editable)', async () => {
+    const { handle } = mountEditor({ chips: true })
+    await nextTick()
+    handle().openAll()
+    await nextTick()
+    expect(editingCount(mounted!)).toBe(0)
+  })
+
+  it('openAll() is a no-op with no #item slot', async () => {
+    const { handle } = mountEditor({}, false)
+    await nextTick()
+    handle().openAll()
+    await nextTick()
+    expect(editingCount(mounted!)).toBe(0)
+  })
+})
diff --git a/src/test/components/ASortableListEditorRailColors.test.ts b/src/test/components/ASortableListEditorRailColors.test.ts
index 4bd0786f..2198ecc8 100644
--- a/src/test/components/ASortableListEditorRailColors.test.ts
+++ b/src/test/components/ASortableListEditorRailColors.test.ts
@@ -38,6 +38,7 @@ describe('ASortableListEditor — rail colors', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             },
             {
               item: () => h('div', { class: 'inline-form' }, 'form'),
@@ -74,6 +75,7 @@ describe('ASortableListEditor — rail colors', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             },
             {
               item: () => h('div', { class: 'inline-form' }, 'form'),
@@ -115,6 +117,7 @@ describe('ASortableListEditor — rail colors', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 model.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             },
             {
               item: () => h('div', { class: 'inline-form' }, 'form'),
@@ -167,6 +170,7 @@ describe('ASortableListEditor — rail colors', () => {
               'onUpdate:modelValue': (v: Item[]) => {
                 outerModel.value = v
               },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
             },
             {
               item: () =>
@@ -177,6 +181,7 @@ describe('ASortableListEditor — rail colors', () => {
                     'onUpdate:modelValue': (v: Item[]) => {
                       innerModel.value = v
                     },
+                    factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
                     embedded: true,
                   },
                   {
@@ -196,28 +201,19 @@ describe('ASortableListEditor — rail colors', () => {
 
     // Open the first inner row.
     const innerRows = Array.from(
-      document.querySelectorAll<HTMLElement>(
-        '.a-sortable-list-editor--embedded .a-le-row',
-      ),
+      document.querySelectorAll<HTMLElement>('.a-sortable-list-editor--embedded .a-le-row'),
     )
     expect(innerRows.length).toBeGreaterThan(0)
-    const innerHeader = innerRows[0].querySelector<HTMLElement>(
-      '.a-le-row-header',
-    )!
+    const innerHeader = innerRows[0].querySelector<HTMLElement>('.a-le-row-header')!
     innerHeader.click()
     await nextTick()
 
     // Mutate the inner first item to make it dirty.
-    innerModel.value = [
-      { ...innerModel.value[0], title: 'Inner 1 — edited' },
-      innerModel.value[1],
-    ]
+    innerModel.value = [{ ...innerModel.value[0], title: 'Inner 1 — edited' }, innerModel.value[1]]
     await nextTick()
 
     const innerRow = Array.from(
-      document.querySelectorAll<HTMLElement>(
-        '.a-sortable-list-editor--embedded .a-le-row',
-      ),
+      document.querySelectorAll<HTMLElement>('.a-sortable-list-editor--embedded .a-le-row'),
     )[0]
     expect(innerRow.classList.contains('a-le-row--editing')).toBe(true)
     expect(innerRow.classList.contains('a-le-row--unsaved')).toBe(true)
diff --git a/src/test/components/ASortableListEditorReorderPending.test.ts b/src/test/components/ASortableListEditorReorderPending.test.ts
new file mode 100644
index 00000000..708f766c
--- /dev/null
+++ b/src/test/components/ASortableListEditorReorderPending.test.ts
@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+const items = (): Item[] => [
+  { id: 1, position: 1, title: 'First' },
+  { id: 2, position: 2, title: 'Second' },
+  { id: 3, position: 3, title: 'Third' },
+]
+
+type Handle = ListEditorHandle<Item> & { applyReorder: () => Promise<void> }
+
+const mountEditor = () => {
+  const model = ref<Item[]>(items())
+  const mode = ref<'view' | 'reorder'>('view')
+  const editorRef = ref<Handle>()
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(ASortableListEditor<Item>, {
+          ref: editorRef,
+          modelValue: model.value,
+          'onUpdate:modelValue': (v: Item[]) => {
+            model.value = v
+          },
+          mode: mode.value,
+          'onUpdate:mode': (v: 'view' | 'reorder') => {
+            mode.value = v
+          },
+          compactField: 'title',
+          unsavedSectionLabel: 'Items',
+        })
+    },
+  })
+  const wrapper = mount(Host) as VueWrapper
+  return { wrapper, model, mode, handle: () => editorRef.value! }
+}
+
+const pendingText = (wrapper: VueWrapper): string =>
+  wrapper.find('.a-le-toolbar-status').exists()
+    ? wrapper.find('.a-le-toolbar-status').text()
+    : '(no toolbar)'
+
+describe('ASortableListEditor — saving during reorder clears the pending-changes state', () => {
+  // Repro of the FAQ bug: the page "Save" (commit) is separate from the editor's "Apply", so a
+  // user can save while still in reorder mode with an unapplied move. commit() must reset the
+  // reorder session, otherwise the "N pending changes" badge lingers after the save.
+  it('commit() while in reorder mode clears the pending-changes badge', async () => {
+    const { wrapper, model, mode, handle } = mountEditor()
+
+    mode.value = 'reorder'
+    await nextTick()
+    await flushPromises()
+
+    // Move the first row down — the move is live in the model and the toolbar shows "1 pending change".
+    await wrapper.findAll('.a-le-action--down')[0].trigger('click')
+    await nextTick()
+    expect(model.value.map((i) => i.id)).toEqual([2, 1, 3])
+    expect(pendingText(wrapper)).toContain('1 pending change')
+
+    // Simulate the page Save: adopt the current order as the new baseline.
+    handle().commit()
+    await nextTick()
+    await flushPromises()
+
+    // Still in reorder mode (commit doesn't change mode), but the badge must report no pending
+    // changes and the saved order must be preserved.
+    expect(pendingText(wrapper)).toContain('No pending changes')
+    expect(model.value.map((i) => i.id)).toEqual([2, 1, 3])
+  })
+})
diff --git a/src/test/components/ASortableListEditorTouchDrag.test.ts b/src/test/components/ASortableListEditorTouchDrag.test.ts
new file mode 100644
index 00000000..0d0af393
--- /dev/null
+++ b/src/test/components/ASortableListEditorTouchDrag.test.ts
@@ -0,0 +1,158 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+
+// QA 85050 U-03 — touch-device drag disabling, chips mode.
+// On a touch-ONLY device (no mouse/trackpad/pen, i.e. `(any-pointer: fine)` does not
+// match) the editor suppresses the SortableJS drag handle (`.a-le-drag-handle`, gated
+// on `dragEnabled` which ANDs `!isTouch`) and instead renders up/down arrow controls
+// (`v-if="!dragEnabled && !disableReorder"`, classes `.a-le-action--up` /
+// `.a-le-action--down`) — reordering must stay possible either way, with the handle
+// preferred and the arrows as the fallback. The root also gets the
+// `a-sortable-list-editor--touch` modifier. The matchMedia override must be installed
+// BEFORE mount.
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+// The two pointer capabilities are independent: a hybrid (touchscreen laptop, stylus tablet)
+// answers TRUE to both, which is exactly the case the arrow fallback has to survive.
+const makeMatchMedia = (hasFinePointer: boolean, hasCoarsePointer = false) =>
+  vi.fn((q: string) => ({
+    matches:
+      (hasFinePointer && q.includes('any-pointer: fine')) ||
+      (hasCoarsePointer && q.includes('any-pointer: coarse')),
+    media: q,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    onchange: null,
+    dispatchEvent: vi.fn(),
+  }))
+
+let mounted: VueWrapper | null = null
+let originalMatchMedia: typeof window.matchMedia
+
+beforeEach(() => {
+  originalMatchMedia = window.matchMedia
+})
+
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+  window.matchMedia = originalMatchMedia
+})
+
+const mountChipsEditor = (extraProps: Record<string, unknown> = {}) => {
+  const model = ref<Item[]>([
+    { id: 1, position: 1, title: 'Item 1' },
+    { id: 2, position: 2, title: 'Item 2' },
+  ])
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(
+          ASortableListEditor<Item>,
+          {
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Item[]) => {
+              model.value = v
+            },
+            factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+            chips: true,
+            ...extraProps,
+          },
+          {
+            'item-compact': ({ raw }: { raw: Item }) => h('span', raw.title),
+          },
+        )
+    },
+  })
+  return mount(Host, { attachTo: document.body })
+}
+
+describe('ASortableListEditor — touch drag (chips mode), QA 85050 U-03', () => {
+  it('a touch-ONLY device suppresses the drag handle and shows up/down arrows in chips mode', async () => {
+    window.matchMedia = makeMatchMedia(false, true) as unknown as typeof window.matchMedia
+    mounted = mountChipsEditor()
+    await nextTick()
+
+    // Drag handle is hidden on touch (dragEnabled = ... && !isTouch).
+    expect(mounted.find('.a-le-drag-handle').exists()).toBe(false)
+
+    // Arrow controls are rendered (one pair per row, 2 rows → 2 up + 2 down).
+    const ups = mounted.findAll('.a-le-action--up')
+    const downs = mounted.findAll('.a-le-action--down')
+    expect(ups.length).toBeGreaterThan(0)
+    expect(downs.length).toBeGreaterThan(0)
+
+    // Root carries the touch modifier.
+    expect(mounted.find('.a-sortable-list-editor').classes()).toContain(
+      'a-sortable-list-editor--touch',
+    )
+  })
+
+  it('a device with a fine pointer keeps the drag handle in chips mode (incl. a touchscreen PC + mouse)', async () => {
+    window.matchMedia = makeMatchMedia(true) as unknown as typeof window.matchMedia
+    mounted = mountChipsEditor()
+    await nextTick()
+
+    expect(mounted.find('.a-le-drag-handle').exists()).toBe(true)
+    expect(mounted.find('.a-sortable-list-editor').classes()).not.toContain(
+      'a-sortable-list-editor--touch',
+    )
+  })
+
+  // THE RULE, per input-modality best practice: never detect a device in order to HIDE a way to act.
+  //   fine pointer (mouse / trackpad / pen) -> handle
+  //   coarse pointer (finger)               -> arrows
+  //   both                                  -> BOTH, permanently
+  // A hybrid switches input mid-session — fold the laptop and a predicted handle is useless — so it
+  // keeps every affordance rather than betting on one. Chips is the only layout where this had to be
+  // spelled out; the others keep their arrows unconditionally in reorder mode already.
+  //
+  // `disable-drag` on a fine pointer used to fall through both branches (handle off via `disableDrag`,
+  // arrows off because the gate asked `isTouch` rather than "can we drag at all") — leaving the row
+  // unmovable. It must not.
+  it.each([
+    ['touch-only device', false, true, {}],
+    ['desktop, mouse only', true, false, {}],
+    ['touchscreen laptop (mouse + finger)', true, true, {}],
+    ['stylus tablet (pen + finger)', true, true, {}],
+    ['touch-only device + disable-drag', false, true, { disableDrag: true }],
+    ['desktop + disable-drag', true, false, { disableDrag: true }],
+    ['hybrid + disable-drag', true, true, { disableDrag: true }],
+  ])(
+    'offers every affordance the device can actually use: %s',
+    async (_label, hasFinePointer, hasCoarsePointer, extraProps) => {
+      window.matchMedia = makeMatchMedia(
+        hasFinePointer,
+        hasCoarsePointer,
+      ) as unknown as typeof window.matchMedia
+      mounted = mountChipsEditor(extraProps as Record<string, unknown>)
+      await nextTick()
+
+      const canDrag = mounted.find('.a-le-drag-handle').exists()
+      const canArrow = mounted.findAll('.a-le-action--up').length > 0
+      const dragDisabled = (extraProps as { disableDrag?: boolean }).disableDrag === true
+      const dragPossible = hasFinePointer && !dragDisabled
+
+      // Never neither — the row must always be movable.
+      expect(
+        canDrag || canArrow,
+        'neither a drag handle nor arrows — the row cannot be moved',
+      ).toBe(true)
+      // The handle appears exactly when a precise drag is possible…
+      expect(canDrag).toBe(dragPossible)
+      // …and the arrows stay wherever a finger could be used, or wherever dragging cannot happen —
+      // so a hybrid carries both at once.
+      expect(canArrow).toBe(hasCoarsePointer || !dragPossible)
+    },
+  )
+})
diff --git a/src/test/components/CardGridReorderPattern.test.ts b/src/test/components/CardGridReorderPattern.test.ts
new file mode 100644
index 00000000..b1d0f4ec
--- /dev/null
+++ b/src/test/components/CardGridReorderPattern.test.ts
@@ -0,0 +1,215 @@
+import { describe, it, expect } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+
+interface MockImage extends Record<string, any> {
+  id: number
+  key: string
+  position: number
+  title: string
+}
+
+const buildImages = (count = 4): MockImage[] =>
+  Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    key: `img-${i + 1}`,
+    position: i + 1,
+    title: `Image ${i + 1}`,
+  }))
+
+const mountPattern = (initial: MockImage[] = buildImages()) => {
+  const model = ref<MockImage[]>(initial)
+  const mode = ref<'view' | 'reorder'>('view')
+
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(
+          ASortableListEditor<MockImage>,
+          {
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: MockImage[]) => {
+              model.value = v
+            },
+            mode: mode.value,
+            'onUpdate:mode': (v: 'view' | 'reorder') => {
+              mode.value = v
+            },
+            factory: (): MockImage => ({
+              id: -Date.now(),
+              key: `img-${-Date.now()}`,
+              position: 0,
+              title: '',
+            }),
+            getKey: 'key',
+            showAddButton: false,
+            showDeleteButton: false,
+            showEditButton: false,
+          },
+          {
+            'view-body': () =>
+              h(
+                'div',
+                { class: 'card-grid', 'data-test': 'card-grid' },
+                model.value.map((image) =>
+                  h('div', { key: image.key, class: 'card' }, [
+                    h('div', { class: 'card__title' }, image.title),
+                  ]),
+                ),
+              ),
+            'item-compact': ({ raw }: { raw: MockImage }) =>
+              h('div', { class: 'reorder-row' }, [
+                h('div', { class: 'reorder-row__title' }, raw.title),
+              ]),
+          },
+        )
+    },
+  })
+
+  const wrapper = mount(Host)
+  return { wrapper, model, mode }
+}
+
+const findEditor = (wrapper: VueWrapper) =>
+  wrapper.findComponent(
+    ASortableListEditor as unknown as Parameters<typeof wrapper.findComponent>[0],
+  ) as VueWrapper
+
+const clickByText = async (wrapper: VueWrapper, fragment: string) => {
+  const btn = wrapper
+    .findAll('button')
+    .find((b) => b.text().toLowerCase().includes(fragment.toLowerCase()))
+  if (!btn) throw new Error(`Could not find button containing "${fragment}"`)
+  await btn.trigger('click')
+}
+
+const findReorderToggle = (wrapper: VueWrapper) =>
+  wrapper
+    .find('.a-le-header')
+    .findAll('button')
+    .find((b) => {
+      const txt = b.text().toLowerCase()
+      return txt.includes('reorder') || b.find('.mdi-sort').exists()
+    })
+
+describe('Card-grid + reorder mode pattern (#view-body slot)', () => {
+  describe('view mode', () => {
+    it('renders the #view-body slot content with all rows', () => {
+      const { wrapper, mode } = mountPattern()
+      expect(mode.value).toBe('view')
+      expect(wrapper.find('[data-test="card-grid"]').exists()).toBe(true)
+      expect(wrapper.findAll('.card')).toHaveLength(4)
+    })
+
+    it('renders the editor header with the built-in Reorder toggle', () => {
+      const { wrapper } = mountPattern()
+      expect(wrapper.find('.a-le-header').exists()).toBe(true)
+      expect(findReorderToggle(wrapper)).toBeTruthy()
+    })
+
+    it('does not render the default rows-container while in view mode with the slot', () => {
+      const { wrapper } = mountPattern()
+      expect(wrapper.find('.a-sortable-list-editor__rows').exists()).toBe(false)
+      // No reorder-mode chrome is shown
+      expect(wrapper.find('.a-le-action--up').exists()).toBe(false)
+      expect(wrapper.find('.a-le-action--down').exists()).toBe(false)
+    })
+  })
+
+  describe('entering reorder mode via the editor header', () => {
+    it('clicking the editor Reorder button flips to reorder mode and shows the rows', async () => {
+      const { wrapper, mode } = mountPattern()
+      const toggle = findReorderToggle(wrapper)!
+      expect(toggle).toBeTruthy()
+      await toggle.trigger('click')
+      await flushPromises()
+
+      expect(mode.value).toBe('reorder')
+      expect(wrapper.find('[data-test="card-grid"]').exists()).toBe(false)
+      expect(wrapper.find('.a-sortable-list-editor__rows').exists()).toBe(true)
+      expect(wrapper.findAll('.a-le-action--up').length).toBeGreaterThan(0)
+    })
+
+    it('renders consumer compact rows in reorder mode', async () => {
+      const { wrapper } = mountPattern()
+      await findReorderToggle(wrapper)!.trigger('click')
+      await flushPromises()
+      const rows = wrapper.findAll('.reorder-row')
+      expect(rows).toHaveLength(4)
+      expect(rows[0].text()).toContain('Image 1')
+    })
+  })
+
+  describe('cancel flow', () => {
+    it('reverts the array and mode when Cancel is clicked', async () => {
+      const { wrapper, model, mode } = mountPattern()
+      await findReorderToggle(wrapper)!.trigger('click')
+      await flushPromises()
+
+      await wrapper.findAll('.a-le-action--down')[0].trigger('click')
+      expect(model.value.map((i) => i.id)).toEqual([2, 1, 3, 4])
+
+      await clickByText(wrapper, 'cancel')
+      await flushPromises()
+
+      expect(mode.value).toBe('view')
+      expect(model.value.map((i) => i.id)).toEqual([1, 2, 3, 4])
+      expect(findEditor(wrapper).emitted('reorder-cancel')).toBeTruthy()
+      expect(wrapper.find('[data-test="card-grid"]').exists()).toBe(true)
+    })
+  })
+
+  describe('apply flow', () => {
+    it('commits new order, renumbers positions, and re-shows the slot', async () => {
+      const { wrapper, model, mode } = mountPattern()
+      await findReorderToggle(wrapper)!.trigger('click')
+      await flushPromises()
+
+      await wrapper.findAll('.a-le-action--down')[0].trigger('click')
+      await wrapper.findAll('.a-le-action--down')[1].trigger('click')
+
+      await clickByText(wrapper, 'apply')
+      await flushPromises()
+
+      expect(mode.value).toBe('view')
+      expect(model.value.map((i) => i.id)).toEqual([2, 3, 1, 4])
+      expect(model.value.map((i) => i.position)).toEqual([1, 2, 3, 4])
+      expect(findEditor(wrapper).emitted('reorder-applied')).toBeTruthy()
+      expect(wrapper.find('[data-test="card-grid"]').exists()).toBe(true)
+      expect(wrapper.find('.a-sortable-list-editor__rows').exists()).toBe(false)
+    })
+  })
+
+  describe('no #view-body slot (default behaviour preserved)', () => {
+    it('falls back to the editor default rows in view mode when slot is absent', () => {
+      const model = ref<MockImage[]>(buildImages())
+      const mode = ref<'view' | 'reorder'>('view')
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(ASortableListEditor<MockImage>, {
+              modelValue: model.value,
+              'onUpdate:modelValue': (v: MockImage[]) => {
+                model.value = v
+              },
+              mode: mode.value,
+              'onUpdate:mode': (v: 'view' | 'reorder') => {
+                mode.value = v
+              },
+              factory: (): MockImage => ({
+                id: -Date.now(),
+                key: `img-${-Date.now()}`,
+                position: 0,
+                title: '',
+              }),
+              getKey: 'key',
+            })
+        },
+      })
+      const wrapper = mount(Host)
+      expect(wrapper.find('.a-sortable-list-editor__rows').exists()).toBe(true)
+      expect(wrapper.findAll('.a-le-row')).toHaveLength(4)
+    })
+  })
+})
diff --git a/src/test/components/LeChangeParentDialog.test.ts b/src/test/components/LeChangeParentDialog.test.ts
index 2d28b476..28542ab1 100644
--- a/src/test/components/LeChangeParentDialog.test.ts
+++ b/src/test/components/LeChangeParentDialog.test.ts
@@ -21,7 +21,11 @@ afterEach(() => {
   document.body.innerHTML = ''
 })
 
-const node = (id: number, title: string, children: NestedTreeNode<Item>[] = []): NestedTreeNode<Item> => ({
+const node = (
+  id: number,
+  title: string,
+  children: NestedTreeNode<Item>[] = [],
+): NestedTreeNode<Item> => ({
   data: { id, title },
   children,
   meta: { dirty: false },
@@ -30,10 +34,7 @@ const node = (id: number, title: string, children: NestedTreeNode<Item>[] = []):
 const buildTree = (): NestedTree<Item> => ({
   meta: { dirty: false },
   children: [
-    node(1, 'Root A', [
-      node(11, 'A.1'),
-      node(12, 'A.2', [node(121, 'A.2.1')]),
-    ]),
+    node(1, 'Root A', [node(11, 'A.1'), node(12, 'A.2', [node(121, 'A.2.1')])]),
     node(2, 'Root B'),
     node(3, 'Root C', [node(31, 'C.1')]),
   ],
@@ -44,11 +45,7 @@ const calculateSubtreeDepth = (n: NestedTreeNode<Item>): number => {
   return 1 + Math.max(...n.children.map(calculateSubtreeDepth))
 }
 
-const mountDialog = (
-  sourceKey: number | null,
-  maxDepth = 5,
-  tree = buildTree(),
-) => {
+const mountDialog = (sourceKey: number | null, maxDepth = 5, tree = buildTree()) => {
   const open = ref(true)
   const onConfirm = vi.fn()
   const Host = defineComponent({
@@ -64,8 +61,7 @@ const mountDialog = (
           keyField: 'id',
           maxDepth,
           resolveLabel: (raw) => (raw as Item).title,
-          calculateSubtreeDepth: (n) =>
-            calculateSubtreeDepth(n as NestedTreeNode<Item>),
+          calculateSubtreeDepth: (n) => calculateSubtreeDepth(n as NestedTreeNode<Item>),
           onConfirm,
         })
     },
@@ -83,9 +79,9 @@ const isDisabledItem = (text: string): boolean => {
   const el = findItemByText(text)
   if (!el) return false
   return (
-    el.classList.contains('v-list-item--disabled')
-    || el.getAttribute('aria-disabled') === 'true'
-    || el.querySelector('[aria-disabled="true"]') !== null
+    el.classList.contains('v-list-item--disabled') ||
+    el.getAttribute('aria-disabled') === 'true' ||
+    el.querySelector('[aria-disabled="true"]') !== null
   )
 }
 
diff --git a/src/test/components/ListEditorDirtyGatedValidation.test.ts b/src/test/components/ListEditorDirtyGatedValidation.test.ts
new file mode 100644
index 00000000..28e5e953
--- /dev/null
+++ b/src/test/components/ListEditorDirtyGatedValidation.test.ts
@@ -0,0 +1,290 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import ANestedSortableListEditor from '@/labs/listEditor/ANestedSortableListEditor.vue'
+import type { NestedTree } from '@/labs/listEditor/types/listEditorTypes'
+
+// Uniform behaviour across all 3 editor variants. The red "invalid" rail shows for an invalid row that
+// is EDITED, UNSAVED (added), or after a save attempt (`validateAll()`) — but is SUPPRESSED while the row
+// is the one being edited, so a still-being-filled row reads amber and only goes red once collapsed.
+// A LOADED (baseline) invalid row stays quiet until it is edited or `validateAll()` runs. `position` and
+// `dirtyExclude`-d fields are normalized out, so a reorder or an excluded-field change never counts.
+// (QA 85050 batch 7 — decision A: red once collapsed, not while editing. Replaces the old amber-only.)
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+// Flat editors put `data-id` on the `.a-le-row` itself; the nested editor puts it on the row
+// wrapper with the `.a-le-row` (carrying the state classes) as a child.
+const row = (key: number): Element | null => {
+  const el = document.querySelector(`[data-id="${key}"]`)
+  if (!el) return null
+  return el.classList.contains('a-le-row') ? el : el.querySelector('.a-le-row')
+}
+const isRed = (key: number): boolean =>
+  row(key)?.classList.contains('a-le-row--validation-invalid') ?? false
+const isAmber = (key: number): boolean => row(key)?.classList.contains('a-le-row--unsaved') ?? false
+const validateAll = (w: VueWrapper, comp: unknown): void => {
+  const vm = w.findComponent(comp as Parameters<typeof w.findComponent>[0]).vm as unknown as {
+    $: { exposed: { validateAll: () => boolean } }
+  }
+  vm.$.exposed.validateAll()
+}
+
+const VALID = (item: Item): boolean => item.title.length >= 3 // so "ab" is edited-but-still-invalid
+
+// --- flat editors (AListEditor + ASortableListEditor share useListEditorController) -------------
+const flatCases = [
+  { name: 'AListEditor', comp: AListEditor, extra: {} as Record<string, unknown> },
+  { name: 'ASortableListEditor', comp: ASortableListEditor, extra: {} as Record<string, unknown> },
+]
+
+for (const { name, comp, extra } of flatCases) {
+  describe(`${name} — dirty-gated invalid rail`, () => {
+    const BASE: Item[] = [{ id: 1, position: 1, title: 'Valid' }]
+    const mountFlat = (initial: Item[] = [...BASE]) => {
+      const data = ref<Item[]>(initial)
+      const Host = defineComponent({
+        setup() {
+          return () =>
+            h(comp as typeof AListEditor<Item>, {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
+              },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+              validate: VALID,
+              ...extra,
+            })
+        },
+      })
+      mounted = mount(Host, { attachTo: document.body })
+      return { data }
+    }
+
+    it('added still-untouched invalid row is RED once collapsed (unsaved)', async () => {
+      const { data } = mountFlat()
+      await nextTick()
+      data.value = [...BASE, { id: -1, position: 2, title: '' }]
+      await nextTick()
+      await nextTick()
+      expect(isRed(-1)).toBe(true) // unsaved + invalid, not being edited → red
+      expect(isAmber(-1)).toBe(true) // still an unsaved change too
+    })
+
+    it('a LOADED (baseline) invalid row stays quiet until validateAll()', async () => {
+      const { data } = mountFlat([...BASE, { id: 2, position: 2, title: 'ab' }])
+      await nextTick()
+      await nextTick()
+      expect(isRed(2)).toBe(false) // loaded, untouched, not submitted → not red
+      expect(isAmber(2)).toBe(false)
+      validateAll(mounted!, comp)
+      await nextTick()
+      await nextTick()
+      expect(isRed(2)).toBe(true) // a save attempt reveals every offender
+      void data
+    })
+
+    it('editing back to valid clears the rail', async () => {
+      const { data } = mountFlat()
+      await nextTick()
+      data.value = [...BASE, { id: -1, position: 2, title: '' }]
+      await nextTick()
+      await nextTick()
+      expect(isRed(-1)).toBe(true)
+      data.value = [...BASE, { id: -1, position: 2, title: 'abc' }]
+      await nextTick()
+      await nextTick()
+      expect(isRed(-1)).toBe(false) // now valid
+    })
+
+    it('stays red after editing then clearing back to empty (sticky, like vuelidate $dirty)', async () => {
+      const { data } = mountFlat()
+      await nextTick()
+      data.value = [...BASE, { id: -1, position: 2, title: 'ab' }] // edit → dirty
+      await nextTick()
+      await nextTick()
+      data.value = [...BASE, { id: -1, position: 2, title: '' }] // clear back to empty
+      await nextTick()
+      await nextTick()
+      expect(isRed(-1)).toBe(true)
+    })
+  })
+}
+
+// --- red is suppressed while the row is being edited (item slot → inline edit) -------------------
+describe('invalid rail is suppressed while the row is being edited', () => {
+  const mountEditable = () => {
+    const data = ref<Item[]>([{ id: 1, position: 1, title: 'Valid' }])
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            ASortableListEditor as typeof AListEditor<Item>,
+            {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                data.value = v
+              },
+              factory: (): Item => ({ id: -1, position: 0, title: '' }),
+              validate: VALID,
+            },
+            {
+              item: ({ raw }: { raw: Item }) => h('span', raw.title),
+              'item-compact': ({ raw }: { raw: Item }) => h('span', raw.title),
+            },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    return { data }
+  }
+
+  it('reads amber (not red) while open for editing, red once collapsed', async () => {
+    const { data } = mountEditable()
+    await nextTick()
+    data.value = [data.value[0], { id: -1, position: 2, title: '' }]
+    await nextTick()
+    await nextTick()
+    // collapsed unsaved invalid → red
+    expect(isRed(-1)).toBe(true)
+    // open it for editing → the red is suppressed (amber while you fill it in)
+    await mounted!.findAll('.a-le-action--edit')[1].trigger('click')
+    await nextTick()
+    await nextTick()
+    expect(isRed(-1)).toBe(false)
+    expect(isAmber(-1)).toBe(true)
+  })
+})
+
+// --- nested editor (useNestedListEditorController) ---------------------------------------------
+interface Node {
+  id: number
+  position: number
+  parent: number | null
+  title: string
+}
+const baseTree = (): NestedTree<Node> => ({
+  children: [
+    {
+      data: { id: 1, position: 1, parent: null, title: 'Valid' },
+      children: [],
+      meta: { dirty: false },
+    },
+  ],
+  meta: { dirty: false },
+})
+const withAdded = (title: string): NestedTree<Node> => ({
+  children: [
+    ...baseTree().children,
+    { data: { id: -1, position: 2, parent: null, title }, children: [], meta: { dirty: false } },
+  ],
+  meta: { dirty: false },
+})
+
+describe('ANestedSortableListEditor — dirty-gated invalid rail', () => {
+  const mountNested = () => {
+    const model = ref<NestedTree<Node>>(baseTree())
+    const mode = ref<'view' | 'reorder'>('view')
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(ANestedSortableListEditor<Node>, {
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: NestedTree<Node>) => {
+              model.value = v
+            },
+            mode: mode.value,
+            'onUpdate:mode': (v: 'view' | 'reorder') => {
+              mode.value = v
+            },
+            maxDepth: 2,
+            validate: (item: Node) => item.title.length >= 3,
+          })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    return { model }
+  }
+
+  it('added still-untouched invalid row is RED once collapsed (unsaved)', async () => {
+    const { model } = mountNested()
+    await nextTick()
+    model.value = withAdded('')
+    await nextTick()
+    await nextTick()
+    expect(isRed(-1)).toBe(true)
+  })
+
+  it('editing the added row to a valid value clears the rail', async () => {
+    const { model } = mountNested()
+    await nextTick()
+    model.value = withAdded('')
+    await nextTick()
+    await nextTick()
+    expect(isRed(-1)).toBe(true)
+    model.value = withAdded('abc')
+    await nextTick()
+    await nextTick()
+    expect(isRed(-1)).toBe(false)
+  })
+})
+
+// A `dirtyExclude`-d field is normalized out of the content hash, so changing it on a BASELINE row never
+// marks it edited or unsaved — this is how the quiz excludes `answers` so the embedded answers-editor
+// auto-seeding the parent question's `answers` does not flip an existing question's rail red.
+interface ItemX {
+  id: number
+  position: number
+  title: string
+  note: string
+}
+
+describe('dirty-gate respects dirtyExclude', () => {
+  it('changing a dirtyExclude-d field on a baseline row does NOT turn it red', async () => {
+    // Baseline row is invalid (title too short) but LOADED → quiet until edited/validated.
+    const data = ref<ItemX[]>([{ id: 1, position: 1, title: 'ab', note: '' }])
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(AListEditor<ItemX>, {
+            modelValue: data.value,
+            'onUpdate:modelValue': (v: ItemX[]) => {
+              data.value = v
+            },
+            factory: (): ItemX => ({ id: -Date.now(), position: 0, title: '', note: '' }),
+            validate: (item: ItemX) => item.title.length >= 3,
+            dirtyExclude: ['note'],
+          })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+    await nextTick()
+    expect(isRed(1)).toBe(false) // loaded invalid, untouched → not red
+
+    // Change ONLY the excluded `note` (like the quiz auto-seeding answers) → still not red/unsaved.
+    data.value = [{ id: 1, position: 1, title: 'ab', note: 'seeded' }]
+    await nextTick()
+    await nextTick()
+    expect(isRed(1)).toBe(false)
+    expect(isAmber(1)).toBe(false)
+
+    // Change the validated, non-excluded title (still invalid) → now edited → red.
+    data.value = [{ id: 1, position: 1, title: 'x', note: 'seeded' }]
+    await nextTick()
+    await nextTick()
+    expect(isRed(1)).toBe(true)
+  })
+})
diff --git a/src/test/components/ListEditorDisableUnsaved.test.ts b/src/test/components/ListEditorDisableUnsaved.test.ts
new file mode 100644
index 00000000..e649d6d8
--- /dev/null
+++ b/src/test/components/ListEditorDisableUnsaved.test.ts
@@ -0,0 +1,107 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+const items = (): Item[] => [
+  { id: 1, position: 1, title: 'First' },
+  { id: 2, position: 2, title: 'Second' },
+]
+
+let nextTempId = 0
+const makeItem = (): Item => ({ id: --nextTempId, position: 0, title: '' })
+
+let mounted: VueWrapper | null = null
+
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const findAListEditor = (w: VueWrapper): VueWrapper =>
+  w.findComponent(AListEditor as unknown as Parameters<typeof w.findComponent>[0]) as VueWrapper
+
+// Raw exposed handle (refs NOT unwrapped) — mirrors the ASortableListEditor convention.
+const exposed = (w: VueWrapper): ListEditorHandle<Item> =>
+  (findAListEditor(w).vm as unknown as { $: { exposed: ListEditorHandle<Item> } }).$.exposed
+
+const mountFlat = (disableUnsaved: boolean) => {
+  const model = ref<Item[]>(items())
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(AListEditor<Item>, {
+          modelValue: model.value,
+          'onUpdate:modelValue': (v: Item[]) => {
+            model.value = v
+          },
+          factory: makeItem,
+          disableUnsaved,
+        })
+    },
+  })
+  mounted = mount(Host)
+  return { wrapper: mounted, model, handle: () => exposed(mounted!) }
+}
+
+// ASortableListEditor and ANestedSortableListEditor dropped `disableUnsaved` /
+// `v-model:unsaved-keys` in the v2 redesign (the controller owns dirty state,
+// read via the exposed handle), so they're no longer parametrized here.
+// AListEditor keeps the `disableUnsaved` opt-out (suppresses only the amber
+// "unsaved" markers; the validation rail still shows so real errors aren't
+// hidden). The controller still tracks dirty state internally.
+describe('AListEditor — disableUnsaved', () => {
+  it('mutating an item does NOT show the unsaved row marker when disableUnsaved is true', async () => {
+    const { wrapper, model } = mountFlat(true)
+    await nextTick()
+    model.value = [{ ...model.value[0], title: 'changed' }, model.value[1]]
+    await nextTick()
+    expect(wrapper.findAll('.a-le-row--unsaved')).toHaveLength(0)
+  })
+
+  it('mutating an item DOES show the unsaved row marker when disableUnsaved is false (default behavior)', async () => {
+    const { wrapper, model, handle } = mountFlat(false)
+    await nextTick()
+    model.value = [{ ...model.value[0], title: 'changed' }, model.value[1]]
+    await nextTick()
+    expect(wrapper.findAll('.a-le-row--unsaved')).toHaveLength(1)
+    expect(handle().isUnsaved(1)).toBe(true)
+  })
+})
+
+// A readonly editor (e.g. a *Detail.vue view) must NEVER paint the amber
+// "Neuložené" marker — the user can't make unsaved changes there, and a
+// mount-before-load baseline would otherwise flag every loaded row as added.
+// (QA 85050 sweep — Detail views showed all rows amber.)
+describe('AListEditor — readonly suppresses the unsaved marker', () => {
+  it('a readonly editor shows NO unsaved markers even when the model mutates', async () => {
+    const rows = items()
+    const model = ref<Item[]>(rows)
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(AListEditor<Item>, {
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Item[]) => {
+              model.value = v
+            },
+            factory: makeItem,
+            readonly: true,
+          })
+      },
+    })
+    mounted = mount(Host)
+    await nextTick()
+    // Even an externally-mutated row stays clean in a readonly view.
+    model.value = [{ ...rows[0], title: 'changed' }, rows[1]]
+    await nextTick()
+    expect(mounted.findAll('.a-le-row--unsaved')).toHaveLength(0)
+  })
+})
diff --git a/src/test/components/ListEditorKeyWarnings.test.ts b/src/test/components/ListEditorKeyWarnings.test.ts
new file mode 100644
index 00000000..abb9f748
--- /dev/null
+++ b/src/test/components/ListEditorKeyWarnings.test.ts
@@ -0,0 +1,103 @@
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref, type Ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+
+interface Item {
+  id?: number
+  position: number
+  title: string
+}
+
+let mounted: VueWrapper | null = null
+let warnSpy: MockInstance
+
+// Only the editor's own warnings — other libraries may warn too.
+const editorWarnings = () =>
+  warnSpy.mock.calls.map((c) => String(c[0])).filter((m) => m.startsWith('[list-editor]'))
+
+beforeEach(() => {
+  warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+  warnSpy.mockRestore()
+})
+
+const cloneList = (list: Ref<Item[]>) => {
+  list.value = [...list.value]
+}
+
+const mountWith = (data: Ref<Item[]>) => {
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(AListEditor<Item>, {
+          modelValue: data.value,
+          'onUpdate:modelValue': (v: Item[]) => {
+            data.value = v
+          },
+          factory: (): Item => ({ position: 0, title: '' }),
+          compactField: 'title',
+        })
+    },
+  })
+  mounted = mount(Host, { attachTo: document.body })
+}
+
+describe('list editor row-key warnings', () => {
+  it('warns when rows share a key (duplicate ids)', async () => {
+    const data = ref<Item[]>([
+      { id: 1, position: 1, title: 'A' },
+      { id: 1, position: 2, title: 'B' },
+    ])
+    mountWith(data)
+    await nextTick()
+    expect(editorWarnings().some((m) => m.includes('duplicate row keys'))).toBe(true)
+  })
+
+  it('warns when rows resolve to an undefined key (missing key-field)', async () => {
+    const data = ref<Item[]>([
+      { position: 1, title: 'A' },
+      { position: 2, title: 'B' },
+    ])
+    mountWith(data)
+    await nextTick()
+    expect(editorWarnings().some((m) => m.includes('undefined key'))).toBe(true)
+  })
+
+  it('stays silent for unique keys', async () => {
+    const data = ref<Item[]>([
+      { id: 1, position: 1, title: 'A' },
+      { id: 2, position: 2, title: 'B' },
+    ])
+    mountWith(data)
+    await nextTick()
+    expect(editorWarnings()).toEqual([])
+  })
+
+  it('warns once per offending signature, again for a new offender', async () => {
+    const data = ref<Item[]>([
+      { id: 1, position: 1, title: 'A' },
+      { id: 1, position: 2, title: 'B' },
+    ])
+    mountWith(data)
+    await nextTick()
+    expect(editorWarnings().length).toBe(1)
+
+    // Same offending state in a new array → no re-warn (deduplicated).
+    cloneList(data)
+    await nextTick()
+    expect(editorWarnings().length).toBe(1)
+
+    // A different duplicate key set warns again.
+    data.value = [
+      { id: 2, position: 1, title: 'C' },
+      { id: 2, position: 2, title: 'D' },
+    ]
+    await nextTick()
+    expect(editorWarnings().length).toBe(2)
+  })
+})
diff --git a/src/test/components/ListEditorLiftedControllerRemount.test.ts b/src/test/components/ListEditorLiftedControllerRemount.test.ts
new file mode 100644
index 00000000..cf9b6f7e
--- /dev/null
+++ b/src/test/components/ListEditorLiftedControllerRemount.test.ts
@@ -0,0 +1,139 @@
+/* eslint-disable vue/no-ref-object-reactivity-loss -- test reads the exposed handle ref imperatively */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+import {
+  useListEditorController,
+  type ListEditorHandle,
+} from '@/labs/listEditor/composables/useListEditorController'
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+type Handle = ListEditorHandle<Item>
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const rows = (): Element[] => Array.from(document.querySelectorAll('.a-list-editor .a-le-row'))
+const unsavedRow = (): Element | null => document.querySelector('.a-list-editor .a-le-row--unsaved')
+
+const factory = (): Item => ({ id: -Date.now(), position: 0, title: '' })
+const validate = (i: Item): boolean => !!i.title
+
+// U-16: an editor pinned widget can be relocated, unmounting + remounting the
+// AListEditor. A LIFTED controller (consumer's `useListEditorController` passed via
+// `:editor`) lives in the host scope, so its dirty/added state survives the editor's
+// unmount/remount. An internally-owned controller is re-created on remount and
+// re-baselines against the (persisted) v-model — so the added row reads clean.
+describe('AListEditor — lifted controller survives unmount/remount (U-16)', () => {
+  it('lifted controller keeps row + dirty state across editor unmount/remount', async () => {
+    const store = ref<Item[]>([{ id: 1, position: 1, title: 'A' }])
+    const editor = useListEditorController<Item>({
+      get: () => store.value,
+      set: (v) => {
+        store.value = v
+      },
+      factory,
+      validate,
+    })
+    const show = ref(true)
+
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          show.value
+            ? h(AListEditor<Item>, {
+                editor: editor as Handle,
+                modelValue: store.value,
+                'onUpdate:modelValue': (v: Item[]) => {
+                  store.value = v
+                },
+                factory,
+                validate,
+              })
+            : h('div', { class: 'placeholder' })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+
+    // Add a row through the lifted controller, then edit it so it is genuinely dirty.
+    editor.addItem({ id: -1, position: 2, title: '' })
+    await nextTick()
+    editor.updateItem(-1, { title: 'new' })
+    await nextTick()
+    expect(editor.hasUnsaved.value).toBe(true)
+    expect(rows()).toHaveLength(2)
+    expect(unsavedRow()).not.toBeNull()
+    const lenAfterAdd = store.value.length
+
+    // Unmount the editor.
+    show.value = false
+    await nextTick()
+    expect(rows()).toHaveLength(0)
+
+    // Remount the editor — the SAME lifted controller is reattached.
+    show.value = true
+    await nextTick()
+    await nextTick()
+
+    expect(editor.hasUnsaved.value).toBe(true) // dirty state preserved by the lift
+    expect(unsavedRow()).not.toBeNull() // the amber row is still amber
+    expect(store.value.length).toBe(lenAfterAdd) // model unchanged across the round-trip
+  })
+
+  it('an internally-owned controller loses dirty state on remount', async () => {
+    // Negative control: no `:editor` — the editor owns its controller. On remount a
+    // NEW controller is constructed and baselines against the current v-model (which
+    // still holds the added row), so that row is adopted as saved → reads clean.
+    const store = ref<Item[]>([{ id: 1, position: 1, title: 'A' }])
+    const show = ref(true)
+
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          show.value
+            ? h(AListEditor<Item>, {
+                modelValue: store.value,
+                'onUpdate:modelValue': (v: Item[]) => {
+                  store.value = v
+                },
+                factory,
+                validate,
+              })
+            : h('div', { class: 'placeholder' })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+
+    // Drive the add through the editor's own exposed controller handle.
+    const editorVm = (
+      mounted.findComponent(AListEditor) as unknown as { vm: { $: { exposed: Handle } } }
+    ).vm
+    editorVm.$.exposed.addItem({ id: -1, position: 2, title: '' })
+    await nextTick()
+    editorVm.$.exposed.updateItem(-1, { title: 'new' })
+    await nextTick()
+    expect(editorVm.$.exposed.hasUnsaved.value).toBe(true)
+    expect(unsavedRow()).not.toBeNull()
+
+    // Unmount + remount the editor (a fresh internal controller is built).
+    show.value = false
+    await nextTick()
+    show.value = true
+    await nextTick()
+    await nextTick()
+
+    // The remounted editor re-baselined the persisted v-model, so the row is clean.
+    expect(rows()).toHaveLength(2) // row data survived via v-model
+    expect(unsavedRow()).toBeNull() // but the unsaved marker did NOT
+  })
+})
diff --git a/src/test/components/ListEditorManagedMutations.test.ts b/src/test/components/ListEditorManagedMutations.test.ts
new file mode 100644
index 00000000..8415eb2c
--- /dev/null
+++ b/src/test/components/ListEditorManagedMutations.test.ts
@@ -0,0 +1,256 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, provide, ref, type Ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+import { useListEditor } from '@/labs/listEditor/composables/useListEditor'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
+import {
+  createUnsavedSectionRegistry,
+  UnsavedSectionKey,
+  type UnsavedSectionRegistry,
+} from '@/labs/unsavedGuard/useUnsavedSection'
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+let nextId = 0
+const makeItem = (): Item => ({ id: --nextId, position: 0, title: '' })
+
+// vue/no-ref-object-reactivity-loss forbids reading `.value` in the creating
+// scope — assertions read through this helper instead.
+const read = (list: Ref<Item[]>): Item[] => list.value
+
+const items = (): Item[] => [
+  { id: 1, position: 1, title: 'First' },
+  { id: 2, position: 2, title: 'Second' },
+]
+
+let mounted: VueWrapper | null = null
+
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const findAListEditor = (w: VueWrapper): VueWrapper =>
+  w.findComponent(AListEditor as unknown as Parameters<typeof w.findComponent>[0]) as VueWrapper
+
+// Raw exposed handle (refs NOT unwrapped) — mirrors the ASortableListEditor convention.
+const exposed = (w: VueWrapper): ListEditorHandle<Item> =>
+  (findAListEditor(w).vm as unknown as { $: { exposed: ListEditorHandle<Item> } }).$.exposed
+
+// v2: managed add (via `factory`) and managed delete are the only behavior — the
+// controller inserts/removes through the model and renumbers managed positions.
+// There is no legacy `add` / `added` event and no `v-model:unsaved-keys`.
+describe('editor-managed mutations (v2 factory + managed delete)', () => {
+  const mountManaged = (opts: {
+    model: Ref<Item[]>
+    registry?: UnsavedSectionRegistry
+    unsavedSectionLabel?: string
+    withItemSlot?: boolean
+  }) => {
+    const Host = defineComponent({
+      setup() {
+        if (opts.registry) provide(UnsavedSectionKey, opts.registry)
+        return () =>
+          h(
+            AListEditor<Item>,
+            {
+              modelValue: opts.model.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                opts.model.value = v
+              },
+              factory: makeItem,
+              compactField: 'title',
+              position: 'position',
+              disableDeleteConfirm: true,
+              unsavedSectionLabel: opts.unsavedSectionLabel,
+            },
+            // An #item slot makes the editor inline-edit-capable, so added rows
+            // auto-open into edit mode (otherwise auto-open is a no-op).
+            opts.withItemSlot
+              ? { item: ({ raw }: { raw: Item }) => h('span', { class: 'test-item' }, raw.title) }
+              : undefined,
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+  }
+
+  it('add button inserts the factory item itself and renumbers managed positions', async () => {
+    const model = ref<Item[]>(items())
+    mountManaged({ model })
+    await nextTick()
+
+    const addBtn = mounted!
+      .findAll('button')
+      .find(
+        (b) => b.text().toLowerCase().includes('add') || b.classes().some((c) => c.includes('add')),
+      )
+    expect(addBtn).toBeTruthy()
+    await addBtn!.trigger('click')
+    await nextTick()
+
+    expect(read(model).length).toBe(3)
+    // Managed position renumbered the appended row.
+    expect(read(model).map((i) => i.position)).toEqual([1, 2, 3])
+  })
+
+  // The first managed add into an empty-at-mount list must read as unsaved —
+  // the controller treats an added row (no baseline hash) as dirty by construction.
+  it('first managed add into an EMPTY list still reads as unsaved', async () => {
+    const model = ref<Item[]>([])
+    mountManaged({ model })
+    await nextTick()
+
+    const addBtn = mounted!
+      .findAll('button')
+      .find(
+        (b) => b.text().toLowerCase().includes('add') || b.classes().some((c) => c.includes('add')),
+      )
+    await addBtn!.trigger('click')
+    await nextTick()
+    await nextTick()
+
+    expect(read(model).length).toBe(1)
+    const row = document.querySelector<HTMLElement>(`[data-id="${read(model)[0].id}"]`)
+    expect(row).toBeTruthy()
+    expect(row!.classList.contains('a-le-row--unsaved')).toBe(true)
+  })
+
+  it('managed delete removes the row from the model and emits `deleted`', async () => {
+    const model = ref<Item[]>(items())
+    const events: Record<string, unknown[]> = {}
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(AListEditor<Item>, {
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Item[]) => {
+              model.value = v
+            },
+            factory: makeItem,
+            compactField: 'title',
+            position: 'position',
+            disableDeleteConfirm: true,
+            onDeleted: (vi: unknown) => {
+              events.deleted = [...(events.deleted ?? []), vi]
+            },
+          })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+
+    const row = document.querySelector<HTMLElement>('[data-id="1"]')
+    expect(row).toBeTruthy()
+    // Array.from (ArrayLike overload) instead of a spread — NodeList iteration
+    // needs the DOM.Iterable lib, which the build's test tsconfig doesn't load.
+    const del = Array.from(row!.querySelectorAll('button')).find((b) =>
+      b.className.includes('--delete'),
+    ) as HTMLButtonElement
+    expect(del).toBeTruthy()
+    del.click()
+    await nextTick()
+    await nextTick()
+
+    expect(read(model).map((i) => i.id)).toEqual([2])
+    // Renumbered after delete (managed position).
+    expect(read(model).map((i) => i.position)).toEqual([1])
+    expect(events.deleted?.length).toBe(1)
+    // A previously-saved deleted row is recorded in the change-set.
+    expect(
+      exposed(mounted!)
+        .getChanges()
+        .deleted.map((i) => i.id),
+    ).toEqual([1])
+  })
+
+  // Named for what it asserts: `commit()` re-baselines (amber clears) and deliberately LEAVES
+  // the inline form open. It was previously called "collapses inline editing when the consumer
+  // commits", which documented the opposite of both the body and the behaviour.
+  it('clears amber but keeps inline editing open when the consumer commits (post-save)', async () => {
+    const model = ref<Item[]>(items())
+    mountManaged({ model, withItemSlot: true })
+    await nextTick()
+
+    const addBtn = mounted!
+      .findAll('button')
+      .find(
+        (b) => b.text().toLowerCase().includes('add') || b.classes().some((c) => c.includes('add')),
+      )
+    await addBtn!.trigger('click')
+    await nextTick()
+    await nextTick()
+    // The freshly added row auto-opened for inline editing.
+    expect(document.querySelectorAll('.a-le-row--editing').length).toBeGreaterThan(0)
+
+    // Parent persisted and committed → editing is left open by the controller
+    // (commit only re-baselines data); a bare commit does not force-close edit.
+    // Resetting back is the discard path.
+    exposed(mounted!).commit()
+    await nextTick()
+    await nextTick()
+    expect(document.querySelectorAll('.a-le-row--unsaved').length).toBe(0)
+    // Both halves of the name are now asserted — the "keeps editing open" half was only
+    // ever stated in a comment, so nothing pinned it.
+    expect(document.querySelectorAll('.a-le-row--editing').length).toBeGreaterThan(0)
+  })
+
+  it('unsaved-section-label registers the editor as a dirty section once a row is unsaved', async () => {
+    const model = ref<Item[]>(items())
+    const registry = createUnsavedSectionRegistry()
+    mountManaged({ model, registry, unsavedSectionLabel: 'My section' })
+    await nextTick()
+
+    expect(registry.dirtyLabels.value).toEqual([])
+
+    const addBtn = mounted!
+      .findAll('button')
+      .find(
+        (b) => b.text().toLowerCase().includes('add') || b.classes().some((c) => c.includes('add')),
+      )
+    await addBtn!.trigger('click')
+    await nextTick()
+    await nextTick()
+
+    expect(registry.dirtyLabels.value).toEqual(['My section'])
+  })
+
+  it('without unsaved-section-label nothing is registered', async () => {
+    const model = ref<Item[]>(items())
+    const registry = createUnsavedSectionRegistry()
+    mountManaged({ model, registry })
+    await nextTick()
+
+    const addBtn = mounted!
+      .findAll('button')
+      .find(
+        (b) => b.text().toLowerCase().includes('add') || b.classes().some((c) => c.includes('add')),
+      )
+    await addBtn!.trigger('click')
+    await nextTick()
+
+    expect(registry.dirtyLabels.value).toEqual([])
+  })
+})
+
+describe('useListEditor.addItem position hints (managed add-after path)', () => {
+  it('afterId inserts right after the row and renumbers', () => {
+    const model = ref<Item[]>(items())
+    const editor = useListEditor<Item>(model, { updatePosition: true })
+    const result = editor.addItem({ id: -50, position: 0, title: 'new' }, { afterId: 1 })
+    expect(result.map((i) => i.id)).toEqual([1, -50, 2])
+    expect(result.map((i) => i.position)).toEqual([1, 2, 3])
+  })
+
+  it('unknown afterId appends to the end', () => {
+    const model = ref<Item[]>(items())
+    const editor = useListEditor<Item>(model, { updatePosition: true })
+    const result = editor.addItem({ id: -51, position: 0, title: 'new' }, { afterId: 999 })
+    expect(result.map((i) => i.id)).toEqual([1, 2, -51])
+  })
+})
diff --git a/src/test/components/ListEditorStateScope.test.ts b/src/test/components/ListEditorStateScope.test.ts
new file mode 100644
index 00000000..7292309f
--- /dev/null
+++ b/src/test/components/ListEditorStateScope.test.ts
@@ -0,0 +1,484 @@
+/* eslint-disable vue/no-ref-object-reactivity-loss -- tests read the exposed handle refs imperatively */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import ANestedSortableListEditor from '@/labs/listEditor/ANestedSortableListEditor.vue'
+import type { ListEditorHandle } from '@/labs/listEditor/composables/useListEditorController'
+import type { NestedListEditorHandle } from '@/labs/listEditor/composables/useNestedListEditorController'
+import type { NestedTree } from '@/labs/listEditor/types/listEditorTypes'
+import { createListEditorStateScope } from '@/labs/listEditor/composables/useListEditorStateScope'
+
+/**
+ * A list editor rendered in ANOTHER editor's `#item` slot is UNMOUNTED when the row collapses (the
+ * slot is behind a `v-if`). With a component-owned controller a brand-new one then baselines the
+ * ALREADY-EDITED data on re-expand, so the amber markers, the moved flags, the deletion tombstones
+ * and the submitted (red-rail) flag are all lost.
+ *
+ * `state-key` fixes it: the controller is built inside the OUTER editor's row-state scope (from the
+ * inner editor's OWN props) and only rebound — not rebuilt — on every remount.
+ */
+
+interface Row {
+  id: number
+  position: number
+  title: string
+}
+interface Child {
+  id: number
+  position: number
+  title: string
+}
+type ChildHandle = ListEditorHandle<Child>
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const innerRows = (): Element[] => Array.from(document.querySelectorAll('.a-list-editor .a-le-row'))
+const innerUnsavedRows = (): Element[] =>
+  Array.from(document.querySelectorAll('.a-list-editor .a-le-row--unsaved'))
+const innerInvalidRows = (): Element[] =>
+  Array.from(document.querySelectorAll('.a-list-editor .a-le-row--validation-invalid'))
+const innerMounted = (): boolean => document.querySelectorAll('.a-list-editor').length > 0
+
+const childFactory = (): Child => ({ id: -Date.now(), position: 0, title: '' })
+const childValidate = (c: Child): boolean => c.title.length > 0
+
+/** Grab the LIVE inner editor's exposed handle (a new component instance after every remount). */
+const innerHandle = (wrapper: VueWrapper): ChildHandle =>
+  (wrapper.findComponent(AListEditor) as unknown as { vm: { $: { exposed: ChildHandle } } }).vm.$
+    .exposed
+
+interface HostOptions {
+  outer: ReturnType<typeof ref<Row[]>>
+  inner: ReturnType<typeof ref<Child[]>>
+  /** Omit the `state-key` to assert today's (unfixed) behaviour is untouched. */
+  withStateKey?: boolean
+}
+
+const buildHost = (opts: HostOptions) =>
+  defineComponent({
+    setup() {
+      return () =>
+        h(
+          ASortableListEditor<Row>,
+          {
+            modelValue: opts.outer.value as Row[],
+            'onUpdate:modelValue': (v: Row[]) => {
+              opts.outer.value = v
+            },
+            factory: (): Row => ({ id: -Date.now(), position: 0, title: '' }),
+            compactField: 'title',
+          },
+          {
+            item: (slotProps: { stateKeyPrefix: string }) =>
+              h(
+                AListEditor<Child>,
+                {
+                  modelValue: opts.inner.value as Child[],
+                  'onUpdate:modelValue': (v: Child[]) => {
+                    opts.inner.value = v
+                  },
+                  factory: childFactory,
+                  validate: childValidate,
+                  stateKey:
+                    opts.withStateKey === false
+                      ? undefined
+                      : `${slotProps.stateKeyPrefix}:children`,
+                },
+                { item: () => h('div', { class: 'inner-form' }, 'form') },
+              ),
+          },
+        )
+    },
+  })
+
+/** Click the OUTER row header (first in DOM order) to expand / collapse it. */
+const toggleOuterRow = async (wrapper: VueWrapper): Promise<void> => {
+  await wrapper.findAll('.a-le-row-header')[0].trigger('click')
+  await nextTick()
+  await nextTick()
+}
+
+describe('list-editor state scope — a `state-key`d editor survives its row collapsing', () => {
+  it('keeps the amber (added + edited) markers across unmount/remount', async () => {
+    const outer = ref<Row[]>([{ id: 1, position: 1, title: 'Row 1' }])
+    const inner = ref<Child[]>([{ id: 11, position: 1, title: 'A' }])
+    mounted = mount(buildHost({ outer, inner }), { attachTo: document.body })
+    await nextTick()
+
+    await toggleOuterRow(mounted)
+    expect(innerMounted()).toBe(true)
+    expect(innerRows()).toHaveLength(1)
+    expect(innerUnsavedRows()).toHaveLength(0)
+
+    innerHandle(mounted).addItem({ id: -7, position: 2, title: 'new' })
+    await nextTick()
+    expect(innerRows()).toHaveLength(2)
+    expect(innerUnsavedRows()).toHaveLength(1)
+
+    await toggleOuterRow(mounted) // collapse → the nested editor unmounts
+    expect(innerMounted()).toBe(false)
+
+    await toggleOuterRow(mounted) // re-expand → the SAME controller is rebound
+    expect(innerRows()).toHaveLength(2)
+    // The crux: the added row is still unsaved (a fresh controller would have baselined it).
+    expect(innerUnsavedRows()).toHaveLength(1)
+    const handle = innerHandle(mounted)
+    expect(handle.hasUnsaved.value).toBe(true)
+    expect(handle.getChanges().added).toHaveLength(1)
+  })
+
+  it('keeps movedKeys (a reorder with no content change) across unmount/remount', async () => {
+    const outer = ref<Row[]>([{ id: 1, position: 1, title: 'Row 1' }])
+    const inner = ref<Child[]>([
+      { id: 11, position: 1, title: 'A' },
+      { id: 12, position: 2, title: 'B' },
+    ])
+    mounted = mount(buildHost({ outer, inner }), { attachTo: document.body })
+    await nextTick()
+    await toggleOuterRow(mounted)
+
+    innerHandle(mounted).moveItem(0, 1) // content-invisible: only `movedKeys` records it
+    await nextTick()
+    expect(innerUnsavedRows()).toHaveLength(1)
+
+    await toggleOuterRow(mounted)
+    await toggleOuterRow(mounted)
+
+    expect(innerUnsavedRows()).toHaveLength(1)
+    expect(innerHandle(mounted).getChanges().moved).toHaveLength(1)
+  })
+
+  it('keeps the submitted flag (red rail on an untouched invalid row) across unmount/remount', async () => {
+    const outer = ref<Row[]>([{ id: 1, position: 1, title: 'Row 1' }])
+    // Loaded-but-invalid row: red only AFTER a save attempt (`validateAll`), never before.
+    const inner = ref<Child[]>([{ id: 11, position: 1, title: '' }])
+    mounted = mount(buildHost({ outer, inner }), { attachTo: document.body })
+    await nextTick()
+    await toggleOuterRow(mounted)
+    expect(innerInvalidRows()).toHaveLength(0)
+
+    expect(innerHandle(mounted).validateAll()).toBe(false)
+    await nextTick()
+    expect(innerInvalidRows()).toHaveLength(1)
+
+    await toggleOuterRow(mounted)
+    await toggleOuterRow(mounted)
+
+    // `submitted` lives in the controller — a fresh one would drop back to "not submitted" (no rail).
+    expect(innerInvalidRows()).toHaveLength(1)
+  })
+
+  it('keeps deferred-deletion tombstones across unmount/remount', async () => {
+    const outer = ref<Row[]>([{ id: 1, position: 1, title: 'Row 1' }])
+    const inner = ref<Child[]>([
+      { id: 11, position: 1, title: 'A' },
+      { id: 12, position: 2, title: 'B' },
+    ])
+    mounted = mount(buildHost({ outer, inner }), { attachTo: document.body })
+    await nextTick()
+    await toggleOuterRow(mounted)
+
+    innerHandle(mounted).deleteItem(11) // deferred (default): tombstoned until save
+    await nextTick()
+    expect(innerRows()).toHaveLength(1)
+
+    await toggleOuterRow(mounted)
+    await toggleOuterRow(mounted)
+
+    const handle = innerHandle(mounted)
+    expect(innerRows()).toHaveLength(1)
+    expect(handle.hasUnsaved.value).toBe(true)
+    expect(handle.unsavedCount.value).toBe(1)
+    expect(handle.getChanges().deleted).toHaveLength(1)
+
+    // The controller's `items` watch must still be RUNNING after the creating instance died:
+    // re-adding the deleted key has to drop its tombstone.
+    handle.addItem({ id: 11, position: 1, title: 'A' })
+    await nextTick()
+    expect(handle.getChanges().deleted).toHaveLength(0)
+  })
+
+  it('rebinds the model accessors to the LIVE instance on remount (read + write)', async () => {
+    const outer = ref<Row[]>([{ id: 1, position: 1, title: 'Row 1' }])
+    const inner = ref<Child[]>([{ id: 11, position: 1, title: 'A' }])
+    mounted = mount(buildHost({ outer, inner }), { attachTo: document.body })
+    await nextTick()
+    await toggleOuterRow(mounted)
+    expect(innerRows()).toHaveLength(1)
+
+    await toggleOuterRow(mounted) // collapse: the creating instance is gone
+
+    // The model changes WHILE the editor is unmounted (a store reload / another writer): a whole new
+    // array identity. A controller still reading the dead instance's `modelValue` would never see it.
+    inner.value = [
+      { id: 11, position: 1, title: 'A' },
+      { id: 12, position: 2, title: 'B' },
+    ]
+    await nextTick()
+
+    await toggleOuterRow(mounted) // remount → rebind
+    expect(innerRows()).toHaveLength(2) // READ goes through the LIVE instance's model
+
+    // WRITE goes through the LIVE instance too: while parked, the entry's `set` is a no-op, so a
+    // stale binding would silently swallow this.
+    innerHandle(mounted).addItem({ id: -9, position: 3, title: 'C' })
+    await nextTick()
+    expect(inner.value).toHaveLength(3)
+    expect(innerRows()).toHaveLength(3)
+    expect(inner.value.at(-1)?.id).toBe(-9)
+
+    // The persisted controller was built from the editor's OWN props, so `factory` (bare `addItem()`)
+    // and `position` management still work — a controller resolved externally must NOT end up without
+    // them (the `:editor`-lift gotcha).
+    innerHandle(mounted).addItem()
+    await nextTick()
+    expect(inner.value).toHaveLength(4)
+    expect(inner.value.at(-1)?.title).toBe('') // minted by THIS editor's `:factory`
+    expect(inner.value.map((c) => c.position)).toEqual([1, 2, 3, 4]) // …and renumbered
+  })
+
+  it('WITHOUT a state-key nothing changes: the remounted editor re-baselines (today behaviour)', async () => {
+    const outer = ref<Row[]>([{ id: 1, position: 1, title: 'Row 1' }])
+    const inner = ref<Child[]>([{ id: 11, position: 1, title: 'A' }])
+    mounted = mount(buildHost({ outer, inner, withStateKey: false }), { attachTo: document.body })
+    await nextTick()
+    await toggleOuterRow(mounted)
+
+    innerHandle(mounted).addItem({ id: -7, position: 2, title: 'new' })
+    await nextTick()
+    expect(innerUnsavedRows()).toHaveLength(1)
+
+    await toggleOuterRow(mounted)
+    await toggleOuterRow(mounted)
+
+    expect(innerRows()).toHaveLength(2) // the DATA survives (it lives in the v-model)
+    expect(innerUnsavedRows()).toHaveLength(0) // the unsaved marker does not — unchanged behaviour
+  })
+
+  it('prunes a removed row: a re-created row with the same key gets a FRESH controller', async () => {
+    const outer = ref<Row[]>([{ id: 1, position: 1, title: 'Row 1' }])
+    const inner = ref<Child[]>([{ id: 11, position: 1, title: 'A' }])
+    mounted = mount(buildHost({ outer, inner }), { attachTo: document.body })
+    await nextTick()
+    await toggleOuterRow(mounted)
+
+    innerHandle(mounted).addItem({ id: -7, position: 2, title: 'new' })
+    await nextTick()
+    expect(innerUnsavedRows()).toHaveLength(1)
+
+    // The OWNING row goes away → its nested controllers must be disposed with it.
+    outer.value = []
+    await nextTick()
+    await nextTick()
+    expect(innerMounted()).toBe(false)
+
+    // Same row key comes back (the scope must NOT hand out the stale controller).
+    outer.value = [{ id: 1, position: 1, title: 'Row 1' }]
+    await nextTick()
+    await nextTick()
+    // The re-added row may already be open (the editor's own view state still holds the key).
+    if (!innerMounted()) await toggleOuterRow(mounted)
+
+    expect(innerRows()).toHaveLength(2) // data still in the v-model
+    expect(innerUnsavedRows()).toHaveLength(0) // …but baselined by a brand-new controller
+  })
+})
+
+describe('list-editor state scope — the tree editor', () => {
+  interface Node {
+    id: number
+    position: number
+    parent: number | null
+    title: string
+  }
+  type NodeHandle = NestedListEditorHandle<Node>
+
+  it('a `state-key`d ANestedSortableListEditor keeps its dirty state across the row collapsing', async () => {
+    const outer = ref<Row[]>([{ id: 1, position: 1, title: 'Row 1' }])
+    const tree = ref<NestedTree<Node>>({
+      children: [
+        {
+          data: { id: 11, position: 1, parent: null, title: 'A' },
+          children: [],
+          meta: { dirty: false },
+        },
+      ],
+      meta: { dirty: false },
+    })
+
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            ASortableListEditor<Row>,
+            {
+              modelValue: outer.value,
+              'onUpdate:modelValue': (v: Row[]) => {
+                outer.value = v
+              },
+              compactField: 'title',
+            },
+            {
+              item: (slotProps: { stateKeyPrefix: string }) =>
+                h(
+                  ANestedSortableListEditor<Node>,
+                  {
+                    modelValue: tree.value,
+                    'onUpdate:modelValue': (v: NestedTree<Node>) => {
+                      tree.value = v
+                    },
+                    factory: (): Node => ({
+                      id: -Date.now(),
+                      position: 0,
+                      parent: null,
+                      title: '',
+                    }),
+                    maxDepth: 2,
+                    compactField: 'title',
+                    stateKey: `${slotProps.stateKeyPrefix}:tree`,
+                  },
+                  { item: () => h('div', { class: 'nested-form' }, 'form') },
+                ),
+            },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+    await toggleOuterRow(mounted)
+
+    const nestedRows = (): Element[] =>
+      Array.from(document.querySelectorAll('.a-nested-list-editor .a-le-row'))
+    const nestedUnsaved = (): Element[] =>
+      Array.from(document.querySelectorAll('.a-nested-list-editor .a-le-row--unsaved'))
+    const nestedHandle = (): NodeHandle =>
+      (
+        mounted!.findComponent(
+          ANestedSortableListEditor as unknown as Parameters<VueWrapper['findComponent']>[0],
+        ) as unknown as { vm: { $: { exposed: NodeHandle } } }
+      ).vm.$.exposed
+
+    expect(nestedRows()).toHaveLength(1)
+    nestedHandle().addItem({ id: -3, position: 2, parent: null, title: 'B' })
+    await nextTick()
+    expect(nestedRows()).toHaveLength(2)
+    expect(nestedUnsaved()).toHaveLength(1)
+
+    await toggleOuterRow(mounted)
+    expect(document.querySelectorAll('.a-nested-list-editor')).toHaveLength(0)
+    await toggleOuterRow(mounted)
+
+    expect(nestedRows()).toHaveLength(2)
+    expect(nestedUnsaved()).toHaveLength(1)
+    expect(nestedHandle().hasUnsaved.value).toBe(true)
+  })
+})
+
+describe('createListEditorStateScope', () => {
+  interface Bindings {
+    get: () => number
+  }
+
+  it('creates once per key, rebinds on every later resolve, and prunes by owning row', () => {
+    const scope = createListEditorStateScope()
+    let created = 0
+    const key = `${scope.prefixFor(1)}:children`
+
+    const handle = scope.resolve<Bindings, { read: () => number }>(
+      key,
+      { get: () => 1 },
+      (live) => {
+        created++
+        return { read: () => live.value.get() }
+      },
+      101,
+    )
+    expect(created).toBe(1)
+    expect(scope.size()).toBe(1)
+    expect(handle.read()).toBe(1)
+
+    // Remount: same key, NEW bindings → same handle, rebound.
+    const again = scope.resolve<Bindings, { read: () => number }>(
+      key,
+      { get: () => 2 },
+      (live) => {
+        created++
+        return { read: () => live.value.get() }
+      },
+      102,
+    )
+    expect(created).toBe(1)
+    expect(again).toBe(handle)
+    expect(handle.read()).toBe(2)
+
+    // A key the host invented itself carries no row ownership → never row-pruned.
+    scope.resolve<Bindings, { read: () => number }>('custom', { get: () => 9 }, (live) => ({
+      read: () => live.value.get(),
+    }))
+
+    scope.retainOwners([1]) // row 1 still alive
+    expect(scope.has(key)).toBe(true)
+
+    scope.retainOwners([2]) // row 1 is gone
+    expect(scope.has(key)).toBe(false)
+    expect(scope.has('custom')).toBe(true)
+
+    // Pruned for real: the next resolve builds a NEW controller.
+    scope.resolve<Bindings, { read: () => number }>(key, { get: () => 3 }, (live) => {
+      created++
+      return { read: () => live.value.get() }
+    })
+    expect(created).toBe(2)
+
+    scope.dispose()
+    expect(scope.size()).toBe(0)
+  })
+
+  it('parks a released entry: the orphaned controller can no longer write through the dead instance', () => {
+    const scope = createListEditorStateScope()
+    let written: number[] | null = null
+    const items = [1, 2]
+    interface ModelBindings {
+      get: () => number[]
+      set: (v: number[]) => void
+    }
+    const bindings: ModelBindings = {
+      get: () => items,
+      set: (v) => {
+        written = v
+      },
+    }
+    const handle = scope.resolve<
+      ModelBindings,
+      { write: (v: number[]) => void; read: () => number[] }
+    >(
+      'k',
+      bindings,
+      (live) => ({ write: (v) => live.value.set(v), read: () => live.value.get() }),
+      7,
+    )
+
+    handle.write([3])
+    expect(written).toEqual([3])
+
+    // A different instance's release must NOT park the entry (mount-before-unmount ordering).
+    scope.release<ModelBindings>('k', 8, (b) => ({ ...b, set: () => undefined }))
+    handle.write([4])
+    expect(written).toEqual([4])
+
+    // The bound instance unmounts → parked: reads freeze, writes are dropped.
+    scope.release<ModelBindings>('k', 7, (b) => {
+      const frozen = b.get()
+      return { get: () => frozen, set: () => undefined }
+    })
+    handle.write([5])
+    expect(written).toEqual([4])
+    expect(handle.read()).toEqual(items)
+  })
+})
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-renders-row-body---footer-below-the-row-header-when-editing-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-active-row-keeps-title---close-button-shows-a-close--X--button-in-the-editing-row-header-instead-of-edit---delete-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-1.png
new file mode 100644
index 00000000..f81f01ed
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-2.png
new file mode 100644
index 00000000..59994bd7
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-3.png
new file mode 100644
index 00000000..60b53851
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-aborts-delete-when-onDeleteConfirm-returns-false-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-1.png
new file mode 100644
index 00000000..3fb8d47a
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-2.png
new file mode 100644
index 00000000..48cd05c4
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-3.png
new file mode 100644
index 00000000..aec53ffd
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-emits-delete-and-removes-item-from-model-when-delete-is-clicked-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-1.png
new file mode 100644
index 00000000..9b90b1e8
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-2.png
new file mode 100644
index 00000000..e6a3ef09
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-3.png
new file mode 100644
index 00000000..a42eeb07
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-events-and-interactions-proceeds-with-delete-when-onDeleteConfirm-returns-true-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer--item-footer-slot-overrides-the-default-footer-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Cancel-button-clears-editing-state-without-calling-onItemSave-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-default-Save-button-calls-onItemSave-and-clears-editing-state-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-editing-row-has---editing-class--tonal-active-styling--3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-inline-edit-footer-renders-default-Cancel-Save-footer-when-the-row-enters-editing-state-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-exposed-API-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-position-hints-supports-addItem-with-afterId-hint-via-imperative-ref-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-reactivity-reflects-model-additions-in-the-rendered-rows-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-1.png
new file mode 100644
index 00000000..1e7d4527
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-2.png
new file mode 100644
index 00000000..4e74b6d5
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-3.png
new file mode 100644
index 00000000..6b04071f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-action-buttons-does-not-re-trigger-edit-via-row-click-3.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-1.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-1.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-2.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-2.png differ
diff --git a/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-3.png b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/AListEditor.test.ts/AListEditor-row-click-clicking-the-row-triggers-edit-by-default-3.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-1.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-1.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-2.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-2.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-3.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-keeps-the-row-title-visible-and-swaps-edit-delete-for-a-close-icon-3.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-1.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-1.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-2.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-2.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-3.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-active-row-keeps-title---close-button-in-edit-mode-renders-row-body---default-footer-with-Cancel---Save-below-the-header-3.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-1.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-1.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-2.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-2.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-3.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-apply-flow-awaits-onReorderApply-callback-and-exits-on-success-3.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-1.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-1.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-2.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-2.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-3.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-drag-handle-renders-drag-handle-per-row-in-reorder-mode-3.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-1.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-1.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-2.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-2.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-3.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-movement-in-reorder-mode-marks-moved-rows-with-the-moved-class-3.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-1.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-1.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-2.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-2.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-3.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-row-click-clicking-the-row-triggers-edit-in-view-mode-by-default-3.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-1.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-1.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-2.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-2.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-3.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-keeps-title-visible-in-reorder-mode-but-hides-the-reorder-toggle-3.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-1.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-1.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-2.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-2.png differ
diff --git a/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-3.png b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/components/__screenshots__/ASortableListEditor.test.ts/ASortableListEditor-widget-header---reorder-toggle-placement-renders-the-header-with-title-and-the-reorder-toggle-alongside-it-3.png differ
diff --git a/src/test/components/createCachedChip.test.ts b/src/test/components/createCachedChip.test.ts
new file mode 100644
index 00000000..9f286b88
--- /dev/null
+++ b/src/test/components/createCachedChip.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import { createCachedChip } from '@/components/createCachedChip'
+
+// Stub stands in for the real ACachedChip (which needs a router) and records
+// the props/attrs the factory forwards.
+const ACachedChipStub = defineComponent({
+  name: 'ACachedChip',
+  props: {
+    id: { type: [Number, String], default: null },
+    getCachedFn: { type: Function, default: () => null },
+    route: { type: String, default: '' },
+    displayTextPath: { type: String, default: '' },
+    textOnly: { type: Boolean, default: false },
+    size: { type: String, default: '' },
+  },
+  template: '<div class="cached-chip-stub" />',
+})
+
+describe('createCachedChip', () => {
+  const Chip = createCachedChip({
+    useGetCachedFn: () => (id) => ({ name: `Name ${id}` }),
+    route: '/(cms)/desks/[id]',
+    displayTextPath: 'name',
+  })
+
+  it('bakes route/displayTextPath/getCachedFn onto ACachedChip and forwards id + attrs', () => {
+    const wrapper = mount(Chip, {
+      props: { id: 7 },
+      attrs: { textOnly: true, size: 'large' },
+      global: { stubs: { ACachedChip: ACachedChipStub } },
+    })
+    const chip = wrapper.findComponent(ACachedChipStub)
+    expect(chip.exists()).toBe(true)
+    expect(chip.props('route')).toBe('/(cms)/desks/[id]')
+    expect(chip.props('displayTextPath')).toBe('name')
+    expect(chip.props('id')).toBe(7)
+    expect(chip.props('textOnly')).toBe(true)
+    expect(chip.props('size')).toBe('large')
+    const getCachedFn = chip.props('getCachedFn') as (id: number) => unknown
+    expect(typeof getCachedFn).toBe('function')
+    expect(getCachedFn(7)).toEqual({ name: 'Name 7' })
+  })
+
+  it('baked chipProps are applied', () => {
+    const Baked = createCachedChip({
+      useGetCachedFn: () => () => null,
+      route: 'r',
+      displayTextPath: 'name',
+      chipProps: { textOnly: true },
+    })
+    const wrapper = mount(Baked, {
+      props: { id: 1 },
+      global: { stubs: { ACachedChip: ACachedChipStub } },
+    })
+    expect(wrapper.findComponent(ACachedChipStub).props('textOnly')).toBe(true)
+  })
+})
diff --git a/src/test/components/exposedHandleUnwrap.test.ts b/src/test/components/exposedHandleUnwrap.test.ts
new file mode 100644
index 00000000..e2eaa5a4
--- /dev/null
+++ b/src/test/components/exposedHandleUnwrap.test.ts
@@ -0,0 +1,138 @@
+import { describe, it, expect, expectTypeOf } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, nextTick, onMounted, ref, unref, useTemplateRef } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+import type {
+  ExposedListEditorHandle,
+  ListEditorHandle,
+} from '@/labs/listEditor/composables/useListEditorController'
+
+interface Row {
+  id: number
+  position: number
+  title: string
+}
+
+// QA 85050 batch-8 root cause: Vue's exposeProxy UNWRAPS an exposed ref, so a consumer reading a
+// list-editor handle via a template ref gets `handle.hasUnsaved` as a plain boolean — NOT a
+// ComputedRef. The widespread `handle.hasUnsaved.value` therefore read `undefined` (`?? false` →
+// always false), silently disabling every unsaved-guard / save-gate built on it. Consumers must read
+// via `unref(handle.hasUnsaved)`. This locks that contract so the systemic bug can't return unnoticed.
+describe('exposed list-editor handle — hasUnsaved/hasErrors are unwrapped through the template ref', () => {
+  let id = 0
+  const mountWithHandle = (rows: Row[]) => {
+    const model = ref<Row[]>(rows)
+    let handle!: ListEditorHandle<Row>
+    const Host = defineComponent({
+      setup() {
+        const editor = useTemplateRef<ListEditorHandle<Row>>('editor')
+        onMounted(() => {
+          handle = editor.value as unknown as ListEditorHandle<Row>
+        })
+        return () =>
+          h(AListEditor<Row>, {
+            ref: 'editor',
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Row[]) => {
+              model.value = v
+            },
+            factory: (): Row => ({ id: (id -= 1), position: 0, title: '' }),
+          })
+      },
+    })
+    const wrapper = mount(Host)
+    return { wrapper, model, handle: () => handle }
+  }
+
+  it('reflects dirtiness only via unref(handle.hasUnsaved); the naive .value read is undefined', async () => {
+    const { handle } = mountWithHandle([{ id: 1, position: 1, title: 'A' }])
+    await nextTick()
+    const h0 = handle()
+
+    // Clean baseline — the CORRECT consumer read.
+    expect(unref(h0.hasUnsaved)).toBe(false)
+
+    // Dirty it through the exposed handle.
+    h0.addItem(undefined, undefined)
+    await nextTick()
+
+    // unref() reflects the change (what every guard/save-gate consumer must use)...
+    expect(unref(h0.hasUnsaved)).toBe(true)
+
+    // ...but `handle.hasUnsaved` is already the UNWRAPPED boolean (Vue exposeProxy), so `.value` is
+    // undefined — the exact always-false footgun behind the batch-8 "the fix doesn't work" reports.
+    expect(typeof h0.hasUnsaved).toBe('boolean')
+    expect((h0.hasUnsaved as unknown as { value?: unknown }).value).toBeUndefined()
+  })
+
+  it('hasErrors is likewise unwrapped — read via unref (a validate predicate makes it observable)', async () => {
+    const model = ref<Row[]>([{ id: 1, position: 1, title: '' }]) // empty title = invalid
+    let handle!: ListEditorHandle<Row>
+    const Host = defineComponent({
+      setup() {
+        const editor = useTemplateRef<ListEditorHandle<Row>>('editor')
+        onMounted(() => {
+          handle = editor.value as unknown as ListEditorHandle<Row>
+        })
+        return () =>
+          h(AListEditor<Row>, {
+            ref: 'editor',
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Row[]) => {
+              model.value = v
+            },
+            validate: (r: Row) => !!r.title,
+            factory: (): Row => ({ id: -1, position: 0, title: '' }),
+          })
+      },
+    })
+    mount(Host)
+    await nextTick()
+
+    expect(unref(handle.hasErrors)).toBe(true)
+    expect(typeof handle.hasErrors).toBe('boolean')
+    expect((handle.hasErrors as unknown as { value?: unknown }).value).toBeUndefined()
+  })
+
+  it('a FUNCTION-ref collected handle is unwrapped too (the access form a grep sweep can miss)', async () => {
+    // Handles collected via `:ref="(el) => ..."` (e.g. one per position in a v-for) go through the
+    // same exposeProxy, so `handle.hasUnsaved` is a bare boolean there as well — `.value` is undefined.
+    const model = ref<Row[]>([{ id: 1, position: 1, title: 'A' }])
+    let collected: ListEditorHandle<Row> | null = null
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(AListEditor<Row>, {
+            ref: (el: unknown) => {
+              collected = el as ListEditorHandle<Row> | null
+            },
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Row[]) => {
+              model.value = v
+            },
+            factory: (): Row => ({ id: -1, position: 0, title: '' }),
+          })
+      },
+    })
+    mount(Host)
+    await nextTick()
+
+    expect(collected).not.toBeNull()
+    expect(typeof collected!.hasUnsaved).toBe('boolean')
+    expect((collected!.hasUnsaved as unknown as { value?: unknown }).value).toBeUndefined()
+    expect(unref(collected!.hasUnsaved)).toBe(false)
+  })
+
+  it('the ExposedListEditorHandle TYPE unwraps the ref fields (so a stray .value is a compile error)', () => {
+    type H = ExposedListEditorHandle<Row>
+    // The whole point of the alias: ref fields collapse to their inner value, so typing a consumer's
+    // template/function ref with it makes `handle.hasUnsaved.value` fail to compile (boolean has no
+    // `.value`), instead of silently reading undefined.
+    expectTypeOf<H['hasUnsaved']>().toEqualTypeOf<boolean>()
+    expectTypeOf<H['hasErrors']>().toEqualTypeOf<boolean>()
+    expectTypeOf<H['unsavedCount']>().toEqualTypeOf<number>()
+    expectTypeOf<H['items']>().toEqualTypeOf<Row[]>()
+    // Methods stay callable (not unwrapped).
+    expectTypeOf<H['validateAll']>().returns.toEqualTypeOf<boolean>()
+  })
+})
diff --git a/src/test/components/listEditorDeleteMode.test.ts b/src/test/components/listEditorDeleteMode.test.ts
new file mode 100644
index 00000000..1a1fbc29
--- /dev/null
+++ b/src/test/components/listEditorDeleteMode.test.ts
@@ -0,0 +1,308 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, ref, nextTick, type Component } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import ANestedSortableListEditor from '@/labs/listEditor/ANestedSortableListEditor.vue'
+import type { NestedTree } from '@/labs/listEditor/types/listEditorTypes'
+
+// Runtime shape of the exposed handle — the exposed proxy unwraps refs, so these are plain values.
+interface EditorHandle {
+  hasUnsaved: boolean
+  unsavedCount: number
+  commit: () => void
+  removeById: (id: number) => void
+  updateItem: (key: number, next: Partial<Row>) => void
+}
+
+/**
+ * QA 85050 — delete-mode contract (TDD, not yet implemented).
+ *
+ *   `deleteMode: 'immediate' | 'deferred'` (default `deferred`), per the codex-reviewed design:
+ *   - immediate → consumer deletes on the backend (`:on-delete`) BEFORE the row leaves the model; the
+ *                 confirm dialog says it is irreversible; afterwards NO unconfirmed change (count 0).
+ *   - deferred  → the row DISAPPEARS but the deletion lights up as ONE unconfirmed change until save
+ *                 (`unsavedCount` counts it as a key-union tombstone, never double-counting an
+ *                 edited/moved row that is then deleted); the dialog says it can still be reverted.
+ *
+ * Reorder-mode delete + Cancel semantics (deferred delete reverts on Cancel, immediate stays gone) are
+ * covered in the admin-cms e2e — the reorder ⋮ menu overlay is impractical to drive here.
+ */
+
+interface Row {
+  id: number
+  position: number
+  title: string
+}
+
+const rows = (): Row[] => [
+  { id: 1, position: 1, title: 'First' },
+  { id: 2, position: 2, title: 'Second' },
+  { id: 3, position: 3, title: 'Third' },
+]
+
+let tempId = 0
+const makeRow = (): Row => ({ id: --tempId, position: 0, title: 'new' })
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+  document.querySelectorAll('.v-overlay-container').forEach((n) => (n.innerHTML = ''))
+})
+
+interface MountResult {
+  wrapper: VueWrapper
+  model: { value: Row[] }
+  handle: () => EditorHandle
+}
+
+function mountEditor(extra: Record<string, unknown> = {}): MountResult {
+  const model = ref<Row[]>(rows())
+  let handle: EditorHandle | null = null
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(
+          ASortableListEditor as unknown as Parameters<typeof h>[0],
+          {
+            ref: (el: unknown) => {
+              if (el) handle = el as unknown as EditorHandle
+            },
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Row[]) => {
+              model.value = v
+            },
+            factory: makeRow,
+            compactField: 'title',
+            ...extra,
+          },
+          { 'item-compact': ({ raw }: { raw: Row }) => h('span', raw.title) },
+        )
+    },
+  })
+  mounted = mount(Host, { attachTo: document.body })
+  return { wrapper: mounted, model, handle: () => handle as EditorHandle }
+}
+
+async function clickDelete(wrapper: VueWrapper, rowIndex = 0): Promise<void> {
+  await wrapper.findAll('.a-le-action--delete')[rowIndex].trigger('click')
+  await flushPromises()
+  await nextTick()
+}
+
+const dialogText = (): string =>
+  (document.querySelector('.v-overlay__content .v-card-text')?.textContent ?? '')
+    .trim()
+    .toLowerCase()
+
+async function confirmDialog(): Promise<void> {
+  const btns = Array.from(document.querySelectorAll<HTMLElement>('.v-overlay__content .v-btn'))
+  const confirm = btns.find((b) => b.classList.contains('bg-error')) ?? btns[btns.length - 1]
+  confirm.click()
+  await flushPromises()
+  await nextTick()
+}
+
+describe('list-editor delete-mode — immediate', () => {
+  it('the confirm dialog text differs from deferred mode', async () => {
+    // Structural check — cannot false-green: today both modes render the same default text (which
+    // already says "cannot be undone", i.e. the immediate wording).
+    const imm = mountEditor({ deleteMode: 'immediate', onDelete: () => {} })
+    await clickDelete(imm.wrapper)
+    const immediateText = dialogText()
+    imm.wrapper.unmount()
+    document.querySelectorAll('.v-overlay-container').forEach((n) => (n.innerHTML = ''))
+
+    const def = mountEditor({ deleteMode: 'deferred' })
+    await clickDelete(def.wrapper)
+    const deferredText = dialogText()
+
+    expect(immediateText.length).toBeGreaterThan(0)
+    expect(deferredText.length).toBeGreaterThan(0)
+    expect(immediateText).not.toBe(deferredText)
+  })
+
+  it('runs :on-delete (API) while the row is STILL in the model, then removes it', async () => {
+    let idsDuringApi: number[] = []
+    const model = ref<Row[]>(rows())
+    const onDelete = vi.fn(() => {
+      idsDuringApi = model.value.map((r) => r.id)
+    })
+    let handle: EditorHandle | null = null
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(ASortableListEditor as unknown as Parameters<typeof h>[0], {
+            ref: (el: unknown) => {
+              if (el) handle = el as unknown as EditorHandle
+            },
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Row[]) => (model.value = v),
+            factory: makeRow,
+            compactField: 'title',
+            deleteMode: 'immediate',
+            onDelete,
+          })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await clickDelete(mounted)
+    await confirmDialog()
+
+    expect(onDelete).toHaveBeenCalledTimes(1)
+    expect(idsDuringApi).toContain(1) // API ran BEFORE the row was removed
+    // eslint-disable-next-line vue/no-ref-object-reactivity-loss -- final read for an assertion
+    expect(model.value.map((r) => r.id)).toEqual([2, 3]) // removed afterwards
+    void handle
+  })
+
+  it('leaves NO unconfirmed change — it is already persisted (count 0)', async () => {
+    const { wrapper, handle } = mountEditor({ deleteMode: 'immediate', onDelete: () => {} })
+    await clickDelete(wrapper)
+    await confirmDialog()
+    expect(handle().hasUnsaved).toBe(false)
+    expect(handle().unsavedCount).toBe(0)
+  })
+})
+
+describe('list-editor delete-mode — deferred (default)', () => {
+  it('the confirm dialog says the delete is revertible until save (not the irreversible default)', async () => {
+    const { wrapper } = mountEditor({ deleteMode: 'deferred' })
+    await clickDelete(wrapper)
+    const text = dialogText()
+    // Deferred wording mentions saving (revertible until then) and must NOT claim it is irreversible.
+    expect(text).toMatch(/ulož|save/)
+    expect(text).not.toMatch(/nie je možné vrátiť|nelze vrátit|cannot be undone/)
+  })
+
+  it('the row DISAPPEARS but lights up exactly 1 unconfirmed change', async () => {
+    const { wrapper, model, handle } = mountEditor({ deleteMode: 'deferred' })
+    await clickDelete(wrapper, 0)
+    await confirmDialog()
+    expect(model.value.map((r) => r.id)).toEqual([2, 3])
+    expect(wrapper.findAll('.a-le-row')).toHaveLength(2)
+    expect(handle().hasUnsaved).toBe(true)
+    expect(handle().unsavedCount).toBe(1)
+  })
+
+  it('is the DEFAULT mode when :delete-mode is omitted', async () => {
+    const { wrapper, handle } = mountEditor({})
+    await clickDelete(wrapper, 0)
+    await confirmDialog()
+    expect(handle().unsavedCount).toBe(1)
+  })
+
+  it('counts distinct changes: an added row + a deleted row = 2', async () => {
+    const { wrapper, handle } = mountEditor({ deleteMode: 'deferred' })
+    await wrapper.find('.a-le-row-add').trigger('click')
+    await nextTick()
+    await clickDelete(wrapper, 0) // delete a saved row
+    await confirmDialog()
+    expect(handle().unsavedCount).toBe(2) // 1 add + 1 delete
+  })
+
+  it('deleting a just-added temp row removes its own pending change (add+delete nets zero)', async () => {
+    const { wrapper, handle } = mountEditor({ deleteMode: 'deferred', statusField: 'title' })
+    await wrapper.find('.a-le-row-add').trigger('click')
+    await nextTick()
+    expect(handle().unsavedCount).toBe(1) // exactly one added row (not 2 — no double-count on add)
+    const delBtns = wrapper.findAll('.a-le-action--delete')
+    await delBtns[delBtns.length - 1].trigger('click') // delete the just-added (never-saved) row
+    await confirmDialog()
+    expect(handle().unsavedCount).toBe(0) // add + delete of the same temp row truly nets zero
+  })
+
+  it('union, not sum: a SAVED row edited THEN deleted counts as 1 change, not 2', async () => {
+    const { wrapper, handle } = mountEditor({ deleteMode: 'deferred', statusField: 'title' })
+    // Edit a persisted row via the exposed handle → one pending (edit) change.
+    handle().updateItem(1, { title: 'edited-1' })
+    await nextTick()
+    expect(handle().unsavedCount).toBe(1)
+    // Delete that SAME edited row → the edit + the delete collapse to one change (the deleted row
+    // is no longer live, so it is not double-counted alongside its tombstone).
+    await clickDelete(wrapper, 0)
+    await confirmDialog()
+    expect(handle().unsavedCount).toBe(1)
+  })
+
+  it('commit() (save) clears the unconfirmed change', async () => {
+    const { wrapper, handle } = mountEditor({ deleteMode: 'deferred' })
+    await clickDelete(wrapper, 0)
+    await confirmDialog()
+    expect(handle().unsavedCount).toBe(1)
+    handle().commit()
+    await nextTick()
+    expect(handle().unsavedCount).toBe(0)
+    expect(handle().hasUnsaved).toBe(false)
+  })
+})
+
+describe('list-editor delete-mode — nested (ANested) parity', () => {
+  const tree = (): NestedTree<Row> => ({
+    meta: { dirty: false },
+    children: [
+      { data: { id: 1, position: 1, title: 'A' }, meta: { dirty: false }, children: [] },
+      { data: { id: 2, position: 2, title: 'B' }, meta: { dirty: false }, children: [] },
+    ],
+  })
+
+  it('a deferred delete in the nested editor also lights up 1 unconfirmed change', async () => {
+    const model = ref<NestedTree<Row>>(tree())
+    let handle: EditorHandle | null = null
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(ANestedSortableListEditor as Component, {
+            ref: (el: unknown) => {
+              if (el) handle = el as unknown as EditorHandle
+            },
+            maxDepth: 3,
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: NestedTree<Row>) => (model.value = v),
+            compactField: 'title',
+          })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+    await mounted.findAll('.a-le-action--delete')[0].trigger('click')
+    await confirmDialog()
+
+    expect(handle!.hasUnsaved).toBe(true)
+    expect(handle!.unsavedCount).toBe(1)
+  })
+
+  // Regression for the LinkedList immediate flow: the component removes the row in its own `onDeleted`
+  // (trackDeleted:false), then the consumer's `@deleted` handler calls `removeById` (after its backend
+  // DELETE). That second removal of the now-gone baseline key must NOT resurrect a tombstone — an
+  // immediate delete leaves ZERO unconfirmed changes.
+  it('immediate + consumer removeById (LinkedList flow) leaves no phantom unconfirmed change', async () => {
+    const model = ref<NestedTree<Row>>(tree())
+    let handle: EditorHandle | null = null
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(ANestedSortableListEditor as Component, {
+            ref: (el: unknown) => {
+              if (el) handle = el as unknown as EditorHandle
+            },
+            maxDepth: 3,
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: NestedTree<Row>) => (model.value = v),
+            compactField: 'title',
+            deleteMode: 'immediate',
+            // Mirrors LinkedListManage.onDelete: backend delete already done, then removeById.
+            onDeleted: (vi: { raw: Row }) => handle?.removeById(vi.raw.id),
+          })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+    await mounted.findAll('.a-le-action--delete')[0].trigger('click')
+    await confirmDialog()
+
+    expect(mounted.findAll('.a-le-row')).toHaveLength(1) // row really gone
+    expect(handle!.hasUnsaved).toBe(false)
+    expect(handle!.unsavedCount).toBe(0) // no phantom tombstone from the double removal
+  })
+})
diff --git a/src/test/components/listEditorScopeValidity.test.ts b/src/test/components/listEditorScopeValidity.test.ts
new file mode 100644
index 00000000..8e3916cb
--- /dev/null
+++ b/src/test/components/listEditorScopeValidity.test.ts
@@ -0,0 +1,338 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref, type Component, type Ref } from 'vue'
+import useVuelidate from '@vuelidate/core'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import ANestedSortableListEditor from '@/labs/listEditor/ANestedSortableListEditor.vue'
+import type { ListEditorKey, NestedTree } from '@/labs/listEditor/types/listEditorTypes'
+
+/**
+ * QA 85050 — the `validation-scope` bridge. A COLLAPSED invalid row unmounts its own row-form
+ * vuelidate, which used to deregister it from the consumer's scope-collector save gate → the invalid
+ * row slipped past `v$.$invalid`. With `:validation-scope`, the editor registers its aggregate
+ * validity (a computed over ALL raw rows via `:validate`, collapsed included) under that scope, so
+ * the consumer's plain `v$.$invalid` gate blocks — and a `$touch()` reveals the offender red.
+ */
+interface Row {
+  id: number
+  name: string
+  position: number
+}
+type Collector = Ref<{ $invalid: boolean; $touch: () => void }>
+
+const SCOPE = Symbol('test-le-validation-scope')
+const validate = (r: Row): boolean => !!r.name // name required
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+// Mounts a consumer-style host: a scope-collector `useVuelidate({ $scope })` (what the real save
+// flow gates on) with an editor under it. Returns the collector ref.
+function mountHost(comp: Component, data: Ref<Row[]>, scope: symbol | undefined): Collector {
+  let collector: Collector | null = null
+  const Host = defineComponent({
+    setup() {
+      collector = useVuelidate({ $scope: SCOPE }) as unknown as Collector
+      return () =>
+        h(
+          comp,
+          {
+            modelValue: data.value,
+            'onUpdate:modelValue': (v: Row[]) => {
+              data.value = v
+            },
+            validate,
+            validationScope: scope,
+          },
+          // An `item` slot makes rows real inline-edit (collapsible) rows.
+          { item: ({ raw }: { raw: Row }) => h('input', { value: raw.name }) },
+        )
+    },
+  })
+  mounted = mount(Host, { attachTo: document.body })
+  return collector as unknown as Collector
+}
+
+describe.each([
+  { name: 'AListEditor', comp: AListEditor as Component },
+  { name: 'ASortableListEditor', comp: ASortableListEditor as Component },
+])(
+  'useListEditorScopeValidity — $name flows validity into the consumer scope collector',
+  ({ comp }) => {
+    it('a COLLAPSED invalid row makes the scope collector $invalid (blocks the save)', async () => {
+      const data = ref<Row[]>([{ id: 1, name: '', position: 1 }]) // one invalid row (empty name)
+      const collector = mountHost(comp, data, SCOPE)
+      await nextTick()
+      await nextTick()
+
+      // Row renders collapsed (no #item form mounted) — the old bug: the collector wouldn't see it.
+      expect(document.querySelectorAll('.a-le-row-body').length).toBe(0)
+      // Oracle: the editor's aggregate validity is in the collector → the save gate blocks.
+      expect(collector.value.$invalid).toBe(true)
+    })
+
+    it('a collector $touch() reveals the offending row red (opens it, not just a collapsed rail)', async () => {
+      const data = ref<Row[]>([{ id: 1, name: '', position: 1 }])
+      const collector = mountHost(comp, data, SCOPE)
+      await nextTick()
+      await nextTick()
+      expect(document.querySelectorAll('.a-le-row--validation-invalid').length).toBe(0)
+
+      // The save flow's `v$.$touch()` propagates to the editor's scoped child → reveal-on-touch.
+      collector.value.$touch()
+      await nextTick()
+      await nextTick()
+      expect(document.querySelectorAll('.a-le-row--validation-invalid').length).toBeGreaterThan(0)
+    })
+
+    it('a valid row leaves the collector valid', async () => {
+      const data = ref<Row[]>([{ id: 1, name: 'ok', position: 1 }])
+      const collector = mountHost(comp, data, SCOPE)
+      await nextTick()
+      await nextTick()
+      expect(collector.value.$invalid).toBe(false)
+    })
+
+    it('backward-compat: WITHOUT validation-scope the editor never touches the collector', async () => {
+      const data = ref<Row[]>([{ id: 1, name: '', position: 1 }]) // invalid, but not wired
+      const collector = mountHost(comp, data, undefined)
+      await nextTick()
+      await nextTick()
+      // No registration under the scope → the collector is unaffected (identical legacy behavior).
+      expect(collector.value.$invalid).toBe(false)
+    })
+
+    it('a collapsed invalid row FIXED in place clears the collector (dynamic transition)', async () => {
+      const data = ref<Row[]>([{ id: 1, name: '', position: 1 }]) // invalid (empty name)
+      const collector = mountHost(comp, data, SCOPE)
+      await nextTick()
+      await nextTick()
+      expect(collector.value.$invalid).toBe(true)
+      // Fix the row while it stays collapsed — the aggregate validity must re-flow and clear the gate.
+      data.value[0].name = 'now valid'
+      await nextTick()
+      await nextTick()
+      expect(collector.value.$invalid).toBe(false)
+    })
+
+    it('a collapsed valid row that BECOMES invalid re-blocks the collector', async () => {
+      const data = ref<Row[]>([{ id: 1, name: 'ok', position: 1 }])
+      const collector = mountHost(comp, data, SCOPE)
+      await nextTick()
+      await nextTick()
+      expect(collector.value.$invalid).toBe(false)
+      data.value[0].name = '' // now invalid
+      await nextTick()
+      await nextTick()
+      expect(collector.value.$invalid).toBe(true)
+    })
+  },
+)
+
+// The nested tree editor is separate: its aggregate validity walks the WHOLE tree (deep collapsed
+// children included) and its reveal must re-expand the offender's ANCESTOR chain, not just open a
+// flat row. Same scope bridge, exercised end-to-end on a two-level tree.
+describe('useListEditorScopeValidity — ANestedSortableListEditor flows deep tree validity into the scope collector', () => {
+  interface TreeRow {
+    id: number
+    name: string
+    position: number
+  }
+  const treeValidate = (r: TreeRow): boolean => !!r.name // name required
+
+  // Root parent (valid) with one leaf child whose validity is the `childName` arg.
+  const makeTree = (childName: string): NestedTree<TreeRow> => ({
+    meta: { dirty: false },
+    children: [
+      {
+        data: { id: 1, name: 'Parent', position: 1 },
+        meta: { dirty: false },
+        children: [
+          { data: { id: 2, name: childName, position: 1 }, meta: { dirty: false }, children: [] },
+        ],
+      },
+    ],
+  })
+
+  // Capture the editor's exposed handle via a function ref (a template/function ref on a
+  // defineExpose'd component receives the exposed proxy — `.collapse` etc. — unlike VTU's `.vm`).
+  function mountNestedHost(
+    tree: Ref<NestedTree<TreeRow>>,
+    scope: symbol | undefined,
+  ): { collector: Collector; editor: () => { collapse: (id: ListEditorKey) => void } } {
+    let collector: Collector | null = null
+    let editorRef: { collapse: (id: ListEditorKey) => void } | null = null
+    const Host = defineComponent({
+      setup() {
+        collector = useVuelidate({ $scope: SCOPE }) as unknown as Collector
+        return () =>
+          h(
+            ANestedSortableListEditor as Component,
+            {
+              ref: (el: unknown) => {
+                if (el) editorRef = el as { collapse: (id: ListEditorKey) => void }
+              },
+              maxDepth: 3,
+              modelValue: tree.value,
+              'onUpdate:modelValue': (v: NestedTree<TreeRow>) => {
+                tree.value = v
+              },
+              validate: treeValidate,
+              validationScope: scope,
+            },
+            { item: ({ raw }: { raw: TreeRow }) => h('input', { value: raw.name }) },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    return { collector: collector as unknown as Collector, editor: () => editorRef! }
+  }
+
+  it('a COLLAPSED deep invalid row makes the scope collector $invalid (blocks the save)', async () => {
+    const tree = ref<NestedTree<TreeRow>>(makeTree('')) // invalid leaf (empty name)
+    const { collector, editor } = mountNestedHost(tree, SCOPE)
+    await nextTick()
+    await nextTick()
+    editor().collapse(1) // hide the invalid child behind its collapsed parent
+    await nextTick()
+    await nextTick()
+
+    // Only the parent row is in the DOM; the invalid child is collapsed away (its form unmounted).
+    expect(document.querySelectorAll('.a-le-row').length).toBe(1)
+    expect(document.querySelectorAll('.a-le-row-body').length).toBe(0)
+    // Oracle: the editor's whole-tree validity is registered under the scope → the save gate blocks.
+    expect(collector.value.$invalid).toBe(true)
+  })
+
+  it('a collector $touch() expands the ancestor chain and reveals the deep offender red', async () => {
+    const tree = ref<NestedTree<TreeRow>>(makeTree(''))
+    const { collector, editor } = mountNestedHost(tree, SCOPE)
+    await nextTick()
+    await nextTick()
+    editor().collapse(1)
+    await nextTick()
+    await nextTick()
+    expect(document.querySelectorAll('.a-le-row').length).toBe(1)
+    expect(document.querySelectorAll('.a-le-row--validation-invalid').length).toBe(0)
+
+    // The save flow's `v$.$touch()` propagates to the scoped child → the nested reveal re-expands the
+    // parent so the collapsed offender becomes visible and flagged red.
+    collector.value.$touch()
+    await nextTick()
+    await nextTick()
+    expect(document.querySelectorAll('.a-le-row').length).toBe(2)
+    expect(document.querySelectorAll('.a-le-row--validation-invalid').length).toBeGreaterThan(0)
+  })
+
+  it('a fully valid tree leaves the collector valid', async () => {
+    const tree = ref<NestedTree<TreeRow>>(makeTree('Child')) // valid leaf
+    const { collector } = mountNestedHost(tree, SCOPE)
+    await nextTick()
+    await nextTick()
+    expect(collector.value.$invalid).toBe(false)
+  })
+
+  it('backward-compat: WITHOUT validation-scope the editor never touches the collector', async () => {
+    const tree = ref<NestedTree<TreeRow>>(makeTree('')) // invalid, but not wired
+    const { collector } = mountNestedHost(tree, undefined)
+    await nextTick()
+    await nextTick()
+    expect(collector.value.$invalid).toBe(false)
+  })
+})
+
+// M3 — a scope wired WITHOUT `:validate` bridges an always-false `hasErrors`, so the save gate
+// never blocks. That misconfiguration must surface a dev warning instead of failing open silently.
+describe('useListEditorScopeValidity — warns on :validation-scope without :validate (M3)', () => {
+  const M3 = '`:validation-scope` is set but `:validate` is missing'
+  function mountScopeOnly(scope: symbol | undefined, withValidate: boolean) {
+    const data = ref<Row[]>([{ id: 1, name: '', position: 1 }])
+    const Host = defineComponent({
+      setup() {
+        useVuelidate({ $scope: SCOPE })
+        return () =>
+          h(
+            AListEditor as Component,
+            {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Row[]) => {
+                data.value = v
+              },
+              ...(withValidate ? { validate } : {}),
+              validationScope: scope,
+            },
+            { item: ({ raw }: { raw: Row }) => h('input', { value: raw.name }) },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+  }
+
+  it('warns when the scope is set but no :validate predicate is provided', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mountScopeOnly(SCOPE, false)
+    expect(spy).toHaveBeenCalledWith(expect.stringContaining(M3))
+    spy.mockRestore()
+  })
+
+  it('does NOT warn when :validate accompanies the scope', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mountScopeOnly(SCOPE, true)
+    expect(spy).not.toHaveBeenCalledWith(expect.stringContaining(M3))
+    spy.mockRestore()
+  })
+
+  it('does NOT warn when there is no scope at all (opt-out, legacy behavior)', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mountScopeOnly(undefined, false)
+    expect(spy).not.toHaveBeenCalledWith(expect.stringContaining(M3))
+    spy.mockRestore()
+  })
+})
+
+// L2 — `:validation-scope="true"` selects vuelidate's GLOBAL scope, which a NAMED parent collector
+// does not gather. It's a latent footgun (no consumer passes `true`); the boolean stays in the type
+// (canonical ValidationScope), so a runtime warning is the guard.
+describe('useListEditorScopeValidity — warns on :validation-scope="true" (L2)', () => {
+  const L2 = 'GLOBAL scope. If your save gate'
+  function mountBooleanScope(scopeVal: boolean) {
+    const data = ref<Row[]>([{ id: 1, name: '', position: 1 }])
+    const Host = defineComponent({
+      setup() {
+        useVuelidate({ $scope: SCOPE })
+        return () =>
+          h(
+            AListEditor as Component,
+            {
+              modelValue: data.value,
+              'onUpdate:modelValue': (v: Row[]) => {
+                data.value = v
+              },
+              validate,
+              validationScope: scopeVal,
+            },
+            { item: ({ raw }: { raw: Row }) => h('input', { value: raw.name }) },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+  }
+
+  it('warns when :validation-scope is true (global scope under a named collector)', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mountBooleanScope(true)
+    expect(spy).toHaveBeenCalledWith(expect.stringContaining(L2))
+    spy.mockRestore()
+  })
+
+  it('does NOT warn when :validation-scope is false (explicit opt-out)', () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mountBooleanScope(false)
+    expect(spy).not.toHaveBeenCalledWith(expect.stringContaining(L2))
+    spy.mockRestore()
+  })
+})
diff --git a/src/test/components/qa85050B10Bug02MountSeedFalseAmber.test.ts b/src/test/components/qa85050B10Bug02MountSeedFalseAmber.test.ts
new file mode 100644
index 00000000..50d54347
--- /dev/null
+++ b/src/test/components/qa85050B10Bug02MountSeedFalseAmber.test.ts
@@ -0,0 +1,150 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref, type Ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+
+/**
+ * QA 85050 Batch 10 BUG-02 — "merely OPENING an unchanged row turns it amber and
+ * raises '1 nepotvrdená zmena'".
+ *
+ * A NESTED editor only mounts when its parent row is EXPANDED. At construction the
+ * controller runs `ensureKeys` and, for rows the server returns WITHOUT an `id`
+ * (embedded value-object DTOs like `{ adSlotName, position }`), mints a NEGATIVE temp
+ * id and WRITES IT BACK into the shared model (`useListEditorController.ts:200-205`).
+ *
+ * The parent baselined earlier, from the pristine server rows. Its dirty hash is
+ * `JSON.stringify` of the WHOLE row — nested array included — so the child's mount-time
+ * write retroactively invalidates the parent's baseline. Expanding a row to READ it
+ * marks it unsaved, with no edit ever made. Verified live: the only field that changed
+ * was the added `id: -1`.
+ *
+ * Invariant violated: a controller must never mutate the model as a side effect of
+ * MOUNTING. A mount-time write is invisible to the writer (it baselines the already
+ * seeded rows) but visible to every ancestor.
+ *
+ * FAILS today (expanding flips the parent amber). Passes once temp ids are excluded
+ * from the content hash, so seeding a key is not mistaken for a content change.
+ */
+
+interface Advert {
+  id?: number
+  adSlotName: string
+  position: number
+}
+interface Row {
+  id: number
+  position: number
+  title: string
+  adverts: Advert[]
+}
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+// `.a-le-row` and `.a-le-row-add` match BOTH editors — the nested one renders inside the
+// parent row's body, and each editor's add button renders after its own rows (so a flat
+// `findAll('.a-le-row-add')` yields [inner, outer], and the LAST entry is the OUTER one).
+// Everything below therefore addresses the two editors explicitly.
+// Read a ref out of the scope that created it, so asserting on the model doesn't trip
+// vue/no-ref-object-reactivity-loss.
+const read = (list: Ref<Row[]>): Row[] => list.value
+const nestedEditor = (w: VueWrapper) => w.find('.a-list-editor')
+const parentRows = (w: VueWrapper): HTMLElement[] => {
+  const nestedRoots = w.findAll('.a-list-editor').map((e) => e.element)
+  return w
+    .findAll('.a-sortable-list-editor .a-le-row')
+    .map((e) => e.element as HTMLElement)
+    .filter((row) => !nestedRoots.some((nested) => nested.contains(row)))
+}
+
+// Server shape: the nested adverts carry NO `id` — exactly what the API returns for
+// these embedded DTOs, and what makes `ensureKeys` mint one on mount.
+const serverRows = (): Row[] => [
+  { id: 1, position: 1, title: 'Content item', adverts: [{ adSlotName: 'slot_a', position: 1 }] },
+]
+
+const buildHost = (model: Ref<Row[]>) =>
+  defineComponent({
+    setup() {
+      return () =>
+        h(
+          ASortableListEditor<Row>,
+          {
+            modelValue: model.value,
+            'onUpdate:modelValue': (v: Row[]) => {
+              model.value = v
+            },
+            factory: (): Row => ({ id: -1, position: 0, title: '', adverts: [] }),
+            compactField: 'title',
+          },
+          {
+            // The nested editor over the id-less rows — mounts only once the parent row expands.
+            item: ({ raw }: { raw: Row }) =>
+              h(AListEditor<Advert>, {
+                modelValue: raw.adverts,
+                'onUpdate:modelValue': (v: Advert[]) => {
+                  raw.adverts = v
+                },
+                factory: (): Advert => ({ adSlotName: '', position: 0 }),
+                compactField: 'adSlotName',
+              }),
+          },
+        )
+    },
+  })
+
+describe('QA 85050 B10 BUG-02 — expanding a row must not mark it unsaved', () => {
+  it('a mount-time key seed in a nested editor does not flip the parent row amber', async () => {
+    const model = ref<Row[]>(serverRows())
+    mounted = mount(buildHost(model), {
+      attachTo: document.body,
+      attrs: { style: 'width: 1000px;' },
+    })
+    await nextTick()
+
+    // Pre-condition: freshly loaded, collapsed, nothing pending.
+    expect(mounted.findAll('.a-le-row--unsaved')).toHaveLength(0)
+
+    // Expand the parent row — READ ONLY. No edit of any kind.
+    await mounted.findAll('.a-le-row-header')[0].trigger('click')
+    await nextTick()
+    await nextTick()
+
+    // ORACLE (fails today): reading a row is not a change, so nothing may be unsaved.
+    expect(mounted.findAll('.a-le-row--unsaved')).toHaveLength(0)
+  })
+
+  it('a genuinely added nested row STILL bubbles unsaved up to the parent', async () => {
+    // Guards the fix against over-reach: excluding temp ids from the hash must not
+    // silence a real nested addition (the array content itself still differs).
+    const model = ref<Row[]>(serverRows())
+    mounted = mount(buildHost(model), {
+      attachTo: document.body,
+      attrs: { style: 'width: 1000px;' },
+    })
+    await nextTick()
+    await mounted.findAll('.a-le-row-header')[0].trigger('click')
+    await nextTick()
+
+    // Add a nested advert row through the NESTED editor's own add button.
+    await nestedEditor(mounted).find('.a-le-row-add').trigger('click')
+    await nextTick()
+    await nextTick()
+
+    // Pre-condition for the oracle below: a nested row was really added. Without this the
+    // test can silently degrade into "the outer editor grew a row", which is amber by
+    // construction (no baseline entry) and would pass no matter what the hash excludes.
+    expect(read(model)).toHaveLength(1)
+    expect(read(model)[0].adverts).toHaveLength(2)
+
+    // ORACLE: the PARENT row itself must read unsaved — its content genuinely differs from
+    // the baseline now, so excluding temp ids from the hash must not silence it.
+    const rows = parentRows(mounted)
+    expect(rows).toHaveLength(1)
+    expect(rows[0].classList.contains('a-le-row--unsaved')).toBe(true)
+  })
+})
diff --git a/src/test/components/qa85050Bug02NestedUnsavedColorLeak.test.ts b/src/test/components/qa85050Bug02NestedUnsavedColorLeak.test.ts
new file mode 100644
index 00000000..8876ea09
--- /dev/null
+++ b/src/test/components/qa85050Bug02NestedUnsavedColorLeak.test.ts
@@ -0,0 +1,115 @@
+/* eslint-disable vue/no-ref-object-reactivity-loss */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+
+/**
+ * QA 85050 Batch 6 BUG-02 — "editing one nested Zámer marks ALL other Zámery amber".
+ *
+ * The real cause is a CSS COLOUR CASCADE, not a dirty-state leak. When a PARENT
+ * category row is `--unsaved` + `--expanded`, the `_shared.scss` rule
+ *   `&--unsaved.a-le-row--expanded .a-le-row-main *  { color: var(--le-warning) }`
+ * paints EVERY descendant text orange — including the titles of nested CLEAN
+ * child rows. So untouched sibling intentions READ amber although their own row
+ * is not `--unsaved` (verified live: sibling `titleColor=rgb(251,140,0)` with
+ * `rowUnsaved=false`).
+ *
+ * Mount a category editor (outer) holding a nested children editor (inner). Make
+ * ONLY the outer row unsaved+expanded, keep the inner child rows clean, and
+ * assert a clean inner child's title is NOT the warning colour.
+ * FAILS today (the child title cascades to orange). Passes once the `--unsaved`
+ * text colour is scoped so it does not bleed into nested rows.
+ */
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const ORANGE_WARNING = 'rgb(251, 140, 0)'
+
+describe('QA 85050 BUG-02 — unsaved parent must not colour nested clean child titles', () => {
+  it('a clean nested child title stays non-amber when the parent row is unsaved+expanded', async () => {
+    const innerModel = ref<Item[]>([
+      { id: 11, position: 1, title: 'Child A' },
+      { id: 12, position: 2, title: 'Child B' },
+    ])
+    const outerModel = ref<Item[]>([{ id: 1, position: 1, title: 'Category' }])
+
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            ASortableListEditor<Item>,
+            {
+              modelValue: outerModel.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                outerModel.value = v
+              },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+              compactField: 'title',
+            },
+            {
+              item: () =>
+                h(
+                  ASortableListEditor<Item>,
+                  {
+                    modelValue: innerModel.value,
+                    'onUpdate:modelValue': (v: Item[]) => {
+                      innerModel.value = v
+                    },
+                    factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+                    embedded: true,
+                    compactField: 'title',
+                  },
+                  {
+                    item: () => h('div', { class: 'inline-form' }, 'form'),
+                  },
+                ),
+            },
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body, attrs: { style: 'width: 1000px;' } })
+    await nextTick()
+
+    // Expand the outer category row → the inner children editor mounts.
+    await mounted.findAll('.a-le-row-header')[0].trigger('click')
+    await nextTick()
+
+    // Make ONLY the outer (category) row dirty → it becomes --unsaved + --expanded.
+    outerModel.value = [{ ...outerModel.value[0], title: 'Category — edited' }]
+    await nextTick()
+
+    const outerRow = mounted.findAll('.a-le-row')[0].element as HTMLElement
+    expect(outerRow.classList.contains('a-le-row--unsaved')).toBe(true)
+    // Header-click opens the row in --editing (or --expanded) mode; the cascade
+    // rule fires for both. Either way the nested children editor is mounted.
+    expect(
+      outerRow.classList.contains('a-le-row--editing') ||
+        outerRow.classList.contains('a-le-row--expanded'),
+    ).toBe(true)
+
+    // The inner child rows are CLEAN (never edited) — their own row is not unsaved.
+    const innerRows = Array.from(
+      document.querySelectorAll<HTMLElement>('.a-sortable-list-editor--embedded .a-le-row'),
+    )
+    expect(innerRows.length).toBeGreaterThanOrEqual(2)
+    for (const innerRow of innerRows) {
+      expect(innerRow.classList.contains('a-le-row--unsaved')).toBe(false)
+    }
+
+    // BUG-02: an untouched child's TITLE must NOT be painted the amber warning colour.
+    const childTitle = innerRows[0].querySelector<HTMLElement>('.a-le-title')
+    expect(childTitle).toBeTruthy()
+    expect(window.getComputedStyle(childTitle!).color).not.toBe(ORANGE_WARNING)
+  })
+})
diff --git a/src/test/components/qa85050Bug03StableKeyNoId.test.ts b/src/test/components/qa85050Bug03StableKeyNoId.test.ts
new file mode 100644
index 00000000..f6747d37
--- /dev/null
+++ b/src/test/components/qa85050Bug03StableKeyNoId.test.ts
@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+
+/**
+ * QA 85050 Batch 6 BUG-03 — "Vložené reklamné pozície rows stay amber after
+ * every save (record exists)".
+ *
+ * The advert AListEditor (in ContentItemKindArticleListForm) is fed
+ * `advertPositionIncludes` rows the server returns with NO `id`
+ * (`[{ adSlotName, position }, …]`) and passes NO `get-key`, so the editor's
+ * key resolution defaults to `'id'` → every row keys to `undefined`. With ≥2
+ * such rows the keys collide: `captureBaseline` stores them in a Map keyed by
+ * `undefined`, so the second row overwrites the first and the baseline collapses
+ * to a single entry. The content-diff then can't match every live row to its own
+ * baseline hash, so rows read `.a-le-row--unsaved` on a plain, untouched load and
+ * stay amber after every successful save (the record IS persisted — the amber is
+ * a stable-key artefact, not real dirtiness).
+ *
+ * Mount an AListEditor over ≥2 rows that have NO `id` field and pass NO get-key,
+ * then assert that on the initial (clean) render NONE of the rows is
+ * `--unsaved`. FAILS today (the colliding `undefined` keys mark them amber).
+ * Passes once the advert list gets a stable get-key / backfilled temp ids.
+ */
+
+// advertPositionIncludes shape as returned by GET /adm/v1/auto-distribution/[id]:
+// no server `id`, only adSlotName + position.
+interface AdvertPosition {
+  adSlotName: string
+  position: number
+}
+
+let mounted: VueWrapper | null = null
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+describe('QA 85050 BUG-03 — id-less advert rows must not read unsaved on a clean load', () => {
+  it('≥2 saved rows with no id and no get-key stay clear (not --unsaved) on initial render', async () => {
+    // Two ALREADY-SAVED server rows, distinct content, NO `id` field.
+    const data = ref<AdvertPosition[]>([
+      { adSlotName: 'A-slot', position: 1 },
+      { adSlotName: 'B-slot', position: 2 },
+    ])
+
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(AListEditor<AdvertPosition>, {
+            modelValue: data.value,
+            'onUpdate:modelValue': (v: AdvertPosition[]) => {
+              data.value = v
+            },
+            // Mirrors ContentItemKindArticleListForm: no `get-key` → defaults to 'id'.
+            compactField: 'adSlotName',
+          })
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+    await nextTick()
+
+    const rows = Array.from(document.querySelectorAll<HTMLElement>('.a-le-row'))
+    // Sanity: both saved rows rendered (this is a clean load, no interaction).
+    expect(rows.length).toBe(2)
+
+    // BUG-03: a freshly-loaded, untouched, already-saved list must show ZERO
+    // unsaved rows. Today both collide on key `undefined` and read amber.
+    const unsaved = rows.filter((r) => r.classList.contains('a-le-row--unsaved'))
+    expect(unsaved.length).toBe(0)
+  })
+})
diff --git a/src/test/components/qa85050Bug0405InterstitialSlotTint.test.ts b/src/test/components/qa85050Bug0405InterstitialSlotTint.test.ts
new file mode 100644
index 00000000..c90aace8
--- /dev/null
+++ b/src/test/components/qa85050Bug0405InterstitialSlotTint.test.ts
@@ -0,0 +1,166 @@
+/* eslint-disable vue/no-ref-object-reactivity-loss */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import ASortableListEditor from '@/labs/listEditor/ASortableListEditor.vue'
+import AListEditor from '@/labs/listEditor/AListEditor.vue'
+
+// QA 85050 Batch-6 BUG-04/05 — content placed in the `#before-item` / `#after-item`
+// slots (e.g. PageContents' auto-distribution preview rendered between content rows)
+// must NOT inherit the row's unsaved/editing tint. The structural fix renders those
+// slots as SIBLINGS of `.a-le-row` inside a `.a-le-row-wrapper`, so slot content can
+// never be a DOM descendant of `.a-le-row--unsaved` (or `--editing`). These tests
+// assert that invariant directly — cheaper + less brittle than a computed-colour check,
+// which the admin-cms e2e (pageContentAdvertAmberLeak.spec.ts) still covers on the real app.
+
+interface Item {
+  id: number
+  position: number
+  title: string
+}
+
+let mounted: VueWrapper | null = null
+
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+})
+
+const slots = {
+  'before-item': () => h('div', { class: 'interstitial-marker interstitial-before' }, 'before'),
+  'after-item': () => h('div', { class: 'interstitial-marker interstitial-after' }, 'after'),
+  item: () => h('div', { class: 'inline-form' }, 'form'),
+}
+
+// The row is both --editing (opened) and --unsaved (dirtied); neither state may reach
+// the interstitial markers, which live in the wrapper as siblings of `.a-le-row`.
+const assertNoTintLeak = (w: VueWrapper): void => {
+  expect(w.findAll('.a-le-row--unsaved').length).toBeGreaterThanOrEqual(1)
+  expect(w.findAll('.interstitial-marker').length).toBeGreaterThanOrEqual(2)
+  expect(w.findAll('.a-le-row--unsaved .interstitial-marker').length).toBe(0)
+  expect(w.findAll('.a-le-row--editing .interstitial-marker').length).toBe(0)
+  expect(w.findAll('.a-le-row-wrapper .interstitial-marker').length).toBeGreaterThanOrEqual(2)
+}
+
+describe('QA 85050 BUG-04/05 — interstitial slots do not inherit the row tint', () => {
+  it('ASortableListEditor: an unsaved+editing row does not tint its #before/#after-item content', async () => {
+    const model = ref<Item[]>([
+      { id: 1, position: 1, title: 'Item 1' },
+      { id: 2, position: 2, title: 'Item 2' },
+    ])
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            ASortableListEditor<Item>,
+            {
+              modelValue: model.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                model.value = v
+              },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+            },
+            slots,
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+
+    await mounted.findAll('.a-le-row-header')[0].trigger('click')
+    await nextTick()
+    // Dirty the first item so the row reads unsaved (mirrors the rail-colors harness).
+    model.value = [{ ...model.value[0], title: 'Item 1 — edited' }, model.value[1]]
+    await nextTick()
+
+    assertNoTintLeak(mounted)
+  })
+
+  it('AListEditor: an unsaved+editing row does not tint its #before/#after-item content', async () => {
+    const model = ref<Item[]>([
+      { id: 1, position: 1, title: 'Item 1' },
+      { id: 2, position: 2, title: 'Item 2' },
+    ])
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            AListEditor<Item>,
+            {
+              modelValue: model.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                model.value = v
+              },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+            },
+            slots,
+          )
+      },
+    })
+    mounted = mount(Host, { attachTo: document.body })
+    await nextTick()
+
+    await mounted.findAll('.a-le-row-header')[0].trigger('click')
+    await nextTick()
+    model.value = [{ ...model.value[0], title: 'Item 1 — edited' }, model.value[1]]
+    await nextTick()
+
+    assertNoTintLeak(mounted)
+  })
+})
+
+// The wrapper changed which element is the layout item, so two CSS contracts that keyed
+// off `.a-le-row` had to move to `.a-le-row-wrapper`. These guard against regressing them
+// (both surfaced in the codex review of the fix).
+describe('QA 85050 BUG-04/05 — wrapper preserves the row layout contracts', () => {
+  const mountSortable = (extraProps: Record<string, unknown>): VueWrapper => {
+    const model = ref<Item[]>([
+      { id: 1, position: 1, title: 'Item 1' },
+      { id: 2, position: 2, title: 'Item 2' },
+      { id: 3, position: 3, title: 'Item 3' },
+    ])
+    const Host = defineComponent({
+      setup() {
+        return () =>
+          h(
+            ASortableListEditor<Item>,
+            {
+              modelValue: model.value,
+              'onUpdate:modelValue': (v: Item[]) => {
+                model.value = v
+              },
+              factory: (): Item => ({ id: -Date.now(), position: 0, title: '' }),
+              ...extraProps,
+            },
+            { item: () => h('div', { class: 'inline-form' }, 'form') },
+          )
+      },
+    })
+    return mount(Host, { attachTo: document.body })
+  }
+
+  it('embedded mode keeps the 4px inter-row gap (now on the wrapper, not the row)', async () => {
+    mounted = mountSortable({ embedded: true })
+    await nextTick()
+
+    const wrappers = mounted.findAll('.a-le-row-wrapper')
+    expect(wrappers.length).toBe(3)
+    // Non-last wrappers carry the gap; the last one does not (matches the old
+    // `.a-le-row:last-of-type { margin-bottom: 0 }`).
+    expect(getComputedStyle(wrappers[0].element).marginBottom).toBe('4px')
+    expect(getComputedStyle(wrappers[1].element).marginBottom).toBe('4px')
+    expect(getComputedStyle(wrappers[2].element).marginBottom).toBe('0px')
+  })
+
+  it('chips mode makes the wrapper the flex item (pill sizing moved off the row)', async () => {
+    mounted = mountSortable({ chips: true })
+    await nextTick()
+
+    const wrapper = mounted.findAll('.a-le-row-wrapper')[0].element
+    const cs = getComputedStyle(wrapper)
+    // The wrapper is what `__rows` flex-wraps now, so it must be the sized flex item.
+    expect(cs.display).toBe('flex')
+    expect(cs.flexGrow).toBe('0')
+    expect(cs.flexShrink).toBe('0')
+  })
+})
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-1.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-1.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-2.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-2.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-3.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-adds-at-end-when-no-hint-given-3.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-1.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-1.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-2.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-2.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-3.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-addItem-clamps-index-hint-to-array-length-3.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-1.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-1.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-2.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-2.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-3.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-id-3.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-1.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-1.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-1.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-2.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-2.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-2.png differ
diff --git a/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-3.png b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-3.png
new file mode 100644
index 00000000..47767d2f
Binary files /dev/null and b/src/test/composables/__screenshots__/useListEditor.test.ts/useListEditor-updateItem-replaces-item-identified-by-item-reference-3.png differ
diff --git a/src/test/composables/bug13Repro.test.ts b/src/test/composables/bug13Repro.test.ts
new file mode 100644
index 00000000..9942e587
--- /dev/null
+++ b/src/test/composables/bug13Repro.test.ts
@@ -0,0 +1,207 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+import { useNestedListEditorController } from '@/labs/listEditor/composables/useNestedListEditorController'
+import {
+  computeInstruction,
+  type HoveredRow,
+} from '@/labs/listEditor/composables/useDragInstruction'
+import type {
+  NestedTree,
+  NestedTreeNode,
+  ListEditorKey,
+} from '@/labs/listEditor/types/listEditorTypes'
+
+/**
+ * BUG-13 exhaustive replication harness.
+ *
+ * QA: "when a nested row is the FIRST or LAST item within its parent, dragging
+ * it OUT of that nested group can cause it to land in the WRONG position."
+ *
+ * Strategy: for a set of trees, take EVERY node as the drag source, then
+ * enumerate EVERY possible drop gesture (each other row as the hovered row ×
+ * top/bottom half × every depth column the pointer could express). For each
+ * gesture we (a) compute the drop instruction the editor would show, then (b)
+ * apply it through the real `controller.moveTo`, then (c) assert the dragged
+ * node actually LANDED where the instruction said it would. Any divergence
+ * between "what the drop line promised" and "where it landed" reproduces the
+ * bug.
+ */
+
+interface Row {
+  id: string
+  title: string
+  position: number
+  parent: string | null
+}
+
+const ROW_H = 32
+const INDENT = 24
+
+const node = (data: Row, children: NestedTreeNode<Row>[] = []): NestedTreeNode<Row> => ({
+  data,
+  children,
+  meta: { dirty: false },
+})
+
+const r = (id: string, parent: string | null): Row => ({ id, title: id, position: 0, parent })
+
+// --- fixtures (depth ≤ 2; maxDepth 3 so depth-2 rows have room) ----------------
+const trees: Record<string, () => NestedTree<Row>> = {
+  // The exact QA-video shape: ED0 owns the single child ED1; ED2..4 at root.
+  video: () => ({
+    children: [
+      node(r('ED0', null), [node(r('ED1', 'ED0'))]),
+      node(r('ED2', null)),
+      node(r('ED3', null)),
+      node(r('ED4', null)),
+    ],
+    meta: { dirty: false },
+  }),
+  // Two children so we exercise first-child AND last-child extraction.
+  twoChildren: () => ({
+    children: [
+      node(r('A', null), [node(r('B', 'A')), node(r('C', 'A'))]),
+      node(r('D', null)),
+      node(r('E', null)),
+    ],
+    meta: { dirty: false },
+  }),
+  // Depth-2 chain A>B>C plus siblings, to exercise deep first/last extraction.
+  deep: () => ({
+    children: [
+      node(r('A', null), [node(r('B', 'A'), [node(r('C', 'B'))]), node(r('B2', 'A'))]),
+      node(r('D', null)),
+    ],
+    meta: { dirty: false },
+  }),
+}
+
+const setup = (tree: NestedTree<Row>) => {
+  const store = ref<NestedTree<Row>>(JSON.parse(JSON.stringify(tree)) as NestedTree<Row>)
+  const h = useNestedListEditorController<Row>({
+    get: () => store.value,
+    set: (v) => (store.value = v),
+    getKey: 'id',
+    maxDepth: 3,
+  })
+  return { store, h }
+}
+
+// Resolve the live parentKey + ordered sibling keys of a node in a tree.
+const locate = (
+  tree: NestedTree<Row>,
+  key: ListEditorKey,
+): { parentKey: ListEditorKey | null; siblingKeys: ListEditorKey[]; index: number } | null => {
+  let found: {
+    parentKey: ListEditorKey | null
+    siblingKeys: ListEditorKey[]
+    index: number
+  } | null = null
+  const walk = (nodes: NestedTreeNode<Row>[], parentKey: ListEditorKey | null) => {
+    const siblingKeys = nodes.map((n) => n.data.id)
+    nodes.forEach((n, i) => {
+      if (n.data.id === key) found = { parentKey, siblingKeys, index: i }
+      if (n.children?.length) walk(n.children, n.data.id)
+    })
+  }
+  walk(tree.children, null)
+  return found
+}
+
+describe('BUG-13: drop instruction ↔ landing consistency (exhaustive)', () => {
+  // Property test: for every tree × source × hovered row × half × depth column,
+  // the dragged node must LAND exactly where the computed drop line promised.
+  // A single failing combination (collected into `mismatches`) reproduces the
+  // "lands in the wrong position" bug. Run as one test so the suite stays tidy.
+  it('every drag gesture lands where the drop line promised (all trees/sources/gaps)', () => {
+    const mismatches: string[] = []
+    let checked = 0
+
+    for (const [treeName, makeTree] of Object.entries(trees)) {
+      const flatKeys = setup(makeTree()).h.viewItems.value.map((v) => v.key)
+
+      for (const source of flatKeys) {
+        for (const hovered of flatKeys) {
+          if (hovered === source) continue
+          for (const half of ['top', 'bottom'] as const) {
+            for (let depthCol = 0; depthCol <= 3; depthCol++) {
+              const { store, h } = setup(makeTree())
+              const viewItems = h.viewItems.value
+              const flat = viewItems.map((v) => v.key)
+              const hi = flat.indexOf(hovered)
+              const hv = viewItems[hi]
+              const rectTop = hi * ROW_H
+              const hoveredRow: HoveredRow = {
+                key: hv.key,
+                rect: {
+                  top: rectTop,
+                  bottom: rectTop + ROW_H,
+                  height: ROW_H,
+                  left: 0,
+                  right: 300,
+                  width: 300,
+                  x: 0,
+                  y: rectTop,
+                  toJSON: () => ({}),
+                } as DOMRect,
+                depth: hv.depth,
+                parentKey: hv.parentKey,
+                siblingIndex: hv.siblingIndex,
+                siblingCount: hv.siblingCount,
+              }
+              const srcNode = h.findNode(source).node
+              const subtreeDepth = srcNode ? h.calculateSubtreeDepth(srcNode) : 1
+              const y = half === 'top' ? rectTop + 4 : rectTop + ROW_H - 4
+              const inst = computeInstruction({
+                pointer: { x: depthCol * INDENT, y },
+                hoveredRow,
+                sourceKey: source,
+                sourceSubtreeDepth: subtreeDepth,
+                viewItems,
+                maxDepth: 3,
+                indentPx: INDENT,
+                containerLeft: 0,
+                containerPaddingLeft: 0,
+              })
+
+              if (inst === null) continue // hovering source/descendant — non-drop
+              if (inst.type === 'blocked') continue // refused (maxDepth) — no landing
+
+              const tag = `${treeName}: ${source}->${hovered} ${half}@d${depthCol}`
+              const ok = h.moveTo(source, inst.parentKey, inst.index)
+              if (!ok) {
+                mismatches.push(`${tag}: moveTo refused a non-blocked insert`)
+                continue
+              }
+              checked++
+
+              const loc = locate(store.value, source)!
+              if (loc.parentKey !== inst.parentKey) {
+                mismatches.push(
+                  `${tag}: landed under ${String(loc.parentKey)}, line promised ${String(inst.parentKey)}`,
+                )
+                continue
+              }
+              if (inst.makeChild) {
+                if (loc.index !== 0)
+                  mismatches.push(`${tag}: make-child not first child (idx ${loc.index})`)
+              } else if (inst.levelRowKey !== null) {
+                const predecessor = loc.index > 0 ? loc.siblingKeys[loc.index - 1] : null
+                if (predecessor !== inst.levelRowKey) {
+                  mismatches.push(
+                    `${tag}: landed after ${String(predecessor)}, line promised after ${String(inst.levelRowKey)}`,
+                  )
+                }
+              } else if (loc.parentKey !== null || loc.index !== 0) {
+                mismatches.push(`${tag}: root-top fallback not at root index 0`)
+              }
+            }
+          }
+        }
+      }
+    }
+
+    expect(checked).toBeGreaterThan(200) // sanity: the enumeration actually ran
+    expect(mismatches, `\n${mismatches.join('\n')}`).toEqual([])
+  })
+})
diff --git a/src/test/composables/defineCached.test.ts b/src/test/composables/defineCached.test.ts
new file mode 100644
index 00000000..01f103b0
--- /dev/null
+++ b/src/test/composables/defineCached.test.ts
@@ -0,0 +1,154 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineCached } from '@/composables/system/defineCached'
+
+// A failed cache fetch used to leave its ids in the queue forever, so the very same
+// failing batch was resent on every subsequent fetch() (observed in production as one
+// 403 batch retried for hours) while the item stayed _loaded: false and its chip spun
+// until reload. These tests pin the state machine: the queue always drains, whatever the
+// fetch did not resolve becomes terminal, and pruning only counts ids that actually grow
+// the cache.
+
+interface Row {
+  id: number
+  name: string
+}
+
+const mapFullToMinimal = (row: Row) => ({ id: row.id, name: row.name })
+const mapIdToMinimal = (id: number) => ({ id, name: '' })
+
+const makeCache = (fetchCallback: (ids: number[]) => Promise<Row[]>, maxLimit = 1000) =>
+  defineCached<number, Row, ReturnType<typeof mapFullToMinimal>>(
+    mapFullToMinimal,
+    mapIdToMinimal,
+    fetchCallback,
+    'id',
+    maxLimit,
+  )
+
+describe('defineCached', () => {
+  beforeEach(() => {
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('drains the queue and marks the items unresolved when the fetch fails', async () => {
+    const fetchCallback = vi.fn(async () => {
+      throw new Error('403')
+    })
+    const { add, immediateFetch, cache, toFetch, isUnresolved, isLoaded } = makeCache(fetchCallback)
+
+    add(1, 2)
+    await expect(immediateFetch()).rejects.toThrow('403')
+
+    expect(toFetch.value.size).toBe(0)
+    expect(cache.value.get(1)?._unresolved).toBe(true)
+    expect(isUnresolved(1)).toBe(true)
+    expect(isLoaded(1)).toBe(false)
+  })
+
+  it('does not resend a batch that already failed', async () => {
+    const fetchCallback = vi.fn(async () => {
+      throw new Error('403')
+    })
+    const { add, immediateFetch } = makeCache(fetchCallback)
+
+    add(1)
+    await expect(immediateFetch()).rejects.toThrow('403')
+    await expect(immediateFetch()).resolves.toEqual([])
+
+    expect(fetchCallback).toHaveBeenCalledTimes(1)
+  })
+
+  it('marks ids the server did not return as unresolved', async () => {
+    const fetchCallback = vi.fn(async () => [{ id: 1, name: 'kept' }])
+    const { add, immediateFetch, isLoaded, isUnresolved } = makeCache(fetchCallback)
+
+    add(1, 2)
+    await immediateFetch()
+
+    expect(isLoaded(1)).toBe(true)
+    expect(isUnresolved(1)).toBe(false)
+    expect(isLoaded(2)).toBe(false)
+    expect(isUnresolved(2)).toBe(true)
+  })
+
+  it('re-queues an unresolved id when it is added again', async () => {
+    const fetchCallback = vi
+      .fn<(ids: number[]) => Promise<Row[]>>()
+      .mockRejectedValueOnce(new Error('503'))
+      .mockResolvedValueOnce([{ id: 1, name: 'recovered' }])
+    const { add, immediateFetch, isLoaded, isUnresolved } = makeCache(fetchCallback)
+
+    add(1)
+    await expect(immediateFetch()).rejects.toThrow('503')
+    expect(isUnresolved(1)).toBe(true)
+
+    add(1)
+    await immediateFetch()
+
+    expect(isLoaded(1)).toBe(true)
+    expect(isUnresolved(1)).toBe(false)
+  })
+
+  it('does not reject from the debounced fetch, because callers use it fire-and-forget', async () => {
+    vi.useFakeTimers()
+    try {
+      const fetchCallback = vi.fn(async () => {
+        throw new Error('network')
+      })
+      const { add, fetch, toFetch, isUnresolved } = makeCache(fetchCallback)
+
+      add(1)
+      const pending = fetch()
+      await vi.advanceTimersByTimeAsync(1600)
+
+      // Awaiting is the assertion: a rejection here would fail the test and, in the app,
+      // surface as an unhandled rejection. The resolved value is not pinned on purpose,
+      // vueuse settles a superseded debounce call with undefined.
+      await pending
+      expect(fetchCallback).toHaveBeenCalledTimes(1)
+      expect(toFetch.value.size).toBe(0)
+      expect(isUnresolved(1)).toBe(true)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('evicts only as many entries as the genuinely new ids require', () => {
+    const { add, addManual, cache } = makeCache(async () => [], 3)
+
+    addManual({ id: 1, name: 'a' })
+    addManual({ id: 2, name: 'b' })
+    addManual({ id: 3, name: 'c' })
+    expect(cache.value.size).toBe(3)
+
+    add(4)
+
+    expect(cache.value.size).toBe(3)
+    expect(cache.value.has(4)).toBe(true)
+    expect(cache.value.has(1)).toBe(false)
+  })
+
+  it('does not evict anything when the added ids are already cached', async () => {
+    const fetchCallback = vi.fn(async () => {
+      throw new Error('403')
+    })
+    const { add, addManual, immediateFetch, cache } = makeCache(fetchCallback, 3)
+
+    add(1)
+    await expect(immediateFetch()).rejects.toThrow('403')
+    addManual({ id: 2, name: 'b' })
+    addManual({ id: 3, name: 'c' })
+    expect(cache.value.size).toBe(3)
+
+    // Re-adding the unresolved id sets an existing key, so it must not count as growth.
+    add(1)
+
+    expect(cache.value.size).toBe(3)
+    expect(cache.value.has(2)).toBe(true)
+    expect(cache.value.has(3)).toBe(true)
+  })
+})
diff --git a/src/test/composables/listEditorPreservePositions.test.ts b/src/test/composables/listEditorPreservePositions.test.ts
new file mode 100644
index 00000000..9a3217bc
--- /dev/null
+++ b/src/test/composables/listEditorPreservePositions.test.ts
@@ -0,0 +1,305 @@
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { useListEditorController } from '@/labs/listEditor/composables/useListEditorController'
+
+/**
+ * QA 85050 Batch 10 BUG-03 — position values must be preservable across a reorder.
+ *
+ * The controller renumbers on EVERY write: `write()` → `renumber()` → `renumberPositions`,
+ * which assigns `(index + 1) * multiplier` to every row. For most consumers that is right —
+ * positions are opaque ordinals.
+ *
+ * Not for CMS page contents. There the position is a meaningful ABSOLUTE number: the backend
+ * (`PageContentItemsDecoratorBuilder`) merges page-content rows and auto-distribution boxes into
+ * ONE list and sorts BOTH on the same numeric scale. Rewriting 10/310 into 100/200 silently MOVES
+ * unrelated boxes on the live site.
+ *
+ * Agreed requirement: a reorder must only SWAP rows through the EXISTING position slots — the set
+ * of values stays put, the row identities move through it. Renumbering stays the DEFAULT (the ~60
+ * other consumers are unaffected); this is an opt-in.
+ *
+ * `preserve-values` is a REORDER policy, not a general write policy:
+ *   move   → take the current position values, sort ascending, reassign to the new row order
+ *   add    → do not invent or compact; the new row keeps the position it was given
+ *   delete → keep the holes, do not compact
+ *
+ * The first test is a GUARD on the default: it must keep passing — the ~60 renumbering consumers
+ * must not notice this option exists.
+ */
+
+interface Row {
+  id: number
+  title: string
+  position: number
+}
+
+const setup = (
+  initial: Row[],
+  opts: Partial<Parameters<typeof useListEditorController<Row>>[0]> = {},
+) => {
+  const store = ref<Row[]>(initial.map((r) => ({ ...r })))
+  const h = useListEditorController<Row>({
+    get: () => store.value,
+    set: (v) => (store.value = v),
+    factory: () => ({ id: -99, title: 'new', position: 0 }),
+    ...opts,
+  })
+  return { store, h }
+}
+
+const positions = (store: { value: Row[] }) => store.value.map((r) => r.position)
+const titles = (store: { value: Row[] }) => store.value.map((r) => r.title)
+
+describe('useListEditorController — position strategy', () => {
+  it('GUARD: the default still renumbers to a clean (index+1)*multiplier series', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 310 },
+      ],
+      { position: { field: 'position', multiplier: 100 } },
+    )
+    h.moveItem(0, 1)
+    // Unchanged behaviour for every existing consumer: values are rewritten from array order.
+    expect(titles(store)).toEqual(['B', 'A'])
+    expect(positions(store)).toEqual([100, 200])
+  })
+
+  it('preserve-values: a move swaps rows THROUGH the existing slots, keeping the values', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 310 },
+      ],
+      { position: { field: 'position', multiplier: 100, strategy: 'preserve-values' } },
+    )
+    h.moveItem(0, 1)
+
+    // ORACLE (fails today → renumbered to [100, 200]): the slots stay {10, 310}; the rows move.
+    expect(titles(store)).toEqual(['B', 'A'])
+    expect(positions(store)).toEqual([10, 310])
+  })
+
+  it('preserve-values: a 3-row reorder reassigns the sorted value set to the new order', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 100 },
+        { id: 3, title: 'C', position: 310 },
+      ],
+      { position: { field: 'position', multiplier: 100, strategy: 'preserve-values' } },
+    )
+    h.moveItem(2, 0) // drag C to the top
+
+    // ORACLE: C:10, A:100, B:310 — the value set is untouched, identities move through it.
+    expect(titles(store)).toEqual(['C', 'A', 'B'])
+    expect(positions(store)).toEqual([10, 100, 310])
+  })
+
+  it('preserve-values: adding a row does not rewrite the existing rows positions', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 310 },
+      ],
+      { position: { field: 'position', multiplier: 100, strategy: 'preserve-values' } },
+    )
+    h.addItem(undefined, undefined)
+
+    // ORACLE (fails today): the two existing rows keep 10 / 310 — add must not compact or renumber.
+    // Assert the WHOLE list, not just the two survivors' positions: a bad addItem could insert at
+    // the wrong index, drop a row, or renumber the new row and still satisfy a per-row check.
+    expect(store.value).toHaveLength(3)
+    expect(titles(store)).toEqual(['A', 'B', 'new']) // appended last, existing order intact
+    expect(positions(store)).toEqual([10, 310, 0]) // …and the new row keeps the factory's own value
+  })
+
+  it('preserve-values: deleting a row leaves a hole rather than compacting', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 100 },
+        { id: 3, title: 'C', position: 310 },
+      ],
+      { position: { field: 'position', multiplier: 100, strategy: 'preserve-values' } },
+    )
+    h.deleteItem(2) // drop B (by key)
+
+    // ORACLE (fails today → compacted to [100, 200]): the survivors keep their own slots.
+    expect(store.value).toHaveLength(2)
+    expect(titles(store)).toEqual(['A', 'C'])
+    expect(positions(store)).toEqual([10, 310]) // the 100 hole is NOT closed up
+  })
+
+  it('preserve-values: deleting the FIRST row keeps the survivors off a 1..n series', () => {
+    // The ascending survivors in the test above cannot tell `return arr` from a re-preserve — both
+    // yield [10, 310]. Dropping the row that owns the LOWEST slot can: compaction/renumbering would
+    // pull C down to 10/100, and only "leave the values alone" keeps 100/310.
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 100 },
+        { id: 3, title: 'C', position: 310 },
+      ],
+      { position: { field: 'position', multiplier: 100, strategy: 'preserve-values' } },
+    )
+    h.deleteItem(1)
+    expect(titles(store)).toEqual(['B', 'C'])
+    expect(positions(store)).toEqual([100, 310]) // NOT [10, 310] and NOT [100, 200]
+  })
+
+  it('preserve-values + a factory that omits position: the next move warns and changes nothing', () => {
+    // Reachable in practice: `add` deliberately does not renumber under preserve-values, so a
+    // factory that forgets `position` leaves a row with no slot. The NEXT move then hands
+    // preservePositionValues an unusable value set — it must warn and leave every position alone
+    // rather than invent numbers that would move unrelated interleaved rows on the live site.
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 310 },
+      ],
+      {
+        position: { field: 'position', multiplier: 100, strategy: 'preserve-values' },
+        factory: () => ({ id: -99, title: 'new' }) as unknown as Row, // no position
+      },
+    )
+    h.addItem()
+    expect(store.value[2].position).toBeUndefined() // add did not invent one
+
+    h.moveItem(0, 1) // A <-> B; the value set is [10, 310, undefined] → unusable
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(String(warn.mock.calls[0][0])).toContain('leaving positions untouched')
+    // The rows still REORDER (that is array order); only the position values are left as they were.
+    expect(titles(store)).toEqual(['B', 'A', 'new'])
+    expect(positions(store)).toEqual([310, 10, undefined])
+    warn.mockRestore()
+  })
+})
+
+/**
+ * Per-action override matrix (`strategyOverrides`). The base `strategy` sets the default for every
+ * action; a `strategyOverrides` entry replaces it for that one action. This is what lets a consumer
+ * mix policies — e.g. a CMS page preserves absolute positions on reorder/save (so it does not move
+ * interleaved auto-distribution boxes on a no-op save) but still CLOSES the gap on delete, matching
+ * the legacy pre-migration behaviour (QA 85050 batch 11 BUG-01).
+ */
+describe('useListEditorController — strategyOverrides (per-action policy)', () => {
+  const pageContents = {
+    field: 'position' as const,
+    multiplier: 100,
+    strategy: 'preserve-values' as const,
+    strategyOverrides: { remove: 'renumber' as const },
+  }
+
+  it("remove:'renumber' closes the gap on delete (the tester's exact example)", () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 100 },
+        { id: 2, title: 'B', position: 200 },
+        { id: 3, title: 'C', position: 300 },
+        { id: 4, title: 'D', position: 400 },
+      ],
+      { position: pageContents },
+    )
+    h.deleteItem(3) // drop C (position 300)
+
+    // ORACLE (fails until strategyOverrides is honoured → today keeps the hole [100, 200, 400]):
+    // the survivors renumber to a clean series, closing the gap the deleted row left.
+    expect(titles(store)).toEqual(['A', 'B', 'D'])
+    expect(positions(store)).toEqual([100, 200, 300])
+  })
+
+  it('the override does NOT touch reorder — a move still swaps rows through the existing slots', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 310 },
+      ],
+      { position: pageContents },
+    )
+    h.moveItem(0, 1)
+
+    // reorder still resolves to the base 'preserve-values': the slots {10, 310} stay, rows move.
+    expect(titles(store)).toEqual(['B', 'A'])
+    expect(positions(store)).toEqual([10, 310])
+  })
+
+  it('the override does NOT touch save — getPayload does not rewrite the preserved values', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 310 },
+      ],
+      { position: pageContents },
+    )
+    h.moveItem(0, 1) // preserved swap → store is [B:10, A:310]
+
+    // payload inherits the base 'preserve-values': it serialises the store AS-IS, no renumber.
+    // (A no-op save must not move interleaved AD boxes on the same numeric scale.)
+    expect(h.getPayload().map((r) => r.position)).toEqual([10, 310])
+    expect(positions(store)).toEqual([10, 310])
+  })
+
+  it('the override does NOT touch add — a new row keeps the position it was handed', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 100 },
+        { id: 2, title: 'B', position: 200 },
+      ],
+      {
+        position: pageContents,
+        factory: () => ({ id: -99, title: 'new', position: 300 }) as Row,
+      },
+    )
+    h.addItem()
+
+    // add inherits base 'preserve-values' → the factory's 300 is kept, existing rows untouched.
+    expect(titles(store)).toEqual(['A', 'B', 'new'])
+    expect(positions(store)).toEqual([100, 200, 300])
+  })
+
+  it('resolves per-action independently: base renumber with a move:preserve override', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 310 },
+      ],
+      {
+        position: {
+          field: 'position' as const,
+          multiplier: 100,
+          strategy: 'renumber' as const,
+          strategyOverrides: { move: 'preserve-values' as const },
+        },
+      },
+    )
+    h.moveItem(0, 1)
+
+    // move resolves to the override 'preserve-values' (slots kept), NOT the base 'renumber'.
+    expect(titles(store)).toEqual(['B', 'A'])
+    expect(positions(store)).toEqual([10, 310])
+  })
+
+  it('an omitted action inherits the base strategy (base renumber → delete still renumbers)', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'A', position: 10 },
+        { id: 2, title: 'B', position: 310 },
+        { id: 3, title: 'C', position: 500 },
+      ],
+      {
+        position: {
+          field: 'position' as const,
+          multiplier: 100,
+          strategy: 'renumber' as const,
+          strategyOverrides: { move: 'preserve-values' as const },
+        },
+      },
+    )
+    h.deleteItem(2) // remove is NOT overridden → inherits base 'renumber'
+
+    expect(titles(store)).toEqual(['A', 'C'])
+    expect(positions(store)).toEqual([100, 200])
+  })
+})
diff --git a/src/test/composables/listEditorUtils.test.ts b/src/test/composables/listEditorUtils.test.ts
new file mode 100644
index 00000000..0d90cda4
--- /dev/null
+++ b/src/test/composables/listEditorUtils.test.ts
@@ -0,0 +1,273 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  preservePositionValues,
+  renumberPositions,
+  sortByPosition,
+  sortByPositionDeep,
+} from '@/labs/listEditor/utils/positions'
+import { nextListEditorTempId } from '@/labs/listEditor/utils/tempId'
+
+describe('renumberPositions', () => {
+  it('renumbers to sequential 1-based positions matching array order', () => {
+    const items = [
+      { id: 1, position: 7 },
+      { id: 2, position: 1 },
+      { id: 3, position: 1 },
+    ]
+    const result = renumberPositions(items)
+    expect(result.map((i) => i.position)).toEqual([1, 2, 3])
+    expect(result.map((i) => i.id)).toEqual([1, 2, 3])
+  })
+
+  it('returns already-correct items reference-equal and never mutates input', () => {
+    const ok = { id: 1, position: 1 }
+    const wrong = { id: 2, position: 9 }
+    const items = [ok, wrong]
+    const result = renumberPositions(items)
+    expect(result[0]).toBe(ok)
+    expect(result[1]).not.toBe(wrong)
+    expect(wrong.position).toBe(9)
+    expect(result[1].position).toBe(2)
+  })
+
+  it('supports custom positionField and positionMultiplier', () => {
+    const items = [
+      { id: 1, order: 0 },
+      { id: 2, order: 0 },
+    ]
+    const result = renumberPositions(items, { positionField: 'order', positionMultiplier: 10 })
+    expect(result.map((i) => i.order)).toEqual([10, 20])
+  })
+
+  it('handles an empty list', () => {
+    expect(renumberPositions([])).toEqual([])
+  })
+})
+
+describe('preservePositionValues', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('reassigns the EXISTING value set, ascending, to the current array order', () => {
+    // The point of the strategy: the slot values {10, 310} are untouched, the rows move through them.
+    const items = [
+      { id: 'B', position: 310 },
+      { id: 'A', position: 10 },
+    ]
+    const result = preservePositionValues(items)
+    expect(result.map((i) => [i.id, i.position])).toEqual([
+      ['B', 10],
+      ['A', 310],
+    ])
+  })
+
+  it('sorts the slots ascending regardless of the input order', () => {
+    const items = [
+      { id: 'C', position: 310 },
+      { id: 'A', position: 10 },
+      { id: 'B', position: 100 },
+    ]
+    expect(preservePositionValues(items).map((i) => [i.id, i.position])).toEqual([
+      ['C', 10],
+      ['A', 100],
+      ['B', 310],
+    ])
+  })
+
+  it('keeps a row already sitting in its slot reference-equal and never mutates the input', () => {
+    const a = { id: 'A', position: 10 } // already in slot 0 → must not be cloned
+    const c = { id: 'C', position: 310 }
+    const b = { id: 'B', position: 100 }
+    const items = [a, c, b]
+    const result = preservePositionValues(items)
+    expect(result[0]).toBe(a)
+    expect(result[1]).not.toBe(c) // reassigned 310 → 100, so cloned
+    expect(result[2]).not.toBe(b)
+    expect(c.position).toBe(310) // input objects untouched
+    expect(b.position).toBe(100)
+    expect(result).not.toBe(items)
+    expect(result.map((i) => i.position)).toEqual([10, 100, 310])
+  })
+
+  it('supports a custom positionField', () => {
+    const items = [
+      { id: 'B', order: 310 },
+      { id: 'A', order: 10 },
+    ]
+    const result = preservePositionValues(items, { positionField: 'order' })
+    expect(result.map((i) => [i.id, i.order])).toEqual([
+      ['B', 10],
+      ['A', 310],
+    ])
+  })
+
+  it('warns and leaves positions UNTOUCHED when a position is missing', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const items = [{ id: 'B', position: 310 }, { id: 'A' }] as Array<{
+      id: string
+      position?: number
+    }>
+    const result = preservePositionValues(items)
+    expect(result).toBe(items) // the SAME array back — no invented values
+    expect(items.map((i) => i.position)).toEqual([310, undefined])
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(String(warn.mock.calls[0][0])).toContain('leaving positions untouched')
+  })
+
+  it('warns and leaves positions UNTOUCHED when a position is non-finite', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const items = [
+      { id: 'A', position: Number.NaN },
+      { id: 'B', position: 10 },
+    ]
+    const result = preservePositionValues(items)
+    expect(result).toBe(items)
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(String(warn.mock.calls[0][0])).toContain('leaving positions untouched')
+  })
+
+  it('names the custom positionField in the warning', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    preservePositionValues(
+      [{ id: 'A', order: undefined }] as Array<{
+        id: string
+        order?: number
+      }>,
+      { positionField: 'order' },
+    )
+    expect(String(warn.mock.calls[0][0])).toContain('`order`')
+  })
+
+  it('warns about DUPLICATE positions but still reassigns', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const items = [
+      { id: 'A', position: 10 },
+      { id: 'B', position: 10 },
+    ]
+    const result = preservePositionValues(items)
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(String(warn.mock.calls[0][0])).toContain('DUPLICATE')
+    expect(result.map((i) => i.position)).toEqual([10, 10]) // still assigns the (duplicate) slots
+  })
+
+  it('does not warn on the happy path', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    preservePositionValues([
+      { id: 'B', position: 310 },
+      { id: 'A', position: 10 },
+    ])
+    expect(warn).not.toHaveBeenCalled()
+  })
+
+  it('handles an empty list without warning', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    expect(preservePositionValues([])).toEqual([])
+    expect(warn).not.toHaveBeenCalled()
+  })
+})
+
+describe('sortByPosition', () => {
+  it('returns a copy ordered by ascending position without mutating the input', () => {
+    const items = [
+      { id: 1, position: 3 },
+      { id: 2, position: 1 },
+      { id: 3, position: 2 },
+    ]
+    const result = sortByPosition(items)
+    expect(result.map((i) => i.id)).toEqual([2, 3, 1])
+    expect(items.map((i) => i.id)).toEqual([1, 2, 3])
+    expect(result).not.toBe(items)
+  })
+})
+
+describe('sortByPositionDeep', () => {
+  it('sorts the top level and recurses into the named child arrays', () => {
+    const tree = [
+      {
+        id: 2,
+        position: 2,
+        answers: [
+          { id: 'b', position: 2 },
+          { id: 'a', position: 1 },
+        ],
+      },
+      {
+        id: 1,
+        position: 1,
+        answers: [
+          { id: 'd', position: 2 },
+          { id: 'c', position: 1 },
+        ],
+      },
+    ]
+    const result = sortByPositionDeep(tree, ['answers'])
+    expect(result.map((q) => q.id)).toEqual([1, 2])
+    expect(result[0].answers.map((a) => a.id)).toEqual(['c', 'd'])
+    expect(result[1].answers.map((a) => a.id)).toEqual(['a', 'b'])
+  })
+
+  it('applies the same childKeys union at every depth, skipping keys absent on a node', () => {
+    const box = [
+      {
+        id: 1,
+        position: 1,
+        contentItems: [
+          { id: 'ci2', position: 2, boxPositionIncludes: [] },
+          {
+            id: 'ci1',
+            position: 1,
+            boxPositionIncludes: [
+              { id: 'p2', position: 2 },
+              { id: 'p1', position: 1 },
+            ],
+          },
+        ],
+      },
+    ]
+    const result = sortByPositionDeep(box, ['contentItems', 'boxPositionIncludes'])
+    expect(result[0].contentItems.map((c) => c.id)).toEqual(['ci1', 'ci2'])
+    expect(result[0].contentItems[0].boxPositionIncludes.map((p) => p.id)).toEqual(['p1', 'p2'])
+  })
+
+  it('does not mutate input and keeps leaf / childless nodes reference-equal', () => {
+    const leaf = { id: 1, position: 2 }
+    const parent = {
+      id: 2,
+      position: 1,
+      items: [
+        { id: 'y', position: 2 },
+        { id: 'x', position: 1 },
+      ],
+    }
+    const input = [leaf, parent]
+    const result = sortByPositionDeep(input, ['items'])
+    expect(result.map((i) => i.id)).toEqual([2, 1])
+    expect(result.find((i) => i.id === 1)).toBe(leaf) // childless node: same ref
+    expect(result.find((i) => i.id === 2)).not.toBe(parent) // cloned because its child array was sorted
+    expect(parent.items.map((i) => i.id)).toEqual(['y', 'x']) // original nested array untouched
+  })
+
+  it('is idempotent and falls back to a flat sort with no childKeys', () => {
+    const items = [
+      { id: 1, position: 3 },
+      { id: 2, position: 1 },
+      { id: 3, position: 2 },
+    ]
+    const once = sortByPositionDeep(items)
+    expect(once.map((i) => i.id)).toEqual([2, 3, 1])
+    expect(sortByPositionDeep(once).map((i) => i.id)).toEqual([2, 3, 1])
+  })
+})
+
+describe('nextListEditorTempId', () => {
+  it('returns unique negative ids on every call', () => {
+    const a = nextListEditorTempId()
+    const b = nextListEditorTempId()
+    const c = nextListEditorTempId()
+    expect(a).toBeLessThan(0)
+    expect(new Set([a, b, c]).size).toBe(3)
+    expect(b).toBe(a - 1)
+    expect(c).toBe(b - 1)
+  })
+})
diff --git a/src/test/composables/resolveCompactText.test.ts b/src/test/composables/resolveCompactText.test.ts
index b01e2af0..f0458231 100644
--- a/src/test/composables/resolveCompactText.test.ts
+++ b/src/test/composables/resolveCompactText.test.ts
@@ -2,100 +2,22 @@ import { describe, expect, it } from 'vitest'
 import { resolveCompactText } from '@/labs/listEditor/composables/resolveCompactText'
 
 describe('resolveCompactText', () => {
-  const FALLBACK = 'Item'
-
-  describe('compactField', () => {
-    it('returns the configured field when set and non-empty', () => {
-      const result = resolveCompactText(
-        { id: 1, label: 'Custom', title: 'IgnoredTitle' },
-        1,
-        { compactField: 'label', fallback: FALLBACK },
-      )
-      expect(result).toBe('Custom')
-    })
-
-    it('falls through when the configured field is empty/null/undefined', () => {
-      const empty = resolveCompactText(
-        { id: 1, label: '', title: 'TitleWins' },
-        1,
-        { compactField: 'label', fallback: FALLBACK },
-      )
-      const isNull = resolveCompactText(
-        { id: 1, label: null, title: 'TitleWins' },
-        1,
-        { compactField: 'label', fallback: FALLBACK },
-      )
-      const undef = resolveCompactText(
-        { id: 1, title: 'TitleWins' },
-        1,
-        { compactField: 'label', fallback: FALLBACK },
-      )
-      expect(empty).toBe('TitleWins')
-      expect(isNull).toBe('TitleWins')
-      expect(undef).toBe('TitleWins')
-    })
-
-    it('coerces non-string field values to string', () => {
-      const result = resolveCompactText(
-        { id: 1, label: 42 },
-        1,
-        { compactField: 'label', fallback: FALLBACK },
-      )
-      expect(result).toBe('42')
-    })
+  it('returns the configured compactField value', () => {
+    expect(resolveCompactText({ id: 1, label: 'Custom' }, { compactField: 'label' })).toBe('Custom')
   })
 
-  describe('priority chain (compactField → title → name → texts.title → text → key → fallback)', () => {
-    it('compactField beats every default field', () => {
-      const result = resolveCompactText(
-        {
-          id: 1,
-          label: 'COMPACT',
-          title: 'Title',
-          name: 'Name',
-          texts: { title: 'Texts' },
-          text: 'Text',
-        },
-        1,
-        { compactField: 'label', fallback: FALLBACK },
-      )
-      expect(result).toBe('COMPACT')
-    })
+  it('returns empty string when compactField is empty/null/undefined', () => {
+    expect(resolveCompactText({ id: 1, label: '' }, { compactField: 'label' })).toBe('')
+    expect(resolveCompactText({ id: 1, label: null }, { compactField: 'label' })).toBe('')
+    expect(resolveCompactText({ id: 1 }, { compactField: 'label' })).toBe('')
+  })
 
-    it('title → name → texts.title → text', () => {
-      const all = {
-        title: 'A',
-        name: 'B',
-        texts: { title: 'C' },
-        text: 'D',
-      }
-      expect(resolveCompactText(all, 1, { fallback: FALLBACK })).toBe('A')
-      expect(
-        resolveCompactText({ ...all, title: '' }, 1, { fallback: FALLBACK }),
-      ).toBe('B')
-      expect(
-        resolveCompactText({ ...all, title: '', name: '' }, 1, {
-          fallback: FALLBACK,
-        }),
-      ).toBe('C')
-      expect(
-        resolveCompactText(
-          { title: '', name: '', texts: { title: '' }, text: 'D' },
-          1,
-          { fallback: FALLBACK },
-        ),
-      ).toBe('D')
-    })
+  it('returns empty string when compactField is not set — no implicit fallback to common fields', () => {
+    expect(resolveCompactText({ id: 1, title: 'T', name: 'N', text: 'X' }, {})).toBe('')
+    expect(resolveCompactText({ id: 1, title: 'T' }, { compactField: null })).toBe('')
+  })
 
-    it('falls through to the row key as last resort, then fallback', () => {
-      // Numeric 0 is coerced to '0' (not '' or null) → used as the label.
-      expect(resolveCompactText({ id: 0 }, 0, { fallback: FALLBACK })).toBe(
-        '0',
-      )
-      // Empty-string key + no other fields → fallback.
-      expect(
-        resolveCompactText({ id: null }, '', { fallback: FALLBACK }),
-      ).toBe(FALLBACK)
-    })
+  it('coerces non-string field values to string', () => {
+    expect(resolveCompactText({ id: 1, label: 42 }, { compactField: 'label' })).toBe('42')
   })
 })
diff --git a/src/test/composables/revealInvalidRows.test.ts b/src/test/composables/revealInvalidRows.test.ts
new file mode 100644
index 00000000..8b2f1b60
--- /dev/null
+++ b/src/test/composables/revealInvalidRows.test.ts
@@ -0,0 +1,21 @@
+import { describe, it, expect, vi } from 'vitest'
+import { ref } from 'vue'
+import { validateAllAndReveal } from '@/labs/listEditor/utils/revealInvalidRows'
+
+// The shared "validate + reveal" used by all three editors' validateAll override
+// (AListEditor / ASortableListEditor / ANestedSortableListEditor) — QA 85050 B4-17.
+describe('validateAllAndReveal', () => {
+  it('returns valid and does NOT reveal any row when validateAll passes', () => {
+    const reveal = vi.fn()
+    const controller = { validateAll: () => true, invalidKeys: ref(new Set([1, 2])) }
+    expect(validateAllAndReveal(controller, reveal)).toBe(true)
+    expect(reveal).not.toHaveBeenCalled()
+  })
+
+  it('returns invalid and reveals EVERY invalid key when validateAll fails', () => {
+    const reveal = vi.fn()
+    const controller = { validateAll: () => false, invalidKeys: ref(new Set([1, 3])) }
+    expect(validateAllAndReveal(controller, reveal)).toBe(false)
+    expect(reveal.mock.calls.map((c) => c[0]).sort()).toEqual([1, 3])
+  })
+})
diff --git a/src/test/composables/useDirtyBaseline.test.ts b/src/test/composables/useDirtyBaseline.test.ts
index ac4a1639..1e1e5fd2 100644
--- a/src/test/composables/useDirtyBaseline.test.ts
+++ b/src/test/composables/useDirtyBaseline.test.ts
@@ -21,8 +21,10 @@ describe('useDirtyBaseline', () => {
         items.map((it) => ({ key: it.id, data: it })),
       )
       expect(dirtyBaseline.value.size).toBe(2)
-      expect(dirtyBaseline.value.has(1)).toBe(true)
-      expect(dirtyBaseline.value.has(2)).toBe(true)
+      // The name's actual claim is the stringified CONTENT — key presence alone would survive a
+      // baseline that stored nothing (or every row's hash under one key).
+      expect(dirtyBaseline.value.get(1)).toBe(JSON.stringify({ id: 1, title: 'A' }))
+      expect(dirtyBaseline.value.get(2)).toBe(JSON.stringify({ id: 2, title: 'B' }))
     })
   })
 
@@ -94,8 +96,8 @@ describe('useDirtyBaseline', () => {
   describe('captureDirtyBaseline (rebaseline all)', () => {
     it('makes a previously-dirty item clean again', () => {
       const items: Item[] = [{ id: 1, title: 'A' }]
-      const { isItemDirty, captureDirtyBaseline } = useDirtyBaseline<Item>(
-        () => items.map((it) => ({ key: it.id, data: it })),
+      const { isItemDirty, captureDirtyBaseline } = useDirtyBaseline<Item>(() =>
+        items.map((it) => ({ key: it.id, data: it })),
       )
       items[0].title = 'A-changed'
       expect(isItemDirty(1, items[0])).toBe(true)
@@ -109,8 +111,8 @@ describe('useDirtyBaseline', () => {
         { id: 1, title: 'A' },
         { id: 2, title: 'B' },
       ]
-      const { dirtyBaseline, captureDirtyBaseline } = useDirtyBaseline<Item>(
-        () => items.map((it) => ({ key: it.id, data: it })),
+      const { dirtyBaseline, captureDirtyBaseline } = useDirtyBaseline<Item>(() =>
+        items.map((it) => ({ key: it.id, data: it })),
       )
       expect(dirtyBaseline.value.size).toBe(2)
       // Item 2 deleted externally
@@ -128,8 +130,8 @@ describe('useDirtyBaseline', () => {
         { id: 1, title: 'A' },
         { id: 2, title: 'B' },
       ]
-      const { isItemDirty, rebaselineKey } = useDirtyBaseline<Item>(
-        () => items.map((it) => ({ key: it.id, data: it })),
+      const { isItemDirty, rebaselineKey } = useDirtyBaseline<Item>(() =>
+        items.map((it) => ({ key: it.id, data: it })),
       )
       items[0].title = 'A-changed'
       items[1].title = 'B-changed'
@@ -145,8 +147,8 @@ describe('useDirtyBaseline', () => {
         { id: 1, title: 'A' },
         { id: 2, title: 'B' },
       ]
-      const { dirtyBaseline, rebaselineKey } = useDirtyBaseline<Item>(
-        () => items.map((it) => ({ key: it.id, data: it })),
+      const { dirtyBaseline, rebaselineKey } = useDirtyBaseline<Item>(() =>
+        items.map((it) => ({ key: it.id, data: it })),
       )
       // Item 2 deleted, then rebaseline its key — baseline should drop it
       items.splice(1, 1)
diff --git a/src/test/composables/useDragInstruction.test.ts b/src/test/composables/useDragInstruction.test.ts
index 1425544e..01970808 100644
--- a/src/test/composables/useDragInstruction.test.ts
+++ b/src/test/composables/useDragInstruction.test.ts
@@ -522,6 +522,71 @@ describe('computeInstruction', () => {
     })
   })
 
+  describe('BUG-13: nested child dragged out to root lands beside its parent, not at index 0', () => {
+    // QA video tree: ED0 (single child ED1), then ED2, ED3, ED4 at root.
+    // Source = ED1. Dropping it at root depth just below ED0 must resolve to
+    // root index 1 (AFTER ED0) — whether the pointer expresses that via ED0's
+    // bottom-half or via ED2's top-half. (Index 0 / above ED0 is only correct
+    // when the pointer explicitly aims at ED0's TOP half — a distinct gesture.)
+    const viewItems = makeViewItems([
+      { key: 'ED0', depth: 0, parentKey: null, siblingIndex: 0, siblingCount: 4 },
+      { key: 'ED1', depth: 1, parentKey: 'ED0', siblingIndex: 0, siblingCount: 1 },
+      { key: 'ED2', depth: 0, parentKey: null, siblingIndex: 1, siblingCount: 4 },
+      { key: 'ED3', depth: 0, parentKey: null, siblingIndex: 2, siblingCount: 4 },
+      { key: 'ED4', depth: 0, parentKey: null, siblingIndex: 3, siblingCount: 4 },
+    ])
+
+    it("hovering the parent's bottom-half at root depth → root index 1 (after the parent)", () => {
+      const hoveredRow = makeHoveredRow(viewItems[0], 0) // ED0 at top, height 32
+      const result = asInsert(
+        computeInstruction(
+          defaultArgs({
+            pointer: { x: 0, y: 24 }, // bottom half of ED0, depth 0 (far left)
+            hoveredRow,
+            sourceKey: 'ED1',
+            viewItems,
+          }),
+        ),
+      )
+      expect(result.parentKey).toBe(null)
+      expect(result.index).toBe(1) // after ED0 — NOT 0 (above ED0)
+      expect(result.depth).toBe(0)
+      expect(result.levelRowKey).toBe('ED0')
+    })
+
+    it("hovering the following root row's top-half at root depth → also root index 1", () => {
+      const hoveredRow = makeHoveredRow(viewItems[2], 64) // ED2
+      const result = asInsert(
+        computeInstruction(
+          defaultArgs({
+            pointer: { x: 0, y: 66 }, // top half of ED2, depth 0
+            hoveredRow,
+            sourceKey: 'ED1',
+            viewItems,
+          }),
+        ),
+      )
+      expect(result.parentKey).toBe(null)
+      expect(result.index).toBe(1)
+    })
+
+    it("the root-top fallback (index 0) only fires when aiming at the parent's TOP half", () => {
+      const hoveredRow = makeHoveredRow(viewItems[0], 0)
+      const result = asInsert(
+        computeInstruction(
+          defaultArgs({
+            pointer: { x: 0, y: 4 }, // top half of ED0 → above the parent
+            hoveredRow,
+            sourceKey: 'ED1',
+            viewItems,
+          }),
+        ),
+      )
+      expect(result.parentKey).toBe(null)
+      expect(result.index).toBe(0) // explicitly above ED0 — the distinct gesture
+    })
+  })
+
   describe('blocked (maxDepth)', () => {
     it('wraps desired in blocked when desired.depth + sourceSubtreeDepth - 1 >= maxDepth', () => {
       const viewItems = makeViewItems([
diff --git a/src/test/composables/useGuardedDelete.test.ts b/src/test/composables/useGuardedDelete.test.ts
new file mode 100644
index 00000000..d0ae4bc1
--- /dev/null
+++ b/src/test/composables/useGuardedDelete.test.ts
@@ -0,0 +1,68 @@
+import { describe, it, expect, vi } from 'vitest'
+import { useGuardedDelete } from '@/labs/unsavedGuard/useGuardedDelete'
+
+// QA 85050 batch 7 — BUG-08. An entity delete must bypass the unsaved-changes leave guard: it
+// acknowledges the guard BEFORE the delete so the post-delete `router.push` navigates without the
+// (now meaningless) "you have unsaved changes, really leave?" prompt.
+// M1 — but a FAILED delete never navigates, so the acknowledgement must be undone or the next dirty
+// navigation slips past the guard silently.
+
+const makeGuard = () => ({ acknowledge: vi.fn(), unacknowledge: vi.fn() })
+
+describe('useGuardedDelete', () => {
+  it('acknowledges the guard BEFORE running the delete, forwarding args + return value', () => {
+    const order: string[] = []
+    const guard = { acknowledge: vi.fn(() => order.push('ack')), unacknowledge: vi.fn() }
+    const onDelete = vi.fn((id: number) => {
+      order.push(`del:${id}`)
+      return `done:${id}`
+    })
+
+    const guarded = useGuardedDelete(guard, onDelete)
+    const result = guarded(7)
+
+    expect(guard.acknowledge).toHaveBeenCalledTimes(1)
+    expect(onDelete).toHaveBeenCalledWith(7)
+    expect(order).toEqual(['ack', 'del:7']) // acknowledge strictly before the delete
+    expect(result).toBe('done:7')
+    expect(guard.unacknowledge).not.toHaveBeenCalled()
+  })
+
+  it('acknowledges before an async delete even begins (so a later navigation is not prompted)', async () => {
+    const order: string[] = []
+    const guard = { acknowledge: () => order.push('ack'), unacknowledge: () => order.push('unack') }
+    const onDelete = async () => {
+      order.push('delete-start')
+      await Promise.resolve()
+      order.push('navigate')
+    }
+
+    await useGuardedDelete(guard, onDelete)()
+
+    expect(order).toEqual(['ack', 'delete-start', 'navigate']) // no unacknowledge on success
+  })
+
+  it('unacknowledges when an async delete REJECTS (M1 — no navigation happened) and re-throws', async () => {
+    const guard = makeGuard()
+    const boom = new Error('delete failed')
+    const onDelete = async () => {
+      throw boom
+    }
+
+    await expect(useGuardedDelete(guard, onDelete)()).rejects.toBe(boom)
+    expect(guard.acknowledge).toHaveBeenCalledTimes(1)
+    expect(guard.unacknowledge).toHaveBeenCalledTimes(1)
+  })
+
+  it('unacknowledges when a synchronous delete throws before navigating and re-throws', () => {
+    const guard = makeGuard()
+    const boom = new Error('sync delete failed')
+    const onDelete = () => {
+      throw boom
+    }
+
+    expect(() => useGuardedDelete(guard, onDelete)()).toThrow(boom)
+    expect(guard.acknowledge).toHaveBeenCalledTimes(1)
+    expect(guard.unacknowledge).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/src/test/composables/useIsTouchDevice.test.ts b/src/test/composables/useIsTouchDevice.test.ts
new file mode 100644
index 00000000..6207113f
--- /dev/null
+++ b/src/test/composables/useIsTouchDevice.test.ts
@@ -0,0 +1,117 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, type ComputedRef } from 'vue'
+import {
+  useHasCoarsePointer,
+  useIsTouchDevice,
+} from '@/labs/listEditor/composables/useIsTouchDevice'
+
+// QA 85050 U-03 — which reorder affordances a device gets.
+// The two queries are INDEPENDENT: `(any-pointer: fine)` decides the drag handle and
+// `(any-pointer: coarse)` keeps the arrows, so a hybrid answers true to both and gets
+// both rather than a prediction. Each test installs its own `window.matchMedia` BEFORE
+// mounting and restores it afterwards.
+const makeMatchMedia = (hasFinePointer: boolean, hasCoarsePointer = false) =>
+  vi.fn((q: string) => ({
+    matches:
+      (hasFinePointer && q.includes('any-pointer: fine')) ||
+      (hasCoarsePointer && q.includes('any-pointer: coarse')),
+    media: q,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    onchange: null,
+    dispatchEvent: vi.fn(),
+  }))
+
+let mounted: VueWrapper | null = null
+let originalMatchMedia: typeof window.matchMedia
+
+beforeEach(() => {
+  originalMatchMedia = window.matchMedia
+})
+
+afterEach(() => {
+  mounted?.unmount()
+  mounted = null
+  window.matchMedia = originalMatchMedia
+})
+
+// A tiny host runs the composable inside a component setup and exposes the returned
+// ref so the test can read `.value`.
+const mountHost = (): ComputedRef<boolean> => {
+  let result!: ComputedRef<boolean>
+  const Host = defineComponent({
+    setup() {
+      result = useIsTouchDevice()
+      return () => h('div')
+    },
+  })
+  mounted = mount(Host, { attachTo: document.body })
+  return result
+}
+
+// Both composables at once, so the hybrid case can assert they are genuinely independent.
+const mountBoth = (): { isTouch: ComputedRef<boolean>; hasCoarse: ComputedRef<boolean> } => {
+  let out!: { isTouch: ComputedRef<boolean>; hasCoarse: ComputedRef<boolean> }
+  const Host = defineComponent({
+    setup() {
+      out = { isTouch: useIsTouchDevice(), hasCoarse: useHasCoarsePointer() }
+      return () => h('div')
+    },
+  })
+  mounted = mount(Host, { attachTo: document.body })
+  return out
+}
+
+describe('useIsTouchDevice — QA 85050 U-03', () => {
+  it('is a touch device when NO fine pointer exists (phone / tablet)', () => {
+    window.matchMedia = makeMatchMedia(false, true) as unknown as typeof window.matchMedia
+    const isTouch = mountHost()
+    expect(isTouch.value).toBe(true)
+  })
+
+  it('a hybrid answers YES to both — it must not be forced into one bucket', () => {
+    // A touchscreen laptop or a stylus tablet exposes a precise pointer AND a finger. Neither
+    // question may swallow the other: the handle appears because dragging works, and the arrows
+    // stay because a finger is in play. Predicting one of the two is what strands the user when
+    // they fold the laptop and reach for a row.
+    window.matchMedia = makeMatchMedia(true, true) as unknown as typeof window.matchMedia
+    const { isTouch, hasCoarse } = mountBoth()
+    expect(isTouch.value, 'a fine pointer exists → dragging is possible').toBe(false)
+    expect(hasCoarse.value, 'a finger exists → the arrows must stay').toBe(true)
+  })
+
+  it('a mouse-only desktop reports no coarse pointer (arrows are not forced on)', () => {
+    window.matchMedia = makeMatchMedia(true, false) as unknown as typeof window.matchMedia
+    const { isTouch, hasCoarse } = mountBoth()
+    expect(isTouch.value).toBe(false)
+    expect(hasCoarse.value).toBe(false)
+  })
+
+  it('is NOT a touch device when a fine pointer exists — a touchscreen PC driven with a mouse', () => {
+    // The regression this guards: `(any-pointer: coarse)` matched whenever ANY input was
+    // coarse, so a laptop with a touchscreen lost its drag handle even while the user was
+    // on the mouse — two users on identical browsers saw different affordances.
+    window.matchMedia = makeMatchMedia(true) as unknown as typeof window.matchMedia
+    const isTouch = mountHost()
+    expect(isTouch.value).toBe(false)
+  })
+
+  it('falls back to touch (arrows always work) when matchMedia reports nothing', () => {
+    window.matchMedia = vi.fn((q: string) => ({
+      matches: false,
+      media: q,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      onchange: null,
+      dispatchEvent: vi.fn(),
+    })) as unknown as typeof window.matchMedia
+    const isTouch = mountHost()
+    expect(isTouch.value).toBe(true)
+  })
+})
diff --git a/src/test/composables/useKeyboardNav.test.ts b/src/test/composables/useKeyboardNav.test.ts
index d6482fd5..b2c3033a 100644
--- a/src/test/composables/useKeyboardNav.test.ts
+++ b/src/test/composables/useKeyboardNav.test.ts
@@ -10,11 +10,7 @@ const buildOptions = (
   overrides: Partial<KeyboardNavOptions> = {},
 ): { options: KeyboardNavOptions; mocks: ReturnType<typeof buildMocks> } => {
   const mocks = buildMocks()
-  const items = ref<KeyboardNavViewItem[]>([
-    { key: 1 },
-    { key: 2 },
-    { key: 3 },
-  ])
+  const items = ref<KeyboardNavViewItem[]>([{ key: 1 }, { key: 2 }, { key: 3 }])
   const options: KeyboardNavOptions = {
     viewItems: computed(() => items.value),
     variant: 'sortable',
@@ -230,9 +226,7 @@ describe('useKeyboardNav', () => {
     })
 
     it('ArrowRight on a collapsed expandable row expands it (view mode)', () => {
-      const items = ref<KeyboardNavViewItem[]>([
-        { key: 1, expanded: false, canExpand: true },
-      ])
+      const items = ref<KeyboardNavViewItem[]>([{ key: 1, expanded: false, canExpand: true }])
       const { options, mocks } = buildOptions({
         variant: 'nested',
         viewItems: computed(() => items.value),
@@ -243,9 +237,7 @@ describe('useKeyboardNav', () => {
     })
 
     it('ArrowLeft on a leaf row is a no-op', () => {
-      const items = ref<KeyboardNavViewItem[]>([
-        { key: 1, expanded: false, canExpand: false },
-      ])
+      const items = ref<KeyboardNavViewItem[]>([{ key: 1, expanded: false, canExpand: false }])
       const { options, mocks } = buildOptions({
         variant: 'nested',
         viewItems: computed(() => items.value),
@@ -274,9 +266,7 @@ describe('useKeyboardNav', () => {
 
     it('ArrowLeft while grabbed in reorder mode calls onOutdent', () => {
       const isReorderMode = ref(true)
-      const items = ref<KeyboardNavViewItem[]>([
-        { key: 1, canIndent: true, canOutdent: true },
-      ])
+      const items = ref<KeyboardNavViewItem[]>([{ key: 1, canIndent: true, canOutdent: true }])
       const { options, mocks } = buildOptions({
         variant: 'nested',
         isReorderMode,
@@ -289,9 +279,7 @@ describe('useKeyboardNav', () => {
     })
 
     it('flat variant ignores ArrowLeft/ArrowRight', () => {
-      const items = ref<KeyboardNavViewItem[]>([
-        { key: 1, expanded: true, canExpand: true },
-      ])
+      const items = ref<KeyboardNavViewItem[]>([{ key: 1, expanded: true, canExpand: true }])
       const { options, mocks } = buildOptions({
         variant: 'flat',
         viewItems: computed(() => items.value),
@@ -358,11 +346,7 @@ describe('useKeyboardNav', () => {
     }
 
     it('falls focus to next sibling when the focused row is removed', async () => {
-      const { items, nav } = buildWithItems([
-        { key: 1 },
-        { key: 2 },
-        { key: 3 },
-      ])
+      const { items, nav } = buildWithItems([{ key: 1 }, { key: 2 }, { key: 3 }])
       nav.setFocus(2)
       await nextTick()
       // Remove row 2
@@ -372,11 +356,7 @@ describe('useKeyboardNav', () => {
     })
 
     it('falls focus to the new last row when the last row is removed', async () => {
-      const { items, nav } = buildWithItems([
-        { key: 1 },
-        { key: 2 },
-        { key: 3 },
-      ])
+      const { items, nav } = buildWithItems([{ key: 1 }, { key: 2 }, { key: 3 }])
       nav.setFocus(3)
       await nextTick()
       items.value = [{ key: 1 }, { key: 2 }]
@@ -394,11 +374,7 @@ describe('useKeyboardNav', () => {
     })
 
     it('does not change focus when a non-focused row is removed', async () => {
-      const { items, nav } = buildWithItems([
-        { key: 1 },
-        { key: 2 },
-        { key: 3 },
-      ])
+      const { items, nav } = buildWithItems([{ key: 1 }, { key: 2 }, { key: 3 }])
       nav.setFocus(2)
       await nextTick()
       items.value = [{ key: 2 }, { key: 3 }] // removed row 1
@@ -408,11 +384,7 @@ describe('useKeyboardNav', () => {
 
     it('releases grab when the grabbed row is removed externally', async () => {
       const isReorderMode = ref(true)
-      const items = ref<KeyboardNavViewItem[]>([
-        { key: 1 },
-        { key: 2 },
-        { key: 3 },
-      ])
+      const items = ref<KeyboardNavViewItem[]>([{ key: 1 }, { key: 2 }, { key: 3 }])
       const { options } = buildOptions({
         isReorderMode,
         viewItems: computed(() => items.value),
diff --git a/src/test/composables/useListEditorController.test.ts b/src/test/composables/useListEditorController.test.ts
new file mode 100644
index 00000000..73f40516
--- /dev/null
+++ b/src/test/composables/useListEditorController.test.ts
@@ -0,0 +1,411 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+import { useListEditorController } from '@/labs/listEditor/composables/useListEditorController'
+
+interface Row {
+  id: number | undefined
+  title: string
+  position: number
+}
+
+const setup = (
+  initial: Row[] = [],
+  opts: Partial<Parameters<typeof useListEditorController<Row>>[0]> = {},
+) => {
+  const store = ref<Row[]>(initial.map((r) => ({ ...r })))
+  const h = useListEditorController<Row>({
+    get: () => store.value,
+    set: (v) => (store.value = v),
+    factory: () => ({ id: -99, title: '', position: 0 }),
+    validate: (r) => r.title.length > 0,
+    ...opts,
+  })
+  return { store, h }
+}
+
+type SlugRow = Row & { slug: string }
+
+// Rows keyed by `slug` instead of `id`. Built here rather than inline so the assertions can read
+// `store.value` (vue/no-ref-object-reactivity-loss forbids that in the ref's own scope).
+const setupSlug = (initial: SlugRow[]) => {
+  const store = ref<SlugRow[]>(initial.map((r) => ({ ...r })))
+  const h = useListEditorController<SlugRow>({
+    get: () => store.value,
+    set: (v) => (store.value = v),
+    factory: () => ({ id: -1, title: '', position: 0, slug: '' }),
+    getKey: (i) => i.slug,
+  })
+  return { store, h }
+}
+
+describe('useListEditorController', () => {
+  it('dirty: added row (no baseline) and edited row are unsaved; untouched is clean', () => {
+    const { store, h } = setup([{ id: 1, title: 'a', position: 1 }])
+    expect(h.hasUnsaved.value).toBe(false)
+    store.value = [...store.value, { id: -1, title: 'new', position: 2 }]
+    expect(h.isUnsaved(-1)).toBe(true)
+    expect(h.isUnsaved(1)).toBe(false)
+    store.value[0].title = 'edited'
+    expect(h.isUnsaved(1)).toBe(true)
+  })
+
+  it('reorder does NOT dirty rows (position excluded from the content hash)', () => {
+    const { h } = setup([
+      { id: 1, title: 'a', position: 1 },
+      { id: 2, title: 'b', position: 2 },
+    ])
+    h.moveItem(0, 1) // swap; positions renumber, but only the moved key is flagged
+    expect(h.isUnsaved(1)).toBe(true) // moved
+    expect(h.isUnsaved(2)).toBe(false) // displaced only — stays clean
+  })
+
+  it('BUG-08/BUG-11 delete-bleed: deleting one row does NOT mark the surviving rows unsaved', () => {
+    // Deleting a middle row renumbers the survivors' positions, but position is
+    // excluded from the content hash — so the neighbours must stay clean (no
+    // amber bleed onto siblings). The editor is still dirty overall (a saved row
+    // was removed), but ONLY via the deleted set, not the survivors.
+    const { h } = setup([
+      { id: 1, title: 'a', position: 1 },
+      { id: 2, title: 'b', position: 2 },
+      { id: 3, title: 'c', position: 3 },
+    ])
+    expect(h.hasUnsaved.value).toBe(false)
+    h.deleteItem(2)
+    expect(h.hasUnsaved.value).toBe(true) // a saved row was removed
+    expect(h.isUnsaved(1)).toBe(false) // neighbour above stays clean
+    expect(h.isUnsaved(3)).toBe(false) // neighbour below stays clean (BUG-11)
+    const ch = h.getChanges()
+    expect(ch.deleted.map((r) => r.id)).toEqual([2])
+    expect(ch.updated).toEqual([]) // survivors are NOT reported as edited (BUG-08)
+  })
+
+  it('validate true=valid: invalid blocks save; warning does not', () => {
+    const { h } = setup([{ id: 1, title: '', position: 1 }])
+    expect(h.hasErrors.value).toBe(true)
+    expect(h.invalidKeys.value.has(1)).toBe(true)
+    const warn = setup([{ id: 1, title: 'x', position: 1 }], {
+      validate: () => ({ valid: true, state: 'warning' }),
+    })
+    expect(warn.h.hasErrors.value).toBe(false)
+  })
+
+  it('rowState gates red behind validateAll(); an open row stays clear', () => {
+    const { h } = setup([{ id: 1, title: '', position: 1 }])
+    const row = { id: 1, title: '', position: 1 }
+    expect(h.rowState(row, 1)).toBeNull() // invalid on load, but untouched → no red
+    expect(h.rowState(row, 1, true)).toBeNull() // being edited → no red either
+    expect(h.validateAll()).toBe(false)
+    expect(h.rowState(row, 1)).toBe('invalid') // a save attempt reveals it
+    expect(h.rowState(row, 1, true)).toBe('invalid') // …even while the row is open
+  })
+
+  it('rowState reds an UNSAVED invalid row without any validateAll()', () => {
+    // The other half of the gate: no save attempt here, the row reds purely because it is dirty.
+    const { store, h } = setup([{ id: 1, title: 'a', position: 1 }])
+    expect(h.rowState(store.value[0], 1)).toBeNull() // clean + valid
+    store.value[0].title = '' // now invalid AND unsaved
+    expect(h.rowState(store.value[0], 1)).toBe('invalid')
+    expect(h.rowState(store.value[0], 1, true)).toBeNull() // suppressed while open (still typing)
+  })
+
+  it('rowState shows a warning immediately — no dirty/submitted gate', () => {
+    const { h } = setup([{ id: 1, title: 'x', position: 1 }], {
+      validate: () => ({ valid: true, state: 'warning' }),
+    })
+    const row = { id: 1, title: 'x', position: 1 }
+    expect(h.rowState(row, 1)).toBe('warning') // clean, untouched, never submitted
+    expect(h.rowState(row, 1, true)).toBe('warning') // and while open
+    expect(h.hasErrors.value).toBe(false) // a warning never blocks save
+  })
+
+  it('getPayload renumbers gappy store positions into a clean 1..n series', () => {
+    // The positions are written DIRECTLY into the store and never touched by a controller write —
+    // every addItem/deleteItem/moveItem renumbers as a side effect, so a fixture that has been
+    // through one is ALREADY normalised and can no longer tell a renumbering getPayload from a
+    // no-op one. Keep this test free of controller mutations.
+    const { store, h } = setup([
+      { id: 1, title: 'a', position: 5 },
+      { id: 2, title: 'b', position: 9 },
+      { id: 3, title: 'c', position: 2 },
+    ])
+    expect(h.getPayload().map((r) => r.position)).toEqual([1, 2, 3])
+    expect(h.getPayload().map((r) => r.id)).toEqual([1, 2, 3]) // array order wins, not position order
+    expect(store.value.map((r) => r.position)).toEqual([5, 9, 2]) // non-mutating: the store is untouched
+  })
+
+  it('getPayload applies the position multiplier and honours a custom payload fn', () => {
+    const { h } = setup([
+      { id: 1, title: 'a', position: 5 },
+      { id: 2, title: 'b', position: 9 },
+    ])
+    expect(h.getPayload().map((r) => r.position)).toEqual([1, 2])
+
+    const tenfold = setup(
+      [
+        { id: 1, title: 'a', position: 5 },
+        { id: 2, title: 'b', position: 9 },
+      ],
+      { position: { field: 'position', multiplier: 10 } },
+    )
+    expect(tenfold.h.getPayload().map((r) => r.position)).toEqual([10, 20])
+
+    // `payload` fully replaces the built-in renumber.
+    const custom = setup([{ id: 1, title: 'a', position: 5 }], {
+      payload: (items) => items.map((r) => ({ ...r, title: r.title.toUpperCase() })),
+    })
+    expect(custom.h.getPayload()).toEqual([{ id: 1, title: 'A', position: 5 }])
+  })
+
+  it('getChanges splits added/updated/moved/deleted', () => {
+    const { store, h } = setup([
+      { id: 1, title: 'a', position: 1 },
+      { id: 2, title: 'b', position: 2 },
+      { id: 3, title: 'c', position: 3 },
+    ])
+    h.addItem({ id: -1, title: 'd', position: 0 })
+    store.value[0].title = 'A' // edit row 1
+    h.moveItem(2, 0) // drag row 3 to the top → moved, but its CONTENT is unchanged
+    h.deleteItem(2)
+    const ch = h.getChanges()
+    expect(ch.added.map((r) => r.id)).toEqual([-1])
+    expect(ch.updated.map((r) => r.id)).toEqual([1])
+    expect(ch.moved.map((r) => r.id)).toEqual([3]) // content-invisible: only the declared move set knows
+    expect(ch.deleted.map((r) => r.id)).toEqual([2])
+    expect(ch.reparented).toEqual([]) // flat list — never reparents
+  })
+
+  it('commit backfills id-less saved rows, advances baseline, clears unsaved', () => {
+    const { store, h } = setup([{ id: 1, title: 'a', position: 1 }])
+    h.addItem({ id: -1, title: 'b', position: 2 })
+    expect(h.isUnsaved(-1)).toBe(true) // an ADDED temp row is unsaved (init rows are the baseline)
+    // server echoes saved rows WITHOUT an id (the BUG-06 shape)
+    h.commit([
+      { id: undefined, title: 'a', position: 1 },
+      { id: undefined, title: 'b', position: 2 },
+    ])
+    expect(h.hasUnsaved.value).toBe(false)
+    expect(store.value).toHaveLength(2) // both rows survive the commit — none dropped
+    expect(store.value.map((r) => r.title)).toEqual(['a', 'b'])
+    for (const r of store.value) expect(typeof r.id).toBe('number')
+    expect(store.value[0].id).not.toBe(store.value[1].id)
+  })
+
+  it('reset restores the last committed baseline and clears unsaved', () => {
+    const { store, h } = setup([{ id: 1, title: 'a', position: 1 }])
+    h.addItem({ id: -1, title: 'tmp', position: 2 })
+    store.value[0].title = 'edited'
+    expect(h.hasUnsaved.value).toBe(true)
+    h.reset()
+    expect(h.hasUnsaved.value).toBe(false)
+    expect(store.value).toHaveLength(1)
+    expect(store.value[0].title).toBe('a')
+  })
+
+  // NOTE: there is NO replace mode — an object `next` is ALWAYS `{ ...current, ...next }`. The
+  // previous name ("supports replace, patch, and updater fn") promised one, and the
+  // `next: TItem | Partial<TItem>` signature still implies it. Only the updater fn can replace.
+  it('updateItem merges an object patch (never replaces); an updater fn is applied verbatim', () => {
+    const { store, h } = setup([{ id: 1, title: 'a', position: 1 }])
+    h.updateItem(1, { title: 'patched' })
+    expect(store.value[0].title).toBe('patched')
+    expect(store.value[0].id).toBe(1) // fields the patch omits SURVIVE — a merge, not a swap
+    expect(store.value[0].position).toBe(1)
+
+    // Passing a whole `TItem` is still a merge, not a replace: this is the trap the type implies.
+    h.updateItem(1, { title: 'whole' } as Row)
+    expect(store.value[0]).toEqual({ id: 1, title: 'whole', position: 1 })
+
+    h.updateItem(1, (c) => ({ ...c, title: c.title + '!' }))
+    expect(store.value[0].title).toBe('whole!')
+  })
+
+  it('updateItem on an unknown key is a no-op', () => {
+    const { store, h } = setup([{ id: 1, title: 'a', position: 1 }])
+    h.updateItem(999, { title: 'ghost' })
+    expect(store.value).toEqual([{ id: 1, title: 'a', position: 1 }])
+    expect(h.hasUnsaved.value).toBe(false)
+  })
+
+  it('custom getKey fn: every key-addressed op resolves rows by that field, not by id', () => {
+    // The rows carry NO id on purpose — if the controller fell back to `id`, every key would be
+    // `undefined` and each assertion below would resolve nothing. Negative checks like
+    // `isUnsaved('x') === false` cannot see that (a broken key is simply absent from the set), so
+    // every oracle here is POSITIVE: address a row by its slug and require the effect to land.
+    const { store, h } = setupSlug([
+      { id: undefined, title: 'a', position: 1, slug: 'x' },
+      { id: undefined, title: 'b', position: 2, slug: 'y' },
+    ])
+    expect(h.isUnsaved('x')).toBe(false) // clean load, keyed by slug
+
+    h.updateItem('x', { title: 'edited' }) // found BY slug
+    expect(store.value[0].title).toBe('edited')
+    expect(h.isUnsaved('x')).toBe(true) // and reported unsaved under the slug key
+    expect(h.isUnsaved('y')).toBe(false)
+    expect(h.getChanges().updated.map((r) => r.slug)).toEqual(['x'])
+
+    h.deleteItem('y') // removed BY slug
+    expect(store.value.map((r) => r.slug)).toEqual(['x'])
+    expect(h.getChanges().deleted.map((r) => r.slug)).toEqual(['y'])
+
+    const off = h.registerValidity('x', () => false)
+    expect(h.invalidKeys.value.has('x')).toBe(true) // validity registers under the slug key too
+    off()
+  })
+
+  it('position:false leaves positions alone and makes them count as row content', () => {
+    const store = ref([
+      { id: 1, title: 'a', position: 7 } as Row,
+      { id: 2, title: 'b', position: 3 } as Row,
+    ])
+    const h = useListEditorController<Row>({
+      get: () => store.value,
+      set: (v) => (store.value = v),
+      factory: () => ({ id: -1, title: '', position: 0 }),
+      position: false,
+    })
+    expect(h.getPayload().map((r) => r.position)).toEqual([7, 3]) // not renumbered
+    // Unmanaged position is ordinary content, so editing it DOES dirty the row (the managed
+    // default strips position from the hash so a reorder never lights a row amber).
+    store.value[0].position = 8
+    expect(h.isUnsaved(1)).toBe(true)
+    expect(h.isUnsaved(2)).toBe(false)
+
+    const managed = setup([{ id: 1, title: 'a', position: 7 }])
+    managed.store.value[0].position = 8
+    expect(managed.h.isUnsaved(1)).toBe(false) // managed → position excluded from the hash
+  })
+
+  it('dirtyExclude: an excluded field change does not dirty the row but stays in the payload', () => {
+    const store = ref([{ id: 1, title: 'a', position: 1, points: 0 } as Row & { points: number }])
+    const h = useListEditorController<Row & { points: number }>({
+      get: () => store.value,
+      set: (v) => (store.value = v),
+      factory: () => ({ id: -1, title: '', position: 0, points: 0 }),
+      validate: (r) => r.title.length > 0,
+      dirtyExclude: ['points'],
+    })
+    expect(h.isUnsaved(1)).toBe(false)
+    store.value[0].points = 1 // excluded field → not dirty
+    expect(h.isUnsaved(1)).toBe(false)
+    expect(h.getPayload()[0].points).toBe(1) // but still carried in the payload
+    store.value[0].title = 'b' // a non-excluded field still dirties
+    expect(h.isUnsaved(1)).toBe(true)
+  })
+
+  it('dirtyExclude is reactive: changing the excluded set re-baselines dirty synchronously', () => {
+    const exclude = ref<string[]>([])
+    const store = ref([{ id: 1, title: 'a', position: 1, points: 0 } as Row & { points: number }])
+    const h = useListEditorController<Row & { points: number }>({
+      get: () => store.value,
+      set: (v) => (store.value = v),
+      factory: () => ({ id: -1, title: '', position: 0, points: 0 }),
+      validate: (r) => r.title.length > 0,
+      dirtyExclude: () => exclude.value,
+    })
+    store.value[0].points = 5
+    expect(h.isUnsaved(1)).toBe(true) // points NOT excluded → dirty
+    exclude.value = ['points'] // exclude it reactively (sync watch re-hashes baseline)
+    expect(h.isUnsaved(1)).toBe(false) // now clean — no transient amber
+    exclude.value = [] // and back
+    expect(h.isUnsaved(1)).toBe(true)
+  })
+
+  it('registerValidity escape hatch overrides validate for that row', () => {
+    const { h } = setup([{ id: 1, title: 'ok', position: 1 }])
+    expect(h.invalidKeys.value.has(1)).toBe(false)
+    const off = h.registerValidity(1, () => false) // form reports invalid
+    expect(h.invalidKeys.value.has(1)).toBe(true)
+    off()
+    expect(h.invalidKeys.value.has(1)).toBe(false)
+  })
+
+  it('restoreDeleted un-tombstones a deferred-deleted row (the reorder-Cancel path)', () => {
+    const { h } = setup([
+      { id: 1, title: 'a', position: 1 },
+      { id: 2, title: 'b', position: 2 },
+    ])
+    h.deleteItem(1) // deferred: the row is gone from the list but tombstoned until save
+    expect(h.getChanges().deleted.map((r) => r.id)).toEqual([1])
+    expect(h.unsavedCount.value).toBe(1)
+    expect(h.hasUnsaved.value).toBe(true)
+
+    h.restoreDeleted(1) // Cancel: drop the deletion record
+    expect(h.getChanges().deleted).toEqual([])
+    expect(h.unsavedCount.value).toBe(0)
+    expect(h.hasUnsaved.value).toBe(false) // the tombstone was the ONLY unconfirmed change
+  })
+
+  it('restoreDeleted only clears the named key and ignores unknown keys', () => {
+    const { h } = setup([
+      { id: 1, title: 'a', position: 1 },
+      { id: 2, title: 'b', position: 2 },
+      { id: 3, title: 'c', position: 3 },
+    ])
+    h.deleteItem(1)
+    h.deleteItem(3)
+    h.restoreDeleted(999) // unknown → no-op, must not wipe the set
+    expect(h.getChanges().deleted.map((r) => r.id)).toEqual([1, 3])
+    h.restoreDeleted(1)
+    expect(h.getChanges().deleted.map((r) => r.id)).toEqual([3]) // only row 1 restored
+    expect(h.unsavedCount.value).toBe(1)
+  })
+
+  it('isDirty overrides the default content-diff and is handed the BASELINE row', () => {
+    const store = ref([{ id: 1, title: 'a', position: 1, points: 0 } as Row & { points: number }])
+    const h = useListEditorController<Row & { points: number }>({
+      get: () => store.value,
+      set: (v) => (store.value = v),
+      factory: () => ({ id: -1, title: '', position: 0, points: 0 }),
+      // Only `title` counts. If `saved` were the LIVE row instead of the baseline, this could never
+      // return true — so the title assertion below also pins WHICH row the predicate receives.
+      isDirty: (current, saved) => current.title !== saved?.title,
+    })
+    expect(h.isUnsaved(1)).toBe(false)
+
+    store.value[0].points = 99 // the DEFAULT hash would dirty on this; the custom predicate ignores it
+    expect(h.isUnsaved(1)).toBe(false)
+    expect(h.hasUnsaved.value).toBe(false)
+
+    store.value[0].title = 'b' // the one field the predicate watches
+    expect(h.isUnsaved(1)).toBe(true)
+    expect(h.hasUnsaved.value).toBe(true)
+  })
+
+  it('normalizeSaved rewrites server rows before they become the store AND the baseline', () => {
+    const { store, h } = setup(
+      [
+        { id: 1, title: 'a', position: 1 },
+        { id: 2, title: 'b', position: 2 },
+      ],
+      { normalizeSaved: (rows) => [...rows].sort((a, b) => a.position - b.position) },
+    )
+    // The server echoes the saved rows out of position order.
+    h.commit([
+      { id: 2, title: 'b', position: 2 },
+      { id: 1, title: 'a', position: 1 },
+    ])
+    expect(store.value.map((r) => r.id)).toEqual([1, 2]) // normalized back into position order
+    expect(h.hasUnsaved.value).toBe(false) // …and THAT normalized shape is the new baseline
+  })
+
+  it('commitKey resolves a saved row identity, suppressing the temp-id backfill', () => {
+    // Default: a server row with no id gets a minted temp id (covered above). commitKey lets the
+    // consumer declare the row's identity instead — a NON-nullish result means "this row already has
+    // an identity", so no temp id is minted. Returning nullish falls back to minting.
+    const seen: Array<{ saved: string; previous: string | undefined }> = []
+    const { store, h } = setup([{ id: 1, title: 'a', position: 1 }], {
+      commitKey: (saved, previous) => {
+        seen.push({ saved: saved.title, previous: previous?.title })
+        return saved.title === 'keep' ? 'declared-key' : (undefined as unknown as number)
+      },
+    })
+    h.commit([
+      { id: undefined, title: 'keep', position: 1 },
+      { id: undefined, title: 'mint', position: 2 },
+    ])
+    expect(seen.map((s) => s.saved)).toEqual(['keep', 'mint']) // called per saved row
+    expect(store.value[0].id).toBeUndefined() // identity declared → left exactly as the server sent it
+    expect(typeof store.value[1].id).toBe('number') // nullish → temp id minted
+    expect(store.value[1].id! < 0).toBe(true)
+  })
+})
diff --git a/src/test/composables/useNestedListEditor.test.ts b/src/test/composables/useNestedListEditor.test.ts
index aebba85d..845bdea4 100644
--- a/src/test/composables/useNestedListEditor.test.ts
+++ b/src/test/composables/useNestedListEditor.test.ts
@@ -784,11 +784,7 @@ describe('useNestedListEditor', () => {
 
       const tree: NestedTree<MenuItem> = {
         meta: { dirty: false },
-        children: [
-          node(1, 'A', null, 0, []),
-          node(2, 'B', null, 0, []),
-          node(3, 'C', null, 0, []),
-        ],
+        children: [node(1, 'A', null, 0, []), node(2, 'B', null, 0, []), node(3, 'C', null, 0, [])],
       }
 
       const out = api.recalculatePositions(tree)
@@ -801,10 +797,7 @@ describe('useNestedListEditor', () => {
 
       const tree: NestedTree<MenuItem> = {
         meta: { dirty: false },
-        children: [
-          node(1, 'A', null, 0, [node(11, 'A1', 1, 0, [])]),
-          node(2, 'B', null, 0, []),
-        ],
+        children: [node(1, 'A', null, 0, [node(11, 'A1', 1, 0, [])]), node(2, 'B', null, 0, [])],
       }
       const snapshot = JSON.stringify(tree)
 
diff --git a/src/test/composables/useNestedListEditorController.test.ts b/src/test/composables/useNestedListEditorController.test.ts
new file mode 100644
index 00000000..8b0bb511
--- /dev/null
+++ b/src/test/composables/useNestedListEditorController.test.ts
@@ -0,0 +1,530 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+import { useNestedListEditorController } from '@/labs/listEditor/composables/useNestedListEditorController'
+import type { NestedTree, NestedTreeNode } from '@/labs/listEditor/types/listEditorTypes'
+
+interface Row {
+  id: number | undefined
+  title: string
+  position: number
+  parent: number | null
+}
+
+// Helper for the `Row` fixtures. A separate generic builder (`gnode`) covers the
+// one test that uses an extended row shape (slug), so the common path keeps a
+// tight `Row` type without per-call generic annotations.
+const node = (data: Row, children: NestedTreeNode<Row>[] = []): NestedTreeNode<Row> => ({
+  data,
+  children,
+  meta: { dirty: false },
+})
+const gnode = <T>(data: T, children: NestedTreeNode<T>[] = []): NestedTreeNode<T> => ({
+  data,
+  children,
+  meta: { dirty: false },
+})
+
+// Fixture: Home / News[Sport, Weather] / About (mirrors the component test tree).
+const tree = (): NestedTree<Row> => ({
+  children: [
+    node({ id: 1, title: 'Home', position: 1, parent: null }),
+    node({ id: 2, title: 'News', position: 2, parent: null }, [
+      node({ id: 21, title: 'Sport', position: 1, parent: 2 }),
+      node({ id: 22, title: 'Weather', position: 2, parent: 2 }),
+    ]),
+    node({ id: 3, title: 'About', position: 3, parent: null }),
+  ],
+  meta: { dirty: false },
+})
+
+const setup = (
+  initial: NestedTree<Row> = tree(),
+  opts: Partial<Parameters<typeof useNestedListEditorController<Row>>[0]> = {},
+) => {
+  const store = ref<NestedTree<Row>>(JSON.parse(JSON.stringify(initial)) as NestedTree<Row>)
+  const h = useNestedListEditorController<Row>({
+    get: () => store.value,
+    set: (v) => (store.value = v),
+    factory: () => ({ id: -99, title: '', position: 0, parent: null }),
+    maxDepth: 2,
+    validate: (r) => r.title.length > 0,
+    ...opts,
+  })
+  return { store, h }
+}
+
+type SlugRow = Row & { slug: string }
+
+// Rows keyed by `slug` instead of `id`. Built here rather than inline so the assertions can read
+// `store.value` (vue/no-ref-object-reactivity-loss forbids that in the ref's own scope).
+const setupSlug = (children: NestedTreeNode<SlugRow>[]) => {
+  const store = ref<NestedTree<SlugRow>>({ children, meta: { dirty: false } })
+  const h = useNestedListEditorController<SlugRow>({
+    get: () => store.value,
+    set: (v) => (store.value = v),
+    factory: () => ({ id: -1, title: '', position: 0, parent: null, slug: '' }),
+    getKey: (i) => i.slug,
+    maxDepth: 2,
+  })
+  return { store, h }
+}
+
+describe('useNestedListEditorController', () => {
+  it('items flattens the tree depth-first in render order', () => {
+    const { h } = setup()
+    expect(h.items.value.map((r) => r.id)).toEqual([1, 2, 21, 22, 3])
+  })
+
+  it('dirty: added row (no baseline) and edited row are unsaved; untouched is clean', () => {
+    const { store, h } = setup()
+    expect(h.hasUnsaved.value).toBe(false)
+    // Add a child to News through the handle (a brand-new row → unsaved).
+    h.addChild(2, { id: -1, title: 'New', position: 0, parent: 2 })
+    expect(h.isUnsaved(-1)).toBe(true)
+    expect(h.isUnsaved(1)).toBe(false)
+    // Edit Home in place → its content hash diverges from the baseline.
+    store.value.children[0].data.title = 'Home edited'
+    expect(h.isUnsaved(1)).toBe(true)
+  })
+
+  it('pure position reorder arms the leave guard via hasUnsaved (M2b), without per-row amber', () => {
+    const { h } = setup()
+    expect(h.moveDown(1)).toBe(true) // Home <-> News at root — content + parent unchanged
+    // Per-row `isUnsaved` still excludes pure position renumbers — the editor layers the
+    // actively-moved subtree's amber on top via its reorder-session moved set, so displaced
+    // siblings do NOT light up.
+    expect(h.isUnsaved(1)).toBe(false)
+    // But `hasUnsaved` — which feeds the unsaved-changes leave guard — now DOES fire after a
+    // reorder (was blind: M2b). It survives Apply (meta.dirty persists) and clears on commit.
+    expect(h.hasUnsaved.value).toBe(true)
+    expect(h.items.value.map((r) => r.id)).toEqual([2, 21, 22, 1, 3])
+    // getChanges().moved reports the rows whose position changed (meta.dirty) for persistence.
+    expect(h.getChanges().moved.map((r) => r.id)).toContain(1)
+    // Committing the save re-baselines (meta.dirty cleared) → guard goes clean.
+    h.commit()
+    expect(h.hasUnsaved.value).toBe(false)
+  })
+
+  it('indent reparents and flags dirty even though the position number may be unchanged (BUG-13)', () => {
+    const { store, h } = setup()
+    // About (id=3, pos 3 at root) indented under News becomes News' 3rd child.
+    expect(h.indent(3)).toBe(true)
+    const news = store.value.children.find((n) => n.data.id === 2)!
+    expect(news.children!.map((c) => c.data.id)).toEqual([21, 22, 3])
+    expect(h.isUnsaved(3)).toBe(true)
+    const ch = h.getChanges()
+    expect(ch.reparented.map((r) => r.id)).toContain(3)
+  })
+
+  it("BUG-13: a parent's only/first child dragged out to root lands after the parent, not at index 0", () => {
+    // Mirrors the QA video: testED0 has the single child testED1; testED2..4 at
+    // root. Dragging testED1 out and dropping it just below testED0 (root depth)
+    // → computeInstruction yields moveTo(testED1, null, index=1) = root AFTER the
+    // parent. It must NOT collapse to root index 0 (above the parent).
+    const t: NestedTree<Row> = {
+      children: [
+        node({ id: 1, title: 'ED0', position: 1, parent: null }, [
+          node({ id: 11, title: 'ED1', position: 1, parent: 1 }),
+        ]),
+        node({ id: 2, title: 'ED2', position: 2, parent: null }),
+        node({ id: 3, title: 'ED3', position: 3, parent: null }),
+        node({ id: 4, title: 'ED4', position: 4, parent: null }),
+      ],
+      meta: { dirty: false },
+    }
+    const { store, h } = setup(t)
+    expect(h.moveTo(11, null, 1)).toBe(true)
+    expect(h.items.value.map((r) => r.id)).toEqual([1, 11, 2, 3, 4]) // ED1 after ED0, not before
+    expect(store.value.children[0].children ?? []).toHaveLength(0) // ED0 now childless
+    expect(h.isUnsaved(11)).toBe(true) // reparented → amber + persisted
+  })
+
+  it('BUG-13: the LAST child dragged out to root after its parent lands correctly', () => {
+    const t: NestedTree<Row> = {
+      children: [
+        node({ id: 1, title: 'A', position: 1, parent: null }, [
+          node({ id: 11, title: 'B', position: 1, parent: 1 }),
+          node({ id: 12, title: 'C', position: 2, parent: 1 }),
+        ]),
+        node({ id: 2, title: 'D', position: 2, parent: null }),
+      ],
+      meta: { dirty: false },
+    }
+    const { h } = setup(t)
+    expect(h.moveTo(12, null, 1)).toBe(true) // last child C out, just after parent A
+    expect(h.items.value.map((r) => r.id)).toEqual([1, 11, 12, 2]) // A, B(child), C(root), D
+    expect(h.isUnsaved(12)).toBe(true)
+  })
+
+  it('BUG-13 (root cause): a reparent with UNCHANGED position number is still flagged + persisted', () => {
+    // The crux of the QA-video bug: drag a child OUT (it lands correctly in the
+    // UI) but the reparent keeps the same position NUMBER, so the pre-fix
+    // position-only dirty check omitted it from the save → it reverted on reload
+    // and looked like it "landed in the wrong position". Setup: A (pos1) owns
+    // child B (pos1); C is root pos2. Move C under A as its 2nd child → C's
+    // position stays 2, only its parent changes (null → A). It must still read
+    // unsaved + appear in the change-set + carry the new parent in the payload.
+    const t: NestedTree<Row> = {
+      children: [
+        node({ id: 1, title: 'A', position: 1, parent: null }, [
+          node({ id: 11, title: 'B', position: 1, parent: 1 }),
+        ]),
+        node({ id: 2, title: 'C', position: 2, parent: null }),
+      ],
+      meta: { dirty: false },
+    }
+    const { h } = setup(t)
+    expect(h.moveTo(2, 1, 1)).toBe(true) // C → A's 2nd child
+    const payloadC = h.getPayload().find((row) => row.id === 2)!
+    expect(payloadC.position).toBe(2) // position NUMBER unchanged (the trap)
+    expect(payloadC.parent).toBe(1) // but the new parent is carried for persistence
+    expect(h.isUnsaved(2)).toBe(true) // flagged despite same position number
+    expect(h.getChanges().reparented.map((row) => row.id)).toContain(2)
+    // After the server echoes the saved tree and we re-baseline, C stays put.
+    h.commit()
+    expect(h.isUnsaved(2)).toBe(false)
+    expect(h.items.value.map((row) => row.id)).toEqual([1, 11, 2]) // C remains A's child
+  })
+
+  it('validate true=valid: invalid blocks save; warning does not', () => {
+    const { h } = setup(tree(), { validate: (r) => r.title.length > 0 })
+    expect(h.hasErrors.value).toBe(false)
+    // Empty a title → invalid.
+    const bad = setup(
+      {
+        children: [node({ id: 1, title: '', position: 1, parent: null })],
+        meta: { dirty: false },
+      },
+      { validate: (r) => r.title.length > 0 },
+    )
+    expect(bad.h.hasErrors.value).toBe(true)
+    expect(bad.h.invalidKeys.value.has(1)).toBe(true)
+    const warn = setup(
+      {
+        children: [node({ id: 1, title: 'x', position: 1, parent: null })],
+        meta: { dirty: false },
+      },
+      { validate: () => ({ valid: true, state: 'warning' }) },
+    )
+    expect(warn.h.hasErrors.value).toBe(false)
+  })
+
+  it('rowState gates red behind validateAll(); an open row stays clear', () => {
+    const { h } = setup(
+      {
+        children: [node({ id: 1, title: '', position: 1, parent: null })],
+        meta: { dirty: false },
+      },
+      { validate: (r) => r.title.length > 0 },
+    )
+    const row = { id: 1, title: '', position: 1, parent: null }
+    expect(h.rowState(row, 1)).toBeNull() // invalid on load, but untouched → no red
+    expect(h.rowState(row, 1, true)).toBeNull() // being edited → no red either
+    expect(h.validateAll()).toBe(false)
+    expect(h.rowState(row, 1)).toBe('invalid') // a save attempt reveals it
+    expect(h.rowState(row, 1, true)).toBe('invalid') // …even while the row is open
+  })
+
+  it('rowState reds an UNSAVED invalid row without any validateAll()', () => {
+    const { store, h } = setup(
+      {
+        children: [node({ id: 1, title: 'a', position: 1, parent: null })],
+        meta: { dirty: false },
+      },
+      { validate: (r) => r.title.length > 0 },
+    )
+    const row = store.value.children[0].data
+    expect(h.rowState(row, 1)).toBeNull() // clean + valid
+    row.title = '' // now invalid AND unsaved
+    expect(h.rowState(row, 1)).toBe('invalid')
+    expect(h.rowState(row, 1, true)).toBeNull() // suppressed while open (still typing)
+  })
+
+  it('rowState shows a warning immediately — no dirty/submitted gate', () => {
+    const { h } = setup(
+      {
+        children: [node({ id: 1, title: 'x', position: 1, parent: null })],
+        meta: { dirty: false },
+      },
+      { validate: () => ({ valid: true, state: 'warning' }) },
+    )
+    const row = { id: 1, title: 'x', position: 1, parent: null }
+    expect(h.rowState(row, 1)).toBe('warning') // clean, untouched, never submitted
+    expect(h.rowState(row, 1, true)).toBe('warning') // and while open
+    expect(h.hasErrors.value).toBe(false) // a warning never blocks save
+  })
+
+  it('getPayload flattens ordered rows carrying resolved position + parent key', () => {
+    const { h } = setup()
+    h.moveDown(1) // reshuffle root order → positions renumber
+    const payload = h.getPayload()
+    expect(payload.map((r) => r.id)).toEqual([2, 21, 22, 1, 3])
+    // Root rows carry parent=null; News' children carry parent=2 (News' key).
+    const sport = payload.find((r) => r.id === 21)!
+    expect(sport.parent).toBe(2)
+    expect(sport.position).toBe(1)
+    const aboutNow = payload.find((r) => r.id === 3)!
+    expect(aboutNow.parent).toBe(null)
+  })
+
+  it('getChanges splits added/updated/deleted', () => {
+    const { store, h } = setup()
+    h.addChild(1, { id: -1, title: 'Sub', position: 0, parent: 1 }) // new under Home
+    store.value.children[2].data.title = 'About!' // edit About
+    h.deleteItem(21) // remove Sport (a previously-saved row)
+    const ch = h.getChanges()
+    expect(ch.added.map((r) => r.id)).toEqual([-1])
+    expect(ch.updated.map((r) => r.id)).toEqual([3])
+    expect(ch.deleted.map((r) => r.id)).toEqual([21])
+  })
+
+  it('commit backfills id-less saved rows, advances baseline, clears unsaved', () => {
+    const { h } = setup()
+    h.addChild(1, { id: -1, title: 'Sub', position: 0, parent: 1 })
+    expect(h.isUnsaved(-1)).toBe(true)
+    // Server echoes the saved tree WITHOUT ids on the new rows.
+    const saved: NestedTree<Row> = {
+      children: [
+        node({ id: undefined, title: 'Home', position: 1, parent: null }, [
+          node({ id: undefined, title: 'Sub', position: 1, parent: null }),
+        ]),
+      ],
+      meta: { dirty: false },
+    }
+    h.commit(saved)
+    expect(h.hasUnsaved.value).toBe(false)
+    for (const r of h.items.value) expect(typeof r.id).toBe('number')
+    expect(h.items.value[0].id).not.toBe(h.items.value[1].id)
+  })
+
+  it('commit (no arg) re-baselines the current tree and clears meta.dirty', () => {
+    const { store, h } = setup()
+    h.indent(3) // reparent About under News — genuinely unsaved (parent changed)
+    expect(h.hasUnsaved.value).toBe(true)
+    h.commit()
+    expect(h.hasUnsaved.value).toBe(false)
+    // meta.dirty cleared across the tree.
+    const allClean = (): boolean => {
+      let clean = true
+      const walk = (nodes: typeof store.value.children) => {
+        for (const n of nodes) {
+          if (n.meta.dirty) clean = false
+          if (n.children?.length) walk(n.children)
+        }
+      }
+      walk(store.value.children)
+      return clean
+    }
+    expect(allClean()).toBe(true)
+  })
+
+  it('reset restores the last committed baseline and clears unsaved', () => {
+    const { store, h } = setup()
+    h.addChild(1, { id: -1, title: 'tmp', position: 0, parent: 1 })
+    store.value.children[0].data.title = 'edited'
+    expect(h.hasUnsaved.value).toBe(true)
+    h.reset()
+    expect(h.hasUnsaved.value).toBe(false)
+    expect(h.items.value.map((r) => r.id)).toEqual([1, 2, 21, 22, 3])
+    expect(store.value.children[0].data.title).toBe('Home')
+  })
+
+  it('custom getKey fn: every key-addressed op resolves rows by that field, not by id', () => {
+    // The rows carry NO id on purpose — if the controller fell back to `id`, every key would be
+    // `undefined`. A negative check like `isUnsaved('x') === false` cannot see that (a broken key is
+    // simply absent from the set), so every oracle here is POSITIVE: address a row by its slug and
+    // require the effect to land.
+    const { store, h } = setupSlug([
+      gnode({ id: undefined, title: 'a', position: 1, parent: null, slug: 'x' }),
+      gnode({ id: undefined, title: 'b', position: 2, parent: null, slug: 'y' }),
+    ])
+    expect(h.isUnsaved('x')).toBe(false) // clean load, keyed by slug
+
+    h.updateItem('x', { id: undefined, title: 'edited', position: 1, parent: null, slug: 'x' })
+    expect(store.value.children[0].data.title).toBe('edited') // found BY slug
+    expect(h.isUnsaved('x')).toBe(true) // and reported unsaved UNDER the slug key
+    expect(h.isUnsaved('y')).toBe(false)
+    expect(h.getChanges().updated.map((r) => r.slug)).toEqual(['x'])
+
+    h.addChild('x', { id: undefined, title: 'kid', position: 1, parent: null, slug: 'k' })
+    expect(store.value.children[0].children!.map((c) => c.data.slug)).toEqual(['k']) // parent by slug
+    expect(h.isUnsaved('k')).toBe(true)
+
+    h.deleteItem('y') // removed BY slug
+    expect(h.items.value.map((r) => r.slug)).toEqual(['x', 'k'])
+    expect(h.getChanges().deleted.map((r) => r.slug)).toEqual(['y'])
+
+    const off = h.registerValidity('x', () => false)
+    expect(h.invalidKeys.value.has('x')).toBe(true) // validity registers under the slug key too
+    off()
+  })
+
+  it('position:false makes the position field count as row content', () => {
+    // What `position: false` actually changes in the NESTED controller is the dirty content hash:
+    // an unmanaged position is ordinary data, so editing it IS an edit. (It does NOT stop the tree
+    // renumbering — see the report/KNOWN ISSUE: useNestedListEditor.recalculateSiblings still
+    // rewrites the field. The old name here, "no renumber on payload", described neither: the
+    // nested buildPayload never renumbers under ANY position option.)
+    const build = (unmanaged: boolean) => {
+      const store = ref<NestedTree<Row>>({
+        children: [
+          node({ id: 1, title: 'a', position: 1, parent: null }),
+          node({ id: 2, title: 'b', position: 2, parent: null }),
+        ],
+        meta: { dirty: false },
+      })
+      const h = useNestedListEditorController<Row>({
+        get: () => store.value,
+        set: (v) => (store.value = v),
+        maxDepth: 2,
+        ...(unmanaged ? { position: false as const } : {}),
+      })
+      return { store, h }
+    }
+
+    const off = build(true)
+    off.store.value.children[0].data.position = 99
+    expect(off.h.isUnsaved(1)).toBe(true) // unmanaged → position is content → dirty
+    expect(off.h.isUnsaved(2)).toBe(false)
+
+    const on = build(false)
+    on.store.value.children[0].data.position = 99
+    expect(on.h.isUnsaved(1)).toBe(false) // managed → stripped from the hash → a reorder never ambers
+  })
+
+  it('getPayload never renumbers: positions come from the tree ops, not the payload build', () => {
+    // Distinct from the FLAT controller, whose getPayload DOES renumber. Here the positions in the
+    // payload are whatever the tree last wrote — a gappy store comes back gappy.
+    const store = ref<NestedTree<Row>>({
+      children: [
+        node({ id: 1, title: 'a', position: 7, parent: null }),
+        node({ id: 2, title: 'b', position: 30, parent: null }),
+      ],
+      meta: { dirty: false },
+    })
+    const h = useNestedListEditorController<Row>({
+      get: () => store.value,
+      set: (v) => (store.value = v),
+      maxDepth: 2,
+    })
+    expect(h.getPayload().map((r) => r.position)).toEqual([7, 30]) // untouched, NOT 1/2
+    h.moveDown(1) // a tree op DOES renumber (that is where positions come from)
+    expect(h.getPayload().map((r) => [r.id, r.position])).toEqual([
+      [2, 1],
+      [1, 2],
+    ])
+  })
+
+  it('registerValidity escape hatch overrides validate for that row', () => {
+    const { h } = setup()
+    expect(h.invalidKeys.value.has(1)).toBe(false)
+    const off = h.registerValidity(1, () => false) // form reports invalid
+    expect(h.invalidKeys.value.has(1)).toBe(true)
+    off()
+    expect(h.invalidKeys.value.has(1)).toBe(false)
+  })
+
+  it('restoreDeleted un-tombstones a deferred-deleted row (the reorder-Cancel path)', () => {
+    const { h } = setup()
+    // Delete the LAST root row: removing it renumbers no sibling, so the tombstone is the only
+    // pending change and `hasUnsaved` can prove it was cleared. (Deleting a middle row would leave
+    // `hasPendingMove` true via the survivors' recalculated positions — correctly so.)
+    h.deleteItem(3) // deferred: About is gone from the tree but tombstoned until save
+    expect(h.getChanges().deleted.map((r) => r.id)).toEqual([3])
+    expect(h.unsavedCount.value).toBe(1)
+    expect(h.hasUnsaved.value).toBe(true)
+
+    h.restoreDeleted(3) // Cancel: drop the deletion record
+    expect(h.getChanges().deleted).toEqual([])
+    expect(h.unsavedCount.value).toBe(0)
+    expect(h.hasUnsaved.value).toBe(false) // the tombstone was the ONLY unconfirmed change
+  })
+
+  it('restoreDeleted only clears the named key and ignores unknown keys', () => {
+    const { h } = setup()
+    h.deleteItem(21)
+    h.deleteItem(3)
+    h.restoreDeleted(999) // unknown → no-op, must not wipe the set
+    expect(h.getChanges().deleted.map((r) => r.id)).toEqual([21, 3])
+    h.restoreDeleted(21)
+    expect(h.getChanges().deleted.map((r) => r.id)).toEqual([3])
+    expect(h.unsavedCount.value).toBe(1)
+  })
+
+  it('isDirty overrides the default content-diff and is handed the BASELINE row', () => {
+    // `points` is the discriminator: the DEFAULT nested hash strips position + parent, so editing
+    // either of those proves nothing about the override — only a field the default WOULD catch does.
+    const store = ref<NestedTree<Row & { points: number }>>({
+      children: [gnode({ id: 1, title: 'Home', position: 1, parent: null, points: 0 })],
+      meta: { dirty: false },
+    })
+    const h = useNestedListEditorController<Row & { points: number }>({
+      get: () => store.value,
+      set: (v) => (store.value = v),
+      maxDepth: 2,
+      // Only `title` counts. If `saved` were the LIVE row instead of the baseline, this could never
+      // return true — so the title assertion below also pins WHICH row the predicate receives.
+      isDirty: (current, saved) => current.title !== saved?.title,
+    })
+    expect(h.isUnsaved(1)).toBe(false)
+
+    store.value.children[0].data.points = 99 // the DEFAULT hash WOULD dirty on this…
+    expect(h.isUnsaved(1)).toBe(false) // …the custom predicate ignores everything but title
+    expect(h.hasUnsaved.value).toBe(false)
+
+    store.value.children[0].data.title = 'Home!' // the one field the predicate watches
+    expect(h.isUnsaved(1)).toBe(true)
+    expect(h.hasUnsaved.value).toBe(true)
+  })
+
+  it('normalizeSaved rewrites the server tree before it becomes the store AND the baseline', () => {
+    const { store, h } = setup(tree(), {
+      normalizeSaved: (saved) => ({
+        ...saved,
+        children: [...saved.children].sort((a, b) => a.data.position - b.data.position),
+      }),
+    })
+    // The server echoes the root rows out of position order.
+    h.commit({
+      children: [
+        node({ id: 3, title: 'About', position: 3, parent: null }),
+        node({ id: 1, title: 'Home', position: 1, parent: null }),
+      ],
+      meta: { dirty: false },
+    })
+    expect(store.value.children.map((n) => n.data.id)).toEqual([1, 3]) // sorted back by position
+    expect(h.hasUnsaved.value).toBe(false) // …and THAT normalized shape is the new baseline
+  })
+
+  it('commitKey resolves a saved row identity, suppressing the temp-id backfill', () => {
+    const seen: string[] = []
+    const { store, h } = setup(tree(), {
+      commitKey: (saved) => {
+        seen.push(saved.title)
+        return saved.title === 'keep' ? 'declared-key' : (undefined as unknown as number)
+      },
+    })
+    h.commit({
+      children: [
+        node({ id: undefined, title: 'keep', position: 1, parent: null }),
+        node({ id: undefined, title: 'mint', position: 2, parent: null }),
+      ],
+      meta: { dirty: false },
+    })
+    expect(seen).toEqual(['keep', 'mint']) // called per saved row
+    expect(store.value.children[0].data.id).toBeUndefined() // identity declared → left as sent
+    expect(typeof store.value.children[1].data.id).toBe('number') // nullish → temp id minted
+    expect(store.value.children[1].data.id! < 0).toBe(true)
+  })
+
+  it('addItem with no factory + no item is a no-op (read-only tree)', () => {
+    const store = ref<NestedTree<Row>>(tree())
+    const h = useNestedListEditorController<Row>({
+      get: () => store.value,
+      set: (v) => (store.value = v),
+      maxDepth: 2,
+    })
+    h.addItem() // no factory configured
+    expect(h.items.value).toHaveLength(5)
+  })
+})
diff --git a/src/test/composables/useNestedUnsavedKeys.test.ts b/src/test/composables/useNestedUnsavedKeys.test.ts
index 6859064f..c13d77aa 100644
--- a/src/test/composables/useNestedUnsavedKeys.test.ts
+++ b/src/test/composables/useNestedUnsavedKeys.test.ts
@@ -1,4 +1,3 @@
-/* eslint-disable vue/no-ref-object-reactivity-loss */
 import { describe, expect, it } from 'vitest'
 import { useNestedUnsavedKeys } from '@/labs/listEditor/composables/useNestedUnsavedKeys'
 
diff --git a/src/test/composables/useUnsavedChangesGuard.test.ts b/src/test/composables/useUnsavedChangesGuard.test.ts
index 52db1eab..624a3b91 100644
--- a/src/test/composables/useUnsavedChangesGuard.test.ts
+++ b/src/test/composables/useUnsavedChangesGuard.test.ts
@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { mount, type VueWrapper } from '@vue/test-utils'
-import { defineComponent, h, nextTick, ref } from 'vue'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref, unref, type Ref } from 'vue'
+import { createMemoryHistory, createRouter, RouterView } from 'vue-router'
 import { useUnsavedChangesGuard } from '@/labs/unsavedGuard/useUnsavedChangesGuard'
 
 let mounted: VueWrapper | null = null
@@ -8,11 +9,10 @@ let mounted: VueWrapper | null = null
 afterEach(() => {
   mounted?.unmount()
   mounted = null
+  vi.useRealTimers()
 })
 
-const mountWithGuard = (
-  setup: () => ReturnType<typeof useUnsavedChangesGuard>,
-) => {
+const mountWithGuard = (setup: () => ReturnType<typeof useUnsavedChangesGuard>) => {
   let api!: ReturnType<typeof useUnsavedChangesGuard>
   const Host = defineComponent({
     setup() {
@@ -177,7 +177,7 @@ describe('useUnsavedChangesGuard', () => {
       expect(preventSpy).not.toHaveBeenCalled()
     })
 
-    it('removes the listener on unmount', () => {
+    it('removes the SAME listener reference it added on unmount', () => {
       const { host } = mountWithGuard(() =>
         useUnsavedChangesGuard({
           sources: [ref(true)],
@@ -185,25 +185,187 @@ describe('useUnsavedChangesGuard', () => {
           guardWindowUnload: true,
         }),
       )
+      // Capture the exact handler that was added. `expect.any(Function)` would match a DIFFERENT
+      // reference too — i.e. the classic leak where the removal silently detaches nothing.
+      const added = addSpy.mock.calls.find((c: unknown[]) => c[0] === 'beforeunload')?.[1]
+      expect(typeof added).toBe('function')
       host.unmount()
       mounted = null
-      expect(removeSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function))
+      expect(removeSpy).toHaveBeenCalledWith('beforeunload', added)
     })
   })
 
   describe('acknowledge', () => {
-    it('makes the next ask resolve immediately as discard', async () => {
-      const { api } = mountWithGuard(() =>
+    // (A prior "prompt stays closed after acknowledge()" test was removed: `promptOpen` is false
+    // without acknowledge() too, so it proved nothing. The dialog-close path below actually consumes
+    // the acknowledgement.)
+
+    // The dialog-close watch is the unit-testable consume path for `askToLeave` (route-leave needs a
+    // real router). A dirty dialog closing while acknowledged passes silently; otherwise it re-opens
+    // and prompts.
+    const mountDialogGuard = (dialogModel: Ref<boolean>) =>
+      mountWithGuard(() =>
         useUnsavedChangesGuard({
           sources: [ref(true)],
           guardRoute: false,
           guardWindowUnload: false,
+          guardDialogModel: dialogModel,
         }),
       )
+
+    it('lets a dirty dialog-close pass without prompting once acknowledged', async () => {
+      const dialogModel = ref(true)
+      const { api } = mountDialogGuard(dialogModel)
       api.acknowledge()
-      // After acknowledge, the prompt should never open even if hasUnsavedChanges.
-      // Simulate by setting promptOpen and confirming it doesn't latch.
+      dialogModel.value = false
+      await nextTick()
+      await nextTick()
       expect(api.promptOpen.value).toBe(false)
+      expect(unref(dialogModel)).toBe(false) // closed, not re-opened
     })
+
+    it('auto-expires the acknowledgement after the TTL (M1 — a failed delete stays guarded)', async () => {
+      const dialogModel = ref(true)
+      const { api } = mountDialogGuard(dialogModel)
+      vi.useFakeTimers()
+      api.acknowledge()
+      vi.advanceTimersByTime(8001) // TTL elapsed with nothing consuming it (delete never navigated)
+      dialogModel.value = false
+      await nextTick()
+      await nextTick()
+      expect(api.promptOpen.value).toBe(true) // now prompts — the stale acknowledge expired
+      expect(unref(dialogModel)).toBe(true) // re-opened, awaiting the user's choice
+    })
+
+    it('unacknowledge disarms a pending acknowledgement immediately (M1 failure path)', async () => {
+      const dialogModel = ref(true)
+      const { api } = mountDialogGuard(dialogModel)
+      api.acknowledge()
+      api.unacknowledge()
+      dialogModel.value = false
+      await nextTick()
+      await nextTick()
+      expect(api.promptOpen.value).toBe(true) // disarmed → prompts
+    })
+
+    // A consumed acknowledgement cannot produce a "spurious later expiry" through the public API:
+    // the TTL callback only writes `acknowledgedOnce = false`, and any FRESH acknowledge() re-clears
+    // the pending timer before arming its own — so a stale timer can never disarm a later
+    // acknowledgement (verified: the consume→re-arm→advance-past-the-first-deadline shape passes
+    // WITH the clear deleted). What the clear does buy is real but narrower: no leaked pending timer.
+    // `vi.getTimerCount()` is the only oracle that can see it, and it does kill that mutant.
+    it('a consumed acknowledgement leaves no pending TTL timer behind', async () => {
+      const dialogModel = ref(true)
+      const { api } = mountDialogGuard(dialogModel)
+      vi.useFakeTimers()
+      expect(vi.getTimerCount()).toBe(0)
+      api.acknowledge()
+      expect(vi.getTimerCount()).toBe(1) // TTL armed
+      dialogModel.value = false // consume it (a dirty close passes silently)
+      await nextTick()
+      await nextTick()
+      expect(api.promptOpen.value).toBe(false)
+      expect(vi.getTimerCount()).toBe(0) // consumed → cleared, not left pending
+    })
+
+    it('re-arming acknowledge() restarts the TTL: the FIRST deadline must not disarm the fresh one', async () => {
+      const dialogModel = ref(true)
+      const { api } = mountDialogGuard(dialogModel)
+      vi.useFakeTimers()
+      api.acknowledge()
+      vi.advanceTimersByTime(5000) // 5s into the first acknowledgement's 8s TTL
+      api.acknowledge() // re-arm → the TTL restarts here (deadline moves to t=13s)
+      vi.advanceTimersByTime(4000) // t=9s: past the FIRST deadline, short of the fresh one
+      dialogModel.value = false
+      await nextTick()
+      await nextTick()
+      expect(api.promptOpen.value).toBe(false) // the fresh acknowledgement is still live
+      expect(unref(dialogModel)).toBe(false) // closed, not re-opened
+    })
+  })
+})
+
+// The route-leave guard (onBeforeRouteLeave) is the PRIMARY mechanism — the dialog-close tests above
+// only exercise askToLeave's consume path. This harness mounts the guard as a real route component and
+// drives actual navigations. (C10 — codex test-review gap.)
+describe('useUnsavedChangesGuard — route-leave guard (router harness)', () => {
+  let routed: VueWrapper | null = null
+  afterEach(() => {
+    routed?.unmount()
+    routed = null
+  })
+
+  const mountRouted = (dirty: Ref<boolean>) => {
+    let api!: ReturnType<typeof useUnsavedChangesGuard>
+    const Guarded = defineComponent({
+      setup() {
+        api = useUnsavedChangesGuard({ sources: [dirty], guardWindowUnload: false })
+        return () => h('div', 'guarded')
+      },
+    })
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', component: Guarded },
+        { path: '/other', component: defineComponent({ setup: () => () => h('div', 'other') }) },
+      ],
+    })
+    routed = mount(defineComponent({ setup: () => () => h(RouterView) }), {
+      global: { plugins: [router] },
+    })
+    return { router, api: () => api }
+  }
+
+  it('blocks a dirty route-leave (prompt opens, navigation held) and proceeds only on discard', async () => {
+    const dirty = ref(true)
+    const { router, api } = mountRouted(dirty)
+    await router.isReady()
+    await flushPromises()
+
+    // Navigate away while dirty → onBeforeRouteLeave opens the prompt and holds the navigation on '/'.
+    const nav = router.push('/other')
+    await flushPromises()
+    expect(api().promptOpen.value).toBe(true)
+    expect(router.currentRoute.value.path).toBe('/')
+
+    // "Stay" → the navigation aborts.
+    api().resolvePrompt(false)
+    await nav
+    await flushPromises()
+    expect(router.currentRoute.value.path).toBe('/')
+
+    // Try again, "discard" → the navigation proceeds.
+    const nav2 = router.push('/other')
+    await flushPromises()
+    expect(api().promptOpen.value).toBe(true)
+    api().resolvePrompt(true)
+    await nav2
+    await flushPromises()
+    expect(router.currentRoute.value.path).toBe('/other')
+  })
+
+  it('a clean route-leave passes without prompting', async () => {
+    const dirty = ref(false)
+    const { router, api } = mountRouted(dirty)
+    await router.isReady()
+    await flushPromises()
+
+    await router.push('/other')
+    await flushPromises()
+    expect(api().promptOpen.value).toBe(false)
+    expect(router.currentRoute.value.path).toBe('/other')
+  })
+
+  it('acknowledge() lets the next dirty route-leave through without prompting', async () => {
+    const dirty = ref(true)
+    const { router, api } = mountRouted(dirty)
+    await router.isReady()
+    await flushPromises()
+
+    api().acknowledge()
+    await router.push('/other')
+    await flushPromises()
+    expect(api().promptOpen.value).toBe(false)
+    expect(router.currentRoute.value.path).toBe('/other')
   })
 })
diff --git a/src/test/composables/useUnsavedKeysSync.test.ts b/src/test/composables/useUnsavedKeysSync.test.ts
deleted file mode 100644
index 2c092fcc..00000000
--- a/src/test/composables/useUnsavedKeysSync.test.ts
+++ /dev/null
@@ -1,267 +0,0 @@
-/* eslint-disable vue/no-ref-object-reactivity-loss */
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { mount, type VueWrapper } from '@vue/test-utils'
-import { computed, defineComponent, h, nextTick, ref } from 'vue'
-import { useUnsavedKeysSync } from '@/labs/listEditor/composables/useUnsavedKeysSync'
-import type { ListEditorKey } from '@/labs/listEditor/types/listEditorTypes'
-
-let mounted: VueWrapper | null = null
-
-afterEach(() => {
-  mounted?.unmount()
-  mounted = null
-})
-
-const mountWithSync = (
-  setup: () => ReturnType<typeof useUnsavedKeysSync>,
-) => {
-  let api!: ReturnType<typeof useUnsavedKeysSync>
-  const Host = defineComponent({
-    setup() {
-      api = setup()
-      return () => h('div')
-    },
-  })
-  mounted = mount(Host)
-  return api
-}
-
-describe('useUnsavedKeysSync', () => {
-  describe('hasUnsavedChanges + unsavedCount', () => {
-    it('mirror the internal set (empty + non-empty)', () => {
-      const source = ref<ListEditorKey[]>([])
-      const internal = computed<Set<ListEditorKey>>(
-        () => new Set(source.value),
-      )
-      const model = ref(new Set<ListEditorKey>())
-      const api = mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll: vi.fn(),
-          onClearKey: vi.fn(),
-        }),
-      )
-      expect(api.hasUnsavedChanges.value).toBe(false)
-      expect(api.unsavedCount.value).toBe(0)
-      source.value = [1, 2, 3]
-      expect(api.hasUnsavedChanges.value).toBe(true)
-      expect(api.unsavedCount.value).toBe(3)
-    })
-  })
-
-  describe('internal → external sync', () => {
-    it('writes a fresh Set into the model on initial mount when internal is non-empty', async () => {
-      const source = ref<ListEditorKey[]>([1, 2])
-      const internal = computed<Set<ListEditorKey>>(
-        () => new Set(source.value),
-      )
-      const model = ref(new Set<ListEditorKey>())
-      mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll: vi.fn(),
-          onClearKey: vi.fn(),
-        }),
-      )
-      // immediate watcher runs
-      await nextTick()
-      expect([...model.value]).toEqual([1, 2])
-    })
-
-    it('updates model when internal grows', async () => {
-      const source = ref<ListEditorKey[]>([])
-      const internal = computed<Set<ListEditorKey>>(
-        () => new Set(source.value),
-      )
-      const model = ref(new Set<ListEditorKey>())
-      mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll: vi.fn(),
-          onClearKey: vi.fn(),
-        }),
-      )
-      await nextTick()
-      expect(model.value.size).toBe(0)
-      source.value = [1]
-      await nextTick()
-      expect([...model.value]).toEqual([1])
-      source.value = [1, 2, 3]
-      await nextTick()
-      expect([...model.value]).toEqual([1, 2, 3])
-    })
-
-    it('updates model when internal shrinks', async () => {
-      const source = ref<ListEditorKey[]>([1, 2, 3])
-      const internal = computed<Set<ListEditorKey>>(
-        () => new Set(source.value),
-      )
-      const model = ref(new Set<ListEditorKey>())
-      mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll: vi.fn(),
-          onClearKey: vi.fn(),
-        }),
-      )
-      await nextTick()
-      source.value = [1]
-      await nextTick()
-      expect([...model.value]).toEqual([1])
-    })
-
-    it('does NOT trigger a model write when the new internal set equals the model', async () => {
-      const source = ref<ListEditorKey[]>([1, 2])
-      const internal = computed<Set<ListEditorKey>>(
-        () => new Set(source.value),
-      )
-      const model = ref(new Set<ListEditorKey>([1, 2]))
-      const initialModelRef = model.value
-      mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll: vi.fn(),
-          onClearKey: vi.fn(),
-        }),
-      )
-      await nextTick()
-      // Same Set identity preserved when contents match — proves the
-      // setsEqual short-circuit works.
-      expect(model.value).toBe(initialModelRef)
-    })
-  })
-
-  describe('external → internal: full clear', () => {
-    it('calls onClearAll when consumer sets model to empty Set while internal is non-empty', async () => {
-      // Production-realistic initial state: internal is empty at mount (the
-      // editor's dirty baseline is captured at construct time, so isItemDirty
-      // returns false for all rows initially). Then a user action grows
-      // internal, and the consumer later clears the model after a save.
-      const source = ref<ListEditorKey[]>([])
-      const internal = computed<Set<ListEditorKey>>(
-        () => new Set(source.value),
-      )
-      const model = ref(new Set<ListEditorKey>())
-      const onClearAll = vi.fn()
-      const onClearKey = vi.fn()
-      mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll,
-          onClearKey,
-        }),
-      )
-      await nextTick()
-      // Internal grows: editor → model sync runs, suppressNext set + cleared.
-      source.value = [1, 2]
-      await nextTick()
-      expect(model.value.size).toBe(2)
-      // Consumer clears the model (e.g. after a successful save).
-      model.value = new Set()
-      await nextTick()
-      expect(onClearAll).toHaveBeenCalledTimes(1)
-      expect(onClearKey).not.toHaveBeenCalled()
-    })
-
-    it('does NOT call onClearAll when the model write came from the internal sync', async () => {
-      const source = ref<ListEditorKey[]>([])
-      const internal = computed<Set<ListEditorKey>>(
-        () => new Set(source.value),
-      )
-      const model = ref(new Set<ListEditorKey>())
-      const onClearAll = vi.fn()
-      mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll,
-          onClearKey: vi.fn(),
-        }),
-      )
-      await nextTick()
-      // Internal grows → suppressNext is set → model watcher should NO-OP
-      // when it sees the resulting model write.
-      source.value = [1, 2]
-      await nextTick()
-      expect(onClearAll).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('external → internal: per-key clear', () => {
-    it('calls onClearKey for each key removed from the model that was internal-present', async () => {
-      const source = ref<ListEditorKey[]>([])
-      const internal = computed<Set<ListEditorKey>>(
-        () => new Set(source.value),
-      )
-      const model = ref(new Set<ListEditorKey>())
-      const onClearAll = vi.fn()
-      const onClearKey = vi.fn()
-      mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll,
-          onClearKey,
-        }),
-      )
-      await nextTick()
-      // Grow internal first (suppressed sync writes the model).
-      source.value = [1, 2, 3]
-      await nextTick()
-      expect(model.value.size).toBe(3)
-      // Consumer drops keys 1 and 2 from the model (e.g., per-row baseline
-      // reset) while keeping 3.
-      model.value = new Set([3])
-      await nextTick()
-      expect(onClearAll).not.toHaveBeenCalled()
-      expect(onClearKey).toHaveBeenCalledTimes(2)
-      const calledWith = onClearKey.mock.calls.map((c) => c[0]).sort()
-      expect(calledWith).toEqual([1, 2])
-    })
-  })
-
-  describe('clearUnsavedState imperative API', () => {
-    it('clearUnsavedState() with no key calls onClearAll', () => {
-      const internal = computed<Set<ListEditorKey>>(() => new Set([1]))
-      const model = ref(new Set<ListEditorKey>())
-      const onClearAll = vi.fn()
-      const onClearKey = vi.fn()
-      const api = mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll,
-          onClearKey,
-        }),
-      )
-      api.clearUnsavedState()
-      expect(onClearAll).toHaveBeenCalledTimes(1)
-      expect(onClearKey).not.toHaveBeenCalled()
-    })
-
-    it('clearUnsavedState(key) calls onClearKey with that key', () => {
-      const internal = computed<Set<ListEditorKey>>(() => new Set([1, 2]))
-      const model = ref(new Set<ListEditorKey>())
-      const onClearAll = vi.fn()
-      const onClearKey = vi.fn()
-      const api = mountWithSync(() =>
-        useUnsavedKeysSync({
-          unsavedKeysModel: model,
-          internalUnsavedKeys: internal,
-          onClearAll,
-          onClearKey,
-        }),
-      )
-      api.clearUnsavedState(2)
-      expect(onClearKey).toHaveBeenCalledTimes(1)
-      expect(onClearKey).toHaveBeenCalledWith(2)
-      expect(onClearAll).not.toHaveBeenCalled()
-    })
-  })
-})
diff --git a/src/test/composables/useValidationRegistry.test.ts b/src/test/composables/useValidationRegistry.test.ts
deleted file mode 100644
index 57f9452a..00000000
--- a/src/test/composables/useValidationRegistry.test.ts
+++ /dev/null
@@ -1,306 +0,0 @@
-/* eslint-disable vue/no-ref-object-reactivity-loss */
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { mount, type VueWrapper } from '@vue/test-utils'
-import { computed, defineComponent, h, inject, nextTick, ref } from 'vue'
-import { useValidationRegistry } from '@/labs/listEditor/composables/useValidationRegistry'
-import {
-  useListEditorItemValidation,
-  ListEditorValidationKey,
-  type ListEditorValidationRegistry,
-} from '@/labs/listEditor/composables/useListEditorItemValidation'
-import type {
-  ListEditorKey,
-  ListEditorValidationState,
-} from '@/labs/listEditor/types/listEditorTypes'
-
-interface Item {
-  id: number
-  title: string
-  validationState?: ListEditorValidationState
-}
-
-let mounted: VueWrapper | null = null
-
-afterEach(() => {
-  mounted?.unmount()
-  mounted = null
-})
-
-const mountWithRegistry = (
-  options: Parameters<typeof useValidationRegistry<Item>>[0],
-) => {
-  let api!: ReturnType<typeof useValidationRegistry<Item>>
-  const Host = defineComponent({
-    setup() {
-      api = useValidationRegistry<Item>(options)
-      return () => h('div')
-    },
-  })
-  mounted = mount(Host)
-  return api
-}
-
-describe('useValidationRegistry', () => {
-  describe('priority order: registry → prop → raw', () => {
-    it('returns null when nothing flagged', () => {
-      const api = mountWithRegistry({})
-      const result = api.resolveValidation({ id: 1, title: 'A' }, 1, 0)
-      expect(result).toBeNull()
-    })
-
-    it('uses raw.validationState when nothing else is set', () => {
-      const api = mountWithRegistry({})
-      const result = api.resolveValidation(
-        { id: 1, title: 'A', validationState: 'invalid' },
-        1,
-        0,
-      )
-      expect(result).toBe('invalid')
-    })
-
-    it('prop callback wins over raw.validationState', () => {
-      const api = mountWithRegistry({
-        getValidationState: () => 'warning',
-      })
-      const result = api.resolveValidation(
-        { id: 1, title: 'A', validationState: 'invalid' },
-        1,
-        0,
-      )
-      expect(result).toBe('warning')
-    })
-
-    it('falls through to raw.validationState when prop returns null', () => {
-      const api = mountWithRegistry({
-        getValidationState: () => null,
-      })
-      const result = api.resolveValidation(
-        { id: 1, title: 'A', validationState: 'invalid' },
-        1,
-        0,
-      )
-      expect(result).toBe('invalid')
-    })
-
-    it('ignores unrecognised validation state strings (from raw or prop)', () => {
-      const fromRaw = mountWithRegistry({})
-      expect(
-        fromRaw.resolveValidation(
-          // @ts-expect-error — testing runtime validation
-          { id: 1, title: 'A', validationState: 'something-else' },
-          1,
-          0,
-        ),
-      ).toBeNull()
-      const fromProp = mountWithRegistry({
-        // @ts-expect-error — testing runtime validation
-        getValidationState: () => 'definitely-not-valid',
-      })
-      expect(
-        fromProp.resolveValidation({ id: 1, title: 'A' }, 1, 0),
-      ).toBeNull()
-    })
-  })
-
-  describe('registry via useListEditorItemValidation (provide/inject)', () => {
-    it('descendant-registered state wins over prop AND raw', async () => {
-      const propGetValidationState = vi
-        .fn<(item: Item, key: ListEditorKey, index: number) => ListEditorValidationState>()
-        .mockReturnValue('warning')
-      let resolveAt!: (
-        raw: Item,
-        key?: ListEditorKey,
-        index?: number,
-      ) => ListEditorValidationState
-
-      const Sentinel = defineComponent({
-        props: ['k', 's'],
-        setup(p) {
-          useListEditorItemValidation({
-            key: () => p.k as ListEditorKey,
-            state: () => p.s as ListEditorValidationState,
-          })
-          return () => h('span', 'sentinel')
-        },
-      })
-
-      const Host = defineComponent({
-        setup() {
-          const api = useValidationRegistry<Item>({
-            getValidationState: propGetValidationState,
-          })
-          resolveAt = api.resolveValidation
-          return () =>
-            h('div', [
-              h(Sentinel, { k: 1, s: 'invalid' }),
-              h(Sentinel, { k: 2, s: 'valid' }),
-            ])
-        },
-      })
-      mounted = mount(Host)
-      await nextTick()
-
-      // Key 1 → registry says 'invalid' (wins over prop's 'warning')
-      expect(
-        resolveAt({ id: 1, title: 'A', validationState: 'valid' }, 1, 0),
-      ).toBe('invalid')
-      // Key 2 → registry says 'valid' (still wins)
-      expect(
-        resolveAt({ id: 2, title: 'B' }, 2, 1),
-      ).toBe('valid')
-      // No registered key → falls through to prop
-      expect(
-        resolveAt({ id: 3, title: 'C' }, 3, 2),
-      ).toBe('warning')
-    })
-
-    it('unregisters on sentinel unmount, falling through to prop again', async () => {
-      const stateRef = ref<ListEditorValidationState>('invalid')
-      const Sentinel = defineComponent({
-        setup() {
-          useListEditorItemValidation({
-            key: () => 1,
-            state: stateRef,
-          })
-          return () => h('span', 'sentinel')
-        },
-      })
-
-      let resolveAt!: (
-        raw: Item,
-        key?: ListEditorKey,
-        index?: number,
-      ) => ListEditorValidationState
-      const visible = ref(true)
-      const Host = defineComponent({
-        setup() {
-          const api = useValidationRegistry<Item>({
-            getValidationState: () => 'warning',
-          })
-          resolveAt = api.resolveValidation
-          return () =>
-            h('div', visible.value ? [h(Sentinel)] : [])
-        },
-      })
-      mounted = mount(Host)
-      await nextTick()
-
-      expect(resolveAt({ id: 1, title: 'A' }, 1, 0)).toBe('invalid')
-      visible.value = false
-      await nextTick()
-      // Sentinel unmounted → fallback to prop ('warning')
-      expect(resolveAt({ id: 1, title: 'A' }, 1, 0)).toBe('warning')
-    })
-
-    it('reactive state updates propagate without re-registration', async () => {
-      const stateRef = ref<ListEditorValidationState>('invalid')
-      const Sentinel = defineComponent({
-        setup() {
-          useListEditorItemValidation({
-            key: () => 1,
-            state: stateRef,
-          })
-          return () => h('span', 'sentinel')
-        },
-      })
-      let resolveAt!: (
-        raw: Item,
-        key?: ListEditorKey,
-        index?: number,
-      ) => ListEditorValidationState
-      const Host = defineComponent({
-        setup() {
-          const api = useValidationRegistry<Item>({})
-          resolveAt = api.resolveValidation
-          return () => h('div', [h(Sentinel)])
-        },
-      })
-      mounted = mount(Host)
-      await nextTick()
-
-      expect(resolveAt({ id: 1, title: 'A' }, 1, 0)).toBe('invalid')
-      stateRef.value = 'valid'
-      await nextTick()
-      expect(resolveAt({ id: 1, title: 'A' }, 1, 0)).toBe('valid')
-      stateRef.value = null
-      await nextTick()
-      // null state from registry → falls through (and there's no prop or raw)
-      expect(resolveAt({ id: 1, title: 'A' }, 1, 0)).toBeNull()
-    })
-
-    it('different sentinels for different keys do not collide', async () => {
-      const Sentinel = defineComponent({
-        props: ['k', 's'],
-        setup(p) {
-          useListEditorItemValidation({
-            key: () => p.k as ListEditorKey,
-            state: computed(() => p.s as ListEditorValidationState),
-          })
-          return () => h('span', String(p.k))
-        },
-      })
-      let resolveAt!: (
-        raw: Item,
-        key?: ListEditorKey,
-        index?: number,
-      ) => ListEditorValidationState
-      const Host = defineComponent({
-        setup() {
-          const api = useValidationRegistry<Item>({})
-          resolveAt = api.resolveValidation
-          return () =>
-            h('div', [
-              h(Sentinel, { k: 1, s: 'invalid' }),
-              h(Sentinel, { k: 2, s: 'warning' }),
-              h(Sentinel, { k: 3, s: 'valid' }),
-            ])
-        },
-      })
-      mounted = mount(Host)
-      await nextTick()
-      expect(resolveAt({ id: 1, title: 'A' }, 1, 0)).toBe('invalid')
-      expect(resolveAt({ id: 2, title: 'B' }, 2, 1)).toBe('warning')
-      expect(resolveAt({ id: 3, title: 'C' }, 3, 2)).toBe('valid')
-    })
-  })
-
-  describe('graceful handling without key/index', () => {
-    it('skips registry lookup when key is undefined', () => {
-      const api = mountWithRegistry({
-        getValidationState: () => 'invalid',
-      })
-      // No key provided → registry skipped, prop also skipped (needs key+index)
-      // → falls through to raw.validationState which is unset
-      expect(api.resolveValidation({ id: 1, title: 'A' })).toBeNull()
-    })
-
-    it('does not call prop when index is undefined', () => {
-      const propFn = vi.fn().mockReturnValue('invalid')
-      const api = mountWithRegistry({ getValidationState: propFn })
-      api.resolveValidation({ id: 1, title: 'A' }, 1)
-      expect(propFn).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('provides ListEditorValidationKey', () => {
-    it('provides a registry with register + unregister under the well-known InjectionKey', () => {
-      let injectedRegistry: ListEditorValidationRegistry | null = null
-      const Child = defineComponent({
-        setup() {
-          injectedRegistry = inject(ListEditorValidationKey, null)
-          return () => h('span')
-        },
-      })
-      const Host = defineComponent({
-        setup() {
-          useValidationRegistry<Item>({})
-          return () => h(Child)
-        },
-      })
-      mounted = mount(Host)
-      expect(injectedRegistry).not.toBeNull()
-      expect(typeof injectedRegistry!.register).toBe('function')
-      expect(typeof injectedRegistry!.unregister).toBe('function')
-    })
-  })
-})
diff --git a/src/test/setup.ts b/src/test/setup.ts
index b436fec8..327660ad 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -34,11 +34,15 @@ const pinia = createPinia()
 // Configure Vue Test Utils global plugins
 config.global.plugins = [vuetify, i18n, pinia]
 
-// Mock window.matchMedia for Vuetify
+// Mock window.matchMedia for Vuetify.
+// `(any-pointer: fine)` answers TRUE: the default test environment stands in for a desktop with a
+// mouse, so list editors offer the drag handle. `useIsTouchDevice()` negates this query, and a blanket
+// `matches:false` would make every suite look like a touch-only device and silently disable drag.
+// Tests that want a touch-only device override `window.matchMedia` themselves before mounting.
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: vi.fn().mockImplementation((query: string) => ({
-    matches: false,
+    matches: query.includes('any-pointer: fine'),
     media: query,
     onchange: null,
     addListener: vi.fn(), // deprecated
diff --git a/tsconfig.libdts.json b/tsconfig.libdts.json
index db847759..5f407533 100644
--- a/tsconfig.libdts.json
+++ b/tsconfig.libdts.json
@@ -9,7 +9,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
     "noEmit": true,
     "preserveSymlinks": false,
@@ -21,5 +21,6 @@
     },
     "noUncheckedIndexedAccess": false
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*", "src/test/**/*", "src/**/*.test.*", "src/**/*.spec.*"]
 }
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index 6d4ba4d0..048a0c6b 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -2,7 +2,7 @@ import path from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vuetify from 'vite-plugin-vuetify'
-import dts from 'vite-plugin-dts'
+import dts from 'unplugin-dts/vite'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { fileURLToPath, URL } from 'url'
 
@@ -42,7 +42,7 @@ export default defineConfig({
       runtimeOnly: false,
       include: path.resolve(__dirname, 'src/locales/**.json'),
     }),
-    dts({ rollupTypes: true, tsconfigPath: 'tsconfig.libdts.json' }),
+    dts({ bundleTypes: true, tsconfigPath: 'tsconfig.libdts.json' }),
   ],
   resolve: {
     alias: {
diff --git a/vitest.config.ts b/vitest.config.ts
index 199d7e9d..872adf4c 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -86,6 +86,9 @@ export default defineConfig({
       'vuetify/components/VColorPicker',
       'vuetify/components/VSlider',
       'vuetify/components/VLabel',
+      'vuetify/components/VRadio',
+      'vuetify/components/VRadioGroup',
+      'vuetify/components/VBadge',
     ],
   },
   test: {
diff --git a/yarn.lock b/yarn.lock
index 9f2c057f..dd3f2b32 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,7 +2,7 @@
 # Manual changes might be lost - proceed with caution!
 
 __metadata:
-  version: 9
+  version: 10
   cacheKey: 10
 
 "@algolia/abtesting@npm:1.16.0":
@@ -207,65 +207,68 @@ __metadata:
   resolution: "@anzusystems/common-admin@workspace:."
   dependencies:
     "@anzusystems/common-admin": "workspace:*"
-    "@intlify/unplugin-vue-i18n": "npm:^11.1.2"
+    "@intlify/unplugin-vue-i18n": "npm:^11.2.4"
     "@kyvg/vue3-notification": "npm:^3.4.2"
     "@mdi/font": "npm:^7.4.47"
-    "@sentry/vue": "npm:^10.50.0"
-    "@shikijs/vitepress-twoslash": "npm:^4.0.2"
+    "@microsoft/api-extractor": "npm:^7.58.12"
+    "@sentry/vue": "npm:^10.70.0"
+    "@shikijs/vitepress-twoslash": "npm:^4.4.3"
     "@stylistic/eslint-plugin": "npm:^5.10.0"
     "@tsconfig/node22": "npm:^22.0.5"
-    "@types/node": "npm:^24.12.2"
+    "@types/node": "npm:^24.13.3"
     "@types/rusha": "npm:^0.8.3"
     "@types/sortablejs": "npm:^1.15.9"
     "@types/webfontloader": "npm:^1.6.38"
-    "@vitejs/plugin-vue": "npm:^6.0.6"
-    "@vitest/browser": "npm:^4.1.5"
-    "@vitest/browser-playwright": "npm:^4.1.5"
-    "@vitest/ui": "npm:^4.1.5"
-    "@vue/eslint-config-typescript": "npm:^14.7.0"
-    "@vue/language-server": "npm:3.2.7"
-    "@vue/test-utils": "npm:^2.4.9"
+    "@vitejs/plugin-vue": "npm:^6.0.8"
+    "@vitest/browser": "npm:^4.1.10"
+    "@vitest/browser-playwright": "npm:^4.1.10"
+    "@vitest/ui": "npm:^4.1.10"
+    "@vue/compiler-dom": "npm:3.5.41"
+    "@vue/devtools-api": "npm:^8.2.1"
+    "@vue/eslint-config-typescript": "npm:^14.9.0"
+    "@vue/language-server": "npm:3.3.9"
+    "@vue/test-utils": "npm:^2.4.11"
     "@vue/tsconfig": "npm:0.9.1"
     "@vuelidate/core": "npm:^2.0.3"
     "@vuelidate/validators": "npm:^2.0.4"
-    "@vueuse/core": "npm:^14.2.1"
-    "@vueuse/integrations": "npm:^14.2.1"
-    axios: "npm:1.15.2"
+    "@vueuse/core": "npm:14.4.0"
+    "@vueuse/integrations": "npm:14.4.0"
+    axios: "npm:1.19.0"
     cropperjs: "npm:^1.6.2"
-    dayjs: "npm:1.11.20"
-    eslint: "npm:^10.2.1"
-    eslint-plugin-oxlint: "npm:1.62.0"
-    eslint-plugin-vue: "npm:10.9.0"
+    dayjs: "npm:1.11.21"
+    eslint: "npm:^10.8.1"
+    eslint-plugin-oxlint: "npm:1.78.0"
+    eslint-plugin-vue: "npm:10.10.0"
     eslint-plugin-vuetify: "npm:^2.7.2"
-    npm-run-all2: "npm:^8.0.4"
-    oxfmt: "npm:^0.47.0"
-    oxlint: "npm:1.62.0"
-    pinia: "npm:3.0.4"
-    playwright: "npm:^1.59.1"
-    postcss: "npm:^8.5.12"
+    npm-run-all2: "npm:^9.0.3"
+    oxfmt: "npm:^0.63.0"
+    oxlint: "npm:1.78.0"
+    pinia: "npm:4.0.2"
+    playwright: "npm:^1.62.1"
+    postcss: "npm:^8.5.26"
     postcss-html: "npm:^1.8.1"
     postcss-prefix-selector: "npm:^2.1.1"
     rusha: "npm:^0.8.14"
-    sass: "npm:1.99.0"
+    sass: "npm:1.102.0"
     socket.io-client: "npm:4.8.3"
     sortablejs: "npm:^1.15.7"
-    stylelint: "npm:17.9.1"
+    stylelint: "npm:17.14.1"
     stylelint-config-recommended-vue: "npm:^1.6.1"
     stylelint-config-standard-scss: "npm:^17.0.0"
     typescript: "npm:5.9.3"
-    unplugin: "npm:3.0.0"
-    uuid: "npm:^14.0.0"
-    vite: "npm:7.3.2"
-    vite-plugin-dts: "npm:4.5.4"
+    unplugin: "npm:3.3.0"
+    unplugin-dts: "npm:^1.0.3"
+    uuid: "npm:^14.0.1"
+    vite: "npm:7.3.6"
     vite-plugin-vuetify: "npm:^2.1.3"
     vitepress: "npm:1.6.4"
-    vitest: "npm:^4.1.5"
-    vue: "npm:3.5.33"
-    vue-eslint-parser: "npm:^10.4.0"
-    vue-i18n: "npm:11.4.0"
-    vue-router: "npm:5.0.6"
-    vue-tsc: "npm:3.2.7"
-    vuetify: "npm:4.0.6"
+    vitest: "npm:^4.1.10"
+    vue: "npm:3.5.41"
+    vue-eslint-parser: "npm:^10.4.1"
+    vue-i18n: "npm:11.4.8"
+    vue-router: "npm:5.2.0"
+    vue-tsc: "npm:3.3.9"
+    vuetify: "npm:4.1.8"
     webfontloader: "npm:^1.6.28"
   peerDependencies:
     "@sentry/vue": ^10.0.0
@@ -275,7 +278,7 @@ __metadata:
     "@vueuse/integrations": ^14.1.0
     axios: ^1.13.4
     dayjs: ^1.11.19
-    pinia: ^3.0.4
+    pinia: ^4.0.2
     socket.io-client: ^4.8.3
     unplugin: ^3.0.0
     vue: ^3.5.27
@@ -311,51 +314,87 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.28.6":
-  version: 7.29.1
-  resolution: "@babel/generator@npm:7.29.1"
+"@babel/generator@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "@babel/generator@npm:8.0.0"
   dependencies:
-    "@babel/parser": "npm:^7.29.0"
-    "@babel/types": "npm:^7.29.0"
+    "@babel/parser": "npm:^8.0.0"
+    "@babel/types": "npm:^8.0.0"
     "@jridgewell/gen-mapping": "npm:^0.3.12"
     "@jridgewell/trace-mapping": "npm:^0.3.28"
+    "@types/jsesc": "npm:^2.5.0"
     jsesc: "npm:^3.0.2"
-  checksum: 10/61fe4ddd6e817aa312a14963ccdbb5c9a8c57e8b97b98d19a8a99ccab2215fda1a5f52bc8dd8d2e3c064497ddeb3ab8ceb55c76fa0f58f8169c34679d2256fe0
+  checksum: 10/8d9b801886b4bbe46b101768abae0ffa1c9435601a8788358331c115b1a38a7c5acdd0e8b85b4d0c00806b0b74a0cc0e75ef50647f7322ffa3646a238e1b5420
+  languageName: node
+  linkType: hard
+
+"@babel/helper-string-parser@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-string-parser@npm:7.29.7"
+  checksum: 10/4d8ef0ef7105f3d9fe4361137c8f42e5b4c7a52b5380b962762f2a528a1ba89064e2c6236090716ce34b63707b886ae0ebf36b2c2fcc2851f27e652febfc3648
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/helper-string-parser@npm:7.27.1"
-  checksum: 10/0ae29cc2005084abdae2966afdb86ed14d41c9c37db02c3693d5022fba9f5d59b011d039380b8e537c34daf117c549f52b452398f576e908fb9db3c7abbb3a00
+"@babel/helper-string-parser@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "@babel/helper-string-parser@npm:8.0.0"
+  checksum: 10/3c38887284b8bd76d2c5865b4a4a37f75a0dd2740d34169e3f140f1c35c5efff5682e50cbd38c47b0f143a38c145b93864a7a156a203a234317824083ec742cc
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-identifier@npm:^7.28.5, @babel/helper-validator-identifier@npm:^7.29.7":
+  version: 7.29.7
+  resolution: "@babel/helper-validator-identifier@npm:7.29.7"
+  checksum: 10/2efa42701eb05babf26dff3332109c9e5e1a3400a71fb9e68ee27af28235036a2a72c2494c04bdab3f909075f42a58b2e8271074372bc7f8e79ec02bd364d7a7
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.28.5":
-  version: 7.28.5
-  resolution: "@babel/helper-validator-identifier@npm:7.28.5"
-  checksum: 10/8e5d9b0133702cfacc7f368bf792f0f8ac0483794877c6dca5fcb73810ee138e27527701826fb58a40a004f3a5ec0a2f3c3dd5e326d262530b119918f3132ba7
+"@babel/helper-validator-identifier@npm:^8.0.4":
+  version: 8.0.4
+  resolution: "@babel/helper-validator-identifier@npm:8.0.4"
+  checksum: 10/4b9d741e990a62d49d138e0b7205cd8d1bf9df87afdc20243a2053f411ae22cf327b00a06c4a1119a2d839c148f809500c04036e45ec8a382f0876a26556ee3d
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.24.6, @babel/parser@npm:^7.28.4, @babel/parser@npm:^7.28.5, @babel/parser@npm:^7.29.0, @babel/parser@npm:^7.29.2":
-  version: 7.29.2
-  resolution: "@babel/parser@npm:7.29.2"
+"@babel/parser@npm:^7.24.6, @babel/parser@npm:^7.28.5, @babel/parser@npm:^7.29.2, @babel/parser@npm:^7.29.8":
+  version: 7.29.8
+  resolution: "@babel/parser@npm:7.29.8"
   dependencies:
-    "@babel/types": "npm:^7.29.0"
+    "@babel/types": "npm:^7.29.8"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10/45d050bf75aa5194b3255f156173e8553d615ff5a2434674cc4a10cdc7c261931befb8618c996a1c449b87f0ef32a3407879af2ac967d95dc7b4fdbae7037efa
+  checksum: 10/dbd14ebbba0fa3019acd2712b0db3ffd594d0850d4fc487667287b5702893f54a7911570ea842f0cff4dc492a2412e3287dfabfe00c6b78efa7becb1255f3f86
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.29.0":
-  version: 7.29.0
-  resolution: "@babel/types@npm:7.29.0"
+"@babel/parser@npm:^8.0.0":
+  version: 8.0.4
+  resolution: "@babel/parser@npm:8.0.4"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.27.1"
-    "@babel/helper-validator-identifier": "npm:^7.28.5"
-  checksum: 10/bfc2b211210f3894dcd7e6a33b2d1c32c93495dc1e36b547376aa33441abe551ab4bc1640d4154ee2acd8e46d3bbc925c7224caae02fcaf0e6a771e97fccc661
+    "@babel/types": "npm:^8.0.4"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/230554794a2c296ce1fb60f57459d94903802369e14e1d83c3ea266b64a4f88ab292eadf5213823d87c04541c9c43b8b6daaae919f25551d3637800663fb25bf
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.29.0, @babel/types@npm:^7.29.8":
+  version: 7.29.8
+  resolution: "@babel/types@npm:7.29.8"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.29.7"
+    "@babel/helper-validator-identifier": "npm:^7.29.7"
+  checksum: 10/ff2becf0f8b432f0820f286fb9319d7f3819b2d0eb95bc26957fbc6250a3ca0ae3656feb98ecb5f171f9e04b34a4c08f5036447f17459ed7bfc32ff649d9b71e
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^8.0.0, @babel/types@npm:^8.0.4":
+  version: 8.0.4
+  resolution: "@babel/types@npm:8.0.4"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^8.0.0"
+    "@babel/helper-validator-identifier": "npm:^8.0.4"
+  checksum: 10/7b58bdb4c9149fb5ea6a272912f8cd8af082939a9fc97c6de126299b38f258dd9f78717f7cad3c7fe8bfa7d1fce4cff5fa26b0e80885935255fd3a062e9296ad
   languageName: node
   linkType: hard
 
@@ -366,35 +405,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cacheable/memory@npm:^2.0.8":
-  version: 2.0.8
-  resolution: "@cacheable/memory@npm:2.0.8"
+"@cacheable/memory@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "@cacheable/memory@npm:2.2.0"
   dependencies:
-    "@cacheable/utils": "npm:^2.4.0"
+    "@cacheable/utils": "npm:^2.5.0"
     "@keyv/bigmap": "npm:^1.3.1"
     hookified: "npm:^1.15.1"
     keyv: "npm:^5.6.0"
-  checksum: 10/686bb460c1e6b5a1be6ecd54b5f0c204d82210b083aa177d467166b83b5deab5f79e85f5dd2681b4da76b2249b52a80a75daaf679558be2cefb72f8e25adecb2
+  checksum: 10/97db83d7a74979accca9de56cf278e42c22b4273e752d7e23c44fbec4a47450716c4920903424fd19184a7bee6325064b6c453afc6f96bf92b39eecfe0b40648
   languageName: node
   linkType: hard
 
-"@cacheable/utils@npm:^2.4.0":
-  version: 2.4.1
-  resolution: "@cacheable/utils@npm:2.4.1"
+"@cacheable/utils@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "@cacheable/utils@npm:2.5.0"
   dependencies:
     hashery: "npm:^1.5.1"
     keyv: "npm:^5.6.0"
-  checksum: 10/5fbea553fd53c8ffe4f3a2e746ce6ecf76f3d90f599b49f2c677c3922e4f643a40f3e90a13727b6e866b7ab3c8e267368d98b54d88d08181050a8d066997cfe7
+  checksum: 10/a77a7e682926b984cb28b6993f4595638ce8799de3223dbdcdb796a077a02de763687bdc5669779019aba44d27693260ef92d860a19330d7eaa4dfcca3433c3b
   languageName: node
   linkType: hard
 
-"@csstools/css-calc@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "@csstools/css-calc@npm:3.2.0"
+"@csstools/css-calc@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "@csstools/css-calc@npm:3.2.1"
   peerDependencies:
     "@csstools/css-parser-algorithms": ^4.0.0
     "@csstools/css-tokenizer": ^4.0.0
-  checksum: 10/7eec51a21945a74aa6a407d1e6290d0f4c5d01829a42c01a56ce2055216398540cc3120837b15a0db38601bcb40cf97f1d991fefb3ee9d00d9cec03d67beba4c
+  checksum: 10/39042a9382cbd7c4fa241c1a6c10d64c23fa7653970fc11df532e9bc42a366a8b50c3ac3036bd5f2a77b94144e7f804f19d2b52800ad2f48bd9a3840377165d8
   languageName: node
   linkType: hard
 
@@ -407,15 +446,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-syntax-patches-for-csstree@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.3"
+"@csstools/css-syntax-patches-for-csstree@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.6"
   peerDependencies:
     css-tree: ^3.2.1
   peerDependenciesMeta:
     css-tree:
       optional: true
-  checksum: 10/1c91dc03b64ca913eed5064ca0e434da1c0be8def6ce20f932d1db10f9b478ac3830c99a033b0edf75954cf9164c7c267b220ed9faffbc3342bf320870c3bb4b
+  checksum: 10/8747268b42f1afbe450d38b7f388a4983c810883f8c0716fa24f5b1eef0f9cbaa3a0f4ea72d1e5cbd015dc4fd5af9cc96ade42792912ed2dcc1d4054de102163
   languageName: node
   linkType: hard
 
@@ -569,9 +608,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/aix-ppc64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/aix-ppc64@npm:0.27.4"
+"@esbuild/aix-ppc64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/aix-ppc64@npm:0.28.1"
   conditions: os=aix & cpu=ppc64
   languageName: node
   linkType: hard
@@ -590,9 +629,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/android-arm64@npm:0.27.4"
+"@esbuild/android-arm64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/android-arm64@npm:0.28.1"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -611,9 +650,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/android-arm@npm:0.27.4"
+"@esbuild/android-arm@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/android-arm@npm:0.28.1"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -632,9 +671,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/android-x64@npm:0.27.4"
+"@esbuild/android-x64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/android-x64@npm:0.28.1"
   conditions: os=android & cpu=x64
   languageName: node
   linkType: hard
@@ -653,9 +692,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/darwin-arm64@npm:0.27.4"
+"@esbuild/darwin-arm64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/darwin-arm64@npm:0.28.1"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -674,9 +713,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/darwin-x64@npm:0.27.4"
+"@esbuild/darwin-x64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/darwin-x64@npm:0.28.1"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -695,9 +734,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/freebsd-arm64@npm:0.27.4"
+"@esbuild/freebsd-arm64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/freebsd-arm64@npm:0.28.1"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -716,9 +755,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/freebsd-x64@npm:0.27.4"
+"@esbuild/freebsd-x64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/freebsd-x64@npm:0.28.1"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -737,9 +776,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-arm64@npm:0.27.4"
+"@esbuild/linux-arm64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-arm64@npm:0.28.1"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
@@ -758,9 +797,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-arm@npm:0.27.4"
+"@esbuild/linux-arm@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-arm@npm:0.28.1"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -779,9 +818,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-ia32@npm:0.27.4"
+"@esbuild/linux-ia32@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-ia32@npm:0.28.1"
   conditions: os=linux & cpu=ia32
   languageName: node
   linkType: hard
@@ -800,9 +839,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-loong64@npm:0.27.4"
+"@esbuild/linux-loong64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-loong64@npm:0.28.1"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
@@ -821,9 +860,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-mips64el@npm:0.27.4"
+"@esbuild/linux-mips64el@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-mips64el@npm:0.28.1"
   conditions: os=linux & cpu=mips64el
   languageName: node
   linkType: hard
@@ -842,9 +881,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-ppc64@npm:0.27.4"
+"@esbuild/linux-ppc64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-ppc64@npm:0.28.1"
   conditions: os=linux & cpu=ppc64
   languageName: node
   linkType: hard
@@ -863,9 +902,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-riscv64@npm:0.27.4"
+"@esbuild/linux-riscv64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-riscv64@npm:0.28.1"
   conditions: os=linux & cpu=riscv64
   languageName: node
   linkType: hard
@@ -884,9 +923,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-s390x@npm:0.27.4"
+"@esbuild/linux-s390x@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-s390x@npm:0.28.1"
   conditions: os=linux & cpu=s390x
   languageName: node
   linkType: hard
@@ -905,9 +944,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/linux-x64@npm:0.27.4"
+"@esbuild/linux-x64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/linux-x64@npm:0.28.1"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
@@ -919,9 +958,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-arm64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/netbsd-arm64@npm:0.27.4"
+"@esbuild/netbsd-arm64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/netbsd-arm64@npm:0.28.1"
   conditions: os=netbsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -940,9 +979,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/netbsd-x64@npm:0.27.4"
+"@esbuild/netbsd-x64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/netbsd-x64@npm:0.28.1"
   conditions: os=netbsd & cpu=x64
   languageName: node
   linkType: hard
@@ -954,9 +993,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-arm64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/openbsd-arm64@npm:0.27.4"
+"@esbuild/openbsd-arm64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/openbsd-arm64@npm:0.28.1"
   conditions: os=openbsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -975,9 +1014,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/openbsd-x64@npm:0.27.4"
+"@esbuild/openbsd-x64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/openbsd-x64@npm:0.28.1"
   conditions: os=openbsd & cpu=x64
   languageName: node
   linkType: hard
@@ -989,9 +1028,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openharmony-arm64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/openharmony-arm64@npm:0.27.4"
+"@esbuild/openharmony-arm64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/openharmony-arm64@npm:0.28.1"
   conditions: os=openharmony & cpu=arm64
   languageName: node
   linkType: hard
@@ -1010,9 +1049,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/sunos-x64@npm:0.27.4"
+"@esbuild/sunos-x64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/sunos-x64@npm:0.28.1"
   conditions: os=sunos & cpu=x64
   languageName: node
   linkType: hard
@@ -1031,9 +1070,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/win32-arm64@npm:0.27.4"
+"@esbuild/win32-arm64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/win32-arm64@npm:0.28.1"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -1052,9 +1091,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/win32-ia32@npm:0.27.4"
+"@esbuild/win32-ia32@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/win32-ia32@npm:0.28.1"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -1073,9 +1112,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.27.4":
-  version: 0.27.4
-  resolution: "@esbuild/win32-x64@npm:0.27.4"
+"@esbuild/win32-x64@npm:0.28.1":
+  version: 0.28.1
+  resolution: "@esbuild/win32-x64@npm:0.28.1"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -1109,12 +1148,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/config-helpers@npm:^0.5.5":
-  version: 0.5.5
-  resolution: "@eslint/config-helpers@npm:0.5.5"
+"@eslint/config-helpers@npm:^0.7.0":
+  version: 0.7.0
+  resolution: "@eslint/config-helpers@npm:0.7.0"
   dependencies:
     "@eslint/core": "npm:^1.2.1"
-  checksum: 10/19072449502b928a716df87b2d9b13c7befb21974b0f93fdbea705ddba098792142808105170ef2183c28ce13ac9fa1713ef0599749f8469434ac2b914fc8f4d
+  checksum: 10/57f9cdf303fd56f0da6712e7d6da350c18a332f7d1dc0f5a5f8a9c357f0d5ab9ff9e7515be4726ad4b0fc41c297570a118d7ede02246c5b7a37932c3df46271e
   languageName: node
   linkType: hard
 
@@ -1134,13 +1173,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/plugin-kit@npm:^0.7.1":
-  version: 0.7.1
-  resolution: "@eslint/plugin-kit@npm:0.7.1"
+"@eslint/plugin-kit@npm:^0.7.2":
+  version: 0.7.2
+  resolution: "@eslint/plugin-kit@npm:0.7.2"
   dependencies:
     "@eslint/core": "npm:^1.2.1"
     levn: "npm:^0.4.1"
-  checksum: 10/8f923f4cdadadd215e0c2028e6a53101bb148a7780cdb4dc8cd69b0c77fc88496742e87e0605b12905ff715e2c7ad6cbd2d92c5653cdbf91cca1e229b5022c1f
+  checksum: 10/ef9fc6f8ca28e132d4c81cfbaa92274800d1d73bb9d6ef2124613dd39b7f09e3592deb64bad10b183bff78db5465d4b100f522d994c8550424526b9ac4a072b0
   languageName: node
   linkType: hard
 
@@ -1223,12 +1262,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@intlify/bundle-utils@npm:11.1.2":
-  version: 11.1.2
-  resolution: "@intlify/bundle-utils@npm:11.1.2"
+"@intlify/bundle-utils@npm:11.2.4":
+  version: 11.2.4
+  resolution: "@intlify/bundle-utils@npm:11.2.4"
   dependencies:
-    "@intlify/message-compiler": "npm:^11.1.12"
-    "@intlify/shared": "npm:^11.1.12"
+    "@intlify/message-compiler": "npm:~11.4.2"
+    "@intlify/shared": "npm:~11.4.2"
     acorn: "npm:^8.8.2"
     esbuild: "npm:^0.25.4"
     escodegen: "npm:^2.1.0"
@@ -1241,7 +1280,7 @@ __metadata:
       optional: true
     vue-i18n:
       optional: true
-  checksum: 10/3439ad080864eeb0c653e944f42770cd5c8ac548f948b3389410f1e752fe564fdf160a4e89a6f579f264ce18c75fb4196090ce30ac7a4b60c5664fdc77f0fabf
+  checksum: 10/87c742a864590aa191f55d865fd0230e47db3bb779f252783cc5a5645532293452947e70f1b23692ad3901e15da78ddd796ecc6efdac9ffed148dc393247e560
   languageName: node
   linkType: hard
 
@@ -1255,24 +1294,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@intlify/core-base@npm:11.4.0":
-  version: 11.4.0
-  resolution: "@intlify/core-base@npm:11.4.0"
+"@intlify/core-base@npm:11.4.8":
+  version: 11.4.8
+  resolution: "@intlify/core-base@npm:11.4.8"
   dependencies:
-    "@intlify/devtools-types": "npm:11.4.0"
-    "@intlify/message-compiler": "npm:11.4.0"
-    "@intlify/shared": "npm:11.4.0"
-  checksum: 10/7d8ebe1ac3a1aa8c304c72c86c437902c40cfd006823f5e57aff63cd1b306720195090a1ee1ec025bac503f839e00d5114d5d202daad4884d4d6c4c6b759bf77
+    "@intlify/devtools-types": "npm:11.4.8"
+    "@intlify/message-compiler": "npm:11.4.8"
+    "@intlify/shared": "npm:11.4.8"
+  checksum: 10/e4d136220dcdd83c0b90fe3e775c010ac1ce8ef297cbbadb31fa117539ed5c999c3452eca2bc74cebc68cdfc00f19f05c5700c8b0c682e60f690cbb1ffc8e495
   languageName: node
   linkType: hard
 
-"@intlify/devtools-types@npm:11.4.0":
-  version: 11.4.0
-  resolution: "@intlify/devtools-types@npm:11.4.0"
+"@intlify/devtools-types@npm:11.4.8":
+  version: 11.4.8
+  resolution: "@intlify/devtools-types@npm:11.4.8"
   dependencies:
-    "@intlify/core-base": "npm:11.4.0"
-    "@intlify/shared": "npm:11.4.0"
-  checksum: 10/9263db40c35e4551869cb7718ea314d14ac0a9ead2a5bf851ad7a33f5d88bfe3d85cb929465b24896b69186b89c3deb7e9b67f7e404a192eac11f867338c0711
+    "@intlify/core-base": "npm:11.4.8"
+    "@intlify/shared": "npm:11.4.8"
+  checksum: 10/1b48d15a8637ba4a66fe3e0a5581f1762e7bf4b58e68bd2f2a262c3c7af0397ab73188373a0cc4c2deb0f1f4859394561793870e55b3d36189dc760a25c7cf9d
   languageName: node
   linkType: hard
 
@@ -1286,13 +1325,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@intlify/message-compiler@npm:11.4.0, @intlify/message-compiler@npm:^11.1.12":
-  version: 11.4.0
-  resolution: "@intlify/message-compiler@npm:11.4.0"
+"@intlify/message-compiler@npm:11.4.8, @intlify/message-compiler@npm:~11.4.2":
+  version: 11.4.8
+  resolution: "@intlify/message-compiler@npm:11.4.8"
   dependencies:
-    "@intlify/shared": "npm:11.4.0"
+    "@intlify/shared": "npm:11.4.8"
     source-map-js: "npm:^1.0.2"
-  checksum: 10/36d0f42a622d4c998965cac3ec167a58d4db44b50b4b156ca699aac55210677eb933e87ce804cbe3931e1b087cdf7b128bd378cd55e7c0cb3ab82d2b8301afcb
+  checksum: 10/124e2e6607065ce0bd0ab456b43dea7d4cca7ed2f25f43e2ae36ffd114babcf29131d31dba9a6991d5012e1751a5868b4450080fc209ff425c09e69cb3321f6c
   languageName: node
   linkType: hard
 
@@ -1303,20 +1342,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@intlify/shared@npm:11.4.0, @intlify/shared@npm:^11.1.12":
-  version: 11.4.0
-  resolution: "@intlify/shared@npm:11.4.0"
-  checksum: 10/530d7781240b551120d68fb23061cfb0f1f49c89cec57d4d346fd97670f82145f9c82f952e67b5b3575a4107d1913d49e4600b9ee69b904172a5587636a4039e
+"@intlify/shared@npm:11.4.8, @intlify/shared@npm:~11.4.2":
+  version: 11.4.8
+  resolution: "@intlify/shared@npm:11.4.8"
+  checksum: 10/a351074336935408ff40fc1d37f93d90320cef93f9d9656540b2202feaf27cbc0058405d42bdc37b052d0624095af6c0e4692ba4e31a632093a1c1d9a5ccf7c4
   languageName: node
   linkType: hard
 
-"@intlify/unplugin-vue-i18n@npm:^11.1.2":
-  version: 11.1.2
-  resolution: "@intlify/unplugin-vue-i18n@npm:11.1.2"
+"@intlify/unplugin-vue-i18n@npm:^11.2.4":
+  version: 11.2.4
+  resolution: "@intlify/unplugin-vue-i18n@npm:11.2.4"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.4.0"
-    "@intlify/bundle-utils": "npm:11.1.2"
-    "@intlify/shared": "npm:^11.1.12"
+    "@intlify/bundle-utils": "npm:11.2.4"
+    "@intlify/shared": "npm:~11.4.2"
     "@intlify/vue-i18n-extensions": "npm:^8.0.0"
     "@rollup/pluginutils": "npm:^5.1.0"
     "@typescript-eslint/scope-manager": "npm:^8.13.0"
@@ -1326,7 +1365,7 @@ __metadata:
     pathe: "npm:^2.0.3"
     picocolors: "npm:^1.0.0"
     unplugin: "npm:^2.3.4"
-    vue: "npm:^3.5.21"
+    vue: "npm:~3.5.34"
   peerDependencies:
     petite-vue-i18n: "*"
     vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1339,7 +1378,7 @@ __metadata:
       optional: true
     vue-i18n:
       optional: true
-  checksum: 10/af9d0f443788fa535483d7e4a70c515ca699cddba0818f1d12968adfffb1611e483bec69d62fd36e444e9a87a1209018c68c37f3d0b782360cc67b990ca75852
+  checksum: 10/c7d4c5b4f841cf7166e8f5a06af21bddcd3866bb54507164de4efdf872a2257cf6b0de2d11bda8c4b09868e6d6a6b557a9f6ec0258665fb99b21aeb0dfe0b897
   languageName: node
   linkType: hard
 
@@ -1478,38 +1517,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@microsoft/api-extractor-model@npm:7.33.5":
-  version: 7.33.5
-  resolution: "@microsoft/api-extractor-model@npm:7.33.5"
+"@microsoft/api-extractor-model@npm:7.33.10":
+  version: 7.33.10
+  resolution: "@microsoft/api-extractor-model@npm:7.33.10"
   dependencies:
     "@microsoft/tsdoc": "npm:~0.16.0"
     "@microsoft/tsdoc-config": "npm:~0.18.1"
-    "@rushstack/node-core-library": "npm:5.21.0"
-  checksum: 10/2631330170707eda14902b51c6dabb3e0e91e7b510169da6b4bf56d8bda47b349d614b34d92b66530cfed45617f6a94f42acdc98c903f781b9b9c14a6481e29d
+    "@rushstack/node-core-library": "npm:5.23.3"
+  checksum: 10/b137623105f4db40548fa03e9325a5f620b03ce6f8bc2c7943682df6be8dbed300a921d9984eef22037ee61f24e5d8c3cbb72a864c2a782fc36c5cb5be048f0d
   languageName: node
   linkType: hard
 
-"@microsoft/api-extractor@npm:^7.50.1":
-  version: 7.57.8
-  resolution: "@microsoft/api-extractor@npm:7.57.8"
+"@microsoft/api-extractor@npm:^7.58.12":
+  version: 7.58.12
+  resolution: "@microsoft/api-extractor@npm:7.58.12"
   dependencies:
-    "@microsoft/api-extractor-model": "npm:7.33.5"
+    "@microsoft/api-extractor-model": "npm:7.33.10"
     "@microsoft/tsdoc": "npm:~0.16.0"
     "@microsoft/tsdoc-config": "npm:~0.18.1"
-    "@rushstack/node-core-library": "npm:5.21.0"
-    "@rushstack/rig-package": "npm:0.7.2"
-    "@rushstack/terminal": "npm:0.22.4"
-    "@rushstack/ts-command-line": "npm:5.3.4"
+    "@rushstack/node-core-library": "npm:5.23.3"
+    "@rushstack/rig-package": "npm:0.7.3"
+    "@rushstack/terminal": "npm:0.24.2"
+    "@rushstack/ts-command-line": "npm:5.3.12"
     diff: "npm:~8.0.2"
-    lodash: "npm:~4.17.23"
     minimatch: "npm:10.2.3"
     resolve: "npm:~1.22.1"
-    semver: "npm:~7.5.4"
+    semver: "npm:~7.7.4"
     source-map: "npm:~0.6.1"
-    typescript: "npm:5.8.2"
+    typescript: "npm:5.9.3"
   bin:
     api-extractor: bin/api-extractor
-  checksum: 10/541d1e0c54ea97710f66de61e946331c84ac196f89e88f308962b38a109493ee5a706ad196d3dd96a297880578362d9823fd4e4c087cbb3bb2fbca4ba5ba7c6f
+  checksum: 10/7b9f0482034981a4f1f7dbf65829e38ba187bfc927c32053a16ece29bd22155d97264120f06231f8f0cee66b5e6402f86fbcded62e6a50d3568f6407f699eef1
   languageName: node
   linkType: hard
 
@@ -1614,268 +1652,268 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-android-arm-eabi@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-android-arm-eabi@npm:0.47.0"
+"@oxfmt/binding-android-arm-eabi@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-android-arm-eabi@npm:0.63.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-android-arm64@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-android-arm64@npm:0.47.0"
+"@oxfmt/binding-android-arm64@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-android-arm64@npm:0.63.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-darwin-arm64@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-darwin-arm64@npm:0.47.0"
+"@oxfmt/binding-darwin-arm64@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-darwin-arm64@npm:0.63.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-darwin-x64@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-darwin-x64@npm:0.47.0"
+"@oxfmt/binding-darwin-x64@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-darwin-x64@npm:0.63.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-freebsd-x64@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-freebsd-x64@npm:0.47.0"
+"@oxfmt/binding-freebsd-x64@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-freebsd-x64@npm:0.63.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-arm-gnueabihf@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-arm-gnueabihf@npm:0.47.0"
+"@oxfmt/binding-linux-arm-gnueabihf@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-arm-gnueabihf@npm:0.63.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-arm-musleabihf@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-arm-musleabihf@npm:0.47.0"
+"@oxfmt/binding-linux-arm-musleabihf@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-arm-musleabihf@npm:0.63.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-arm64-gnu@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-arm64-gnu@npm:0.47.0"
+"@oxfmt/binding-linux-arm64-gnu@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-arm64-gnu@npm:0.63.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-arm64-musl@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-arm64-musl@npm:0.47.0"
+"@oxfmt/binding-linux-arm64-musl@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-arm64-musl@npm:0.63.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-ppc64-gnu@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-ppc64-gnu@npm:0.47.0"
+"@oxfmt/binding-linux-ppc64-gnu@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-ppc64-gnu@npm:0.63.0"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-riscv64-gnu@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-riscv64-gnu@npm:0.47.0"
+"@oxfmt/binding-linux-riscv64-gnu@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-riscv64-gnu@npm:0.63.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-riscv64-musl@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-riscv64-musl@npm:0.47.0"
+"@oxfmt/binding-linux-riscv64-musl@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-riscv64-musl@npm:0.63.0"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-s390x-gnu@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-s390x-gnu@npm:0.47.0"
+"@oxfmt/binding-linux-s390x-gnu@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-s390x-gnu@npm:0.63.0"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-x64-gnu@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-x64-gnu@npm:0.47.0"
+"@oxfmt/binding-linux-x64-gnu@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-x64-gnu@npm:0.63.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-linux-x64-musl@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-linux-x64-musl@npm:0.47.0"
+"@oxfmt/binding-linux-x64-musl@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-linux-x64-musl@npm:0.63.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-openharmony-arm64@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-openharmony-arm64@npm:0.47.0"
+"@oxfmt/binding-openharmony-arm64@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-openharmony-arm64@npm:0.63.0"
   conditions: os=openharmony & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-win32-arm64-msvc@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-win32-arm64-msvc@npm:0.47.0"
+"@oxfmt/binding-win32-arm64-msvc@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-win32-arm64-msvc@npm:0.63.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-win32-ia32-msvc@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-win32-ia32-msvc@npm:0.47.0"
+"@oxfmt/binding-win32-ia32-msvc@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-win32-ia32-msvc@npm:0.63.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@oxfmt/binding-win32-x64-msvc@npm:0.47.0":
-  version: 0.47.0
-  resolution: "@oxfmt/binding-win32-x64-msvc@npm:0.47.0"
+"@oxfmt/binding-win32-x64-msvc@npm:0.63.0":
+  version: 0.63.0
+  resolution: "@oxfmt/binding-win32-x64-msvc@npm:0.63.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@oxlint/binding-android-arm-eabi@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-android-arm-eabi@npm:1.62.0"
+"@oxlint/binding-android-arm-eabi@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-android-arm-eabi@npm:1.78.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxlint/binding-android-arm64@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-android-arm64@npm:1.62.0"
+"@oxlint/binding-android-arm64@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-android-arm64@npm:1.78.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxlint/binding-darwin-arm64@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-darwin-arm64@npm:1.62.0"
+"@oxlint/binding-darwin-arm64@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-darwin-arm64@npm:1.78.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxlint/binding-darwin-x64@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-darwin-x64@npm:1.62.0"
+"@oxlint/binding-darwin-x64@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-darwin-x64@npm:1.78.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@oxlint/binding-freebsd-x64@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-freebsd-x64@npm:1.62.0"
+"@oxlint/binding-freebsd-x64@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-freebsd-x64@npm:1.78.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-arm-gnueabihf@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-arm-gnueabihf@npm:1.62.0"
+"@oxlint/binding-linux-arm-gnueabihf@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-arm-gnueabihf@npm:1.78.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-arm-musleabihf@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-arm-musleabihf@npm:1.62.0"
+"@oxlint/binding-linux-arm-musleabihf@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-arm-musleabihf@npm:1.78.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-arm64-gnu@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-arm64-gnu@npm:1.62.0"
+"@oxlint/binding-linux-arm64-gnu@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-arm64-gnu@npm:1.78.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-arm64-musl@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-arm64-musl@npm:1.62.0"
+"@oxlint/binding-linux-arm64-musl@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-arm64-musl@npm:1.78.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-ppc64-gnu@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-ppc64-gnu@npm:1.62.0"
+"@oxlint/binding-linux-ppc64-gnu@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-ppc64-gnu@npm:1.78.0"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-riscv64-gnu@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-riscv64-gnu@npm:1.62.0"
+"@oxlint/binding-linux-riscv64-gnu@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-riscv64-gnu@npm:1.78.0"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-riscv64-musl@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-riscv64-musl@npm:1.62.0"
+"@oxlint/binding-linux-riscv64-musl@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-riscv64-musl@npm:1.78.0"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-s390x-gnu@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-s390x-gnu@npm:1.62.0"
+"@oxlint/binding-linux-s390x-gnu@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-s390x-gnu@npm:1.78.0"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-x64-gnu@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-x64-gnu@npm:1.62.0"
+"@oxlint/binding-linux-x64-gnu@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-x64-gnu@npm:1.78.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@oxlint/binding-linux-x64-musl@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-linux-x64-musl@npm:1.62.0"
+"@oxlint/binding-linux-x64-musl@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-linux-x64-musl@npm:1.78.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@oxlint/binding-openharmony-arm64@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-openharmony-arm64@npm:1.62.0"
+"@oxlint/binding-openharmony-arm64@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-openharmony-arm64@npm:1.78.0"
   conditions: os=openharmony & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxlint/binding-win32-arm64-msvc@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-win32-arm64-msvc@npm:1.62.0"
+"@oxlint/binding-win32-arm64-msvc@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-win32-arm64-msvc@npm:1.78.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@oxlint/binding-win32-ia32-msvc@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-win32-ia32-msvc@npm:1.62.0"
+"@oxlint/binding-win32-ia32-msvc@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-win32-ia32-msvc@npm:1.78.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@oxlint/binding-win32-x64-msvc@npm:1.62.0":
-  version: 1.62.0
-  resolution: "@oxlint/binding-win32-x64-msvc@npm:1.62.0"
+"@oxlint/binding-win32-x64-msvc@npm:1.78.0":
+  version: 1.78.0
+  resolution: "@oxlint/binding-win32-x64-msvc@npm:1.78.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -2152,10 +2190,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rolldown/pluginutils@npm:1.0.0-rc.13":
-  version: 1.0.0-rc.13
-  resolution: "@rolldown/pluginutils@npm:1.0.0-rc.13"
-  checksum: 10/ffc6cdfac897c3fb7c5544560d2aaf2bd55acfb4f082295844a899bdccdd0c7baa11e27fe2b806427bd636d43aa2b22b9ec6b837bab9f416d1e29c4dd4c52516
+"@rolldown/pluginutils@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@rolldown/pluginutils@npm:1.0.1"
+  checksum: 10/4e95cf9ce23d75e5aa03ea0249cd86f7d1e21f83fbf6f8520e4edd8a251ba1b82c4ba9bc13cd24b6c4661daec6225b06e6d35c64c604e731b230b2a49af47d05
   languageName: node
   linkType: hard
 
@@ -2350,24 +2388,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rushstack/node-core-library@npm:5.21.0":
-  version: 5.21.0
-  resolution: "@rushstack/node-core-library@npm:5.21.0"
+"@rushstack/node-core-library@npm:5.23.3":
+  version: 5.23.3
+  resolution: "@rushstack/node-core-library@npm:5.23.3"
   dependencies:
-    ajv: "npm:~8.18.0"
+    ajv: "npm:~8.20.0"
     ajv-draft-04: "npm:~1.0.0"
     ajv-formats: "npm:~3.0.1"
     fs-extra: "npm:~11.3.0"
     import-lazy: "npm:~4.0.0"
     jju: "npm:~1.4.0"
     resolve: "npm:~1.22.1"
-    semver: "npm:~7.5.4"
+    semver: "npm:~7.7.4"
   peerDependencies:
     "@types/node": "*"
   peerDependenciesMeta:
     "@types/node":
       optional: true
-  checksum: 10/affa0cbfb582cee656daa97f1e2941d2b07df29df2b5ac153bba3a289fe512ee50633aa46612ac870990cca502eb4408f422d0755b6db4e625594a7e862416ba
+  checksum: 10/b34386ebc080e81f5d4ba2f2d18d3c448f5896df60404660e8aa9e07cefe10960f43c02eb1a8794baff525f2b19b57c969598b9b23fb18df531f9d52cbc1af3d
   languageName: node
   linkType: hard
 
@@ -2383,21 +2421,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rushstack/rig-package@npm:0.7.2":
-  version: 0.7.2
-  resolution: "@rushstack/rig-package@npm:0.7.2"
+"@rushstack/rig-package@npm:0.7.3":
+  version: 0.7.3
+  resolution: "@rushstack/rig-package@npm:0.7.3"
   dependencies:
+    jju: "npm:~1.4.0"
     resolve: "npm:~1.22.1"
-    strip-json-comments: "npm:~3.1.1"
-  checksum: 10/d500714d77792797aaf98afaa7c6133b6886626096f738e1cfd9c18a15ac05fbb3ac6b2cc0798a21e9e9836ebae7f4542c951e4541cfdbee3a280f3f072cf93e
+  checksum: 10/46cbdf1b4538640a6c93825ddaa7693b45cd7f640b34106ab554319b5d3fae18f65a3c91576c6cce005a1250722159c329ce5f4b1729bead594d9f634cd18616
   languageName: node
   linkType: hard
 
-"@rushstack/terminal@npm:0.22.4":
-  version: 0.22.4
-  resolution: "@rushstack/terminal@npm:0.22.4"
+"@rushstack/terminal@npm:0.24.2":
+  version: 0.24.2
+  resolution: "@rushstack/terminal@npm:0.24.2"
   dependencies:
-    "@rushstack/node-core-library": "npm:5.21.0"
+    "@rushstack/node-core-library": "npm:5.23.3"
     "@rushstack/problem-matcher": "npm:0.2.1"
     supports-color: "npm:~8.1.1"
   peerDependencies:
@@ -2405,96 +2443,108 @@ __metadata:
   peerDependenciesMeta:
     "@types/node":
       optional: true
-  checksum: 10/068ac020e8284804fcd17ee943a7092031cc36456b6e7a867a31e34984c2515cf1ea520a5eaf0239e612231b2698a456c5f2d007fb4959e8ce3554827801eedf
+  checksum: 10/2961f467ddf39f78714e37fb325cc555ea2c3c00a13ed8ba611d29315037183abc31e9d57cdee49180b44da4529cb26a47ab9daafd70da238bdb1b61bbf287ae
   languageName: node
   linkType: hard
 
-"@rushstack/ts-command-line@npm:5.3.4":
-  version: 5.3.4
-  resolution: "@rushstack/ts-command-line@npm:5.3.4"
+"@rushstack/ts-command-line@npm:5.3.12":
+  version: 5.3.12
+  resolution: "@rushstack/ts-command-line@npm:5.3.12"
   dependencies:
-    "@rushstack/terminal": "npm:0.22.4"
+    "@rushstack/terminal": "npm:0.24.2"
     "@types/argparse": "npm:1.0.38"
     argparse: "npm:~1.0.9"
     string-argv: "npm:~0.3.1"
-  checksum: 10/86e5ae2ccb62130ea46a0fa541db4b51f02f3da7857d448e715b740e73096a88bae64310b1c703cbd4c76d0a43bc1a8130c5c3e98e79bfa33718d8008f24ce48
+  checksum: 10/56dfd2e3d338116d36c5587006193d4583ad6449fb66690a9f58c4f1afe3a263a0be1ca38c8e2d7f271f8870940b6c382531e8046ad681ef6b3eb70db73c0f8e
   languageName: node
   linkType: hard
 
-"@sentry-internal/browser-utils@npm:10.50.0":
-  version: 10.50.0
-  resolution: "@sentry-internal/browser-utils@npm:10.50.0"
+"@sentry/browser-utils@npm:10.70.0":
+  version: 10.70.0
+  resolution: "@sentry/browser-utils@npm:10.70.0"
   dependencies:
-    "@sentry/core": "npm:10.50.0"
-  checksum: 10/835e66ac1dac2901595008e14308d8df0672de5a4f3f8247ad87f466803074cbb01e9d3bfc8fa841520ddbce0f99da0810a0a46d564e19928326f38f1c27e4a2
+    "@sentry/conventions": "npm:^0.16.0"
+    "@sentry/core": "npm:10.70.0"
+  checksum: 10/a9ff168ccf59a63befabd4d37f953168c7927748a302a5c07a27bbb81b85b4d0f49a8bdd03a4e60375bb5109bf4a4913b1c7f26c45ca267014b2619b28e847a0
   languageName: node
   linkType: hard
 
-"@sentry-internal/feedback@npm:10.50.0":
-  version: 10.50.0
-  resolution: "@sentry-internal/feedback@npm:10.50.0"
+"@sentry/browser@npm:10.70.0":
+  version: 10.70.0
+  resolution: "@sentry/browser@npm:10.70.0"
   dependencies:
-    "@sentry/core": "npm:10.50.0"
-  checksum: 10/7c26ac51335d07c7313b32e296231ae644384e693434f79a2259dadefb874b8ee0a4514cacead69fab93d6a62409401763b638d83068ee78829df0ebfddd66f5
+    "@sentry/browser-utils": "npm:10.70.0"
+    "@sentry/conventions": "npm:^0.16.0"
+    "@sentry/core": "npm:10.70.0"
+    "@sentry/feedback": "npm:10.70.0"
+    "@sentry/replay": "npm:10.70.0"
+    "@sentry/replay-canvas": "npm:10.70.0"
+  checksum: 10/8b51c9e44f724ded90fec81973fa50e70f58867b0a03dee3b3449e6a228c2ad43d961df61d33df0e0251baf133d4cb05d292868c9b516ba9c40e26b00899072d
+  languageName: node
+  linkType: hard
+
+"@sentry/conventions@npm:^0.16.0":
+  version: 0.16.0
+  resolution: "@sentry/conventions@npm:0.16.0"
+  checksum: 10/21c5bdbde32ff5058954a87f7d6b40b670cdd08c10a1c6787fedc3b94b89804b0df92817e5a37d0ed60e8f1ce6747d01b840f05a5e8940742f9a1dcb0f2d490e
   languageName: node
   linkType: hard
 
-"@sentry-internal/replay-canvas@npm:10.50.0":
-  version: 10.50.0
-  resolution: "@sentry-internal/replay-canvas@npm:10.50.0"
+"@sentry/core@npm:10.70.0":
+  version: 10.70.0
+  resolution: "@sentry/core@npm:10.70.0"
   dependencies:
-    "@sentry-internal/replay": "npm:10.50.0"
-    "@sentry/core": "npm:10.50.0"
-  checksum: 10/22083f1470c7404737bae7f20597a0051239dae095df0a36bc773beeadbcea77e94b3665e46113444e6161926d334ebb8fc2d1617a3761bf192282c825ab63bf
+    "@sentry/conventions": "npm:^0.16.0"
+  checksum: 10/b580108cedde8ae38ddcb68144c2c35090d1c81ee7074c88aebfb11571246d7e31982969e952cbd0232fc5e9d5533a0c25150a31bd8e499270a846f31b4ce544
   languageName: node
   linkType: hard
 
-"@sentry-internal/replay@npm:10.50.0":
-  version: 10.50.0
-  resolution: "@sentry-internal/replay@npm:10.50.0"
+"@sentry/feedback@npm:10.70.0":
+  version: 10.70.0
+  resolution: "@sentry/feedback@npm:10.70.0"
   dependencies:
-    "@sentry-internal/browser-utils": "npm:10.50.0"
-    "@sentry/core": "npm:10.50.0"
-  checksum: 10/fbd93b0739b2e90e8f18963e99d0a43a8f690f501cc2e32968de09c6b6714b048ff05850e95076b1bf0d518ad6aa57b90048dbbf81331f1354f3ea07eea35c6e
+    "@sentry/core": "npm:10.70.0"
+  checksum: 10/a7e77ada01c315fbc0626ec2ec2e6c36f2f6f532cdf4cc1991bb1666a4474a6054b590424e80fabc228882db2c766c7adc2a4579452c1ac20a748289650bf7e4
   languageName: node
   linkType: hard
 
-"@sentry/browser@npm:10.50.0":
-  version: 10.50.0
-  resolution: "@sentry/browser@npm:10.50.0"
+"@sentry/replay-canvas@npm:10.70.0":
+  version: 10.70.0
+  resolution: "@sentry/replay-canvas@npm:10.70.0"
   dependencies:
-    "@sentry-internal/browser-utils": "npm:10.50.0"
-    "@sentry-internal/feedback": "npm:10.50.0"
-    "@sentry-internal/replay": "npm:10.50.0"
-    "@sentry-internal/replay-canvas": "npm:10.50.0"
-    "@sentry/core": "npm:10.50.0"
-  checksum: 10/8782b37578925a0fccbcf4a6bf3fc6505ef39e6c637d9042987a3811131b6d61b4ae1672673258e286e99f99689318a0756d88fe8f11ec8880299f45b49b1476
+    "@sentry/core": "npm:10.70.0"
+    "@sentry/replay": "npm:10.70.0"
+  checksum: 10/952a9b0ac42d517803ebf5b3b4b01a89297de63bcc4a1adc384c80ea5c4d5fae927364fdd1102ea1c87587d6de80a99a91ecf862052e7ef3070d8b71bcf245e8
   languageName: node
   linkType: hard
 
-"@sentry/core@npm:10.50.0":
-  version: 10.50.0
-  resolution: "@sentry/core@npm:10.50.0"
-  checksum: 10/9d0c0cfd706e2b318dbb13b03a1fa1aee89ebceed00e67a9cbb7f088a338bc21714432740c538878fc144ddfba263ff48b704394fa2cd4c68ddb5c95080556e5
+"@sentry/replay@npm:10.70.0":
+  version: 10.70.0
+  resolution: "@sentry/replay@npm:10.70.0"
+  dependencies:
+    "@sentry/browser-utils": "npm:10.70.0"
+    "@sentry/core": "npm:10.70.0"
+  checksum: 10/92dd9d33ebddb5fcb39f7c369cf4414d70e7c17b770fd91ba04d96297c536d71656b11c7e676c80886e35d12bc097aab59dc2fd42f0113801b7d81bd2ddf07d5
   languageName: node
   linkType: hard
 
-"@sentry/vue@npm:^10.50.0":
-  version: 10.50.0
-  resolution: "@sentry/vue@npm:10.50.0"
+"@sentry/vue@npm:^10.70.0":
+  version: 10.70.0
+  resolution: "@sentry/vue@npm:10.70.0"
   dependencies:
-    "@sentry/browser": "npm:10.50.0"
-    "@sentry/core": "npm:10.50.0"
+    "@sentry/browser": "npm:10.70.0"
+    "@sentry/conventions": "npm:^0.16.0"
+    "@sentry/core": "npm:10.70.0"
   peerDependencies:
     "@tanstack/vue-router": ^1.64.0
-    pinia: 2.x || 3.x
+    pinia: 2.x || 3.x || 4.x
     vue: 2.x || 3.x
   peerDependenciesMeta:
     "@tanstack/vue-router":
       optional: true
     pinia:
       optional: true
-  checksum: 10/e8f661361d6910dcb4b7e987582b6335b3e3363d2434884fb081e965e8b7b74f2a31b1c7f0f976a83307eb7aca942b8e068417280e2634ff0aff3330f5f7461a
+  checksum: 10/96fa3c9ea76e9f5e17615cd6bc594c1ee237cc1d9e79b70df92891771b85dca46a58923cc36d0c1b4e4c48050e50f39f59677b17c4612f77c158de791b065592
   languageName: node
   linkType: hard
 
@@ -2512,16 +2562,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@shikijs/core@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/core@npm:4.0.2"
+"@shikijs/core@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/core@npm:4.4.3"
   dependencies:
-    "@shikijs/primitive": "npm:4.0.2"
-    "@shikijs/types": "npm:4.0.2"
+    "@shikijs/primitive": "npm:4.4.3"
+    "@shikijs/types": "npm:4.4.3"
     "@shikijs/vscode-textmate": "npm:^10.0.2"
-    "@types/hast": "npm:^3.0.4"
+    "@types/hast": "npm:^3.0.5"
     hast-util-to-html: "npm:^9.0.5"
-  checksum: 10/e51a5fe3e7a9c229d1405e37a8004a25869fe3ed84322fe445d822279e84decf435f8e71601e1346aea39f072169f00fd3aeb7ca2db8b77efe083e623ad0c8e4
+  checksum: 10/d5f1dfabe8e3bbde2e594ccbe74185bea5a97dfdd44d3feea451745163a6b59109cb8e07bbea7f7ef4901e6e1ad20bba818befac80f09e06d3ca20fd5f2c2376
   languageName: node
   linkType: hard
 
@@ -2536,14 +2586,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@shikijs/engine-javascript@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/engine-javascript@npm:4.0.2"
+"@shikijs/engine-javascript@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/engine-javascript@npm:4.4.3"
   dependencies:
-    "@shikijs/types": "npm:4.0.2"
+    "@shikijs/types": "npm:4.4.3"
     "@shikijs/vscode-textmate": "npm:^10.0.2"
-    oniguruma-to-es: "npm:^4.3.4"
-  checksum: 10/3a68cd4475fb0e880209c3c17545861cdbca9b8894a3fb87ec5f4dada065217bcad7c7822c296de35eef32f48857285361d0146dd63b18b318d4a532c8614b8b
+    oniguruma-to-es: "npm:^4.3.6"
+  checksum: 10/1a13f560507f8219fbcf41523a222556c4e1bd3d76b597abb1b1f2579376428b4211c808cfadbb862be39268a37ff7f58236ea0caba798d229e97a51347acb65
   languageName: node
   linkType: hard
 
@@ -2557,13 +2607,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@shikijs/engine-oniguruma@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/engine-oniguruma@npm:4.0.2"
+"@shikijs/engine-oniguruma@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/engine-oniguruma@npm:4.4.3"
   dependencies:
-    "@shikijs/types": "npm:4.0.2"
+    "@shikijs/types": "npm:4.4.3"
     "@shikijs/vscode-textmate": "npm:^10.0.2"
-  checksum: 10/5ca292288eb966906cd016ba380742898eb85edc9df6a6bb1486068e9dc4698d67f1a0f2c5fa3eefd4cd4141b870f6b6eaf1e3bc59bd6ce3219eec99bf54767d
+  checksum: 10/46d73555d8ef133e6b44a08da28463e02904427119cab6046c4d97e95ce2320863b404726bfc399f05673f104bca847ebe96ef4ca72f564448708e42ec8b7b67
   languageName: node
   linkType: hard
 
@@ -2576,23 +2626,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@shikijs/langs@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/langs@npm:4.0.2"
+"@shikijs/langs@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/langs@npm:4.4.3"
   dependencies:
-    "@shikijs/types": "npm:4.0.2"
-  checksum: 10/608594a92fe1e1e6a5d0dad7933b54622bfdb1ddcddf116869b94f41a0277268af9dfd260e301b6a9418d8a0eed5563a4962e7a77d8bb6cfc32f331bb07c285a
+    "@shikijs/types": "npm:4.4.3"
+  checksum: 10/ed046887703dc1125425c9b1dd74af466677fe9ead85c6cb0cd7cc13eee7764c65af1f7d3e46b90b1cc94c48b48043e926899b49dc351eb3af93b9fd7639f119
   languageName: node
   linkType: hard
 
-"@shikijs/primitive@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/primitive@npm:4.0.2"
+"@shikijs/primitive@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/primitive@npm:4.4.3"
   dependencies:
-    "@shikijs/types": "npm:4.0.2"
+    "@shikijs/types": "npm:4.4.3"
     "@shikijs/vscode-textmate": "npm:^10.0.2"
-    "@types/hast": "npm:^3.0.4"
-  checksum: 10/c364d2bfe210829d4aeca6267393eb77a814d8a39dfad2555aee45eed5837788cdf098bd103387b067af1c7638f27c822158f373cd4086f13f88ed43c030e45d
+    "@types/hast": "npm:^3.0.5"
+  checksum: 10/5c8788cb1b0c36ae11038d699196ee5a14a68c1a48f2dd1cdd7e2a53fe5b68f966e99e2a4adbe99705a809902be5f7a73f0720899f788a4945cdba4d2fbe29ca
   languageName: node
   linkType: hard
 
@@ -2605,12 +2655,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@shikijs/themes@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/themes@npm:4.0.2"
+"@shikijs/themes@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/themes@npm:4.4.3"
   dependencies:
-    "@shikijs/types": "npm:4.0.2"
-  checksum: 10/26a90ab3c2ef858997e0aa5542eb3f93a46711607358e16a1c137a613418d4e119167c21514ddfa03e287565626a589e60919867e78c515901cc58b239d9ef73
+    "@shikijs/types": "npm:4.4.3"
+  checksum: 10/c196c97871c21be3b148deed5ab8848cee6398a9ffd4d87508e320f840934a1dfb7efe1ae0988803a5546239941daa801c263666e43cc7b80ef487ada20b3895
   languageName: node
   linkType: hard
 
@@ -2624,16 +2674,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@shikijs/twoslash@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/twoslash@npm:4.0.2"
+"@shikijs/twoslash@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/twoslash@npm:4.4.3"
   dependencies:
-    "@shikijs/core": "npm:4.0.2"
-    "@shikijs/types": "npm:4.0.2"
-    twoslash: "npm:^0.3.6"
+    "@shikijs/core": "npm:4.4.3"
+    "@shikijs/types": "npm:4.4.3"
+    twoslash: "npm:^0.3.9"
   peerDependencies:
     typescript: ">=5.5.0"
-  checksum: 10/cd46d22fe81a3e92d7766d14fd2bfd07ae3bfd597d5cb6a6af35fbbd179169fe8599bad325b1f240061543b878c2546196000c0df05cc239a1957d4f68d397c0
+  checksum: 10/f9663c9a9f4dfa7558a3779c9323dfd3f77fe53aa4cc158b2f84347391abc2c9a3d34dd0cb00c78a69d74fcb394d2434107893f7aff377ce9844a6abcff6a7ba
   languageName: node
   linkType: hard
 
@@ -2647,34 +2697,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@shikijs/types@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/types@npm:4.0.2"
+"@shikijs/types@npm:4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/types@npm:4.4.3"
   dependencies:
     "@shikijs/vscode-textmate": "npm:^10.0.2"
-    "@types/hast": "npm:^3.0.4"
-  checksum: 10/d4f016b61a0bbc6a50522ed6b5c1d6e0edf7fabbb981e9373813f872306a777b352b241c10b337a658e642c332acd01d86686bb2b69cd6795abe2d732ff25d1b
+    "@types/hast": "npm:^3.0.5"
+  checksum: 10/78d795d41addb8e0e64c856d36974c48053b5c9bfe96593eae767d1d9c1a38d40d7b3f192f1790c49fa91145df9b4b466c9d0283d6aba1c5a2324230f8b851f8
   languageName: node
   linkType: hard
 
-"@shikijs/vitepress-twoslash@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "@shikijs/vitepress-twoslash@npm:4.0.2"
+"@shikijs/vitepress-twoslash@npm:^4.4.3":
+  version: 4.4.3
+  resolution: "@shikijs/vitepress-twoslash@npm:4.4.3"
   dependencies:
-    "@shikijs/twoslash": "npm:4.0.2"
+    "@shikijs/twoslash": "npm:4.4.3"
     floating-vue: "npm:^5.2.2"
     lz-string: "npm:^1.5.0"
-    magic-string: "npm:^0.30.21"
-    markdown-it: "npm:^14.1.1"
+    magic-string: "npm:^1.1.0"
+    markdown-it: "npm:^14.3.0"
     mdast-util-from-markdown: "npm:^2.0.3"
     mdast-util-gfm: "npm:^3.1.0"
     mdast-util-to-hast: "npm:^13.2.1"
     ohash: "npm:^2.0.11"
-    shiki: "npm:4.0.2"
-    twoslash: "npm:^0.3.6"
-    twoslash-vue: "npm:^0.3.6"
-    vue: "npm:^3.5.29"
-  checksum: 10/d9dba1cb5988df23cbde34ed7a7800511e60dc095ac70656b62a797962fdd479c306cf8ff43b60a6adf2c20ae79413fc5f7b8ad3a1f4c6b8f6bfd486c44b0ee2
+    shiki: "npm:4.4.3"
+    twoslash: "npm:^0.3.9"
+    twoslash-vue: "npm:^0.3.9"
+    vue: "npm:^3.5.41"
+  checksum: 10/ee25a5d01c498af61199844b8d1cee3c3c1ccb7c310d0ea9aa489d29d4c34f8cef44cbb2642176a4ed186a9f72e5e08a8e23b0b746bd47ac092fcee22d796e57
   languageName: node
   linkType: hard
 
@@ -2785,12 +2835,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hast@npm:^3.0.0, @types/hast@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "@types/hast@npm:3.0.4"
+"@types/hast@npm:^3.0.0, @types/hast@npm:^3.0.4, @types/hast@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "@types/hast@npm:3.0.5"
   dependencies:
     "@types/unist": "npm:*"
-  checksum: 10/732920d81bb7605895776841b7658b4d8cc74a43a8fa176017cc0fb0ecc1a4c82a2b75a4fe6b71aa262b649d3fb62858c6789efa3793ea1d40269953af96ecb5
+  checksum: 10/864a274e6e5ce0662de3bf984d804aea1f0e64eb4d5ffed27d9e832ee0002e76dfa18f1812a96b7cc24e2a9f40125ff2e47f73f7ab90c815840047c197d89635
+  languageName: node
+  linkType: hard
+
+"@types/jsesc@npm:^2.5.0":
+  version: 2.5.1
+  resolution: "@types/jsesc@npm:2.5.1"
+  checksum: 10/25407775ed621790d2eec0cc51e194bd0d67a82e39204fd9748899c249ef965e17d9e6560f6c658773714f6d45a259465f3639790bb55750ebb168ee23801596
   languageName: node
   linkType: hard
 
@@ -2850,12 +2907,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^24.12.2":
-  version: 24.12.2
-  resolution: "@types/node@npm:24.12.2"
+"@types/node@npm:^24.13.3":
+  version: 24.13.3
+  resolution: "@types/node@npm:24.13.3"
   dependencies:
-    undici-types: "npm:~7.16.0"
-  checksum: 10/99b9f15e67a4b3c39b39ad83ee0febad7f0b4709c004863104d7acfa4146dd7e58c12a08a9a7ff2be8c2eefd0063bf991fade0879d7c4a370a0ee7fd4c799e8a
+    undici-types: "npm:~7.18.0"
+  checksum: 10/cfa6ed1e16c4624d1e83b09aeb72a2f50a7e17d837bf5a1259a52e346f33a693afd289402d3b6118ce3abea7aff35f2a4f13a0284b96bc5807a50f0e22e1ec77
   languageName: node
   linkType: hard
 
@@ -2896,105 +2953,105 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:8.58.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.58.0"
+"@typescript-eslint/eslint-plugin@npm:8.60.1":
+  version: 8.60.1
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.60.1"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.12.2"
-    "@typescript-eslint/scope-manager": "npm:8.58.0"
-    "@typescript-eslint/type-utils": "npm:8.58.0"
-    "@typescript-eslint/utils": "npm:8.58.0"
-    "@typescript-eslint/visitor-keys": "npm:8.58.0"
+    "@typescript-eslint/scope-manager": "npm:8.60.1"
+    "@typescript-eslint/type-utils": "npm:8.60.1"
+    "@typescript-eslint/utils": "npm:8.60.1"
+    "@typescript-eslint/visitor-keys": "npm:8.60.1"
     ignore: "npm:^7.0.5"
     natural-compare: "npm:^1.4.0"
     ts-api-utils: "npm:^2.5.0"
   peerDependencies:
-    "@typescript-eslint/parser": ^8.58.0
+    "@typescript-eslint/parser": ^8.60.1
     eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
     typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/0b1f4d4e62279fc5925c0a89d94816db0e236648eb4aec522cf22071877c6ecc63146b6830a1075049f402b842f45d7332ce6ae67883639754dcbb1881d07c34
+  checksum: 10/f3633bb2700bc32299578baeaf6650418656229be256147ba9d1ab09b34ef2b7fed83804ef4d2439e9189dbdcb89399d67bc8fea55262be6caa32114be048538
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:8.58.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/parser@npm:8.58.0"
+"@typescript-eslint/parser@npm:8.60.1":
+  version: 8.60.1
+  resolution: "@typescript-eslint/parser@npm:8.60.1"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.58.0"
-    "@typescript-eslint/types": "npm:8.58.0"
-    "@typescript-eslint/typescript-estree": "npm:8.58.0"
-    "@typescript-eslint/visitor-keys": "npm:8.58.0"
+    "@typescript-eslint/scope-manager": "npm:8.60.1"
+    "@typescript-eslint/types": "npm:8.60.1"
+    "@typescript-eslint/typescript-estree": "npm:8.60.1"
+    "@typescript-eslint/visitor-keys": "npm:8.60.1"
     debug: "npm:^4.4.3"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
     typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/0498e593b14841023b7495544637acaca84807de1ac17174fa9331af61ba35791da919e16680c6897002b4a843d5f0fe812c460a28a65fca7e3ae8e5971baf7a
+  checksum: 10/f9c484c4a3897015328f328a1c6ee778d113dd134201f635c0421cb72efe6e63f3a68524aff0df6e19e76ff93daf5cabd946e67f12f10dddcf19bda534aa68dc
   languageName: node
   linkType: hard
 
-"@typescript-eslint/project-service@npm:8.58.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/project-service@npm:8.58.0"
+"@typescript-eslint/project-service@npm:8.60.1":
+  version: 8.60.1
+  resolution: "@typescript-eslint/project-service@npm:8.60.1"
   dependencies:
-    "@typescript-eslint/tsconfig-utils": "npm:^8.58.0"
-    "@typescript-eslint/types": "npm:^8.58.0"
+    "@typescript-eslint/tsconfig-utils": "npm:^8.60.1"
+    "@typescript-eslint/types": "npm:^8.60.1"
     debug: "npm:^4.4.3"
   peerDependencies:
     typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/fab2601f76b2df61b09e3b7ff364d0e17e6d80e65e84e8a8d11f6a0813748bed3912da098659d00f46b1f277d462bd7529157182b72b5e2e0b41ee6176a0edd7
+  checksum: 10/fec693dd79c3a1e6a24091127a37af4eb9d9cee8192cf2a434adae48543eadff834bc0623b5b563c8b592b250bc080570f9e7b42807252ea898442c525beeee9
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.58.0, @typescript-eslint/scope-manager@npm:^8.13.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.58.0"
+"@typescript-eslint/scope-manager@npm:8.60.1, @typescript-eslint/scope-manager@npm:^8.13.0":
+  version: 8.60.1
+  resolution: "@typescript-eslint/scope-manager@npm:8.60.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.58.0"
-    "@typescript-eslint/visitor-keys": "npm:8.58.0"
-  checksum: 10/97293f1215faa785a3c1ee8d630591db9dcd5fb6bdcdd0b2e818c80478d41e59a05003fb33000530780dc466fb8cf662352932080ee7406c4aaac72af4000541
+    "@typescript-eslint/types": "npm:8.60.1"
+    "@typescript-eslint/visitor-keys": "npm:8.60.1"
+  checksum: 10/7228c110410ff8cfc01e96d8f17c986f8b4dd447fe3a3291baaab8fe946026ccdf0291865f788f18cf538ab49bfc067fe797708b6b8590104a65f7e69f921cc5
   languageName: node
   linkType: hard
 
-"@typescript-eslint/tsconfig-utils@npm:8.58.0, @typescript-eslint/tsconfig-utils@npm:^8.58.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/tsconfig-utils@npm:8.58.0"
+"@typescript-eslint/tsconfig-utils@npm:8.60.1, @typescript-eslint/tsconfig-utils@npm:^8.60.1":
+  version: 8.60.1
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.60.1"
   peerDependencies:
     typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/4f47212c0e26e6b06e97044ec5e483007d5145ef6b205393a0b43cbc0b385c75c14ba5749d01cf7d1ff100332c2cf1d336f060f7d2191bb67fb892bb4446afaa
+  checksum: 10/afc78b19b856a71dc4e493f931ae44e1a91dc6441a14cb92e4063db880892f3874768f9d347d4b2f45362f2090e4455407c70f42027d77ddc85d6cba95cdb76c
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:8.58.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/type-utils@npm:8.58.0"
+"@typescript-eslint/type-utils@npm:8.60.1":
+  version: 8.60.1
+  resolution: "@typescript-eslint/type-utils@npm:8.60.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.58.0"
-    "@typescript-eslint/typescript-estree": "npm:8.58.0"
-    "@typescript-eslint/utils": "npm:8.58.0"
+    "@typescript-eslint/types": "npm:8.60.1"
+    "@typescript-eslint/typescript-estree": "npm:8.60.1"
+    "@typescript-eslint/utils": "npm:8.60.1"
     debug: "npm:^4.4.3"
     ts-api-utils: "npm:^2.5.0"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
     typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/da09868cd0b2cebb8cc4494e73aeed3997a7a4ff899fef496c54731610af1f92f8e3169f9b7f23060105db892f3bc880aacc0bdc7c1734ea5829252230c13aea
+  checksum: 10/6f426263be597063831bf308e52328e8d387af5db955a09cb85fde1c72f5b1b36a365133b9c9a74330e5e948e59bf9a9b82605f4c9c4e3bf9b6cb7f4c37e4b18
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.58.0, @typescript-eslint/types@npm:^8.56.0, @typescript-eslint/types@npm:^8.58.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/types@npm:8.58.0"
-  checksum: 10/c68eac0bc25812fdbb2ed4a121e42bfca9f24f3c6be95f6a9c4e7b9af767f1bcfacd6d496e358166143e0a1801dc7d042ce1b5e69946ac2768d9114ff6b8d375
+"@typescript-eslint/types@npm:8.60.1, @typescript-eslint/types@npm:^8.56.0, @typescript-eslint/types@npm:^8.60.1":
+  version: 8.60.1
+  resolution: "@typescript-eslint/types@npm:8.60.1"
+  checksum: 10/c603417e621b5b1263c2f60fad9e202d560fd07fce7f40e9a356c0530e5eaf0ff1a9af865237bf93aa18a5a4e2f034ee0cce0fe6c070f08df33e35a099bdea47
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.58.0, @typescript-eslint/typescript-estree@npm:^8.13.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.58.0"
+"@typescript-eslint/typescript-estree@npm:8.60.1, @typescript-eslint/typescript-estree@npm:^8.13.0":
+  version: 8.60.1
+  resolution: "@typescript-eslint/typescript-estree@npm:8.60.1"
   dependencies:
-    "@typescript-eslint/project-service": "npm:8.58.0"
-    "@typescript-eslint/tsconfig-utils": "npm:8.58.0"
-    "@typescript-eslint/types": "npm:8.58.0"
-    "@typescript-eslint/visitor-keys": "npm:8.58.0"
+    "@typescript-eslint/project-service": "npm:8.60.1"
+    "@typescript-eslint/tsconfig-utils": "npm:8.60.1"
+    "@typescript-eslint/types": "npm:8.60.1"
+    "@typescript-eslint/visitor-keys": "npm:8.60.1"
     debug: "npm:^4.4.3"
     minimatch: "npm:^10.2.2"
     semver: "npm:^7.7.3"
@@ -3002,36 +3059,36 @@ __metadata:
     ts-api-utils: "npm:^2.5.0"
   peerDependencies:
     typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/4d6c4175e8a4d5c097393d161016836cc322f090c3f69fd751f5bbc25afce64df9ea0c97cee8b36ac060e06dc2cca2a4de7a0c7e04e19727cc4bd98ab3291fed
+  checksum: 10/9c3a56266aadf589bc6e770cd04cb3f55b1ee1507dcacda61866408c656ae4462aa7e11baf39eb939bc4d1e3b843cf58e60f3ebdeb3e75f042ff0f6fb39c311b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.58.0, @typescript-eslint/utils@npm:^8.56.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/utils@npm:8.58.0"
+"@typescript-eslint/utils@npm:8.60.1, @typescript-eslint/utils@npm:^8.60.0":
+  version: 8.60.1
+  resolution: "@typescript-eslint/utils@npm:8.60.1"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.9.1"
-    "@typescript-eslint/scope-manager": "npm:8.58.0"
-    "@typescript-eslint/types": "npm:8.58.0"
-    "@typescript-eslint/typescript-estree": "npm:8.58.0"
+    "@typescript-eslint/scope-manager": "npm:8.60.1"
+    "@typescript-eslint/types": "npm:8.60.1"
+    "@typescript-eslint/typescript-estree": "npm:8.60.1"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
     typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/936433b761a990147612d78bb4afc79244239541b4a4061fbbc2de1810b40ec7f78eb4e9181e5d9c5ab7acbd9bf49fc6195dbb1d823370f717f07ad492ad6c7e
+  checksum: 10/a75f8714995b6280b4c15ca957bbc6634862453461111e4a2a07b8bc72b51a504484a9b957fc5b7a646c4bf09f1e414a0c52cd3b6798c42fb8c4de83b1b5a364
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.58.0":
-  version: 8.58.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.58.0"
+"@typescript-eslint/visitor-keys@npm:8.60.1":
+  version: 8.60.1
+  resolution: "@typescript-eslint/visitor-keys@npm:8.60.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.58.0"
+    "@typescript-eslint/types": "npm:8.60.1"
     eslint-visitor-keys: "npm:^5.0.0"
-  checksum: 10/50b0779e19079dedf3723323a4dfa398c639b3da48f2fcf071c22ca69342e03592f1726d68ea59b9b5a51f14ab112eabc5c93fd2579c84b02a3320042ae20066
+  checksum: 10/6d120b4a790477ae0291e69f6457686c71b929cc40519148f6b6c7fbc09604b15821ae8cf1005aa23acec5105b4016db256a68d68f30eda8d6c24d4fdb0ede86
   languageName: node
   linkType: hard
 
-"@typescript/vfs@npm:^1.6.2":
+"@typescript/vfs@npm:^1.6.4":
   version: 1.6.4
   resolution: "@typescript/vfs@npm:1.6.4"
   dependencies:
@@ -3059,72 +3116,72 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-vue@npm:^6.0.6":
-  version: 6.0.6
-  resolution: "@vitejs/plugin-vue@npm:6.0.6"
+"@vitejs/plugin-vue@npm:^6.0.8":
+  version: 6.0.8
+  resolution: "@vitejs/plugin-vue@npm:6.0.8"
   dependencies:
-    "@rolldown/pluginutils": "npm:1.0.0-rc.13"
+    "@rolldown/pluginutils": "npm:^1.0.1"
   peerDependencies:
     vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     vue: ^3.2.25
-  checksum: 10/f1eac02fd877fc3fce9d8c17f835c9fbc0573156805cddb936630fcfcffc5b94ad32cb3f1c48e3833e3940cd309a6d4fb0a71196b3b9ad6623ce4e7330769564
+  checksum: 10/f061707d746c993767e94afb6e51402a25ace9534cd7178ee34ff8e78ee62bfee9d23ea3cd1937c0cfc4a07b21bca851059f63978ca97202b6dc264f637fd88e
   languageName: node
   linkType: hard
 
-"@vitest/browser-playwright@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/browser-playwright@npm:4.1.5"
+"@vitest/browser-playwright@npm:^4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/browser-playwright@npm:4.1.10"
   dependencies:
-    "@vitest/browser": "npm:4.1.5"
-    "@vitest/mocker": "npm:4.1.5"
+    "@vitest/browser": "npm:4.1.10"
+    "@vitest/mocker": "npm:4.1.10"
     tinyrainbow: "npm:^3.1.0"
   peerDependencies:
     playwright: "*"
-    vitest: 4.1.5
+    vitest: 4.1.10
   peerDependenciesMeta:
     playwright:
       optional: false
-  checksum: 10/a69c8e9f8efd3dc3e28a9faaa3656c9e5713f93093fbaeda2f9b268ea3c30de08d8c5fe28001e54a9adcb0d1c66f7298803f9451751c7cd5c4d6274b68f5555c
+  checksum: 10/deac879677899a7e5200ad7d46a66dbf07dd68f6ad0d258b03825337a1fa5417851af189291ea21284137760595b94c1f5bff12b82a5471422ba5d2512aacb3a
   languageName: node
   linkType: hard
 
-"@vitest/browser@npm:4.1.5, @vitest/browser@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/browser@npm:4.1.5"
+"@vitest/browser@npm:4.1.10, @vitest/browser@npm:^4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/browser@npm:4.1.10"
   dependencies:
     "@blazediff/core": "npm:1.9.1"
-    "@vitest/mocker": "npm:4.1.5"
-    "@vitest/utils": "npm:4.1.5"
+    "@vitest/mocker": "npm:4.1.10"
+    "@vitest/utils": "npm:4.1.10"
     magic-string: "npm:^0.30.21"
     pngjs: "npm:^7.0.0"
     sirv: "npm:^3.0.2"
     tinyrainbow: "npm:^3.1.0"
     ws: "npm:^8.19.0"
   peerDependencies:
-    vitest: 4.1.5
-  checksum: 10/830e4fff6eda823ad16e4336a67350aa1928ed5131d60290ec1e2dd0f5bc39431317047d550a415462ac0600d48c6684f9c2b4b3d3e48edd18adba080e3f1667
+    vitest: 4.1.10
+  checksum: 10/52c3f94de6b755bbe5165874a6f0e4ea66331b81b355423fa43b73d963d1f2eaedb1d9ab24e124430e12f39cdf496f360715415e76756f42ccf09d6079a8bafb
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/expect@npm:4.1.5"
+"@vitest/expect@npm:4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/expect@npm:4.1.10"
   dependencies:
     "@standard-schema/spec": "npm:^1.1.0"
     "@types/chai": "npm:^5.2.2"
-    "@vitest/spy": "npm:4.1.5"
-    "@vitest/utils": "npm:4.1.5"
+    "@vitest/spy": "npm:4.1.10"
+    "@vitest/utils": "npm:4.1.10"
     chai: "npm:^6.2.2"
     tinyrainbow: "npm:^3.1.0"
-  checksum: 10/3e94d2d0cf4f7018ed6a7a9394bff971353ea0cc85bcbcff39212279156840b8c533be99e2fd52112e4904c4a5190bdaaf441db7c6b17e356c18577072a3f057
+  checksum: 10/487fcad404a68968a54ae5fb9d099f12170cd793420a04b34a5606516317090c50a8303ab687c70166ee181864e3e138941d4a96d0405434dcd37696b3105350
   languageName: node
   linkType: hard
 
-"@vitest/mocker@npm:4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/mocker@npm:4.1.5"
+"@vitest/mocker@npm:4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/mocker@npm:4.1.10"
   dependencies:
-    "@vitest/spy": "npm:4.1.5"
+    "@vitest/spy": "npm:4.1.10"
     estree-walker: "npm:^3.0.3"
     magic-string: "npm:^0.30.21"
   peerDependencies:
@@ -3135,53 +3192,53 @@ __metadata:
       optional: true
     vite:
       optional: true
-  checksum: 10/949784ba08996543a313459a36a730d4b0847e42ee56cfda07a3e2add67c7adf8acbd59dcf9f75b1e4bc3fe7cc487f9f260905ff9a334866d389478112e5ae82
+  checksum: 10/ae9645d1bcdad3ab7de7182feb4f1c9148a5ff97cef19581eec9257112aace94889eee9a1ad12e40ce59453ac05f52453b5fdb49ff76a31af8ccdbaaa4471ef3
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/pretty-format@npm:4.1.5"
+"@vitest/pretty-format@npm:4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/pretty-format@npm:4.1.10"
   dependencies:
     tinyrainbow: "npm:^3.1.0"
-  checksum: 10/783f8c4a0e419d1024446ae8593411c95443ea09b50c4a378986b48893998acda34429b2d1deebc065405a7ef40bb19e19c68fdeb93acd46ae98b156c42d5f39
+  checksum: 10/e4f6907143ab0e40dda29d70b17027586c92921d622091321f10512e660b3995dcee7aa56e17b750b72560f295e25f96035372348415f18ebfd39b66a55b4704
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/runner@npm:4.1.5"
+"@vitest/runner@npm:4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/runner@npm:4.1.10"
   dependencies:
-    "@vitest/utils": "npm:4.1.5"
+    "@vitest/utils": "npm:4.1.10"
     pathe: "npm:^2.0.3"
-  checksum: 10/ba19d84a9f7bcc3102ae5304c23e5dae789aaf8fd283f826e3fd4aca87ea2687ed606cf89869773d15799666553fd265524f7d9a0869e2869e00ebd8fd53af5b
+  checksum: 10/2c962cb13af0880990036808a35679b7ac6657c8f542490234c2faa6ffd2ab080ac6bf21b487c64d84aa635cfb37b49eb679098c2003a100dfc6c4d5e87bf055
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/snapshot@npm:4.1.5"
+"@vitest/snapshot@npm:4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/snapshot@npm:4.1.10"
   dependencies:
-    "@vitest/pretty-format": "npm:4.1.5"
-    "@vitest/utils": "npm:4.1.5"
+    "@vitest/pretty-format": "npm:4.1.10"
+    "@vitest/utils": "npm:4.1.10"
     magic-string: "npm:^0.30.21"
     pathe: "npm:^2.0.3"
-  checksum: 10/cf70530d8a7320c012bdf7f6ca4f3ddbbb47c9aeb9ff5d28319e552ce64db93423d0c4facff3e112c6d711ed4228369c8fa73c88350fe6c16cf04f9ac2558caf
+  checksum: 10/7940d83ffd2fbebf9a04ea31e196b7e8bf981093ec739950959fe8dd29caa33c80823780fb4b1063d9459c44a0a8d8b2748c00dfb6941becd7404e6d687eea01
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/spy@npm:4.1.5"
-  checksum: 10/4db4bb3aea01cd737fdb06d8f498bcd2127b8c2afeaa78ff9df4147e1474aa26dd16f42dc0512c31385824e94dbb17b17fa0f4c60b7595b7b4ab946f098220ab
+"@vitest/spy@npm:4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/spy@npm:4.1.10"
+  checksum: 10/7c1b79a95474338e0659f0f2e43be4df1ef7939ff5b37b044954e0287582947803bd417508f44a7f244809672309d9b3dd67660b704ec3fe7f323cc958ae47a3
   languageName: node
   linkType: hard
 
-"@vitest/ui@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/ui@npm:4.1.5"
+"@vitest/ui@npm:^4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/ui@npm:4.1.10"
   dependencies:
-    "@vitest/utils": "npm:4.1.5"
+    "@vitest/utils": "npm:4.1.10"
     fflate: "npm:^0.8.2"
     flatted: "npm:^3.4.2"
     pathe: "npm:^2.0.3"
@@ -3189,23 +3246,23 @@ __metadata:
     tinyglobby: "npm:^0.2.15"
     tinyrainbow: "npm:^3.1.0"
   peerDependencies:
-    vitest: 4.1.5
-  checksum: 10/e318d78d60d100fe8717d841be07ff920ae91e5655d4e35048be057099cd697026c1fffbc0587760095422b77a1708c433bf8449500d0197a2a67a44f02a8edc
+    vitest: 4.1.10
+  checksum: 10/1bf05d5bdc620f2c851038e9f4132a3d2e8bc4289654508ee6b1fa6f51e4b42ae4274bd044f1db07a95944ea105a2474457e4855e2e3509eb445c5158acce5b8
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:4.1.5":
-  version: 4.1.5
-  resolution: "@vitest/utils@npm:4.1.5"
+"@vitest/utils@npm:4.1.10":
+  version: 4.1.10
+  resolution: "@vitest/utils@npm:4.1.10"
   dependencies:
-    "@vitest/pretty-format": "npm:4.1.5"
+    "@vitest/pretty-format": "npm:4.1.10"
     convert-source-map: "npm:^2.0.0"
     tinyrainbow: "npm:^3.1.0"
-  checksum: 10/4f75a2df6f910578a361ae92eb92a2b6921f50cc748994f3b2e5900d0ae687b6683f33b090dedf9b96eaca23bac117817d9448a4a333c7a96b94ee767399f18c
+  checksum: 10/95484aad55c7b00bbcd4963e27cbb86fe207620a6093973d68da9d0a06bad37c388d84c9ab43d5f35d88e46c8f376a5592d9c54c025c958361160f4802bb25ee
   languageName: node
   linkType: hard
 
-"@volar/language-core@npm:2.4.28, @volar/language-core@npm:~2.4.11":
+"@volar/language-core@npm:2.4.28":
   version: 2.4.28
   resolution: "@volar/language-core@npm:2.4.28"
   dependencies:
@@ -3250,7 +3307,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/typescript@npm:2.4.28, @volar/typescript@npm:^2.4.11":
+"@volar/typescript@npm:2.4.28, @volar/typescript@npm:^2.4.26":
   version: 2.4.28
   resolution: "@volar/typescript@npm:2.4.28"
   dependencies:
@@ -3281,9 +3338,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue-macros/common@npm:^3.1.1":
-  version: 3.1.2
-  resolution: "@vue-macros/common@npm:3.1.2"
+"@vue-macros/common@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "@vue-macros/common@npm:3.1.3"
   dependencies:
     "@vue/compiler-sfc": "npm:^3.5.22"
     ast-kit: "npm:^2.1.2"
@@ -3295,67 +3352,57 @@ __metadata:
   peerDependenciesMeta:
     vue:
       optional: true
-  checksum: 10/3b1868c0ded9c9f1b025d3856e9ba447a380459273d5eafc02ad450c191cea215d39348886ef2fd450ae4902892704594d1d1d2fa159133e268838e6e54e5f0c
+  checksum: 10/cd70886f2f5c4c13cfed9a629db07adccfb2de4c303e4955ff3686355d59cb754eea0903663d166d87003dd43edc42d0bb2fbaac1a9aa7e61c85ddf8d73d3fc7
   languageName: node
   linkType: hard
 
-"@vue/compiler-core@npm:3.5.33":
-  version: 3.5.33
-  resolution: "@vue/compiler-core@npm:3.5.33"
+"@vue/compiler-core@npm:3.5.41":
+  version: 3.5.41
+  resolution: "@vue/compiler-core@npm:3.5.41"
   dependencies:
-    "@babel/parser": "npm:^7.29.2"
-    "@vue/shared": "npm:3.5.33"
+    "@babel/parser": "npm:^7.29.8"
+    "@vue/shared": "npm:3.5.41"
     entities: "npm:^7.0.1"
     estree-walker: "npm:^2.0.2"
     source-map-js: "npm:^1.2.1"
-  checksum: 10/ffbbbaa1e78d2be56f6903d332dd9c662150fd5c291cbc6f8bdf6635efe85fcca4d870aa12b91c39f5010af8d084e650eded7f4dbd3a5ae86f8414a69dcdc1a9
+  checksum: 10/22f1aad3c4a853f8d4bf4c4bce9aae1a85863151c143c27cca91c4b3e4f7d0fd6e73572d8d92f56daea4ad878af62dadf9eb93af80e37a4a8ca0c019a740e318
   languageName: node
   linkType: hard
 
-"@vue/compiler-dom@npm:3.5.33, @vue/compiler-dom@npm:^3.2.45, @vue/compiler-dom@npm:^3.5.0":
-  version: 3.5.33
-  resolution: "@vue/compiler-dom@npm:3.5.33"
+"@vue/compiler-dom@npm:3.5.41, @vue/compiler-dom@npm:^3.2.45, @vue/compiler-dom@npm:^3.5.0":
+  version: 3.5.41
+  resolution: "@vue/compiler-dom@npm:3.5.41"
   dependencies:
-    "@vue/compiler-core": "npm:3.5.33"
-    "@vue/shared": "npm:3.5.33"
-  checksum: 10/15b9766f78ea079d25ddc699ba1bb923156b3e995e736b6391919dd820c30d4edd206ad7ffebbed4afe0409b5b60d3a803c0d9a11a2523c30bed5c1ccfc65fe2
+    "@vue/compiler-core": "npm:3.5.41"
+    "@vue/shared": "npm:3.5.41"
+  checksum: 10/f0c44c7a3a0644a022b604797c0ba4c299f5ce4e74026aa98491076e21fb94517cf66e1eadc2f053a1d6f44c16c1dc83d45e6205c86937eca89ba2589e6e49ae
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.5.33, @vue/compiler-sfc@npm:^3.5.22":
-  version: 3.5.33
-  resolution: "@vue/compiler-sfc@npm:3.5.33"
+"@vue/compiler-sfc@npm:3.5.41, @vue/compiler-sfc@npm:^3.5.22":
+  version: 3.5.41
+  resolution: "@vue/compiler-sfc@npm:3.5.41"
   dependencies:
-    "@babel/parser": "npm:^7.29.2"
-    "@vue/compiler-core": "npm:3.5.33"
-    "@vue/compiler-dom": "npm:3.5.33"
-    "@vue/compiler-ssr": "npm:3.5.33"
-    "@vue/shared": "npm:3.5.33"
+    "@babel/parser": "npm:^7.29.8"
+    "@vue/compiler-core": "npm:3.5.41"
+    "@vue/compiler-dom": "npm:3.5.41"
+    "@vue/compiler-ssr": "npm:3.5.41"
+    "@vue/shared": "npm:3.5.41"
     estree-walker: "npm:^2.0.2"
     magic-string: "npm:^0.30.21"
-    postcss: "npm:^8.5.10"
+    postcss: "npm:^8.5.19"
     source-map-js: "npm:^1.2.1"
-  checksum: 10/2f8e1fc5cddc406d3348237927cde539dc63b63f9c4efa5df660a9af3d952a0aff804cd976fcfeff5c172e5de32ca1fb893ba8c1182409cca4ffaf433f26dadb
+  checksum: 10/d3f4baabb5314516e0a4c70e220618ff7877984706ee031f29977d8e64b3ed570300a7dacebac805ca947dcc3149e3c089698f5bd8158b6c235be15b5a88bfc4
   languageName: node
   linkType: hard
 
-"@vue/compiler-ssr@npm:3.5.33":
-  version: 3.5.33
-  resolution: "@vue/compiler-ssr@npm:3.5.33"
+"@vue/compiler-ssr@npm:3.5.41":
+  version: 3.5.41
+  resolution: "@vue/compiler-ssr@npm:3.5.41"
   dependencies:
-    "@vue/compiler-dom": "npm:3.5.33"
-    "@vue/shared": "npm:3.5.33"
-  checksum: 10/41e4661e5bafedb1205aad4bb486799b8650c61a78144d4257a682ebf7a6def951caf9646d1d6170aba17b4690de022dcddc9ac61e26a90b5b0291cd92b63dd2
-  languageName: node
-  linkType: hard
-
-"@vue/compiler-vue2@npm:^2.7.16":
-  version: 2.7.16
-  resolution: "@vue/compiler-vue2@npm:2.7.16"
-  dependencies:
-    de-indent: "npm:^1.0.2"
-    he: "npm:^1.2.0"
-  checksum: 10/739ad06be19206b2715707c226a070509bcf28c31b539a6fc932d220eb7b0c09109d71fded573ed0c4073429793a3513ca4a4e69ad4f7afc0c5bc3c28639e871
+    "@vue/compiler-dom": "npm:3.5.41"
+    "@vue/shared": "npm:3.5.41"
+  checksum: 10/cefa3aff5b5e2f8889eb1768a7aebe9d9be7c0df3a62a7d4a394cd842357209b65c31ae298734ddcdec0f9fbe433ef9a362acc6834617d6d9fa0c13618b08fa1
   languageName: node
   linkType: hard
 
@@ -3366,7 +3413,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/devtools-api@npm:^7.7.0, @vue/devtools-api@npm:^7.7.7":
+"@vue/devtools-api@npm:^7.7.0":
   version: 7.7.9
   resolution: "@vue/devtools-api@npm:7.7.9"
   dependencies:
@@ -3375,12 +3422,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/devtools-api@npm:^8.0.6":
-  version: 8.1.1
-  resolution: "@vue/devtools-api@npm:8.1.1"
+"@vue/devtools-api@npm:^8.1.5, @vue/devtools-api@npm:^8.2.1":
+  version: 8.2.1
+  resolution: "@vue/devtools-api@npm:8.2.1"
   dependencies:
-    "@vue/devtools-kit": "npm:^8.1.1"
-  checksum: 10/044fa44942d4b48f98cf1d8c1aba2bdf46e93cf0b27111ed3ae60fa32a849c836755e2db4cfb8d4eeca8f871c74e3d77085dd01910af98059177e6dcd9e1d041
+    "@vue/devtools-kit": "npm:^8.2.1"
+  checksum: 10/313476c4392d63a569a48b0088feba4df7386a5a7165b08da153ec67bbd7e7509d847cfadf561c7c9c7b56cc13ad2ccf9468e9ecc30b23d56e79f4458f19ac5a
   languageName: node
   linkType: hard
 
@@ -3399,15 +3446,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/devtools-kit@npm:^8.1.1":
-  version: 8.1.1
-  resolution: "@vue/devtools-kit@npm:8.1.1"
+"@vue/devtools-kit@npm:^8.2.1":
+  version: 8.2.1
+  resolution: "@vue/devtools-kit@npm:8.2.1"
   dependencies:
-    "@vue/devtools-shared": "npm:^8.1.1"
+    "@vue/devtools-shared": "npm:^8.2.1"
     birpc: "npm:^2.6.1"
     hookable: "npm:^5.5.3"
     perfect-debounce: "npm:^2.0.0"
-  checksum: 10/c1f7da5c53de88b2b2f9f54c9ecb96cc88b78699496446e652b4fae7e26753b68d431e1645d7340d9eb32a96c06a22f8eccd105570f354333a1ebe6c899c5f26
+  checksum: 10/63a105471c8cb8162d5d3bed25a1972d9e0385654ce37eb10d861b26ec595a1553ed01e256cd6ba2aaf8bd24db557b72bbc84abb8980056a2fd6ef2d2cd60943
   languageName: node
   linkType: hard
 
@@ -3420,20 +3467,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/devtools-shared@npm:^8.1.1":
-  version: 8.1.1
-  resolution: "@vue/devtools-shared@npm:8.1.1"
-  checksum: 10/330d56b61063767cf57997c4904959586a27348bec31ab24943d08e4ee13a61939893f386a719e2f53186e9016641ca54034e9433647142136c3b65faa6138c5
+"@vue/devtools-shared@npm:^8.2.1":
+  version: 8.2.1
+  resolution: "@vue/devtools-shared@npm:8.2.1"
+  checksum: 10/3ef7cca2409efede6f9a9a2f9923e788b671cf2558eca4d97fe3cff14017af9a15d4bfa0a3fe2d139b866d94475cdd5ef28b6f7ac477487fd4d8ae3c8b061a4c
   languageName: node
   linkType: hard
 
-"@vue/eslint-config-typescript@npm:^14.7.0":
-  version: 14.7.0
-  resolution: "@vue/eslint-config-typescript@npm:14.7.0"
+"@vue/eslint-config-typescript@npm:^14.9.0":
+  version: 14.9.0
+  resolution: "@vue/eslint-config-typescript@npm:14.9.0"
   dependencies:
-    "@typescript-eslint/utils": "npm:^8.56.0"
+    "@typescript-eslint/utils": "npm:^8.60.0"
     fast-glob: "npm:^3.3.3"
-    typescript-eslint: "npm:^8.56.0"
+    typescript-eslint: "npm:^8.60.0"
     vue-eslint-parser: "npm:^10.4.0"
   peerDependencies:
     eslint: ^9.10.0 || ^10.0.0
@@ -3442,43 +3489,24 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/ec0a19fef30ad44ea906825753a46ec01497ec823aca0c9b7e7cd49d26ec40e2cb3fd4f795b33dc31f52dd52ba70d119d74bb2916d87779408a17e40c3720b8a
-  languageName: node
-  linkType: hard
-
-"@vue/language-core@npm:2.2.0":
-  version: 2.2.0
-  resolution: "@vue/language-core@npm:2.2.0"
-  dependencies:
-    "@volar/language-core": "npm:~2.4.11"
-    "@vue/compiler-dom": "npm:^3.5.0"
-    "@vue/compiler-vue2": "npm:^2.7.16"
-    "@vue/shared": "npm:^3.5.0"
-    alien-signals: "npm:^0.4.9"
-    minimatch: "npm:^9.0.3"
-    muggle-string: "npm:^0.4.1"
-    path-browserify: "npm:^1.0.1"
-  peerDependencies:
-    typescript: "*"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/dc22d038509a58e5a5569fe19f67e7373067cde3531b1e405270dcbe026a8cdbb1de8a7a93d6aaa76a3c5b71393f5c6ec5d9125f0b050898cb96a5c62b4a8d88
+  bin:
+    vue-eslint-config-typescript: ./dist/bin.js
+  checksum: 10/dec23fd27c401654e1fb0cc6c9c2960ceca45d4f1634d62ee2d268f3f6486d9437c028db48a68652a704e013d6a1a461d436c8a559f653e0c87c805892e53b7f
   languageName: node
   linkType: hard
 
-"@vue/language-core@npm:3.2.7, @vue/language-core@npm:^3.2.0":
-  version: 3.2.7
-  resolution: "@vue/language-core@npm:3.2.7"
+"@vue/language-core@npm:3.3.9, @vue/language-core@npm:^3.2.6":
+  version: 3.3.9
+  resolution: "@vue/language-core@npm:3.3.9"
   dependencies:
     "@volar/language-core": "npm:2.4.28"
     "@vue/compiler-dom": "npm:^3.5.0"
     "@vue/shared": "npm:^3.5.0"
-    alien-signals: "npm:^3.1.2"
+    alien-signals: "npm:^3.2.1"
     muggle-string: "npm:^0.4.1"
     path-browserify: "npm:^1.0.1"
     picomatch: "npm:^4.0.4"
-  checksum: 10/ab2b01806c392cfc403efa05b6931fb311a57de6da69f2fa421a70a16b0f48aed1307ed09f3c49a01d9860279a4a1ab4d6b02b3c13cd4a845536b9ceada1692e
+  checksum: 10/c564d6f6f0dbd2ae1d70410594bb9a8974969208a46be6ad167dedb0be1293a150754ea5a3050a2028b2501d178afa24e8341db0bdea12c5c12afa476f1f78c2
   languageName: node
   linkType: hard
 
@@ -3495,97 +3523,96 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/language-server@npm:3.2.7":
-  version: 3.2.7
-  resolution: "@vue/language-server@npm:3.2.7"
+"@vue/language-server@npm:3.3.9":
+  version: 3.3.9
+  resolution: "@vue/language-server@npm:3.3.9"
   dependencies:
     "@volar/language-server": "npm:2.4.28"
-    "@vue/language-core": "npm:3.2.7"
-    "@vue/language-service": "npm:3.2.7"
-    "@vue/typescript-plugin": "npm:3.2.7"
+    "@vue/language-core": "npm:3.3.9"
+    "@vue/language-service": "npm:3.3.9"
+    "@vue/typescript-plugin": "npm:3.3.9"
     vscode-uri: "npm:^3.1.0"
   peerDependencies:
     typescript: "*"
   bin:
     vue-language-server: bin/vue-language-server.js
-  checksum: 10/7c77baa18af4302e8f708a8a873d7ed767776cb9f968213bc7c8bd6e68660e8be7f536ae4d5357e783e81db15553e9a566300426ccaf26b03ad05488c7e4be12
+  checksum: 10/c5032c0a4d0587797841e26053d9fca5e4c273f854d6a7c058713a6c9d694250f4cc2995d92d31d7fd625808bd0b77b6cd9d21341c971f1b85c8a7fd00e91e5c
   languageName: node
   linkType: hard
 
-"@vue/language-service@npm:3.2.7":
-  version: 3.2.7
-  resolution: "@vue/language-service@npm:3.2.7"
+"@vue/language-service@npm:3.3.9":
+  version: 3.3.9
+  resolution: "@vue/language-service@npm:3.3.9"
   dependencies:
     "@volar/language-service": "npm:2.4.28"
-    "@vue/language-core": "npm:3.2.7"
+    "@vue/language-core": "npm:3.3.9"
     "@vue/shared": "npm:^3.5.0"
     path-browserify: "npm:^1.0.1"
-    volar-service-css: "npm:0.0.70"
-    volar-service-emmet: "npm:0.0.70"
-    volar-service-html: "npm:0.0.70"
-    volar-service-json: "npm:0.0.70"
-    volar-service-pug: "npm:0.0.70"
-    volar-service-pug-beautify: "npm:0.0.70"
-    volar-service-typescript: "npm:0.0.70"
+    volar-service-css: "npm:0.0.71"
+    volar-service-emmet: "npm:0.0.71"
+    volar-service-html: "npm:0.0.71"
+    volar-service-json: "npm:0.0.71"
+    volar-service-pug: "npm:0.0.71"
+    volar-service-pug-beautify: "npm:0.0.71"
+    volar-service-typescript: "npm:0.0.71"
     vscode-html-languageservice: "npm:^5.6.2"
     vscode-uri: "npm:^3.1.0"
-  checksum: 10/6726b8d6cb3955b4f372ffb6f24a69eddf2b265532d34fb65c47ede7395fa50270e2f7cccc42cd4b044201099d7d499f8b61aff492927309e442198a7dc1a02d
+  checksum: 10/80bb3f5a7c94acae1f5024039504b57668cb70d455b187173f64dde39dd5527b31da0845fa2b9840f26baf6e21f41d7fa60d0e78badecbc0e5e0cda76e69ca98
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:3.5.33":
-  version: 3.5.33
-  resolution: "@vue/reactivity@npm:3.5.33"
+"@vue/reactivity@npm:3.5.41":
+  version: 3.5.41
+  resolution: "@vue/reactivity@npm:3.5.41"
   dependencies:
-    "@vue/shared": "npm:3.5.33"
-  checksum: 10/4e1df8f5d252da665c85d94dd4536d9364001b31280c57830d973ab00be3064587511292332200c620ce8f101334f383fb92e83f68c7dcc919bde0c298472a39
+    "@vue/shared": "npm:3.5.41"
+  checksum: 10/d5f2def946b97ff25197a8962a7ef435b44dcaabb11f42a8176dfe8f1c22840356bd018efc294b6ec74f6fb064d46e6e1bee741248dbad004b6a85a6c192f5f9
   languageName: node
   linkType: hard
 
-"@vue/runtime-core@npm:3.5.33":
-  version: 3.5.33
-  resolution: "@vue/runtime-core@npm:3.5.33"
+"@vue/runtime-core@npm:3.5.41":
+  version: 3.5.41
+  resolution: "@vue/runtime-core@npm:3.5.41"
   dependencies:
-    "@vue/reactivity": "npm:3.5.33"
-    "@vue/shared": "npm:3.5.33"
-  checksum: 10/b9265be4264f4e00ce82361cb22769fcf20c247c66dddfac3a3ab9e006ffd0128b6168a2b90fff5a5d322f5ddceed6920c23cffa0afb6fa905b71e009ab5582b
+    "@vue/reactivity": "npm:3.5.41"
+    "@vue/shared": "npm:3.5.41"
+  checksum: 10/628d418268ec5351f753285d45a320d8abe6cf10047483334fb22679be03068447533f173c66ebaef8c7eabc65a33a487b36c45afc8c6e4511b90a2252314046
   languageName: node
   linkType: hard
 
-"@vue/runtime-dom@npm:3.5.33":
-  version: 3.5.33
-  resolution: "@vue/runtime-dom@npm:3.5.33"
+"@vue/runtime-dom@npm:3.5.41":
+  version: 3.5.41
+  resolution: "@vue/runtime-dom@npm:3.5.41"
   dependencies:
-    "@vue/reactivity": "npm:3.5.33"
-    "@vue/runtime-core": "npm:3.5.33"
-    "@vue/shared": "npm:3.5.33"
+    "@vue/reactivity": "npm:3.5.41"
+    "@vue/runtime-core": "npm:3.5.41"
+    "@vue/shared": "npm:3.5.41"
     csstype: "npm:^3.2.3"
-  checksum: 10/2d62c39afe9b16407b134e16aabd32bb99bced385e842c353ce3d90e98405c009f92b343eb3e54f1cbf2c8a3508e4bf346adf77857ab98e6a8e2da786ecbfa68
+  checksum: 10/a107caa85ba8d95080aa38f7d800b540f7e74598bb9b1b340402e4c418c61bc4fee98dc8a7cc9af015a79e26fc63c2f3c92e2e24581b4644c6fa8a666cd10d00
   languageName: node
   linkType: hard
 
-"@vue/server-renderer@npm:3.5.33":
-  version: 3.5.33
-  resolution: "@vue/server-renderer@npm:3.5.33"
+"@vue/server-renderer@npm:3.5.41":
+  version: 3.5.41
+  resolution: "@vue/server-renderer@npm:3.5.41"
   dependencies:
-    "@vue/compiler-ssr": "npm:3.5.33"
-    "@vue/shared": "npm:3.5.33"
-  peerDependencies:
-    vue: 3.5.33
-  checksum: 10/c0246d4fdb8d09e3c639314e1df1e57ea5fbed467a868be89747b49cfb954700b79c74da60c14b4f6f1dd900cab37adc029b83ede7c921ee45cfd5f3b612bc5b
+    "@vue/compiler-ssr": "npm:3.5.41"
+    "@vue/runtime-dom": "npm:3.5.41"
+    "@vue/shared": "npm:3.5.41"
+  checksum: 10/ece956e2d921a810fdb395471bf1b27a4db54d33aa21d267ebae3ac32eda27c07ec1a19e94adf4147f71c82ca4b33971056380e492df3ab0cef695d768222460
   languageName: node
   linkType: hard
 
-"@vue/shared@npm:3.5.33, @vue/shared@npm:^3.5.0, @vue/shared@npm:^3.5.13":
-  version: 3.5.33
-  resolution: "@vue/shared@npm:3.5.33"
-  checksum: 10/8aa38a5c9625716d2a111f75ce05e0e98b67fbc0ad38895910f7624b1cad1882fb258ff9241c302bc570d105811bae3c962d64309194ad34f3433177c6be056a
+"@vue/shared@npm:3.5.41, @vue/shared@npm:^3.5.0, @vue/shared@npm:^3.5.13":
+  version: 3.5.41
+  resolution: "@vue/shared@npm:3.5.41"
+  checksum: 10/4bf2676df231c3e6b2444da9211193d1a0304594ecdda9fa9390689525c9da724286a844d842abd6d890e3d7b4c8ba2f80df694c982c35c126515aa16291bf24
   languageName: node
   linkType: hard
 
-"@vue/test-utils@npm:^2.4.9":
-  version: 2.4.9
-  resolution: "@vue/test-utils@npm:2.4.9"
+"@vue/test-utils@npm:^2.4.11":
+  version: 2.4.11
+  resolution: "@vue/test-utils@npm:2.4.11"
   dependencies:
     js-beautify: "npm:^1.14.9"
     vue-component-type-helpers: "npm:^3.0.0"
@@ -3596,7 +3623,7 @@ __metadata:
   peerDependenciesMeta:
     "@vue/server-renderer":
       optional: true
-  checksum: 10/5a1268e853d8b6f4bee493614cdede3cfffd8d660b43091f10e65ffc7acee37af1e284605dbfabed9521ed30810ded79cbebe65f2b3fdbdd34658135f118ebcd
+  checksum: 10/14ab50c67dad3567111ea7220d8859d619a646269804c23ad4e0bfdc032d6c6d10e6db91962014707ce9243033ae7d0a10739b656601fc8f6b588552e500f16d
   languageName: node
   linkType: hard
 
@@ -3615,16 +3642,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/typescript-plugin@npm:3.2.7":
-  version: 3.2.7
-  resolution: "@vue/typescript-plugin@npm:3.2.7"
+"@vue/typescript-plugin@npm:3.3.9":
+  version: 3.3.9
+  resolution: "@vue/typescript-plugin@npm:3.3.9"
   dependencies:
     "@volar/typescript": "npm:2.4.28"
-    "@vue/language-core": "npm:3.2.7"
+    "@vue/language-core": "npm:3.3.9"
     "@vue/shared": "npm:^3.5.0"
     path-browserify: "npm:^1.0.1"
-    vue-component-meta: "npm:3.2.7"
-  checksum: 10/bda04814aceaa634989a826026131814bd093ae3824254990e40934e0657096530f423c1a2f48f093238941f1cee79cd97a7ecae14c3a36c9d057db4084d7156
+    vue-component-meta: "npm:3.3.9"
+  checksum: 10/5302f983d43601466cc7936234468b7f15ba827b6cf2bfefc03115db184483a9fa90f1d9118697d9c440240ae190ed145d2c1baf5318060ddad14432596b7846
   languageName: node
   linkType: hard
 
@@ -3682,39 +3709,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/core@npm:14.2.1, @vueuse/core@npm:^14.2.1":
-  version: 14.2.1
-  resolution: "@vueuse/core@npm:14.2.1"
+"@vueuse/core@npm:14.4.0":
+  version: 14.4.0
+  resolution: "@vueuse/core@npm:14.4.0"
   dependencies:
     "@types/web-bluetooth": "npm:^0.0.21"
-    "@vueuse/metadata": "npm:14.2.1"
-    "@vueuse/shared": "npm:14.2.1"
+    "@vueuse/metadata": "npm:14.4.0"
+    "@vueuse/shared": "npm:14.4.0"
   peerDependencies:
     vue: ^3.5.0
-  checksum: 10/9ef2a2e293620bf4862eb5424d289d3e2e0eab1f94158bae445a9b2641f27c6adb49aed71f717e436a5669d0038d6b126d9dafaa4843486d5cb5184729ae381d
+  checksum: 10/51f5fb8a27800e6a16eea55edf5b3600acc6438ad6fe05b7f56650f1d382561be86691c2d59a10f20f5731d7313f8208b98aee0e9b59947972bdc4bd40dcccd2
   languageName: node
   linkType: hard
 
-"@vueuse/integrations@npm:^12.4.0":
-  version: 12.8.2
-  resolution: "@vueuse/integrations@npm:12.8.2"
+"@vueuse/integrations@npm:14.4.0":
+  version: 14.4.0
+  resolution: "@vueuse/integrations@npm:14.4.0"
   dependencies:
-    "@vueuse/core": "npm:12.8.2"
-    "@vueuse/shared": "npm:12.8.2"
-    vue: "npm:^3.5.13"
+    "@vueuse/core": "npm:14.4.0"
+    "@vueuse/shared": "npm:14.4.0"
   peerDependencies:
     async-validator: ^4
     axios: ^1
     change-case: ^5
     drauu: ^0.4
-    focus-trap: ^7
+    focus-trap: ^7 || ^8
     fuse.js: ^7
     idb-keyval: ^6
     jwt-decode: ^4
     nprogress: ^0.2
     qrcode: ^1.5
     sortablejs: ^1
-    universal-cookie: ^7
+    universal-cookie: ^7 || ^8
+    vue: ^3.5.0
   peerDependenciesMeta:
     async-validator:
       optional: true
@@ -3740,30 +3767,30 @@ __metadata:
       optional: true
     universal-cookie:
       optional: true
-  checksum: 10/2a4a55e7b994abbb752540ad9525b78b4239d88cb6af07c756f597a467264bbbf3a9565ab907b9fec3b220655a0700e13addaac5d9f3a362905894066e4ac307
+  checksum: 10/a45a0a6b5a3478654ebf62a71072dd86f85056a1b7091b6f7b8d9c0a82fe5c6afd0929bb4fcfcb0b037b34c97cb755b514738a5db2ed8b51e428a19011d0f1d5
   languageName: node
   linkType: hard
 
-"@vueuse/integrations@npm:^14.2.1":
-  version: 14.2.1
-  resolution: "@vueuse/integrations@npm:14.2.1"
+"@vueuse/integrations@npm:^12.4.0":
+  version: 12.8.2
+  resolution: "@vueuse/integrations@npm:12.8.2"
   dependencies:
-    "@vueuse/core": "npm:14.2.1"
-    "@vueuse/shared": "npm:14.2.1"
+    "@vueuse/core": "npm:12.8.2"
+    "@vueuse/shared": "npm:12.8.2"
+    vue: "npm:^3.5.13"
   peerDependencies:
     async-validator: ^4
     axios: ^1
     change-case: ^5
     drauu: ^0.4
-    focus-trap: ^7 || ^8
+    focus-trap: ^7
     fuse.js: ^7
     idb-keyval: ^6
     jwt-decode: ^4
     nprogress: ^0.2
     qrcode: ^1.5
     sortablejs: ^1
-    universal-cookie: ^7 || ^8
-    vue: ^3.5.0
+    universal-cookie: ^7
   peerDependenciesMeta:
     async-validator:
       optional: true
@@ -3789,7 +3816,7 @@ __metadata:
       optional: true
     universal-cookie:
       optional: true
-  checksum: 10/2a8df4fb5c5feb84cedbe677709cb02b8bdaabcab235a7ea3c5206e63f55053c6d8dacd3fd1c2aedf50625cb3f1c05102cc413cf10c6f1b34d45409321071de2
+  checksum: 10/2a4a55e7b994abbb752540ad9525b78b4239d88cb6af07c756f597a467264bbbf3a9565ab907b9fec3b220655a0700e13addaac5d9f3a362905894066e4ac307
   languageName: node
   linkType: hard
 
@@ -3800,10 +3827,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/metadata@npm:14.2.1":
-  version: 14.2.1
-  resolution: "@vueuse/metadata@npm:14.2.1"
-  checksum: 10/0df90e1eb15b94e559ca7c398950ade6a255ee01cd10fb4711372c9e74f2f93448ecca672ba6ea8bd7eec80b472cb09bf4ddfe479a95919024a9c7adb14331f1
+"@vueuse/metadata@npm:14.4.0":
+  version: 14.4.0
+  resolution: "@vueuse/metadata@npm:14.4.0"
+  checksum: 10/5a9442f85272e724a96e8addb8ba1e80afee29fc7ab871f24367947510d5197e865e9b481e0281d6b8e77d48ded41d73c63c57d9571709c999850e2cffc2c884
   languageName: node
   linkType: hard
 
@@ -3816,12 +3843,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/shared@npm:14.2.1":
-  version: 14.2.1
-  resolution: "@vueuse/shared@npm:14.2.1"
+"@vueuse/shared@npm:14.4.0":
+  version: 14.4.0
+  resolution: "@vueuse/shared@npm:14.4.0"
   peerDependencies:
     vue: ^3.5.0
-  checksum: 10/813955ddf6c943a4939fcaf9d24582c7e36c9bb5ca148513d486eb3b737822be8b56e70a37c4a593c973b5eb563868f45cb34a45e8d5f27af9ac7a18ec115d02
+  checksum: 10/f68ae6e5e5f569e82a1002aba9761b0b90eb403f188d505c459df86b453fbf98e99e9634749b318a93d81b5198d42d294b477ae2a986eaa603591916b756096b
   languageName: node
   linkType: hard
 
@@ -3866,6 +3893,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"agent-base@npm:6":
+  version: 6.0.2
+  resolution: "agent-base@npm:6.0.2"
+  dependencies:
+    debug: "npm:4"
+  checksum: 10/21fb903e0917e5cb16591b4d0ef6a028a54b83ac30cd1fca58dece3d4e0990512a8723f9f83130d88a41e2af8b1f7be1386fda3ea2d181bb1a62155e75e95e23
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:^7.1.0, agent-base@npm:^7.1.2":
   version: 7.1.4
   resolution: "agent-base@npm:7.1.4"
@@ -3911,7 +3947,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:~8.18.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:~8.20.0":
+  version: 8.20.0
+  resolution: "ajv@npm:8.20.0"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+    fast-uri: "npm:^3.0.1"
+    json-schema-traverse: "npm:^1.0.0"
+    require-from-string: "npm:^2.0.2"
+  checksum: 10/5ce59c0537f4c2aca9a758b412659ec70acb4d5dde971c10ecf21d2e3d799f99acdb4a08e1f5fb2e067c8542930398aae793bb996bb07d3feb81dae22fe2ada9
+  languageName: node
+  linkType: hard
+
+"ajv@npm:~8.18.0":
   version: 8.18.0
   resolution: "ajv@npm:8.18.0"
   dependencies:
@@ -3945,17 +3993,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"alien-signals@npm:^0.4.9":
-  version: 0.4.14
-  resolution: "alien-signals@npm:0.4.14"
-  checksum: 10/306a7f4a88a982d1619ff313ed078bdfe52bb9d1381590ef4c1c245812ce7274b9b645a6233214e764a1adbef21863bdf74d10aa4fb30917456b7dd7779df5fc
-  languageName: node
-  linkType: hard
-
-"alien-signals@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "alien-signals@npm:3.1.2"
-  checksum: 10/5095cc62a2d81a19f1c4187fdd87e73c07dbeb290995c413f179b9d7c498ce721067097e5ad4a00b3e4d2e91c88f5f041c5e6e7a1652cd027fa6ee1660e7274d
+"alien-signals@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "alien-signals@npm:3.2.1"
+  checksum: 10/9c8b14c460e748f40d85bbe4e607f81a4177d8ca1c056eab86f9792297003ef10717690019e23cacf19bb68babba97d1cb0bb03c35ca495d736cb6809efb7291
   languageName: node
   linkType: hard
 
@@ -3982,13 +4023,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^6.1.0, ansi-styles@npm:^6.2.1":
+"ansi-styles@npm:^6.1.0":
   version: 6.2.3
   resolution: "ansi-styles@npm:6.2.3"
   checksum: 10/c49dad7639f3e48859bd51824c93b9eb0db628afc243c51c3dd2410c4a15ede1a83881c6c7341aa2b159c4f90c11befb38f2ba848c07c66c9f9de4bcd7cb9f30
   languageName: node
   linkType: hard
 
+"ansi-styles@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "ansi-styles@npm:7.0.0"
+  checksum: 10/d04ab754dec550a771849abb7b866c52852a2ffa6b2c08f6a1729a51bb89931a396e8a2734c631a6781507e1570c6c5162587a24a4c6ca334dffdc64256fb06b
+  languageName: node
+  linkType: hard
+
 "argparse@npm:^2.0.1":
   version: 2.0.1
   resolution: "argparse@npm:2.0.1"
@@ -4012,7 +4060,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-kit@npm:^2.1.2, ast-kit@npm:^2.1.3":
+"ast-kit@npm:^2.1.2, ast-kit@npm:^2.2.0":
   version: 2.2.0
   resolution: "ast-kit@npm:2.2.0"
   dependencies:
@@ -4022,13 +4070,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-walker-scope@npm:^0.8.3":
-  version: 0.8.3
-  resolution: "ast-walker-scope@npm:0.8.3"
+"ast-walker-scope@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "ast-walker-scope@npm:0.9.0"
   dependencies:
-    "@babel/parser": "npm:^7.28.4"
-    ast-kit: "npm:^2.1.3"
-  checksum: 10/505fe091706b79ebb9497bf4692a898e95e95bdeff266cd5c7b3acb8b8d39820a24872047cace7000d1218a9ee4e196db19571375e73717f4894f367b3ae3f9a
+    "@babel/parser": "npm:^7.29.2"
+    "@babel/types": "npm:^7.29.0"
+    ast-kit: "npm:^2.2.0"
+  checksum: 10/9a699f06f48af4bbb051b2af8a83ffcdd295cadd76ea855118e0ba511fe27ac5ad326d7166294a41c5222c91bd008529d7f04725da9d0350749e586281f3896a
   languageName: node
   linkType: hard
 
@@ -4060,14 +4109,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:1.15.2":
-  version: 1.15.2
-  resolution: "axios@npm:1.15.2"
+"axios@npm:1.19.0":
+  version: 1.19.0
+  resolution: "axios@npm:1.19.0"
   dependencies:
-    follow-redirects: "npm:^1.15.11"
-    form-data: "npm:^4.0.5"
+    follow-redirects: "npm:^1.16.0"
+    form-data: "npm:^4.0.6"
+    https-proxy-agent: "npm:^5.0.1"
     proxy-from-env: "npm:^2.1.0"
-  checksum: 10/eebbd8cb777316d4252cd994a06ec9fb956ef519214a62dab6c5443ae8b753b5116e9a770502316789e6cdef1101e6aae53b6936d6a3791b2d66d75f4d7d2462
+  checksum: 10/d27e263b003f2dc1e6d0e2ab062dbc7c2b15668c25723e1e2072f139505c1fbd1f8cffef77d5ec05bb8e3cefa6fc5325c6446e747669fd95d85519529fa0db0b
   languageName: node
   linkType: hard
 
@@ -4144,16 +4194,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacheable@npm:^2.3.4":
-  version: 2.3.4
-  resolution: "cacheable@npm:2.3.4"
+"cacheable@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "cacheable@npm:2.5.0"
   dependencies:
-    "@cacheable/memory": "npm:^2.0.8"
-    "@cacheable/utils": "npm:^2.4.0"
+    "@cacheable/memory": "npm:^2.2.0"
+    "@cacheable/utils": "npm:^2.5.0"
     hookified: "npm:^1.15.0"
     keyv: "npm:^5.6.0"
-    qified: "npm:^0.9.0"
-  checksum: 10/b711e7fd4d485f77966f1b34a9f08da496db6de65ceb0542c9963109e3866b030ed9da10eb8a133cef0122384137d6fb7ab5311a408ec12d02de19030f390dfa
+    qified: "npm:^0.10.1"
+  checksum: 10/216a896e17dfa9c598a69e2fff31216126e94286f6c0ceb1bfab1d34e6c1a8791e8dc34dbd28660ec72a84f1d370c3733a9fc481e00a5512fd4e0cfc35775db6
   languageName: node
   linkType: hard
 
@@ -4228,15 +4278,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "chokidar@npm:4.0.3"
-  dependencies:
-    readdirp: "npm:^4.0.1"
-  checksum: 10/bf2a575ea5596000e88f5db95461a9d59ad2047e939d5a4aac59dd472d126be8f1c1ff3c7654b477cf532d18f42a97279ef80ee847972fd2a25410bf00b80b59
-  languageName: node
-  linkType: hard
-
 "chokidar@npm:^5.0.0":
   version: 5.0.0
   resolution: "chokidar@npm:5.0.0"
@@ -4346,9 +4387,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^9.0.1":
-  version: 9.0.1
-  resolution: "cosmiconfig@npm:9.0.1"
+"cosmiconfig@npm:^9.0.2":
+  version: 9.0.2
+  resolution: "cosmiconfig@npm:9.0.2"
   dependencies:
     env-paths: "npm:^2.2.1"
     import-fresh: "npm:^3.3.0"
@@ -4359,7 +4400,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/89fcac84d062f0710091bb2d6a6175bcde22f5448877db9c43429694408191d3d4e215193b3ac4d54f7f89ef188d55cd481c7a2295b0dc572e65b528bf6fec01
+  checksum: 10/e7b08c9c6ed862852bf0ed88c8fa49c57276d976901c9332c87d831926f332c32df3f5ff6a87f3823c3b7c5d6f857a7fd34336e0c2c596fa2d73e6cccbb7bf58
   languageName: node
   linkType: hard
 
@@ -4414,17 +4455,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dayjs@npm:1.11.20":
-  version: 1.11.20
-  resolution: "dayjs@npm:1.11.20"
-  checksum: 10/5347533f21a55b8bb1b1ef559be9b805514c3a8fb7e68b75fb7e73808131c59e70909c073aa44ce8a0d159195cd110cdd4081cf87ab96cb06fee3edacae791c6
-  languageName: node
-  linkType: hard
-
-"de-indent@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "de-indent@npm:1.0.2"
-  checksum: 10/30bf43744dca005f9252dbb34ed95dcb3c30dfe52bfed84973b89c29eccff04e27769f222a34c61a93354acf47457785e9032e6184be390ed1d324fb9ab3f427
+"dayjs@npm:1.11.21":
+  version: 1.11.21
+  resolution: "dayjs@npm:1.11.21"
+  checksum: 10/dd16f9f2706b61b90e3c346a3211ac3afd9e26193136ce0e87f70bf74d1c17a447bceb230a88b175467fc9f5e3243d8c1544b9897092a12d9c80ee44d338dcb6
   languageName: node
   linkType: hard
 
@@ -4614,7 +4648,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.2.0, entities@npm:^4.4.0":
+"entities@npm:^4.2.0, entities@npm:^4.4.0, entities@npm:^4.5.0":
   version: 4.5.0
   resolution: "entities@npm:4.5.0"
   checksum: 10/ede2a35c9bce1aeccd055a1b445d41c75a14a2bb1cd22e242f20cf04d236cdcd7f9c859eb83f76885327bfae0c25bf03303665ee1ce3d47c5927b98b0e3e3d48
@@ -4855,36 +4889,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.27.0":
-  version: 0.27.4
-  resolution: "esbuild@npm:0.27.4"
-  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.27.4"
-    "@esbuild/android-arm": "npm:0.27.4"
-    "@esbuild/android-arm64": "npm:0.27.4"
-    "@esbuild/android-x64": "npm:0.27.4"
-    "@esbuild/darwin-arm64": "npm:0.27.4"
-    "@esbuild/darwin-x64": "npm:0.27.4"
-    "@esbuild/freebsd-arm64": "npm:0.27.4"
-    "@esbuild/freebsd-x64": "npm:0.27.4"
-    "@esbuild/linux-arm": "npm:0.27.4"
-    "@esbuild/linux-arm64": "npm:0.27.4"
-    "@esbuild/linux-ia32": "npm:0.27.4"
-    "@esbuild/linux-loong64": "npm:0.27.4"
-    "@esbuild/linux-mips64el": "npm:0.27.4"
-    "@esbuild/linux-ppc64": "npm:0.27.4"
-    "@esbuild/linux-riscv64": "npm:0.27.4"
-    "@esbuild/linux-s390x": "npm:0.27.4"
-    "@esbuild/linux-x64": "npm:0.27.4"
-    "@esbuild/netbsd-arm64": "npm:0.27.4"
-    "@esbuild/netbsd-x64": "npm:0.27.4"
-    "@esbuild/openbsd-arm64": "npm:0.27.4"
-    "@esbuild/openbsd-x64": "npm:0.27.4"
-    "@esbuild/openharmony-arm64": "npm:0.27.4"
-    "@esbuild/sunos-x64": "npm:0.27.4"
-    "@esbuild/win32-arm64": "npm:0.27.4"
-    "@esbuild/win32-ia32": "npm:0.27.4"
-    "@esbuild/win32-x64": "npm:0.27.4"
+"esbuild@npm:^0.27.0 || ^0.28.0":
+  version: 0.28.1
+  resolution: "esbuild@npm:0.28.1"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.28.1"
+    "@esbuild/android-arm": "npm:0.28.1"
+    "@esbuild/android-arm64": "npm:0.28.1"
+    "@esbuild/android-x64": "npm:0.28.1"
+    "@esbuild/darwin-arm64": "npm:0.28.1"
+    "@esbuild/darwin-x64": "npm:0.28.1"
+    "@esbuild/freebsd-arm64": "npm:0.28.1"
+    "@esbuild/freebsd-x64": "npm:0.28.1"
+    "@esbuild/linux-arm": "npm:0.28.1"
+    "@esbuild/linux-arm64": "npm:0.28.1"
+    "@esbuild/linux-ia32": "npm:0.28.1"
+    "@esbuild/linux-loong64": "npm:0.28.1"
+    "@esbuild/linux-mips64el": "npm:0.28.1"
+    "@esbuild/linux-ppc64": "npm:0.28.1"
+    "@esbuild/linux-riscv64": "npm:0.28.1"
+    "@esbuild/linux-s390x": "npm:0.28.1"
+    "@esbuild/linux-x64": "npm:0.28.1"
+    "@esbuild/netbsd-arm64": "npm:0.28.1"
+    "@esbuild/netbsd-x64": "npm:0.28.1"
+    "@esbuild/openbsd-arm64": "npm:0.28.1"
+    "@esbuild/openbsd-x64": "npm:0.28.1"
+    "@esbuild/openharmony-arm64": "npm:0.28.1"
+    "@esbuild/sunos-x64": "npm:0.28.1"
+    "@esbuild/win32-arm64": "npm:0.28.1"
+    "@esbuild/win32-ia32": "npm:0.28.1"
+    "@esbuild/win32-x64": "npm:0.28.1"
   dependenciesMeta:
     "@esbuild/aix-ppc64":
       optional: true
@@ -4940,7 +4974,7 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 10/32b46ec22ef78bae6cc141145022a4c0209852c07151f037fbefccc2033ca54e7f33705f8fca198eb7026f400142f64c2dbc9f0d0ce9c0a638ebc472a04abc4a
+  checksum: 10/aaa4a922644afffac45e735c99caf343f881e2d36abcc6b6fb53c230bd69940504a5bb6b0041bdd1a690e748ebc681d3308a7d178987c523d74c63c2c280bac8
   languageName: node
   linkType: hard
 
@@ -4976,38 +5010,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-oxlint@npm:1.62.0":
-  version: 1.62.0
-  resolution: "eslint-plugin-oxlint@npm:1.62.0"
+"eslint-plugin-oxlint@npm:1.78.0":
+  version: 1.78.0
+  resolution: "eslint-plugin-oxlint@npm:1.78.0"
   dependencies:
     jsonc-parser: "npm:^3.3.1"
   peerDependencies:
-    oxlint: ~1.62.0
-  checksum: 10/f9d8ce1e74c3ad6ae664dde3751a43b43bde342dd506ce04048030b19a6bc00172eda63ebeb7ed91bf3c311c3e2b85327c647c24cd554c7682fcc7b3909af59e
+    oxlint: ~1.78.0
+  checksum: 10/8a68fd3838b57f7731d1af84800b6f0871582af109bc88491465fee188d07391c6728152bbc95a9feb6281638a4738890b399d8618bd7bdd28c4e8a2ba03c6b6
   languageName: node
   linkType: hard
 
-"eslint-plugin-vue@npm:10.9.0, eslint-plugin-vue@npm:^10.8.0":
-  version: 10.9.0
-  resolution: "eslint-plugin-vue@npm:10.9.0"
+"eslint-plugin-vue@npm:10.10.0, eslint-plugin-vue@npm:^10.8.0":
+  version: 10.10.0
+  resolution: "eslint-plugin-vue@npm:10.10.0"
   dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@eslint-community/eslint-utils": "npm:^4.9.1"
     natural-compare: "npm:^1.4.0"
     nth-check: "npm:^2.1.1"
-    postcss-selector-parser: "npm:^7.1.0"
-    semver: "npm:^7.6.3"
-    xml-name-validator: "npm:^4.0.0"
+    postcss-selector-parser: "npm:^7.1.4"
+    semver: "npm:^7.8.5"
+    xml-name-validator: "npm:^5.0.0"
   peerDependencies:
     "@stylistic/eslint-plugin": ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
     "@typescript-eslint/parser": ^7.0.0 || ^8.0.0
     eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-    vue-eslint-parser: ^10.0.0
+    vue-eslint-parser: ^10.3.0
   peerDependenciesMeta:
     "@stylistic/eslint-plugin":
       optional: true
     "@typescript-eslint/parser":
       optional: true
-  checksum: 10/2c9e90ea9735e0348b015c91d3d59d232aa98344944e0d68c318f6c643c02b7f1e0e2baa988762f232efc67b1e4de171385001ac2f35661c75041029b874723e
+  checksum: 10/e8df08db51abc8bdfa1553774d3e311c90afb8146a7bd7f11cdbe091cd2607530424101822e14c9dad5b8c872ebdc4e409d4079234682cd62d1836e13990e8b2
   languageName: node
   linkType: hard
 
@@ -5057,16 +5091,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^10.2.1":
-  version: 10.2.1
-  resolution: "eslint@npm:10.2.1"
+"eslint@npm:^10.8.1":
+  version: 10.8.1
+  resolution: "eslint@npm:10.8.1"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.8.0"
     "@eslint-community/regexpp": "npm:^4.12.2"
     "@eslint/config-array": "npm:^0.23.5"
-    "@eslint/config-helpers": "npm:^0.5.5"
+    "@eslint/config-helpers": "npm:^0.7.0"
     "@eslint/core": "npm:^1.2.1"
-    "@eslint/plugin-kit": "npm:^0.7.1"
+    "@eslint/plugin-kit": "npm:^0.7.2"
     "@humanfs/node": "npm:^0.16.6"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
     "@humanwhocodes/retry": "npm:^0.4.2"
@@ -5088,7 +5122,7 @@ __metadata:
     imurmurhash: "npm:^0.1.4"
     is-glob: "npm:^4.0.0"
     json-stable-stringify-without-jsonify: "npm:^1.0.1"
-    minimatch: "npm:^10.2.4"
+    minimatch: "npm:^10.2.5"
     natural-compare: "npm:^1.4.0"
     optionator: "npm:^0.9.3"
   peerDependencies:
@@ -5098,7 +5132,7 @@ __metadata:
       optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10/954658c846696dc501a2b8e5fb268713e231dd81375dc25d76cd2fb4a1c73094ea73c64197634ece6fca8a54536e89eb44548a11be672544522e7a50eb8aae95
+  checksum: 10/7174710e740f95bfa97d7501419d717c03cf7760c3eea4a91cd10fb804538bbd8cdc0849b26afa789a56a89ee838b727e4b9329e347376f96b8e524727b90ba3
   languageName: node
   linkType: hard
 
@@ -5290,12 +5324,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-entry-cache@npm:^11.1.2":
-  version: 11.1.2
-  resolution: "file-entry-cache@npm:11.1.2"
+"file-entry-cache@npm:^11.1.5":
+  version: 11.1.5
+  resolution: "file-entry-cache@npm:11.1.5"
   dependencies:
-    flat-cache: "npm:^6.1.20"
-  checksum: 10/608a988db343f3ddcbf96ec93697daae2bbde2976763960b979c55de64d5ae3779c014d5308dbea5bfb42386c3e492b117d8715824b74079efcc1f5d27b8836c
+    flat-cache: "npm:^6.1.23"
+  checksum: 10/a4a6c45c9561fbceb6511b3483e299e636e5c67e225ea4445c8cbdbe6c571da8505b29b29fc4c62fe9cf28ffe33314f401fad3da09e4b62321c92f0d3a113135
   languageName: node
   linkType: hard
 
@@ -5337,14 +5371,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat-cache@npm:^6.1.20":
-  version: 6.1.22
-  resolution: "flat-cache@npm:6.1.22"
+"flat-cache@npm:^6.1.23":
+  version: 6.1.23
+  resolution: "flat-cache@npm:6.1.23"
   dependencies:
-    cacheable: "npm:^2.3.4"
+    cacheable: "npm:^2.5.0"
     flatted: "npm:^3.4.2"
     hookified: "npm:^1.15.0"
-  checksum: 10/1133b75077c87260324b5b768af742242eacdbcb78e7260e365caef74dd4f31625e95661d25dce8c823b889d657a030f6a8a0b7ef3719223de267cbb1c647143
+  checksum: 10/63ad3682f399e3e7b7255493b07469f80c418034a10e12e1c7043b41d666ff69b20be924984a0b91cd767a4f71540e4fb4421651d15adc736fca1c04b8505758
   languageName: node
   linkType: hard
 
@@ -5380,13 +5414,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.15.11":
-  version: 1.15.11
-  resolution: "follow-redirects@npm:1.15.11"
+"follow-redirects@npm:^1.16.0":
+  version: 1.16.0
+  resolution: "follow-redirects@npm:1.16.0"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 10/07372fd74b98c78cf4d417d68d41fdaa0be4dcacafffb9e67b1e3cf090bc4771515e65020651528faab238f10f9b9c0d9707d6c1574a6c0387c5de1042cde9ba
+  checksum: 10/3fbe3d80b3b544c22705d837aa5d4a0d07a740d913534a2620b0a004c610af4148e3b58723536dd099aaa1c9d3a155964bde9665d6e5cb331460809a1fc572fd
   languageName: node
   linkType: hard
 
@@ -5400,16 +5434,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"form-data@npm:^4.0.5":
-  version: 4.0.5
-  resolution: "form-data@npm:4.0.5"
+"form-data@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "form-data@npm:4.0.6"
   dependencies:
     asynckit: "npm:^0.4.0"
     combined-stream: "npm:^1.0.8"
     es-set-tostringtag: "npm:^2.1.0"
-    hasown: "npm:^2.0.2"
-    mime-types: "npm:^2.1.12"
-  checksum: 10/52ecd6e927c8c4e215e68a7ad5e0f7c1031397439672fd9741654b4a94722c4182e74cc815b225dcb5be3f4180f36428f67c6dd39eaa98af0dcfdd26c00c19cd
+    hasown: "npm:^2.0.4"
+    mime-types: "npm:^2.1.35"
+  checksum: 10/de6614c8537c92fa5fa3ee7e827758f98f5a9c033f348b7de81855ef36e5cb867e75d9f405d9483ab8d724a4a20d4e79926a299fa8dbba38f530eb659f0884e4
   languageName: node
   linkType: hard
 
@@ -5588,9 +5622,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^16.2.0":
-  version: 16.2.0
-  resolution: "globby@npm:16.2.0"
+"globby@npm:^16.2.1":
+  version: 16.2.2
+  resolution: "globby@npm:16.2.2"
   dependencies:
     "@sindresorhus/merge-streams": "npm:^4.0.0"
     fast-glob: "npm:^3.3.3"
@@ -5598,7 +5632,7 @@ __metadata:
     is-path-inside: "npm:^4.0.0"
     slash: "npm:^5.1.0"
     unicorn-magic: "npm:^0.4.0"
-  checksum: 10/7a2d3434a90b0f24f552cd8ebd1d6d82808fa4f6dcf56a407a9d011ac6a26a4ec7555994f492619be4fedfb0cb49d6dc2261f618bd010549d17d426e857ca4f9
+  checksum: 10/c0f516c7d521b6d23e702b03b38d399f169f8f945f924a904976da1c0954516a7239de8efd9636b4a0ebbb1ec43de1e33c3e7c2fe50ce96994a7bb9fa6c3f871
   languageName: node
   linkType: hard
 
@@ -5662,12 +5696,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hasown@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "hasown@npm:2.0.2"
+"hasown@npm:^2.0.2, hasown@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "hasown@npm:2.0.4"
   dependencies:
     function-bind: "npm:^1.1.2"
-  checksum: 10/7898a9c1788b2862cf0f9c345a6bec77ba4a0c0983c7f19d610c382343d4f98fa260686b225dfb1f88393a66679d2ec58ee310c1d6868c081eda7918f32cc70a
+  checksum: 10/13823863ae48161068b4c51606a3128451c66f14545a5169d667fe9fca168dcd38c27570c7a299e32ef844b8da3d55def7fe88602f8970d4311fb543ee88001a
   languageName: node
   linkType: hard
 
@@ -5699,15 +5733,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"he@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "he@npm:1.2.0"
-  bin:
-    he: bin/he
-  checksum: 10/d09b2243da4e23f53336e8de3093e5c43d2c39f8d0d18817abfa32ce3e9355391b2edb4bb5edc376aea5d4b0b59d6a0482aab4c52bc02ef95751e4b818e847f1
-  languageName: node
-  linkType: hard
-
 "hookable@npm:^5.5.3":
   version: 5.5.3
   resolution: "hookable@npm:5.5.3"
@@ -5772,6 +5797,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"https-proxy-agent@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "https-proxy-agent@npm:5.0.1"
+  dependencies:
+    agent-base: "npm:6"
+    debug: "npm:4"
+  checksum: 10/f0dce7bdcac5e8eaa0be3c7368bb8836ed010fb5b6349ffb412b172a203efe8f807d9a6681319105ea1b6901e1972c7b5ea899672a7b9aad58309f766dcbe0df
+  languageName: node
+  linkType: hard
+
 "https-proxy-agent@npm:^7.0.1":
   version: 7.0.6
   resolution: "https-proxy-agent@npm:7.0.6"
@@ -5953,13 +5988,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isexe@npm:^3.1.1":
-  version: 3.1.5
-  resolution: "isexe@npm:3.1.5"
-  checksum: 10/ae479f6b0505507f1a73c1d57be6d0546e59fc9202bb0d5b31ba8ff5f3e79dd385bce57a2e60c5645aba567018cbbfc663519cd28367e9962242d97dd151d2ab
-  languageName: node
-  linkType: hard
-
 "isexe@npm:^4.0.0":
   version: 4.0.0
   resolution: "isexe@npm:4.0.0"
@@ -6059,10 +6087,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-parse-even-better-errors@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "json-parse-even-better-errors@npm:4.0.0"
-  checksum: 10/da1ae7ef0cc9db02972a06a71322f26bdcda5d7f648c23b28ce7f158ba35707461bcbd91945d8aace10d8d79c383b896725c65ffa410242352692328aa9b5edf
+"json-parse-even-better-errors@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "json-parse-even-better-errors@npm:6.0.0"
+  checksum: 10/52f10c3c999f646f1c3fbbf84e0cee6ef3939609bb99d704e7b9a98544325f5a33b4439f2ddb89b5ffcad7171b47658b5365742de398fb3e1145a38ac3c15d1f
   languageName: node
   linkType: hard
 
@@ -6311,23 +6339,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"linkify-it@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "linkify-it@npm:5.0.0"
+"linkify-it@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "linkify-it@npm:5.0.2"
   dependencies:
     uc.micro: "npm:^2.0.0"
-  checksum: 10/ef3b7609dda6ec0c0be8a7b879cea195f0d36387b0011660cd6711bba0ad82137f59b458b7e703ec74f11d88e7c1328e2ad9b855a8500c0ded67461a8c4519e6
+  checksum: 10/1d23387319c15f2c3d41cdada0fc2edac73afb6083e967ee051afc826f7d8d9f920e287fb7c32679b4516f60e6450853dee2b4339d7d2f313222e4b9e5be1476
   languageName: node
   linkType: hard
 
-"local-pkg@npm:^1.0.0, local-pkg@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "local-pkg@npm:1.1.2"
+"local-pkg@npm:^1.1.1, local-pkg@npm:^1.1.2, local-pkg@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "local-pkg@npm:1.2.1"
   dependencies:
     mlly: "npm:^1.7.4"
     pkg-types: "npm:^2.3.0"
     quansync: "npm:^0.2.11"
-  checksum: 10/761d82f40849e4721fa50d86782cf75bc2befb0696f32ac99869fb6f3033b904e4018f4bb8cdfde994d710816480dc1aba8e462c67ec20fe89d4700a245d17f8
+  checksum: 10/05a8d5a59e8303832a1886a617fac32ed57371bfd2da6f35d6730332c677c71eeb587c8e86afb449fd179337992dfebbd185e11d2ee9ddd71158fd09faf8845f
   languageName: node
   linkType: hard
 
@@ -6347,13 +6375,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:~4.17.23":
-  version: 4.17.23
-  resolution: "lodash@npm:4.17.23"
-  checksum: 10/82504c88250f58da7a5a4289f57a4f759c44946c005dd232821c7688b5fcfbf4a6268f6a6cdde4b792c91edd2f3b5398c1d2a0998274432cff76def48735e233
-  languageName: node
-  linkType: hard
-
 "longest-streak@npm:^3.0.0":
   version: 3.1.0
   resolution: "longest-streak@npm:3.1.0"
@@ -6375,15 +6396,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "lru-cache@npm:6.0.0"
-  dependencies:
-    yallist: "npm:^4.0.0"
-  checksum: 10/fc1fe2ee205f7c8855fa0f34c1ab0bcf14b6229e35579ec1fd1079f31d6fc8ef8eb6fd17f2f4d99788d7e339f50e047555551ebd5e434dda503696e7c6591825
-  languageName: node
-  linkType: hard
-
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -6411,6 +6423,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "magic-string@npm:1.1.0"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
+  checksum: 10/01e9b5c05c3bfe219cf6ffe0d0f9158b1c72becfe4bfa8e4896122bcbd44665b10cdfbd2d0b9cd850fa0876a756f80c9cd47b4086a946e3022d73ad467490c8c
+  languageName: node
+  linkType: hard
+
 "make-fetch-happen@npm:^15.0.0":
   version: 15.0.5
   resolution: "make-fetch-happen@npm:15.0.5"
@@ -6438,19 +6459,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-it@npm:^14.1.1":
-  version: 14.1.1
-  resolution: "markdown-it@npm:14.1.1"
+"markdown-it@npm:^14.3.0":
+  version: 14.3.0
+  resolution: "markdown-it@npm:14.3.0"
   dependencies:
     argparse: "npm:^2.0.1"
-    entities: "npm:^4.4.0"
-    linkify-it: "npm:^5.0.0"
+    entities: "npm:^4.5.0"
+    linkify-it: "npm:^5.0.2"
     mdurl: "npm:^2.0.0"
     punycode.js: "npm:^2.3.1"
     uc.micro: "npm:^2.1.0"
   bin:
     markdown-it: bin/markdown-it.mjs
-  checksum: 10/088822c8aa9346ba4af6a205f6ee0f4baae55e3314f040dc5c28c897d57d0f979840c71872b3582a6a6e572d8c851c54e323c82f4559011dfa2e96224fc20fc2
+  checksum: 10/16afbae804e7ea10474389918e31036c438d00bacabb340e57769a84d8a3068f37814736483a645b6ad69e138aa491c3cac83d261b630bd6d2f6af6139c5d18b
   languageName: node
   linkType: hard
 
@@ -6925,7 +6946,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.12":
+"mime-types@npm:^2.1.35":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -6943,7 +6964,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^10.2.2, minimatch@npm:^10.2.4":
+"minimatch@npm:^10.2.2, minimatch@npm:^10.2.4, minimatch@npm:^10.2.5":
   version: 10.2.5
   resolution: "minimatch@npm:10.2.5"
   dependencies:
@@ -6952,7 +6973,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^9.0.1, minimatch@npm:^9.0.3, minimatch@npm:^9.0.4":
+"minimatch@npm:^9.0.1, minimatch@npm:^9.0.4":
   version: 9.0.9
   resolution: "minimatch@npm:9.0.9"
   dependencies:
@@ -7051,7 +7072,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mlly@npm:^1.7.4, mlly@npm:^1.8.0":
+"mlly@npm:^1.7.4, mlly@npm:^1.8.2":
   version: 1.8.2
   resolution: "mlly@npm:1.8.2"
   dependencies:
@@ -7084,12 +7105,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.11":
-  version: 3.3.11
-  resolution: "nanoid@npm:3.3.11"
+"nanoid@npm:^3.3.17":
+  version: 3.3.18
+  resolution: "nanoid@npm:3.3.18"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 10/73b5afe5975a307aaa3c95dfe3334c52cdf9ae71518176895229b8d65ab0d1c0417dd081426134eb7571c055720428ea5d57c645138161e7d10df80815527c48
+  checksum: 10/1b3b4fdac831b92b56d1dbe8b1e63a372432faf86ea383134e3b53141ef8108a60b7f84343b5cefecac9550bb74edf8164da93ea07d1c4f757039bc75d8a5d9e
   languageName: node
   linkType: hard
 
@@ -7165,31 +7186,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-normalize-package-bin@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "npm-normalize-package-bin@npm:4.0.0"
-  checksum: 10/e1a0971e5640bc116c5197f9707d86dc404b6d8e13da2c7ea82baa5583b8da279a3c8607234aa1d733c2baac3b3eba87b156f021f20ae183dc4806530e61675d
+"nostics@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "nostics@npm:1.1.4"
+  checksum: 10/bf1d3538cbaf61526420b82e7acee0cfec2c7b698fe4240a73be5fff0213def3a68561ce8f4d7a63e09a46b6b633e7498cebe19d268fc51e87546c81c98780a2
   languageName: node
   linkType: hard
 
-"npm-run-all2@npm:^8.0.4":
-  version: 8.0.4
-  resolution: "npm-run-all2@npm:8.0.4"
+"npm-normalize-package-bin@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "npm-normalize-package-bin@npm:6.0.0"
+  checksum: 10/0d9b2a629b488bec426abc64718a5fdf095b40039b58d218f112eb51feb17249f2b362084b787ace8a0b44c56908621b9ca87a40c9c08db9630046a90f5cabdf
+  languageName: node
+  linkType: hard
+
+"npm-run-all2@npm:^9.0.3":
+  version: 9.0.3
+  resolution: "npm-run-all2@npm:9.0.3"
   dependencies:
-    ansi-styles: "npm:^6.2.1"
+    ansi-styles: "npm:^7.0.0"
     cross-spawn: "npm:^7.0.6"
     memorystream: "npm:^0.3.1"
     picomatch: "npm:^4.0.2"
-    pidtree: "npm:^0.6.0"
-    read-package-json-fast: "npm:^4.0.0"
-    shell-quote: "npm:^1.7.3"
-    which: "npm:^5.0.0"
+    pidtree: "npm:^1.0.0"
+    read-package-json-fast: "npm:^6.0.0"
+    shell-quote: "npm:^1.8.4"
+    which: "npm:^7.0.0"
   bin:
     npm-run-all: bin/npm-run-all/index.js
     npm-run-all2: bin/npm-run-all/index.js
     run-p: bin/run-p/index.js
     run-s: bin/run-s/index.js
-  checksum: 10/6e485f0d71fdfcf5bd872e5bbb8440ea5816ebeed88e6e39ff6e758d76adefa516b3101ed7ddc8de117d61b499f176417c87b0c595394e15733738834ad6ef0a
+  checksum: 10/4b67957c871edee07d4cd30404b99dbd009094a2722bf1829657d5f13688752000fad1ede202dc76ae0cfbbc7b9d17df7b624904454062d53552db8030cc03e9
   languageName: node
   linkType: hard
 
@@ -7223,10 +7251,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oniguruma-parser@npm:^0.12.1":
-  version: 0.12.1
-  resolution: "oniguruma-parser@npm:0.12.1"
-  checksum: 10/2e7e308ec222f377b4be21e87f009729ce1cc014511d35a50440e7270a17413e4859b8c7ad1985123abe1089bda5ad2d0feccc75f7de25d9cb272b7cc34b4f3c
+"oniguruma-parser@npm:^0.12.2":
+  version: 0.12.2
+  resolution: "oniguruma-parser@npm:0.12.2"
+  checksum: 10/df1ece36c73694253fd650ef9fc6469f67dee603f4e726b79f85a97626f5dbc968f54c6fbdbe44338ccdf0728b3c44067ec3834ba656e3bd4b7853bc51b102a8
   languageName: node
   linkType: hard
 
@@ -7241,14 +7269,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oniguruma-to-es@npm:^4.3.4":
-  version: 4.3.5
-  resolution: "oniguruma-to-es@npm:4.3.5"
+"oniguruma-to-es@npm:^4.3.6":
+  version: 4.3.6
+  resolution: "oniguruma-to-es@npm:4.3.6"
   dependencies:
-    oniguruma-parser: "npm:^0.12.1"
+    oniguruma-parser: "npm:^0.12.2"
     regex: "npm:^6.1.0"
     regex-recursion: "npm:^6.0.2"
-  checksum: 10/fb73b21776735876a12ce5fe797906faf2191d5fd57580ce4f996a8badf75848a81794f4b1297ec68c5ddf0f5ebe6d1d07633c6d8038c9bd17a01d5b7fe0a633
+  checksum: 10/10fc62a8b166e712deaa74d905bea9133f6a558a4e710ba0a9e63ff3e51ff47a2be10eea05eeca87a16feb21469f3966c8b9731fce675229ee1e32432f3a1d69
   languageName: node
   linkType: hard
 
@@ -7266,30 +7294,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"oxfmt@npm:^0.47.0":
-  version: 0.47.0
-  resolution: "oxfmt@npm:0.47.0"
-  dependencies:
-    "@oxfmt/binding-android-arm-eabi": "npm:0.47.0"
-    "@oxfmt/binding-android-arm64": "npm:0.47.0"
-    "@oxfmt/binding-darwin-arm64": "npm:0.47.0"
-    "@oxfmt/binding-darwin-x64": "npm:0.47.0"
-    "@oxfmt/binding-freebsd-x64": "npm:0.47.0"
-    "@oxfmt/binding-linux-arm-gnueabihf": "npm:0.47.0"
-    "@oxfmt/binding-linux-arm-musleabihf": "npm:0.47.0"
-    "@oxfmt/binding-linux-arm64-gnu": "npm:0.47.0"
-    "@oxfmt/binding-linux-arm64-musl": "npm:0.47.0"
-    "@oxfmt/binding-linux-ppc64-gnu": "npm:0.47.0"
-    "@oxfmt/binding-linux-riscv64-gnu": "npm:0.47.0"
-    "@oxfmt/binding-linux-riscv64-musl": "npm:0.47.0"
-    "@oxfmt/binding-linux-s390x-gnu": "npm:0.47.0"
-    "@oxfmt/binding-linux-x64-gnu": "npm:0.47.0"
-    "@oxfmt/binding-linux-x64-musl": "npm:0.47.0"
-    "@oxfmt/binding-openharmony-arm64": "npm:0.47.0"
-    "@oxfmt/binding-win32-arm64-msvc": "npm:0.47.0"
-    "@oxfmt/binding-win32-ia32-msvc": "npm:0.47.0"
-    "@oxfmt/binding-win32-x64-msvc": "npm:0.47.0"
+"oxfmt@npm:^0.63.0":
+  version: 0.63.0
+  resolution: "oxfmt@npm:0.63.0"
+  dependencies:
+    "@oxfmt/binding-android-arm-eabi": "npm:0.63.0"
+    "@oxfmt/binding-android-arm64": "npm:0.63.0"
+    "@oxfmt/binding-darwin-arm64": "npm:0.63.0"
+    "@oxfmt/binding-darwin-x64": "npm:0.63.0"
+    "@oxfmt/binding-freebsd-x64": "npm:0.63.0"
+    "@oxfmt/binding-linux-arm-gnueabihf": "npm:0.63.0"
+    "@oxfmt/binding-linux-arm-musleabihf": "npm:0.63.0"
+    "@oxfmt/binding-linux-arm64-gnu": "npm:0.63.0"
+    "@oxfmt/binding-linux-arm64-musl": "npm:0.63.0"
+    "@oxfmt/binding-linux-ppc64-gnu": "npm:0.63.0"
+    "@oxfmt/binding-linux-riscv64-gnu": "npm:0.63.0"
+    "@oxfmt/binding-linux-riscv64-musl": "npm:0.63.0"
+    "@oxfmt/binding-linux-s390x-gnu": "npm:0.63.0"
+    "@oxfmt/binding-linux-x64-gnu": "npm:0.63.0"
+    "@oxfmt/binding-linux-x64-musl": "npm:0.63.0"
+    "@oxfmt/binding-openharmony-arm64": "npm:0.63.0"
+    "@oxfmt/binding-win32-arm64-msvc": "npm:0.63.0"
+    "@oxfmt/binding-win32-ia32-msvc": "npm:0.63.0"
+    "@oxfmt/binding-win32-x64-msvc": "npm:0.63.0"
     tinypool: "npm:2.1.0"
+  peerDependencies:
+    svelte: ^5.0.0
+    vite-plus: "*"
   dependenciesMeta:
     "@oxfmt/binding-android-arm-eabi":
       optional: true
@@ -7329,37 +7360,43 @@ __metadata:
       optional: true
     "@oxfmt/binding-win32-x64-msvc":
       optional: true
+  peerDependenciesMeta:
+    svelte:
+      optional: true
+    vite-plus:
+      optional: true
   bin:
     oxfmt: bin/oxfmt
-  checksum: 10/2a707ef7cc0035f285b7a92c4ee90721f6a43e4a22ee9dd33ea2ac4371facbd13ca40576586fcf8debde5bd747a653d4c0a31c3d479f8d37e7f4f50f38d49175
-  languageName: node
-  linkType: hard
-
-"oxlint@npm:1.62.0":
-  version: 1.62.0
-  resolution: "oxlint@npm:1.62.0"
-  dependencies:
-    "@oxlint/binding-android-arm-eabi": "npm:1.62.0"
-    "@oxlint/binding-android-arm64": "npm:1.62.0"
-    "@oxlint/binding-darwin-arm64": "npm:1.62.0"
-    "@oxlint/binding-darwin-x64": "npm:1.62.0"
-    "@oxlint/binding-freebsd-x64": "npm:1.62.0"
-    "@oxlint/binding-linux-arm-gnueabihf": "npm:1.62.0"
-    "@oxlint/binding-linux-arm-musleabihf": "npm:1.62.0"
-    "@oxlint/binding-linux-arm64-gnu": "npm:1.62.0"
-    "@oxlint/binding-linux-arm64-musl": "npm:1.62.0"
-    "@oxlint/binding-linux-ppc64-gnu": "npm:1.62.0"
-    "@oxlint/binding-linux-riscv64-gnu": "npm:1.62.0"
-    "@oxlint/binding-linux-riscv64-musl": "npm:1.62.0"
-    "@oxlint/binding-linux-s390x-gnu": "npm:1.62.0"
-    "@oxlint/binding-linux-x64-gnu": "npm:1.62.0"
-    "@oxlint/binding-linux-x64-musl": "npm:1.62.0"
-    "@oxlint/binding-openharmony-arm64": "npm:1.62.0"
-    "@oxlint/binding-win32-arm64-msvc": "npm:1.62.0"
-    "@oxlint/binding-win32-ia32-msvc": "npm:1.62.0"
-    "@oxlint/binding-win32-x64-msvc": "npm:1.62.0"
+  checksum: 10/7c6416d00fa3f823ef44b1d463f34e8865759cde582eca6640200e544fa2e38a9bc88deb2e8fcfed9303decfb735b0ceb6a583d66cd4ae2b53be11e2b0e5517b
+  languageName: node
+  linkType: hard
+
+"oxlint@npm:1.78.0":
+  version: 1.78.0
+  resolution: "oxlint@npm:1.78.0"
+  dependencies:
+    "@oxlint/binding-android-arm-eabi": "npm:1.78.0"
+    "@oxlint/binding-android-arm64": "npm:1.78.0"
+    "@oxlint/binding-darwin-arm64": "npm:1.78.0"
+    "@oxlint/binding-darwin-x64": "npm:1.78.0"
+    "@oxlint/binding-freebsd-x64": "npm:1.78.0"
+    "@oxlint/binding-linux-arm-gnueabihf": "npm:1.78.0"
+    "@oxlint/binding-linux-arm-musleabihf": "npm:1.78.0"
+    "@oxlint/binding-linux-arm64-gnu": "npm:1.78.0"
+    "@oxlint/binding-linux-arm64-musl": "npm:1.78.0"
+    "@oxlint/binding-linux-ppc64-gnu": "npm:1.78.0"
+    "@oxlint/binding-linux-riscv64-gnu": "npm:1.78.0"
+    "@oxlint/binding-linux-riscv64-musl": "npm:1.78.0"
+    "@oxlint/binding-linux-s390x-gnu": "npm:1.78.0"
+    "@oxlint/binding-linux-x64-gnu": "npm:1.78.0"
+    "@oxlint/binding-linux-x64-musl": "npm:1.78.0"
+    "@oxlint/binding-openharmony-arm64": "npm:1.78.0"
+    "@oxlint/binding-win32-arm64-msvc": "npm:1.78.0"
+    "@oxlint/binding-win32-ia32-msvc": "npm:1.78.0"
+    "@oxlint/binding-win32-x64-msvc": "npm:1.78.0"
   peerDependencies:
-    oxlint-tsgolint: ">=0.18.0"
+    oxlint-tsgolint: ">=7.0.2001"
+    vite-plus: "*"
   dependenciesMeta:
     "@oxlint/binding-android-arm-eabi":
       optional: true
@@ -7402,9 +7439,11 @@ __metadata:
   peerDependenciesMeta:
     oxlint-tsgolint:
       optional: true
+    vite-plus:
+      optional: true
   bin:
     oxlint: bin/oxlint
-  checksum: 10/47549f05027456573277b96e3ce5a6427c926b5f5160d24263254566a5d88f6363099232be3641ec844e6d69ca8ec913b60d2194850ae2f3d9c852aff2bebe24
+  checksum: 10/fe9156607c92be0d94d77599ab4741bebad9dbbd73976fbe4e9493404895d8a1a25618bf3ef75854c107be48cd4fbda2bee2dc9cfd6cbc9a68f3ea989df4be0f
   languageName: node
   linkType: hard
 
@@ -7544,34 +7583,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^4.0.2, picomatch@npm:^4.0.3, picomatch@npm:^4.0.4":
-  version: 4.0.4
-  resolution: "picomatch@npm:4.0.4"
-  checksum: 10/f6ef80a3590827ce20378ae110ac78209cc4f74d39236370f1780f957b7ee41c12acde0e4651b90f39983506fd2f5e449994716f516db2e9752924aff8de93ce
+"picomatch@npm:^4.0.2, picomatch@npm:^4.0.3, picomatch@npm:^4.0.4, picomatch@npm:^4.0.5":
+  version: 4.0.5
+  resolution: "picomatch@npm:4.0.5"
+  checksum: 10/8bad770af9dcdb7f94ad1a893adcbe08a97d75a18872f8fed37161d3124217471c402b3929f051532f795f4ff2e53dcebb1644df4c1a5f3a9c476fef3b9f8c51
   languageName: node
   linkType: hard
 
-"pidtree@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "pidtree@npm:0.6.0"
+"pidtree@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "pidtree@npm:1.0.0"
   bin:
     pidtree: bin/pidtree.js
-  checksum: 10/ea67fb3159e170fd069020e0108ba7712df9f0fd13c8db9b2286762856ddce414fb33932e08df4bfe36e91fe860b51852aee49a6f56eb4714b69634343add5df
+  checksum: 10/f9195d62aaf3a87c8c7c18bf3a96f9e28fdb58e347050271e2c7c87c8c66d1b1193a8ae4a8749487a772d3f29a543a74de1d315772327ec17e55ba114417ecd0
   languageName: node
   linkType: hard
 
-"pinia@npm:3.0.4":
-  version: 3.0.4
-  resolution: "pinia@npm:3.0.4"
+"pinia@npm:4.0.2":
+  version: 4.0.2
+  resolution: "pinia@npm:4.0.2"
   dependencies:
-    "@vue/devtools-api": "npm:^7.7.7"
+    nostics: "npm:^1.1.4"
   peerDependencies:
-    typescript: ">=4.5.0"
+    "@vue/devtools-api": ^8.1.5
+    typescript: ">=5.6.0"
     vue: ^3.5.11
   peerDependenciesMeta:
+    "@vue/devtools-api":
+      optional: false
     typescript:
       optional: true
-  checksum: 10/1f58c468729997f1bae330126e14b3f2010230bddb101fcda8d479b5a3188ce39e687240fe758fc865339fcc6de643688571558d72b3d0788a852db5b0640d94
+  checksum: 10/7360bd9c9cde49db7b188c4180b45cb4775f2a5ed3969a16e0396f8d1dd6335dc820d0aa703c4226f00ec8534bb0158c759eae9dd9c3cd36c8183cf5c03be01f
   languageName: node
   linkType: hard
 
@@ -7597,27 +7639,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.59.1":
-  version: 1.59.1
-  resolution: "playwright-core@npm:1.59.1"
+"playwright-core@npm:1.62.1":
+  version: 1.62.1
+  resolution: "playwright-core@npm:1.62.1"
   bin:
     playwright-core: cli.js
-  checksum: 10/d27857a6701587c2a9bfa26fed9a5d8c617a392299b99b187f2ddc198d012a1e296449806bc907220debea938152677e8b4d91d304ed00645f762f778de3abec
+  checksum: 10/2dab88793a6a5cbfa27641664548ded72a4f869d7eab8d3541e070081b5e09595253aa3dbd42eb4e6eca1b03d96a727c60704359b5b309e71ca58b12549a4c06
   languageName: node
   linkType: hard
 
-"playwright@npm:^1.59.1":
-  version: 1.59.1
-  resolution: "playwright@npm:1.59.1"
+"playwright@npm:^1.62.1":
+  version: 1.62.1
+  resolution: "playwright@npm:1.62.1"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.59.1"
+    playwright-core: "npm:1.62.1"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10/17b2df42effa362adc6aa3192b625bd80f26b91a0c253a2375ac89ace68407b746dd87b4081629c50c58c3cb031c5b837a32fef43a3c98c60ea504e0b001e5fa
+  checksum: 10/f99546873ab2545160ad5a0145fef8e2c1d805efd1ba77356f5b0ee3d8688192b3a2af08cd948bece36ca386fdfad889ef7e53b7aaad309940744c0bbccc0a19
   languageName: node
   linkType: hard
 
@@ -7690,13 +7732,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^7.1.0, postcss-selector-parser@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "postcss-selector-parser@npm:7.1.1"
+"postcss-selector-parser@npm:^7.1.1, postcss-selector-parser@npm:^7.1.4":
+  version: 7.1.4
+  resolution: "postcss-selector-parser@npm:7.1.4"
   dependencies:
     cssesc: "npm:^3.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10/bb3c6455b20af26a556e3021e21101d8470252644e673c1612f7348ff8dd41b11321329f0694cf299b5b94863f823480b72d3e2f4bd3a89dc43e2d8c0dbad341
+  checksum: 10/c6d36b37defd387d65b5e0b778cd441303d147eb4a4b7135c6a0452fa777310027218db3ff71a19fb831d067bcdf45a776c6ed71d83bd2ced8afc2e3d5b03385
   languageName: node
   linkType: hard
 
@@ -7707,14 +7749,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.43, postcss@npm:^8.5.0, postcss@npm:^8.5.10, postcss@npm:^8.5.12, postcss@npm:^8.5.6, postcss@npm:^8.5.8, postcss@npm:^8.5.9":
-  version: 8.5.12
-  resolution: "postcss@npm:8.5.12"
+"postcss@npm:^8.4.43, postcss@npm:^8.5.0, postcss@npm:^8.5.16, postcss@npm:^8.5.19, postcss@npm:^8.5.26, postcss@npm:^8.5.6, postcss@npm:^8.5.8":
+  version: 8.5.26
+  resolution: "postcss@npm:8.5.26"
   dependencies:
-    nanoid: "npm:^3.3.11"
+    nanoid: "npm:^3.3.17"
     picocolors: "npm:^1.1.1"
     source-map-js: "npm:^1.2.1"
-  checksum: 10/ec6b79b68c363eca3c8ffceb134a4ab637274aee6ac0857614bf7c18d40ce4ce5f9036edec57b7e0be99895724d2599d0ec7328dbd7f407204e7548697b322f1
+  checksum: 10/842a624f822f77cb37264cc24f0cf97c0a69dd8d6f7b4a6d76b5a8dc95355899dd044f33a2d4e890da858293de570fce18dff453f3b629ff14cac67a3591895a
   languageName: node
   linkType: hard
 
@@ -7802,12 +7844,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qified@npm:^0.9.0":
-  version: 0.9.1
-  resolution: "qified@npm:0.9.1"
+"qified@npm:^0.10.1":
+  version: 0.10.1
+  resolution: "qified@npm:0.10.1"
   dependencies:
     hookified: "npm:^2.1.1"
-  checksum: 10/eb970e6d4f657441a2e31f4c21983ccec2083d1e30ac4fd153cbdca3ebbc19a0cc4d26876250de350649df0043d35251b210d1b2c8630a4babb384b9d699604b
+  checksum: 10/65eda075defad24a3c53a0bcb0056fdaffb8355ca5dbe33bffaf3143e767dd1f0ddb403a4d9402e3bd0bc54b8efdec934055fb13eb5b6e7070835a80bf517f79
   languageName: node
   linkType: hard
 
@@ -7825,20 +7867,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-package-json-fast@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "read-package-json-fast@npm:4.0.0"
+"read-package-json-fast@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "read-package-json-fast@npm:6.0.0"
   dependencies:
-    json-parse-even-better-errors: "npm:^4.0.0"
-    npm-normalize-package-bin: "npm:^4.0.0"
-  checksum: 10/bf0becd7d0b652dcc5874b466d1dbd98313180e89505c072f35ff48a1ad6bdaf2427143301e1924d64e4af5064cda8be5df16f14de882f03130e29051bbaab87
-  languageName: node
-  linkType: hard
-
-"readdirp@npm:^4.0.1":
-  version: 4.1.2
-  resolution: "readdirp@npm:4.1.2"
-  checksum: 10/7b817c265940dba90bb9c94d82920d76c3a35ea2d67f9f9d8bd936adcfe02d50c802b14be3dd2e725e002dddbe2cc1c7a0edfb1bc3a365c9dfd5a61e612eea1e
+    json-parse-even-better-errors: "npm:^6.0.0"
+    npm-normalize-package-bin: "npm:^6.0.0"
+  checksum: 10/22fc66c316533f000ec12ed08ae79ab935a13f07c7e928dbb84af3674b0a47aa56fb8a03c170a9b2e4ecbfcb502f17cd3c79814002c3a3a30d17b1e668b1fc3c
   languageName: node
   linkType: hard
 
@@ -7917,14 +7952,14 @@ __metadata:
 
 "resolve@patch:resolve@npm%3A~1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A~1.22.2#optional!builtin<compat/resolve>":
   version: 1.22.11
-  resolution: "resolve@patch:resolve@npm%3A1.22.11#optional!builtin<compat/resolve>::version=1.22.11&hash=c3c19d"
+  resolution: "resolve@patch:resolve@npm%3A1.22.11#optional!builtin<compat/resolve>::version=1.22.11&hash=9bd1a5"
   dependencies:
     is-core-module: "npm:^2.16.1"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10/fd342cad25e52cd6f4f3d1716e189717f2522bfd6641109fe7aa372f32b5714a296ed7c238ddbe7ebb0c1ddfe0b7f71c9984171024c97cf1b2073e3e40ff71a8
+  checksum: 10/c990146fed81dd7792c56c1d62c170a8c8330bee86ef5d2524f0b1db79cfd9a6e2b4ad3cd4742b2685e51117b67be5d6f8cfd6ffa9c57bd64a1c8c8c9ff4c965
   languageName: node
   linkType: hard
 
@@ -8113,12 +8148,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:1.99.0":
-  version: 1.99.0
-  resolution: "sass@npm:1.99.0"
+"sass@npm:1.102.0":
+  version: 1.102.0
+  resolution: "sass@npm:1.102.0"
   dependencies:
     "@parcel/watcher": "npm:^2.4.1"
-    chokidar: "npm:^4.0.0"
+    chokidar: "npm:^5.0.0"
     immutable: "npm:^5.1.5"
     source-map-js: "npm:>=0.6.2 <2.0.0"
   dependenciesMeta:
@@ -8126,7 +8161,7 @@ __metadata:
       optional: true
   bin:
     sass: sass.js
-  checksum: 10/93f9d5c3b3e4659fb68a8e90d9637818581b0152dfb543ac159d57bb1e384f6b2009b7ac35ef88883f441cddfabd248fdcbba3fe814f4f23e3bfe58c917787a6
+  checksum: 10/c69c254db64274778cc2a7f00a0fd92c0c53b9c3d25e0e8e7cf8c18788ff998c1e51e1e16198a62f58513c8c406ecc2bb61c4f29f05a0f7109c2f26700161137
   languageName: node
   linkType: hard
 
@@ -8137,23 +8172,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.5, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.6.2, semver@npm:^7.6.3, semver@npm:^7.7.3":
-  version: 7.7.4
-  resolution: "semver@npm:7.7.4"
+"semver@npm:^7.3.5, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.6.2, semver@npm:^7.6.3, semver@npm:^7.7.3, semver@npm:^7.8.5":
+  version: 7.8.5
+  resolution: "semver@npm:7.8.5"
   bin:
     semver: bin/semver.js
-  checksum: 10/26bdc6d58b29528f4142d29afb8526bc335f4fc04c4a10f2b98b217f277a031c66736bf82d3d3bb354a2f6a3ae50f18fd62b053c4ac3f294a3d10a61f5075b75
+  checksum: 10/9b01d2ff11e6e4a4539b7ca3c5f280c8704cb397a28504469f2ed4f00ad2194748d756647362a9712fff30984d15772ab7f083108c2fb508e2096ae9e708f22c
   languageName: node
   linkType: hard
 
-"semver@npm:~7.5.4":
-  version: 7.5.4
-  resolution: "semver@npm:7.5.4"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
+"semver@npm:~7.7.4":
+  version: 7.7.4
+  resolution: "semver@npm:7.7.4"
   bin:
     semver: bin/semver.js
-  checksum: 10/985dec0d372370229a262c737063860fabd4a1c730662c1ea3200a2f649117761a42184c96df62a0e885e76fbd5dace41087d6c1ac0351b13c0df5d6bcb1b5ac
+  checksum: 10/26bdc6d58b29528f4142d29afb8526bc335f4fc04c4a10f2b98b217f277a031c66736bf82d3d3bb354a2f6a3ae50f18fd62b053c4ac3f294a3d10a61f5075b75
   languageName: node
   linkType: hard
 
@@ -8173,26 +8206,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shell-quote@npm:^1.7.3":
-  version: 1.8.3
-  resolution: "shell-quote@npm:1.8.3"
-  checksum: 10/5473e354637c2bd698911224129c9a8961697486cff1fb221f234d71c153fc377674029b0223d1d3c953a68d451d79366abfe53d1a0b46ee1f28eb9ade928f4c
+"shell-quote@npm:^1.8.4":
+  version: 1.8.4
+  resolution: "shell-quote@npm:1.8.4"
+  checksum: 10/a3e3796385f2cd5cf0b78207a4439f0c7395c0833fc75b2473084b5d298c109c5c0fa687fcd1c04e4b4484866e5bb8eaae7efae443b80fff71ea7e29baf11f0c
   languageName: node
   linkType: hard
 
-"shiki@npm:4.0.2":
-  version: 4.0.2
-  resolution: "shiki@npm:4.0.2"
-  dependencies:
-    "@shikijs/core": "npm:4.0.2"
-    "@shikijs/engine-javascript": "npm:4.0.2"
-    "@shikijs/engine-oniguruma": "npm:4.0.2"
-    "@shikijs/langs": "npm:4.0.2"
-    "@shikijs/themes": "npm:4.0.2"
-    "@shikijs/types": "npm:4.0.2"
+"shiki@npm:4.4.3":
+  version: 4.4.3
+  resolution: "shiki@npm:4.4.3"
+  dependencies:
+    "@shikijs/core": "npm:4.4.3"
+    "@shikijs/engine-javascript": "npm:4.4.3"
+    "@shikijs/engine-oniguruma": "npm:4.4.3"
+    "@shikijs/langs": "npm:4.4.3"
+    "@shikijs/themes": "npm:4.4.3"
+    "@shikijs/types": "npm:4.4.3"
     "@shikijs/vscode-textmate": "npm:^10.0.2"
-    "@types/hast": "npm:^3.0.4"
-  checksum: 10/6bb4b3d649f903950d879e86db5df790625e35264d488e104ebf4991a347c9c97038c5fa603457957b14920e1b83238b84307714d614df9c597c3c7df6af229c
+    "@types/hast": "npm:^3.0.5"
+  checksum: 10/076d5a02ba1bb632abfddd607c1a5e5be8f3b083cdfa2702771ba47e084544a1e0146a550915ad6f60eb41b219eb80c6709f4bb2abec573eec9a4b2fc20a1b7c
   languageName: node
   linkType: hard
 
@@ -8399,13 +8432,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-width@npm:^8.2.0":
-  version: 8.2.0
-  resolution: "string-width@npm:8.2.0"
+"string-width@npm:^8.2.1":
+  version: 8.2.1
+  resolution: "string-width@npm:8.2.1"
   dependencies:
     get-east-asian-width: "npm:^1.5.0"
     strip-ansi: "npm:^7.1.2"
-  checksum: 10/c4f62877ec08fca155e84a260eb4f58f473cfe5169bd1c1e21ffb563d8e0b7f6d705cc3d250f2ed6bb4f30ee9732ad026f54afaac77aa487e3d1dc1b1969e51b
+  checksum: 10/cfadcc454b357d1a2ef88afb85068c7605900c9920362a16df9b4c320cf411983cee51b9832b70772d138674c2851d506f39c7e669c961a1cdd1258207580805
   languageName: node
   linkType: hard
 
@@ -8437,13 +8470,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:~3.1.1":
-  version: 3.1.1
-  resolution: "strip-json-comments@npm:3.1.1"
-  checksum: 10/492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
-  languageName: node
-  linkType: hard
-
 "stylelint-config-html@npm:>=1.0.0":
   version: 1.1.0
   resolution: "stylelint-config-html@npm:1.1.0"
@@ -8539,49 +8565,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylelint@npm:17.9.1":
-  version: 17.9.1
-  resolution: "stylelint@npm:17.9.1"
+"stylelint@npm:17.14.1":
+  version: 17.14.1
+  resolution: "stylelint@npm:17.14.1"
   dependencies:
-    "@csstools/css-calc": "npm:^3.2.0"
+    "@csstools/css-calc": "npm:^3.2.1"
     "@csstools/css-parser-algorithms": "npm:^4.0.0"
-    "@csstools/css-syntax-patches-for-csstree": "npm:^1.1.3"
+    "@csstools/css-syntax-patches-for-csstree": "npm:^1.1.6"
     "@csstools/css-tokenizer": "npm:^4.0.0"
     "@csstools/media-query-list-parser": "npm:^5.0.0"
     "@csstools/selector-resolve-nested": "npm:^4.0.0"
     "@csstools/selector-specificity": "npm:^6.0.0"
     colord: "npm:^2.9.3"
-    cosmiconfig: "npm:^9.0.1"
+    cosmiconfig: "npm:^9.0.2"
     css-functions-list: "npm:^3.3.3"
     css-tree: "npm:^3.2.1"
     debug: "npm:^4.4.3"
     fast-glob: "npm:^3.3.3"
     fastest-levenshtein: "npm:^1.0.16"
-    file-entry-cache: "npm:^11.1.2"
+    file-entry-cache: "npm:^11.1.5"
     global-modules: "npm:^2.0.0"
-    globby: "npm:^16.2.0"
+    globby: "npm:^16.2.1"
     globjoin: "npm:^0.1.4"
     html-tags: "npm:^5.1.0"
     ignore: "npm:^7.0.5"
     import-meta-resolve: "npm:^4.2.0"
-    is-plain-object: "npm:^5.0.0"
     mathml-tag-names: "npm:^4.0.0"
     meow: "npm:^14.1.0"
     micromatch: "npm:^4.0.8"
     normalize-path: "npm:^3.0.0"
     picocolors: "npm:^1.1.1"
-    postcss: "npm:^8.5.9"
+    postcss: "npm:^8.5.16"
     postcss-safe-parser: "npm:^7.0.1"
-    postcss-selector-parser: "npm:^7.1.1"
+    postcss-selector-parser: "npm:^7.1.4"
     postcss-value-parser: "npm:^4.2.0"
-    string-width: "npm:^8.2.0"
-    supports-hyperlinks: "npm:^4.4.0"
+    string-width: "npm:^8.2.1"
+    supports-hyperlinks: "npm:^4.5.0"
     svg-tags: "npm:^1.0.0"
     table: "npm:^6.9.0"
     write-file-atomic: "npm:^7.0.1"
   bin:
     stylelint: bin/stylelint.mjs
-  checksum: 10/94200a4a8830a5b136df42e7cb060c0021ff73b40c86bed25c9e0b30e53c1c26a22850971ac90d2bd598bac594740e6cf2cda47dcc61cde601fe8e4d693e1d79
+  checksum: 10/c8ebb82d5f5667e4d7578a690c402575bae0e96493c27d32d855e69ca558218d80d95a604d9ef8da96da5488e8bf3c5ad0498055ab5ae77d339f43ec92ca64ed
   languageName: node
   linkType: hard
 
@@ -8610,13 +8635,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-hyperlinks@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "supports-hyperlinks@npm:4.4.0"
+"supports-hyperlinks@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "supports-hyperlinks@npm:4.5.0"
   dependencies:
     has-flag: "npm:^5.0.1"
     supports-color: "npm:^10.2.2"
-  checksum: 10/f128846b76c2d573cb5a44999513f4ccf407969e6ff6ebe8a7587c2bcd24dc75accb310a9188d1afde416d4cbdf9a5069889ad9debc1789d8a9e4057513c5f35
+  checksum: 10/e37e0dec3439ffe6b05bf90c41fb86e7be8bf08ad3ba6a4dd84020cdd76bba6fafdd9bb9258938f50eaadd970395b696ece9764d095cb5981da5b9da80f4165e
   languageName: node
   linkType: hard
 
@@ -8681,13 +8706,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.15":
-  version: 0.2.15
-  resolution: "tinyglobby@npm:0.2.15"
+"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.15, tinyglobby@npm:^0.2.17":
+  version: 0.2.17
+  resolution: "tinyglobby@npm:0.2.17"
   dependencies:
     fdir: "npm:^6.5.0"
-    picomatch: "npm:^4.0.3"
-  checksum: 10/d72bd826a8b0fa5fa3929e7fe5ba48fceb2ae495df3a231b6c5408cd7d8c00b58ab5a9c2a76ba56a62ee9b5e083626f1f33599734bed1ffc4b792406408f0ca2
+    picomatch: "npm:^4.0.4"
+  checksum: 10/f85e8a217d675c3f78d5f0ad25ea4557e7e023ed13ddc2b014da10bd0312eea53a34cd52356af07ccdff777f1243012547656282a4ca70936f68bf5065fbaa71
   languageName: node
   linkType: hard
 
@@ -8751,35 +8776,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"twoslash-protocol@npm:0.3.6":
-  version: 0.3.6
-  resolution: "twoslash-protocol@npm:0.3.6"
-  checksum: 10/693ac81ab6d3fd7a664828c74e8a819ab114c3b29740ac0c009ef2958b0ac07609c9a501ecee31ebd1317dc7757344dfd6643472f8aef95aca52bbcc92a67987
+"twoslash-protocol@npm:0.3.9":
+  version: 0.3.9
+  resolution: "twoslash-protocol@npm:0.3.9"
+  checksum: 10/bcbd5ca699fde682fe6706e7b78ffa6717ae806f00cc10c6a8f2745a94f99c9c456127e11124b5d0502107d2366c322baa1a843b8e8f8afa32a38b06ca047f8f
   languageName: node
   linkType: hard
 
-"twoslash-vue@npm:^0.3.6":
-  version: 0.3.6
-  resolution: "twoslash-vue@npm:0.3.6"
+"twoslash-vue@npm:^0.3.9":
+  version: 0.3.9
+  resolution: "twoslash-vue@npm:0.3.9"
   dependencies:
-    "@vue/language-core": "npm:^3.2.0"
-    twoslash: "npm:0.3.6"
-    twoslash-protocol: "npm:0.3.6"
+    "@vue/language-core": "npm:^3.2.6"
+    twoslash: "npm:0.3.9"
+    twoslash-protocol: "npm:0.3.9"
   peerDependencies:
-    typescript: ^5.5.0
-  checksum: 10/66fb1e7e331be76ce6b6501ee95c092f2a1eb7bd3bab42cc5653bbade80d81e0dcca6812422d278cb0a374677d0067a93deaf02cccd17f3e92e02ae2d4bc6a85
+    typescript: ^5.5.0 || ^6.0.0
+  checksum: 10/97375e6be36589d24d6696dec58d0f0aa1c642ea1ab53fca2305561434625f9cb2c3c97b5cb8e01a2e85067bfb465812025315aaf1528bd407d5afd81c698b74
   languageName: node
   linkType: hard
 
-"twoslash@npm:0.3.6, twoslash@npm:^0.3.6":
-  version: 0.3.6
-  resolution: "twoslash@npm:0.3.6"
+"twoslash@npm:0.3.9, twoslash@npm:^0.3.9":
+  version: 0.3.9
+  resolution: "twoslash@npm:0.3.9"
   dependencies:
-    "@typescript/vfs": "npm:^1.6.2"
-    twoslash-protocol: "npm:0.3.6"
+    "@typescript/vfs": "npm:^1.6.4"
+    twoslash-protocol: "npm:0.3.9"
   peerDependencies:
-    typescript: ^5.5.0
-  checksum: 10/61e584affec7c3d304d1102bb839c73176d125f3e9687ebc5fb86dc9d36989c765af9b1eeb6fa0d04c852604e38dfdf988f004bd16b7a95e39fe350e5f514d93
+    typescript: ^5.5.0 || ^6.0.0
+  checksum: 10/dc52bf22380883f756ecb5ebc76baa31822aaa39d5027cafa52a19fe4ff89266c2ff1afcca495cd5db2394eeaf83698c165510b7ba3aeacd8fa8b9a1df149377
   languageName: node
   linkType: hard
 
@@ -8801,28 +8826,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript-eslint@npm:^8.56.0":
-  version: 8.58.0
-  resolution: "typescript-eslint@npm:8.58.0"
+"typescript-eslint@npm:^8.60.0":
+  version: 8.60.1
+  resolution: "typescript-eslint@npm:8.60.1"
   dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.58.0"
-    "@typescript-eslint/parser": "npm:8.58.0"
-    "@typescript-eslint/typescript-estree": "npm:8.58.0"
-    "@typescript-eslint/utils": "npm:8.58.0"
+    "@typescript-eslint/eslint-plugin": "npm:8.60.1"
+    "@typescript-eslint/parser": "npm:8.60.1"
+    "@typescript-eslint/typescript-estree": "npm:8.60.1"
+    "@typescript-eslint/utils": "npm:8.60.1"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
     typescript: ">=4.8.4 <6.1.0"
-  checksum: 10/e30c9a094c9cf49265db626c0570a1af21b117fe9ce695cd7f0e7962bd8ac1a4e5b5fb1a1e0cb5413f237cd32804be56b11fb72ee2cfede775768c28617b1a0b
-  languageName: node
-  linkType: hard
-
-"typescript@npm:5.8.2":
-  version: 5.8.2
-  resolution: "typescript@npm:5.8.2"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10/dbc2168a55d56771f4d581997be52bab5cbc09734fec976cfbaabd787e61fb4c6cf9125fd48c6f98054ce549c77ecedefc7f64252a830dd8e9c3381f61fbeb78
+  checksum: 10/e12091ab2540b817c76b0ec6aad92e341f810310bec2b24bc95780aee106049c05363998f6ea52ed066130c8afc41dca1627f56e4c1df1dd519f4d4ca0ce4910
   languageName: node
   linkType: hard
 
@@ -8836,16 +8851,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>":
-  version: 5.8.2
-  resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>::version=5.8.2&hash=5786d5"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10/97920a082ffc57583b1cb6bc4faa502acc156358e03f54c7fc7fdf0b61c439a717f4c9070c449ee9ee683d4cfc3bb203127c2b9794b2950f66d9d307a4ff262c
-  languageName: node
-  linkType: hard
-
 "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>":
   version: 5.9.3
   resolution: "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>::version=5.9.3&hash=5786d5"
@@ -8870,13 +8875,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici-types@npm:~7.16.0":
-  version: 7.16.0
-  resolution: "undici-types@npm:7.16.0"
-  checksum: 10/db43439f69c2d94cc29f75cbfe9de86df87061d6b0c577ebe9bb3255f49b22c50162a7d7eb413b0458b6510b8ca299ac7cff38c3a29fbd31af9f504bcf7fbc0d
-  languageName: node
-  linkType: hard
-
 "undici-types@npm:~7.18.0":
   version: 7.18.2
   resolution: "undici-types@npm:7.18.2"
@@ -8946,28 +8944,100 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unplugin-utils@npm:^0.3.0, unplugin-utils@npm:^0.3.1":
-  version: 0.3.1
-  resolution: "unplugin-utils@npm:0.3.1"
+"unplugin-dts@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "unplugin-dts@npm:1.0.3"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.1.4"
+    "@volar/typescript": "npm:^2.4.26"
+    compare-versions: "npm:^6.1.1"
+    debug: "npm:^4.4.0"
+    kolorist: "npm:^1.8.0"
+    local-pkg: "npm:^1.1.1"
+    magic-string: "npm:^0.30.17"
+    unplugin: "npm:^2.3.2"
+  peerDependencies:
+    "@microsoft/api-extractor": ">=7"
+    "@rspack/core": ^1
+    "@vue/language-core": ^3.1.5
+    esbuild: "*"
+    rolldown: "*"
+    rollup: ">=3"
+    typescript: ">=4"
+    vite: ">=3"
+    webpack: ^4 || ^5
+  peerDependenciesMeta:
+    "@microsoft/api-extractor":
+      optional: true
+    "@rspack/core":
+      optional: true
+    "@vue/language-core":
+      optional: true
+    esbuild:
+      optional: true
+    rolldown:
+      optional: true
+    rollup:
+      optional: true
+    vite:
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10/bb6e5b8dfe9a25d2524b6a7ecfac29dbf4db408dcfd31df9d8cd74daa048eb3aec90c1cd4c025b1d63fe42864f274767a7290e30e3d6f4e964f14371cbe096f4
+  languageName: node
+  linkType: hard
+
+"unplugin-utils@npm:^0.3.0, unplugin-utils@npm:^0.3.2":
+  version: 0.3.2
+  resolution: "unplugin-utils@npm:0.3.2"
   dependencies:
     pathe: "npm:^2.0.3"
-    picomatch: "npm:^4.0.3"
-  checksum: 10/202c8160a45ac9b1d9e5a29157ccffc6808810acb80e0ccd73b100b7c3f8148cabf3ca46e40ceafd8ed46bd479f5b66e49949c7cf0557e7864b07ac5632ac0ad
+    picomatch: "npm:^4.0.4"
+  checksum: 10/4a00b134ae3d388eb1161d37119ae4441e3e0077e548ae2be98e2173cc485bab3fd77fd2c04d0d797ebe4ae084ac910ab273035d98d041eeb595891d97213f6d
   languageName: node
   linkType: hard
 
-"unplugin@npm:3.0.0, unplugin@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "unplugin@npm:3.0.0"
+"unplugin@npm:3.3.0, unplugin@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "unplugin@npm:3.3.0"
   dependencies:
     "@jridgewell/remapping": "npm:^2.3.5"
-    picomatch: "npm:^4.0.3"
+    picomatch: "npm:^4.0.4"
     webpack-virtual-modules: "npm:^0.6.2"
-  checksum: 10/d59f5350b1666e38ac6881ee2da4fd00485ee26995131b3ca0d90d0bdeebdc0c4f8a13d3b3709e2114809ca59708f1faa122de6117079bdd394c7e6e5e211faa
+  peerDependencies:
+    "@farmfe/core": "*"
+    "@rspack/core": "*"
+    bun-types-no-globals: "*"
+    esbuild: "*"
+    rolldown: "*"
+    rollup: "*"
+    unloader: "*"
+    vite: "*"
+    webpack: "*"
+  peerDependenciesMeta:
+    "@farmfe/core":
+      optional: true
+    "@rspack/core":
+      optional: true
+    bun-types-no-globals:
+      optional: true
+    esbuild:
+      optional: true
+    rolldown:
+      optional: true
+    rollup:
+      optional: true
+    unloader:
+      optional: true
+    vite:
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10/162aa991dcc464c124bee401c30e35fb579cccdba0a7a6c0b5f8c615532e08059a256d9d33450373f4b804508a4c01bfc8bd07a2e2143e31ff51b911dbf57952
   languageName: node
   linkType: hard
 
-"unplugin@npm:^2.3.4":
+"unplugin@npm:^2.3.2, unplugin@npm:^2.3.4":
   version: 2.3.11
   resolution: "unplugin@npm:2.3.11"
   dependencies:
@@ -9002,12 +9072,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^14.0.0":
-  version: 14.0.0
-  resolution: "uuid@npm:14.0.0"
+"uuid@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "uuid@npm:14.0.1"
   bin:
     uuid: dist-node/bin/uuid
-  checksum: 10/8ee9b98f9650e25555515f7a28d3c3ae9364e72f7bb19b9e08b681bc135338beba5509b2830f6ae1cfaba4d45401da0d16d4d109b977097bc3d6ba0c5583341b
+  checksum: 10/0f978fd5b0269d7acb615342aeb131f0b8d85eeb8ec34f2915d906baa3befcc14a079a430d0f8116aec6fd20c850cbfab65d1b3d1643fa81ed373c0cf9574f18
   languageName: node
   linkType: hard
 
@@ -9031,29 +9101,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-dts@npm:4.5.4":
-  version: 4.5.4
-  resolution: "vite-plugin-dts@npm:4.5.4"
-  dependencies:
-    "@microsoft/api-extractor": "npm:^7.50.1"
-    "@rollup/pluginutils": "npm:^5.1.4"
-    "@volar/typescript": "npm:^2.4.11"
-    "@vue/language-core": "npm:2.2.0"
-    compare-versions: "npm:^6.1.1"
-    debug: "npm:^4.4.0"
-    kolorist: "npm:^1.8.0"
-    local-pkg: "npm:^1.0.0"
-    magic-string: "npm:^0.30.17"
-  peerDependencies:
-    typescript: "*"
-    vite: "*"
-  peerDependenciesMeta:
-    vite:
-      optional: true
-  checksum: 10/1504a8da02f8015c3138ef57a690179ad9b9d4369a054ae48b52a1c8cbc7ad05474551eab309cd90cf758800e17b67ccd13317aa5f8e28efde957547c7a339fb
-  languageName: node
-  linkType: hard
-
 "vite-plugin-vuetify@npm:^2.1.3":
   version: 2.1.3
   resolution: "vite-plugin-vuetify@npm:2.1.3"
@@ -9069,11 +9116,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:7.3.2":
-  version: 7.3.2
-  resolution: "vite@npm:7.3.2"
+"vite@npm:7.3.6":
+  version: 7.3.6
+  resolution: "vite@npm:7.3.6"
   dependencies:
-    esbuild: "npm:^0.27.0"
+    esbuild: "npm:^0.27.0 || ^0.28.0"
     fdir: "npm:^6.5.0"
     fsevents: "npm:~2.3.3"
     picomatch: "npm:^4.0.3"
@@ -9120,7 +9167,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10/c5f7a9a60011c41c836cedf31c8ee7624102aff9b6a7f3aab2ff47639721bba0916f81994c3a3ea6577a16c4f0dfee1e7dbd244e0da8edd5954e3c6d48daaaa2
+  checksum: 10/6fcbadb1a409990e1bbd4ff0ff41e763c87049228cdc407984bdca40b96ab32de0f1f70fa62fb1f3ca001a5b90accbbe22ddfad5cc436855058357b3f2141d3b
   languageName: node
   linkType: hard
 
@@ -9260,17 +9307,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "vitest@npm:4.1.5"
+"vitest@npm:^4.1.10":
+  version: 4.1.10
+  resolution: "vitest@npm:4.1.10"
   dependencies:
-    "@vitest/expect": "npm:4.1.5"
-    "@vitest/mocker": "npm:4.1.5"
-    "@vitest/pretty-format": "npm:4.1.5"
-    "@vitest/runner": "npm:4.1.5"
-    "@vitest/snapshot": "npm:4.1.5"
-    "@vitest/spy": "npm:4.1.5"
-    "@vitest/utils": "npm:4.1.5"
+    "@vitest/expect": "npm:4.1.10"
+    "@vitest/mocker": "npm:4.1.10"
+    "@vitest/pretty-format": "npm:4.1.10"
+    "@vitest/runner": "npm:4.1.10"
+    "@vitest/snapshot": "npm:4.1.10"
+    "@vitest/spy": "npm:4.1.10"
+    "@vitest/utils": "npm:4.1.10"
     es-module-lexer: "npm:^2.0.0"
     expect-type: "npm:^1.3.0"
     magic-string: "npm:^0.30.21"
@@ -9288,12 +9335,12 @@ __metadata:
     "@edge-runtime/vm": "*"
     "@opentelemetry/api": ^1.9.0
     "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0
-    "@vitest/browser-playwright": 4.1.5
-    "@vitest/browser-preview": 4.1.5
-    "@vitest/browser-webdriverio": 4.1.5
-    "@vitest/coverage-istanbul": 4.1.5
-    "@vitest/coverage-v8": 4.1.5
-    "@vitest/ui": 4.1.5
+    "@vitest/browser-playwright": 4.1.10
+    "@vitest/browser-preview": 4.1.10
+    "@vitest/browser-webdriverio": 4.1.10
+    "@vitest/coverage-istanbul": 4.1.10
+    "@vitest/coverage-v8": 4.1.10
+    "@vitest/ui": 4.1.10
     happy-dom: "*"
     jsdom: "*"
     vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -9323,14 +9370,14 @@ __metadata:
     vite:
       optional: false
   bin:
-    vitest: vitest.mjs
-  checksum: 10/8b768514993d8908fc9b5f2d619943d23b81aaba9443132583bd58aeb441bf76d152961326de9ca328ff0efcddbf8a58f4568a7b66a4391202542ed772613d81
+    vitest: ./vitest.mjs
+  checksum: 10/020843460fe696c23be2a363634dde4daf54625f1c443c24066ba3f87c478b0ccfdd5124343ba30eb092f54902ffea09f4bed0af4a16a9ee805e494ee2dce34e
   languageName: node
   linkType: hard
 
-"volar-service-css@npm:0.0.70":
-  version: 0.0.70
-  resolution: "volar-service-css@npm:0.0.70"
+"volar-service-css@npm:0.0.71":
+  version: 0.0.71
+  resolution: "volar-service-css@npm:0.0.71"
   dependencies:
     vscode-css-languageservice: "npm:^6.3.0"
     vscode-languageserver-textdocument: "npm:^1.0.11"
@@ -9340,13 +9387,13 @@ __metadata:
   peerDependenciesMeta:
     "@volar/language-service":
       optional: true
-  checksum: 10/a20072a6293973eb660460aa152dece255f889098f6c57360d1f4ef2824be15adffcffe3563d1905a1626e50cefdd82d1684854ebc8334b4ec6541e890c72624
+  checksum: 10/5c4479bae0b53896902839b77576076b5f43506238074c619072e409d44b6bfd0b8bbe125cccdd1f9b68f3b48a32cf2aeccaccb846c7ed453d78a6044dba06ac
   languageName: node
   linkType: hard
 
-"volar-service-emmet@npm:0.0.70":
-  version: 0.0.70
-  resolution: "volar-service-emmet@npm:0.0.70"
+"volar-service-emmet@npm:0.0.71":
+  version: 0.0.71
+  resolution: "volar-service-emmet@npm:0.0.71"
   dependencies:
     "@emmetio/css-parser": "npm:^0.4.1"
     "@emmetio/html-matcher": "npm:^1.3.0"
@@ -9357,13 +9404,13 @@ __metadata:
   peerDependenciesMeta:
     "@volar/language-service":
       optional: true
-  checksum: 10/9e64274ee6f9fddf786cee1123afa0c351e0298b69d974d11e429b6ec95c255db84208f5e836197969ff174b1f26e59a691383db620b74cd82ecb911ede6f49d
+  checksum: 10/60f55a83e1e2fbaa5ad90f544071a91eb5791f922e7f92ef4b1f91effb9a5ada323c7b62b7bba9a7f7468ac5911b727664b874e5d18cdc9d86f1230f4eea94bf
   languageName: node
   linkType: hard
 
-"volar-service-html@npm:0.0.70":
-  version: 0.0.70
-  resolution: "volar-service-html@npm:0.0.70"
+"volar-service-html@npm:0.0.71":
+  version: 0.0.71
+  resolution: "volar-service-html@npm:0.0.71"
   dependencies:
     vscode-html-languageservice: "npm:^5.3.0"
     vscode-languageserver-textdocument: "npm:^1.0.11"
@@ -9373,13 +9420,13 @@ __metadata:
   peerDependenciesMeta:
     "@volar/language-service":
       optional: true
-  checksum: 10/ea24aee25eca32eb6e6a825e9b499c9bc2fe5442e897aa29795bf83b78220f2febd44b86a2b09dce5701fa0fd863d4b0d2bf770f6d2c9dc4b376ec682a8c3dd2
+  checksum: 10/211891fe080a897b45fc43957127b8d53ae6ecaccbb13e75ab479e7c2e055aa3c4fddfffe2a6273e7e1b7730101d3b41e88b45f255c0772ae7ed956e5ffda282
   languageName: node
   linkType: hard
 
-"volar-service-json@npm:0.0.70":
-  version: 0.0.70
-  resolution: "volar-service-json@npm:0.0.70"
+"volar-service-json@npm:0.0.71":
+  version: 0.0.71
+  resolution: "volar-service-json@npm:0.0.71"
   dependencies:
     vscode-json-languageservice: "npm:^5.4.0"
     vscode-uri: "npm:^3.0.8"
@@ -9388,13 +9435,13 @@ __metadata:
   peerDependenciesMeta:
     "@volar/language-service":
       optional: true
-  checksum: 10/0bea724da7581fff272f85ef784a0a68f51a66b5725d0c131ec0c0dab8f841deb20b4716598002904b448f3add0b2a1f1ec9006c61af675318e33fff672cdb4d
+  checksum: 10/10e35eadb7f6a3fb0f81f50c8c700e5a4f9d2be90de9fe61fb73e7789b9cf5cf322b56736979c319ba66abf39bbc77bd9285ed5333d086490ed07cd6f580575f
   languageName: node
   linkType: hard
 
-"volar-service-pug-beautify@npm:0.0.70":
-  version: 0.0.70
-  resolution: "volar-service-pug-beautify@npm:0.0.70"
+"volar-service-pug-beautify@npm:0.0.71":
+  version: 0.0.71
+  resolution: "volar-service-pug-beautify@npm:0.0.71"
   dependencies:
     "@johnsoncodehk/pug-beautify": "npm:^0.2.2"
   peerDependencies:
@@ -9402,26 +9449,26 @@ __metadata:
   peerDependenciesMeta:
     "@volar/language-service":
       optional: true
-  checksum: 10/01d9d2a7b2f9d0e6690d3feaa2555fb4df20e74f7d78c666a0beb61957a9c533722c3086832ad974d5110c9b7f99ed74a1ecec655b52e6235c3e1620b69598ab
+  checksum: 10/b616597ef575a73bbb4c4bb1247a7961ca05291c1dce55258f28f43c5b57257e07ad6a775e7c18e4b5d1d8bc7f99de9690d22f40139016be5e6433cabcb5aa30
   languageName: node
   linkType: hard
 
-"volar-service-pug@npm:0.0.70":
-  version: 0.0.70
-  resolution: "volar-service-pug@npm:0.0.70"
+"volar-service-pug@npm:0.0.71":
+  version: 0.0.71
+  resolution: "volar-service-pug@npm:0.0.71"
   dependencies:
     "@volar/language-service": "npm:~2.4.0"
     "@vue/language-plugin-pug": "npm:~3.2.2"
-    volar-service-html: "npm:0.0.70"
+    volar-service-html: "npm:0.0.71"
     vscode-html-languageservice: "npm:^5.3.0"
     vscode-languageserver-textdocument: "npm:^1.0.11"
-  checksum: 10/edcc12d9fe29d99d2f65957ba704164b5a91d140eddca0b4a61a852bccc215b7a0049df20777a54d14bd19c0ee29687507d17da5f0788b990067489efa3c0b44
+  checksum: 10/7274c4f000cd05372d22839ebb68769951a404f096a84b99b197863c4f71053f1c542638f8bc705a935903cb8574c4bcd850923245f05b31cf4e741a34e379d9
   languageName: node
   linkType: hard
 
-"volar-service-typescript@npm:0.0.70":
-  version: 0.0.70
-  resolution: "volar-service-typescript@npm:0.0.70"
+"volar-service-typescript@npm:0.0.71":
+  version: 0.0.71
+  resolution: "volar-service-typescript@npm:0.0.71"
   dependencies:
     path-browserify: "npm:^1.0.1"
     semver: "npm:^7.6.2"
@@ -9434,7 +9481,7 @@ __metadata:
   peerDependenciesMeta:
     "@volar/language-service":
       optional: true
-  checksum: 10/c3783923179976e950928929a1d0de810f91068e161686871f33679f39740a1c9f641c695cb63a490d32cef974ffabbe07f4978a35f227e2178245a0f3033bb9
+  checksum: 10/2217dfd1ffffb2a4e5120ddd7da8df8e1f948b3894dd2eb687fe01beff51f80a15fbee472381a1a9ed3b370dcb65e7c5b2334edbe33d33f61c940e4adaf37325
   languageName: node
   linkType: hard
 
@@ -9531,19 +9578,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-component-meta@npm:3.2.7":
-  version: 3.2.7
-  resolution: "vue-component-meta@npm:3.2.7"
+"vue-component-meta@npm:3.3.9":
+  version: 3.3.9
+  resolution: "vue-component-meta@npm:3.3.9"
   dependencies:
     "@volar/typescript": "npm:2.4.28"
-    "@vue/language-core": "npm:3.2.7"
+    "@vue/language-core": "npm:3.3.9"
     path-browserify: "npm:^1.0.1"
   peerDependencies:
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/a07ab9db66c7140005e2648418f8eb122de3a12f8a0d1dfaec3e71920a3a10e5054f60ac3efec34261250c8d8b433328e6ff5df911a19a033f8e7aae6b3919a0
+  checksum: 10/f652c0748e3e35a3f5ea3c0f77be3e2102032e1df058e84bbdf56b2cefd9a88459bed231ad140ee43aa539c41c61daf5cf0a9a2bb03cf2916c6523dc259265c9
   languageName: node
   linkType: hard
 
@@ -9570,9 +9617,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-eslint-parser@npm:^10.4.0":
-  version: 10.4.0
-  resolution: "vue-eslint-parser@npm:10.4.0"
+"vue-eslint-parser@npm:^10.4.0, vue-eslint-parser@npm:^10.4.1":
+  version: 10.4.1
+  resolution: "vue-eslint-parser@npm:10.4.1"
   dependencies:
     debug: "npm:^4.4.0"
     eslint-scope: "npm:^8.2.0 || ^9.0.0"
@@ -9582,21 +9629,21 @@ __metadata:
     semver: "npm:^7.6.3"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-  checksum: 10/b0d257ffc6afdc6fa47acd8633d3aa4959d1417fe182cd66c7fed02e0425dc9e38f6c4ee2182dbc098be14178801c3c731bd424eaad202b975ddf0756819259f
+  checksum: 10/cb06909a6816a7e3304687899153a2831a0041a2a4329646fd72ab9af6c81c2fdd198d2db54369c163373bca6e20ebcae864c5432631a6dc3d828484af90b8d7
   languageName: node
   linkType: hard
 
-"vue-i18n@npm:11.4.0":
-  version: 11.4.0
-  resolution: "vue-i18n@npm:11.4.0"
+"vue-i18n@npm:11.4.8":
+  version: 11.4.8
+  resolution: "vue-i18n@npm:11.4.8"
   dependencies:
-    "@intlify/core-base": "npm:11.4.0"
-    "@intlify/devtools-types": "npm:11.4.0"
-    "@intlify/shared": "npm:11.4.0"
+    "@intlify/core-base": "npm:11.4.8"
+    "@intlify/devtools-types": "npm:11.4.8"
+    "@intlify/shared": "npm:11.4.8"
     "@vue/devtools-api": "npm:^6.5.0"
   peerDependencies:
     vue: ^3.0.0
-  checksum: 10/b99ed7c8d1e2b652dd32072af9fa05b94a73dd4c4d78041f5f063a78a63bcd24bfb39366e5f0fba1745adc7bd7ed526db0deff149886eb81019a09e250f1dfad
+  checksum: 10/563131afaeab5ddbb45817dc35b9cd43dbb3ae0a54b7b3070ff3b6ddbcdd8fe5213d12a5ee59f70fefe7bf411197c7301cec3b03e062fcd14bd8a26a8d8cce37
   languageName: node
   linkType: hard
 
@@ -9622,32 +9669,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-router@npm:5.0.6":
-  version: 5.0.6
-  resolution: "vue-router@npm:5.0.6"
+"vue-router@npm:5.2.0":
+  version: 5.2.0
+  resolution: "vue-router@npm:5.2.0"
   dependencies:
-    "@babel/generator": "npm:^7.28.6"
-    "@vue-macros/common": "npm:^3.1.1"
-    "@vue/devtools-api": "npm:^8.0.6"
-    ast-walker-scope: "npm:^0.8.3"
+    "@babel/generator": "npm:^8.0.0"
+    "@vue-macros/common": "npm:^3.1.3"
+    "@vue/devtools-api": "npm:^8.1.5"
+    ast-walker-scope: "npm:^0.9.0"
     chokidar: "npm:^5.0.0"
     json5: "npm:^2.2.3"
-    local-pkg: "npm:^1.1.2"
+    local-pkg: "npm:^1.2.1"
     magic-string: "npm:^0.30.21"
-    mlly: "npm:^1.8.0"
+    mlly: "npm:^1.8.2"
     muggle-string: "npm:^0.4.1"
+    nostics: "npm:^1.1.4"
     pathe: "npm:^2.0.3"
-    picomatch: "npm:^4.0.3"
+    picomatch: "npm:^4.0.5"
     scule: "npm:^1.3.0"
-    tinyglobby: "npm:^0.2.15"
-    unplugin: "npm:^3.0.0"
-    unplugin-utils: "npm:^0.3.1"
-    yaml: "npm:^2.8.2"
+    tinyglobby: "npm:^0.2.17"
+    unplugin: "npm:^3.3.0"
+    unplugin-utils: "npm:^0.3.2"
+    yaml: "npm:^2.9.0"
   peerDependencies:
     "@pinia/colada": ">=0.21.2"
-    "@vue/compiler-sfc": ^3.5.17
-    pinia: ^3.0.4
-    vue: ^3.5.0
+    "@vue/compiler-sfc": ^3.5.34 || ^4.0.0
+    pinia: ^3.0.4 || ^4.0.2
+    vite: ^7.3.0 || ^8.0.0
+    vue: ^3.5.34 || ^4.0.0
   peerDependenciesMeta:
     "@pinia/colada":
       optional: true
@@ -9655,49 +9704,51 @@ __metadata:
       optional: true
     pinia:
       optional: true
-  checksum: 10/d19dc3687e4a7df2a02427faef6a5753f6b650c1746a22e303e7979cb370bb6e963048f5b15b915a27a2f3e3dd64ecb662e21a52e3c1efb34972a5e6e453495b
+    vite:
+      optional: true
+  checksum: 10/bda9ed74d19c887671f9a6f47d612e97df92a26746a4c749b36d5331d20e44e53f1bfcd76d90750ee027438cd38b6bfbca994339e8a43a8f9870ef7a7cd37f18
   languageName: node
   linkType: hard
 
-"vue-tsc@npm:3.2.7":
-  version: 3.2.7
-  resolution: "vue-tsc@npm:3.2.7"
+"vue-tsc@npm:3.3.9":
+  version: 3.3.9
+  resolution: "vue-tsc@npm:3.3.9"
   dependencies:
     "@volar/typescript": "npm:2.4.28"
-    "@vue/language-core": "npm:3.2.7"
+    "@vue/language-core": "npm:3.3.9"
   peerDependencies:
     typescript: ">=5.0.0"
   bin:
     vue-tsc: bin/vue-tsc.js
-  checksum: 10/c682a856f65b6dfd9d4be92e9e6a8ad69318bc0f155910bc2eaadb05bfe5c73deac8f64245b4a2b44870b58e8101a0d7c4f280f019cee7ec35f1b0508a15ed66
+  checksum: 10/295d5dbaacdebe9088d8d5119a0226d81dcdd77c8d69d1bf05504c9ca095d8b66376d0bdbf4cebf55d0de753062adcbfa855d5138275a643a2ff335b40659e67
   languageName: node
   linkType: hard
 
-"vue@npm:3.5.33, vue@npm:^3.5.13, vue@npm:^3.5.21, vue@npm:^3.5.29":
-  version: 3.5.33
-  resolution: "vue@npm:3.5.33"
+"vue@npm:3.5.41, vue@npm:^3.5.13, vue@npm:^3.5.41, vue@npm:~3.5.34":
+  version: 3.5.41
+  resolution: "vue@npm:3.5.41"
   dependencies:
-    "@vue/compiler-dom": "npm:3.5.33"
-    "@vue/compiler-sfc": "npm:3.5.33"
-    "@vue/runtime-dom": "npm:3.5.33"
-    "@vue/server-renderer": "npm:3.5.33"
-    "@vue/shared": "npm:3.5.33"
+    "@vue/compiler-dom": "npm:3.5.41"
+    "@vue/compiler-sfc": "npm:3.5.41"
+    "@vue/runtime-dom": "npm:3.5.41"
+    "@vue/server-renderer": "npm:3.5.41"
+    "@vue/shared": "npm:3.5.41"
   peerDependencies:
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/71224766c803c6b515402b8a32f53a21e96e170d4eb37b5c28b58e494152908ef7b9a5915c56a6c0d2f9c9420678028412e6f82b71c21a678f9f5491c2fdfbb7
+  checksum: 10/37daaba61bb0dc20470411a22beb0c06bd29025d8c2696e9be15cdda637d5e3a175c5c011b277de6540d99b442fe08bfcb494b552afcb1825a45b8b9a5f0b3e0
   languageName: node
   linkType: hard
 
-"vuetify@npm:4.0.6":
-  version: 4.0.6
-  resolution: "vuetify@npm:4.0.6"
+"vuetify@npm:4.1.8":
+  version: 4.1.8
+  resolution: "vuetify@npm:4.1.8"
   peerDependencies:
     typescript: ">=4.7"
     vite-plugin-vuetify: ">=2.1.0"
-    vue: ^3.5.0
+    vue: ^3.5.0 || ^3.6.0-0
     webpack-plugin-vuetify: ">=3.1.0"
   peerDependenciesMeta:
     typescript:
@@ -9706,7 +9757,7 @@ __metadata:
       optional: true
     webpack-plugin-vuetify:
       optional: true
-  checksum: 10/09da1d5a30ef7e65734740feb84cb315d1392c37c1dae090dffbe5822b7f03ad41b8ac7ff9bd1d9c6df67dbc82bbe8935c36cc0c34e5ccd57bc06daf79a07975
+  checksum: 10/09cbfbaa6dc4f8b65696bae14a7e5b175f7d9a5f08df7e1d51b9320e174b9d7695b74bff654a1515ecb0cd8f113f023a28232caceab6197e0d24c96d1a6ea826
   languageName: node
   linkType: hard
 
@@ -9746,25 +9797,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "which@npm:5.0.0"
+"which@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "which@npm:6.0.1"
   dependencies:
-    isexe: "npm:^3.1.1"
+    isexe: "npm:^4.0.0"
   bin:
     node-which: bin/which.js
-  checksum: 10/6ec99e89ba32c7e748b8a3144e64bfc74aa63e2b2eacbb61a0060ad0b961eb1a632b08fb1de067ed59b002cec3e21de18299216ebf2325ef0f78e0f121e14e90
+  checksum: 10/dbea77c7d3058bf6c78bf9659d2dce4d2b57d39a15b826b2af6ac2e5a219b99dc8a831b79fdbc453c0598adb4f3f84cf9c2491fd52beb9f5d2dececcad117f68
   languageName: node
   linkType: hard
 
-"which@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "which@npm:6.0.1"
+"which@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "which@npm:7.0.0"
   dependencies:
     isexe: "npm:^4.0.0"
   bin:
     node-which: bin/which.js
-  checksum: 10/dbea77c7d3058bf6c78bf9659d2dce4d2b57d39a15b826b2af6ac2e5a219b99dc8a831b79fdbc453c0598adb4f3f84cf9c2491fd52beb9f5d2dececcad117f68
+  checksum: 10/913a43ac10df37602ba9795a004dd7ab12ba7dd592aca1f08ec333be1fdd6a49bbf119a88c3f8d0ea70eeb6251726e77069251424d73000299a0a840ed000732
   languageName: node
   linkType: hard
 
@@ -9848,10 +9899,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xml-name-validator@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "xml-name-validator@npm:4.0.0"
-  checksum: 10/f9582a3f281f790344a471c207516e29e293c6041b2c20d84dd6e58832cd7c19796c47e108fd4fd4b164a5e72ad94f2268f8ace8231cde4a2c6428d6aa220f92
+"xml-name-validator@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "xml-name-validator@npm:5.0.0"
+  checksum: 10/43f30f3f6786e406dd665acf08cd742d5f8a46486bd72517edb04b27d1bcd1599664c2a4a99fc3f1e56a3194bff588b12f178b7972bc45c8047bdc4c3ac8d4a1
   languageName: node
   linkType: hard
 
@@ -9886,12 +9937,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.0.0, yaml@npm:^2.8.2":
-  version: 2.8.3
-  resolution: "yaml@npm:2.8.3"
+"yaml@npm:^2.0.0, yaml@npm:^2.9.0":
+  version: 2.9.0
+  resolution: "yaml@npm:2.9.0"
   bin:
     yaml: bin.mjs
-  checksum: 10/ecad41d39d34fae5cc17ea2d4b7f7f55faacd45cbce8983ba22d48d1ed1a92ed242ea49ea813a79ac39a69f75f9c5a03e7b5395fd954d55476f25e21a47c141d
+  checksum: 10/9a95e8e08651c3d292ab6a5befeb5f57b76801caa097c75bb45c9a70ce19c1b11f57e87a6ef84a579ea070ed2c2c8ac541c88c0ae684d544d5f42c7e77d11b7b
   languageName: node
   linkType: hard