From 88929a219e8603fd2464b799ccb9d72863935abd Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Tue, 12 May 2026 11:51:44 +0200
Subject: [PATCH] feat: re-apply openbuilt-page-editor onto the Tier-4 shell
 (closes #4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Grafts the never-merged #4 (feature/spec-openbuilt-page-editor) content
onto the current Tier-4 manifest shell, without the competing
ApplicationEditor.vue replacement / store refactor that originally
blocked it.

New:
- src/views/PageDesigner.vue — three-pane visual manifest page designer
  (page list + menu tree / per-page-type sub-editor / validator panel).
- src/components/page-editor/** — page-type sub-editors (index, detail,
  dashboard, form, logs, settings, chat, files, custom, stub),
  PageListEditor, MenuTreeEditor, and the fields/* builders.
- src/composables/{useLivePreview,useManifestValidator,useRegisterPicker}.js
- src/store/modules/applicationEditor.js — editor-local manifest state
  slice (Pinia; CRUD delegated to the shared object store).

Wiring:
- customComponents.js registers PageDesignerView.
- manifest.json adds the /builder/:slug/pages page (after SchemaDesigner,
  before the BuilderHost wildcard). No top-level menu entry — it is a
  per-virtual-app sub-page like the schema designer.
- ApplicationEditor.vue's Editor/History/Diff tabs are untouched.

Tooling:
- vuedraggable added to dependencies (used by PageListEditor/MenuTreeEditor).
- eslint.config.js: no-unused-vars varsIgnorePattern now also allows
  leading-underscore discarded-destructure vars.
- vitest.config.js: vuedraggable added to inline deps + aliased to a stub;
  conduction-nextcloud-vue stub gains a useAppManifest export.
- tests/vitest/stubs/{nextcloud-auth,nextcloud-router,vuedraggable}.js added.

Tests: PageDesigner.spec.js, page-editor component specs, composable specs,
the page-designer e2e spec, and the page-editor Postman collection.

Quality gates: eslint, stylelint, webpack build, and vitest (173 tests)
all green. PHPCS/PHPMD/Psalm/PHPStan and PHPUnit/Newman pre-existing
debt on development is untouched (this changeset is frontend-only).
---
 eslint.config.js                              |   6 +-
 package-lock.json                             |  18 +-
 package.json                                  |   3 +-
 src/components/page-editor/ChatPageEditor.vue |  27 ++
 .../page-editor/CustomPageEditor.vue          |  27 ++
 .../page-editor/DashboardPageEditor.vue       |  78 ++++
 .../page-editor/DetailPageEditor.vue          | 302 ++++++++++++++
 .../page-editor/FilesPageEditor.vue           |  27 ++
 src/components/page-editor/FormPageEditor.vue | 225 +++++++++++
 .../page-editor/IndexPageEditor.vue           | 241 +++++++++++
 src/components/page-editor/LogsPageEditor.vue |  27 ++
 src/components/page-editor/MenuTreeEditor.vue | 379 ++++++++++++++++++
 src/components/page-editor/PageListEditor.vue | 312 ++++++++++++++
 .../page-editor/SettingsPageEditor.vue        |  27 ++
 src/components/page-editor/StubPageEditor.vue | 111 +++++
 .../page-editor/fields/ActionBuilder.vue      | 138 +++++++
 .../page-editor/fields/ColumnBuilder.vue      | 173 ++++++++
 .../page-editor/fields/FormFieldBuilder.vue   | 148 +++++++
 .../page-editor/fields/LayoutItemBuilder.vue  | 153 +++++++
 .../fields/SidebarSectionBuilder.vue          | 117 ++++++
 .../page-editor/fields/SidebarTabBuilder.vue  | 136 +++++++
 .../page-editor/fields/WidgetBuilder.vue      | 115 ++++++
 src/composables/useLivePreview.js             |  69 ++++
 src/composables/useManifestValidator.js       | 101 +++++
 src/composables/useRegisterPicker.js          | 145 +++++++
 src/customComponents.js                       |   5 +
 src/manifest.json                             |   1 +
 src/store/modules/applicationEditor.js        | 257 ++++++++++++
 src/views/PageDesigner.vue                    | 322 +++++++++++++++
 .../page-editor/FormPageEditor.spec.js        | 150 +++++++
 .../page-editor/IndexPageEditor.spec.js       | 185 +++++++++
 .../page-editor/MenuTreeEditor.spec.js        | 156 +++++++
 .../page-editor/PageListEditor.spec.js        | 180 +++++++++
 tests/composables/useLivePreview.spec.js      | 110 +++++
 .../composables/useManifestValidator.spec.js  | 162 ++++++++
 tests/e2e/page-designer.spec.ts               | 131 ++++++
 ...nbuilt-page-editor.postman_collection.json | 233 +++++++++++
 tests/views/PageDesigner.spec.js              | 298 ++++++++++++++
 .../vitest/stubs/conduction-nextcloud-vue.js  |  14 +
 tests/vitest/stubs/nextcloud-auth.js          |  13 +
 tests/vitest/stubs/nextcloud-router.js        |  18 +
 tests/vitest/stubs/vuedraggable.js            |  24 ++
 vitest.config.js                              |   9 +
 43 files changed, 5369 insertions(+), 4 deletions(-)
 create mode 100644 src/components/page-editor/ChatPageEditor.vue
 create mode 100644 src/components/page-editor/CustomPageEditor.vue
 create mode 100644 src/components/page-editor/DashboardPageEditor.vue
 create mode 100644 src/components/page-editor/DetailPageEditor.vue
 create mode 100644 src/components/page-editor/FilesPageEditor.vue
 create mode 100644 src/components/page-editor/FormPageEditor.vue
 create mode 100644 src/components/page-editor/IndexPageEditor.vue
 create mode 100644 src/components/page-editor/LogsPageEditor.vue
 create mode 100644 src/components/page-editor/MenuTreeEditor.vue
 create mode 100644 src/components/page-editor/PageListEditor.vue
 create mode 100644 src/components/page-editor/SettingsPageEditor.vue
 create mode 100644 src/components/page-editor/StubPageEditor.vue
 create mode 100644 src/components/page-editor/fields/ActionBuilder.vue
 create mode 100644 src/components/page-editor/fields/ColumnBuilder.vue
 create mode 100644 src/components/page-editor/fields/FormFieldBuilder.vue
 create mode 100644 src/components/page-editor/fields/LayoutItemBuilder.vue
 create mode 100644 src/components/page-editor/fields/SidebarSectionBuilder.vue
 create mode 100644 src/components/page-editor/fields/SidebarTabBuilder.vue
 create mode 100644 src/components/page-editor/fields/WidgetBuilder.vue
 create mode 100644 src/composables/useLivePreview.js
 create mode 100644 src/composables/useManifestValidator.js
 create mode 100644 src/composables/useRegisterPicker.js
 create mode 100644 src/store/modules/applicationEditor.js
 create mode 100644 src/views/PageDesigner.vue
 create mode 100644 tests/components/page-editor/FormPageEditor.spec.js
 create mode 100644 tests/components/page-editor/IndexPageEditor.spec.js
 create mode 100644 tests/components/page-editor/MenuTreeEditor.spec.js
 create mode 100644 tests/components/page-editor/PageListEditor.spec.js
 create mode 100644 tests/composables/useLivePreview.spec.js
 create mode 100644 tests/composables/useManifestValidator.spec.js
 create mode 100644 tests/e2e/page-designer.spec.ts
 create mode 100644 tests/integration/openbuilt-page-editor.postman_collection.json
 create mode 100644 tests/views/PageDesigner.spec.js
 create mode 100644 tests/vitest/stubs/nextcloud-auth.js
 create mode 100644 tests/vitest/stubs/nextcloud-router.js
 create mode 100644 tests/vitest/stubs/vuedraggable.js

diff --git a/eslint.config.js b/eslint.config.js
index b306f39f..ce891de1 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -31,8 +31,10 @@ module.exports = defineConfig([{
 	},
 
 	rules: {
-		// Allow unused i18n functions (t, n) — imported for future translation wiring
-		'no-unused-vars': ['error', { varsIgnorePattern: '^(t|n)$', argsIgnorePattern: '^_' }],
+		// Allow unused i18n functions (t, n) — imported for future translation wiring.
+		// Also allow leading-underscore vars (idiomatic "discarded destructure" —
+		// `const { foo: _foo, ...rest } = x` to strip a key while keeping the rest).
+		'no-unused-vars': ['error', { varsIgnorePattern: '^(t|n|_)', argsIgnorePattern: '^_' }],
 		'jsdoc/require-jsdoc': 'off',
 		'vue/first-attribute-linebreak': 'off',
 		'@typescript-eslint/no-explicit-any': 'off',
diff --git a/package-lock.json b/package-lock.json
index 97b53ff3..c5453ebd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,8 @@
         "pinia": "^2.1.7",
         "vue": "^2.7.14",
         "vue-material-design-icons": "^5.3.0",
-        "vue-router": "^3.6.5"
+        "vue-router": "^3.6.5",
+        "vuedraggable": "^2.24.3"
       },
       "devDependencies": {
         "@cyclonedx/cyclonedx-npm": "^4.2.1",
@@ -19048,6 +19049,12 @@
         "node": ">= 14"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==",
+      "license": "MIT"
+    },
     "node_modules/source-map": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
@@ -22926,6 +22933,15 @@
         "vue": "^2.5.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index 5c0aef37..f7776e38 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
     "pinia": "^2.1.7",
     "vue": "^2.7.14",
     "vue-material-design-icons": "^5.3.0",
-    "vue-router": "^3.6.5"
+    "vue-router": "^3.6.5",
+    "vuedraggable": "^2.24.3"
   },
   "overrides": {
     "libxmljs2": "^0.37.0"
diff --git a/src/components/page-editor/ChatPageEditor.vue b/src/components/page-editor/ChatPageEditor.vue
new file mode 100644
index 00000000..64919bcb
--- /dev/null
+++ b/src/components/page-editor/ChatPageEditor.vue
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - ChatPageEditor — v1.1 stub. Task 4.6 deferred.
+  -->
+<template>
+	<StubPageEditor
+		:title="t('openbuilt', 'Chat page')"
+		:message="t('openbuilt', 'Structured chat editor (conversationSource OR postUrl one-of plus optional schema) coming in v1.1. For now, edit the raw JSON below or use the Raw JSON tab.')"
+		:config="config"
+		@update:config="$emit('update:config', $event)" />
+</template>
+
+<script>
+import StubPageEditor from './StubPageEditor.vue'
+
+export default {
+	name: 'ChatPageEditor',
+	components: { StubPageEditor },
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:config'],
+}
+</script>
diff --git a/src/components/page-editor/CustomPageEditor.vue b/src/components/page-editor/CustomPageEditor.vue
new file mode 100644
index 00000000..bddce65a
--- /dev/null
+++ b/src/components/page-editor/CustomPageEditor.vue
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - CustomPageEditor — v1.1 stub. Task 4.9 deferred.
+  -->
+<template>
+	<StubPageEditor
+		:title="t('openbuilt', 'Custom page')"
+		:message="t('openbuilt', 'Structured custom-page editor (customComponents registry picker + free-form config) coming in v1.1. For now, edit the raw JSON below or use the Raw JSON tab.')"
+		:config="config"
+		@update:config="$emit('update:config', $event)" />
+</template>
+
+<script>
+import StubPageEditor from './StubPageEditor.vue'
+
+export default {
+	name: 'CustomPageEditor',
+	components: { StubPageEditor },
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:config'],
+}
+</script>
diff --git a/src/components/page-editor/DashboardPageEditor.vue b/src/components/page-editor/DashboardPageEditor.vue
new file mode 100644
index 00000000..7ee6f86b
--- /dev/null
+++ b/src/components/page-editor/DashboardPageEditor.vue
@@ -0,0 +1,78 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - DashboardPageEditor — widgets list + layout grid editor. Reuses
+  - WidgetBuilder.vue + LayoutItemBuilder.vue.
+  -->
+<template>
+	<div class="dashboard-page-editor">
+		<h3 class="dashboard-page-editor__title">
+			{{ t('openbuilt', 'Dashboard page') }}
+		</h3>
+
+		<fieldset class="dashboard-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'Widgets') }}</legend>
+			<WidgetBuilder
+				:model-value="config.widgets || []"
+				@update:modelValue="update('widgets', $event)" />
+		</fieldset>
+
+		<fieldset class="dashboard-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'Layout') }}</legend>
+			<LayoutItemBuilder
+				:model-value="config.layout || []"
+				@update:modelValue="update('layout', $event)" />
+		</fieldset>
+	</div>
+</template>
+
+<script>
+import WidgetBuilder from './fields/WidgetBuilder.vue'
+import LayoutItemBuilder from './fields/LayoutItemBuilder.vue'
+
+export default {
+	name: 'DashboardPageEditor',
+	components: { WidgetBuilder, LayoutItemBuilder },
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:config'],
+	methods: {
+		update(key, value) {
+			const next = { ...this.config }
+			if (!value || (Array.isArray(value) && value.length === 0)) {
+				delete next[key]
+			} else {
+				next[key] = value
+			}
+			this.$emit('update:config', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.dashboard-page-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 12px;
+}
+.dashboard-page-editor__title {
+	margin: 0;
+	font-size: 16px;
+	font-weight: 600;
+}
+.dashboard-page-editor__fieldset {
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	padding: 8px;
+}
+.dashboard-page-editor__fieldset legend {
+	padding: 0 6px;
+	font-weight: 600;
+	font-size: 13px;
+}
+</style>
diff --git a/src/components/page-editor/DetailPageEditor.vue b/src/components/page-editor/DetailPageEditor.vue
new file mode 100644
index 00000000..bceb2dae
--- /dev/null
+++ b/src/components/page-editor/DetailPageEditor.vue
@@ -0,0 +1,302 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - DetailPageEditor — register + schema picker, route-param derivation
+  - from parent page route, sidebar config (boolean OR object shape both
+  - supported), `sidebarProps.tabs` list. Implements REQ-OBPD-005.
+  -->
+<template>
+	<div class="detail-page-editor">
+		<h3 class="detail-page-editor__title">
+			{{ t('openbuilt', 'Detail page') }}
+		</h3>
+		<div class="detail-page-editor__group">
+			<label>
+				{{ t('openbuilt', 'Register') }}
+				<select :value="config.register || ''" @change="update('register', $event.target.value)">
+					<option value="">
+						{{ t('openbuilt', '— select register —') }}
+					</option>
+					<option v-for="r in registers" :key="r.slug || r.id" :value="r.slug">
+						{{ r.title || r.slug }}
+					</option>
+				</select>
+			</label>
+			<label>
+				{{ t('openbuilt', 'Schema') }}
+				<select :value="config.schema || ''" :disabled="!config.register" @change="update('schema', $event.target.value)">
+					<option value="">
+						{{ t('openbuilt', '— select schema —') }}
+					</option>
+					<option v-for="s in schemas" :key="s.slug || s.id" :value="s.slug">
+						{{ s.title || s.slug }}
+					</option>
+				</select>
+			</label>
+		</div>
+
+		<p v-if="!routeHasParam" class="detail-page-editor__warn" role="alert">
+			{{ t('openbuilt', 'The parent page route has no :param segment — detail pages typically need one (e.g. /messages/:id).') }}
+		</p>
+		<p v-else class="detail-page-editor__note">
+			{{ t('openbuilt', 'Route params detected:') }} {{ routeParams.join(', ') }}
+		</p>
+
+		<fieldset class="detail-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'Sidebar') }}</legend>
+			<div class="detail-page-editor__sidebar-shape">
+				<label class="detail-page-editor__inline">
+					<input
+						type="radio"
+						:checked="sidebarShape === 'object'"
+						value="object"
+						@change="setSidebarShape('object')">
+					{{ t('openbuilt', 'Object form (preferred)') }}
+				</label>
+				<label class="detail-page-editor__inline">
+					<input
+						type="radio"
+						:checked="sidebarShape === 'boolean'"
+						value="boolean"
+						@change="setSidebarShape('boolean')">
+					{{ t('openbuilt', 'Boolean form (legacy)') }}
+				</label>
+				<label class="detail-page-editor__inline">
+					<input
+						type="radio"
+						:checked="sidebarShape === 'none'"
+						value="none"
+						@change="setSidebarShape('none')">
+					{{ t('openbuilt', 'Not set') }}
+				</label>
+			</div>
+			<label v-if="sidebarShape === 'boolean'" class="detail-page-editor__inline">
+				<input
+					type="checkbox"
+					:checked="config.sidebar === true"
+					@change="update('sidebar', $event.target.checked)">
+				{{ t('openbuilt', 'Sidebar enabled') }}
+			</label>
+			<div v-else-if="sidebarShape === 'object'" class="detail-page-editor__sidebar-object">
+				<label class="detail-page-editor__inline">
+					<input
+						type="checkbox"
+						:checked="(config.sidebar || {}).enabled !== false"
+						@change="updateSidebarKey('enabled', $event.target.checked)">
+					{{ t('openbuilt', 'Enabled') }}
+				</label>
+				<label class="detail-page-editor__inline">
+					<input
+						type="checkbox"
+						:checked="(config.sidebar || {}).show !== false"
+						@change="updateSidebarKey('show', $event.target.checked)">
+					{{ t('openbuilt', 'Show') }}
+				</label>
+				<SidebarTabBuilder
+					:model-value="(config.sidebar && config.sidebar.tabs) || []"
+					@update:modelValue="updateSidebarKey('tabs', $event)" />
+			</div>
+		</fieldset>
+
+		<fieldset class="detail-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'sidebarProps.tabs (alternate path)') }}</legend>
+			<SidebarTabBuilder
+				:model-value="(config.sidebarProps && config.sidebarProps.tabs) || []"
+				@update:modelValue="updateSidebarPropsTabs($event)" />
+		</fieldset>
+	</div>
+</template>
+
+<script>
+import SidebarTabBuilder from './fields/SidebarTabBuilder.vue'
+import { useRegisterPicker } from '../../composables/useRegisterPicker.js'
+
+export default {
+	name: 'DetailPageEditor',
+	components: { SidebarTabBuilder },
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+		parentRoute: {
+			type: String,
+			default: '',
+		},
+		// Current Application slug. Drives the hybrid register model so the
+		// register picker hoists `openbuilt-{slug}` to the top of the list.
+		appSlug: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: ['update:config'],
+	setup(props) {
+		const picker = useRegisterPicker({ appSlug: props.appSlug })
+		return { picker }
+	},
+	data() {
+		return {
+			registers: [],
+			schemas: [],
+		}
+	},
+	computed: {
+		routeParams() {
+			const matches = this.parentRoute.match(/:([A-Za-z_][A-Za-z0-9_]*)/g) || []
+			return matches.map((m) => m.slice(1))
+		},
+		routeHasParam() {
+			return this.routeParams.length > 0
+		},
+		sidebarShape() {
+			const s = this.config.sidebar
+			if (s === undefined) {
+				return 'none'
+			}
+			if (typeof s === 'boolean') {
+				return 'boolean'
+			}
+			return 'object'
+		},
+	},
+	watch: {
+		'config.register': {
+			immediate: true,
+			handler(val) {
+				if (val) {
+					this.fetchSchemas(val)
+				} else {
+					this.schemas = []
+				}
+			},
+		},
+	},
+	async mounted() {
+		await this.fetchRegisters()
+	},
+	methods: {
+		update(key, value) {
+			const next = { ...this.config }
+			if (value === '' || value === null) {
+				delete next[key]
+			} else {
+				next[key] = value
+			}
+			if (key === 'register') {
+				delete next.schema
+			}
+			this.$emit('update:config', next)
+		},
+		setSidebarShape(shape) {
+			const next = { ...this.config }
+			if (shape === 'none') {
+				delete next.sidebar
+			} else if (shape === 'boolean') {
+				next.sidebar = true
+			} else {
+				next.sidebar = { enabled: true }
+			}
+			this.$emit('update:config', next)
+		},
+		updateSidebarKey(key, value) {
+			const next = { ...this.config }
+			const current = (typeof next.sidebar === 'object' && next.sidebar) || { enabled: true }
+			next.sidebar = { ...current, [key]: value }
+			this.$emit('update:config', next)
+		},
+		updateSidebarPropsTabs(tabs) {
+			const next = { ...this.config }
+			if (!tabs || !tabs.length) {
+				if (next.sidebarProps) {
+					const { tabs: _t, ...rest } = next.sidebarProps
+					if (Object.keys(rest).length === 0) {
+						delete next.sidebarProps
+					} else {
+						next.sidebarProps = rest
+					}
+				}
+			} else {
+				next.sidebarProps = { ...(next.sidebarProps || {}), tabs }
+			}
+			this.$emit('update:config', next)
+		},
+		async fetchRegisters() {
+			this.registers = await this.picker.fetchRegisters()
+		},
+		async fetchSchemas(register) {
+			this.schemas = await this.picker.fetchSchemas(register)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.detail-page-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 12px;
+}
+.detail-page-editor__title {
+	margin: 0;
+	font-size: 16px;
+	font-weight: 600;
+}
+.detail-page-editor__group {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.detail-page-editor__group label {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	font-size: 13px;
+}
+.detail-page-editor__group select {
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.detail-page-editor__fieldset {
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	padding: 8px;
+}
+.detail-page-editor__fieldset legend {
+	padding: 0 6px;
+	font-weight: 600;
+	font-size: 13px;
+}
+.detail-page-editor__inline {
+	display: inline-flex;
+	gap: 6px;
+	align-items: center;
+	margin-right: 12px;
+}
+.detail-page-editor__sidebar-shape {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-bottom: 8px;
+}
+.detail-page-editor__sidebar-object {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.detail-page-editor__warn {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-warning, var(--color-text-maxcontrast));
+	font-style: italic;
+}
+.detail-page-editor__note {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+}
+</style>
diff --git a/src/components/page-editor/FilesPageEditor.vue b/src/components/page-editor/FilesPageEditor.vue
new file mode 100644
index 00000000..b09ad765
--- /dev/null
+++ b/src/components/page-editor/FilesPageEditor.vue
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - FilesPageEditor — v1.1 stub. Task 4.7 deferred.
+  -->
+<template>
+	<StubPageEditor
+		:title="t('openbuilt', 'Files page')"
+		:message="t('openbuilt', 'Structured files editor (folder picker + allowed-types selector) coming in v1.1. For now, edit the raw JSON below or use the Raw JSON tab.')"
+		:config="config"
+		@update:config="$emit('update:config', $event)" />
+</template>
+
+<script>
+import StubPageEditor from './StubPageEditor.vue'
+
+export default {
+	name: 'FilesPageEditor',
+	components: { StubPageEditor },
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:config'],
+}
+</script>
diff --git a/src/components/page-editor/FormPageEditor.vue b/src/components/page-editor/FormPageEditor.vue
new file mode 100644
index 00000000..0045659d
--- /dev/null
+++ b/src/components/page-editor/FormPageEditor.vue
@@ -0,0 +1,225 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - FormPageEditor — field list (reusing FormFieldBuilder.vue), exactly-one-of
+  - submitHandler / submitEndpoint, submitMethod enum picker, mode enum
+  - picker, optional submitLabel / successMessage / initialValue.
+  - Implements REQ-OBPD-006.
+  -->
+<template>
+	<div class="form-page-editor">
+		<h3 class="form-page-editor__title">
+			{{ t('openbuilt', 'Form page') }}
+		</h3>
+
+		<fieldset class="form-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'Submit') }}</legend>
+			<div class="form-page-editor__submit-shape">
+				<label class="form-page-editor__inline">
+					<input
+						type="radio"
+						:checked="submitShape === 'handler'"
+						value="handler"
+						@change="setSubmitShape('handler')">
+					{{ t('openbuilt', 'submitHandler (registry key)') }}
+				</label>
+				<label class="form-page-editor__inline">
+					<input
+						type="radio"
+						:checked="submitShape === 'endpoint'"
+						value="endpoint"
+						@change="setSubmitShape('endpoint')">
+					{{ t('openbuilt', 'submitEndpoint (URL)') }}
+				</label>
+			</div>
+			<input
+				v-if="submitShape === 'handler'"
+				type="text"
+				class="form-page-editor__input"
+				:value="config.submitHandler || ''"
+				:placeholder="t('openbuilt', 'customComponents registry key')"
+				@input="setSubmitHandler($event.target.value)">
+			<input
+				v-else-if="submitShape === 'endpoint'"
+				type="text"
+				class="form-page-editor__input"
+				:value="config.submitEndpoint || ''"
+				:placeholder="t('openbuilt', '/api/objects/:slug/...')"
+				@input="setSubmitEndpoint($event.target.value)">
+			<label class="form-page-editor__group-row">
+				{{ t('openbuilt', 'Method') }}
+				<select
+					:value="config.submitMethod || 'POST'"
+					@change="update('submitMethod', $event.target.value)">
+					<option value="POST">
+						POST
+					</option>
+					<option value="PUT">
+						PUT
+					</option>
+					<option value="PATCH">
+						PATCH
+					</option>
+				</select>
+			</label>
+			<label class="form-page-editor__group-row">
+				{{ t('openbuilt', 'Mode') }}
+				<select
+					:value="config.mode || 'public'"
+					@change="update('mode', $event.target.value)">
+					<option value="public">
+						public
+					</option>
+					<option value="create">
+						create
+					</option>
+					<option value="edit">
+						edit
+					</option>
+				</select>
+			</label>
+			<label class="form-page-editor__group-row">
+				{{ t('openbuilt', 'Submit label (optional)') }}
+				<input
+					type="text"
+					:value="config.submitLabel || ''"
+					:placeholder="t('openbuilt', 'i18n key')"
+					@input="update('submitLabel', $event.target.value)">
+			</label>
+			<label class="form-page-editor__group-row">
+				{{ t('openbuilt', 'Success message (optional)') }}
+				<input
+					type="text"
+					:value="config.successMessage || ''"
+					:placeholder="t('openbuilt', 'i18n key')"
+					@input="update('successMessage', $event.target.value)">
+			</label>
+		</fieldset>
+
+		<fieldset class="form-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'Fields') }}</legend>
+			<FormFieldBuilder
+				:model-value="config.fields || []"
+				@update:modelValue="update('fields', $event)" />
+		</fieldset>
+	</div>
+</template>
+
+<script>
+import FormFieldBuilder from './fields/FormFieldBuilder.vue'
+
+export default {
+	name: 'FormPageEditor',
+	components: { FormFieldBuilder },
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:config'],
+	computed: {
+		submitShape() {
+			if (this.config.submitHandler) {
+				return 'handler'
+			}
+			if (this.config.submitEndpoint) {
+				return 'endpoint'
+			}
+			return 'handler'
+		},
+	},
+	methods: {
+		update(key, value) {
+			const next = { ...this.config }
+			if (value === '' || value === null) {
+				delete next[key]
+			} else {
+				next[key] = value
+			}
+			this.$emit('update:config', next)
+		},
+		setSubmitShape(shape) {
+			const next = { ...this.config }
+			if (shape === 'handler') {
+				delete next.submitEndpoint
+			} else {
+				delete next.submitHandler
+			}
+			this.$emit('update:config', next)
+		},
+		setSubmitHandler(value) {
+			const next = { ...this.config }
+			// Exactly-one-of: setting submitHandler clears submitEndpoint.
+			delete next.submitEndpoint
+			if (value === '') {
+				delete next.submitHandler
+			} else {
+				next.submitHandler = value
+			}
+			this.$emit('update:config', next)
+		},
+		setSubmitEndpoint(value) {
+			const next = { ...this.config }
+			delete next.submitHandler
+			if (value === '') {
+				delete next.submitEndpoint
+			} else {
+				next.submitEndpoint = value
+			}
+			this.$emit('update:config', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.form-page-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 12px;
+}
+.form-page-editor__title {
+	margin: 0;
+	font-size: 16px;
+	font-weight: 600;
+}
+.form-page-editor__fieldset {
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	padding: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.form-page-editor__fieldset legend {
+	padding: 0 6px;
+	font-weight: 600;
+	font-size: 13px;
+}
+.form-page-editor__submit-shape {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+.form-page-editor__inline {
+	display: inline-flex;
+	gap: 6px;
+	align-items: center;
+}
+.form-page-editor__input,
+.form-page-editor__group-row input,
+.form-page-editor__group-row select {
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.form-page-editor__group-row {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	font-size: 13px;
+}
+</style>
diff --git a/src/components/page-editor/IndexPageEditor.vue b/src/components/page-editor/IndexPageEditor.vue
new file mode 100644
index 00000000..9e51740d
--- /dev/null
+++ b/src/components/page-editor/IndexPageEditor.vue
@@ -0,0 +1,241 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - IndexPageEditor — register picker (OR REST), schema picker (OR REST),
+  - column selector with @self.* options, actions list, sidebar block,
+  - optional cardComponent. Implements REQ-OBPD-004.
+  -->
+<template>
+	<div class="index-page-editor">
+		<h3 class="index-page-editor__title">
+			{{ t('openbuilt', 'Index page') }}
+		</h3>
+		<div class="index-page-editor__group">
+			<label>
+				{{ t('openbuilt', 'Register') }}
+				<select :value="config.register || ''" @change="update('register', $event.target.value)">
+					<option value="">
+						{{ t('openbuilt', '— select register —') }}
+					</option>
+					<option v-for="r in registers" :key="r.slug || r.id" :value="r.slug">
+						{{ r.title || r.slug }}
+					</option>
+				</select>
+			</label>
+			<label>
+				{{ t('openbuilt', 'Schema') }}
+				<select :value="config.schema || ''" :disabled="!config.register" @change="update('schema', $event.target.value)">
+					<option value="">
+						{{ t('openbuilt', '— select schema —') }}
+					</option>
+					<option v-for="s in schemas" :key="s.slug || s.id" :value="s.slug">
+						{{ s.title || s.slug }}
+					</option>
+				</select>
+			</label>
+			<label>
+				{{ t('openbuilt', 'Card component (optional)') }}
+				<input
+					type="text"
+					:value="config.cardComponent || ''"
+					:placeholder="t('openbuilt', 'customComponents key')"
+					@input="update('cardComponent', $event.target.value)">
+			</label>
+		</div>
+
+		<fieldset class="index-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'Columns') }}</legend>
+			<ColumnBuilder
+				:model-value="config.columns || []"
+				:schema-properties="schemaProperties"
+				@update:modelValue="update('columns', $event)" />
+		</fieldset>
+
+		<fieldset class="index-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'Actions') }}</legend>
+			<ActionBuilder
+				:model-value="config.actions || []"
+				@update:modelValue="update('actions', $event)" />
+		</fieldset>
+
+		<fieldset class="index-page-editor__fieldset">
+			<legend>{{ t('openbuilt', 'Sidebar') }}</legend>
+			<label class="index-page-editor__inline">
+				<input
+					type="checkbox"
+					:checked="sidebarEnabled"
+					@change="onSidebarToggle($event.target.checked)">
+				{{ t('openbuilt', 'Enabled') }}
+			</label>
+			<SidebarSectionBuilder
+				v-if="sidebarEnabled"
+				:model-value="(config.sidebar && config.sidebar.columnGroups) || []"
+				@update:modelValue="updateSidebar('columnGroups', $event)" />
+		</fieldset>
+	</div>
+</template>
+
+<script>
+import ColumnBuilder from './fields/ColumnBuilder.vue'
+import ActionBuilder from './fields/ActionBuilder.vue'
+import SidebarSectionBuilder from './fields/SidebarSectionBuilder.vue'
+import { useRegisterPicker } from '../../composables/useRegisterPicker.js'
+
+export default {
+	name: 'IndexPageEditor',
+	components: {
+		ColumnBuilder,
+		ActionBuilder,
+		SidebarSectionBuilder,
+	},
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+		// Current Application slug. Drives the hybrid register model so the
+		// register picker hoists `openbuilt-{slug}` to the top of the list.
+		appSlug: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: ['update:config'],
+	setup(props) {
+		const picker = useRegisterPicker({ appSlug: props.appSlug })
+		return { picker }
+	},
+	data() {
+		return {
+			registers: [],
+			schemas: [],
+			schemaProperties: {},
+		}
+	},
+	computed: {
+		sidebarEnabled() {
+			const s = this.config.sidebar
+			if (s == null) {
+				return false
+			}
+			if (typeof s === 'boolean') {
+				return s
+			}
+			return s && s.enabled !== false
+		},
+	},
+	watch: {
+		'config.register': {
+			immediate: true,
+			handler(val) {
+				if (val) {
+					this.fetchSchemas(val)
+				} else {
+					this.schemas = []
+				}
+			},
+		},
+		'config.schema': {
+			immediate: true,
+			handler(val) {
+				if (val && this.config.register) {
+					this.fetchSchemaProperties(this.config.register, val)
+				} else {
+					this.schemaProperties = {}
+				}
+			},
+		},
+	},
+	async mounted() {
+		await this.fetchRegisters()
+	},
+	methods: {
+		update(key, value) {
+			const next = { ...this.config }
+			if (value === '' || value === null || (Array.isArray(value) && value.length === 0)) {
+				delete next[key]
+			} else {
+				next[key] = value
+			}
+			// When register changes, clear schema dependency.
+			if (key === 'register') {
+				delete next.schema
+			}
+			this.$emit('update:config', next)
+		},
+		onSidebarToggle(enabled) {
+			const next = { ...this.config }
+			if (!enabled) {
+				delete next.sidebar
+			} else {
+				const current = (typeof next.sidebar === 'object' && next.sidebar) || {}
+				next.sidebar = { ...current, enabled: true }
+			}
+			this.$emit('update:config', next)
+		},
+		updateSidebar(key, value) {
+			const next = { ...this.config }
+			const current = (typeof next.sidebar === 'object' && next.sidebar) || { enabled: true }
+			next.sidebar = { ...current, [key]: value }
+			this.$emit('update:config', next)
+		},
+		async fetchRegisters() {
+			this.registers = await this.picker.fetchRegisters()
+		},
+		async fetchSchemas(register) {
+			this.schemas = await this.picker.fetchSchemas(register)
+		},
+		async fetchSchemaProperties(register, schema) {
+			this.schemaProperties = await this.picker.fetchSchemaProperties(register, schema)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.index-page-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 12px;
+}
+.index-page-editor__title {
+	margin: 0;
+	font-size: 16px;
+	font-weight: 600;
+}
+.index-page-editor__group {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.index-page-editor__group label {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	font-size: 13px;
+}
+.index-page-editor__group input,
+.index-page-editor__group select {
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.index-page-editor__fieldset {
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	padding: 8px;
+}
+.index-page-editor__fieldset legend {
+	padding: 0 6px;
+	font-weight: 600;
+	font-size: 13px;
+}
+.index-page-editor__inline {
+	display: inline-flex;
+	gap: 6px;
+	align-items: center;
+	margin-bottom: 6px;
+}
+</style>
diff --git a/src/components/page-editor/LogsPageEditor.vue b/src/components/page-editor/LogsPageEditor.vue
new file mode 100644
index 00000000..7d6913c2
--- /dev/null
+++ b/src/components/page-editor/LogsPageEditor.vue
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - LogsPageEditor — v1.1 stub. Task 4.4 deferred.
+  -->
+<template>
+	<StubPageEditor
+		:title="t('openbuilt', 'Logs page')"
+		:message="t('openbuilt', 'Structured logs editor (register / schema / source / columns) coming in v1.1. For now, edit the raw JSON below or use the Raw JSON tab.')"
+		:config="config"
+		@update:config="$emit('update:config', $event)" />
+</template>
+
+<script>
+import StubPageEditor from './StubPageEditor.vue'
+
+export default {
+	name: 'LogsPageEditor',
+	components: { StubPageEditor },
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:config'],
+}
+</script>
diff --git a/src/components/page-editor/MenuTreeEditor.vue b/src/components/page-editor/MenuTreeEditor.vue
new file mode 100644
index 00000000..733c929a
--- /dev/null
+++ b/src/components/page-editor/MenuTreeEditor.vue
@@ -0,0 +1,379 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - MenuTreeEditor — drag-reorder top-level + child entries, depth-2 cap,
+  - i18n-key `label`, `target` enum, `action` enum, disable `route`/`href`
+  - when `action` is set. Implements REQ-OBPD-001.
+  -->
+<template>
+	<section class="menu-tree-editor">
+		<header class="menu-tree-editor__header">
+			<h4>{{ t('openbuilt', 'Menu') }}</h4>
+			<button type="button" class="menu-tree-editor__add" @click="addEntry()">
+				+ {{ t('openbuilt', 'Add menu entry') }}
+			</button>
+		</header>
+		<p v-if="depthError" class="menu-tree-editor__error" role="alert">
+			{{ t('openbuilt', 'Maximum nesting depth is two levels.') }}
+		</p>
+		<Draggable
+			:value="menu"
+			:options="{ handle: '.menu-tree-editor__drag-handle', animation: 150 }"
+			class="menu-tree-editor__list"
+			@input="onTopLevelReorder">
+			<div
+				v-for="(entry, index) in menu"
+				:key="entry.id || `entry-${index}`"
+				class="menu-tree-editor__entry">
+				<div class="menu-tree-editor__row">
+					<span class="menu-tree-editor__drag-handle" :title="t('openbuilt', 'Drag to reorder')">
+						⠿
+					</span>
+					<input
+						:value="entry.id || ''"
+						type="text"
+						class="menu-tree-editor__field"
+						:placeholder="t('openbuilt', 'id (e.g. inbox)')"
+						@input="updateField(index, 'id', $event.target.value)">
+					<input
+						:value="entry.label || ''"
+						type="text"
+						class="menu-tree-editor__field"
+						:placeholder="t('openbuilt', 'label (i18n key)')"
+						@input="updateField(index, 'label', $event.target.value)">
+					<input
+						:value="entry.icon || ''"
+						type="text"
+						class="menu-tree-editor__field menu-tree-editor__field--narrow"
+						:placeholder="t('openbuilt', 'icon')"
+						@input="updateField(index, 'icon', $event.target.value)">
+					<input
+						:value="entry.route || ''"
+						type="text"
+						class="menu-tree-editor__field"
+						:placeholder="t('openbuilt', 'route name')"
+						:disabled="!!entry.action"
+						@input="updateField(index, 'route', $event.target.value)">
+					<input
+						:value="entry.href || ''"
+						type="text"
+						class="menu-tree-editor__field"
+						:placeholder="t('openbuilt', 'href URL')"
+						:disabled="!!entry.action"
+						@input="updateField(index, 'href', $event.target.value)">
+					<select
+						:value="entry.target || 'main'"
+						class="menu-tree-editor__field menu-tree-editor__field--narrow"
+						@change="updateField(index, 'target', $event.target.value)">
+						<option value="main">
+							main
+						</option>
+						<option value="settings">
+							settings
+						</option>
+					</select>
+					<select
+						:value="entry.action || ''"
+						class="menu-tree-editor__field menu-tree-editor__field--narrow"
+						@change="updateActionField(index, $event.target.value)">
+						<option value="">
+							{{ t('openbuilt', '— action —') }}
+						</option>
+						<option value="user-settings">
+							user-settings
+						</option>
+					</select>
+					<button
+						type="button"
+						class="menu-tree-editor__icon-btn"
+						:title="t('openbuilt', 'Add child')"
+						@click="addChild(index)">
+						⤵
+					</button>
+					<button
+						type="button"
+						class="menu-tree-editor__icon-btn menu-tree-editor__icon-btn--remove"
+						:title="t('openbuilt', 'Remove entry')"
+						@click="removeEntry(index)">
+						✕
+					</button>
+				</div>
+				<p v-if="entry.action" class="menu-tree-editor__note">
+					{{ t('openbuilt', 'Route and href are ignored when an action is set.') }}
+				</p>
+				<Draggable
+					v-if="entry.children && entry.children.length"
+					:value="entry.children"
+					:options="{ handle: '.menu-tree-editor__drag-handle', animation: 150 }"
+					class="menu-tree-editor__children"
+					@input="onChildrenReorder(index, $event)">
+					<div
+						v-for="(child, cIndex) in entry.children"
+						:key="child.id || `child-${cIndex}`"
+						class="menu-tree-editor__row menu-tree-editor__row--child">
+						<span class="menu-tree-editor__drag-handle">
+							⠿
+						</span>
+						<input
+							:value="child.id || ''"
+							type="text"
+							class="menu-tree-editor__field"
+							:placeholder="t('openbuilt', 'child id')"
+							@input="updateChildField(index, cIndex, 'id', $event.target.value)">
+						<input
+							:value="child.label || ''"
+							type="text"
+							class="menu-tree-editor__field"
+							:placeholder="t('openbuilt', 'label (i18n key)')"
+							@input="updateChildField(index, cIndex, 'label', $event.target.value)">
+						<input
+							:value="child.icon || ''"
+							type="text"
+							class="menu-tree-editor__field menu-tree-editor__field--narrow"
+							:placeholder="t('openbuilt', 'icon')"
+							@input="updateChildField(index, cIndex, 'icon', $event.target.value)">
+						<input
+							:value="child.route || ''"
+							type="text"
+							class="menu-tree-editor__field"
+							:placeholder="t('openbuilt', 'route name')"
+							@input="updateChildField(index, cIndex, 'route', $event.target.value)">
+						<button
+							type="button"
+							class="menu-tree-editor__icon-btn menu-tree-editor__icon-btn--remove"
+							:title="t('openbuilt', 'Remove child')"
+							@click="removeChild(index, cIndex)">
+							✕
+						</button>
+					</div>
+				</Draggable>
+			</div>
+		</Draggable>
+		<p v-if="!menu.length" class="menu-tree-editor__empty">
+			{{ t('openbuilt', 'No menu entries yet. Click "Add menu entry" to start.') }}
+		</p>
+	</section>
+</template>
+
+<script>
+import Draggable from 'vuedraggable'
+
+export default {
+	name: 'MenuTreeEditor',
+	components: { Draggable },
+	props: {
+		menu: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['update:menu', 'depth-violation'],
+	data() {
+		return {
+			depthError: false,
+		}
+	},
+	methods: {
+		emit(menu) {
+			// Re-assign monotonic `order` integers per top-level entry.
+			const next = menu.map((e, i) => ({ ...e, order: i }))
+			this.$emit('update:menu', next)
+		},
+		updateField(index, key, value) {
+			const next = this.menu.slice()
+			const current = { ...next[index] }
+			if (value === '') {
+				delete current[key]
+			} else {
+				current[key] = value
+			}
+			next[index] = current
+			this.emit(next)
+		},
+		updateActionField(index, value) {
+			const next = this.menu.slice()
+			const current = { ...next[index] }
+			if (value === '') {
+				delete current.action
+			} else {
+				current.action = value
+				// Canonical rule: action set => clear route + href.
+				delete current.route
+				delete current.href
+			}
+			next[index] = current
+			this.emit(next)
+		},
+		addEntry() {
+			const next = this.menu.slice()
+			next.push({ id: '', label: '', target: 'main' })
+			this.emit(next)
+		},
+		removeEntry(index) {
+			const next = this.menu.slice()
+			next.splice(index, 1)
+			this.emit(next)
+		},
+		addChild(index) {
+			const next = this.menu.slice()
+			const current = { ...next[index] }
+			const children = Array.isArray(current.children) ? current.children.slice() : []
+			children.push({ id: '', label: '' })
+			current.children = children
+			next[index] = current
+			this.emit(next)
+		},
+		updateChildField(index, cIndex, key, value) {
+			const next = this.menu.slice()
+			const parent = { ...next[index] }
+			const children = (parent.children || []).slice()
+			const child = { ...children[cIndex] }
+			// Enforce depth-2: a child MUST NOT itself declare `children[]`.
+			if (key === 'children') {
+				this.depthError = true
+				this.$emit('depth-violation')
+				return
+			}
+			if (value === '') {
+				delete child[key]
+			} else {
+				child[key] = value
+			}
+			children[cIndex] = child
+			parent.children = children
+			next[index] = parent
+			this.emit(next)
+		},
+		removeChild(index, cIndex) {
+			const next = this.menu.slice()
+			const parent = { ...next[index] }
+			const children = (parent.children || []).slice()
+			children.splice(cIndex, 1)
+			if (children.length === 0) {
+				delete parent.children
+			} else {
+				parent.children = children
+			}
+			next[index] = parent
+			this.emit(next)
+		},
+		onTopLevelReorder(newOrder) {
+			this.emit(newOrder)
+		},
+		onChildrenReorder(index, newOrder) {
+			const next = this.menu.slice()
+			const parent = { ...next[index] }
+			parent.children = newOrder
+			next[index] = parent
+			this.emit(next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.menu-tree-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 8px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+}
+.menu-tree-editor__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.menu-tree-editor__header h4 {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+}
+.menu-tree-editor__add {
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.menu-tree-editor__list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+.menu-tree-editor__entry {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 6px;
+	border: 1px dashed var(--color-border);
+	border-radius: var(--border-radius);
+}
+.menu-tree-editor__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	flex-wrap: wrap;
+}
+.menu-tree-editor__row--child {
+	margin-left: 28px;
+	padding: 4px;
+	background: var(--color-background-hover);
+	border-radius: var(--border-radius);
+}
+.menu-tree-editor__drag-handle {
+	cursor: grab;
+	color: var(--color-text-maxcontrast);
+	user-select: none;
+}
+.menu-tree-editor__field {
+	flex: 1 1 110px;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.menu-tree-editor__field--narrow {
+	flex: 0 0 100px;
+}
+.menu-tree-editor__field[disabled] {
+	background: var(--color-background-dark);
+	color: var(--color-text-maxcontrast);
+}
+.menu-tree-editor__icon-btn {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.menu-tree-editor__icon-btn--remove {
+	color: var(--color-error, var(--color-main-text));
+}
+.menu-tree-editor__note {
+	margin: 0;
+	margin-left: 28px;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+}
+.menu-tree-editor__children {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.menu-tree-editor__empty {
+	margin: 0;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.menu-tree-editor__error {
+	margin: 0;
+	color: var(--color-error);
+	font-size: 13px;
+}
+</style>
diff --git a/src/components/page-editor/PageListEditor.vue b/src/components/page-editor/PageListEditor.vue
new file mode 100644
index 00000000..c03fdfb6
--- /dev/null
+++ b/src/components/page-editor/PageListEditor.vue
@@ -0,0 +1,312 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - PageListEditor — drag-reorder pages, add/remove, force page-type pick on
+  - add (closed enum of 9), enforce unique `id`, validate route-pattern grammar.
+  - Implements REQ-OBPD-002.
+  -->
+<template>
+	<section class="page-list-editor">
+		<header class="page-list-editor__header">
+			<h4>{{ t('openbuilt', 'Pages') }}</h4>
+			<button type="button" class="page-list-editor__add" @click="startAdd">
+				+ {{ t('openbuilt', 'Add page') }}
+			</button>
+		</header>
+		<div v-if="addingType !== null" class="page-list-editor__add-row">
+			<select v-model="addingType" class="page-list-editor__select">
+				<option value="">
+					{{ t('openbuilt', '— select page type —') }}
+				</option>
+				<option v-for="type in PAGE_TYPES" :key="type" :value="type">
+					{{ type }}
+				</option>
+			</select>
+			<button type="button" :disabled="!addingType" @click="confirmAdd">
+				{{ t('openbuilt', 'Confirm') }}
+			</button>
+			<button type="button" @click="cancelAdd">
+				{{ t('openbuilt', 'Cancel') }}
+			</button>
+		</div>
+		<Draggable
+			:value="pages"
+			:options="{ handle: '.page-list-editor__drag-handle', animation: 150 }"
+			class="page-list-editor__list"
+			@input="onReorder">
+			<div
+				v-for="(page, index) in pages"
+				:key="page.id || `page-${index}`"
+				class="page-list-editor__row"
+				:class="{
+					'page-list-editor__row--selected': index === selectedIndex,
+					'page-list-editor__row--error': hasError(page, index),
+				}"
+				@click="$emit('select', index)">
+				<span class="page-list-editor__drag-handle" :title="t('openbuilt', 'Drag to reorder')">
+					⠿
+				</span>
+				<input
+					:value="page.id || ''"
+					type="text"
+					class="page-list-editor__field"
+					:placeholder="t('openbuilt', 'page id')"
+					@click.stop
+					@input="updateField(index, 'id', $event.target.value)">
+				<input
+					:value="page.route || ''"
+					type="text"
+					class="page-list-editor__field"
+					:placeholder="t('openbuilt', '/route/:param')"
+					@click.stop
+					@input="updateField(index, 'route', $event.target.value)">
+				<span class="page-list-editor__type-tag">{{ page.type }}</span>
+				<button
+					type="button"
+					class="page-list-editor__remove"
+					:title="t('openbuilt', 'Remove page')"
+					@click.stop="removePage(index)">
+					✕
+				</button>
+			</div>
+		</Draggable>
+		<p v-if="!pages.length" class="page-list-editor__empty">
+			{{ t('openbuilt', 'No pages yet. Click "Add page" to start.') }}
+		</p>
+		<p v-if="duplicateIds.length" class="page-list-editor__error" role="alert">
+			{{ t('openbuilt', 'Duplicate page ids:') }} {{ duplicateIds.join(', ') }}
+		</p>
+		<p v-if="invalidRoutes.length" class="page-list-editor__error" role="alert">
+			{{ t('openbuilt', 'Invalid route(s):') }} {{ invalidRoutes.join(', ') }}
+		</p>
+	</section>
+</template>
+
+<script>
+import Draggable from 'vuedraggable'
+
+export const PAGE_TYPES = [
+	'index',
+	'detail',
+	'dashboard',
+	'logs',
+	'settings',
+	'chat',
+	'files',
+	'form',
+	'custom',
+]
+
+const ROUTE_PATTERN = /^\/$|^(\/[A-Za-z0-9_-]+|\/:[A-Za-z_][A-Za-z0-9_]*(\(.*\))?)+$/
+
+const DEFAULT_CONFIGS = {
+	index: { register: '', schema: '', columns: [], actions: [] },
+	detail: { register: '', schema: '' },
+	dashboard: { widgets: [], layout: [] },
+	logs: { register: '', schema: '', columns: [] },
+	settings: { sections: [] },
+	chat: { conversationSource: '' },
+	files: { folder: '' },
+	form: { fields: [], submitMethod: 'POST', mode: 'public' },
+	custom: {},
+}
+
+export default {
+	name: 'PageListEditor',
+	components: { Draggable },
+	props: {
+		pages: {
+			type: Array,
+			default: () => [],
+		},
+		selectedIndex: {
+			type: Number,
+			default: -1,
+		},
+	},
+	emits: ['update:pages', 'select'],
+	data() {
+		return {
+			PAGE_TYPES,
+			addingType: null,
+		}
+	},
+	computed: {
+		duplicateIds() {
+			const counts = new Map()
+			for (const p of this.pages) {
+				if (p && p.id) {
+					counts.set(p.id, (counts.get(p.id) || 0) + 1)
+				}
+			}
+			return Array.from(counts.entries()).filter(([, c]) => c > 1).map(([id]) => id)
+		},
+		invalidRoutes() {
+			return this.pages
+				.filter((p) => p && p.route && !ROUTE_PATTERN.test(p.route))
+				.map((p) => p.route)
+		},
+	},
+	methods: {
+		startAdd() {
+			this.addingType = ''
+		},
+		cancelAdd() {
+			this.addingType = null
+		},
+		confirmAdd() {
+			if (!this.addingType) {
+				return
+			}
+			const type = this.addingType
+			const next = this.pages.slice()
+			const placeholder = {
+				id: `${type}-page-${next.length + 1}`,
+				route: type === 'index' ? '/' : `/${type}`,
+				type,
+				title: `${type}.title`,
+				config: JSON.parse(JSON.stringify(DEFAULT_CONFIGS[type] || {})),
+			}
+			next.push(placeholder)
+			this.$emit('update:pages', next)
+			this.$emit('select', next.length - 1)
+			this.addingType = null
+		},
+		updateField(index, key, value) {
+			const next = this.pages.slice()
+			const current = { ...next[index] }
+			if (value === '') {
+				delete current[key]
+			} else {
+				current[key] = value
+			}
+			next[index] = current
+			this.$emit('update:pages', next)
+		},
+		removePage(index) {
+			const next = this.pages.slice()
+			next.splice(index, 1)
+			this.$emit('update:pages', next)
+			if (index === this.selectedIndex) {
+				this.$emit('select', -1)
+			}
+		},
+		onReorder(newOrder) {
+			this.$emit('update:pages', newOrder)
+		},
+		hasError(page, index) {
+			if (this.duplicateIds.includes(page && page.id)) {
+				return true
+			}
+			if (page && page.route && !ROUTE_PATTERN.test(page.route)) {
+				return true
+			}
+			return index === -1
+		},
+	},
+}
+</script>
+
+<style scoped>
+.page-list-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 8px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+}
+.page-list-editor__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.page-list-editor__header h4 {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+}
+.page-list-editor__add,
+.page-list-editor__add-row button {
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.page-list-editor__add-row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+}
+.page-list-editor__select {
+	flex: 1 1 auto;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.page-list-editor__list {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.page-list-editor__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	padding: 6px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.page-list-editor__row:hover {
+	background: var(--color-background-hover);
+}
+.page-list-editor__row--selected {
+	background: var(--color-primary-element-light);
+}
+.page-list-editor__row--error {
+	outline: 1px solid var(--color-error);
+}
+.page-list-editor__drag-handle {
+	cursor: grab;
+	color: var(--color-text-maxcontrast);
+	user-select: none;
+}
+.page-list-editor__field {
+	flex: 1 1 auto;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.page-list-editor__type-tag {
+	flex: 0 0 auto;
+	padding: 2px 6px;
+	background: var(--color-background-dark);
+	border-radius: var(--border-radius);
+	font-size: 11px;
+	color: var(--color-text-maxcontrast);
+}
+.page-list-editor__remove {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-error, var(--color-main-text));
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.page-list-editor__empty {
+	margin: 0;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.page-list-editor__error {
+	margin: 0;
+	color: var(--color-error);
+	font-size: 13px;
+}
+</style>
diff --git a/src/components/page-editor/SettingsPageEditor.vue b/src/components/page-editor/SettingsPageEditor.vue
new file mode 100644
index 00000000..22ff455b
--- /dev/null
+++ b/src/components/page-editor/SettingsPageEditor.vue
@@ -0,0 +1,27 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - SettingsPageEditor — v1.1 stub. Task 4.5 deferred.
+  -->
+<template>
+	<StubPageEditor
+		:title="t('openbuilt', 'Settings page')"
+		:message="t('openbuilt', 'Structured settings editor (section list with fields / component / widgets exactly-one-of) coming in v1.1. For now, edit the raw JSON below or use the Raw JSON tab.')"
+		:config="config"
+		@update:config="$emit('update:config', $event)" />
+</template>
+
+<script>
+import StubPageEditor from './StubPageEditor.vue'
+
+export default {
+	name: 'SettingsPageEditor',
+	components: { StubPageEditor },
+	props: {
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:config'],
+}
+</script>
diff --git a/src/components/page-editor/StubPageEditor.vue b/src/components/page-editor/StubPageEditor.vue
new file mode 100644
index 00000000..d6b50b90
--- /dev/null
+++ b/src/components/page-editor/StubPageEditor.vue
@@ -0,0 +1,111 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - StubPageEditor — Coming-in-v1.1 placeholder used by the five page-type
+  - sub-editors that ship as stubs (logs, settings, chat, files, custom).
+  - Round-trips the config block losslessly via a raw-JSON textarea so the
+  - editor never blanks externally authored manifests for the deferred types.
+  -->
+<template>
+	<div class="stub-page-editor">
+		<h3>{{ title }}</h3>
+		<p class="stub-page-editor__placeholder">
+			{{ message }}
+		</p>
+		<textarea
+			class="stub-page-editor__textarea"
+			spellcheck="false"
+			:value="jsonDraft"
+			@input="onInput($event.target.value)" />
+		<p v-if="parseError" class="stub-page-editor__error" role="alert">
+			{{ parseError }}
+		</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'StubPageEditor',
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		message: {
+			type: String,
+			required: true,
+		},
+		config: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:config'],
+	data() {
+		return {
+			jsonDraft: JSON.stringify(this.config || {}, null, 2),
+			parseError: '',
+		}
+	},
+	watch: {
+		config: {
+			deep: true,
+			handler(val) {
+				try {
+					const fresh = JSON.stringify(val || {}, null, 2)
+					if (fresh !== this.jsonDraft) {
+						this.jsonDraft = fresh
+					}
+				} catch {
+					// ignore — surfaced via the validator
+				}
+			},
+		},
+	},
+	methods: {
+		onInput(value) {
+			this.jsonDraft = value
+			try {
+				const parsed = JSON.parse(value)
+				this.parseError = ''
+				this.$emit('update:config', parsed)
+			} catch (e) {
+				this.parseError = e.message
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.stub-page-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px;
+}
+.stub-page-editor h3 {
+	margin: 0;
+	font-size: 16px;
+	font-weight: 600;
+}
+.stub-page-editor__placeholder {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+.stub-page-editor__textarea {
+	min-height: 240px;
+	font-family: monospace;
+	font-size: 13px;
+	padding: 8px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.stub-page-editor__error {
+	margin: 0;
+	color: var(--color-error);
+	font-size: 13px;
+}
+</style>
diff --git a/src/components/page-editor/fields/ActionBuilder.vue b/src/components/page-editor/fields/ActionBuilder.vue
new file mode 100644
index 00000000..3c1fefa1
--- /dev/null
+++ b/src/components/page-editor/fields/ActionBuilder.vue
@@ -0,0 +1,138 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - ActionBuilder — authors the `action` $def. Used by IndexPageEditor.
+  - Implements actions authoring for REQ-OBPD-004.
+  -->
+<template>
+	<div class="action-builder">
+		<div v-for="(act, index) in localActions" :key="index" class="action-builder__row">
+			<input
+				:value="act.id || ''"
+				type="text"
+				class="action-builder__field"
+				:placeholder="t('openbuilt', 'Action id (e.g. edit)')"
+				@input="updateField(index, 'id', $event.target.value)">
+			<input
+				:value="act.label || ''"
+				type="text"
+				class="action-builder__field"
+				:placeholder="t('openbuilt', 'Label (i18n key)')"
+				@input="updateField(index, 'label', $event.target.value)">
+			<input
+				:value="act.icon || ''"
+				type="text"
+				class="action-builder__field action-builder__field--narrow"
+				:placeholder="t('openbuilt', 'Icon')"
+				@input="updateField(index, 'icon', $event.target.value)">
+			<select
+				:value="act.target || ''"
+				class="action-builder__field action-builder__field--narrow"
+				@change="updateField(index, 'target', $event.target.value)">
+				<option value="">
+					{{ t('openbuilt', '— target —') }}
+				</option>
+				<option value="navigate">
+					navigate
+				</option>
+				<option value="emit">
+					emit
+				</option>
+				<option value="none">
+					none
+				</option>
+			</select>
+			<button
+				type="button"
+				class="action-builder__remove"
+				:title="t('openbuilt', 'Remove action')"
+				@click="removeAction(index)">
+				✕
+			</button>
+		</div>
+		<button type="button" class="action-builder__add" @click="addAction">
+			+ {{ t('openbuilt', 'Add action') }}
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ActionBuilder',
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['update:modelValue'],
+	computed: {
+		localActions() {
+			return Array.isArray(this.modelValue) ? this.modelValue : []
+		},
+	},
+	methods: {
+		updateField(index, key, value) {
+			const next = this.localActions.slice()
+			const current = next[index] || {}
+			if (value === '' && key !== 'id') {
+				const { [key]: _omit, ...rest } = current
+				next[index] = rest
+			} else {
+				next[index] = { ...current, [key]: value }
+			}
+			this.$emit('update:modelValue', next)
+		},
+		addAction() {
+			const next = this.localActions.slice()
+			next.push({ id: '', label: '' })
+			this.$emit('update:modelValue', next)
+		},
+		removeAction(index) {
+			const next = this.localActions.slice()
+			next.splice(index, 1)
+			this.$emit('update:modelValue', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.action-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.action-builder__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+}
+.action-builder__field {
+	flex: 1 1 auto;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.action-builder__field--narrow {
+	flex: 0 0 110px;
+}
+.action-builder__remove {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-error, var(--color-main-text));
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.action-builder__add {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+</style>
diff --git a/src/components/page-editor/fields/ColumnBuilder.vue b/src/components/page-editor/fields/ColumnBuilder.vue
new file mode 100644
index 00000000..c48ae19c
--- /dev/null
+++ b/src/components/page-editor/fields/ColumnBuilder.vue
@@ -0,0 +1,173 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - ColumnBuilder — authors the `column` $def, round-tripping both the
+  - typed-object shape AND the legacy string shorthand. Surfaces
+  - `@self.*` virtual columns when bound to a schema.
+  - Used by IndexPageEditor and LogsPageEditor (REQ-OBPD-004).
+  -->
+<template>
+	<div class="column-builder">
+		<div v-for="(col, index) in localColumns" :key="index" class="column-builder__row">
+			<select
+				:value="rowKey(col)"
+				class="column-builder__key"
+				@change="onKeyChange(index, $event.target.value)">
+				<option value="">
+					{{ t('openbuilt', '— select column —') }}
+				</option>
+				<optgroup :label="t('openbuilt', 'Schema properties')">
+					<option v-for="key in schemaPropertyKeys" :key="key" :value="key">
+						{{ key }}
+					</option>
+				</optgroup>
+				<optgroup :label="t('openbuilt', 'Metadata (@self.*)')">
+					<option v-for="key in SELF_VIRTUAL_KEYS" :key="key" :value="key">
+						{{ key }}
+					</option>
+				</optgroup>
+			</select>
+			<input
+				:value="rowLabel(col)"
+				type="text"
+				class="column-builder__label"
+				:placeholder="t('openbuilt', 'Label (i18n key)')"
+				@input="onLabelInput(index, $event.target.value)">
+			<button
+				type="button"
+				class="column-builder__remove"
+				:title="t('openbuilt', 'Remove column')"
+				@click="removeColumn(index)">
+				✕
+			</button>
+		</div>
+		<button type="button" class="column-builder__add" @click="addColumn">
+			+ {{ t('openbuilt', 'Add column') }}
+		</button>
+	</div>
+</template>
+
+<script>
+const SELF_VIRTUAL_KEYS = [
+	'@self.uuid',
+	'@self.created',
+	'@self.updated',
+	'@self.owner',
+	'@self.organisation',
+	'@self.locked',
+]
+
+export default {
+	name: 'ColumnBuilder',
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+		schemaProperties: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: ['update:modelValue'],
+	data() {
+		return {
+			SELF_VIRTUAL_KEYS,
+		}
+	},
+	computed: {
+		localColumns() {
+			return Array.isArray(this.modelValue) ? this.modelValue : []
+		},
+		schemaPropertyKeys() {
+			return Object.keys(this.schemaProperties || {})
+		},
+	},
+	methods: {
+		rowKey(col) {
+			if (typeof col === 'string') {
+				return col
+			}
+			return (col && (col.key || col.property)) || ''
+		},
+		rowLabel(col) {
+			if (typeof col === 'string') {
+				return ''
+			}
+			return (col && col.label) || ''
+		},
+		onKeyChange(index, value) {
+			const next = this.localColumns.slice()
+			const existing = next[index]
+			if (typeof existing === 'string' || !existing) {
+				// Stay in string shorthand when no label exists.
+				next[index] = value
+			} else {
+				next[index] = { ...existing, key: value }
+			}
+			this.$emit('update:modelValue', next)
+		},
+		onLabelInput(index, value) {
+			const next = this.localColumns.slice()
+			const existing = next[index]
+			// Promote string shorthand to typed object once a label is added.
+			const key = this.rowKey(existing)
+			if (value) {
+				next[index] = { key, label: value }
+			} else if (typeof existing === 'object' && existing) {
+				const { label, ...rest } = existing // eslint-disable-line no-unused-vars
+				next[index] = Object.keys(rest).length === 1 && rest.key ? rest.key : rest
+			}
+			this.$emit('update:modelValue', next)
+		},
+		addColumn() {
+			const next = this.localColumns.slice()
+			next.push('')
+			this.$emit('update:modelValue', next)
+		},
+		removeColumn(index) {
+			const next = this.localColumns.slice()
+			next.splice(index, 1)
+			this.$emit('update:modelValue', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.column-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.column-builder__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+}
+.column-builder__key,
+.column-builder__label {
+	flex: 1 1 auto;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.column-builder__remove {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-error, var(--color-main-text));
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.column-builder__add {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+</style>
diff --git a/src/components/page-editor/fields/FormFieldBuilder.vue b/src/components/page-editor/fields/FormFieldBuilder.vue
new file mode 100644
index 00000000..c461ebbb
--- /dev/null
+++ b/src/components/page-editor/fields/FormFieldBuilder.vue
@@ -0,0 +1,148 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - FormFieldBuilder — authors the `formField` $def with validation rules.
+  - Used by FormPageEditor AND SettingsPageEditor's flat-field section bodies.
+  - REQ-OBPD-006.
+  -->
+<template>
+	<div class="form-field-builder">
+		<div v-for="(field, index) in localFields" :key="index" class="form-field-builder__row">
+			<input
+				:value="field.key || ''"
+				type="text"
+				class="form-field-builder__field"
+				:placeholder="t('openbuilt', 'Key')"
+				@input="updateField(index, 'key', $event.target.value)">
+			<input
+				:value="field.label || ''"
+				type="text"
+				class="form-field-builder__field"
+				:placeholder="t('openbuilt', 'Label')"
+				@input="updateField(index, 'label', $event.target.value)">
+			<select
+				:value="field.type || 'string'"
+				class="form-field-builder__field form-field-builder__field--narrow"
+				@change="updateField(index, 'type', $event.target.value)">
+				<option v-for="t in FIELD_TYPES" :key="t" :value="t">
+					{{ t }}
+				</option>
+			</select>
+			<label class="form-field-builder__inline">
+				<input
+					type="checkbox"
+					:checked="!!field.required"
+					@change="updateField(index, 'required', $event.target.checked)">
+				{{ t('openbuilt', 'Required') }}
+			</label>
+			<input
+				:value="field.pattern || ''"
+				type="text"
+				class="form-field-builder__field form-field-builder__field--narrow"
+				:placeholder="t('openbuilt', 'Pattern')"
+				@input="updateField(index, 'pattern', $event.target.value)">
+			<button
+				type="button"
+				class="form-field-builder__remove"
+				:title="t('openbuilt', 'Remove field')"
+				@click="removeField(index)">
+				✕
+			</button>
+		</div>
+		<button type="button" class="form-field-builder__add" @click="addField">
+			+ {{ t('openbuilt', 'Add field') }}
+		</button>
+	</div>
+</template>
+
+<script>
+const FIELD_TYPES = ['string', 'number', 'boolean', 'select', 'textarea', 'date']
+
+export default {
+	name: 'FormFieldBuilder',
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['update:modelValue'],
+	data() {
+		return { FIELD_TYPES }
+	},
+	computed: {
+		localFields() {
+			return Array.isArray(this.modelValue) ? this.modelValue : []
+		},
+	},
+	methods: {
+		updateField(index, key, value) {
+			const next = this.localFields.slice()
+			const current = next[index] || {}
+			if ((value === '' || value === false) && key !== 'key' && key !== 'label' && key !== 'type') {
+				const { [key]: _omit, ...rest } = current
+				next[index] = rest
+			} else {
+				next[index] = { ...current, [key]: value }
+			}
+			this.$emit('update:modelValue', next)
+		},
+		addField() {
+			const next = this.localFields.slice()
+			next.push({ key: '', label: '', type: 'string' })
+			this.$emit('update:modelValue', next)
+		},
+		removeField(index) {
+			const next = this.localFields.slice()
+			next.splice(index, 1)
+			this.$emit('update:modelValue', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.form-field-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.form-field-builder__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	flex-wrap: wrap;
+}
+.form-field-builder__field {
+	flex: 1 1 120px;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.form-field-builder__field--narrow {
+	flex: 0 0 110px;
+}
+.form-field-builder__inline {
+	display: inline-flex;
+	gap: 4px;
+	align-items: center;
+}
+.form-field-builder__remove {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-error, var(--color-main-text));
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.form-field-builder__add {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+</style>
diff --git a/src/components/page-editor/fields/LayoutItemBuilder.vue b/src/components/page-editor/fields/LayoutItemBuilder.vue
new file mode 100644
index 00000000..bc476cf2
--- /dev/null
+++ b/src/components/page-editor/fields/LayoutItemBuilder.vue
@@ -0,0 +1,153 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - LayoutItemBuilder — authors the `layoutItem` $def. Used by DashboardPageEditor.
+  -->
+<template>
+	<div class="layout-item-builder">
+		<div v-for="(item, index) in localItems" :key="index" class="layout-item-builder__row">
+			<input
+				:value="item.widgetId || ''"
+				type="text"
+				class="layout-item-builder__field"
+				:placeholder="t('openbuilt', 'widget id')"
+				@input="updateField(index, 'widgetId', $event.target.value)">
+			<label class="layout-item-builder__pair">
+				X
+				<input
+					:value="item.gridX"
+					type="number"
+					min="0"
+					class="layout-item-builder__num"
+					@input="updateNum(index, 'gridX', $event.target.value)">
+			</label>
+			<label class="layout-item-builder__pair">
+				Y
+				<input
+					:value="item.gridY"
+					type="number"
+					min="0"
+					class="layout-item-builder__num"
+					@input="updateNum(index, 'gridY', $event.target.value)">
+			</label>
+			<label class="layout-item-builder__pair">
+				W
+				<input
+					:value="item.gridWidth"
+					type="number"
+					min="1"
+					class="layout-item-builder__num"
+					@input="updateNum(index, 'gridWidth', $event.target.value)">
+			</label>
+			<label class="layout-item-builder__pair">
+				H
+				<input
+					:value="item.gridHeight"
+					type="number"
+					min="1"
+					class="layout-item-builder__num"
+					@input="updateNum(index, 'gridHeight', $event.target.value)">
+			</label>
+			<button
+				type="button"
+				class="layout-item-builder__remove"
+				:title="t('openbuilt', 'Remove layout item')"
+				@click="removeItem(index)">
+				✕
+			</button>
+		</div>
+		<button type="button" class="layout-item-builder__add" @click="addItem">
+			+ {{ t('openbuilt', 'Add layout item') }}
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'LayoutItemBuilder',
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['update:modelValue'],
+	computed: {
+		localItems() {
+			return Array.isArray(this.modelValue) ? this.modelValue : []
+		},
+	},
+	methods: {
+		updateField(index, key, value) {
+			const next = this.localItems.slice()
+			next[index] = { ...next[index], [key]: value }
+			this.$emit('update:modelValue', next)
+		},
+		updateNum(index, key, value) {
+			const num = parseInt(value, 10)
+			this.updateField(index, key, Number.isNaN(num) ? 0 : num)
+		},
+		addItem() {
+			const next = this.localItems.slice()
+			next.push({ id: next.length + 1, widgetId: '', gridX: 0, gridY: 0, gridWidth: 6, gridHeight: 2 })
+			this.$emit('update:modelValue', next)
+		},
+		removeItem(index) {
+			const next = this.localItems.slice()
+			next.splice(index, 1)
+			this.$emit('update:modelValue', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.layout-item-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.layout-item-builder__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	flex-wrap: wrap;
+}
+.layout-item-builder__field {
+	flex: 1 1 160px;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.layout-item-builder__pair {
+	display: inline-flex;
+	gap: 4px;
+	align-items: center;
+}
+.layout-item-builder__num {
+	width: 64px;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.layout-item-builder__remove {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-error, var(--color-main-text));
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.layout-item-builder__add {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+</style>
diff --git a/src/components/page-editor/fields/SidebarSectionBuilder.vue b/src/components/page-editor/fields/SidebarSectionBuilder.vue
new file mode 100644
index 00000000..fe5fdf27
--- /dev/null
+++ b/src/components/page-editor/fields/SidebarSectionBuilder.vue
@@ -0,0 +1,117 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - SidebarSectionBuilder — authors the `sidebarSection` $def.
+  - Used by IndexPageEditor (sidebar.columnGroups).
+  -->
+<template>
+	<div class="sidebar-section-builder">
+		<div v-for="(section, index) in localSections" :key="index" class="sidebar-section-builder__row">
+			<input
+				:value="section.id || ''"
+				type="text"
+				class="sidebar-section-builder__field"
+				:placeholder="t('openbuilt', 'Section id')"
+				@input="updateField(index, 'id', $event.target.value)">
+			<input
+				:value="section.label || ''"
+				type="text"
+				class="sidebar-section-builder__field"
+				:placeholder="t('openbuilt', 'Label')"
+				@input="updateField(index, 'label', $event.target.value)">
+			<input
+				:value="(section.columns || []).join(',')"
+				type="text"
+				class="sidebar-section-builder__field"
+				:placeholder="t('openbuilt', 'Columns (comma-separated)')"
+				@input="updateColumns(index, $event.target.value)">
+			<button
+				type="button"
+				class="sidebar-section-builder__remove"
+				:title="t('openbuilt', 'Remove section')"
+				@click="removeSection(index)">
+				✕
+			</button>
+		</div>
+		<button type="button" class="sidebar-section-builder__add" @click="addSection">
+			+ {{ t('openbuilt', 'Add section') }}
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SidebarSectionBuilder',
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['update:modelValue'],
+	computed: {
+		localSections() {
+			return Array.isArray(this.modelValue) ? this.modelValue : []
+		},
+	},
+	methods: {
+		updateField(index, key, value) {
+			const next = this.localSections.slice()
+			const current = next[index] || {}
+			next[index] = { ...current, [key]: value }
+			this.$emit('update:modelValue', next)
+		},
+		updateColumns(index, value) {
+			const cols = value.split(',').map((s) => s.trim()).filter(Boolean)
+			this.updateField(index, 'columns', cols)
+		},
+		addSection() {
+			const next = this.localSections.slice()
+			next.push({ id: '', label: '', columns: [] })
+			this.$emit('update:modelValue', next)
+		},
+		removeSection(index) {
+			const next = this.localSections.slice()
+			next.splice(index, 1)
+			this.$emit('update:modelValue', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.sidebar-section-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.sidebar-section-builder__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+}
+.sidebar-section-builder__field {
+	flex: 1 1 auto;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.sidebar-section-builder__remove {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-error, var(--color-main-text));
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.sidebar-section-builder__add {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+</style>
diff --git a/src/components/page-editor/fields/SidebarTabBuilder.vue b/src/components/page-editor/fields/SidebarTabBuilder.vue
new file mode 100644
index 00000000..2975c442
--- /dev/null
+++ b/src/components/page-editor/fields/SidebarTabBuilder.vue
@@ -0,0 +1,136 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - SidebarTabBuilder — authors the `sidebarTab` $def.
+  - Used by DetailPageEditor (sidebarProps.tabs) and IndexPageEditor (sidebar tabs).
+  - REQ-OBPD-005.
+  -->
+<template>
+	<div class="sidebar-tab-builder">
+		<div v-for="(tab, index) in localTabs" :key="index" class="sidebar-tab-builder__row">
+			<input
+				:value="tab.id || ''"
+				type="text"
+				class="sidebar-tab-builder__field"
+				:placeholder="t('openbuilt', 'Tab id')"
+				@input="updateField(index, 'id', $event.target.value)">
+			<input
+				:value="tab.label || ''"
+				type="text"
+				class="sidebar-tab-builder__field"
+				:placeholder="t('openbuilt', 'Label (i18n key)')"
+				@input="updateField(index, 'label', $event.target.value)">
+			<input
+				:value="tab.icon || ''"
+				type="text"
+				class="sidebar-tab-builder__field sidebar-tab-builder__field--narrow"
+				:placeholder="t('openbuilt', 'Icon')"
+				@input="updateField(index, 'icon', $event.target.value)">
+			<input
+				:value="tab.component || ''"
+				type="text"
+				class="sidebar-tab-builder__field"
+				:placeholder="t('openbuilt', 'Component (registry key)')"
+				@input="updateField(index, 'component', $event.target.value)">
+			<button
+				type="button"
+				class="sidebar-tab-builder__remove"
+				:title="t('openbuilt', 'Remove tab')"
+				@click="removeTab(index)">
+				✕
+			</button>
+		</div>
+		<button type="button" class="sidebar-tab-builder__add" @click="addTab">
+			+ {{ t('openbuilt', 'Add tab') }}
+		</button>
+		<p class="sidebar-tab-builder__hint">
+			{{ t('openbuilt', 'Each tab declares either a list of widgets OR a component (mutually exclusive).') }}
+		</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SidebarTabBuilder',
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['update:modelValue'],
+	computed: {
+		localTabs() {
+			return Array.isArray(this.modelValue) ? this.modelValue : []
+		},
+	},
+	methods: {
+		updateField(index, key, value) {
+			const next = this.localTabs.slice()
+			const current = next[index] || {}
+			if (value === '') {
+				const { [key]: _omit, ...rest } = current
+				next[index] = rest
+			} else {
+				next[index] = { ...current, [key]: value }
+			}
+			this.$emit('update:modelValue', next)
+		},
+		addTab() {
+			const next = this.localTabs.slice()
+			next.push({ id: '', label: '' })
+			this.$emit('update:modelValue', next)
+		},
+		removeTab(index) {
+			const next = this.localTabs.slice()
+			next.splice(index, 1)
+			this.$emit('update:modelValue', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.sidebar-tab-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.sidebar-tab-builder__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+}
+.sidebar-tab-builder__field {
+	flex: 1 1 auto;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.sidebar-tab-builder__field--narrow {
+	flex: 0 0 100px;
+}
+.sidebar-tab-builder__remove {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-error, var(--color-main-text));
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.sidebar-tab-builder__add {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.sidebar-tab-builder__hint {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+</style>
diff --git a/src/components/page-editor/fields/WidgetBuilder.vue b/src/components/page-editor/fields/WidgetBuilder.vue
new file mode 100644
index 00000000..723a2727
--- /dev/null
+++ b/src/components/page-editor/fields/WidgetBuilder.vue
@@ -0,0 +1,115 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - WidgetBuilder — authors the `widgetDef` $def. Used by DashboardPageEditor.
+  -->
+<template>
+	<div class="widget-builder">
+		<div v-for="(widget, index) in localWidgets" :key="index" class="widget-builder__row">
+			<input
+				:value="widget.id || ''"
+				type="text"
+				class="widget-builder__field"
+				:placeholder="t('openbuilt', 'Widget id')"
+				@input="updateField(index, 'id', $event.target.value)">
+			<input
+				:value="widget.title || ''"
+				type="text"
+				class="widget-builder__field"
+				:placeholder="t('openbuilt', 'Title')"
+				@input="updateField(index, 'title', $event.target.value)">
+			<input
+				:value="widget.type || ''"
+				type="text"
+				class="widget-builder__field widget-builder__field--narrow"
+				:placeholder="t('openbuilt', 'Type')"
+				@input="updateField(index, 'type', $event.target.value)">
+			<button
+				type="button"
+				class="widget-builder__remove"
+				:title="t('openbuilt', 'Remove widget')"
+				@click="removeWidget(index)">
+				✕
+			</button>
+		</div>
+		<button type="button" class="widget-builder__add" @click="addWidget">
+			+ {{ t('openbuilt', 'Add widget') }}
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'WidgetBuilder',
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['update:modelValue'],
+	computed: {
+		localWidgets() {
+			return Array.isArray(this.modelValue) ? this.modelValue : []
+		},
+	},
+	methods: {
+		updateField(index, key, value) {
+			const next = this.localWidgets.slice()
+			const current = next[index] || {}
+			next[index] = { ...current, [key]: value }
+			this.$emit('update:modelValue', next)
+		},
+		addWidget() {
+			const next = this.localWidgets.slice()
+			next.push({ id: '', title: '', type: 'custom' })
+			this.$emit('update:modelValue', next)
+		},
+		removeWidget(index) {
+			const next = this.localWidgets.slice()
+			next.splice(index, 1)
+			this.$emit('update:modelValue', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.widget-builder {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.widget-builder__row {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+}
+.widget-builder__field {
+	flex: 1 1 auto;
+	padding: 4px 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.widget-builder__field--narrow {
+	flex: 0 0 130px;
+}
+.widget-builder__remove {
+	background: transparent;
+	border: 1px solid var(--color-border);
+	color: var(--color-error, var(--color-main-text));
+	padding: 4px 8px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+.widget-builder__add {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 1px solid var(--color-border);
+	color: var(--color-main-text);
+	padding: 4px 10px;
+	border-radius: var(--border-radius);
+	cursor: pointer;
+}
+</style>
diff --git a/src/composables/useLivePreview.js b/src/composables/useLivePreview.js
new file mode 100644
index 00000000..47c32981
--- /dev/null
+++ b/src/composables/useLivePreview.js
@@ -0,0 +1,69 @@
+// SPDX-License-Identifier: EUPL-1.2
+/**
+ * useLivePreview — feature-detect the in-memory `useAppManifest(appId,
+ * manifestObject)` overload from chain spec #2 and expose:
+ *   - `available` — true when the overload is present (function arity >= 2).
+ *   - `previewProps(slug, inflightManifest)` — props for the sandbox
+ *     CnAppRoot mount. Returns `null` when the overload is unavailable.
+ *
+ * Implements REQ-OBPD-008 fallback logic.
+ *
+ * Feature detection inspects `useAppManifest.length` at module-load time;
+ * the imported function is treated as a static dependency, not a runtime
+ * registry. When chain spec #2 ships, the bumped library export changes
+ * the arity from 1 (legacy: only `appId`) to 2 (new: appId + manifest),
+ * and `available` flips to true without any editor code change.
+ */
+import { computed } from 'vue'
+import { useAppManifest } from '@conduction/nextcloud-vue'
+
+export function useLivePreview() {
+	// Spec #2 adds a second positional `manifestObject` parameter; arity
+	// is the discriminator. Older versions ship as a 1-arg function.
+	const fnArity
+		= typeof useAppManifest === 'function' ? useAppManifest.length : 0
+	const available = computed(() => fnArity >= 2)
+
+	/**
+	 * Build the prop bag for the sandbox CnAppRoot mount.
+	 *
+	 * @param {string} slug - The Application's slug.
+	 * @param {object} inflightManifest - The unsaved manifest blob.
+	 * @return {object|null} props or null when preview is unavailable.
+	 */
+	function previewProps(slug, inflightManifest) {
+		if (!available.value) {
+			return null
+		}
+		const key = manifestHash(inflightManifest)
+		return {
+			appId: `openbuilt-preview-${slug}`,
+			manifest: inflightManifest,
+			key,
+		}
+	}
+
+	return { available, previewProps }
+}
+
+/**
+ * Cheap content hash for keying the sandbox CnAppRoot mount. Stable for
+ * identical-content edits (mitigates "preview pane re-mounts thrash" risk
+ * in design.md).
+ *
+ * @param {object} manifest - manifest blob.
+ * @return {string} stable hash string.
+ */
+function manifestHash(manifest) {
+	try {
+		const json = JSON.stringify(manifest)
+		let hash = 0
+		for (let i = 0; i < json.length; i++) {
+			hash = ((hash << 5) - hash) + json.charCodeAt(i)
+			hash |= 0
+		}
+		return String(hash)
+	} catch {
+		return String(Date.now())
+	}
+}
diff --git a/src/composables/useManifestValidator.js b/src/composables/useManifestValidator.js
new file mode 100644
index 00000000..5707d88a
--- /dev/null
+++ b/src/composables/useManifestValidator.js
@@ -0,0 +1,101 @@
+// SPDX-License-Identifier: EUPL-1.2
+/**
+ * useManifestValidator — debounced wrapper around `validateManifest` from
+ * the `@conduction/nextcloud-vue` library. Implements REQ-OBPD-011.
+ *
+ * Responsibilities:
+ *  - Re-run validateManifest at most once every 300ms of editor-state change.
+ *  - Surface each error twice: in a side-panel error list AND as inline marks
+ *    on the offending editor field via path-prefix → field-component-ref map.
+ *  - Never block the UI thread; the validator runs via setTimeout, the
+ *    editor stays responsive while results catch up asynchronously.
+ *
+ * Sub-editors call `register(pathPrefix, fieldRef)` on mount and
+ * `unregister(pathPrefix)` on unmount. After each validator pass the
+ * composable groups error paths by their longest matching registered
+ * prefix and assigns the mapped field ref an error-marked state.
+ *
+ * Path mapping convention: validateManifest emits paths in JSON Pointer
+ * shorthand like `/pages/1/config/columns/0`. Sub-editors register a
+ * prefix string matching the same shape, e.g. `/pages/1/config/columns`.
+ */
+import { ref, reactive, computed } from 'vue'
+import { validateManifest } from '@conduction/nextcloud-vue'
+
+const DEBOUNCE_MS = 300
+
+export function useManifestValidator() {
+	const errors = ref([])
+	const isValidating = ref(false)
+	const fieldRefs = reactive(new Map())
+	let timer = null
+
+	/**
+	 * Validate (debounced).
+	 *
+	 * @param {object} manifest - the in-flight manifest blob to validate.
+	 */
+	function validate(manifest) {
+		if (timer) {
+			clearTimeout(timer)
+		}
+		isValidating.value = true
+		timer = setTimeout(() => {
+			try {
+				const result = validateManifest
+					? validateManifest(manifest)
+					: { valid: true, errors: [] }
+				errors.value = Array.isArray(result.errors) ? result.errors.slice() : []
+			} catch (e) {
+				errors.value = [`validator threw: ${e && e.message ? e.message : e}`]
+			} finally {
+				isValidating.value = false
+			}
+		}, DEBOUNCE_MS)
+	}
+
+	/**
+	 * Register a field component against a JSON-Pointer path prefix.
+	 * When the validator reports an error path whose prefix matches, the
+	 * registered ref is decorated with an inline error mark.
+	 *
+	 * @param {string} pathPrefix - JSON-Pointer prefix like `/pages/0/id`.
+	 * @param {object} fieldRef - object exposing `markError(message)` and
+	 *   `clearError()` methods (sub-editor field wrapper).
+	 */
+	function register(pathPrefix, fieldRef) {
+		fieldRefs.set(pathPrefix, fieldRef)
+	}
+
+	function unregister(pathPrefix) {
+		fieldRefs.delete(pathPrefix)
+	}
+
+	const hasErrors = computed(() => errors.value.length > 0)
+
+	/**
+	 * For each registered prefix, find the longest matching error path and
+	 * return it. Used by sub-editors to decorate their inline field marks.
+	 */
+	const errorsByPrefix = computed(() => {
+		const result = new Map()
+		for (const prefix of fieldRefs.keys()) {
+			const hits = errors.value.filter((e) => typeof e === 'string' && e.startsWith(prefix))
+			if (hits.length) {
+				result.set(prefix, hits)
+			}
+		}
+		return result
+	})
+
+	return {
+		errors,
+		hasErrors,
+		isValidating,
+		validate,
+		register,
+		unregister,
+		errorsByPrefix,
+		DEBOUNCE_MS,
+	}
+}
diff --git a/src/composables/useRegisterPicker.js b/src/composables/useRegisterPicker.js
new file mode 100644
index 00000000..6f7824bc
--- /dev/null
+++ b/src/composables/useRegisterPicker.js
@@ -0,0 +1,145 @@
+// SPDX-License-Identifier: EUPL-1.2
+/**
+ * useRegisterPicker — composable that fetches registers + schemas for
+ * the page-editor's register / schema dropdowns.
+ *
+ * Hybrid register model (per design.md + locked decision 3):
+ *  - The page editor consumes Application records from the SHARED
+ *    `openbuilt` register (one record per virtual app).
+ *  - The manifest each Application produces references schemas living
+ *    in the PER-APP register `openbuilt-{slug}`. So when the user picks
+ *    a schema for a page binding, this composable shows the registers
+ *    available to that per-app namespace — i.e. `openbuilt-{slug}` plus
+ *    any other registers the user explicitly references.
+ *
+ * Why a composable and not raw axios in each sub-editor:
+ *  - Centralises the OR REST URL shape (single edit-point for path changes).
+ *  - Honours the ADR-004 hard rule "Do not use custom stores; use Options
+ *    API with createObjectStore". Register / schema metadata is loaded
+ *    via @nextcloud/router + buildHeaders so request-token + CSRF are
+ *    consistent across pickers; no direct axios import in the consumers.
+ */
+import { generateUrl } from '@nextcloud/router'
+import { getRequestToken } from '@nextcloud/auth'
+
+const PICKER_HEADERS = () => ({
+	'Content-Type': 'application/json',
+	Accept: 'application/json',
+	requesttoken: getRequestToken(),
+})
+
+/**
+ * Fetch helpers for the register / schema pickers used by IndexPageEditor
+ * and DetailPageEditor. The composable returns four async functions; the
+ * caller stores the results in component data (Options API) so this stays
+ * a pure data-flow helper with no Vue state-binding magic.
+ *
+ * @param {object} [opts] - Options.
+ * @param {string} [opts.appSlug] - Current Application slug. When set, the
+ *   picker filters to the per-app register `openbuilt-{slug}` first.
+ * @return {object} - { fetchRegisters, fetchSchemas, fetchSchemaProperties,
+ *   resolveAppRegister }.
+ */
+export function useRegisterPicker(opts = {}) {
+	const appSlug = opts.appSlug || ''
+
+	/**
+	 * Resolve the per-app register slug for the current Application.
+	 * Returns `openbuilt-{slug}` when slug is set, falls back to ''.
+	 *
+	 * @return {string} - the per-app register slug or empty string.
+	 */
+	function resolveAppRegister() {
+		return appSlug ? `openbuilt-${appSlug}` : ''
+	}
+
+	/**
+	 * Fetch the list of registers available to the page editor. When the
+	 * current Application has a slug, the per-app register is hoisted to
+	 * the top so picker UX defaults to the right namespace.
+	 *
+	 * @return {Promise<Array>} - registers list.
+	 */
+	async function fetchRegisters() {
+		try {
+			const url = generateUrl('/apps/openregister/api/registers')
+			const response = await fetch(url, { headers: PICKER_HEADERS() })
+			if (!response.ok) {
+				return []
+			}
+			const data = await response.json()
+			const list = (data && (data.results || data)) || []
+			if (!Array.isArray(list)) {
+				return []
+			}
+			// Hoist the per-app register so it is the obvious default.
+			const perApp = resolveAppRegister()
+			if (!perApp) {
+				return list
+			}
+			const sorted = [...list].sort((a, b) => {
+				if ((a.slug || a.id) === perApp) return -1
+				if ((b.slug || b.id) === perApp) return 1
+				return 0
+			})
+			return sorted
+		} catch {
+			return []
+		}
+	}
+
+	/**
+	 * Fetch the schemas in a given register.
+	 *
+	 * @param {string} register - register slug or id.
+	 * @return {Promise<Array>} - schemas list.
+	 */
+	async function fetchSchemas(register) {
+		if (!register) {
+			return []
+		}
+		try {
+			const url = generateUrl(`/apps/openregister/api/registers/${register}/schemas`)
+			const response = await fetch(url, { headers: PICKER_HEADERS() })
+			if (!response.ok) {
+				return []
+			}
+			const data = await response.json()
+			const list = (data && (data.results || data)) || []
+			return Array.isArray(list) ? list : []
+		} catch {
+			return []
+		}
+	}
+
+	/**
+	 * Fetch the JSON-schema `properties` map for a register / schema pair.
+	 *
+	 * @param {string} register - register slug.
+	 * @param {string} schema - schema slug.
+	 * @return {Promise<object>} - properties map (empty object on failure).
+	 */
+	async function fetchSchemaProperties(register, schema) {
+		if (!register || !schema) {
+			return {}
+		}
+		try {
+			const url = generateUrl(`/apps/openregister/api/registers/${register}/schemas/${schema}`)
+			const response = await fetch(url, { headers: PICKER_HEADERS() })
+			if (!response.ok) {
+				return {}
+			}
+			const data = await response.json()
+			return (data && data.properties) || (data && data.schema && data.schema.properties) || {}
+		} catch {
+			return {}
+		}
+	}
+
+	return {
+		fetchRegisters,
+		fetchSchemas,
+		fetchSchemaProperties,
+		resolveAppRegister,
+	}
+}
diff --git a/src/customComponents.js b/src/customComponents.js
index 65a37f7e..633e41f9 100644
--- a/src/customComponents.js
+++ b/src/customComponents.js
@@ -21,6 +21,7 @@
 import DashboardView from './views/Dashboard.vue'
 import ApplicationsView from './views/ApplicationEditor.vue'
 import SchemaDesignerView from './views/SchemaDesigner.vue'
+import PageDesignerView from './views/PageDesigner.vue'
 import ExportJobsView from './views/ExportJobsList.vue'
 import BuilderHostView from './views/BuilderHost.vue'
 import TemplateGalleryView from './views/TemplateGallery.vue'
@@ -35,6 +36,10 @@ export default {
 	// (/builder/:slug/schemas[/:schemaId] and the paramless /schemas
 	// shortcut, which defaults to the hello-world seed app).
 	SchemaDesignerView,
+	// Visual manifest page designer for a virtual app
+	// (/builder/:slug/pages) — three-pane page-list / per-type sub-editor
+	// / validator side-panel (REQ-OBPD-003).
+	PageDesignerView,
 	// Export-jobs list — status of Phase-2 "export to real app" runs.
 	ExportJobsView,
 	// Virtual-app host — mounts a nested CnAppRoot rendering the virtual
diff --git a/src/manifest.json b/src/manifest.json
index 6c14ca46..acc2cb02 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -17,6 +17,7 @@
 		{ "id": "Templates", "route": "/templates", "type": "custom", "title": "Templates", "component": "TemplateGalleryView" },
 		{ "id": "SchemaDesignerList", "route": "/builder/:slug/schemas", "type": "custom", "title": "Schemas", "component": "SchemaDesignerView" },
 		{ "id": "SchemaDesigner", "route": "/builder/:slug/schemas/:schemaId", "type": "custom", "title": "Schema", "component": "SchemaDesignerView" },
+		{ "id": "PageDesigner", "route": "/builder/:slug/pages", "type": "custom", "title": "Page designer", "component": "PageDesignerView" },
 		{ "id": "Exports", "route": "/exports", "type": "custom", "title": "Exports", "component": "ExportJobsView" },
 		{ "id": "BuilderHost", "route": "/builder/:slug/:pathMatch(.*)?", "type": "custom", "title": "Virtual app", "component": "BuilderHostView" }
 	]
diff --git a/src/store/modules/applicationEditor.js b/src/store/modules/applicationEditor.js
new file mode 100644
index 00000000..73d6b81e
--- /dev/null
+++ b/src/store/modules/applicationEditor.js
@@ -0,0 +1,257 @@
+// SPDX-License-Identifier: EUPL-1.2
+/**
+ * applicationEditor store — Pinia slice that holds the in-flight
+ * Application + manifest state shared between the Design and Raw JSON
+ * tabs (REQ-OBPD-010 / MODIFIED REQ-OBR-005).
+ *
+ * CRUD is delegated to the shared @conduction/nextcloud-vue `useObjectStore`
+ * (registered as type `application` against the shared `openbuilt` register
+ * in store/store.js). This store owns only the editor-local UI state
+ * (manifest draft, raw JSON, dirty flag, validation mirror).
+ *
+ * Round-trip-lossless contract (design.md Risk mitigation):
+ * The original Application object is stored unmodified in `original`;
+ * UI-controlled manifest fields are surgical-merged on `serialize()` so
+ * externally authored keys the editor does not understand are preserved.
+ */
+import { defineStore } from 'pinia'
+import { useObjectStore } from './object.js'
+
+export const useApplicationEditorStore = defineStore('applicationEditor', {
+	state: () => ({
+		// The full Application object as loaded from OR (untouched copy).
+		original: null,
+		// In-flight manifest blob (mutable; what the editors author).
+		manifest: null,
+		// Loading / saving flags (mirrored from the shared object store).
+		loading: false,
+		saving: false,
+		// Last validation result errors (mirrored from validator composable).
+		validationErrors: [],
+		// Raw JSON tab content (string). Allows the textarea to round-trip
+		// formatting choices when the user is editing JSON directly.
+		rawJsonDraft: '',
+		// Has the in-flight state diverged from the loaded original?
+		dirty: false,
+		// Last load error (network / permission).
+		loadError: '',
+		// Last save error (network / validation).
+		saveError: '',
+	}),
+
+	getters: {
+		uuid(state) {
+			if (!state.original) {
+				return null
+			}
+			return state.original.uuid || state.original.id || null
+		},
+		slug(state) {
+			if (!state.original) {
+				return ''
+			}
+			return state.original.slug || ''
+		},
+		pages(state) {
+			if (!state.manifest || !Array.isArray(state.manifest.pages)) {
+				return []
+			}
+			return state.manifest.pages
+		},
+		menu(state) {
+			if (!state.manifest || !Array.isArray(state.manifest.menu)) {
+				return []
+			}
+			return state.manifest.menu
+		},
+	},
+
+	actions: {
+		/**
+		 * Load an Application by its UUID via the shared object store.
+		 * Populates `original`, `manifest`, and `rawJsonDraft`.
+		 *
+		 * @param {string} uuid - Application UUID.
+		 */
+		async load(uuid) {
+			this.loading = true
+			this.loadError = ''
+			try {
+				const objectStore = useObjectStore()
+				const app = await objectStore.fetchObject('application', uuid)
+				if (!app) {
+					const err = objectStore.getError('application')
+					this.loadError = `Failed to load application: ${err && err.message ? err.message : 'not found'}`
+					return
+				}
+				this.original = app
+				this.manifest = JSON.parse(JSON.stringify(app.manifest || {}))
+				this.rawJsonDraft = JSON.stringify(this.manifest, null, 2)
+				this.dirty = false
+			} catch (e) {
+				this.loadError = `Failed to load application: ${e && e.message ? e.message : e}`
+			} finally {
+				this.loading = false
+			}
+		},
+
+		/**
+		 * List Applications (lightweight; for picker in editor).
+		 *
+		 * @return {Promise<Array>} list of Applications.
+		 */
+		async listApplications() {
+			try {
+				const objectStore = useObjectStore()
+				const results = await objectStore.fetchCollection('application', { _limit: 100 })
+				return results || []
+			} catch (e) {
+				this.loadError = `Failed to list applications: ${e && e.message ? e.message : e}`
+				return []
+			}
+		},
+
+		/**
+		 * Mark the in-flight manifest dirty + sync the raw JSON draft.
+		 * Called by sub-editors on every edit. Cheap (O(manifest size)).
+		 */
+		touch() {
+			this.dirty = true
+			try {
+				this.rawJsonDraft = JSON.stringify(this.manifest, null, 2)
+			} catch {
+				// Surface only — the validator will catch the structural issue.
+			}
+		},
+
+		/**
+		 * Update the manifest from the Raw JSON textarea draft. Returns
+		 * { ok: boolean, error: string } so the textarea can surface parse
+		 * errors inline.
+		 *
+		 * @param {string} jsonString - the JSON the user typed.
+		 * @return {{ok: boolean, error: string}} parse outcome.
+		 */
+		commitRawJsonDraft(jsonString) {
+			this.rawJsonDraft = jsonString
+			try {
+				const parsed = JSON.parse(jsonString)
+				this.manifest = parsed
+				this.dirty = true
+				return { ok: true, error: '' }
+			} catch (e) {
+				return { ok: false, error: e.message }
+			}
+		},
+
+		/**
+		 * Set the validation error mirror (kept here so the Raw JSON tab
+		 * and the Design tab share one error surface).
+		 *
+		 * @param {Array<string>} errors - validator error list.
+		 */
+		setValidationErrors(errors) {
+			this.validationErrors = Array.isArray(errors) ? errors : []
+		},
+
+		/**
+		 * Surgical merge: take the in-flight manifest's UI-controlled keys
+		 * and overwrite them in the original Application; preserve every
+		 * other Application field unmodified (per design.md Risk mitigation).
+		 *
+		 * @return {object} merged Application body suitable for save.
+		 */
+		serialize() {
+			const base = this.original ? { ...this.original } : {}
+			base.manifest = JSON.parse(JSON.stringify(this.manifest || {}))
+			return base
+		},
+
+		/**
+		 * Save the current in-flight Application via the shared object store.
+		 * Refuses to save when `this.validationErrors` is non-empty so the
+		 * caller can keep its Save button disabled.
+		 *
+		 * @return {Promise<boolean>} true on success.
+		 */
+		async save() {
+			if (!this.uuid) {
+				this.saveError = 'No application loaded.'
+				return false
+			}
+			if (this.validationErrors.length > 0) {
+				this.saveError = `Manifest invalid: ${this.validationErrors.join('; ')}`
+				return false
+			}
+			this.saving = true
+			this.saveError = ''
+			try {
+				const objectStore = useObjectStore()
+				const body = this.serialize()
+				// `saveObject` uses `id` to choose POST vs PUT — copy uuid into id
+				// for the update path since OpenRegister identifies via uuid.
+				const updateBody = { ...body, id: body.id || this.uuid }
+				const saved = await objectStore.saveObject('application', updateBody)
+				if (!saved) {
+					const err = objectStore.getError('application')
+					this.saveError = `Save failed: ${err && err.message ? err.message : 'unknown error'}`
+					return false
+				}
+				this.original = saved
+				this.dirty = false
+				return true
+			} catch (e) {
+				this.saveError = `Save failed: ${e && e.message ? e.message : e}`
+				return false
+			} finally {
+				this.saving = false
+			}
+		},
+
+		/**
+		 * Replace one page's config block in-place. Convenience for sub-editors.
+		 *
+		 * @param {number} pageIndex - position in manifest.pages.
+		 * @param {object} config - new config block.
+		 */
+		updatePageConfig(pageIndex, config) {
+			if (!this.manifest || !Array.isArray(this.manifest.pages)) {
+				return
+			}
+			if (pageIndex < 0 || pageIndex >= this.manifest.pages.length) {
+				return
+			}
+			this.manifest.pages[pageIndex] = {
+				...this.manifest.pages[pageIndex],
+				config: { ...config },
+			}
+			this.touch()
+		},
+
+		/**
+		 * Replace the full pages array (after a drag-reorder or add/remove).
+		 *
+		 * @param {Array} pages - new pages array.
+		 */
+		setPages(pages) {
+			if (!this.manifest) {
+				this.manifest = { version: '0.1.0', menu: [], pages: [] }
+			}
+			this.manifest.pages = pages
+			this.touch()
+		},
+
+		/**
+		 * Replace the full menu array.
+		 *
+		 * @param {Array} menu - new menu array.
+		 */
+		setMenu(menu) {
+			if (!this.manifest) {
+				this.manifest = { version: '0.1.0', menu: [], pages: [] }
+			}
+			this.manifest.menu = menu
+			this.touch()
+		},
+	},
+})
diff --git a/src/views/PageDesigner.vue b/src/views/PageDesigner.vue
new file mode 100644
index 00000000..65dab62b
--- /dev/null
+++ b/src/views/PageDesigner.vue
@@ -0,0 +1,322 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<!--
+  - PageDesigner — three-pane visual designer for OpenBuilt application
+  - manifests. Left: page list + menu tree. Centre: per-page-type sub-editor
+  - dispatched by `page.type`. Right: validator error-list side panel
+  - (REQ-OBPD-011); the live-preview pane is deferred to chain spec #2
+  - (see useLivePreview.js). Implements REQ-OBPD-003.
+  -->
+<template>
+	<div class="page-designer">
+		<aside class="page-designer__left">
+			<PageListEditor
+				:pages="pages"
+				:selected-index="selectedIndex"
+				@update:pages="onPagesUpdate"
+				@select="selectPage" />
+			<MenuTreeEditor
+				:menu="menu"
+				@update:menu="onMenuUpdate"
+				@depth-violation="onDepthViolation" />
+		</aside>
+
+		<section class="page-designer__centre">
+			<div v-if="selectedPage" class="page-designer__sub-editor">
+				<component
+					:is="subEditorFor(selectedPage.type)"
+					:config="selectedPage.config || {}"
+					:page-type="selectedPage.type"
+					:app-slug="slug"
+					:parent-route="selectedPage.route || ''"
+					@update:config="onConfigUpdate" />
+			</div>
+			<div v-else class="page-designer__empty">
+				<p>{{ t('openbuilt', 'Select a page on the left, or add one to start designing.') }}</p>
+			</div>
+		</section>
+
+		<aside class="page-designer__right">
+			<!-- TODO(chain-spec-2): live preview pane requires in-memory useAppManifest -->
+			<div v-if="!previewAvailable" class="page-designer__preview-fallback">
+				<h4>{{ t('openbuilt', 'Live preview') }}</h4>
+				<p class="page-designer__preview-message">
+					{{ t('openbuilt', 'openbuilt.page-designer.preview.unavailable — chain spec #2 not yet installed. Save and open the built app to preview your changes.') }}
+				</p>
+				<button
+					type="button"
+					class="page-designer__preview-btn"
+					:disabled="!canSaveAndPreview"
+					@click="saveAndPreview">
+					{{ t('openbuilt', 'Save & open preview') }}
+				</button>
+			</div>
+			<div class="page-designer__errors">
+				<h4>{{ t('openbuilt', 'Validation') }}</h4>
+				<p v-if="depthError" class="page-designer__error-row" role="alert">
+					{{ t('openbuilt', 'openbuilt.page-designer.menu.error.nesting-depth — menu depth limited to two levels.') }}
+				</p>
+				<ul v-if="validatorErrors.length" class="page-designer__error-list">
+					<li v-for="(err, i) in validatorErrors" :key="i" class="page-designer__error-row">
+						{{ err }}
+					</li>
+				</ul>
+				<p v-else-if="!depthError" class="page-designer__ok">
+					{{ t('openbuilt', 'No validation errors.') }}
+				</p>
+			</div>
+		</aside>
+	</div>
+</template>
+
+<script>
+import PageListEditor from '../components/page-editor/PageListEditor.vue'
+import MenuTreeEditor from '../components/page-editor/MenuTreeEditor.vue'
+import IndexPageEditor from '../components/page-editor/IndexPageEditor.vue'
+import DetailPageEditor from '../components/page-editor/DetailPageEditor.vue'
+import DashboardPageEditor from '../components/page-editor/DashboardPageEditor.vue'
+import FormPageEditor from '../components/page-editor/FormPageEditor.vue'
+import LogsPageEditor from '../components/page-editor/LogsPageEditor.vue'
+import SettingsPageEditor from '../components/page-editor/SettingsPageEditor.vue'
+import ChatPageEditor from '../components/page-editor/ChatPageEditor.vue'
+import FilesPageEditor from '../components/page-editor/FilesPageEditor.vue'
+import CustomPageEditor from '../components/page-editor/CustomPageEditor.vue'
+import StubPageEditor from '../components/page-editor/StubPageEditor.vue'
+import { useLivePreview } from '../composables/useLivePreview.js'
+import { useManifestValidator } from '../composables/useManifestValidator.js'
+
+// Closed mapping of page.type → sub-editor component. Adding a new type
+// requires both the schema enum bump in `app-manifest.schema.json` AND a
+// new entry here. Unsupported types fall back to StubPageEditor.
+const SUB_EDITOR_MAP = {
+	index: 'IndexPageEditor',
+	detail: 'DetailPageEditor',
+	dashboard: 'DashboardPageEditor',
+	form: 'FormPageEditor',
+	logs: 'LogsPageEditor',
+	settings: 'SettingsPageEditor',
+	chat: 'ChatPageEditor',
+	files: 'FilesPageEditor',
+	custom: 'CustomPageEditor',
+}
+
+export default {
+	name: 'PageDesigner',
+	components: {
+		PageListEditor,
+		MenuTreeEditor,
+		IndexPageEditor,
+		DetailPageEditor,
+		DashboardPageEditor,
+		FormPageEditor,
+		LogsPageEditor,
+		SettingsPageEditor,
+		ChatPageEditor,
+		FilesPageEditor,
+		CustomPageEditor,
+		StubPageEditor,
+	},
+	props: {
+		manifest: {
+			type: Object,
+			default: () => ({ pages: [], menu: [] }),
+		},
+		slug: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: ['update:manifest', 'save-and-preview'],
+	setup() {
+		const { available: previewAvailable, previewProps } = useLivePreview()
+		const validator = useManifestValidator()
+		return { previewAvailable, previewProps, validator }
+	},
+	data() {
+		return {
+			selectedIndex: -1,
+			depthError: false,
+		}
+	},
+	computed: {
+		pages() {
+			return Array.isArray(this.manifest && this.manifest.pages) ? this.manifest.pages : []
+		},
+		menu() {
+			return Array.isArray(this.manifest && this.manifest.menu) ? this.manifest.menu : []
+		},
+		selectedPage() {
+			if (this.selectedIndex < 0 || this.selectedIndex >= this.pages.length) {
+				return null
+			}
+			return this.pages[this.selectedIndex]
+		},
+		validatorErrors() {
+			return this.validator.errors.value || []
+		},
+		canSaveAndPreview() {
+			return !!this.slug && this.validatorErrors.length === 0
+		},
+	},
+	watch: {
+		manifest: {
+			deep: true,
+			immediate: true,
+			handler(m) {
+				this.validator.validate(m)
+			},
+		},
+	},
+	methods: {
+		subEditorFor(type) {
+			return SUB_EDITOR_MAP[type] || 'StubPageEditor'
+		},
+		selectPage(index) {
+			this.selectedIndex = index
+		},
+		emitManifest(next) {
+			this.$emit('update:manifest', next)
+		},
+		onPagesUpdate(pages) {
+			const next = { ...(this.manifest || {}), pages }
+			this.emitManifest(next)
+		},
+		onMenuUpdate(menu) {
+			const next = { ...(this.manifest || {}), menu }
+			this.depthError = false
+			this.emitManifest(next)
+		},
+		onDepthViolation() {
+			this.depthError = true
+		},
+		onConfigUpdate(config) {
+			if (this.selectedIndex < 0) {
+				return
+			}
+			const pages = this.pages.slice()
+			pages[this.selectedIndex] = { ...pages[this.selectedIndex], config }
+			const next = { ...(this.manifest || {}), pages }
+			this.emitManifest(next)
+		},
+		saveAndPreview() {
+			this.$emit('save-and-preview')
+		},
+	},
+}
+</script>
+
+<style scoped>
+.page-designer {
+	display: grid;
+	grid-template-columns: minmax(280px, 320px) 1fr minmax(260px, 320px);
+	gap: 12px;
+	padding: 8px;
+	min-height: 60vh;
+}
+
+.page-designer__left,
+.page-designer__centre,
+.page-designer__right {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	padding: 8px;
+	background: var(--color-main-background);
+}
+
+.page-designer__centre {
+	min-height: 50vh;
+}
+
+.page-designer__sub-editor {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+}
+
+.page-designer__empty {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.page-designer__preview-fallback {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 8px;
+	border: 1px dashed var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-background-hover);
+}
+
+.page-designer__preview-fallback h4,
+.page-designer__errors h4 {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.page-designer__preview-message {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	line-height: 1.4;
+}
+
+.page-designer__preview-btn {
+	align-self: flex-start;
+	padding: 4px 10px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-primary-element-light);
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+
+.page-designer__preview-btn[disabled] {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.page-designer__errors {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.page-designer__error-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.page-designer__error-row {
+	margin: 0;
+	padding: 4px 6px;
+	background: var(--color-background-hover);
+	border-left: 3px solid var(--color-error);
+	border-radius: var(--border-radius);
+	font-size: 12px;
+	color: var(--color-main-text);
+}
+
+.page-designer__ok {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-success, var(--color-text-maxcontrast));
+}
+
+@media (max-width: 1100px) {
+	.page-designer {
+		grid-template-columns: 1fr;
+	}
+}
+</style>
diff --git a/tests/components/page-editor/FormPageEditor.spec.js b/tests/components/page-editor/FormPageEditor.spec.js
new file mode 100644
index 00000000..f0b91e7e
--- /dev/null
+++ b/tests/components/page-editor/FormPageEditor.spec.js
@@ -0,0 +1,150 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest spec for FormPageEditor (REQ-OBPD-006).
+ *
+ * Covers:
+ *  - Submit shape radio renders both options.
+ *  - submitHandler / submitEndpoint are mutually exclusive: setting one
+ *    clears the other on `update:config`.
+ *  - Switching radio variants clears the inactive field.
+ *  - submitMethod enum picker forwards POST/PUT/PATCH.
+ *  - Mode enum forwards public/create/edit.
+ *  - Optional submitLabel + successMessage propagate.
+ *  - FormFieldBuilder add forwards through update:config.
+ */
+
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+vi.mock('../../../src/components/page-editor/fields/FormFieldBuilder.vue', () => ({
+	default: {
+		name: 'FormFieldBuilder',
+		props: ['modelValue'],
+		render(h) { return h('div', { staticClass: 'form-field-builder-stub' }) },
+	},
+}))
+
+const FormPageEditor = (await import('../../../src/components/page-editor/FormPageEditor.vue')).default
+
+function mountEditor(config = {}) {
+	return mount(FormPageEditor, { propsData: { config } })
+}
+
+describe('FormPageEditor', () => {
+	it('renders the editor title', () => {
+		const wrapper = mountEditor()
+		expect(wrapper.text()).toContain('Form page')
+	})
+
+	it('renders both submit-shape radios', () => {
+		const wrapper = mountEditor()
+		const radios = wrapper.findAll('input[type="radio"]')
+		expect(radios).toHaveLength(2)
+	})
+
+	it('submitHandler is the default shape', () => {
+		const wrapper = mountEditor()
+		expect(wrapper.vm.submitShape).toBe('handler')
+	})
+
+	it('config with submitEndpoint reports endpoint shape', () => {
+		const wrapper = mountEditor({ submitEndpoint: '/api/objects/x' })
+		expect(wrapper.vm.submitShape).toBe('endpoint')
+	})
+
+	it('setSubmitHandler clears submitEndpoint (mutex)', async () => {
+		const wrapper = mountEditor({ submitEndpoint: '/api/objects/x' })
+		wrapper.vm.setSubmitHandler('saveDraft')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next.submitHandler).toBe('saveDraft')
+		expect(next).not.toHaveProperty('submitEndpoint')
+	})
+
+	it('setSubmitEndpoint clears submitHandler (mutex)', async () => {
+		const wrapper = mountEditor({ submitHandler: 'saveDraft' })
+		wrapper.vm.setSubmitEndpoint('/api/objects/x')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next.submitEndpoint).toBe('/api/objects/x')
+		expect(next).not.toHaveProperty('submitHandler')
+	})
+
+	it('clearing submitHandler with empty string removes it', async () => {
+		const wrapper = mountEditor({ submitHandler: 'saveDraft' })
+		wrapper.vm.setSubmitHandler('')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next).not.toHaveProperty('submitHandler')
+	})
+
+	it('radio toggle to endpoint clears submitHandler without setting value yet', async () => {
+		const wrapper = mountEditor({ submitHandler: 'saveDraft' })
+		wrapper.vm.setSubmitShape('endpoint')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next).not.toHaveProperty('submitHandler')
+	})
+
+	it('radio toggle to handler clears submitEndpoint', async () => {
+		const wrapper = mountEditor({ submitEndpoint: '/api/x' })
+		wrapper.vm.setSubmitShape('handler')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next).not.toHaveProperty('submitEndpoint')
+	})
+
+	it('submitMethod enum forwards POST/PUT/PATCH', async () => {
+		const wrapper = mountEditor({})
+		for (const method of ['POST', 'PUT', 'PATCH']) {
+			wrapper.vm.update('submitMethod', method)
+			await wrapper.vm.$nextTick()
+		}
+		const emissions = wrapper.emitted('update:config')
+		expect(emissions[0][0].submitMethod).toBe('POST')
+		expect(emissions[1][0].submitMethod).toBe('PUT')
+		expect(emissions[2][0].submitMethod).toBe('PATCH')
+	})
+
+	it('mode enum forwards public/create/edit', async () => {
+		const wrapper = mountEditor({})
+		for (const mode of ['public', 'create', 'edit']) {
+			wrapper.vm.update('mode', mode)
+			await wrapper.vm.$nextTick()
+		}
+		const emissions = wrapper.emitted('update:config')
+		expect(emissions[0][0].mode).toBe('public')
+		expect(emissions[1][0].mode).toBe('create')
+		expect(emissions[2][0].mode).toBe('edit')
+	})
+
+	it('submitLabel + successMessage propagate when set', async () => {
+		const wrapper = mountEditor({})
+		wrapper.vm.update('submitLabel', 'form.submit.label')
+		wrapper.vm.update('successMessage', 'form.success.message')
+		await wrapper.vm.$nextTick()
+		const emissions = wrapper.emitted('update:config')
+		expect(emissions[0][0].submitLabel).toBe('form.submit.label')
+		expect(emissions[1][0].successMessage).toBe('form.success.message')
+	})
+
+	it('update with empty string deletes the key', async () => {
+		const wrapper = mountEditor({ submitLabel: 'foo' })
+		wrapper.vm.update('submitLabel', '')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next).not.toHaveProperty('submitLabel')
+	})
+
+	it('FormFieldBuilder add forwards through update:config', async () => {
+		const wrapper = mountEditor({ fields: [] })
+		const ffb = wrapper.findComponent({ name: 'FormFieldBuilder' })
+		ffb.vm.$emit('update:modelValue', [{ key: 'name', label: 'Name', type: 'string' }])
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next.fields).toHaveLength(1)
+		expect(next.fields[0].key).toBe('name')
+	})
+})
diff --git a/tests/components/page-editor/IndexPageEditor.spec.js b/tests/components/page-editor/IndexPageEditor.spec.js
new file mode 100644
index 00000000..e7208f51
--- /dev/null
+++ b/tests/components/page-editor/IndexPageEditor.spec.js
@@ -0,0 +1,185 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest spec for IndexPageEditor (REQ-OBPD-004).
+ *
+ * Covers:
+ *  - Register picker calls useRegisterPicker.fetchRegisters on mount.
+ *  - Schema picker is disabled until a register is selected.
+ *  - Picking a register clears the previously-selected schema.
+ *  - ColumnBuilder add/remove/reorder forwards via update:config.
+ *  - ActionBuilder add forwards via update:config.
+ *  - Sidebar toggle adds/removes the `sidebar` config key.
+ *
+ * The `useRegisterPicker` composable is mocked at the module boundary so
+ * the spec doesn't hit fetch().
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+const fetchRegisters = vi.fn(async () => [
+	{ slug: 'openbuilt-hello-world', title: 'Hello World' },
+	{ slug: 'openbuilt', title: 'OpenBuilt apps' },
+])
+const fetchSchemas = vi.fn(async () => [
+	{ slug: 'page', title: 'Page' },
+	{ slug: 'application', title: 'Application' },
+])
+const fetchSchemaProperties = vi.fn(async () => ({
+	title: { type: 'string' },
+	route: { type: 'string' },
+}))
+
+vi.mock('../../../src/composables/useRegisterPicker.js', () => ({
+	useRegisterPicker: () => ({
+		fetchRegisters,
+		fetchSchemas,
+		fetchSchemaProperties,
+		resolveAppRegister: () => 'openbuilt-hello-world',
+	}),
+}))
+
+// Stub the field builders — they have their own specs; here we only
+// verify that update:config propagates through them.
+vi.mock('../../../src/components/page-editor/fields/ColumnBuilder.vue', () => ({
+	default: {
+		name: 'ColumnBuilder',
+		props: ['modelValue', 'schemaProperties'],
+		render(h) { return h('div', { staticClass: 'column-builder-stub' }) },
+	},
+}))
+vi.mock('../../../src/components/page-editor/fields/ActionBuilder.vue', () => ({
+	default: {
+		name: 'ActionBuilder',
+		props: ['modelValue'],
+		render(h) { return h('div', { staticClass: 'action-builder-stub' }) },
+	},
+}))
+vi.mock('../../../src/components/page-editor/fields/SidebarSectionBuilder.vue', () => ({
+	default: {
+		name: 'SidebarSectionBuilder',
+		props: ['modelValue'],
+		render(h) { return h('div', { staticClass: 'sidebar-section-builder-stub' }) },
+	},
+}))
+
+const IndexPageEditor = (await import('../../../src/components/page-editor/IndexPageEditor.vue')).default
+
+function mountEditor(config = {}, appSlug = 'hello-world') {
+	return mount(IndexPageEditor, {
+		propsData: { config, appSlug },
+	})
+}
+
+describe('IndexPageEditor', () => {
+	beforeEach(() => {
+		fetchRegisters.mockClear()
+		fetchSchemas.mockClear()
+		fetchSchemaProperties.mockClear()
+	})
+
+	it('renders the editor title', () => {
+		const wrapper = mountEditor()
+		expect(wrapper.text()).toContain('Index page')
+	})
+
+	it('calls fetchRegisters on mount', async () => {
+		mountEditor()
+		await new Promise((r) => setTimeout(r, 0))
+		expect(fetchRegisters).toHaveBeenCalled()
+	})
+
+	it('renders register options after fetch resolves', async () => {
+		const wrapper = mountEditor()
+		await new Promise((r) => setTimeout(r, 0))
+		await wrapper.vm.$nextTick()
+		const options = wrapper.findAll('option')
+		const slugs = options.wrappers.map((w) => w.element.value)
+		expect(slugs).toContain('openbuilt-hello-world')
+		expect(slugs).toContain('openbuilt')
+	})
+
+	it('schema picker is disabled until a register is selected', () => {
+		const wrapper = mountEditor({})
+		const selects = wrapper.findAll('select')
+		// First select = register, second = schema. Schema should be disabled.
+		expect(selects.at(1).element.disabled).toBe(true)
+	})
+
+	it('schema picker is enabled when a register is set', async () => {
+		const wrapper = mountEditor({ register: 'openbuilt-hello-world' })
+		await wrapper.vm.$nextTick()
+		const selects = wrapper.findAll('select')
+		expect(selects.at(1).element.disabled).toBe(false)
+	})
+
+	it('picking a register clears the previously-set schema', async () => {
+		const wrapper = mountEditor({ register: 'openbuilt-hello-world', schema: 'page' })
+		wrapper.vm.update('register', 'openbuilt')
+		await wrapper.vm.$nextTick()
+		const emitted = wrapper.emitted('update:config')
+		expect(emitted).toBeTruthy()
+		const next = emitted[0][0]
+		expect(next.register).toBe('openbuilt')
+		expect(next).not.toHaveProperty('schema')
+	})
+
+	it('column add via ColumnBuilder forwards through update:config', async () => {
+		const wrapper = mountEditor({ register: 'r', schema: 's', columns: [] })
+		const cb = wrapper.findComponent({ name: 'ColumnBuilder' })
+		cb.vm.$emit('update:modelValue', [{ key: 'title' }, { key: 'route' }])
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next.columns).toHaveLength(2)
+		expect(next.columns[0].key).toBe('title')
+	})
+
+	it('clearing columns to [] deletes the key from config', async () => {
+		const wrapper = mountEditor({ register: 'r', schema: 's', columns: [{ key: 'foo' }] })
+		const cb = wrapper.findComponent({ name: 'ColumnBuilder' })
+		cb.vm.$emit('update:modelValue', [])
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next).not.toHaveProperty('columns')
+	})
+
+	it('action add via ActionBuilder forwards through update:config', async () => {
+		const wrapper = mountEditor({ register: 'r', schema: 's', actions: [] })
+		const ab = wrapper.findComponent({ name: 'ActionBuilder' })
+		ab.vm.$emit('update:modelValue', [{ id: 'edit', label: 'Edit' }])
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next.actions).toHaveLength(1)
+		expect(next.actions[0].id).toBe('edit')
+	})
+
+	it('sidebar toggle adds the `sidebar` key with enabled:true', async () => {
+		const wrapper = mountEditor({ register: 'r', schema: 's' })
+		wrapper.vm.onSidebarToggle(true)
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next.sidebar).toEqual({ enabled: true })
+	})
+
+	it('sidebar untoggle deletes the `sidebar` key', async () => {
+		const wrapper = mountEditor({
+			register: 'r',
+			schema: 's',
+			sidebar: { enabled: true, columnGroups: [] },
+		})
+		wrapper.vm.onSidebarToggle(false)
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next).not.toHaveProperty('sidebar')
+	})
+
+	it('updates `cardComponent` via the optional input', async () => {
+		const wrapper = mountEditor({ register: 'r' })
+		wrapper.vm.update('cardComponent', 'OpenBuiltDefaultCard')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:config')[0][0]
+		expect(next.cardComponent).toBe('OpenBuiltDefaultCard')
+	})
+})
diff --git a/tests/components/page-editor/MenuTreeEditor.spec.js b/tests/components/page-editor/MenuTreeEditor.spec.js
new file mode 100644
index 00000000..956541b8
--- /dev/null
+++ b/tests/components/page-editor/MenuTreeEditor.spec.js
@@ -0,0 +1,156 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest spec for MenuTreeEditor (REQ-OBPD-001).
+ *
+ * Covers:
+ *  - Initial render lists provided menu entries.
+ *  - Clicking "Add menu entry" appends a placeholder and emits `update:menu`.
+ *  - vuedraggable @input forwards a re-ordered array via `update:menu`
+ *    with re-assigned monotonic `order` integers.
+ *  - 2-level nesting cap: a child cannot itself declare `children[]`;
+ *    attempting to set it raises `depth-violation` and surfaces the error
+ *    paragraph but does NOT emit `update:menu`.
+ *  - Setting `action` on a top-level entry clears `route` and `href`
+ *    (canonical mutex documented in the template comment).
+ */
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MenuTreeEditor from '../../../src/components/page-editor/MenuTreeEditor.vue'
+
+const stubDraggable = {
+	name: 'Draggable',
+	props: ['value', 'options'],
+	render(h) { return h('div', { staticClass: 'vuedraggable-stub' }, this.$slots.default) },
+}
+
+function mountEditor(menu = []) {
+	return mount(MenuTreeEditor, {
+		propsData: { menu },
+		stubs: { Draggable: stubDraggable },
+	})
+}
+
+describe('MenuTreeEditor', () => {
+	it('renders the empty-state message when menu is empty', () => {
+		const wrapper = mountEditor([])
+		expect(wrapper.text()).toContain('No menu entries yet')
+	})
+
+	it('renders one row per provided top-level entry', () => {
+		const wrapper = mountEditor([
+			{ id: 'inbox', label: 'inbox.label', target: 'main' },
+			{ id: 'settings', label: 'settings.label', target: 'settings' },
+		])
+		const rows = wrapper.findAll('.menu-tree-editor__entry')
+		expect(rows).toHaveLength(2)
+	})
+
+	it('addEntry() emits update:menu with the appended placeholder', async () => {
+		const wrapper = mountEditor([{ id: 'inbox', label: 'inbox.label' }])
+		await wrapper.find('.menu-tree-editor__add').trigger('click')
+		const emitted = wrapper.emitted('update:menu')
+		expect(emitted).toBeTruthy()
+		const next = emitted[0][0]
+		expect(next).toHaveLength(2)
+		expect(next[1]).toMatchObject({ target: 'main' })
+		expect(next[1].order).toBe(1)
+	})
+
+	it('assigns monotonic `order` integers on every emit', async () => {
+		const wrapper = mountEditor([
+			{ id: 'a' },
+			{ id: 'b' },
+			{ id: 'c' },
+		])
+		// Re-order via the draggable stub's @input event.
+		wrapper.vm.onTopLevelReorder([
+			{ id: 'c' },
+			{ id: 'a' },
+			{ id: 'b' },
+		])
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:menu')[0][0]
+		expect(next.map((e) => e.id)).toEqual(['c', 'a', 'b'])
+		expect(next.map((e) => e.order)).toEqual([0, 1, 2])
+	})
+
+	it('addChild() seeds an empty children[] on the parent', async () => {
+		const wrapper = mountEditor([{ id: 'parent' }])
+		wrapper.vm.addChild(0)
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:menu')[0][0]
+		expect(next[0].children).toBeTruthy()
+		expect(next[0].children).toHaveLength(1)
+	})
+
+	it('enforces the 2-level depth cap when attempting to add children-of-a-child', async () => {
+		const wrapper = mountEditor([
+			{ id: 'parent', children: [{ id: 'child' }] },
+		])
+		// Try to set `children` on the child — must trigger depth-violation
+		// and the visible error paragraph; must NOT emit update:menu.
+		wrapper.vm.updateChildField(0, 0, 'children', [{ id: 'grandchild' }])
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('depth-violation')).toBeTruthy()
+		expect(wrapper.emitted('update:menu')).toBeUndefined()
+		expect(wrapper.find('.menu-tree-editor__error').exists()).toBe(true)
+		expect(wrapper.find('.menu-tree-editor__error').text()).toContain('Maximum nesting depth is two levels')
+	})
+
+	it('updateField clears the key when value is empty string', async () => {
+		const wrapper = mountEditor([{ id: 'inbox', label: 'inbox.label' }])
+		wrapper.vm.updateField(0, 'label', '')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:menu')[0][0]
+		expect(next[0]).not.toHaveProperty('label')
+	})
+
+	it('setting action clears route + href (mutex rule)', async () => {
+		const wrapper = mountEditor([
+			{ id: 'inbox', route: 'foo', href: '/bar' },
+		])
+		wrapper.vm.updateActionField(0, 'user-settings')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:menu')[0][0]
+		expect(next[0].action).toBe('user-settings')
+		expect(next[0]).not.toHaveProperty('route')
+		expect(next[0]).not.toHaveProperty('href')
+	})
+
+	it('clearing action restores the ability to set route/href', async () => {
+		const wrapper = mountEditor([
+			{ id: 'inbox', action: 'user-settings' },
+		])
+		wrapper.vm.updateActionField(0, '')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:menu')[0][0]
+		expect(next[0]).not.toHaveProperty('action')
+	})
+
+	it('removeChild deletes the children array when it becomes empty', async () => {
+		const wrapper = mountEditor([
+			{ id: 'parent', children: [{ id: 'only' }] },
+		])
+		wrapper.vm.removeChild(0, 0)
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:menu')[0][0]
+		expect(next[0]).not.toHaveProperty('children')
+	})
+
+	it('@update:menu fires on save when add+edit sequence completes', async () => {
+		// Compose: add entry -> edit id -> emits twice. Props do not update
+		// between emits (the parent owns state) so the second emission
+		// only carries the id mutation against the initial empty list.
+		const wrapper = mountEditor([])
+		await wrapper.find('.menu-tree-editor__add').trigger('click')
+		wrapper.vm.updateField(0, 'id', 'inbox')
+		await wrapper.vm.$nextTick()
+		const emissions = wrapper.emitted('update:menu')
+		expect(emissions).toHaveLength(2)
+		expect(emissions[0][0][0]).toMatchObject({ target: 'main' })
+		expect(emissions[1][0][0]).toMatchObject({ id: 'inbox' })
+	})
+})
diff --git a/tests/components/page-editor/PageListEditor.spec.js b/tests/components/page-editor/PageListEditor.spec.js
new file mode 100644
index 00000000..8e484c0b
--- /dev/null
+++ b/tests/components/page-editor/PageListEditor.spec.js
@@ -0,0 +1,180 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest spec for PageListEditor (REQ-OBPD-002).
+ *
+ * Covers:
+ *  - Empty-state render.
+ *  - "Add page" -> picker -> confirm flow emits `update:pages` with the
+ *    correct DEFAULT_CONFIGS shape per page-type.
+ *  - Unique-id constraint: duplicate ids surface the error paragraph and
+ *    flag the row with `--error` class.
+ *  - Route-pattern validation: invalid route surfaces the error paragraph;
+ *    a valid route (incl. `/:param` shape) passes.
+ *  - Delete fires `update:pages` minus the row and emits `select(-1)` when
+ *    the deleted row was selected.
+ *  - vuedraggable @input forwards a re-ordered array.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PageListEditor, { PAGE_TYPES } from '../../../src/components/page-editor/PageListEditor.vue'
+
+const stubDraggable = {
+	name: 'Draggable',
+	props: ['value', 'options'],
+	render(h) { return h('div', { staticClass: 'vuedraggable-stub' }, this.$slots.default) },
+}
+
+function mountEditor(pages = [], selectedIndex = -1) {
+	return mount(PageListEditor, {
+		propsData: { pages, selectedIndex },
+		stubs: { Draggable: stubDraggable },
+	})
+}
+
+describe('PageListEditor', () => {
+	it('renders the empty state with no pages', () => {
+		const wrapper = mountEditor([])
+		expect(wrapper.text()).toContain('No pages yet')
+	})
+
+	it('exports the canonical PAGE_TYPES enum (9 entries)', () => {
+		expect(PAGE_TYPES).toHaveLength(9)
+		expect(PAGE_TYPES).toContain('index')
+		expect(PAGE_TYPES).toContain('form')
+		expect(PAGE_TYPES).toContain('custom')
+	})
+
+	it('clicking Add reveals the type picker', async () => {
+		const wrapper = mountEditor([])
+		expect(wrapper.find('.page-list-editor__add-row').exists()).toBe(false)
+		await wrapper.find('.page-list-editor__add').trigger('click')
+		expect(wrapper.find('.page-list-editor__add-row').exists()).toBe(true)
+	})
+
+	it('confirmAdd appends a new page with the right DEFAULT_CONFIGS shape', async () => {
+		const wrapper = mountEditor([])
+		wrapper.vm.startAdd()
+		wrapper.vm.addingType = 'index'
+		wrapper.vm.confirmAdd()
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:pages')[0][0]
+		expect(next).toHaveLength(1)
+		expect(next[0].type).toBe('index')
+		expect(next[0].route).toBe('/')
+		expect(next[0].config).toMatchObject({ columns: [], actions: [] })
+		// select(0) follows the add.
+		expect(wrapper.emitted('select')[0][0]).toBe(0)
+	})
+
+	it('confirmAdd for form-type seeds submitMethod + mode defaults', async () => {
+		const wrapper = mountEditor([])
+		wrapper.vm.startAdd()
+		wrapper.vm.addingType = 'form'
+		wrapper.vm.confirmAdd()
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:pages')[0][0]
+		expect(next[0].type).toBe('form')
+		expect(next[0].config.submitMethod).toBe('POST')
+		expect(next[0].config.mode).toBe('public')
+	})
+
+	it('confirmAdd is a no-op when type is empty', () => {
+		const wrapper = mountEditor([])
+		wrapper.vm.startAdd()
+		wrapper.vm.addingType = ''
+		wrapper.vm.confirmAdd()
+		expect(wrapper.emitted('update:pages')).toBeUndefined()
+	})
+
+	it('flags duplicate ids and surfaces the error paragraph', async () => {
+		const wrapper = mountEditor([
+			{ id: 'home', type: 'index', route: '/' },
+			{ id: 'home', type: 'detail', route: '/foo' },
+		])
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.duplicateIds).toContain('home')
+		expect(wrapper.find('.page-list-editor__error').exists()).toBe(true)
+		expect(wrapper.find('.page-list-editor__error').text()).toContain('home')
+		expect(wrapper.findAll('.page-list-editor__row--error')).toHaveLength(2)
+	})
+
+	it('valid routes do NOT surface an error', () => {
+		const wrapper = mountEditor([
+			{ id: 'home', type: 'index', route: '/' },
+			{ id: 'detail', type: 'detail', route: '/items/:id' },
+			{ id: 'nested', type: 'detail', route: '/a/b/c-d_e' },
+		])
+		expect(wrapper.vm.invalidRoutes).toEqual([])
+	})
+
+	it('invalid routes surface the error paragraph', () => {
+		const wrapper = mountEditor([
+			{ id: 'broken', type: 'index', route: 'no-leading-slash' },
+		])
+		expect(wrapper.vm.invalidRoutes).toContain('no-leading-slash')
+	})
+
+	it('updateField clears the key when value is empty', async () => {
+		const wrapper = mountEditor([{ id: 'home', route: '/', type: 'index' }])
+		wrapper.vm.updateField(0, 'route', '')
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:pages')[0][0]
+		expect(next[0]).not.toHaveProperty('route')
+	})
+
+	it('removePage emits update:pages minus the deleted row', async () => {
+		const wrapper = mountEditor([
+			{ id: 'a', type: 'index' },
+			{ id: 'b', type: 'detail' },
+		])
+		wrapper.vm.removePage(0)
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:pages')[0][0]
+		expect(next).toHaveLength(1)
+		expect(next[0].id).toBe('b')
+	})
+
+	it('removePage of the selected row emits select(-1)', async () => {
+		const wrapper = mountEditor([
+			{ id: 'a', type: 'index' },
+		], 0)
+		wrapper.vm.removePage(0)
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('select')).toContainEqual([-1])
+	})
+
+	it('vuedraggable @input forwards re-ordered array', async () => {
+		const wrapper = mountEditor([
+			{ id: 'a', type: 'index' },
+			{ id: 'b', type: 'detail' },
+		])
+		wrapper.vm.onReorder([
+			{ id: 'b', type: 'detail' },
+			{ id: 'a', type: 'index' },
+		])
+		await wrapper.vm.$nextTick()
+		const next = wrapper.emitted('update:pages')[0][0]
+		expect(next.map((p) => p.id)).toEqual(['b', 'a'])
+	})
+
+	it('row click emits select(index)', async () => {
+		const wrapper = mountEditor([
+			{ id: 'a', type: 'index' },
+			{ id: 'b', type: 'detail' },
+		])
+		await wrapper.findAll('.page-list-editor__row').at(1).trigger('click')
+		expect(wrapper.emitted('select')[0][0]).toBe(1)
+	})
+
+	it('cancelAdd hides the picker without emitting', async () => {
+		const wrapper = mountEditor([])
+		wrapper.vm.startAdd()
+		wrapper.vm.cancelAdd()
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('.page-list-editor__add-row').exists()).toBe(false)
+		expect(wrapper.emitted('update:pages')).toBeUndefined()
+	})
+})
diff --git a/tests/composables/useLivePreview.spec.js b/tests/composables/useLivePreview.spec.js
new file mode 100644
index 00000000..fd09dc98
--- /dev/null
+++ b/tests/composables/useLivePreview.spec.js
@@ -0,0 +1,110 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest spec for `useLivePreview` composable.
+ *
+ * Covers REQ-OBPD-008 + tasks.md item 7.4:
+ *  - Arity-1 `useAppManifest` (legacy) => `available` flips to false.
+ *  - Arity-2 `useAppManifest` (chain spec #2) => `available` flips to true
+ *    and `previewProps(slug, manifest)` returns the prop bag.
+ *  - The returned `key` is stable for identical manifest content
+ *    (mitigates the "preview re-mount thrashes on every keystroke" risk
+ *    documented in design.md).
+ *  - `previewProps` returns null when the overload is unavailable
+ *    (graceful degradation).
+ *
+ * Each variant gets its own dynamic import + module reset so the
+ * feature-detect (`useAppManifest.length` at module-load time) runs
+ * against the current mock.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+describe('useLivePreview — graceful degradation (chain spec #2 NOT installed)', () => {
+	beforeEach(() => {
+		vi.resetModules()
+		vi.doMock('@conduction/nextcloud-vue', () => ({
+			// Legacy arity-1 shape — feature-detect returns false.
+			useAppManifest: function (_appId) { return { manifest: null } },
+		}))
+	})
+
+	it('available === false when useAppManifest.length === 1', async () => {
+		const { useLivePreview } = await import('../../src/composables/useLivePreview.js')
+		const lp = useLivePreview()
+		expect(lp.available.value).toBe(false)
+	})
+
+	it('previewProps returns null while degraded', async () => {
+		const { useLivePreview } = await import('../../src/composables/useLivePreview.js')
+		const lp = useLivePreview()
+		expect(lp.previewProps('hello-world', { pages: [] })).toBeNull()
+	})
+
+	it('exposes a stable shape (available + previewProps)', async () => {
+		const { useLivePreview } = await import('../../src/composables/useLivePreview.js')
+		const lp = useLivePreview()
+		expect(lp).toHaveProperty('available')
+		expect(typeof lp.previewProps).toBe('function')
+	})
+})
+
+describe('useLivePreview — chain spec #2 overload available', () => {
+	beforeEach(() => {
+		vi.resetModules()
+		vi.doMock('@conduction/nextcloud-vue', () => ({
+			// Arity-2 shape — bumped library export with manifestObject.
+			useAppManifest: function (_appId, _manifestObject) { return { manifest: null } },
+		}))
+	})
+
+	it('available === true when useAppManifest.length === 2', async () => {
+		const { useLivePreview } = await import('../../src/composables/useLivePreview.js')
+		const lp = useLivePreview()
+		expect(lp.available.value).toBe(true)
+	})
+
+	it('previewProps returns the sandbox prop bag', async () => {
+		const { useLivePreview } = await import('../../src/composables/useLivePreview.js')
+		const lp = useLivePreview()
+		const props = lp.previewProps('hello-world', { pages: [{ id: 'home' }] })
+		expect(props).not.toBeNull()
+		expect(props.appId).toBe('openbuilt-preview-hello-world')
+		expect(props.manifest).toEqual({ pages: [{ id: 'home' }] })
+		expect(typeof props.key).toBe('string')
+	})
+
+	it('key is stable for identical manifest content', async () => {
+		const { useLivePreview } = await import('../../src/composables/useLivePreview.js')
+		const lp = useLivePreview()
+		const a = lp.previewProps('app', { pages: [{ id: 'home', config: { register: 'r' } }] })
+		const b = lp.previewProps('app', { pages: [{ id: 'home', config: { register: 'r' } }] })
+		expect(a.key).toBe(b.key)
+	})
+
+	it('key changes when manifest content changes', async () => {
+		const { useLivePreview } = await import('../../src/composables/useLivePreview.js')
+		const lp = useLivePreview()
+		const a = lp.previewProps('app', { pages: [{ id: 'home' }] })
+		const b = lp.previewProps('app', { pages: [{ id: 'about' }] })
+		expect(a.key).not.toBe(b.key)
+	})
+})
+
+describe('useLivePreview — useAppManifest missing entirely', () => {
+	beforeEach(() => {
+		vi.resetModules()
+		vi.doMock('@conduction/nextcloud-vue', () => ({
+			// Library doesn't export the helper at all.
+			useAppManifest: undefined,
+		}))
+	})
+
+	it('feature-detect handles undefined export gracefully', async () => {
+		const { useLivePreview } = await import('../../src/composables/useLivePreview.js')
+		const lp = useLivePreview()
+		expect(lp.available.value).toBe(false)
+		expect(lp.previewProps('any', {})).toBeNull()
+	})
+})
diff --git a/tests/composables/useManifestValidator.spec.js b/tests/composables/useManifestValidator.spec.js
new file mode 100644
index 00000000..9fb4ca74
--- /dev/null
+++ b/tests/composables/useManifestValidator.spec.js
@@ -0,0 +1,162 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest spec for `useManifestValidator` composable.
+ *
+ * Covers REQ-OBPD-011 + tasks.md item 7.3:
+ *  - 300ms debounce coalesces rapid edits to a single validator call.
+ *  - validateManifest mock is invoked with the latest manifest.
+ *  - Valid manifest leaves `errors` empty and `hasErrors` false.
+ *  - Invalid manifest surfaces the returned `errors` array.
+ *  - Edge cases: validator throwing, validator absent, no errors array.
+ *  - `register` / `unregister` populate `errorsByPrefix` by longest match.
+ *  - Validator does NOT block the synchronous UI thread (returns
+ *    immediately; the timer fires async).
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+// `vi.mock` must be hoisted; the inner factory has access to the spy
+// via a top-level `vi.fn()` reference.
+const validateSpy = vi.fn(() => ({ valid: true, errors: [] }))
+vi.mock('@conduction/nextcloud-vue', () => ({
+	validateManifest: (...args) => validateSpy(...args),
+}))
+
+// Import AFTER vi.mock so the composable picks up the mocked export.
+const { useManifestValidator } = await import('../../src/composables/useManifestValidator.js')
+
+describe('useManifestValidator', () => {
+	beforeEach(() => {
+		vi.useFakeTimers()
+		validateSpy.mockReset()
+		validateSpy.mockImplementation(() => ({ valid: true, errors: [] }))
+	})
+
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	it('exposes the documented public surface', () => {
+		const v = useManifestValidator()
+		expect(v).toHaveProperty('errors')
+		expect(v).toHaveProperty('hasErrors')
+		expect(v).toHaveProperty('isValidating')
+		expect(v).toHaveProperty('validate')
+		expect(v).toHaveProperty('register')
+		expect(v).toHaveProperty('unregister')
+		expect(v).toHaveProperty('errorsByPrefix')
+		expect(v.DEBOUNCE_MS).toBe(300)
+	})
+
+	it('does NOT call validateManifest synchronously (UI thread stays free)', () => {
+		const v = useManifestValidator()
+		v.validate({ id: 'one' })
+		expect(validateSpy).not.toHaveBeenCalled()
+		expect(v.isValidating.value).toBe(true)
+	})
+
+	it('coalesces rapid edits to a single validator call', () => {
+		const v = useManifestValidator()
+		v.validate({ id: 'one' })
+		v.validate({ id: 'two' })
+		v.validate({ id: 'three' })
+		// All three fire inside the 300ms window — only the last one wins.
+		vi.advanceTimersByTime(299)
+		expect(validateSpy).not.toHaveBeenCalled()
+		vi.advanceTimersByTime(1)
+		expect(validateSpy).toHaveBeenCalledTimes(1)
+		expect(validateSpy).toHaveBeenLastCalledWith({ id: 'three' })
+	})
+
+	it('clears isValidating once the debounce settles', () => {
+		const v = useManifestValidator()
+		v.validate({ id: 'a' })
+		expect(v.isValidating.value).toBe(true)
+		vi.advanceTimersByTime(300)
+		expect(v.isValidating.value).toBe(false)
+	})
+
+	it('valid manifest leaves errors empty and hasErrors false', () => {
+		const v = useManifestValidator()
+		v.validate({ id: 'valid' })
+		vi.advanceTimersByTime(300)
+		expect(v.errors.value).toEqual([])
+		expect(v.hasErrors.value).toBe(false)
+	})
+
+	it('invalid manifest surfaces the returned errors array', () => {
+		validateSpy.mockImplementationOnce(() => ({
+			valid: false,
+			errors: ['/pages/0/id is required', '/pages/0/route must match pattern'],
+		}))
+		const v = useManifestValidator()
+		v.validate({ id: 'broken' })
+		vi.advanceTimersByTime(300)
+		expect(v.hasErrors.value).toBe(true)
+		expect(v.errors.value).toHaveLength(2)
+		expect(v.errors.value[0]).toContain('/pages/0/id')
+	})
+
+	it('handles validator throwing without crashing the composable', () => {
+		validateSpy.mockImplementationOnce(() => {
+			throw new Error('boom')
+		})
+		const v = useManifestValidator()
+		v.validate({ id: 'bad' })
+		vi.advanceTimersByTime(300)
+		expect(v.hasErrors.value).toBe(true)
+		expect(v.errors.value[0]).toContain('boom')
+	})
+
+	it('handles a result that omits the errors array', () => {
+		validateSpy.mockImplementationOnce(() => ({ valid: true }))
+		const v = useManifestValidator()
+		v.validate({ id: 'shapeless' })
+		vi.advanceTimersByTime(300)
+		expect(v.errors.value).toEqual([])
+	})
+
+	it('register / unregister populate errorsByPrefix by longest match', () => {
+		validateSpy.mockImplementationOnce(() => ({
+			valid: false,
+			errors: [
+				'/pages/0/id missing',
+				'/pages/0/config/columns/0/key invalid',
+				'/menu/2/label required',
+			],
+		}))
+		const v = useManifestValidator()
+		const fieldA = { markError: vi.fn(), clearError: vi.fn() }
+		const fieldB = { markError: vi.fn(), clearError: vi.fn() }
+		v.register('/pages/0', fieldA)
+		v.register('/pages/0/config/columns', fieldB)
+		v.validate({})
+		vi.advanceTimersByTime(300)
+
+		const map = v.errorsByPrefix.value
+		expect(map.has('/pages/0')).toBe(true)
+		expect(map.has('/pages/0/config/columns')).toBe(true)
+		expect(map.get('/pages/0/config/columns')).toHaveLength(1)
+		expect(map.get('/pages/0/config/columns')[0]).toContain('columns/0/key')
+
+		// Unregister + re-validate => prefix drops out of the map.
+		v.unregister('/pages/0/config/columns')
+		validateSpy.mockImplementationOnce(() => ({
+			valid: false,
+			errors: ['/pages/0/id missing'],
+		}))
+		v.validate({})
+		vi.advanceTimersByTime(300)
+		expect(v.errorsByPrefix.value.has('/pages/0/config/columns')).toBe(false)
+	})
+
+	it('edge case: empty manifest still triggers validation', () => {
+		const v = useManifestValidator()
+		v.validate({})
+		vi.advanceTimersByTime(300)
+		expect(validateSpy).toHaveBeenCalledTimes(1)
+		expect(validateSpy).toHaveBeenCalledWith({})
+	})
+})
diff --git a/tests/e2e/page-designer.spec.ts b/tests/e2e/page-designer.spec.ts
new file mode 100644
index 00000000..2b30c04a
--- /dev/null
+++ b/tests/e2e/page-designer.spec.ts
@@ -0,0 +1,131 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Playwright end-to-end coverage for openspec change `openbuilt-page-editor`.
+ *
+ * Implements tasks 7.5 (add-page → save → render) and the tab-roundtrip
+ * variant of 7.6 (Design ↔ Raw JSON parity). Task 7.6's "chain spec #2 not
+ * installed" affordance is covered indirectly: the seed env runs without
+ * chain spec #2, so the "Save & open preview" button is the rendered
+ * fallback in scenario 1.
+ *
+ * Requirements covered: REQ-OBPD-002, REQ-OBPD-003, REQ-OBPD-009, plus
+ * MODIFIED REQ-OBR-005 (tab default + edits survive tab switch).
+ *
+ * NOTE: Playwright binaries are NOT installed by `npm install`. Run
+ * `npm run test:e2e:install` once before invoking `npm run test:e2e`.
+ */
+
+import { test, expect, type Page } from '@playwright/test'
+
+const ADMIN_USER = process.env.NC_ADMIN_USER ?? 'admin'
+const ADMIN_PASS = process.env.NC_ADMIN_PASS ?? 'admin'
+
+/**
+ * Drive the Nextcloud login form. `httpCredentials` only covers HTTP basic
+ * auth on direct fetches — the UI itself requires a session cookie that we
+ * can only obtain via the login form.
+ */
+async function loginAsAdmin(page: Page): Promise<void> {
+	await page.goto('/index.php/login')
+	await page.locator('input[name="user"]').fill(ADMIN_USER)
+	await page.locator('input[name="password"]').fill(ADMIN_PASS)
+	await page.locator('button[type="submit"]').first().click()
+	// Wait for the global header that only renders on authenticated pages.
+	await page.waitForSelector('#header, header.header', { timeout: 20_000 })
+}
+
+test.describe('openbuilt page designer', () => {
+	test.beforeEach(async ({ page }) => {
+		await loginAsAdmin(page)
+	})
+
+	test('REQ-OBPD-002 + REQ-OBPD-003 + REQ-OBPD-009: add page → save → renders in builder', async ({ page }) => {
+		// Open the editor pre-focused on the Design tab (router alias from
+		// task 5.3 of the spec).
+		await page.goto('/index.php/apps/openbuilt/applications/hello-world/design')
+
+		// The application editor mounts asynchronously after the manifest
+		// fetch returns. Wait for the page-list pane to settle before
+		// driving the UI.
+		await page.waitForSelector('.page-designer__left', { timeout: 20_000 })
+
+		// REQ-OBR-005: Design tab is the default.
+		await expect(page.locator('.application-editor__tab--active')).toHaveText(/Design/i)
+
+		// Snapshot current page count so the post-add assertion is robust to
+		// hello-world seed drift.
+		const initialPageCount = await page.locator('.page-list__row, [data-test="page-row"]').count()
+
+		// Open the "Add page" affordance and pick the canonical type. The
+		// exact selector intentionally trades specificity for resilience to
+		// pre-MVP CSS class churn — we look for the visible "Add page"
+		// trigger first, fall back to a button matching the i18n string.
+		const addBtn = page.getByRole('button', { name: /add page/i }).first()
+		await addBtn.click()
+
+		// Pick the `index` type from the closed-enum picker (REQ-OBPD-002 —
+		// "Adding a page SHALL prompt for the page `type` from the canonical
+		// closed enum before any other field is shown").
+		await page.getByRole('option', { name: /index/i }).first().click()
+
+		// Fill required bindings — the IndexPageEditor needs register +
+		// schema before the manifest validator allows save.
+		await page.getByLabel(/register/i).first().fill('openbuilt')
+		await page.getByLabel(/schema/i).first().fill('hello-message')
+
+		// The new page row defaults to a placeholder id/route — set a known
+		// route so we can navigate to it below.
+		const routeInput = page.getByLabel(/route/i).first()
+		await routeInput.fill('/added-by-e2e')
+
+		// REQ-OBPD-009: Save flow validates first; the button is disabled
+		// while validator errors are open.
+		const saveBtn = page.getByRole('button', { name: /^save$/i }).first()
+		await expect(saveBtn).toBeEnabled({ timeout: 10_000 })
+		await saveBtn.click()
+
+		// Confirm the new page is reflected in the manifest. The page-list
+		// row count should have grown by one.
+		await expect(page.locator('.page-list__row, [data-test="page-row"]')).toHaveCount(initialPageCount + 1)
+
+		// REQ-OBPD-003: navigate to the built virtual app and assert the
+		// newly-added route renders inside the inner CnAppRoot mount.
+		await page.goto('/index.php/apps/openbuilt/builder/hello-world/added-by-e2e')
+		await expect(page.locator('#openbuilt-builder, .cn-app-root')).toBeVisible({ timeout: 15_000 })
+	})
+
+	test('REQ-OBR-005: edits survive a Design ↔ Raw JSON tab switch', async ({ page }) => {
+		await page.goto('/index.php/apps/openbuilt/applications/hello-world/design')
+		await page.waitForSelector('.page-designer__left', { timeout: 20_000 })
+
+		// Switch to the Raw JSON tab and mutate the manifest.
+		await page.getByRole('button', { name: /raw json/i }).click()
+
+		const textarea = page.locator('.application-editor__textarea')
+		await expect(textarea).toBeVisible()
+
+		// Read the current manifest, inject a marker page id, write it back.
+		const raw = await textarea.inputValue()
+		const manifest = JSON.parse(raw)
+		manifest.pages = Array.isArray(manifest.pages) ? manifest.pages : []
+		manifest.pages.push({
+			id: 'e2e-tab-roundtrip',
+			type: 'index',
+			route: '/e2e-tab-roundtrip',
+			config: { register: 'openbuilt', schema: 'hello-message' },
+		})
+		await textarea.fill(JSON.stringify(manifest, null, 2))
+
+		// Switch back to Design — the Pinia store is shared, so the new
+		// page must be visible in the left pane without saving.
+		await page.getByRole('button', { name: /^design$/i }).click()
+		await page.waitForSelector('.page-designer__left', { timeout: 10_000 })
+
+		await expect(page.getByText('e2e-tab-roundtrip').first()).toBeVisible({ timeout: 5_000 })
+
+		// The unsaved-edits banner from REQ-OBR-005 must also be visible.
+		await expect(page.locator('.application-editor__dirty')).toBeVisible()
+	})
+})
diff --git a/tests/integration/openbuilt-page-editor.postman_collection.json b/tests/integration/openbuilt-page-editor.postman_collection.json
new file mode 100644
index 00000000..02bb12bb
--- /dev/null
+++ b/tests/integration/openbuilt-page-editor.postman_collection.json
@@ -0,0 +1,233 @@
+{
+	"info": {
+		"_postman_id": "openbuilt-page-editor-collection",
+		"name": "OpenBuilt Page Editor Integration",
+		"description": "Newman/Postman coverage for openspec change `openbuilt-page-editor` (task 7 — integration). Drives the OR REST Application endpoint plus the openbuilt manifest endpoint to verify the editor's save flow round-trips correctly, the manifest endpoint reflects mutations, and invalid manifests are rejected with a 4xx. Designed to be idempotent: the final teardown step restores the hello-world manifest captured in the first request.",
+		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+	},
+	"auth": {
+		"type": "basic",
+		"basic": [
+			{ "key": "username", "value": "{{admin_user}}", "type": "string" },
+			{ "key": "password", "value": "{{admin_password}}", "type": "string" }
+		]
+	},
+	"variable": [
+		{ "key": "base_url", "value": "http://localhost:8080", "type": "string" },
+		{ "key": "admin_user", "value": "admin", "type": "string" },
+		{ "key": "admin_password", "value": "admin", "type": "string" }
+	],
+	"item": [
+		{
+			"name": "1. GET hello-world Application via OR REST",
+			"request": {
+				"method": "GET",
+				"header": [
+					{ "key": "OCS-APIRequest", "value": "true" },
+					{ "key": "Accept", "value": "application/json" }
+				],
+				"url": {
+					"raw": "{{base_url}}/index.php/apps/openregister/api/objects/openbuilt/application?_filter[slug]=hello-world&_limit=1",
+					"host": ["{{base_url}}"],
+					"path": ["index.php", "apps", "openregister", "api", "objects", "openbuilt", "application"],
+					"query": [
+						{ "key": "_filter[slug]", "value": "hello-world" },
+						{ "key": "_limit", "value": "1" }
+					]
+				},
+				"description": "Locate the seeded hello-world Application object and stash its UUID + original manifest for the mutating steps that follow."
+			},
+			"event": [
+				{
+					"listen": "test",
+					"script": {
+						"type": "text/javascript",
+						"exec": [
+							"pm.test('200 OK', function () { pm.response.to.have.status(200); });",
+							"const body = pm.response.json();",
+							"const results = body.results || body.data || body;",
+							"pm.test('hello-world Application is present', function () {",
+							"    pm.expect(Array.isArray(results) ? results.length : 1).to.be.greaterThan(0);",
+							"});",
+							"const app = Array.isArray(results) ? results[0] : results;",
+							"pm.expect(app, 'application object').to.be.an('object');",
+							"pm.collectionVariables.set('app_uuid', app.uuid || app.id);",
+							"pm.collectionVariables.set('original_manifest', JSON.stringify(app.manifest));",
+							"pm.collectionVariables.set('original_application', JSON.stringify(app));"
+						]
+					}
+				}
+			]
+		},
+		{
+			"name": "2. PUT hello-world with mutated manifest (add page) — 200",
+			"request": {
+				"method": "PUT",
+				"header": [
+					{ "key": "OCS-APIRequest", "value": "true" },
+					{ "key": "Content-Type", "value": "application/json" },
+					{ "key": "Accept", "value": "application/json" }
+				],
+				"url": {
+					"raw": "{{base_url}}/index.php/apps/openregister/api/objects/openbuilt/application/{{app_uuid}}",
+					"host": ["{{base_url}}"],
+					"path": ["index.php", "apps", "openregister", "api", "objects", "openbuilt", "application", "{{app_uuid}}"]
+				},
+				"body": {
+					"mode": "raw",
+					"raw": "{{mutated_body}}"
+				},
+				"description": "Append a new page to the manifest and PUT the full Application object back. The pre-request script clones the original Application, appends a marker page, and stores the serialised body in `mutated_body`."
+			},
+			"event": [
+				{
+					"listen": "prerequest",
+					"script": {
+						"type": "text/javascript",
+						"exec": [
+							"const original = JSON.parse(pm.collectionVariables.get('original_application'));",
+							"const mutated = JSON.parse(JSON.stringify(original));",
+							"mutated.manifest = mutated.manifest || { version: '0.1.0', menu: [], pages: [] };",
+							"mutated.manifest.pages = Array.isArray(mutated.manifest.pages) ? mutated.manifest.pages : [];",
+							"mutated.manifest.pages.push({",
+							"    id: 'newman-added',",
+							"    type: 'index',",
+							"    route: '/newman-added',",
+							"    config: { register: 'openbuilt', schema: 'hello-message' }",
+							"});",
+							"pm.collectionVariables.set('mutated_body', JSON.stringify(mutated));"
+						]
+					}
+				},
+				{
+					"listen": "test",
+					"script": {
+						"type": "text/javascript",
+						"exec": [
+							"pm.test('Save returns 200', function () { pm.response.to.have.status(200); });",
+							"const body = pm.response.json();",
+							"const saved = body.results || body.data || body;",
+							"pm.test('Saved manifest includes newman-added page', function () {",
+							"    const pages = (saved.manifest && saved.manifest.pages) || [];",
+							"    const ids = pages.map(function (p) { return p.id; });",
+							"    pm.expect(ids).to.include('newman-added');",
+							"});"
+						]
+					}
+				}
+			]
+		},
+		{
+			"name": "3. GET /api/applications/hello-world/manifest reflects new page",
+			"request": {
+				"method": "GET",
+				"header": [
+					{ "key": "OCS-APIRequest", "value": "true" },
+					{ "key": "Accept", "value": "application/json" }
+				],
+				"url": {
+					"raw": "{{base_url}}/index.php/apps/openbuilt/api/applications/hello-world/manifest",
+					"host": ["{{base_url}}"],
+					"path": ["index.php", "apps", "openbuilt", "api", "applications", "hello-world", "manifest"]
+				},
+				"description": "Cross-check that the openbuilt manifest endpoint serves the mutated manifest the runtime reads. Confirms the save flow + caching layer (if any) propagate correctly."
+			},
+			"event": [
+				{
+					"listen": "test",
+					"script": {
+						"type": "text/javascript",
+						"exec": [
+							"pm.test('Manifest endpoint returns 200', function () { pm.response.to.have.status(200); });",
+							"const manifest = pm.response.json();",
+							"pm.test('newman-added page is reflected', function () {",
+							"    const pages = (manifest && manifest.pages) || (manifest && manifest.data && manifest.data.pages) || [];",
+							"    const ids = pages.map(function (p) { return p.id; });",
+							"    pm.expect(ids).to.include('newman-added');",
+							"});"
+						]
+					}
+				}
+			]
+		},
+		{
+			"name": "4. PUT invalid manifest — assert 4xx",
+			"request": {
+				"method": "PUT",
+				"header": [
+					{ "key": "OCS-APIRequest", "value": "true" },
+					{ "key": "Content-Type", "value": "application/json" },
+					{ "key": "Accept", "value": "application/json" }
+				],
+				"url": {
+					"raw": "{{base_url}}/index.php/apps/openregister/api/objects/openbuilt/application/{{app_uuid}}",
+					"host": ["{{base_url}}"],
+					"path": ["index.php", "apps", "openregister", "api", "objects", "openbuilt", "application", "{{app_uuid}}"]
+				},
+				"body": {
+					"mode": "raw",
+					"raw": "{{invalid_body}}"
+				},
+				"description": "Send a manifest that omits the required `pages` array. OR's JSON Schema validation should reject the write with a 4xx status (REQ-OBPD-009 + MODIFIED REQ-OBR-005 — Invalid edit is blocked before save)."
+			},
+			"event": [
+				{
+					"listen": "prerequest",
+					"script": {
+						"type": "text/javascript",
+						"exec": [
+							"const original = JSON.parse(pm.collectionVariables.get('original_application'));",
+							"const invalid = JSON.parse(JSON.stringify(original));",
+							"// Drop the required `pages` array — manifest schema requires version+menu+pages.",
+							"invalid.manifest = { version: '0.1.0', menu: [] };",
+							"pm.collectionVariables.set('invalid_body', JSON.stringify(invalid));"
+						]
+					}
+				},
+				{
+					"listen": "test",
+					"script": {
+						"type": "text/javascript",
+						"exec": [
+							"pm.test('Invalid manifest is rejected with 4xx', function () {",
+							"    pm.expect(pm.response.code).to.be.within(400, 499);",
+							"});"
+						]
+					}
+				}
+			]
+		},
+		{
+			"name": "5. Teardown — restore original manifest",
+			"request": {
+				"method": "PUT",
+				"header": [
+					{ "key": "OCS-APIRequest", "value": "true" },
+					{ "key": "Content-Type", "value": "application/json" },
+					{ "key": "Accept", "value": "application/json" }
+				],
+				"url": {
+					"raw": "{{base_url}}/index.php/apps/openregister/api/objects/openbuilt/application/{{app_uuid}}",
+					"host": ["{{base_url}}"],
+					"path": ["index.php", "apps", "openregister", "api", "objects", "openbuilt", "application", "{{app_uuid}}"]
+				},
+				"body": {
+					"mode": "raw",
+					"raw": "{{original_application}}"
+				},
+				"description": "Restore the original hello-world Application body captured in step 1 so the suite is idempotent across reruns."
+			},
+			"event": [
+				{
+					"listen": "test",
+					"script": {
+						"type": "text/javascript",
+						"exec": [
+							"pm.test('Restore returns 200', function () { pm.response.to.have.status(200); });"
+						]
+					}
+				}
+			]
+		}
+	]
+}
diff --git a/tests/views/PageDesigner.spec.js b/tests/views/PageDesigner.spec.js
new file mode 100644
index 00000000..6a6652b8
--- /dev/null
+++ b/tests/views/PageDesigner.spec.js
@@ -0,0 +1,298 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest spec for PageDesigner (REQ-OBPD-003).
+ *
+ * Covers:
+ *  - Mount: three panes render (left list, centre editor, right errors).
+ *  - Page-type dispatcher picks the correct sub-editor for each `page.type`.
+ *  - Unknown / missing type falls back to StubPageEditor.
+ *  - selectedIndex switching updates the rendered sub-editor.
+ *  - update:config from a sub-editor mutates the right `pages[i].config`
+ *    and re-emits update:manifest.
+ *  - Validator side-panel reflects errors[] from useManifestValidator.
+ *  - canSaveAndPreview is false when slug is empty or errors exist.
+ *  - Raw-JSON fallback (StubPageEditor) preserves edits — i.e. when a
+ *    page-type is not in SUB_EDITOR_MAP, mounting still works and
+ *    update:config is still wired.
+ *  - Tabs / pane structure: aside.page-designer__left + section
+ *    page-designer__centre + aside.page-designer__right all present.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { ref, computed } from 'vue'
+
+// Mock both composables to keep the spec deterministic. Real refs are
+// required so Vue's template auto-unwrap sees them as ref-like.
+const validatorErrorsRef = ref([])
+const validatorStub = {
+	errors: validatorErrorsRef,
+	hasErrors: computed(() => validatorErrorsRef.value.length > 0),
+	isValidating: ref(false),
+	validate: vi.fn(),
+	register: vi.fn(),
+	unregister: vi.fn(),
+	errorsByPrefix: ref(new Map()),
+	DEBOUNCE_MS: 300,
+}
+vi.mock('../../src/composables/useManifestValidator.js', () => ({
+	useManifestValidator: () => validatorStub,
+}))
+
+const previewAvailableRef = ref(false)
+vi.mock('../../src/composables/useLivePreview.js', () => ({
+	useLivePreview: () => ({
+		available: previewAvailableRef,
+		previewProps: () => null,
+	}),
+}))
+
+// Stub the sub-editors so the dispatcher contract is observable without
+// dragging the whole picker + fields chain in.
+function stub(name) {
+	return {
+		default: {
+			name,
+			props: ['config', 'pageType', 'appSlug', 'parentRoute'],
+			render(h) { return h('div', { staticClass: `${name.toLowerCase()}-stub` }, name) },
+		},
+	}
+}
+vi.mock('../../src/components/page-editor/IndexPageEditor.vue', () => stub('IndexPageEditor'))
+vi.mock('../../src/components/page-editor/DetailPageEditor.vue', () => stub('DetailPageEditor'))
+vi.mock('../../src/components/page-editor/DashboardPageEditor.vue', () => stub('DashboardPageEditor'))
+vi.mock('../../src/components/page-editor/FormPageEditor.vue', () => stub('FormPageEditor'))
+vi.mock('../../src/components/page-editor/LogsPageEditor.vue', () => stub('LogsPageEditor'))
+vi.mock('../../src/components/page-editor/SettingsPageEditor.vue', () => stub('SettingsPageEditor'))
+vi.mock('../../src/components/page-editor/ChatPageEditor.vue', () => stub('ChatPageEditor'))
+vi.mock('../../src/components/page-editor/FilesPageEditor.vue', () => stub('FilesPageEditor'))
+vi.mock('../../src/components/page-editor/CustomPageEditor.vue', () => stub('CustomPageEditor'))
+vi.mock('../../src/components/page-editor/StubPageEditor.vue', () => stub('StubPageEditor'))
+
+// PageListEditor + MenuTreeEditor are stubbed so we can fire their
+// emitted events directly without rendering the whole tree.
+vi.mock('../../src/components/page-editor/PageListEditor.vue', () => ({
+	default: {
+		name: 'PageListEditor',
+		props: ['pages', 'selectedIndex'],
+		render(h) { return h('div', { staticClass: 'page-list-editor-stub' }) },
+	},
+}))
+vi.mock('../../src/components/page-editor/MenuTreeEditor.vue', () => ({
+	default: {
+		name: 'MenuTreeEditor',
+		props: ['menu'],
+		render(h) { return h('div', { staticClass: 'menu-tree-editor-stub' }) },
+	},
+}))
+
+const PageDesigner = (await import('../../src/views/PageDesigner.vue')).default
+
+function mountDesigner(manifest = { pages: [], menu: [] }, slug = 'hello-world') {
+	return mount(PageDesigner, {
+		propsData: { manifest, slug },
+	})
+}
+
+describe('PageDesigner', () => {
+	beforeEach(() => {
+		validatorErrorsRef.value = []
+		previewAvailableRef.value = false
+		validatorStub.validate.mockClear()
+	})
+
+	it('renders the three-pane layout', () => {
+		const wrapper = mountDesigner()
+		expect(wrapper.find('.page-designer__left').exists()).toBe(true)
+		expect(wrapper.find('.page-designer__centre').exists()).toBe(true)
+		expect(wrapper.find('.page-designer__right').exists()).toBe(true)
+	})
+
+	it('shows the empty state when no page is selected', () => {
+		const wrapper = mountDesigner({
+			pages: [{ id: 'a', type: 'index' }],
+			menu: [],
+		})
+		// selectedIndex starts at -1 — no sub-editor rendered.
+		expect(wrapper.find('.page-designer__empty').exists()).toBe(true)
+	})
+
+	it('dispatcher picks IndexPageEditor for type=index', async () => {
+		const wrapper = mountDesigner({
+			pages: [{ id: 'home', type: 'index', config: { register: 'r' } }],
+			menu: [],
+		})
+		wrapper.vm.selectPage(0)
+		await wrapper.vm.$nextTick()
+		expect(wrapper.findComponent({ name: 'IndexPageEditor' }).exists()).toBe(true)
+		expect(wrapper.findComponent({ name: 'FormPageEditor' }).exists()).toBe(false)
+	})
+
+	it('dispatcher picks FormPageEditor for type=form', async () => {
+		const wrapper = mountDesigner({
+			pages: [{ id: 'submit', type: 'form', config: {} }],
+			menu: [],
+		})
+		wrapper.vm.selectPage(0)
+		await wrapper.vm.$nextTick()
+		expect(wrapper.findComponent({ name: 'FormPageEditor' }).exists()).toBe(true)
+	})
+
+	it('dispatcher picks DashboardPageEditor for type=dashboard', async () => {
+		const wrapper = mountDesigner({
+			pages: [{ id: 'd', type: 'dashboard', config: {} }],
+			menu: [],
+		})
+		wrapper.vm.selectPage(0)
+		await wrapper.vm.$nextTick()
+		expect(wrapper.findComponent({ name: 'DashboardPageEditor' }).exists()).toBe(true)
+	})
+
+	it('unknown page.type falls back to StubPageEditor (raw-JSON preserves edits)', async () => {
+		const wrapper = mountDesigner({
+			pages: [{ id: 'x', type: 'unknown-future-type', config: { foo: 'bar' } }],
+			menu: [],
+		})
+		wrapper.vm.selectPage(0)
+		await wrapper.vm.$nextTick()
+		expect(wrapper.findComponent({ name: 'StubPageEditor' }).exists()).toBe(true)
+		// The fallback must receive the same `config` prop so unsupported
+		// fields survive a round-trip via the raw-JSON editor.
+		const stubInstance = wrapper.findComponent({ name: 'StubPageEditor' })
+		expect(stubInstance.props('config')).toEqual({ foo: 'bar' })
+		expect(stubInstance.props('pageType')).toBe('unknown-future-type')
+	})
+
+	it('subEditorFor maps every documented page type', () => {
+		const wrapper = mountDesigner()
+		const mapping = {
+			index: 'IndexPageEditor',
+			detail: 'DetailPageEditor',
+			dashboard: 'DashboardPageEditor',
+			form: 'FormPageEditor',
+			logs: 'LogsPageEditor',
+			settings: 'SettingsPageEditor',
+			chat: 'ChatPageEditor',
+			files: 'FilesPageEditor',
+			custom: 'CustomPageEditor',
+		}
+		for (const [type, expected] of Object.entries(mapping)) {
+			expect(wrapper.vm.subEditorFor(type)).toBe(expected)
+		}
+		expect(wrapper.vm.subEditorFor('mystery')).toBe('StubPageEditor')
+	})
+
+	it('switching selectedIndex updates the rendered sub-editor', async () => {
+		const wrapper = mountDesigner({
+			pages: [
+				{ id: 'a', type: 'index', config: {} },
+				{ id: 'b', type: 'form', config: {} },
+			],
+			menu: [],
+		})
+		wrapper.vm.selectPage(0)
+		await wrapper.vm.$nextTick()
+		expect(wrapper.findComponent({ name: 'IndexPageEditor' }).exists()).toBe(true)
+		wrapper.vm.selectPage(1)
+		await wrapper.vm.$nextTick()
+		expect(wrapper.findComponent({ name: 'FormPageEditor' }).exists()).toBe(true)
+	})
+
+	it('onConfigUpdate mutates the correct pages[i].config and re-emits manifest', async () => {
+		const wrapper = mountDesigner({
+			pages: [
+				{ id: 'a', type: 'index', config: { register: 'r1' } },
+				{ id: 'b', type: 'form', config: {} },
+			],
+			menu: [],
+		})
+		wrapper.vm.selectPage(0)
+		await wrapper.vm.$nextTick()
+		wrapper.vm.onConfigUpdate({ register: 'r2', schema: 's2' })
+		await wrapper.vm.$nextTick()
+		const emitted = wrapper.emitted('update:manifest')
+		expect(emitted).toBeTruthy()
+		const next = emitted[emitted.length - 1][0]
+		expect(next.pages[0].config).toEqual({ register: 'r2', schema: 's2' })
+		expect(next.pages[1].config).toEqual({})
+	})
+
+	it('onConfigUpdate is a no-op when nothing is selected', () => {
+		const wrapper = mountDesigner({
+			pages: [{ id: 'a', type: 'index' }],
+			menu: [],
+		})
+		// selectedIndex defaults to -1.
+		wrapper.vm.onConfigUpdate({ register: 'r' })
+		// The deep manifest watcher fires once on mount; no NEW update:manifest
+		// emit should occur from the no-op onConfigUpdate call.
+		const emissions = wrapper.emitted('update:manifest') || []
+		expect(emissions).toHaveLength(0)
+	})
+
+	it('onMenuUpdate re-emits manifest with the new menu and clears depthError', async () => {
+		const wrapper = mountDesigner({ pages: [], menu: [] })
+		wrapper.vm.depthError = true
+		wrapper.vm.onMenuUpdate([{ id: 'inbox', label: 'inbox.label' }])
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.depthError).toBe(false)
+		const next = wrapper.emitted('update:manifest').pop()[0]
+		expect(next.menu).toHaveLength(1)
+	})
+
+	it('onDepthViolation surfaces the warning paragraph', async () => {
+		const wrapper = mountDesigner({ pages: [], menu: [] })
+		wrapper.vm.onDepthViolation()
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.depthError).toBe(true)
+		expect(wrapper.find('[role="alert"]').exists()).toBe(true)
+	})
+
+	it('renders validator errors in the right side panel', async () => {
+		validatorErrorsRef.value = ['/pages/0/id is required']
+		const wrapper = mountDesigner()
+		await wrapper.vm.$nextTick()
+		const list = wrapper.find('.page-designer__error-list')
+		expect(list.exists()).toBe(true)
+		expect(list.text()).toContain('/pages/0/id is required')
+	})
+
+	it('canSaveAndPreview is false when slug is missing', () => {
+		const wrapper = mountDesigner({ pages: [], menu: [] }, '')
+		expect(wrapper.vm.canSaveAndPreview).toBe(false)
+	})
+
+	it('canSaveAndPreview is false when validator reports errors', () => {
+		validatorErrorsRef.value = ['something is wrong']
+		const wrapper = mountDesigner({ pages: [], menu: [] }, 'hello-world')
+		expect(wrapper.vm.canSaveAndPreview).toBe(false)
+	})
+
+	it('canSaveAndPreview is true when slug set and no errors', () => {
+		const wrapper = mountDesigner({ pages: [], menu: [] }, 'hello-world')
+		expect(wrapper.vm.canSaveAndPreview).toBe(true)
+	})
+
+	it('Save & preview button emits save-and-preview', async () => {
+		const wrapper = mountDesigner({ pages: [], menu: [] }, 'hello-world')
+		await wrapper.find('.page-designer__preview-btn').trigger('click')
+		expect(wrapper.emitted('save-and-preview')).toBeTruthy()
+	})
+
+	it('preview fallback panel renders when chain spec #2 is unavailable', () => {
+		const wrapper = mountDesigner()
+		expect(wrapper.find('.page-designer__preview-fallback').exists()).toBe(true)
+	})
+
+	it('triggers validator.validate on manifest changes (deep + immediate)', async () => {
+		const validateSpy = validatorStub.validate
+		validateSpy.mockClear()
+		const wrapper = mountDesigner({ pages: [], menu: [] })
+		expect(validateSpy).toHaveBeenCalledTimes(1)
+		wrapper.setProps({ manifest: { pages: [{ id: 'home', type: 'index' }], menu: [] } })
+		await wrapper.vm.$nextTick()
+		expect(validateSpy).toHaveBeenCalledTimes(2)
+	})
+})
diff --git a/tests/vitest/stubs/conduction-nextcloud-vue.js b/tests/vitest/stubs/conduction-nextcloud-vue.js
index f7038c94..20537308 100644
--- a/tests/vitest/stubs/conduction-nextcloud-vue.js
+++ b/tests/vitest/stubs/conduction-nextcloud-vue.js
@@ -72,6 +72,19 @@ export function validateManifest() {
 	return { valid: true, errors: [] }
 }
 
+/**
+ * Legacy arity-1 stand-in for `useAppManifest`. Chain spec #2 ships an
+ * arity-2 overload `(appId, bundledManifest)`; `useLivePreview.js` uses
+ * the function arity as the discriminator, so an arity-1 stub here keeps
+ * the default "preview unavailable" path active. Tests that need the
+ * arity-2 shape swap this out via `vi.mock(...)`.
+ *
+ * @return {{manifest: null, loading: boolean}}
+ */
+export function useAppManifest(_appId) {
+	return { manifest: null, loading: false }
+}
+
 export default {
 	NcModal,
 	NcDialog,
@@ -90,4 +103,5 @@ export default {
 	registerIcons,
 	registerTranslations,
 	validateManifest,
+	useAppManifest,
 }
diff --git a/tests/vitest/stubs/nextcloud-auth.js b/tests/vitest/stubs/nextcloud-auth.js
new file mode 100644
index 00000000..f4395127
--- /dev/null
+++ b/tests/vitest/stubs/nextcloud-auth.js
@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest stub for `@nextcloud/auth`.
+ *
+ * The real implementation reads `<head>` <meta requesttoken="..."> and a
+ * `oc_session_passphrase` cookie; jsdom doesn't have either. The stub
+ * returns a deterministic token so tests can assert request headers.
+ */
+
+export const getRequestToken = () => 'test-request-token'
+export const getCurrentUser = () => ({ uid: 'test-admin', displayName: 'Test Admin', isAdmin: true })
diff --git a/tests/vitest/stubs/nextcloud-router.js b/tests/vitest/stubs/nextcloud-router.js
new file mode 100644
index 00000000..8c57b853
--- /dev/null
+++ b/tests/vitest/stubs/nextcloud-router.js
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest stub for `@nextcloud/router`.
+ *
+ * `generateUrl(path)` consults `OC.config.basename` and `OC.appswebroots`
+ * at runtime; neither exists under jsdom. The stub returns a stable
+ * `/index.php/...` prefix so tests can assert against the resulting URL
+ * without depending on global setup.
+ */
+
+export const generateUrl = (path) => `/index.php${path.startsWith('/') ? '' : '/'}${path}`
+export const generateOcsUrl = (path) => `/ocs/v2.php${path.startsWith('/') ? '' : '/'}${path}`
+export const generateRemoteUrl = (path) => `/remote.php${path.startsWith('/') ? '' : '/'}${path}`
+export const getRootUrl = () => ''
+export const linkTo = (app, file) => `/apps/${app}/${file}`
+export const imagePath = (app, file) => `/apps/${app}/img/${file}`
diff --git a/tests/vitest/stubs/vuedraggable.js b/tests/vitest/stubs/vuedraggable.js
new file mode 100644
index 00000000..de9b8fac
--- /dev/null
+++ b/tests/vitest/stubs/vuedraggable.js
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2026 OpenBuilt Contributors
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Vitest stub for `vuedraggable`.
+ *
+ * Real vuedraggable uses SortableJS internally and assumes a live DOM
+ * with mouse-event handlers — neither survives the jsdom unit-test
+ * environment. The stub renders children inline (via the default slot)
+ * and forwards `:value` to a `value` prop without ever wiring drag
+ * behaviour. Specs that need to assert reorder semantics emit an
+ * `@input` event on the rendered stub directly via `wrapper.vm.$emit`.
+ */
+
+export default {
+	name: 'Draggable',
+	props: {
+		value: { type: Array, default: () => [] },
+		options: { type: Object, default: () => ({}) },
+	},
+	render(h) {
+		return h('div', { staticClass: 'vuedraggable-stub' }, this.$slots.default)
+	},
+}
diff --git a/vitest.config.js b/vitest.config.js
index 2fcc4515..907b23f4 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -65,6 +65,7 @@ module.exports = {
 					/vue-select/,
 					/vue-multiselect/,
 					/floating-vue/,
+					/vuedraggable/,
 				],
 			},
 		},
@@ -76,6 +77,14 @@ module.exports = {
 				find: /^@conduction\/nextcloud-vue$/,
 				replacement: path.resolve(__dirname, 'tests/vitest/stubs/conduction-nextcloud-vue.js'),
 			},
+			// vuedraggable uses SortableJS + a live DOM that jsdom can't
+			// satisfy; the page-list / menu-tree specs mock it per-test
+			// where reorder semantics matter, so the default alias is a
+			// passthrough stub that just renders the default slot.
+			{
+				find: /^vuedraggable$/,
+				replacement: path.resolve(__dirname, 'tests/vitest/stubs/vuedraggable.js'),
+			},
 		],
 	},
 }