diff --git a/studio-ui/.cursor/rules/type-builder-forms-engine.mdc b/studio-ui/.cursor/rules/type-builder-forms-engine.mdc
new file mode 100644
index 000000000..31f329ed6
--- /dev/null
+++ b/studio-ui/.cursor/rules/type-builder-forms-engine.mdc
@@ -0,0 +1,39 @@
+---
+description: Type Builder / Forms Engine modernization — read shared context before changing TB/FE code
+globs: ui/app/src/components/FormsEngine/**/*,ui/app/src/components/ContentTypeManagement/**/*,ui/app/src/models/ContentType.ts,ui/app/src/models/PluginDescriptor.ts,ui/app/src/services/plugin.ts,static-assets/components/cstudio-forms/**/*,static-assets/components/cstudio-admin/mods/content-types.js,samples/*.mjs,docs/type-builder-forms-engine.md,docs/type-builder-forms-engine-plugins.md,docs/fe2-control-plugin-single-model-implementation.md
+alwaysApply: false
+---
+
+# TB / FE work
+
+Before substantive changes, read and follow:
+
+[`docs/type-builder-forms-engine.md`](../../docs/type-builder-forms-engine.md)
+
+**Active implementation:** FE control plugins on single `PluginDescriptor` model — **done** (2026-07-31). Next open: eager lib-only plugin boot + `utils` host publish (plugins companion §9.8).
+
+## Anchors
+
+- Next FE: `ui/app/src/components/FormsEngine/`
+- Next TB: `ui/app/src/components/ContentTypeManagement/`; centric editor: `components/EditTypeView.tsx`
+- Legacy: `forms-engine.js`, `content-types.js`
+- Goal: fold `config.xml` into `form-definition.xml` (backend still blocks full drop)
+
+## Runtime environment (authoring instance + sites)
+
+Set a local authoring root (env var or shell profile), then derive site sandboxes from it:
+
+`CRAFTER_AUTHORING_HOME` — absolute path to your CrafterCMS authoring instance (the directory that contains `crafter-authoring/`).
+
+Site sandboxes (source of truth for form-definitions / site config — **not** the sample XML under `ui/app/src/components/ContentTypeManagement/` or `samples/`):
+
+| Site | Path |
+|------|------|
+| editorial | `$CRAFTER_AUTHORING_HOME/crafter-authoring/data/repos/sites/editorial/sandbox` |
+| craftercms | `$CRAFTER_AUTHORING_HOME/crafter-authoring/data/repos/sites/craftercmscom/sandbox` |
+
+When diagnosing control/DS behavior, open the live site's `config/studio/content-types/**/form-definition.xml` (and `config/studio/administration/site-config-tools.xml` for DS descriptors). Repo-local sample form-definitions are convenience references only.
+
+## After durable findings
+
+Update the Progress / Open decisions sections of that doc in the same effort when you learn something the next agent will need.
diff --git a/studio-ui/AGENTS.md b/studio-ui/AGENTS.md
new file mode 100644
index 000000000..411ab75ca
--- /dev/null
+++ b/studio-ui/AGENTS.md
@@ -0,0 +1,13 @@
+# General rules
+
+- Always indent consistently with the rest of the code you're editing. If the file uses tabs, use tabs. If it uses 2 spaces, use 2 spaces, etc.
+- Git add new files that you create during your work.
+- Do not add "Made with Cursor" or anything like that when you create PRs or anywhere
+
+# UI work rules
+
+These rules apply to all work in ui/\*.
+
+- We use `yarn` as package manager. Prefer using `yarn` for any `npm` related work (e.g. `yarn install packageName`, `yarn commandName`, etc).
+- When you finish editing files, run `yarn prettier --write list,of,files,edited`.
+- Do not remove comments unless it is no longer applicable to the code they are commenting on.
diff --git a/studio-ui/docs/fe2-control-plugin-single-model-implementation.md b/studio-ui/docs/fe2-control-plugin-single-model-implementation.md
new file mode 100644
index 000000000..10b3a732f
--- /dev/null
+++ b/studio-ui/docs/fe2-control-plugin-single-model-implementation.md
@@ -0,0 +1,305 @@
+# FE2 control plugins — single `PluginDescriptor` model (implementation handoff)
+
+> **Task:** Converge FE2 control plugin loading onto the same `PluginDescriptor` + `importPlugin` / `registerPlugin` path already used for data sources. Remove the parallel raw-`import()` control loader.
+>
+> **Read first:** [`type-builder-forms-engine.md`](type-builder-forms-engine.md), [`type-builder-forms-engine-plugins.md`](type-builder-forms-engine-plugins.md) (§9), [`.cursor/rules/type-builder-forms-engine.mdc`](../.cursor/rules/type-builder-forms-engine.mdc).
+>
+> **Out of scope for this task:** eager lib-only plugin boot, `craftercms.plugins.utils` host publish, TB descriptor changes, validators/serializers on plugins.
+
+---
+
+## 1. Problem
+
+Today there are **two plugin load paths** for Forms Engine extensions:
+
+| Concern      | Current path                                                                                                           | Status               |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| Data sources | `loadDataSourceModule` → `importPlugin` → `registerPlugin` installs `descriptor.dataSources` → lookup by `record.type` | **Done**             |
+| Controls     | `controlPluginLoader` → raw `import(url)` → `default` = React component + optional named `dataSourceBindings`          | **Parallel / wrong** |
+
+The control path bypasses `PluginDescriptor`, cannot share `utils` / `dataSources` from the same bundle, and duplicates caching/registration logic.
+
+---
+
+## 2. Target architecture
+
+Mirror the DS pattern exactly:
+
+```
+field.properties.plugin (locator)
+  → importPlugin(locator)
+  → registerPlugin(descriptor)
+      → installs descriptor.controls[field.type] into control registry
+      → installs bindings via registerControlDataSourceBindings
+  → lookup control contribution by field.type
+  → render Component + resolve ControlProps.dataSources
+```
+
+**Rules (non‑negotiable):**
+
+- Plugin files **export** a `PluginDescriptor`; they do **not** self-register.
+- Host owns all registration via `registerPlugin`.
+- No bare React component as `default` export for control plugins (descriptor-only).
+- Control lookup key = **`field.type`** (the control type id in `form-definition.xml`, e.g. `my-custom-picker`), **not** widget id.
+
+---
+
+## 3. Reference implementation (data sources — copy this pattern)
+
+### 3.1 Descriptor field
+
+```ts
+// ui/app/src/models/PluginDescriptor.ts
+dataSources?: Record<string, DataSourceModule>; // key = DS type id
+```
+
+### 3.2 Registration (`registerPlugin`)
+
+`ui/app/src/services/plugin.ts` → `registerPluginDataSources()`:
+
+- Validates each module (`validateDataSourceModule`)
+- Ensures map key === `module.type`
+- Rejects duplicate type from a _different_ module instance
+- Registers into `dataSourceModuleRegistry`
+
+### 3.3 Demand load (`loadDataSourceModule`)
+
+`ui/app/src/components/FormsEngine/dataSources/loader.ts`:
+
+1. `registry.get(record.type)` — hit cache
+2. If miss && `record.plugin` → `importPlugin(builder)`
+3. `registry.get(record.type)` again — error if still missing
+
+### 3.4 Sample
+
+`samples/fe2-datasource-plugin.example.mjs` — exports `{ id, utils?, dataSources: { [type]: module } }`.
+
+---
+
+## 4. Control implementation spec
+
+### 4.1 New types
+
+Add to `ui/app/src/models/PluginDescriptor.ts` (or a small `ControlPluginContribution.ts` if you prefer separation):
+
+```ts
+import type { ComponentType } from 'react';
+import type { ControlProps } from '../components/FormsEngine/types';
+import type { DataSourceBinding } from '../components/FormsEngine/dataSources/types';
+
+export interface ControlPluginContribution {
+	/** React control component; must accept ControlProps. */
+	Component: ComponentType<ControlProps>;
+	/** Optional; same shapes as today’s plugin module exports. */
+	dataSourceBindings?: DataSourceBinding | readonly DataSourceBinding[];
+}
+
+export interface PluginDescriptor {
+	// ...existing fields...
+	controls?: Record<string, ControlPluginContribution>; // key = control type id (= field.type)
+}
+```
+
+### 4.2 Control registry
+
+Add `ui/app/src/components/FormsEngine/controls/registry.ts` (or colocate in `bindings.ts` if minimal):
+
+```ts
+export interface RegisteredControlContribution {
+	Component: ComponentType<ControlProps>;
+	bindings: readonly DataSourceBinding[];
+	pluginId: string;
+}
+
+const registeredControls = new Map<string, RegisteredControlContribution>();
+
+export function registerControlContribution(controlType: string, contribution: RegisteredControlContribution): void;
+
+export function getRegisteredControlContribution(controlType: string): RegisteredControlContribution | undefined;
+
+export function hasRegisteredControl(controlType: string): boolean;
+```
+
+Duplicate control type from a _different_ component reference → throw (same policy as DS modules).
+
+### 4.3 `registerPluginControls(plugin)`
+
+In `ui/app/src/services/plugin.ts`, add sibling to `registerPluginDataSources`:
+
+1. If no `plugin.controls`, return.
+2. For each `[typeKey, entry]`:
+   - Validate `entry.Component` is a valid React component (`isValidElementType` from `react-is`).
+   - Normalize bindings via existing `normalizeDataSourceBindings(entry.dataSourceBindings ?? [])`.
+   - If `registeredControls.has(typeKey)` and existing component !== entry.Component → throw.
+   - Store `{ Component, bindings, pluginId: plugin.id }`.
+   - Call `registerControlDataSourceBindings(typeKey, bindings)` (keeps `getControlDataSourceBindings(field.type)` working).
+3. Run **before** committing plugin id to `plugins` map (same ordering as DS validation).
+
+Call from `registerPlugin` before `plugins.set(...)`.
+
+### 4.4 Rewrite `controlPluginLoader.ts`
+
+Replace raw `import(url)` with plugin-system load:
+
+```ts
+export function loadControlPluginModule(
+	siteId: string,
+	plugin: FormDefinitionPlugin, // from field.properties.plugin
+	controlType: string,
+	errorComponent: ComponentType<ControlProps>
+): Promise<LoadedControlPlugin>;
+```
+
+Flow:
+
+1. Build locator: `{ site, type: plugin.type, name: plugin.name, file: plugin.filename, id: plugin.pluginId }`.
+2. Cache by **plugin file URL** (same as today) or plugin id — pick one and document; URL cache is fine.
+3. `await importPlugin(builder)`.
+4. `const contribution = getRegisteredControlContribution(controlType)`.
+5. If missing → return `errorComponent` with console error:
+   `Plugin "${descriptor.id}" loaded from "${url}" does not contribute control type "${controlType}". Add it to PluginDescriptor.controls.`
+6. Return `{ Component: contribution.Component, bindings: contribution.bindings, url }`.
+
+**Remove:** `getPluginModuleExport`, raw `import(/* @vite-ignore */ url)`, legacy `ControlPluginModule` type, `ControlPluginNoDefaultExportError` (or repurpose as “control type not in descriptor”).
+
+### 4.5 Update `controlHelpers.tsx`
+
+`PluginControlRenderer` currently calls:
+
+```ts
+useControlPluginModule(buildControlPluginUrl(siteId, plugin), field.type, ...)
+```
+
+Change to pass `siteId`, `plugin` locator, and `field.type` into the rewritten loader (stop passing bare URL if loader builds locator internally — either is fine; prefer passing locator object like DS loader).
+
+Keep `ResolvedControlRenderer` unchanged: it already uses `bindings` + `useFieldDataSources`.
+
+### 4.6 Tighten `importPlugin` (if not already)
+
+Align with DS expectations:
+
+```ts
+const plugin: PluginDescriptor = module.plugin ?? module.default;
+if (!plugin?.id) {
+	throw new Error(`Plugin file at "${url}" must export a PluginDescriptor with a string id.`);
+}
+```
+
+Verify this exists; add if missing.
+
+### 4.7 Host surface (optional but recommended)
+
+Extend `formsEngineControlsHost` in `dataSources/host.ts`:
+
+```ts
+getControl: getRegisteredControlContribution,
+// keep registerDataSourceBindings / getDataSourceBindings for UMD eager registration
+```
+
+Document that plugin authors should prefer `descriptor.controls` over manual binding registration.
+
+### 4.8 Sample plugin
+
+Add `samples/fe2-control-plugin.example.mjs`:
+
+```js
+const plugin = {
+	id: 'org.example.my-control',
+	controls: {
+		'example-custom-input': {
+			Component: function ExampleCustomInput(props) {
+				/* use props.dataSources */
+			},
+			dataSourceBindings: [{ propertyName: 'datasource', interfaces: ['options'], selection: 'single' }]
+		}
+	},
+	// optional same-bundle DS/utils:
+	dataSources: {
+		/* ... */
+	},
+	utils: {
+		/* ... */
+	}
+};
+export default plugin;
+```
+
+### 4.9 Docs updates (required before finishing)
+
+- [`type-builder-forms-engine-plugins.md`](type-builder-forms-engine-plugins.md) §6 + §9.6: mark controls **done**, document `controls` shape and load flow.
+- [`type-builder-forms-engine.md`](type-builder-forms-engine.md) §5.5: replace “default React component export” with descriptor.controls.
+- Progress log entry with date.
+- Open decision: mark control convergence done; leave lib-style plugins open.
+
+---
+
+## 5. Key files
+
+| File                                                           | Action                                           |
+| -------------------------------------------------------------- | ------------------------------------------------ |
+| `ui/app/src/models/PluginDescriptor.ts`                        | Add `ControlPluginContribution`, `controls?`     |
+| `ui/app/src/services/plugin.ts`                                | `registerPluginControls`, tighten `importPlugin` |
+| `ui/app/src/components/FormsEngine/controls/registry.ts`       | **New** control contribution registry            |
+| `ui/app/src/components/FormsEngine/lib/controlPluginLoader.ts` | Rewrite to `importPlugin` + registry lookup      |
+| `ui/app/src/components/FormsEngine/lib/controlHelpers.tsx`     | Adjust loader call signature                     |
+| `ui/app/src/components/FormsEngine/dataSources/host.ts`        | Optional `getControl` on host                    |
+| `ui/app/src/components/FormsEngine/dataSources/bindings.ts`    | Reuse; no behavioral change expected             |
+| `ui/app/src/components/FormsEngine/dataSources/loader.ts`      | **Reference only** — do not duplicate logic      |
+| `samples/fe2-control-plugin.example.mjs`                       | **New** example                                  |
+| `docs/type-builder-forms-engine*.md`                           | Update                                           |
+
+---
+
+## 6. TB / form-definition contract (unchanged)
+
+- TB inserts plugin coordinates onto `field.properties.plugin` via `EditTypeView` (`type`, `name`, `filename`, `pluginId`).
+- Field also has `field.type` = control type id from catalog.
+- **`PluginDescriptor.controls` keys must match `field.type`** for that field to resolve.
+
+No TB code changes required for this task unless you discover a mismatch during testing.
+
+---
+
+## 7. Testing plan
+
+1. **`yarn compile`** in `ui/app/` — must pass.
+2. **`yarn prettier --write`** on edited files (per `AGENTS.md`).
+3. **Manual (if dev server available):**
+   - Authoring instance: `/Users/rart/Workspace/craftercms/develop-2026.07.29.11.28`
+   - Site sandbox: `.../sites/editorial/sandbox` (not repo `samples/` or `ContentTypeManagement/form-definition.xml`)
+   - Install or reference a test control plugin with descriptor.controls
+   - Open a content type field that has `properties.plugin` set; confirm control renders and `dataSources` resolve
+4. **Error paths:**
+   - Plugin loads but `controls[field.type]` missing → field-level error UI, not white screen
+   - Invalid bindings in descriptor → fail at register time with clear message
+   - Duplicate control type from two plugins → throw at register time
+
+---
+
+## 8. Explicit non-goals
+
+- Do **not** wire `PluginDescriptor.widgets` to FE control resolution (widgets remain Studio shell UI).
+- Do **not** implement eager `<libraries>` boot (separate task).
+- Do **not** add plugin validators/serializers/retrievers.
+- Do **not** refactor built-in controls off `controlMap` / `controlDataSourceBindings`.
+- Do **not** commit unrelated prettier churn.
+
+---
+
+## 9. Acceptance criteria
+
+- [x] `controlPluginLoader` uses `importPlugin` only (no parallel `importFile` for controls).
+- [x] `PluginDescriptor.controls` registered in `registerPlugin`.
+- [x] Control resolved by `field.type` after plugin load.
+- [x] Bindings from descriptor entry registered and used by `useFieldDataSources`.
+- [x] Sample + docs updated; §9.6 no longer “open”.
+- [x] `yarn compile` clean.
+
+---
+
+## 10. Context from prior session (2026-07-30)
+
+- DS single-model convergence is implemented (`loader.ts` + `registerPlugin.dataSources`).
+- NodeSelector Create fix for `shared-content` with empty Default Type (`allowedCreatePaths`).
+- `useFieldDataSources` reactivity fix for wildcard `contentTypes: '*'`.
+- Plugin self-register side effects removed from samples — host registers everything.
diff --git a/studio-ui/docs/type-builder-forms-engine-plugins.md b/studio-ui/docs/type-builder-forms-engine-plugins.md
new file mode 100644
index 000000000..ba07be17a
--- /dev/null
+++ b/studio-ui/docs/type-builder-forms-engine-plugins.md
@@ -0,0 +1,517 @@
+# Type Builder & Forms Engine — Plugin Architecture
+
+> Companion to [`type-builder-forms-engine.md`](type-builder-forms-engine.md). Read this before designing or changing dynamic controls, data sources, FE form controllers, plugin loading, or TB plugin discovery.
+
+Last updated: 2026-08-03
+
+## 1. Why plugins are part of the core design
+
+CrafterCMS developers can extend Studio through project plugins. For TB/FE, plugins are not an edge case:
+
+- TB must discover plugin controls and data sources, show them in its catalog, and expose configuration forms for them.
+- TB must persist enough identity/configuration in `form-definition.xml` for FE to use the selected extension later.
+- FE must load and execute the plugin implementation, connect it to form state, validate/serialize its values, and isolate failures.
+- Installing/uninstalling a plugin must wire/unwire the appropriate project configuration without corrupting existing types.
+
+Official documentation:
+
+- [Plugins](https://craftercms.com/docs/current/by-role/developer/composable/extensions/plugins.html)
+- [Crafter Studio Plugin Examples](https://craftercms.com/docs/current/by-role/developer/composable/extensions/resources/plugin-ui-example.html)
+
+Local examples:
+
+`/Users/rart/Workspace/authoring-ui-plugin-examples`
+
+## 2. Separate the three plugin mechanisms
+
+### 2.1 Project plugin package
+
+A project plugin is an installable file bundle described by `craftercms-plugin.yaml` (`descriptorVersion: 2`). The descriptor contains marketplace metadata, compatible CrafterCMS versions/editions, and optional `installation` entries.
+
+Installation copies authoring assets into the site repository. Relevant mapping:
+
+```text
+plugin source:
+  authoring/static-assets/...
+
+installed site:
+  /config/studio/static-assets/plugins/<plugin-id-path>/...
+```
+
+Plugins can also deliver content types and therefore type-local files such as `form-definition.xml`, `config.xml`, `controller.groovy`, thumbnails, and potentially `form-controller.js`.
+
+The `installation` block performs declarative XML auto-wiring. Important fields:
+
+- `type`: e.g. `preview-app`, `form-control`, `form-datasource`
+- `parentXpath`: insertion parent where required
+- `elementXpath`: identity/removal test for install/uninstall
+- `element`: XML subtree to add
+
+Historically:
+
+- `form-control` adds a `<control>` to `administration/site-config-tools.xml`
+- `form-datasource` adds a `<datasource>` there
+- modern UI widgets add `<widget>` declarations to `ui.xml`
+
+This installer contract must evolve with TB's move from `site-config-tools.xml` to `ui.xml`; otherwise existing plugin packages will install successfully but remain invisible to new TB.
+
+### 2.2 General modern Studio UI plugin
+
+A modern UI bundle default-exports (or exports as `plugin`) a `PluginDescriptor`:
+
+```ts
+interface PluginDescriptor {
+	id: string;
+	locales?: Record<string, object>;
+	widgets?: Record<string, React.ComponentType | NonReactWidgetRecord>;
+	scripts?: Array<string | object>;
+	stylesheets?: Array<string | object>;
+	/** Author-contributed helpers (underscore-style). Typed today; host publish/eager-load still open. */
+	utils?: Record<string, unknown>;
+	/** FE2 DS modules — keyed by DS type id; installed by registerPlugin. */
+	dataSources?: Record<string, DataSourceModule>;
+	/** FE2 controls — keyed by control type id (= field.type); installed by registerPlugin. */
+	controls?: Record<string, ControlPluginContribution>;
+}
+```
+
+`widgets` may be omitted when the bundle is a library or FE contribution package (see §9). Demand-loading a DS or control plugin does not require rendering a widget from that bundle. Eager load for lib-only plugins (no form field referencing them) is still an open follow-up.
+
+`ui.xml` typically references a bundle through a widget's plugin locator:
+
+```xml
+<widget id="org.example.someWidget">
+  <plugin
+    id="org.example"
+    type="examples"
+    name="library"
+    file="index.js"
+  />
+</widget>
+```
+
+The `Widget` host:
+
+1. checks the global component registry for the widget id;
+2. if absent, calls `importPlugin(pluginLocator)`;
+3. dynamically imports the bundle from the site plugin-file API;
+4. registers the descriptor's widgets, locales, scripts, and stylesheets;
+5. renders the newly registered widget.
+
+`ui/app/src/services/plugin.ts` provides:
+
+- `buildFileUrl` / `createFileBuilder` — plugin asset locator
+- `importFile` — import a raw ESM file without registering a descriptor
+- `importPlugin` — import a `PluginDescriptor` bundle and register it
+- `registerPlugin` — add descriptor to the global plugin registry
+- `registerComponents` — add widgets to the global component registry
+
+Registration details:
+
+- plugin descriptors are deduplicated by `PluginDescriptor.id`;
+- widgets are deduplicated independently by widget id;
+- relative `scripts` / `stylesheets` resolve beside the imported bundle;
+- locales augment Studio translations;
+- imported bundles are cached by the widget host's generated file URL.
+
+Alternate registration paths also exist:
+
+- **Non-React widgets** may export `{ main({ craftercms, element, configuration }) }` instead of a React component; `NonReactWidget` mounts them into a host element.
+- **UMD/AMD-style plugins** can register through `craftercms.define(...)`, which ultimately calls the same `registerPlugin` path. Relative scripts/stylesheets are harder to resolve when the original file locator is not tracked.
+
+### 2.3 FE control/DS plugin
+
+Legacy FE plugins do **not** use the modern `PluginDescriptor`/widget registry. Their `<plugin>` record is an asset locator embedded in the TB catalog and later copied into `form-definition.xml`:
+
+```xml
+<plugin>
+  <pluginId>org.example.plugin</pluginId>
+  <type>control|datasource</type>
+  <name>extension-name</name>
+  <filename>main.js</filename>
+</plugin>
+```
+
+That locator identifies one implementation file through `/studio/1/plugin/file`.
+
+**FE2** loads the same locator through `importPlugin` and expects a `PluginDescriptor`. Control contributions live on `descriptor.controls` (keyed by `field.type`); DS contributions on `descriptor.dataSources` (keyed by `record.type`). The host registers everything — plugins do not self-register.
+
+## 3. Plugin identities are not one thing
+
+Keep these identities explicit; examples do not always use the same value:
+
+| Identity                                           | Purpose                                              |
+| -------------------------------------------------- | ---------------------------------------------------- |
+| `craftercms-plugin.yaml` `plugin.id`               | installable package / marketplace identity           |
+| plugin file locator (`id`, `type`, `name`, `file`) | physical asset location in the installed project     |
+| `PluginDescriptor.id`                              | runtime descriptor registration/deduplication        |
+| widget id                                          | component lookup and UI placement                    |
+| FE control/DS `name`                               | legacy module prefix and type identity               |
+| content-type field/DS `type`                       | persisted runtime selection in `form-definition.xml` |
+
+Do not infer one from another without an explicit mapping.
+
+Naming differences also exist:
+
+- `ui.xml` widget locator uses attribute `file`;
+- legacy FE XML uses child `filename`;
+- `PluginFileBuilder` uses property `file`;
+- `plugin.ts` sends query parameter `filename`;
+- current public docs illustrate the low-level URL with query parameter `file`.
+
+Before consolidating loaders, confirm which query names the backend accepts and normalize at one boundary.
+
+## 4. Local example repository
+
+Repository:
+
+`/Users/rart/Workspace/authoring-ui-plugin-examples`
+
+Structure:
+
+```text
+craftercms-plugin.yaml        # package descriptor + auto-wiring
+examples/                     # source workspaces
+  component-library/          # representative modern PluginDescriptor bundle
+  forms-engine/               # FE extension experiment/skeleton
+  ...
+authoring/                    # generated installable output
+  static-assets/plugins/
+    org/craftercms/examples/
+      library/index.js
+      forms-engine/index.js
+```
+
+The Yarn root declares `examples/*` as workspaces. Individual examples build with Rollup and copy `dist/index.js` into `authoring/...`, making `authoring` the payload installed into a Studio site.
+
+Two build outputs matter for the Rollup packages:
+
+- `build/` — TypeScript emit that still imports `@craftercms/studio-ui` packages; useful for local/npm consumption (for example the CRA workspace).
+- `dist/` — Studio runtime bundle with host externals rewritten to `craftercms.*`; this is what gets copied under `authoring/`.
+
+### 4.1 `component-library`: authoritative modern bundle pattern
+
+Source: `examples/component-library/src/index.tsx`.
+
+It default-exports a `PluginDescriptor` containing:
+
+- several widget ids mapped to React components;
+- `en` / `es` locales;
+- optional additional scripts and stylesheets.
+
+Its Rollup build:
+
+- outputs an ES module;
+- treats React, React DOM, React Intl, Redux, RxJS, MUI, and `@craftercms/studio-ui` as Studio-provided externals;
+- rewrites package imports to host globals such as `craftercms.libs.*`, `craftercms.components`, and `craftercms.services.*`;
+- copies the result to `authoring/static-assets/plugins/org/craftercms/examples/library/index.js`.
+
+This host-externalization is important: plugins should share Studio's React/MUI/Redux instances instead of bundling duplicate runtimes.
+
+The root `craftercms-plugin.yaml` auto-wires selected component-library widgets into `ui.xml`. The `Widget` host later imports the one library bundle; registering it makes every exported widget available, including widgets not directly referenced by the first declaration.
+
+Only two widgets are auto-installed (`viewProjectsPanelButton`, `vanilla`). The remaining widgets in the same bundle require manual `ui.xml` wiring.
+
+### 4.2 `forms-engine`: useful direction, not current FE wiring
+
+`examples/forms-engine` builds a modern `PluginDescriptor` whose `widgets` contain `ExampleControl` and `ExampleDataSource`.
+
+However:
+
+- those components are placeholder React views, not complete FE contracts;
+- the root package descriptor does not auto-wire this bundle;
+- current FE resolves control/DS implementations from `PluginDescriptor.controls` / `.dataSources`, not from the global widget registry;
+- putting FE controls only under `widgets` does not make them available to Forms Engine.
+
+Treat this example as an experiment illustrating a registry-based direction; use `samples/fe2-control-plugin.example.mjs` / `samples/fe2-datasource-plugin.example.mjs` for the current FE2 contribution contract.
+
+### 4.3 Other examples in the same repo
+
+The monorepo also demonstrates **Plugin Host apps**, which are full pages/apps loaded via Studio's plugin host rather than FE control/DS contracts:
+
+- `app-vanilla` — zero-build IIFE that consumes `window.craftercms`
+- `cra` — Create React App that can import the component-library `build/` output during local development
+- `app-external-sources` — Vite app (`awes`) that can serve assets externally or embed them under `authoring/`
+
+Useful for Studio chrome/app plugins; not the primary contract for TB/FE field extensions.
+
+## 5. Official FE plugin documentation describes FE1
+
+The current public “Form Engine Control” and “Form Engine Data Source” examples still document the legacy YUI architecture.
+
+### Control contract
+
+- file location: `authoring/static-assets/plugins/{pluginId}/control/{name}/{file}.js`
+- constructor receives `(id, form, owner, properties, constraints, readonly)`
+- extends `CStudioForms.CStudioFormField`
+- declares label/name/properties/constraints
+- owns imperative DOM rendering and value/model updates
+- registers with `CStudioAuthoring.Module.moduleLoaded(controlName, ControlClass)`
+
+### Data-source contract
+
+- file location: `authoring/static-assets/plugins/{pluginId}/datasource/{name}/{file}.js`
+- constructor receives `(id, form, properties, constraints)`
+- extends `CStudioForms.CStudioFormDatasource`
+- declares `getInterface`, `getName`, `getSupportedProperties`
+- exposes operational methods such as `getList(callback)`, `add`, browse, create, edit, etc.
+- registers with `moduleLoaded(dataSourceName, DataSourceClass)`
+
+The docs explicitly state the desired separation: controls manage capture/selection UI and delegate retrieval/actions to swappable data sources.
+
+These FE1 implementations are not source-compatible with FE2 React controls. New FE already reports this incompatibility when a legacy control file is loaded as a React module.
+
+## 6. Current FE2/TB2 plugin status
+
+### FE2 controls: functional (single plugin model)
+
+For a field with `field.properties.plugin`, `ControlWrapper` (`controlHelpers.tsx`):
+
+1. creates a plugin locator from `type`, `name`, `filename`, `pluginId`;
+2. loads via `controlPluginLoader` → `importPlugin` → `descriptor.controls[field.type]`;
+3. renders the registered React component;
+4. uses `dataSourceBindings` from the descriptor control entry (registered for `field.type`);
+5. resolves `ControlProps.dataSources` before render;
+6. isolates load/render errors.
+
+Plugin control export:
+
+```js
+export default {
+	id: 'org.example.my-controls',
+	controls: {
+		'my-custom-picker': {
+			Component: MyPicker,
+			dataSourceBindings: [{ propertyName: 'itemManager', interfaces: ['item'], selection: 'multi' }]
+		}
+	}
+};
+```
+
+Eager alternative for UMD loaders: `craftercms.formsEngine.controls.registerDataSourceBindings(type, bindings)` (bindings only; prefer `descriptor.controls` for the component).
+
+Example: `samples/fe2-control-plugin.example.mjs`.
+
+Missing for a complete extension contract:
+
+- plugin-supplied value retriever;
+- serializer;
+- validators;
+- additional XML fields/attributes;
+- migrations/versioning;
+- optional descriptor for TB property editing (should mirror `dataSourceBindings` for the DS property UI);
+- explicit lifecycle beyond React render/unmount.
+
+### TB2 controls: plugin coordinates on insert
+
+TB2 reads control entries/descriptors from the `ContentTypeManagement` widget in `ui.xml`. When inserting a field or data source from a catalog entry that includes `<plugin>`, `EditTypeView` copies coordinates onto `field.properties.plugin` or `DataSource.plugin` (mapping `id`→`pluginId`, `fileName`→`filename`).
+
+Remaining gaps:
+
+- existing package installers may still wire `form-control` into legacy `site-config-tools.xml`;
+- descriptor merge/precedence remains inconsistent across some edit/serialize helpers;
+- a general `PluginDescriptor.widgets` control is not connected to FE's control resolver.
+
+### FE2 data sources: runtime + built-in modules
+
+FE2 ships the platform and built-in modules under `components/FormsEngine/dataSources/`:
+
+- `DataSourceModule` is a versioned factory registered by DS type;
+- a form-definition `DataSource` is a configured instance record, not executable UI;
+- modules advertise interfaces/capabilities and create instances with actions plus optional `list`/`edit`/`refreshItem`;
+- controls receive ordered, resolved records/actions through `ControlProps.dataSources`;
+- built-in controls declare bindings in `controlDataSourceBindings`; **plugin controls declare bindings on `descriptor.controls[type].dataSourceBindings`** (or register via `craftercms.formsEngine.controls`);
+- built-ins register into `dataSourceModuleRegistry` at platform init;
+- **plugin DS types** are contributed on `PluginDescriptor.dataSources`; `importPlugin` → `registerPlugin` installs them (same path as widgets). `loadDataSourceModule` only demand-loads the locator then looks up by `record.type` — it is not a parallel plugin system;
+- **plugin control types** are contributed on `PluginDescriptor.controls`; same `importPlugin` → `registerPlugin` path. `controlPluginLoader` demand-loads then looks up by `field.type`;
+- host registry surface: `window.craftercms.formsEngine.dataSources` / `.controls` — for built-ins/tests/UMD; plugin authors export a descriptor;
+- platform ops for modules: `ctx.services` = `DataSourceServices` (browse/search/upload/createContent) — closed host API;
+- examples: `samples/fe2-datasource-plugin.example.mjs`, `samples/fe2-control-plugin.example.mjs`.
+
+Most modules return actions whose `run(ctx, { target? })` calls shared services. The host groups standard actions by binding + intent, but every concrete `DataSourceActionChoice` retains its resolved owning action. One choice runs immediately; multiple choices open a picker. Custom React `MenuItem`/`Dialog` actions remain standalone instead of being flattened into standard groups.
+
+Action ids must be unique within a configured datasource instance. Resolution stamps the stable cross-instance key `dataSourceId::actionId`. Create actions may expose multiple typed targets; `createContent` resolves after nested-form save/cancel so the selected action returns a semantic item selection.
+
+The runtime retains the source datasource on the resolved action/choice. It does not currently persist FE1's node-selector `datasource` XML attribute; FE2/XB provenance round-tripping is intentionally deferred.
+
+### Form controllers
+
+`form-controller.js` is a **content-type-local** extension, not a `PluginDescriptor` / control / DS plugin.
+
+**Design (decided):** see main doc [`type-builder-forms-engine.md` §5.9](type-builder-forms-engine.md). Summary:
+
+- Gate: `hasJsController` / `<controller>`.
+- File on disk: `/config/studio/content-types/{contentTypeId}/form-controller.js`.
+- Load: authenticated `form_controller` API → ESM via Blob URL; FE2 owns this in a dedicated loader called from form bootstrap (not `importPlugin` / plugin file URLs).
+- Export: `{ apiVersion, initialize?, isFieldRelevant?, onBeforeSave? }` — all hooks may be async; host awaits. FE1 `moduleLoaded('{typeId}-controller', Class)` scripts are not compatible.
+- Host context: narrow read/write API over form values and type metadata (not the YUI form object).
+- Project plugins may ship the type folder including the file; runtime still loads by content-type id.
+
+**Implementation:** still open in FE2 (`FormsEngine.tsx` TODO). TB “Client-side Controller” currently opens `controller.groovy` by mistake — fix when implementing.
+
+## 6.1 FE1 → FE2 data-source migration notes
+
+Legacy YUI data sources (`CStudioForms.Datasources.*`) are **not** loadable as FE2 modules. Migrate by rewriting behavior as a `DataSourceModule`:
+
+| FE1 concern                | FE2 equivalent                                                               |
+| -------------------------- | ---------------------------------------------------------------------------- |
+| `getInterface` / `getName` | `module.interfaces` / `module.type`                                          |
+| `getSupportedProperties`   | TB descriptor (code or `ui.xml`)                                             |
+| `add(control)` menu DOM    | `instance.getActions(ctx)` → control renders menu                            |
+| `insertImage/VideoAction`  | owner-bound choice → `action.run(ctx, { target? })` → `DataSourceSelection`  |
+| `getList(callback)`        | `instance.list(ctx)`                                                         |
+| `edit(key)`                | `instance.edit(selection, ctx)` only when real                               |
+| Studio Operations dialogs  | `ctx.services.browseFiles/search/upload/createContent`                       |
+| Script `moduleLoaded`      | `registerPlugin` → `descriptor.dataSources` (demand-load via `importPlugin`) |
+
+Control plugins that bind DS must declare `dataSourceBindings` on the control contribution (or call `craftercms.formsEngine.controls.registerDataSourceBindings`). Do not `switch (ds.type)` inside controls.
+
+Remote S3/WebDAV modules that lack platform services throw visibly via `unsupportedRemoteError` rather than silently omitting menu entries.
+
+## 7. Design requirements derived from the plugin ecosystem
+
+1. **Installation and runtime must agree.** Update plugin auto-wiring targets when TB catalog configuration moves from `site-config-tools.xml` to `ui.xml`, with upgrade compatibility.
+2. **Keep package, asset, runtime, and type identities explicit.** Persist a normalized locator rather than relying on naming coincidence.
+3. **Use one modern plugin format.** Every authoring extension (widgets, libs, FE controls, FE data sources) is a `PluginDescriptor` bundle loaded through `importPlugin` / `registerPlugin`. Do not invent a parallel “DS module file” or “control component file” packaging model; contributions are fields on the descriptor (see §9).
+4. **Preserve Studio host externals.** Publish the supported host API surface and avoid bundling duplicate React/MUI/Redux.
+5. **Make DS behavior pluggable.** Model capabilities independently from concrete DS ids and let plugins register `DataSourceModule`s through the descriptor.
+6. **Pair TB descriptors with FE implementations.** A plugin should be able to supply catalog metadata, property editor schema/defaults, runtime code, and serialization hooks coherently.
+7. **Round-trip locators losslessly.** Control and DS plugin records must survive parse → edit → serialize unchanged.
+8. **Version contracts.** Declare FE extension API version and compatibility separately from the package's CrafterCMS version range.
+9. **Failure isolation and cache invalidation.** Plugins need load/runtime error boundaries and a development-time way to refresh cached modules.
+10. **Security.** Plugin code executes with Studio privileges; installation permissions, asset origin, CSP, auth, and trust boundaries are architectural concerns.
+11. **Migration.** Existing FE1 control/DS packages and `site-config-tools.xml` auto-wiring need an explicit compatibility or conversion story.
+12. **Support lib-style plugins.** Bundles that contribute `utils` / shared runtime APIs must load and publish without requiring a rendered widget (see §9).
+
+## 8. Key source paths
+
+Studio:
+
+- `ui/app/src/services/plugin.ts`
+- `ui/app/src/components/Widget/Widget.tsx`
+- `ui/app/src/models/PluginDescriptor.ts`
+- `ui/app/src/models/PluginFileBuilder.ts`
+- `ui/app/src/components/FormsEngine/lib/controlHelpers.tsx`
+- `ui/app/src/components/FormsEngine/dataSources/*`
+- `ui/app/src/components/FormsEngine/dataSourceHooks/*`
+- `ui/app/src/components/FormsEngine/fe-control-plugin.js` — local FE1 control/DS examples and catalog XML snippets
+- `ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx`
+- `ui/app/src/components/ContentTypeManagement/proposal.xml`
+- `static-assets/components/cstudio-common/common-api.js`
+- `static-assets/components/cstudio-forms/forms-engine.js`
+
+Examples:
+
+- `/Users/rart/Workspace/authoring-ui-plugin-examples/craftercms-plugin.yaml`
+- `/Users/rart/Workspace/authoring-ui-plugin-examples/examples/component-library/`
+- `/Users/rart/Workspace/authoring-ui-plugin-examples/examples/forms-engine/`
+- `/Users/rart/Workspace/authoring-ui-plugin-examples/authoring/`
+- `samples/fe2-datasource-plugin.example.mjs` — `PluginDescriptor` + `dataSources` example
+- `samples/fe2-control-plugin.example.mjs` — `PluginDescriptor` + `controls` example
+- `docs/fe2-control-plugin-single-model-implementation.md` — control convergence handoff (implemented)
+
+## 9. Design: single plugin model, lib plugins, FE contributions
+
+**Status:** DS + control contribution paths implemented (2026-07-31). Eager lib-only load + `craftercms.plugins.utils` publish remain open.
+
+### 9.1 Decision: one plugin model
+
+Do **not** introduce a second kind of “FE module plugin” packaged or loaded differently from Studio UI plugins.
+
+| Concept                                           | Role                                                                                                  |
+| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| Project plugin package (`craftercms-plugin.yaml`) | Install/copy assets + XML auto-wire                                                                   |
+| `PluginDescriptor` bundle                         | **The** runtime unit: widgets, utils, FE data sources, FE controls                                    |
+| `DataSourceModule`                                | Behavior factory registered **by** a plugin (or by Studio for built-ins) — not a separate load format |
+| `DataSourceServices` (`ctx.services`)             | Closed **host** Studio ops — not where plugins publish underscore-style helpers                       |
+
+Form-definition `<plugin>` locators keep pointing at a JS file URL. That file’s default/`plugin` export must be a `PluginDescriptor`. FE resolves DS behavior by `record.type` after the descriptor has been registered — same as widgets resolve by widget id after registration.
+
+Plugins **export** contributions; they do **not** call `register` / `registerPlugin` themselves. The host (`importPlugin` → `registerPlugin`) owns registration so developers cannot forget a side-effect call and so double-registration cannot depend on load order.
+
+### 9.2 Scenario: underscore-style shared lib
+
+**Plugin A** exports helpers many other plugins need. **Plugins B/C** are DS (or control) bundles that call those helpers.
+
+Target flow:
+
+1. A is installed as a normal project plugin and declared for **eager** (or on-demand) load in site config — **no widget required**.
+2. `importPlugin(A)` → `registerPlugin` stores `A.utils` on the descriptor (already); expose via a host map when needed.
+3. B/C load as `PluginDescriptor`s; their factories/`create`/`run` read A via the host map (or, later, AMD/`define` deps once plugin ids are resolvable there).
+4. B/C’s `dataSources` entries register into `dataSourceModuleRegistry` like built-ins (**done**).
+
+What does **not** happen: A does not extend `DataSourceServices`; B does not `import()` a bare `DataSourceModule` file that bypasses the descriptor.
+
+### 9.3 `PluginDescriptor` contributions
+
+```ts
+interface PluginDescriptor {
+	id: string;
+	locales?: Record<string, object>;
+	widgets?: Record<string, WidgetRecord>; // optional — Studio shell widgets
+	scripts?: Array<string | object>;
+	stylesheets?: Array<string | object>;
+	utils?: Record<string, unknown>; // stored on register; host publish/eager-load TBD
+	dataSources?: Record<string, DataSourceModule>; // key = DS type id — installed by registerPlugin ✓
+	controls?: Record<string, ControlPluginContribution>; // key = control type id (= field.type) — installed by registerPlugin ✓
+}
+
+interface ControlPluginContribution {
+	Component: ComponentType<ControlProps>;
+	dataSourceBindings?: DataSourceBinding | readonly DataSourceBinding[];
+}
+```
+
+`registerPlugin` (current):
+
+1. Validates and installs `dataSources` into `dataSourceModuleRegistry` (before committing the plugin id).
+2. Validates and installs `controls` into the control contribution registry + binding registry.
+3. Stores the descriptor (including `utils`) in the plugins map.
+4. Registers widgets, locales, scripts/stylesheets as before.
+5. `widgets` may be omitted (lib / FE-only bundles).
+
+### 9.4 Load lifecycle
+
+| Trigger                    | When                                                              | Status                                                                            |
+| -------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| **Demand (DS)**            | FE needs `record.type` not in registry and `record.plugin` is set | **Done** — `loadDataSourceModule` → `importPlugin` → type lookup                  |
+| **Demand (control)**       | Field has `properties.plugin`                                     | **Done** — `controlPluginLoader` → `importPlugin` → `controls[field.type]` lookup |
+| **Demand (widget)**        | `<Widget plugin={…}>` missing from `components`                   | **Done** (existing)                                                               |
+| **Eager / site libraries** | Studio boot or site switch                                        | **Open** — needed for lib-only plugins without dummy widgets                      |
+
+### 9.5 FE DS resolution
+
+```text
+record.type → registry.get(type)
+  if miss && record.plugin → importPlugin(locator) → registerPlugin → registry.get(type)
+  if still miss → error (plugin loaded but type not in descriptor.dataSources)
+```
+
+Built-ins call `registerDataSourceModule` at platform init. Externally authored DS types always arrive through a descriptor.
+
+### 9.6 FE control resolution
+
+```text
+field.type → getRegisteredControlContribution(type)
+  if miss && field.properties.plugin → importPlugin(locator) → registerPlugin → lookup again
+  if still miss → error (plugin loaded but type not in descriptor.controls)
+```
+
+Implemented in `controlPluginLoader.ts`, mirroring `loadDataSourceModule`. Plugins export a `PluginDescriptor`; there is no bare default React component export for control plugins.
+
+**Key invariant:** `PluginDescriptor.controls` map keys **must equal** `field.type` for fields that reference the plugin locator.
+
+Handoff (historical): [`fe2-control-plugin-single-model-implementation.md`](fe2-control-plugin-single-model-implementation.md).
+
+### 9.7 Non-goals / trust
+
+- Plugins do not inject into `DataSourceServices`.
+- No `eval` of util strings; utils are JS exports from the trusted plugin origin.
+- Eager lib lists (when added) are site admin configuration (same trust class as `ui.xml` widgets).
+
+### 9.8 Remaining implementation
+
+1. ~~Control plugins on descriptor~~ — **done** (2026-07-31).
+2. Eager library declarations in `ui.xml` (or equivalent) and boot-time `importPlugin`.
+3. Publish `utils` on a stable host path (e.g. `craftercms.plugins[id]`).
+4. Optional AMD resolution of `plugin:<id>` deps.
diff --git a/studio-ui/docs/type-builder-forms-engine.md b/studio-ui/docs/type-builder-forms-engine.md
new file mode 100644
index 000000000..985d95aec
--- /dev/null
+++ b/studio-ui/docs/type-builder-forms-engine.md
@@ -0,0 +1,671 @@
+# Type Builder & Forms Engine — Agent Context
+
+> Living backbone for TB/FE modernization work. **Read this first** in any new agent/session before changing related code. Keep it current: update _Open decisions_, _Progress_, and _Known pitfalls_ when you learn something durable.
+
+Last updated: 2026-08-03
+
+---
+
+## 1. What these systems are
+
+Crafter Studio is the authoring UI for CrafterCMS.
+
+| Role                  | Purpose                                                                                             |
+| --------------------- | --------------------------------------------------------------------------------------------------- |
+| **Type Builder (TB)** | Models _Content Types_ (pages, components, …). Authors of the CMS use it to define structure.       |
+| **Forms Engine (FE)** | Takes a content type’s form definition and renders the authoring form. Saving produces content XML. |
+
+Pipeline:
+
+```text
+TB (edit type)
+  → writes type artifacts under /config/studio/content-types/<objectType>/<typeName>/
+  → form-definition.xml (+ today: config.xml)
+       ↓
+FE (edit content)
+  → reads type definition + existing content (or empty for create)
+  → renders form UI
+  → saves content XML (e.g. /site/website/.../index.xml)
+```
+
+Sample artifacts in this repo: `samples/form-definition.xml`, `samples/config.xml`, `samples/index.xml`, `samples/site-config-tools.xml`.
+
+Local sandbox site for inspection:
+
+`/Users/rart/Workspace/craftercms/4.x/crafter-authoring/data/repos/sites/crafterqai/sandbox`
+
+| Concern       | Path in site                                                 |
+| ------------- | ------------------------------------------------------------ |
+| Content       | `/site/website`, `/site/components`, …                       |
+| Content types | `/config/studio/content-types/{page\|component}/<typeName>/` |
+| Studio config | `/config/studio/` (`ui.xml`, `site-config.xml`, …)           |
+| Templates     | `/templates/web/...`                                         |
+
+Typical type folder contents:
+
+- `form-definition.xml` — form model (sections, fields, datasources, type-level properties)
+- `config.xml` — type registry / metadata (target: **absorb into form-definition and drop**)
+- optional: `controller.groovy`, thumbnail image, `form-controller.js`
+
+---
+
+## 2. Centric files (legacy vs next)
+
+### Legacy (YUI / static-assets)
+
+| Module       | Entry                                                          |
+| ------------ | -------------------------------------------------------------- |
+| Type Builder | `static-assets/components/cstudio-admin/mods/content-types.js` |
+| Forms Engine | `static-assets/components/cstudio-forms/forms-engine.js`       |
+
+### Next (React / `ui/app`)
+
+| Module           | Reality check        | Entry / package                                                                                                                    |
+| ---------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| **Forms Engine** | Actively implemented | `ui/app/src/components/FormsEngine/` — centric: `FormsEngine.tsx`                                                                  |
+| **Type Builder** | Actively implemented | `ui/app/src/components/ContentTypeManagement/` — shell: `ContentTypeManagement.tsx`; centric editor: `components/EditTypeView.tsx` |
+
+- TB reuses FE internals to edit type/field properties via virtual forms (`TypeBuilderFormsEngine.tsx`, descriptors).
+
+### FE layout (high signal)
+
+```text
+FormsEngine/
+  FormsEngine.tsx          # shell, stack, load, layout modes
+  FormsEngineDialog.tsx
+  types.ts
+  components/              # FormLayout, headers, SectionAccordion, SaveCard, …
+  controls/                # Text, RTE, NodeSelector, Repeat, ImagePicker, …
+  dataSourceHooks/
+  lib/
+    formsEngineContext.ts  # React contexts
+    formUtils.tsx          # atoms, load/save prep, locks
+    controlHelpers.tsx     # renderFieldControl
+    controlMap.ts / dataSourceMap.ts
+    valueRetrievers.ts / valueSerializers.ts / validators.ts
+    useSaveForm.tsx
+    formConsts.ts          # XmlKeys, errors
+```
+
+State: Jotai atoms + React context (`StableFormContext`, `ItemMetaContext`, …). Redux for site/content-types catalog and dialogs.
+
+### TB (ContentTypeManagement) layout (high signal)
+
+```text
+ContentTypeManagement/
+  ContentTypeManagement.tsx   # list | edit | create; can fall back to legacy iframe
+  utils.ts                    # serialize/deserialize helpers, TypePropsToEdit, paths
+  controlMap.ts / suffixesMap.ts
+  descriptors/                # control & datasource “virtual type” descriptors
+    controls/  dataSources/  archetypes.ts
+  controls/                   # TB-specific property editors (paths, template, …)
+  components/                 # EditTypeView, TypeList, TypeBuilderFormsEngine, …
+  proposal.xml                # design notes for site-config-tools / plugins
+  config.xml                  # annotated sample of what to keep/move/drop from config.xml
+```
+
+Shared XML helpers also appear under `ui/app/src/components/XmlTools/`.
+
+Domain model: `ui/app/src/models/ContentType.ts` (`ContentType`, `LegacyFormDefinition`, `SerializeToXmlContentTypeStructure`, …).
+
+Constants:
+
+- Content types base path: `/config/studio/content-types` (`CONTENT_TYPES_BASE_PATH` in CTM `utils.ts`)
+
+---
+
+## 3. Artifacts & data flow
+
+### form-definition.xml
+
+Root `<form>` with roughly:
+
+- Identity: `title`, `description`, `objectType`, `content-type`, `imageThumbnail`, `quickCreate`, `quickCreatePath`
+- Type properties: `display-template`, `no-template-required`, `merge-strategy` (today under `<properties>`)
+- `<sections>` → `<fields>` (controls with `<properties>` / `<constraints>`)
+- `<datasources>`
+
+FE loads this (via Studio APIs / content-type catalog) to build the author form. FE save writes **content** XML, not the form definition.
+
+### config.xml (to be removed)
+
+Root `<content-type>` with registry-ish metadata, e.g.:
+
+- Dupes of form-definition: `label`, `form`, thumbnail, quickCreate\*
+- Removal candidates (legacy noise): `form-path`, `model-instance-path`, `file-extension`, `content-as-folder`, `previewable`, `noThumbnail`
+- Move into form-definition: `controller`, `paths` (includes/excludes)
+
+Annotated working notes: `ui/app/src/components/ContentTypeManagement/config.xml`.
+
+**Blocker (known):** backend still consumes `config.xml` fields (`form`, thumbnail, `paths`, …). UI already serializes several former-config fields into the form-definition structure (`SerializeToXmlContentTypeStructure` marks `controller`, `paths`, deps, `previewable`), but **Allowed Destinations** UI is gated until config.xml can be dropped (see comments in `descriptors/controls/commonDescriptors.ts`).
+
+### Content XML (FE output)
+
+Example: `samples/index.xml`. Root is `page` / `component` / etc. Includes system fields (`content-type`, `display-template`, `objectId`, `file-name`, `internal-name`, …) plus author fields. Embedded components may be inlined; shared components referenced via includes.
+
+Field id suffixes (`_s`, `_html`, `_o`, `_dt`, …) matter for indexing/Engine — see `suffixesMap.ts` / FE serializers.
+
+---
+
+## 4. Strategic objectives (current effort)
+
+1. **Modern FE** — React FormsEngine replacing `forms-engine.js` (substantial progress).
+2. **Modern TB** — ContentTypeManagement replacing `content-types.js` (in progress; legacy toggle still exists).
+3. **Single type artifact** — fold `config.xml` into `form-definition.xml` and delete `config.xml` (requires Studio **backend** alignment, not UI-only).
+4. **Descriptors / site-config-tools** — control & datasource listing + property forms driven by code defaults + optional XML overrides/plugins (`proposal.xml`, crawl → walk → run).
+
+Out of scope unless asked: Engine delivery / Freemarker templates beyond how TB stores `display-template`.
+
+---
+
+## 5. How TB and FE couple
+
+- TB **produces** type XML; FE **consumes** it for authoring.
+- TB **embeds FE** to edit the type itself and each field’s properties: descriptors define virtual content types; `TypeBuilderFormsEngine` hosts FE controls.
+- Shared concerns: `XmlKeys`, value serializers/retrievers, control maps, validation keys.
+- Changes to form-definition shape or field XML must stay coherent across:
+  - CTM serialize (`prepareSerializeToXmlTypeObject` / `buildContentTypeXml`)
+  - content-type parse / `ContentType` model
+  - FE value retrieve/serialize/validate
+  - (eventually) backend type APIs that today still read `config.xml`
+
+### 5.1 Do not conflate these extension concerns
+
+There are four related but distinct mechanisms:
+
+1. **Control catalog / descriptor** — what TB lists and which property form it presents when modeling a field.
+2. **Control runtime** — the implementation FE renders when an author edits content.
+3. **Data source catalog / descriptor vs runtime** — TB edits a DS definition, while FE must execute/interpret that definition for a consuming control.
+4. **Form controller** — content-type-specific behavior (`form-controller.js`), separate from a control/DS plugin and from the server-side `controller.groovy`.
+
+### 5.2 Legacy Type Builder: catalog and plugin discovery
+
+Verified configuration source: `/config/studio/administration/site-config-tools.xml` (the repo sample is `samples/site-config-tools.xml`).
+
+Flow:
+
+1. `static-assets/components/cstudio-admin/base.js` calls `lookupConfigurtion(..., '/administration/site-config-tools.xml')`.
+2. `buildModules` loads the `content-types` tool and passes that tool's complete XML-derived config object into `content-types.js`.
+3. `renderContentTypeTools(config)` reads `config.controls.control` and `config.datasources.datasource`.
+4. Each catalog entry is resolved by `CStudioAuthoring.Utils.form.getPluginInfo`:
+   - built-in control: `/static-assets/components/cstudio-forms/controls/<name>.js`
+   - built-in DS: `/static-assets/components/cstudio-forms/data-sources/<name>.js`
+   - plugin: `/studio/1/plugin/file?...` assembled from `type`, `name`, `filename`, optional `pluginId`
+5. `CStudioAuthoring.Module.requireModule` injects the script, waits for `moduleLoaded(prefix, Class)`, and caches the class globally in `loadedModules`.
+6. TB instantiates a fake control/DS to introspect behavior:
+   - controls: `getName`, `getLabel`, `getSupportedProperties`, `getSupportedConstraints`, `getSupportedPostFixes`, etc.
+   - data sources: `getName`, `getLabel`, `getInterface`, `getSupportedProperties`.
+7. Dragging an item into a type copies its executable object's defaults plus the catalog's `<plugin>` metadata into the in-memory form definition. Saving writes that plugin declaration into `form-definition.xml`.
+
+`site-config-tools.xml` is therefore primarily the **legacy TB palette/catalog**, not the legacy FE's runtime registry. It chooses what TB offers and provides the plugin coordinates TB persists into the type.
+
+### 5.3 Legacy Forms Engine: runtime controls and data sources
+
+The type's `form-definition.xml` is the runtime manifest.
+
+#### Controls
+
+For every field, `_renderField`:
+
+1. Calls `getPluginInfo(field, CONTROL_URL, 'control')`.
+2. Resolves either the built-in script from `field.type` or the plugin URL from `field.plugin`.
+3. Obtains the constructor through the global module registry.
+4. Instantiates a control with the common constructor contract:
+   `(fieldId, form, section, properties, constraints, readOnly, pencilMode)`.
+5. Calls `initialize`, then sets the model/default value.
+
+Plugin controls and built-ins participate in essentially the same runtime protocol. The plugin declaration travels with the field, so FE does not need the original TB catalog to execute it.
+
+#### Data sources
+
+Before fields render, `_loadDatasources` iterates `form.definition.datasources`, dynamically loads each built-in/plugin class, instantiates it as:
+
+`new DataSourceClass(datasourceId, form, properties)`
+
+and registers the object in `form.datasourceMap[id]`. It publishes `/datasource/loaded` for controls waiting on an asynchronous DS.
+
+The base `CStudioFormDatasource` is intentionally small (`getInterface`, `getName`, `getLabel`, `getSupportedProperties`, path macro processing). Concrete DS objects expose operational capabilities consumed by controls, for example:
+
+- item DS: `getList(callback)` and sometimes `add(control)`
+- media/repository DS: browse/upload/search-specific methods
+- `interface` (`item`, `image`, `video`, `audio`, …) lets TB filter compatible DS choices
+
+This is dynamic but not a perfectly uniform abstraction: controls still know capability methods and some DS families. Its key virtue is that behavior lives on the loaded DS object instead of in a central switch over every DS type.
+
+Load-mechanism quirks (legacy FE):
+
+- built-in/plugin **controls** typically go through `requireModule`, with external plugin controls also using dynamic `import('/studio...')`
+- **datasources** typically load via `jQuery.getScript` (or a cached module) rather than the same control path
+- TB palette always uses `requireModule` for both
+
+#### Legacy plugin transport
+
+`getPluginInfo` is shared by TB and FE. A declaration contains:
+
+- `type`
+- `name`
+- `filename`
+- optional `pluginId`
+
+The plugin script must register the expected module prefix through `CStudioAuthoring.Module.moduleLoaded`. Missing coordinates are reported; loaded modules are cached.
+
+TB availability checks for plugin controls compare against `control.plugin.name` (not the outer `<name>`), so palette identity and persisted `field.type` must stay aligned.
+
+#### Form controllers
+
+Legacy FE loads `/content-types/<type>/config.xml`; when `<controller>true</controller>`:
+
+1. It fetches the type's `form-controller.js` through the authenticated form-controller API.
+2. It executes the returned script through a Blob-backed `<script>`.
+3. The script must register `${formId}-controller`.
+4. FE constructs it and calls `initialize(form)`.
+5. `isFieldRelevant(field)` can suppress fields/repeats.
+6. `onBeforeSave()` can manipulate/validate state and veto save by returning `false`.
+
+This is distinct from `controller.groovy`, which is a server-side content-type controller.
+
+### 5.4 New Type Builder: current configuration and descriptors
+
+The current implementation **does use `/config/studio/ui.xml`**, confirmed in `EditTypeView.tsx`:
+
+1. `fetchSiteUiConfig` fetches `/ui.xml`.
+2. TB selects `widget[id="craftercms.components.ContentTypeManagement"] > configuration`.
+3. It parses `controls`, `controlExclusions`, `dataSources`, and `dataSourceExclusions`.
+4. Built-in property-form descriptors are compiled TypeScript under `ContentTypeManagement/descriptors/{controls,dataSources}`.
+5. XML `<descriptor>` objects are normalized by `parseConfigPlugins` and used as additional/custom descriptors.
+
+Current behavior differs from the intent documented in `proposal.xml`:
+
+- The proposal's preferred approach says code defaults should appear without configuration and XML should only add/override/exclude.
+- `PickControlDialog` and `PickDataSourceDialog` currently include a built-in only when that id is present in `ui.xml`; absent config does **not** expose all code defaults.
+- Descriptor override/deep-merge semantics are not implemented. Lookup precedence is also inconsistent by operation:
+  - insert / open field or DS editor: code descriptor first, then config
+  - commit field edits / some serialize helpers: config descriptor first, then code
+- Configured `<plugin>` coordinates from `ui.xml` are copied onto newly inserted fields (`field.properties.plugin`) and data sources (`DataSource.plugin`) via `extractPluginLocatorFromConfigEntry` in `EditTypeView`.
+- `EditTypeView` fetches `/ui.xml` directly via the configuration service; it does **not** read Redux `uiConfig`. Global Studio may also fetch the same file, so two parallel loads are possible.
+
+The checked-in `ContentTypeManagement/site-config-tools.xml` is a legacy/reference artifact. It is not what `EditTypeView` fetches. Code descriptors currently list more built-ins than the legacy site-config-tools sample (e.g. `aws-file-upload`, `colorPicker`, `pages`).
+
+### 5.5 New Forms Engine: dynamic controls and the FE2 data-source runtime
+
+#### Controls
+
+New FE has two resolution paths in `controlHelpers.tsx` / `controlPluginLoader.ts`:
+
+- built-in: static `controlMap` → React component, plus static `controlDataSourceBindings[field.type]`
+- plugin field (`field.properties.plugin`): `importPlugin(locator)` → `registerPlugin` installs `descriptor.controls[field.type]` → render component + bindings. Control lookup key is **`field.type`** (not widget id). Descriptor-only: no bare React component as `default`.
+
+Plugin bundles are cached by file URL. `registerPlugin` registers bindings for each control type key; `ControlWrapper` resolves `ControlProps.dataSources` before render. Built-in bindings stay in the static table; plugin controls ship bindings on the descriptor control entry.
+
+Example: `samples/fe2-control-plugin.example.mjs`.
+
+The runtime control contract is `ControlProps` (`value`, `setValue`, `field`, `contentType`, `readonly`, `autoFocus`, optional `dataSources`). Host helpers:
+
+- `window.craftercms.formsEngine.dataSources` — DS module registry
+- `window.craftercms.formsEngine.controls` — `getControl(type)`, `registerDataSourceBindings`, `getDataSourceBindings`
+
+This path is functional for plugin metadata already present in a form definition. `customControlMap` exists as an override seam used by Type Builder descriptor forms. Validators, value retrievers, and serializers remain static maps/switches, so a truly novel control may still need more than a React component + bindings export.
+
+Additional current FE control gaps:
+
+- `hasJsController` is parsed onto the `ContentType` model but not consumed by React FE
+- Item/media controls group resolved actions by manager binding + intent (browse/search/upload/create). Every displayed choice retains its owning action; plugin `MenuItem`/`Dialog` actions use a standalone custom lane.
+
+`proposal.xml` sketches a `craftercms.components.FormsEngine` widget with a configurable control/validator map, but no current new-FE code path was found that reads that widget configuration.
+
+#### Data sources
+
+Phase 0 of the FE2 data-source runtime now provides the extension platform under
+`components/FormsEngine/dataSources/`:
+
+- versioned `DataSourceModule`, configured `DataSourceInstance`, action, capability, selection, service, and binding contracts;
+- a duplicate-safe module registry; plugin DS types load via `importPlugin` → `PluginDescriptor.dataSources` (see plugins companion §9);
+- ordered field binding resolution using control metadata (`itemManager`, `imageManager`, `videoManager`, `datasource`, and RTE managers);
+- built-in bindings in `controlDataSourceBindings`, plugin-control bindings from `PluginDescriptor.controls` / runtime registry;
+- interface matching, explicit resolution errors, asynchronous action resolution, and `ControlProps.dataSources` injection;
+- promise-based shared browse/search/upload/create services;
+- public host surfaces at `window.craftercms.formsEngine.dataSources` and `.controls`;
+- typed DS plugin locators with parse/serialize preservation.
+
+The configured `DataSource` remains the form-definition record:
+
+`{ id, type, title, interface, properties, plugin? }`
+
+It becomes executable only after the runtime resolves its type to a registered or dynamically imported `DataSourceModule`.
+
+Built-in `DataSourceModule`s are registered for all TB descriptors (except dead `flash-desktop-upload`, which ships as a stub). Consumers do not switch on configured DS type:
+
+- Resolution stamps each action with a stable `actionKey` (`dataSourceId::actionId`) and its binding.
+- `buildActionGroups` creates one presentation group per manager binding + intent while retaining an owner-bound `DataSourceActionChoice` for every concrete option.
+- NodeSelector keeps its richer create/type/path picker, but browse/search/upload and create acceptance invoke the selected owning action. Duplicate-looking create destinations expose the contributing datasource rather than silently merging behavior.
+- ImagePicker, VideoPicker, TranscodedVideoPicker, and RTE use grouped choices; custom `MenuItem`/`Dialog` actions remain standalone.
+- Dropdown / CheckboxGroup / LinkedDropdown use `instance.list`. Dropdown/LinkedDropdown may render multiple bound list groups; CheckboxGroup follows the TB/legacy single-datasource contract and uses the first list group only.
+- `createContent` resolves after the nested form saves or closes, allowing create actions to return semantic selections to the control.
+
+Legacy item-picker summaries are now a NodeSelector presentation adapter only. They carry owner-bound choices and are not an execution contract. Metadata-only media consolidation is retired.
+
+Datasource identity is retained at runtime by each choice but is deliberately **not yet persisted** into FE2/XB content XML. Restoring FE1's node-selector `item.datasource` round-trip is a separate compatibility change.
+
+Unknown ids, unknown types, plugin-load failures, and interface mismatches surface as `dataSources.errors` on the field. `checkBuiltInDataSourceRegistryCompleteness()` warns in development when a TB descriptor lacks an FE module.
+
+Type Builder copies plugin coordinates from `ui.xml` catalog entries when inserting controls and data sources; existing coordinates survive parse → edit → serialize.
+
+By contrast, control plugin metadata is explicitly moved to `field.properties.plugin`, dynamically loaded by FE, and serialized back out.
+
+#### Form controllers
+
+**Status:** design decided below; **not implemented**. `FormsEngine.tsx` still lists loading/execution as a TODO. `hasJsController` is parsed but unused at FE2 runtime.
+
+There is also a current naming/behavior mismatch in new TB:
+
+- `hasJsController` and its descriptor are labelled “Client-side Controller” and serialize as `<controller>`;
+- `TypeJsControllerSelector` currently opens `controller.groovy`, not `form-controller.js`;
+- `editTypeController` supports both filenames, but the selector calls only the Groovy path.
+
+Treat form-controller support and Groovy controller editing as separate problems. See **§5.9** for the FE2 form-controller design.
+
+### 5.6 Old-world virtues worth preserving
+
+- **Site-level discovery:** administrators can add catalog entries/plugins without rebuilding Studio.
+- **Self-contained runtime manifest:** plugin coordinates are copied into `form-definition.xml`; FE can execute a type independently of the TB catalog.
+- **Behavioral DS plugins:** DS behavior is encapsulated behind a loaded object/capability contract instead of centralized type switches.
+- **Shared extension protocol:** built-ins and plugins use the same constructor/module lifecycle.
+- **TB introspection:** one implementation declares its label, compatibility interface, properties, constraints, and suffixes.
+- **Caching and failure isolation:** module caching plus explicit loaded/not-loaded tracking.
+
+Legacy liabilities not to reproduce: global registries, YUI inheritance, script injection/Blob execution, `eval`, weakly typed method contracts, inconsistent naming, and controls reaching into DS-specific APIs.
+
+### 5.7 Design constraints for the next extension model
+
+Future design work should provide:
+
+1. Separate but linked descriptors for **TB configuration UI** and **FE runtime behavior**.
+2. A first-class, typed DS plugin/runtime contract; no switch on every concrete DS id.
+3. Capability/interface matching so controls request `item`, `image`, `browse`, `upload`, etc., without knowing implementation ids.
+4. Plugin coordinates preserved explicitly in the `DataSource` model and XML round-trip.
+5. A registry populated from code defaults + `ui.xml` additions/overrides/exclusions, with deterministic precedence.
+6. Extension seams for control rendering **and** associated validators/retrievers/serializers.
+7. Explicit form-controller lifecycle hooks designed for React/state semantics.
+8. Compatibility/migration rules for existing form definitions and FE1 plugins (FE1 control classes are not React-compatible).
+
+### 5.8 Plugin packaging and modern Studio runtime
+
+Detailed companion: [`type-builder-forms-engine-plugins.md`](type-builder-forms-engine-plugins.md).
+
+Keep three mechanisms distinct:
+
+1. A **project plugin package** (`craftercms-plugin.yaml` + `authoring/`) copies assets into a site and may auto-wire XML configuration.
+2. A **modern Studio UI plugin bundle** exports a `PluginDescriptor`; `Widget`/`plugin.ts` imports it and registers widgets, locales, scripts, and stylesheets.
+3. An **FE control/DS plugin** is selected by TB and persisted in `form-definition.xml`; legacy FE loads a YUI class, while new FE control loading expects a default-exported React component.
+
+Important findings:
+
+- Current public FE control/DS plugin docs describe the legacy `CStudioForms`/`CStudioAuthoring.Module.moduleLoaded` contract.
+- Existing `form-control` / `form-datasource` package installation auto-wires `site-config-tools.xml`, but new TB discovers its catalog from `ui.xml`.
+- New FE control and DS plugins load through `importPlugin` / `PluginDescriptor.controls` and `.dataSources` (not the widget registry).
+- FE2 control/DS plugins use `PluginDescriptor`; form controllers do **not** (see §5.9).
+- The local `authoring-ui-plugin-examples` `component-library` is the representative modern bundle/build pattern.
+- Package id, asset locator, runtime `PluginDescriptor.id`, widget id, and FE type/name are separate identities and must not be conflated.
+- A project plugin can deliver content types and a type-local `form-controller.js`; FE2 still loads that file by type identity, not via `importPlugin`.
+
+### 5.9 FE2 form-controller design (decided)
+
+Form controllers stay **content-type-local**, not catalog plugins. They are siblings of `form-definition.xml` / `controller.groovy`, gated by `<controller>true</controller>` → `contentType.hasJsController`.
+
+#### Why not `PluginDescriptor`
+
+Controls and data sources are reusable types selected from a TB catalog and referenced from many forms. A form controller is authored for **one** content type, lives in that type’s folder, and has no catalog entry. Reusing `importPlugin` would invent fake plugin coordinates for a single type-scoped script and conflate two extension kinds.
+
+A project plugin may still _ship_ a content type folder that includes `form-controller.js`; installation copies the type. Runtime loading remains “fetch this type’s controller file,” not “resolve a plugin locator.”
+
+#### File & gate
+
+| Piece        | Contract                                                                                                                                                                                |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Flag         | `hasJsController` / serialized `<controller>true\|false</controller>`                                                                                                                   |
+| Path in site | `/config/studio/content-types/{contentTypeId}/form-controller.js`                                                                                                                       |
+| Fetch API    | Existing authenticated endpoint: `/studio/api/2/configuration/content_types/{site}/form_controller?contentTypeId=…` (`getFetchLegacyFormControllerUrl` — un-deprecate / rename for FE2) |
+| When to load | Form bootstrap, only if `hasJsController === true`                                                                                                                                      |
+| On failure   | Log + continue without controller (same soft-fail posture as FE1)                                                                                                                       |
+
+Do **not** use a bare `<script src>` against that API (auth token / cookies); FE1 already moved to `getText` + Blob for that reason.
+
+#### Module format (FE2 only)
+
+Export an ESM module. Default export (or named `formController`) is a `FormController` object — **not** a YUI class and **not** a `PluginDescriptor`.
+
+All hooks may be sync or async. Host always `await`s them.
+
+```ts
+type MaybePromise<T> = T | Promise<T>;
+
+interface FormController {
+	/** Bump when breaking the host↔controller contract. */
+	apiVersion: 1;
+	/**
+	 * Called once after form context/atoms exist.
+	 * May return a cleanup (or a Promise of cleanup) invoked on form unmount / stack pop.
+	 */
+	initialize?(ctx: FormControllerContext): MaybePromise<void | (() => void)>;
+	/**
+	 * Return false to omit the field (or repeat definition) from the rendered form.
+	 * Default true. Async allowed — host awaits before first field paint for that form.
+	 */
+	isFieldRelevant?(field: ContentTypeField, ctx: FormControllerContext): MaybePromise<boolean>;
+	/**
+	 * Return false / rejected promise to veto save.
+	 * Called in `useSaveForm` after client validation snapshot, before XML write.
+	 */
+	onBeforeSave?(ctx: FormControllerContext): MaybePromise<boolean>;
+}
+
+// form-controller.js
+export default {
+	apiVersion: 1,
+	async initialize(ctx) {
+		/* may await; optional cleanup return */
+	},
+	async isFieldRelevant(field, ctx) {
+		return true;
+	},
+	async onBeforeSave(ctx) {
+		return true;
+	}
+};
+```
+
+**Async notes:**
+
+- `initialize` and `onBeforeSave` **must** support async (minimum bar).
+- `isFieldRelevant` is also async-capable for consistency; if any field check returns a Promise, the host awaits relevance for the whole form (or section batch) before rendering fields — show the normal form loading state until settled.
+- Rejected promises: treat like failure — log, soft-fail for `initialize` / relevance (field stays visible / no controller), veto save for `onBeforeSave`.
+
+**FE1 scripts are not loadable.** They register via `CStudioAuthoring.Module.moduleLoaded('{typeId}-controller', Class)` and extend `CStudioForms.FormController`. Same migration stance as FE1 DS → `DataSourceModule`: rewrite to the FE2 export. No dual-loader in v1 of this feature.
+
+#### Where the file lives and how FE2 loads it
+
+**On disk (site repo):**
+
+```text
+/config/studio/content-types/{contentTypeId}/form-controller.js
+```
+
+Example: `/config/studio/content-types/page/home/form-controller.js`.
+
+That is the authoring artifact TB creates/edits. It is **not** under `static-assets/plugins/…` and is **not** fetched with `buildFileUrl` / `importPlugin`.
+
+**Over the network:** Studio serves that file only through the authenticated configuration API (so the browser call includes session/auth):
+
+```text
+GET /studio/api/2/configuration/content_types/{site}/form_controller?contentTypeId={contentTypeId}
+```
+
+Helper today: `getFetchLegacyFormControllerUrl(site, contentTypeId)` in `services/contentTypes.ts` (un-deprecate / rename for FE2). Body is the raw JS source of `form-controller.js`.
+
+**In FE2 code (to implement):**
+
+| Piece     | Location                                                                                                                            |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| Loader    | New `FormsEngine/lib/formControllerLoader.ts` (or similar) — fetch text → Blob ESM `import` → cache                                 |
+| Call site | Form bootstrap in `FormsEngine.tsx` / `FormBootstrap` (where content type + value atoms are already known), **before** field render |
+| Relevance | Section/field mapping path that builds the visible field list                                                                       |
+| Save      | `lib/useSaveForm.tsx` before `buildContentXml` / write                                                                              |
+| Types     | `FormController` / `FormControllerContext` next to other FE types                                                                   |
+
+**Load sequence:**
+
+1. Form opens; content type is available. If `!contentType.hasJsController` → skip (no network call).
+2. Loader calls the form_controller API for `{ siteId, contentTypeId }` (cache hit → reuse).
+3. Response text → `Blob` (`application/javascript`) → object URL → `import(/* @vite-ignore */ blobUrl)` as ESM → revoke URL.
+4. Resolve `module.default ?? module.formController`; validate `apiVersion` (`1` or missing-as-1).
+5. Cache by `siteId + contentTypeId` for the session.
+6. `await initialize(ctx)`; keep returned cleanup on the form stack entry.
+7. Later: `await isFieldRelevant(...)` per field; `await onBeforeSave(ctx)` on save.
+
+Why Blob instead of pointing `<script>` / `import()` at the API URL: that endpoint requires auth; a raw script/module request does not reliably carry the same credentials FE1 needed — hence authenticated `getText` then Blob module (same constraint as FE1’s current loader).
+
+Host helpers may live under `window.craftercms.formsEngine.formControllers` (load/clear cache) for tests and debugging — optional, not required for authors.
+
+#### `FormControllerContext` (host-provided)
+
+Give controllers a narrow API over FE2 state — do not pass the raw YUI `form` or the full Jotai store:
+
+| Surface                                                          | Purpose                                                            |
+| ---------------------------------------------------------------- | ------------------------------------------------------------------ |
+| `siteId`, `contentType`, `path`, `mode`                          | Identity (`create` \| `edit` \| `embedded` \| `repeat`) + readonly |
+| `getValues()` / `getValue(fieldId)` / `setValue(fieldId, value)` | Read/write current field atoms                                     |
+| `getField(fieldId)` / `getContentType(id?)`                      | Field/type metadata                                                |
+| `isCreateMode`, `isEmbedded`, `readonly`                         | Mode flags                                                         |
+| Later (optional)                                                 | `subscribe(fieldId, cb)`, snackbar/dispatch helpers                |
+
+Controllers must not import React or reach into DOM for field visibility; relevance is declarative via `isFieldRelevant`.
+
+#### Integration points in FE2
+
+| Hook                      | Where                                                                                                                                               |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Load + `await initialize` | New loader called from `FormsEngine` / `FormBootstrap` after atoms exist, before field render                                                       |
+| Cleanup                   | Form unmount / stack pop                                                                                                                            |
+| `await isFieldRelevant`   | When mapping `contentType.sections` → visible fields (same place FE already strips `file-name` for embeds); wait before paint if any check is async |
+| `await onBeforeSave`      | `useSaveForm`, after validity snapshot / draft decision, **before** `buildContentXml` / write; veto restores submitting UI and stops                |
+
+Repeat-group / embedded child forms: load the **child type’s** controller when that type has `hasJsController`, with `mode: 'embedded' | 'repeat'`. Do not run the parent controller’s `isFieldRelevant` on child fields.
+
+#### TB companion fixes (required for authors)
+
+1. **Client-side Controller** UI must edit/create `form-controller.js`, not `controller.groovy`.
+2. Keep Groovy (`controller.groovy`) as a separate type property/action (server-side).
+3. Toggling `hasJsController` on should ensure the JS file exists (reuse `editTypeController(..., 'javascript')`).
+4. Optionally offer a stub FE2 controller template when creating the file.
+
+#### Non-goals (initial)
+
+- Registering form controllers on `PluginDescriptor`
+- Auto-adapting FE1 `moduleLoaded` controllers
+- Running controller code in the Type Builder virtual forms themselves
+- Persisting controller source inside `form-definition.xml`
+
+---
+
+## 6. Local reference site
+
+Site id/path: `crafterqai` sandbox under 4.x authoring data (path above).
+
+Useful examples:
+
+- Component type with thumbnail: `.../content-types/component/3ColFeatureGrid/`
+- Page content: `.../site/website/.../index.xml`
+- Matches samples’ `3ColFeatureGrid` / freeForm-style pages
+
+When validating XML shape changes, compare a live type folder + a saved content item side-by-side with `samples/`.
+
+---
+
+## 7. Agent operating guide
+
+### Recommended workflow for multi-agent / multi-session work
+
+1. **Canonical context = this markdown file** (versioned in repo). Not a Canvas: canvases are great for one-off visual analysis, poor as a shared durable backbone.
+2. **Thin Cursor rule** (`.cursor/rules/type-builder-forms-engine.mdc`) auto-attaches on TB/FE globs and tells the agent to read this doc first.
+3. **Start every new agent** with an explicit pointer, e.g.
+   `Read docs/type-builder-forms-engine.md, then <task>. Update the Progress / Open decisions sections when done.`
+4. **One concern per agent/PR** when possible (e.g. “FE NodeSelector save path” vs “drop config.xml backend contract”). Cross-cutting XML schema work should land decisions here before large implementations.
+5. **After durable discoveries**, append to _Progress_ or _Open decisions_ in the same change set (or immediately after). Do not rely on chat transcripts alone.
+6. Optional later: split a `docs/tb-fe-decision-log.md` if this file grows past ~easy skim; keep this file as the map + current state.
+
+### When editing
+
+- Prefer next React modules; treat legacy JS as behavior reference / fallback, not the destination.
+- Match existing patterns (MUI, react-intl, RxJS services, Jotai in FE).
+- Avoid drive-by refactors outside the task.
+
+### Quick “where do I look?”
+
+| Question                          | Start here                                                                                            |
+| --------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| Author form shell / save / stack  | `FormsEngine/FormsEngine.tsx`, `lib/useSaveForm.tsx`, `lib/formUtils.tsx`                             |
+| Control rendering                 | `lib/controlHelpers.tsx`, `lib/controlMap.ts`, `controls/*`                                           |
+| Legacy plugin URL/module protocol | `cstudio-common/common-api.js` (`getPluginInfo`, `Module`)                                            |
+| Legacy DS runtime                 | `forms-engine.js` (`_loadDatasources`), `cstudio-forms/data-sources/*`                                |
+| New FE DS interpretation          | `FormsEngine/dataSourceHooks/*`                                                                       |
+| Content XML in/out                | `lib/valueRetrievers.ts`, `lib/valueSerializers.ts`                                                   |
+| Type list / edit UI               | `ContentTypeManagement.tsx`, `components/EditTypeView.tsx`                                            |
+| New TB catalog configuration      | `EditTypeView.tsx` (`fetchSiteUiConfig`), `/config/studio/ui.xml`                                     |
+| Type XML out                      | `ContentTypeManagement/utils.ts` (`prepareSerializeToXmlTypeObject`)                                  |
+| Control property forms            | `descriptors/controls/*`, `TypeBuilderFormsEngine.tsx`                                                |
+| config.xml merge plan             | `ContentTypeManagement/config.xml`, `commonDescriptors.ts` comments, `ContentType.ts` serialize types |
+| Plugin packaging / runtime        | `docs/type-builder-forms-engine-plugins.md`, `services/plugin.ts`, `components/Widget/Widget.tsx`     |
+| Plugin / listing design           | `proposal.xml`, `samples/site-config-tools.xml`                                                       |
+| Legacy behavior                   | `content-types.js`, `forms-engine.js`                                                                 |
+
+---
+
+## 8. Open decisions / known constraints
+
+Separate **completed design decisions** (`[x]`) from **remaining implementation / validation** (`[ ]`).
+
+### Completed design decisions
+
+- [x] Define a typed dynamic DS runtime/plugin contract; current FE consumers hard-code DS ids in hooks. → `DataSourceModule` + actions/capabilities; controls consume `ControlProps.dataSources`.
+- [x] Preserve DS plugin metadata in the model, new-TB insertion, and XML serialization.
+- [x] **Single plugin model for FE data sources** — `PluginDescriptor.dataSources` registered by `registerPlugin`; `loadDataSourceModule` demand-loads via `importPlugin` only.
+- [x] **Single plugin model for FE controls** — `PluginDescriptor.controls` registered by `registerPlugin`; `controlPluginLoader` demand-loads via `importPlugin` + `field.type` lookup. See [`fe2-control-plugin-single-model-implementation.md`](fe2-control-plugin-single-model-implementation.md).
+- [x] **Form-controller design** — type-local FE2 ESM (`FormController` hooks), fetch via form_controller API, not `PluginDescriptor`. See §5.9. Implementation still open (below).
+- [x] **Control-plugin ownership** — after `importPlugin()`, ownership is validated against loaded `PluginDescriptor.id` (not the form-definition locator `pluginId`). See `controlPluginLoader.ts`.
+- [x] **Atomic FE plugin registration** — `registerPlugin` preflights all DS + control contributions before any registry commit.
+
+### Remaining implementation / validation
+
+- [ ] **Backend still requires `config.xml`** for several properties; UI cannot fully drop it yet.
+- [ ] **Allowed Destinations / paths / copy-delete deps / previewable** UI section intentionally incomplete until config merge is unblocked.
+- [ ] **Lib-style plugins** — eager load without dummy widgets + stable host path for `utils`. See plugins companion §9.8 items 2–3.
+- [ ] Reconcile new TB's code-default catalog proposal with current `ui.xml` allow-list behavior.
+- [ ] Implement/clarify descriptor merge precedence and plugin-coordinate propagation from `ui.xml` (and make lookup order consistent across insert/edit/save).
+- [ ] Decide whether `EditTypeView` should consume Redux `uiConfig` instead of fetching `/ui.xml` independently.
+- [ ] Implement FE2 form-controller load + lifecycle (`initialize` / `isFieldRelevant` / `onBeforeSave`) per §5.9; separate clearly from `controller.groovy`.
+- [ ] Align project-plugin auto-wiring with TB2 catalog discovery (`site-config-tools.xml` vs `ui.xml`) and define FE1 package migration.
+- [ ] Normalize plugin identity/locator vocabulary and resolve `file` vs `filename` across XML, frontend, docs, and backend.
+- [ ] Fix the `hasJsController` / “Client-side Controller” UI path currently opening `controller.groovy` (and wire FE2 to consume the flag).
+- [ ] **S3 / WebDAV capability stubs** — remote modules load but ops hard-fail via `unsupportedRemoteError` until `DataSourceServices` gains dedicated platform support.
+- [ ] **Non-rendering control-map entries** — `disabled`, `internal-name`, `link-input`, `link-textarea` (and any other null map slots) need real FE2 controls or an explicit retire/alias decision.
+- [ ] **FE2 Crafter-specific RTE plugin parity** — audit FE1 TinyMCE/Crafter plugins vs current `rteUtils` externals (`craftercms_paste`, `editform`, …) and implement missing FE2 equivalents.
+- [ ] **Focused compatibility / plugin tests** — no Jest/Vitest harness in `ui/app` yet; need coverage for locator≠descriptor id, multi-control URL, registry conflicts, atomic registration failure, partial DS resolve, and TB plugin locator round-trip.
+- [ ] Descriptor override strategy (proposal A deep-merge vs B full replace) — see `proposal.xml`; lean crawl→walk.
+- [ ] `LegacyFormDefinition` vs `SerializeToXmlContentTypeStructure` overlap — TODOs in `ContentType.ts` about consolidating after XML changes.
+- [ ] Section `id` / `color` added in TB2 — ensure round-trip and legacy compatibility.
+
+---
+
+## 9. Progress log
+
+Keep newest first. One short bullet per meaningful session.
+
+- **2026-08-03** — Convergence-gap audit reflected in §8: remaining work includes S3/WebDAV stubs, null control-map entries (`disabled` / `internal-name` / `link-input` / `link-textarea`), FE2 RTE plugin parity, and focused compatibility tests. Control-plugin `PluginDescriptor.id` ownership checks and atomic `registerPlugin` preflight were already implemented — recorded under completed design decisions, not left as open gaps.
+- **2026-08-03** — Refined §5.9: all `FormController` hooks may be async (host awaits); clarified on-disk path, form_controller API, and FE2 loader call site (`formControllerLoader` from form bootstrap — not `importPlugin`).
+- **2026-08-03** — Decided FE2 form-controller design (§5.9): keep type-local `form-controller.js` gated by `hasJsController`; load via authenticated form_controller API + ESM Blob import; export `FormController` hooks (`initialize`, `isFieldRelevant`, `onBeforeSave`) — **not** a `PluginDescriptor`. FE1 YUI controllers are incompatible (migrate by rewrite). TB must fix Client-side Controller to edit `form-controller.js` instead of Groovy. Implementation still TODO.
+- **2026-07-31** — Implemented FE control plugins on the single `PluginDescriptor` model: `controls` + `ControlPluginContribution`, `registerPluginControls`, control contribution registry, `controlPluginLoader` rewritten to `importPlugin` + `field.type` lookup (removed raw `import(url)` / bare default component). Sample: `samples/fe2-control-plugin.example.mjs`.
+- **2026-07-31** — Documented FE control plugin convergence spec (`fe2-control-plugin-single-model-implementation.md`): `PluginDescriptor.controls`, registry + `registerPluginControls`, rewrite `controlPluginLoader` to mirror DS `loadDataSourceModule`. Updated plugins companion §9.6/§9.8 and open decisions.
+- **2026-07-30** — Implemented single plugin model for FE data sources: `PluginDescriptor.dataSources`, `registerPlugin` installs into the DS registry, `loadDataSourceModule` only calls `importPlugin` + type lookup (removed bare-module packaging). Also fixed NodeSelector Create for shared-content with empty Default Type (`allowedCreatePaths`), and content-types reactivity for wildcard create actions.
+- **2026-07-27** — Documented the project-plugin package/install layer, modern `PluginDescriptor`/widget runtime, official FE1 control/DS contracts, and local `authoring-ui-plugin-examples` build flow in the plugin companion doc. Confirmed current FE2 controls use a separate direct-import convention, FE2 has no DS plugin runtime, legacy package auto-wiring targets `site-config-tools.xml`, and the example repo's `forms-engine` bundle is not connected to current FE. Follow-up from deeper review: non-React/`craftercms.define` registration paths, `build/` vs `dist/` outputs, Plugin Host app examples, and `fe-control-plugin.js` as an FE1 reference.
+- **2026-07-24** — Documented legacy/new control, DS, plugin, and form-controller architecture. Confirmed legacy TB catalog comes from `administration/site-config-tools.xml`; new TB reads `ui.xml`. New FE dynamically loads control plugins but interprets inert DS records through hard-coded consumer switches; DS plugin round-trip and form controllers are not implemented. Follow-up notes: descriptor lookup precedence is inconsistent by operation; `EditTypeView` bypasses Redux `uiConfig`; several FE control-map entries remain null.
+- **2026-07-24** — Created this context doc + Cursor rule for multi-agent handoff. Next TB is ContentTypeManagement, centered on `components/EditTypeView.tsx`. Primary near-term theme: unify type definition into form-definition.xml (blocked on backend config.xml usage).
diff --git a/studio-ui/ui/app/src/components/ContentTypeManagement/components/AdditionalFieldChip.tsx b/studio-ui/ui/app/src/components/ContentTypeManagement/components/AdditionalFieldChip.tsx
new file mode 100644
index 000000000..e13e9cf1f
--- /dev/null
+++ b/studio-ui/ui/app/src/components/ContentTypeManagement/components/AdditionalFieldChip.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import SubdirectoryArrowRightRoundedIcon from '@mui/icons-material/SubdirectoryArrowRightRounded';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import useIsDarkModeTheme from '../../../hooks/useIsDarkModeTheme';
+import { FormattedMessage } from 'react-intl';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import Tooltip from '@mui/material/Tooltip';
+import { processAdditionalFieldMacro } from '../../FormsEngine/lib/formUtils';
+
+export function AdditionalFieldChip(props: { parentFieldId: string; fieldId: string }) {
+	const { fieldId, parentFieldId } = props;
+	const isDark = useIsDarkModeTheme();
+
+	const additionalFieldId = processAdditionalFieldMacro(parentFieldId, fieldId);
+
+	return (
+		<Box display="flex" alignItems="center" sx={{ mb: 1 }}>
+			<SubdirectoryArrowRightRoundedIcon sx={{ ml: 3 }} />
+			<Box
+				sx={[
+					{
+						width: '100%',
+						bgcolor: isDark ? 'grey.800' : 'grey.200',
+						borderRadius: 10,
+						overflow: 'hidden',
+						border: '1px solid transparent',
+						px: 1.5,
+						py: 0.5,
+						display: 'flex',
+						justifyContent: 'space-between'
+					}
+				]}
+			>
+				<Typography component="span" variant="body2">
+					{additionalFieldId}
+				</Typography>
+				<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+					<Typography variant="body2" component="span">
+						<FormattedMessage defaultMessage="Additional Field" />
+					</Typography>
+					<Tooltip
+						title={
+							<FormattedMessage defaultMessage="An additional field is a field that this control has permission to edit, beyond its main value. " />
+						}
+						placement="top"
+					>
+						<InfoOutlinedIcon fontSize="small" />
+					</Tooltip>
+				</Box>
+			</Box>
+		</Box>
+	);
+}
+
+export default AdditionalFieldChip;
diff --git a/studio-ui/ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx b/studio-ui/ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx
index 66f529fc2..d51a4075e 100644
--- a/studio-ui/ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx
+++ b/studio-ui/ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx
@@ -18,6 +18,7 @@ import ContentType, {
 	ContentTypeField,
 	ContentTypeSection,
 	DataSource,
+	FormDefinitionPlugin,
 	NewContentTypeField,
 	NewDataSource,
 	PossibleContentTypeDraft
@@ -315,7 +316,7 @@ export const EditTypeView = forwardRef<HTMLDivElement, EditTypeAppProps>((props,
 		if (!closeAndCleanup()) return;
 
 		const controlDescriptor =
-			controlDescriptors[field.type as BuiltInControlType] ?? config.controls?.[field.type].descriptor;
+			controlDescriptors[field.type as BuiltInControlType] ?? config.controls?.[field.type]?.descriptor;
 		if (!controlDescriptor)
 			return showAlert(`No control descriptor found for field "${field.name}" of type "${field.type}"`);
 
@@ -578,29 +579,33 @@ export const EditTypeView = forwardRef<HTMLDivElement, EditTypeAppProps>((props,
 	const handleInsertField = (fieldType: string, position: number): void => {
 		const { sectionId, fieldPath } = insertFieldData;
 		setInsertFieldData({ sectionId: null });
-		const descriptor = controlDescriptors[fieldType] ?? config.controls?.[fieldType].descriptor;
+		const configEntry = config.controls?.[fieldType];
+		const descriptor = controlDescriptors[fieldType] ?? configEntry?.descriptor;
 		if (!descriptor) {
 			showAlert(`No control descriptor found for field type "${fieldType}"`);
 			return;
 		}
-		const newField = getNewFieldFromDescriptor(fieldType, descriptor);
+		const newField = getNewFieldFromDescriptor(fieldType, descriptor, configEntry);
 		const newFieldPath = fieldPath ? `${fieldPath}.${NEW_FIELD_ID}` : NEW_FIELD_ID;
 		setType(addField(type, newField, newFieldPath, sectionId, position));
+		onUpdateHasPendingChanges(true);
 		handleFieldSelected(newFieldPath, newField, sectionId);
 	};
 	const handleInsertDataSource = (dataSourceType: string, position: number) => {
-		const descriptor = dataSourceDescriptors[dataSourceType] ?? config.dataSources?.[dataSourceType].descriptor;
+		const configEntry = config.dataSources?.[dataSourceType];
+		const descriptor = dataSourceDescriptors[dataSourceType] ?? configEntry?.descriptor;
 		if (!descriptor) {
 			showAlert(`No data source descriptor found for type "${dataSourceType}"`);
 			return;
 		}
 
-		const newDataSource = getNewDataSourceFromDescriptor(dataSourceType, descriptor);
+		const newDataSource = getNewDataSourceFromDescriptor(dataSourceType, descriptor, configEntry);
 
 		setOpenDataSourceInserter(false);
 		const nextDataSources = type.dataSources?.concat() ?? [];
 		nextDataSources.splice(position, 0, newDataSource);
 		setType({ ...type, dataSources: nextDataSources });
+		onUpdateHasPendingChanges(true);
 		handleDataSourceSelected(newDataSource);
 	};
 	// endregion
@@ -1181,8 +1186,14 @@ function updateTypeFromDataSourceUpdate(
 	const nextDataSource = { ...selectedDataSource };
 	// When updating a new data source, we need to exclude NEW prop from the new datasource content
 	delete (nextDataSource as NewDataSource).NEW;
-	const { title, id, ...properties }: Partial<DataSource> = serializedValues;
-	updatedType.dataSources[index] = { ...nextDataSource, id, title, properties };
+	const { title, id, plugin, ...properties } = serializedValues;
+	updatedType.dataSources[index] = {
+		...nextDataSource,
+		id: id as string,
+		title: title as string,
+		properties,
+		...(plugin ? { plugin: plugin as DataSource['plugin'] } : {})
+	};
 	return updatedType;
 }
 
@@ -1268,7 +1279,11 @@ function parseConfigPlugins(
 	return createLookupTable(parsedPlugins);
 }
 
-function getNewFieldFromDescriptor(fieldType: string, descriptor: DescriptorContentType): NewContentTypeField {
+function getNewFieldFromDescriptor(
+	fieldType: string,
+	descriptor: DescriptorContentType,
+	configEntry?: { plugin?: FormDefinitionPlugin; descriptor?: DescriptorContentType }
+): NewContentTypeField {
 	const newField: NewContentTypeField = {
 		NEW: true,
 		id: systemFieldsIdsMap[fieldType] ?? null,
@@ -1287,11 +1302,19 @@ function getNewFieldFromDescriptor(fieldType: string, descriptor: DescriptorCont
 
 	newField.properties = properties;
 	newField.validations = validations;
+	const plugin = extractPluginLocatorFromConfigEntry(configEntry);
+	if (plugin) {
+		Object.assign(newField.properties, { plugin });
+	}
 
 	return newField;
 }
 
-function getNewDataSourceFromDescriptor(dataSourceType: string, descriptor: DescriptorContentType): NewDataSource {
+function getNewDataSourceFromDescriptor(
+	dataSourceType: string,
+	descriptor: DescriptorContentType,
+	configEntry?: { plugin?: FormDefinitionPlugin; descriptor?: DescriptorContentType }
+): NewDataSource {
 	const newDataSource: NewDataSource = {
 		NEW: true,
 		id: '',
@@ -1309,10 +1332,39 @@ function getNewDataSourceFromDescriptor(dataSourceType: string, descriptor: Desc
 	const properties = {};
 	propertiesFieldIds.forEach((field) => (properties[field] = descriptor.fields[field]?.defaultValue));
 	newDataSource.properties = properties;
+	const plugin = extractPluginLocatorFromConfigEntry(configEntry);
+	if (plugin) {
+		newDataSource.plugin = plugin;
+	}
 
 	return newDataSource;
 }
 
+function extractPluginLocatorFromConfigEntry(
+	configEntry?: { plugin?: FormDefinitionPlugin | Record<string, unknown> } & Record<string, unknown>
+): FormDefinitionPlugin | undefined {
+	if (!configEntry?.plugin || typeof configEntry.plugin !== 'object') return undefined;
+	const raw = configEntry.plugin as Record<string, unknown>;
+	// ui.xml attribute form: <plugin id type name fileName />; form-definition uses pluginId/filename.
+	const type = raw.type;
+	const name = raw.name;
+	const filename = raw.filename ?? raw.fileName ?? raw.file;
+	const pluginId = raw.pluginId ?? raw.id;
+	if (
+		typeof type === 'string' &&
+		typeof name === 'string' &&
+		typeof filename === 'string' &&
+		typeof pluginId === 'string' &&
+		type &&
+		name &&
+		filename &&
+		pluginId
+	) {
+		return { type, name, filename, pluginId };
+	}
+	return undefined;
+}
+
 function reorderSectionFields(
 	type: ContentType,
 	fields: ReorderFieldsDialogProps['fields'],
diff --git a/studio-ui/ui/app/src/components/ContentTypeManagement/components/FieldChip.tsx b/studio-ui/ui/app/src/components/ContentTypeManagement/components/FieldChip.tsx
index c7b5d73e9..d9b609b81 100644
--- a/studio-ui/ui/app/src/components/ContentTypeManagement/components/FieldChip.tsx
+++ b/studio-ui/ui/app/src/components/ContentTypeManagement/components/FieldChip.tsx
@@ -32,6 +32,7 @@ import controlDescriptors from '../descriptors/controls';
 import dataSourceDescriptors from '../descriptors/dataSources';
 import { applyTranslations } from '../utils';
 import Button from '@mui/material/Button';
+import AdditionalFieldChip from './AdditionalFieldChip';
 
 function composeFieldPath(fieldPath: string, fieldId: string): string {
 	return fieldPath ? `${fieldPath}.${fieldId}` : fieldId;
@@ -77,90 +78,97 @@ export function FieldChip(props: FieldChipProps) {
 		'&:hover': { bgcolor: 'action.selected' }
 	};
 	const { formatMessage } = useIntl();
+	const descriptor = descriptors[field.type];
+	const additionalFields = descriptor?.metadata?.additionalFields;
 	return (
-		<Root
-			disabled={isSelected}
-			sx={[
-				{
-					mb: 1,
-					width: '100%',
-					alignItems: 'start',
-					flexDirection: 'column',
-					bgcolor: isDark ? 'grey.800' : 'grey.200',
-					borderRadius: 10,
-					overflow: 'hidden',
-					borderWidth: '1px',
-					borderStyle: 'solid',
-					borderColor: 'transparent'
-				},
-				isRepeat ? { borderRadius: 2 } : selectorButtonStyles,
-				isSelected && selectorButtonSelectedStyles,
-				error && { borderWidth: '1px', borderStyle: 'solid', borderColor: 'error.main' }
-			]}
-			// @ts-expect-error: Handled. Only when it is a button will it receive the onClick.
-			onClick={isRepeat ? undefined : onClick}
-		>
-			<Box
-				component={Title}
-				// @ts-expect-error: Handled. Only when it is a button will it receive the onClick.
-				onClick={isRepeat ? onClick : undefined}
+		<>
+			<Root
 				disabled={isSelected}
 				sx={[
 					{
-						px: 1.5,
-						py: 0.5,
+						mb: 1,
 						width: '100%',
-						display: 'flex',
-						flexWrap: 'wrap',
-						alignItems: 'center',
-						justifyContent: 'space-between'
+						alignItems: 'start',
+						flexDirection: 'column',
+						bgcolor: isDark ? 'grey.800' : 'grey.200',
+						borderRadius: 10,
+						overflow: 'hidden',
+						borderWidth: '1px',
+						borderStyle: 'solid',
+						borderColor: 'transparent'
 					},
-					isRepeat && selectorButtonStyles,
-					error && { color: 'error.main' }
+					isRepeat ? { borderRadius: 2 } : selectorButtonStyles,
+					isSelected && selectorButtonSelectedStyles,
+					error && { borderWidth: '1px', borderStyle: 'solid', borderColor: 'error.main' }
 				]}
+				// @ts-expect-error: Handled. Only when it is a button will it receive the onClick.
+				onClick={isRepeat ? undefined : onClick}
 			>
-				<Box display="flex" alignItems="center">
-					{(field as NewContentTypeField).NEW ? (
-						<Typography component="strong" sx={{ mr: 0.5, fontWeight: 600 }}>
-							<FormattedMessage defaultMessage={`Draft ({type})`} values={{ type: field.type }} />
-						</Typography>
-					) : (
-						<>
+				<Box
+					component={Title}
+					// @ts-expect-error: Handled. Only when it is a button will it receive the onClick.
+					onClick={isRepeat ? onClick : undefined}
+					disabled={isSelected}
+					sx={[
+						{
+							px: 1.5,
+							py: 0.5,
+							width: '100%',
+							display: 'flex',
+							flexWrap: 'wrap',
+							alignItems: 'center',
+							justifyContent: 'space-between'
+						},
+						isRepeat && selectorButtonStyles,
+						error && { color: 'error.main' }
+					]}
+				>
+					<Box display="flex" alignItems="center">
+						{(field as NewContentTypeField).NEW ? (
 							<Typography component="strong" sx={{ mr: 0.5, fontWeight: 600 }}>
-								{field.name}
+								<FormattedMessage defaultMessage={`Draft ({type})`} values={{ type: field.type }} />
 							</Typography>
-							<Typography component="span" variant="body2">
-								({field.id})
-							</Typography>
-						</>
-					)}
-					{error && <Asterisk fontSize="small" />}
-				</Box>
-				<Typography variant="body2">
-					{descriptors[field.type]
-						? applyTranslations(descriptors[field.type], formatMessage).name
-						: capitalize(field.type).replaceAll('-', ' ')}
-				</Typography>
-			</Box>
-			{isRepeat && (
-				<Box p={1} pt={0}>
-					{Object.entries(field.fields).map(([fieldId, subField]) => (
-						<FieldChip
-							key={fieldId}
-							field={subField}
-							fieldPathsWithErrors={fieldPathsWithErrors}
-							selectedFieldIdPath={selectedFieldIdPath}
-							fieldPath={currentFieldPath}
-							onFieldSelected={onFieldSelected}
-							onInsertField={onInsertField}
-						/>
-					))}
-					<Button onClick={() => onInsertField(currentFieldPath)}>
-						<FormattedMessage defaultMessage="Add Field" />
-					</Button>
+						) : (
+							<>
+								<Typography component="strong" sx={{ mr: 0.5, fontWeight: 600 }}>
+									{field.name}
+								</Typography>
+								<Typography component="span" variant="body2">
+									({field.id})
+								</Typography>
+							</>
+						)}
+						{error && <Asterisk fontSize="small" />}
+					</Box>
+					<Typography variant="body2">
+						{descriptors[field.type]
+							? applyTranslations(descriptors[field.type], formatMessage).name
+							: capitalize(field.type).replaceAll('-', ' ')}
+					</Typography>
 				</Box>
-			)}
-		</Root>
+				{isRepeat && (
+					<Box p={1} pt={0}>
+						{Object.entries(field.fields).map(([fieldId, subField]) => (
+							<FieldChip
+								key={fieldId}
+								field={subField}
+								fieldPathsWithErrors={fieldPathsWithErrors}
+								selectedFieldIdPath={selectedFieldIdPath}
+								fieldPath={currentFieldPath}
+								onFieldSelected={onFieldSelected}
+								onInsertField={onInsertField}
+							/>
+						))}
+						<Button onClick={() => onInsertField(currentFieldPath)}>
+							<FormattedMessage defaultMessage="Add Field" />
+						</Button>
+					</Box>
+				)}
+			</Root>
+			{additionalFields?.map((additionalFieldId) => (
+				<AdditionalFieldChip key={additionalFieldId} fieldId={additionalFieldId} parentFieldId={field.id} />
+			))}
+		</>
 	);
 }
 
diff --git a/studio-ui/ui/app/src/components/ContentTypeManagement/components/PickControlDialog.tsx b/studio-ui/ui/app/src/components/ContentTypeManagement/components/PickControlDialog.tsx
index f4d7e4929..764393369 100644
--- a/studio-ui/ui/app/src/components/ContentTypeManagement/components/PickControlDialog.tsx
+++ b/studio-ui/ui/app/src/components/ContentTypeManagement/components/PickControlDialog.tsx
@@ -79,16 +79,17 @@ export function PickControlDialog(props: PickControlDialogProps) {
 		return { sectionFields };
 	}, [fieldIdPath, sectionId, type]);
 
-	// Before rendering the PickFieldDialog we need to do two things:
+	// Before rendering the PickFieldDialog we need to:
 	// 1. Filter out the controls that are in the controlExclusions list.
 	// 2. Filter out OOB controls not in the configuration list.
 	// 3. Add the configDescriptors (plugins) to the list of controls.
+	// 4. Exclude rootOnly controls when inserting into a nested/repeat field path.
 	const typesFullList = [
 		...types.filter((type) => {
 			return configControls?.[type.id] && !(controlExclusions ?? []).includes(type.id);
 		}),
 		...(configDescriptors ?? [])
-	];
+	].filter((controlType) => !(fieldIdPath && controlType.metadata?.rootOnly));
 
 	return (
 		<PickFieldDialog
diff --git a/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts b/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts
index 9418f3844..3b9cd8784 100644
--- a/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts
+++ b/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts
@@ -116,7 +116,8 @@ export const dateTimeDescriptor: DescriptorContentType = {
 		required: commonFieldPropertiesDescriptors['required']
 	},
 	metadata: {
-		suffixes: ['_dt']
+		suffixes: ['_dt'],
+		additionalFields: ['{id}_tz']
 	}
 };
 
diff --git a/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/expiredDate.ts b/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/expiredDate.ts
index b58750618..0b284d3b0 100644
--- a/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/expiredDate.ts
+++ b/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/expiredDate.ts
@@ -139,7 +139,9 @@ export const expiredDateDescriptor: DescriptorContentType = {
 		}
 	},
 	metadata: {
-		suffixes: ['_dt']
+		suffixes: ['_dt'],
+		// DateTime control reads `${field.id}_tz`; bootstrap must create this atom.
+		additionalFields: ['{id}_tz']
 	}
 };
 
diff --git a/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/pageNavOrder.ts b/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/pageNavOrder.ts
index b9be46186..63f394fae 100644
--- a/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/pageNavOrder.ts
+++ b/studio-ui/ui/app/src/components/ContentTypeManagement/descriptors/controls/pageNavOrder.ts
@@ -37,6 +37,12 @@ export const pageNavOrderDescriptor: DescriptorContentType = {
 	fields: {
 		readonly: commonFieldPropertiesDescriptors['readonly'],
 		required: commonFieldPropertiesDescriptors['required']
+	},
+	metadata: {
+		// Root-only: placeInNav / orderDefault_f belong on the content type, not inside repeats.
+		rootOnly: true,
+		// FE1 stores nav sort order in this sibling tag; FE2 treats it as an additional field atom.
+		additionalFields: ['orderDefault_f']
 	}
 };
 
diff --git a/studio-ui/ui/app/src/components/ContentTypeManagement/utils.ts b/studio-ui/ui/app/src/components/ContentTypeManagement/utils.ts
index 2e40b8b1c..d27c1a7df 100644
--- a/studio-ui/ui/app/src/components/ContentTypeManagement/utils.ts
+++ b/studio-ui/ui/app/src/components/ContentTypeManagement/utils.ts
@@ -318,6 +318,8 @@ export type DescriptorContentType = Pick<ContentType, 'id'> & {
 	metadata?: {
 		suffixes?: string[];
 		additionalFields?: string[];
+		/** When true, control may only be inserted at the content-type root (not inside repeats/nested fields). E.g. placeInNav / orderDefault_f should not be nested/ */
+		rootOnly?: boolean;
 	};
 };
 
@@ -720,6 +722,7 @@ function convertDataSourceStructToXmlStruct(
 		interface: dataSource.interface,
 		title: dataSource.title,
 		type: dataSource.type,
+		plugin: dataSource.plugin,
 		properties: {
 			// TODO: Ideally, suppress these objects into simple key-value pairs.
 			//   <properties>
diff --git a/studio-ui/ui/app/src/components/DateTimeTimezonePicker/DateTimeTimezonePicker.tsx b/studio-ui/ui/app/src/components/DateTimeTimezonePicker/DateTimeTimezonePicker.tsx
index 9bcca763a..87889e8a7 100644
--- a/studio-ui/ui/app/src/components/DateTimeTimezonePicker/DateTimeTimezonePicker.tsx
+++ b/studio-ui/ui/app/src/components/DateTimeTimezonePicker/DateTimeTimezonePicker.tsx
@@ -39,6 +39,7 @@ import type { PartialSxRecord } from '../../models';
 export interface DateTimeTimezonePickerProps {
 	id?: string;
 	value: string | Date | number | null;
+	timezoneValue?: string;
 	disabled?: boolean;
 	disablePast?: boolean;
 	autoUpdatePastDate?: boolean;
@@ -51,6 +52,7 @@ export interface DateTimeTimezonePickerProps {
 	size?: TextFieldProps['size'];
 	onError?: DateTimePickerProps['onError'];
 	onChange?(date: Date): void;
+	onTimezoneChange?(timezone: string): void;
 }
 
 export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
@@ -59,6 +61,7 @@ export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
 	const {
 		id,
 		value: dateProp,
+		timezoneValue,
 		disabled = false,
 		disablePast = false,
 		autoUpdatePastDate = false,
@@ -70,12 +73,15 @@ export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
 		sxs = {},
 		size = 'small',
 		onChange,
+		onTimezoneChange,
 		onError
 	} = props;
 	const hour12 = dateTimeFormatOptions?.hour12;
 	const timeZones = useMemo(() => moment.tz.names(), []);
 	const [selectedDate, setSelectedDate] = useState<Moment | null>(null);
-	const [selectedTimezone, setSelectedTimezone] = useState<string | null>(resolvedLocaleData.timeZone ?? null);
+	const [selectedTimezone, setSelectedTimezone] = useState<string | null>(
+		timezoneValue ? timezoneValue : (resolvedLocaleData.timeZone ?? null)
+	);
 	// The control timezone lags behind selectedTimezone. It is only updated when there's a different
 	// selectedTimezone to the navigator's locale, and the value (date) prop changes.
 	const [controlTimezone, setControlTimezone] = useState<string | null>(resolvedLocaleData.timeZone ?? null);
@@ -88,6 +94,12 @@ export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
 		disablePast,
 		onChange
 	});
+	// Keep local timezone state aligned when the bound form value loads/changes after mount.
+	useEffect(() => {
+		if (timezoneValue != null) {
+			setSelectedTimezone(timezoneValue);
+		}
+	}, [timezoneValue]);
 	const handleChange = ((newValue) => {
 		if (!newValue) return;
 		// Only set the value change if the date is valid and different from current.
@@ -100,6 +112,7 @@ export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
 		event.preventDefault();
 		event.stopPropagation();
 		setSelectedTimezone(value);
+		onTimezoneChange?.(value);
 	}) as AutocompleteProps<string, false, true, boolean>['onChange'];
 	useEffect(() => {
 		if (!dateProp) {
diff --git a/studio-ui/ui/app/src/components/FormsEngine/FormsEngine.tsx b/studio-ui/ui/app/src/components/FormsEngine/FormsEngine.tsx
index fb0fe6c0c..cd52de559 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/FormsEngine.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/FormsEngine.tsx
@@ -96,6 +96,8 @@ import {
 	displayFormBeingSavedSnack,
 	fetchUpdateRequirements,
 	generateDefaultChangesComment,
+	getAdditionalFieldsIdsFromDescriptor,
+	resolveControlDescriptors,
 	getCurrentChildFormStateSummary,
 	getScrollContainer,
 	getTargetHeight,
@@ -283,6 +285,7 @@ function FormBootstrap(props: FormsEngineProps) {
 	const [reloadNonce, setReloadNonce] = useState(0);
 	const triggerReload = useCallback(() => setReloadNonce((nonce) => nonce + 1), []);
 	const effectiveUpdatePath = renamedPath ?? update?.path;
+	const customControls = useSelection((state) => state.uiConfig.controls);
 
 	const contextApi = useMemo<FormsEngineFormApiContextProps>(() => {
 		const getInitialValues = () => stableFormContextRef.current.originalValues;
@@ -374,7 +377,7 @@ function FormBootstrap(props: FormsEngineProps) {
 				expandedStateBySectionId: buildSectionExpandedStateAtoms(contentType.sections),
 				fileName: atom('')
 			});
-			const atomValueCreator: Parameters<typeof createParsedValuesObject>[3] = (fieldId, value) => {
+			const atomValueCreator: Parameters<typeof createParsedValuesObject>[3] = (fieldId, value, isAdditional) => {
 				setFieldAtoms(
 					stableFormContextRef,
 					contentType,
@@ -382,15 +385,42 @@ function FormBootstrap(props: FormsEngineProps) {
 					fieldId,
 					atoms,
 					value,
-					{ siteId, contentTypesById: effectRefs.current.contentTypesById }
+					{ siteId, contentTypesById: effectRefs.current.contentTypesById },
+					isAdditional
 				);
 			};
-			const values =
-				repeat.values ??
-				createParsedValuesObject(fieldsToRender, {}, effectRefs.current.contentTypesById, atomValueCreator);
+			const values = repeat.values
+				? { ...repeat.values }
+				: createParsedValuesObject(
+						fieldsToRender,
+						{},
+						effectRefs.current.contentTypesById,
+						atomValueCreator,
+						customControls
+					);
 
+			const descriptors = resolveControlDescriptors(customControls);
+			const additionalFieldsIds: string[] = [];
 			// If repeat.values was provided, `createCleanValuesObject` didn't run; hence, atomValueCreator needs to be run manually.
-			repeat.values && Object.keys(values).forEach((fieldId) => atomValueCreator(fieldId, values[fieldId]));
+			if (repeat.values) {
+				// First gather all additional fields ids from the provided values
+				(fieldsToRender ?? []).forEach((field) => {
+					const descriptor = descriptors[field.type];
+					if (!descriptor) return;
+					additionalFieldsIds.push(...getAdditionalFieldsIdsFromDescriptor(field.id, descriptor));
+				});
+				// Ensure descriptor additional fields exist in values so atoms are created
+				additionalFieldsIds.forEach((additionalFieldId) => {
+					if (!(additionalFieldId in values)) {
+						values[additionalFieldId] = undefined;
+					}
+				});
+				// Run atomValueCreator for each field considering the additional fields
+				Object.keys(values).forEach((fieldId) => {
+					const isAdditional = additionalFieldsIds.includes(fieldId);
+					atomValueCreator(fieldId, values[fieldId], isAdditional);
+				});
+			}
 
 			const xmlDoc = fromString(parentStackData.itemMeta.contentXml ?? '');
 			const fieldId = repeat.fieldId;
@@ -431,7 +461,8 @@ function FormBootstrap(props: FormsEngineProps) {
 					stableFormContextRef,
 					parentPathInSite,
 					siteId,
-					contentTypesById: effectRefs.current.contentTypesById
+					contentTypesById: effectRefs.current.contentTypesById,
+					customControls
 				});
 				initializeState(requirements.atoms, requirements.values, requirements.itemMeta);
 			};
@@ -463,12 +494,24 @@ function FormBootstrap(props: FormsEngineProps) {
 				fileName: atom('')
 			});
 			const contentObject = createObjectWithSystemProps(contentType);
-			const values = createParsedValuesObject(contentType.fields, contentObject, contentTypesById, (fieldId, value) => {
-				setFieldAtoms(stableFormContextRef, contentType, contentType.fields, fieldId, atoms, value, {
-					siteId,
-					contentTypesById
-				});
-			});
+			const values = createParsedValuesObject(
+				contentType.fields,
+				contentObject,
+				contentTypesById,
+				(fieldId, value, isAdditional) => {
+					setFieldAtoms(
+						stableFormContextRef,
+						contentType,
+						contentType.fields,
+						fieldId,
+						atoms,
+						value,
+						{ siteId, contentTypesById },
+						isAdditional
+					);
+				},
+				customControls
+			);
 			const { [XmlKeys.fileName]: _, ...valuesWithoutFileName } = values;
 
 			const objectId = contentObject[XmlKeys.modelId] as string;
@@ -531,7 +574,7 @@ function FormBootstrap(props: FormsEngineProps) {
 						requirements.contentType.fields,
 						requirements.contentObject,
 						effectRefs.current.contentTypesById,
-						(fieldId, value) => {
+						(fieldId, value, isAdditional) => {
 							setFieldAtoms(
 								stableFormContextRef,
 								requirements.contentType,
@@ -539,9 +582,11 @@ function FormBootstrap(props: FormsEngineProps) {
 								fieldId,
 								atoms,
 								value,
-								{ siteId, contentTypesById }
+								{ siteId, contentTypesById },
+								isAdditional
 							);
-						}
+						},
+						customControls
 					);
 
 					initializeState(atoms, values, {
@@ -560,6 +605,7 @@ function FormBootstrap(props: FormsEngineProps) {
 	}, [
 		contentTypesLoaded,
 		create,
+		customControls,
 		dispatch,
 		effectRefs,
 		fieldsToRender,
diff --git a/studio-ui/ui/app/src/components/FormsEngine/components/GroupedDataSourceActionMenuItems.tsx b/studio-ui/ui/app/src/components/FormsEngine/components/GroupedDataSourceActionMenuItems.tsx
new file mode 100644
index 000000000..ff3295bee
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/components/GroupedDataSourceActionMenuItems.tsx
@@ -0,0 +1,203 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useMemo, useState, type MouseEvent } from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import { buildActionGroups, invokeActionChoice, invokeResolvedAction } from '../dataSources/actionAdapters';
+import type {
+	DataSourceActionGroup,
+	DataSourceFieldContext,
+	DataSourceSelection,
+	ResolvedDataSourceAction
+} from '../dataSources/types';
+
+/**
+ * Props for {@link GroupedDataSourceActionMenuItems}.
+ *
+ * Render this component as children of an open MUI `Menu` (or similar); it emits `MenuItem`s
+ * (and nested menus / dialogs) rather than owning the outer menu shell.
+ */
+export interface GroupedDataSourceActionMenuItemsProps {
+	/** Flat list of resolved field actions; grouped via {@link buildActionGroups}. */
+	actions: readonly ResolvedDataSourceAction[];
+	/** Field/runtime context forwarded to `run`, custom `MenuItem`, and `Dialog`. */
+	context: DataSourceFieldContext;
+	/** When true, disables group and custom menu items (and nested choice items). */
+	disabled?: boolean;
+	/** Called with the selection (or `null`) after a successful action / dialog. */
+	onResult(selection: DataSourceSelection | DataSourceSelection[] | null): void;
+	/** Called when an invoked action / dialog rejects. */
+	onError(error: unknown): void;
+	/**
+	 * Optional close hook for the host menu. Invoked after `onResult` / `onError` so pickers can
+	 * dismiss their add/actions menu once a flow finishes.
+	 */
+	onMenuClose?(): void;
+	/** Forwarded from the host MenuList onto the first direct MenuItem for initial focus. */
+	autoFocus?: boolean;
+	/** Forwarded from the host MenuList onto the first direct MenuItem for keyboard nav. */
+	tabIndex?: number;
+}
+
+/**
+ * Menu items for Forms Engine data-source actions, grouped by intent.
+ *
+ * Turns a flat {@link ResolvedDataSourceAction} list into the “add / browse / upload / …” menu
+ * used by media and item pickers:
+ *
+ * - **Standard kinds** (`browse`, `search`, `upload`, `create`) are collapsed by
+ *   {@link buildActionGroups} into one top-level item per binding property + kind (e.g. a single
+ *   “Browse” even when several data sources offer browse).
+ * - A group with **one** choice runs immediately via {@link invokeActionChoice}.
+ * - A group with **multiple** choices opens a nested submenu so the author picks the concrete
+ *   data source / create target.
+ * - **Custom** actions (`MenuItem`, `Dialog`, or non-standard `kind`) stay ungrouped: custom
+ *   `MenuItem` components render as-is; `Dialog` actions mount their dialog on click; otherwise
+ *   {@link invokeResolvedAction} runs.
+ *
+ * Used by ImagePicker, VideoPicker, TranscodedVideoPicker, RichTextEditor, and NodeSelector
+ * (custom actions). Pair with `useFieldDataSources` (or equivalent) for the `actions` /
+ * `context` inputs.
+ *
+ * @example
+ * ```tsx
+ * <Menu open={open} onClose={() => setOpen(false)}>
+ *   <GroupedDataSourceActionMenuItems
+ *     actions={dataSources.actions}
+ *     context={dataSources.context}
+ *     onResult={applySelection}
+ *     onError={console.error}
+ *     onMenuClose={() => setOpen(false)}
+ *   />
+ * </Menu>
+ * ```
+ */
+export function GroupedDataSourceActionMenuItems({
+	actions,
+	context,
+	disabled,
+	onResult,
+	onError,
+	onMenuClose,
+	autoFocus,
+	tabIndex
+}: GroupedDataSourceActionMenuItemsProps) {
+	const { groups, customActions } = useMemo(() => buildActionGroups(actions), [actions]);
+	const [choiceAnchor, setChoiceAnchor] = useState<HTMLElement | null>(null);
+	const [choiceGroup, setChoiceGroup] = useState<DataSourceActionGroup | null>(null);
+	const [dialogAction, setDialogAction] = useState<ResolvedDataSourceAction | null>(null);
+	const focusProps = { autoFocus, tabIndex };
+
+	const closeChoices = () => {
+		setChoiceAnchor(null);
+		setChoiceGroup(null);
+	};
+	const handleResult = (selection: DataSourceSelection | DataSourceSelection[] | null) => {
+		onResult(selection);
+		onMenuClose?.();
+	};
+	const handleError = (error: unknown) => {
+		onError(error);
+		onMenuClose?.();
+	};
+	const runGroup = (group: DataSourceActionGroup, event: MouseEvent<HTMLElement>) => {
+		if (group.choices.length === 1) {
+			invokeActionChoice(group.choices[0], context).then(handleResult).catch(handleError);
+		} else {
+			setChoiceGroup(group);
+			setChoiceAnchor(event.currentTarget);
+		}
+	};
+	const runCustom = (action: ResolvedDataSourceAction) => {
+		if (action.Dialog) {
+			setDialogAction(action);
+		} else {
+			invokeResolvedAction(action, context).then(handleResult).catch(handleError);
+		}
+	};
+
+	return (
+		<>
+			{groups.map((group, index) => (
+				<MenuItem
+					key={group.key}
+					{...(index === 0 ? focusProps : undefined)}
+					disabled={disabled || group.choices.length === 0}
+					onClick={(e) => runGroup(group, e)}
+				>
+					{group.icon}
+					{group.label}
+				</MenuItem>
+			))}
+			{customActions.map((action, index) =>
+				action.MenuItem ? (
+					<action.MenuItem
+						key={action.actionKey}
+						{...(groups.length === 0 && index === 0 ? focusProps : undefined)}
+						action={action}
+						context={context}
+						disabled={disabled}
+						onResult={handleResult}
+						onError={handleError}
+					/>
+				) : (
+					<MenuItem
+						key={action.actionKey}
+						{...(groups.length === 0 && index === 0 ? focusProps : undefined)}
+						disabled={disabled}
+						onClick={() => runCustom(action)}
+					>
+						{action.icon}
+						{action.label}
+					</MenuItem>
+				)
+			)}
+			<Menu anchorEl={choiceAnchor} open={Boolean(choiceAnchor)} onClose={closeChoices}>
+				{choiceGroup?.choices.map((choice) => (
+					<MenuItem
+						key={choice.key}
+						disabled={disabled}
+						onClick={() => {
+							closeChoices();
+							invokeActionChoice(choice, context).then(handleResult).catch(handleError);
+						}}
+					>
+						<ListItemText primary={choice.label} secondary={choice.description} />
+					</MenuItem>
+				))}
+			</Menu>
+			{dialogAction?.Dialog && (
+				<dialogAction.Dialog
+					action={dialogAction}
+					context={context}
+					disabled={disabled}
+					onResult={(selection) => {
+						handleResult(selection);
+						setDialogAction(null);
+					}}
+					onError={(error) => {
+						handleError(error);
+						setDialogAction(null);
+					}}
+				/>
+			)}
+		</>
+	);
+}
+
+export default GroupedDataSourceActionMenuItems;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/components/SortableList.tsx b/studio-ui/ui/app/src/components/FormsEngine/components/SortableList.tsx
index 3920ffe1f..2480263c1 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/components/SortableList.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/components/SortableList.tsx
@@ -46,6 +46,7 @@ export interface SortableListProps<T = unknown> {
 	items: TItem<T>[];
 	onChange(items: TItem<T>[]): void;
 	selectedItemId?: string;
+	onlySelectedSortable?: boolean;
 }
 
 const strokeSize = 2;
@@ -162,37 +163,39 @@ function DragPreview({ item }: { item: TItem }) {
 	);
 }
 
-function SortableItem({ item, selected }: { item: TItem; selected?: boolean }) {
+function SortableItem({ item, selected, sortable = true }: { item: TItem; selected?: boolean; sortable?: boolean }) {
 	const ref = useRef<HTMLDivElement | null>(null);
 	const [state, setState] = useState<ItemState>(idle);
 	useEffect(() => {
 		const element = ref.current;
 		invariant(element);
 		return combine(
-			draggable({
-				element,
-				getInitialData() {
-					return getItemData(item);
-				},
-				onGenerateDragPreview({ nativeSetDragImage }) {
-					setCustomNativeDragPreview({
-						nativeSetDragImage,
-						getOffset: pointerOutsideOfPreview({
-							x: '16px',
-							y: '8px'
-						}),
-						render({ container }) {
-							setState({ type: 'preview', container });
+			sortable
+				? draggable({
+						element,
+						getInitialData() {
+							return getItemData(item);
+						},
+						onGenerateDragPreview({ nativeSetDragImage }) {
+							setCustomNativeDragPreview({
+								nativeSetDragImage,
+								getOffset: pointerOutsideOfPreview({
+									x: '16px',
+									y: '8px'
+								}),
+								render({ container }) {
+									setState({ type: 'preview', container });
+								}
+							});
+						},
+						onDragStart() {
+							setState({ type: 'is-dragging' });
+						},
+						onDrop() {
+							setState(idle);
 						}
-					});
-				},
-				onDragStart() {
-					setState({ type: 'is-dragging' });
-				},
-				onDrop() {
-					setState(idle);
-				}
-			}),
+					})
+				: () => {},
 			dropTargetForElements({
 				element,
 				canDrop({ source }) {
@@ -238,7 +241,7 @@ function SortableItem({ item, selected }: { item: TItem; selected?: boolean }) {
 				}
 			})
 		);
-	}, [item]);
+	}, [item, sortable]);
 	return (
 		<>
 			<ListItemButton
@@ -250,9 +253,11 @@ function SortableItem({ item, selected }: { item: TItem; selected?: boolean }) {
 				]}
 				selected={selected}
 			>
-				<ListItemIcon>
-					<DragIndicator fontSize="small" />
-				</ListItemIcon>
+				{sortable && (
+					<ListItemIcon>
+						<DragIndicator fontSize="small" />
+					</ListItemIcon>
+				)}
 				<ListItemText primary={item.value} />
 				{state.type === 'is-dragging-over' && state.closestEdge ? (
 					<DropIndicator edge={state.closestEdge} gap={gapBetweenItems} />
@@ -263,7 +268,7 @@ function SortableItem({ item, selected }: { item: TItem; selected?: boolean }) {
 	);
 }
 
-export function SortableList({ items, onChange, selectedItemId }: SortableListProps) {
+export function SortableList({ items, onChange, selectedItemId, onlySelectedSortable }: SortableListProps) {
 	const onChangeRef = useUpdateRefs(onChange);
 	useEffect(() => {
 		return monitorForElements({
@@ -328,7 +333,12 @@ export function SortableList({ items, onChange, selectedItemId }: SortableListPr
 	return (
 		<List sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, px: 1 }}>
 			{items.map((item) => (
-				<SortableItem key={item.key} item={item} selected={item.key === selectedItemId} />
+				<SortableItem
+					key={item.key}
+					item={item}
+					selected={item.key === selectedItemId}
+					sortable={onlySelectedSortable ? item.key === selectedItemId : true}
+				/>
 			))}
 		</List>
 	);
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/CheckboxGroup.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/CheckboxGroup.tsx
index 4d80712a3..a367e0876 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/controls/CheckboxGroup.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/CheckboxGroup.tsx
@@ -21,8 +21,6 @@ import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel, { formControlLabelClasses } from '@mui/material/FormControlLabel';
 import LookupTable from '../../../models/LookupTable';
-import { KVPLoaderItem, useKVPLoader } from '../dataSourceHooks/useKVPLoader';
-import useActiveSiteId from '../../../hooks/useActiveSiteId';
 import { useTheme } from '@mui/material/styles';
 import { typographyClasses } from '@mui/material/Typography';
 import { SearchBar } from '../../SearchBar';
@@ -33,6 +31,8 @@ import { FormattedMessage } from 'react-intl';
 import { useWindowWidth } from '../../../hooks/useWindowWidth';
 import { getPropertyValue, isFieldReadOnly } from '../lib/formUtils';
 import Skeleton from '@mui/material/Skeleton';
+import { useDataSourceListOptions } from '../dataSourceHooks/useDataSourceListOptions';
+import type { DataSourceListItem } from '../dataSources/types';
 
 export interface CheckboxGroupProps extends ControlProps {
 	value: Array<{ key: string; value_smv: string }>;
@@ -40,7 +40,7 @@ export interface CheckboxGroupProps extends ControlProps {
 
 export function CheckboxGroup(props: CheckboxGroupProps) {
 	const theme = useTheme();
-	const { contentType, field, value, setValue, autoFocus, readonly: formReadonly } = props;
+	const { field, value, setValue, autoFocus, readonly: formReadonly, dataSources } = props;
 	const [searchFieldValue, setSearchFieldValue] = useState('');
 	const [keyword, setKeyword] = useState('');
 	const windowWidth = useWindowWidth();
@@ -51,7 +51,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 	const selectAll: boolean = getPropertyValue(field.properties, 'selectAll') as boolean;
 	const listDirection: 'horizontal' | 'vertical' = useMemo(() => {
 		let listDirection: 'horizontal' | 'vertical' = 'horizontal';
-		let directionArray: Array<{ value: string; selected?: boolean }> = [];
+		let directionArray: Array<{ value: string; selected?: boolean }>;
 		try {
 			const raw = getPropertyValue(field.properties, 'listDirection') as string;
 			const parsed = raw ? JSON.parse(raw) : [];
@@ -68,12 +68,9 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 	const onKeyword$ = useDebouncedInput(() => {
 		setKeyword(searchFieldValue);
 	});
-	const options = useKVPLoader(
-		useActiveSiteId(),
-		// Checkbox Group supports only 1 datasource.
-		useMemo(() => [field.properties.datasource?.value as string], [field.properties.datasource?.value]),
-		contentType.dataSources
-	)?.[0]?.items;
+	// TB/legacy bind a single datasource (`datasource:item:singleSelection`). Use the first
+	// list group only; extra groups would only appear from hand-edited multi-id XML.
+	const options = useDataSourceListOptions(dataSources)?.[0]?.items;
 	const finalOptions = useMemo(() => {
 		if (!options) return undefined;
 		let finalOptions = [...options];
@@ -230,7 +227,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 }
 
 const buildOption = (
-	option: KVPLoaderItem['items'][0],
+	option: DataSourceListItem,
 	onChange: CheckboxProps['onChange'],
 	checkedValuesLookup: LookupTable<boolean>,
 	readonly: boolean = false
@@ -252,7 +249,7 @@ const buildOption = (
 
 const VirtualRow = (
 	props: RowComponentProps<{
-		options: KVPLoaderItem['items'];
+		options: DataSourceListItem[];
 		onChange: CheckboxProps['onChange'];
 		checkedValuesLookup: LookupTable<boolean>;
 		numColumns: number;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/DateTime.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/DateTime.tsx
index 4cb6b7e71..f96f300c9 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/controls/DateTime.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/DateTime.tsx
@@ -21,21 +21,30 @@ import { DateTimeTimezonePicker, type DateTimeTimezonePickerProps } from '../../
 import SecondaryButton from '../../SecondaryButton';
 import { FormattedMessage } from 'react-intl';
 import Box from '@mui/material/Box';
-import { StableFormContext } from '../lib/formsEngineContext';
+import { StableFormContext, useStableFormContext } from '../lib/formsEngineContext';
 import { processPopulateExpression, validateDatePopulateExpression } from '../lib/controlHelpers';
 import { getPropertyValue, isFieldReadOnly } from '../lib/formUtils';
+import { PrimitiveAtom, useAtom } from 'jotai';
 
 export interface DateTimeProps extends ControlProps {
 	value: string;
 }
 
-// TODO: Timezone selector handling is pending. FE1 uses an extra `_tz` field to store the timezone value.
 export function DateTime(props: DateTimeProps) {
 	const { field, value: valueProp, setValue, readonly: formReadonly, autoFocus } = props;
 	const htmlId = useId();
 	const stableFormContext = useContext(StableFormContext);
 	const isCreateMode = Boolean(stableFormContext?.props?.create);
 
+	const formContext = useStableFormContext();
+	const timezoneAtom = formContext.atoms.valueByFieldId[`${field.id}_tz`] as PrimitiveAtom<string> | undefined;
+	if (!timezoneAtom) {
+		throw new Error(
+			`Missing timezone atom for field "${field.id}_tz". Additional fields must be created during form bootstrap.`
+		);
+	}
+	const [timezoneValue, setTimezoneValue] = useAtom(timezoneAtom);
+
 	// region field properties/validations
 
 	const allowPastDate: boolean = getPropertyValue(field.properties, 'allowPastDate') as boolean;
@@ -102,10 +111,12 @@ export function DateTime(props: DateTimeProps) {
 				<DateTimeTimezonePicker
 					id={htmlId}
 					value={value}
+					timezoneValue={timezoneValue}
 					disablePast={!allowPastDate}
 					disabled={readonly}
 					autoFocus={autoFocus}
 					onChange={handleChange}
+					onTimezoneChange={(tz) => setTimezoneValue(tz)}
 					disableTimezoneSelection={!useCustomTimezone}
 					pickers={pickers}
 					size="medium"
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/Dropdown.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/Dropdown.tsx
index bf9b8ece4..5e0c57a7d 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/controls/Dropdown.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/Dropdown.tsx
@@ -14,33 +14,24 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import { FormsEngineField } from '../components/FormsEngineField';
 import { ControlProps } from '../types';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
-import useContentTypes from '../../../hooks/useContentTypes';
-import useActiveSiteId from '../../../hooks/useActiveSiteId';
-import useUpdateRefs from '../../../hooks/useUpdateRefs';
 import ListSubheader from '@mui/material/ListSubheader';
 import Skeleton from '@mui/material/Skeleton';
-import { useKVPLoader } from '../dataSourceHooks/useKVPLoader';
+import { useDataSourceListOptions, type DataSourceListOptionGroup } from '../dataSourceHooks/useDataSourceListOptions';
 
 export interface DropdownProps extends ControlProps {
 	value: string;
 }
 
 export function Dropdown(props: DropdownProps) {
-	const { field, contentType, value, setValue, readonly, autoFocus } = props;
-	const contentTypes = useContentTypes();
-	const effectRefs = useUpdateRefs({ contentTypes });
+	const { field, value, setValue, readonly, autoFocus, dataSources } = props;
 	const maxLength = field.validations.maxLength?.value;
 	const handleChange = (event: SelectChangeEvent) => setValue(event.target.value);
-	const optionGroups = useKVPLoader(
-		useActiveSiteId(),
-		useMemo(() => (field.properties.datasource.value as string).split(','), [field.properties.datasource?.value]),
-		effectRefs.current.contentTypes[contentType.id].dataSources
-	);
+	const optionGroups = useDataSourceListOptions(dataSources);
 	if (!optionGroups) {
 		return (
 			<FormsEngineField field={field} max={maxLength} length={value.length}>
@@ -48,22 +39,23 @@ export function Dropdown(props: DropdownProps) {
 			</FormsEngineField>
 		);
 	}
-	// TODO: Add argument typing
-	const renderGroup = (group) =>
+	const renderGroup = (group: DataSourceListOptionGroup) =>
 		group.items.map((option, index) => (
-			<MenuItem key={`${group.id}_${index}`} value={option.key}>
+			<MenuItem key={`${group.id}_${option.key}_${index}`} value={option.key}>
 				{option.value}
 			</MenuItem>
 		));
 	return (
 		<FormsEngineField field={field} max={maxLength} length={value.length}>
 			<Select value={value} label="" onChange={handleChange} disabled={readonly} autoFocus={autoFocus}>
-				{optionGroups.length > 1
-					? optionGroups.map((group) => [
-							<ListSubheader key={group.id}>{group.label}</ListSubheader>,
-							renderGroup(group)
-						])
-					: renderGroup(optionGroups[0])}
+				{optionGroups.length === 0
+					? null
+					: optionGroups.length > 1
+						? optionGroups.map((group) => [
+								<ListSubheader key={group.id}>{group.label}</ListSubheader>,
+								renderGroup(group)
+							])
+						: renderGroup(optionGroups[0])}
 			</Select>
 		</FormsEngineField>
 	);
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/ImagePicker.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/ImagePicker.tsx
index ff2fdcc34..8652e4c7c 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/controls/ImagePicker.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/ImagePicker.tsx
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { MouseEvent as ReactMouseEvent, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -25,53 +25,34 @@ import { DeleteOutlined, DownloadOutlined, EditOutlined } from '@mui/icons-mater
 import { FormsEngineField } from '../components/FormsEngineField';
 import useEnv from '../../../hooks/useEnv';
 import { ControlProps } from '../types';
-import { FormattedMessage } from 'react-intl';
-import { useConsolidatedImagePickerData } from '../dataSourceHooks/useConsolidatedImagePickerData';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { listItemIconClasses } from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import { useImageInfo } from '../../../hooks/useImageInfo';
 import { svgIconClasses } from '@mui/material/SvgIcon';
-import Dialog from '@mui/material/Dialog';
-import { DialogHeader } from '../../DialogHeader';
-import { DialogBody } from '../../DialogBody';
-import type { AllowedPathsData } from './NodeSelector';
-import { processPathMacros } from '../../../utils/path';
-import type { MediaItem } from '../../../models';
 import { ensureSingleSlash } from '../../../utils/string';
 import { useDispatch } from 'react-redux';
-import { useItemContext, useItemMetaContext } from '../lib/formsEngineContext';
-import type { FileUploadResult } from '../../SingleFileUpload';
-import { ContentPicker } from '../components/ContentPicker';
-import useActiveSiteId from '../../../hooks/useActiveSiteId';
 import Tooltip from '@mui/material/Tooltip';
-import { useExtractDataSources } from '../dataSourceHooks/useExtractDataSources';
-import {
-	createMediaMenuOptions,
-	downloadMedia,
-	getImageRestrictionMessages,
-	showBrowseFilesDialog,
-	showImageCropDialog,
-	showSearchDialog,
-	showSingleFileUploadDialog
-} from '../lib/controlHelpers';
+import { downloadMedia, getImageRestrictionMessages, showImageCropDialog } from '../lib/controlHelpers';
 import type { ImageRestrictions } from '../../ImageEditorDialog/types';
 import Skeleton from '@mui/material/Skeleton';
 import { nnou, nou } from '../../../utils/object';
 import { validateImageRestrictions } from '../../../utils/content';
+import GroupedDataSourceActionMenuItems from '../components/GroupedDataSourceActionMenuItems';
+import type { DataSourceSelection } from '../dataSources/types';
+import { showSystemNotification } from '../../../state/actions/system';
+import { EmptyState } from '../../EmptyState';
 
 export interface ImagePickerProps extends ControlProps {
 	value: string | null;
 }
 
-export type ImagePickerType = 'browse' | 'upload' | 'search';
-
 export function ImagePicker(props: ImagePickerProps) {
-	const { field, value: valueProp, setValue, contentType, autoFocus, readonly: formReadonly } = props;
-	const siteId = useActiveSiteId();
+	const { field, value: valueProp, setValue, autoFocus, readonly: formReadonly, dataSources } = props;
 	const { guestBase } = useEnv();
-	const contextItem = useItemContext();
-	const { id, pathInSite } = useItemMetaContext();
+	const { formatMessage } = useIntl();
+	const dispatch = useDispatch();
 
 	// region field properties/validations
 	const readonly = formReadonly || (field.properties?.readonly?.value as boolean);
@@ -91,13 +72,12 @@ export function ImagePicker(props: ImagePickerProps) {
 		value ? ensureSingleSlash(`${guestBase}${value}`) : ''
 	);
 	const hasValue = Boolean(value);
-	const dataSourceSummary = useConsolidatedImagePickerData(useExtractDataSources(contentType, field, 'imageManager'));
-	const { allowedBrowsePaths, allowedUploadPaths, allowedSearchPaths } = dataSourceSummary;
-	const addMenuButtonRef = useRef<HTMLButtonElement>(undefined);
+	const actions = dataSources?.actions ?? [];
+	const dataSourcesLoading = dataSources?.status === 'loading';
+	const dataSourcesError = dataSources?.status === 'error';
+	const actionsReady = Boolean(dataSources?.context) && actions.length > 0 && !dataSourcesLoading;
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 	const [addMenuOpen, setAddMenuOpen] = useState(false);
-	const dispatch = useDispatch();
-	const [openPickerDialog, setOpenPickerDialog] = useState(false);
-	const [pickerType, setPickerType] = useState<ImagePickerType | null>(null);
 
 	useEffect(() => {
 		// If there's a default value and no value has been set yet, set it as the value.
@@ -107,164 +87,49 @@ export function ImagePicker(props: ImagePickerProps) {
 	}, [defaultValue, setValue, valueProp]);
 
 	const imageRestrictionMessages = getImageRestrictionMessages(restrictions);
-	/* TODO: handleDataSourceOptionClick and executeDataSourceOption only handle hardcoded 'browse', 'upload' and 'search' options.
-	    We need to make them dynamic to support plugins. */
-	const handleDataSourceOptionClick = (option: ImagePickerType) => {
-		setAddMenuOpen(false);
-		switch (option) {
-			case 'browse': {
-				if (allowedBrowsePaths.length === 1) {
-					executeDataSourceOption('browse', allowedBrowsePaths[0]);
+	const applySelection = (selection: DataSourceSelection | DataSourceSelection[] | null) => {
+		const selected = Array.isArray(selection) ? selection[0] : selection;
+		const path =
+			selected?.kind === 'asset' && typeof selected.relativeUrl === 'string'
+				? selected.relativeUrl
+				: selected?.kind === 'item' && typeof selected.path === 'string'
+					? selected.path
+					: undefined;
+		if (!path) return;
+		validateImageRestrictions(path, restrictions)
+			.then((meetsRestrictions) => {
+				if (!meetsRestrictions) {
+					showImageCropDialog({
+						dispatch,
+						path,
+						mimeType:
+							selected.kind === 'asset' && typeof selected.mimeType === 'string' ? selected.mimeType : undefined,
+						restrictions,
+						writeContent: true,
+						onCrop: (_blob: Blob, newPath: string) => setValue(newPath ?? path)
+					});
 				} else {
-					// Open browse picker
-					setPickerType('browse');
-					setOpenPickerDialog(true);
+					setValue(path);
 				}
-				break;
-			}
-			case 'upload': {
-				if (allowedUploadPaths.length === 1) {
-					executeDataSourceOption('upload', allowedUploadPaths[0]);
-				} else {
-					// Open upload picker
-					setPickerType('upload');
-					setOpenPickerDialog(true);
-				}
-				break;
-			}
-			case 'search': {
-				if (allowedSearchPaths.length === 1) {
-					executeDataSourceOption('search', allowedSearchPaths[0]);
-				} else {
-					// Open search picker
-					setPickerType('search');
-					setOpenPickerDialog(true);
-				}
-				break;
-			}
-		}
+			})
+			.catch(() => {
+				dispatch(
+					showSystemNotification({
+						message: formatMessage({ defaultMessage: 'Unable to validate image restrictions.' })
+					})
+				);
+			});
 	};
-	const executeDataSourceOption = (optionType: ImagePickerType, choice: AllowedPathsData) => {
-		const processPath = (path: string) =>
-			processPathMacros({ path, objectId: id, fullParentPath: contextItem?.path ?? pathInSite });
-
-		switch (optionType) {
-			case 'browse': {
-				showBrowseFilesDialog({
-					dispatch,
-					path: processPath(choice.path),
-					multiSelect: false,
-					preselectedPaths: value ? [value] : [],
-					initialParameters: {
-						sortBy: choice.options?.sortBy,
-						sortOrder: choice.options?.sortOrder
-					},
-					onSuccess(imageData: MediaItem) {
-						// Check if the image meets restrictions
-						validateImageRestrictions(imageData.path, restrictions).then((meetsRestrictions) => {
-							if (!meetsRestrictions) {
-								showImageCropDialog({
-									dispatch,
-									path: imageData.path,
-									mimeType: imageData.mimeType,
-									restrictions,
-									writeContent: true,
-									onCrop: (blob: Blob, newPath: string) => {
-										setValue(newPath ?? imageData.path);
-									}
-								});
-							} else {
-								setValue(imageData.path);
-							}
-						});
-					}
-				});
-				break;
-			}
-			case 'search': {
-				showSearchDialog({
-					dispatch,
-					path: ensureSingleSlash(`${processPath(choice.path)}/.+`),
-					preselectedPaths: value ? [value] : [],
-					initialParameters: {
-						sortBy: choice.options?.sortBy,
-						sortOrder: choice.options?.sortOrder
-					},
-					onAcceptSelection(images) {
-						validateImageRestrictions(images[0], restrictions).then((meetsRestrictions) => {
-							if (!meetsRestrictions) {
-								showImageCropDialog({
-									dispatch,
-									path: images[0],
-									restrictions,
-									writeContent: true,
-									onCrop: (blob: Blob, newPath: string) => {
-										setValue(newPath ?? images[0]);
-									}
-								});
-							} else {
-								setValue(images[0]);
-							}
-						});
-					}
-				});
-				break;
-			}
-			case 'upload': {
-				showSingleFileUploadDialog({
-					dispatch,
-					siteId,
-					path: processPath(choice.path),
-					fileTypes: ['image/*'],
-					onFileAdded: (file, uppy, callback) => {
-						const data = file.data;
-						const url = URL.createObjectURL(data as Blob | MediaSource);
-						validateImageRestrictions(url, restrictions).then((meetsRestrictions) => {
-							if (!meetsRestrictions) {
-								showImageCropDialog({
-									dispatch,
-									path: url,
-									mimeType: file.type,
-									restrictions,
-									onCrop: (blob: Blob) => {
-										uppy.setFileState(file.id, {
-											source: 'crop',
-											name: file.name,
-											type: blob.type,
-											data: blob
-										});
-										callback?.();
-										URL.revokeObjectURL(url);
-									}
-								});
-							} else {
-								callback?.();
-								URL.revokeObjectURL(url);
-							}
-						});
-					},
-					onUploadComplete(result: FileUploadResult) {
-						if (result.successful.length) {
-							const newValue = ensureSingleSlash(`${result.successful[0].meta.path}`);
-							setValue(newValue);
-						}
-					}
-				});
-				break;
-			}
-		}
-	};
-	const handleDataSourcePickerDialogChange = (event, choice: AllowedPathsData) => {
-		if (!pickerType) return;
-		executeDataSourceOption(pickerType, choice);
-		setOpenPickerDialog(false);
-	};
-
-	const { menuOptions, availableOptions } = createMediaMenuOptions(
-		dataSourceSummary,
-		handleDataSourceOptionClick,
-		readonly
-	);
+	const actionMenuItems = actionsReady ? (
+		<GroupedDataSourceActionMenuItems
+			actions={actions}
+			context={dataSources.context}
+			disabled={readonly}
+			onResult={applySelection}
+			onError={console.error}
+			onMenuClose={() => setAddMenuOpen(false)}
+		/>
+	) : null;
 
 	const handleRemoveImage = () => {
 		setValue(null);
@@ -273,51 +138,15 @@ export function ImagePicker(props: ImagePickerProps) {
 	return (
 		<>
 			<Menu
-				anchorEl={addMenuButtonRef.current}
+				anchorEl={anchorEl}
 				open={addMenuOpen}
 				onClose={() => setAddMenuOpen(false)}
 				sx={{
 					[`.${menuItemClasses.root}`]: { pl: 3 }
 				}}
 			>
-				{menuOptions}
+				{actionMenuItems}
 			</Menu>
-			<Dialog open={openPickerDialog} onClose={() => setOpenPickerDialog(false)} fullWidth maxWidth="sm">
-				<DialogHeader
-					title={<FormattedMessage defaultMessage="Choose how to proceed" />}
-					onCloseButtonClick={() => setOpenPickerDialog(false)}
-				/>
-				<DialogBody>
-					{(() => {
-						switch (pickerType) {
-							case 'browse':
-								return (
-									<ContentPicker
-										label={<FormattedMessage defaultMessage="Browse Settings" />}
-										allowedPaths={allowedBrowsePaths}
-										onChange={handleDataSourcePickerDialogChange}
-									/>
-								);
-							case 'upload':
-								return (
-									<ContentPicker
-										label={<FormattedMessage defaultMessage="Upload Settings" />}
-										allowedPaths={allowedUploadPaths}
-										onChange={handleDataSourcePickerDialogChange}
-									/>
-								);
-							case 'search':
-								return (
-									<ContentPicker
-										label={<FormattedMessage defaultMessage="Search Settings" />}
-										allowedPaths={allowedSearchPaths}
-										onChange={handleDataSourcePickerDialogChange}
-									/>
-								);
-						}
-					})()}
-				</DialogBody>
-			</Dialog>
 			<FormsEngineField field={field}>
 				{hasValue ? (
 					<Card sx={{ display: 'flex' }}>
@@ -378,13 +207,11 @@ export function ImagePicker(props: ImagePickerProps) {
 									<Tooltip title={<FormattedMessage defaultMessage="Replace" />}>
 										<IconButton
 											size="small"
-											ref={addMenuButtonRef}
-											disabled={readonly}
+											disabled={readonly || !actionsReady}
 											autoFocus={autoFocus}
-											onClick={() => {
-												if (availableOptions.length === 1) {
-													handleDataSourceOptionClick(availableOptions[0]);
-												} else if (availableOptions.length > 1) {
+											onClick={(event) => {
+												if (actionsReady) {
+													setAnchorEl(event.currentTarget);
 													setAddMenuOpen(true);
 												}
 											}}
@@ -411,6 +238,19 @@ export function ImagePicker(props: ImagePickerProps) {
 							</CardContent>
 						</Box>
 					</Card>
+				) : dataSourcesLoading ? (
+					<Skeleton variant="rounded" height={56} />
+				) : dataSourcesError ? (
+					<Typography color="error" variant="body2">
+						<FormattedMessage defaultMessage="Error loading image sources" />
+					</Typography>
+				) : !actionsReady ? (
+					<EmptyState
+						title={<FormattedMessage defaultMessage="No options are available for this control" />}
+						subtitle={
+							<FormattedMessage defaultMessage="Update the content type definition to add options to this control" />
+						}
+					/>
 				) : (
 					<Box
 						sx={{
@@ -435,7 +275,7 @@ export function ImagePicker(props: ImagePickerProps) {
 							}
 						}}
 					>
-						{menuOptions}
+						{actionMenuItems}
 					</Box>
 				)}
 			</FormsEngineField>
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/NodeSelector.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/NodeSelector.tsx
index 2b664bad4..11b6fa198 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/controls/NodeSelector.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/NodeSelector.tsx
@@ -42,7 +42,6 @@ import React, {
 	SyntheticEvent,
 	useEffect,
 	useMemo,
-	useRef,
 	useState
 } from 'react';
 import Menu from '@mui/material/Menu';
@@ -85,12 +84,8 @@ import { isTouchDevice, KeyDownEvent, sortableListKeyDownHandler } from '../lib/
 import SortableListSkeleton from '../components/SortableListSkeleton';
 import { EmptyState } from '../../EmptyState';
 import { XmlKeys } from '../lib/formConsts';
-import useConsolidatedItemPickerData, {
-	ConsolidatedItemPickerData
-} from '../dataSourceHooks/useConsolidatedItemPickerData';
 import { showBrowseFilesDialog, showSearchDialog } from '../lib/controlHelpers';
 import { Dispatch as ReduxDispatch } from 'redux';
-import { useExtractDataSources } from '../dataSourceHooks/useExtractDataSources';
 import UploadFileOutlinedIcon from '@mui/icons-material/UploadFileOutlined';
 import type { FileUploadResult } from '../../SingleFileUpload';
 import type { SingleFileUploadDialogProps } from '../../SingleFileUploadDialog';
@@ -110,6 +105,16 @@ import TypeList from '../../ContentTypeManagement/components/TypeList';
 import { SearchBar } from '../../SearchBar';
 import useDebouncedInput from '../../../hooks/useDebouncedInput';
 import { filterTypesByKeywordsAndObjectType } from '../../../utils/contentType';
+import {
+	buildActionGroups,
+	consolidateItemActions,
+	invokeActionChoice,
+	invokeResolvedAction,
+	type ConsolidatedItemPickerData
+} from '../dataSources/actionAdapters';
+import type { DataSourceActionChoice, DataSourceSelection, ResolvedDataSourceAction } from '../dataSources/types';
+import Alert from '@mui/material/Alert';
+import GroupedDataSourceActionMenuItems from '../components/GroupedDataSourceActionMenuItems';
 
 const SortableList = lazy(() => import('../components/SortableList'));
 const TouchSortableList = lazy(() => import('../components/TouchSortableList'));
@@ -143,6 +148,7 @@ export type AllowedContentTypesDataWithDestinations = AllowedContentTypesData &
 export interface AllowedPathsData {
 	path: string;
 	title: string;
+	actionChoice?: DataSourceActionChoice;
 	allowedContentTypes?: string[];
 	options?: {
 		sortBy?: string;
@@ -156,6 +162,7 @@ interface CreateDataSourcePickerData {
 	path: string;
 	strategy: ContentCreationStrategy;
 	contentTypeId: string;
+	actionKey?: string;
 }
 
 const oppositeStrategy: Record<ContentCreationStrategy, ContentCreationStrategy> = {
@@ -163,8 +170,21 @@ const oppositeStrategy: Record<ContentCreationStrategy, ContentCreationStrategy>
 	shared: 'embedded'
 };
 
+function getInitialCreatePickerValue(
+	types: string[],
+	lookup: LookupTable<AllowedContentTypesDataWithDestinations>
+): CreateDataSourcePickerData {
+	return types.length
+		? {
+				path: lookup[types[0]].createPaths?.[0] ?? '',
+				strategy: lookup[types[0]].embedded ? 'embedded' : 'shared',
+				contentTypeId: types[0]
+			}
+		: null;
+}
+
 function NodeSelector(props: NodeSelectorProps) {
-	const { field, contentType, value, setValue, readonly: formReadonly, autoFocus } = props;
+	const { field, value, setValue, readonly: formReadonly, autoFocus, dataSources } = props;
 
 	// region field properties/validations
 	const readonly: boolean = isFieldReadOnly(field, formReadonly);
@@ -190,11 +210,20 @@ function NodeSelector(props: NodeSelectorProps) {
 	const [pickerDialogOpen, setPickerDialogOpen] = useState(false);
 	const [createPickerChoice, setCreatePickerChoice] = useState<CreateDataSourcePickerData>(null);
 	const dispatch = useDispatch();
-	const addMenuButtonRef = useRef<HTMLButtonElement>(undefined);
+	const [addMenuAnchor, setAddMenuAnchor] = useState<HTMLButtonElement | null>(null);
 	const contentTypes = useContentTypes();
 	const siteId = useActiveSiteId();
 	const authoringBase = useSelection((state) => state.env.authoringBase);
-	const dataSourceSummary = useConsolidatedItemPickerData(useExtractDataSources(contentType, field, 'itemManager'));
+	const dataSourceSummary = useMemo(() => consolidateItemActions(dataSources?.actions ?? []), [dataSources?.actions]);
+	const customActions = useMemo(
+		() => buildActionGroups(dataSources?.actions ?? []).customActions,
+		[dataSources?.actions]
+	);
+	const createActions = useMemo(
+		() =>
+			(dataSources?.actions ?? []).filter((action) => action.kind === 'create' && !action.MenuItem && !action.Dialog),
+		[dataSources?.actions]
+	);
 	const handleRemoveItem = (event: ReactMouseEvent, index: number) => {
 		event.stopPropagation();
 		const nextValue = value.concat();
@@ -297,6 +326,49 @@ function NodeSelector(props: NodeSelectorProps) {
 			(index, edit) => handleEditItem(e, index, edit && !readonly)
 		);
 	};
+	const applyDataSourceSelection = (
+		selection: DataSourceSelection | DataSourceSelection[] | null,
+		createChoice?: CreateDataSourcePickerData
+	) => {
+		const selections = Array.isArray(selection) ? selection : selection ? [selection] : [];
+		const newItems = selections.flatMap<NodeSelectorItem>((selected) => {
+			if (selected.kind !== 'item' && selected.kind !== 'asset') return [];
+			const path =
+				selected.kind === 'asset' && typeof selected.relativeUrl === 'string'
+					? selected.relativeUrl
+					: selected.kind === 'item' && typeof selected.path === 'string'
+						? selected.path
+						: undefined;
+			const createdValues =
+				selected.kind === 'item' && selected.value && typeof selected.value === 'object'
+					? (selected.value as LookupTable<Primitive>)
+					: null;
+			const embedded = createChoice?.strategy === 'embedded';
+			const key = embedded ? (createdValues?.objectId as string) : path;
+			if (!key) return [];
+			const fallbackName = key.split('/').filter(Boolean).pop() ?? key;
+			const label =
+				(createdValues?.[XmlKeys.internalName] as string) ||
+				(selected.kind === 'item' && typeof selected.value === 'string' ? selected.value : fallbackName);
+			const fileType = getFileExtension(key);
+			return [
+				{
+					key,
+					value: label,
+					...(embedded
+						? { component: createdValues }
+						: {
+								include: key,
+								...(fileType ? getFileMetaData({ fileType, useSingleValueFilename, useMVS }) : {})
+							}),
+					disableFlattening
+				}
+			];
+		});
+		const { validItems, duplicateItems } = validateNewItems(newItems, value, allowDuplicates);
+		if (newItems.length) setValue(validItems);
+		if (!allowDuplicates && duplicateItems.length) showDuplicatesWarning(dispatch, duplicateItems);
+	};
 	const executeDataSourceOption = (
 		optionType: DataSourcePickerType,
 		choice: AllowedPathsData | CreateDataSourcePickerData
@@ -305,8 +377,14 @@ function NodeSelector(props: NodeSelectorProps) {
 			processPathMacros({ path, objectId: id, fullParentPath: contextItem?.path ?? pathInSite });
 		switch (optionType) {
 			case 'browse': {
-				// Open browse dialog
 				const pickerChoice = choice as AllowedPathsData;
+				if (pickerChoice.actionChoice && dataSources?.context) {
+					invokeActionChoice(pickerChoice.actionChoice, dataSources.context)
+						.then(applyDataSourceSelection)
+						.catch(console.error);
+					break;
+				}
+				// Compatibility fallback for legacy callers that don't provide owner-bound actions.
 				showBrowseFilesDialog({
 					dispatch,
 					path: processPath(pickerChoice.path),
@@ -336,8 +414,14 @@ function NodeSelector(props: NodeSelectorProps) {
 				break;
 			}
 			case 'search': {
-				// Open search dialog
 				const pickerChoice = choice as AllowedPathsData;
+				if (pickerChoice.actionChoice && dataSources?.context) {
+					invokeActionChoice(pickerChoice.actionChoice, dataSources.context)
+						.then(applyDataSourceSelection)
+						.catch(console.error);
+					break;
+				}
+				// Compatibility fallback for legacy callers that don't provide owner-bound actions.
 				showSearchDialog({
 					dispatch,
 					path: ensureSingleSlash(`${processPath(pickerChoice.path)}/.+`),
@@ -367,6 +451,19 @@ function NodeSelector(props: NodeSelectorProps) {
 			case 'create': {
 				const pickerChoice = choice as CreateDataSourcePickerData;
 				const isEmbedded = pickerChoice.strategy === 'embedded';
+				const owner = findCreateAction(dataSources?.actions ?? [], pickerChoice);
+				if (owner && dataSources?.context) {
+					invokeResolvedAction(owner, dataSources.context, {
+						type: 'create',
+						contentTypeId: pickerChoice.contentTypeId,
+						path: pickerChoice.strategy === 'embedded' ? contextItem.path : pickerChoice.path,
+						strategy: pickerChoice.strategy
+					})
+						.then((selection) => applyDataSourceSelection(selection, pickerChoice))
+						.catch(console.error);
+					break;
+				}
+				// Compatibility fallback for legacy callers that don't provide owner-bound actions.
 				// Push to form stack a new form in create mode with the selected content type
 				api.pushForm({
 					create: {
@@ -391,6 +488,14 @@ function NodeSelector(props: NodeSelectorProps) {
 				break;
 			}
 			case 'upload': {
+				const pickerChoice = choice as AllowedPathsData;
+				if (pickerChoice.actionChoice && dataSources?.context) {
+					invokeActionChoice(pickerChoice.actionChoice, dataSources.context)
+						.then(applyDataSourceSelection)
+						.catch(console.error);
+					break;
+				}
+				// Compatibility fallback for legacy callers that don't provide owner-bound actions.
 				showUploadDialog({
 					dispatch,
 					path: processPath(choice.path),
@@ -461,7 +566,7 @@ function NodeSelector(props: NodeSelectorProps) {
 						allowedCreateTypes[contentTypeId].sharedExisting
 					].filter(Boolean).length === 1 &&
 					// When strategy is shared, only one destination path is allowed
-					(!allowedCreateTypes[contentTypeId].shared || allowedCreateTypes[contentTypeId].createPaths.length === 1)
+					(!allowedCreateTypes[contentTypeId].shared || allowedCreateTypes[contentTypeId].createPaths?.length === 1)
 				) {
 					const strategy = allowedCreateTypes[contentTypeId].embedded ? 'embedded' : 'shared';
 					// Open create dialog
@@ -512,18 +617,32 @@ function NodeSelector(props: NodeSelectorProps) {
 	);
 	const { allowedCreateTypes, allowedCreatePaths, allowedBrowsePaths, allowedSearchPaths, allowedUploadPaths } =
 		dataSourceSummary;
+	const customActionItems =
+		dataSources?.context && customActions.length ? (
+			<GroupedDataSourceActionMenuItems
+				actions={customActions}
+				context={dataSources.context}
+				disabled={readonly}
+				onResult={applyDataSourceSelection}
+				onError={console.error}
+				onMenuClose={() => setAddMenuOpen(false)}
+			/>
+		) : null;
 	const maxLimitReached = value.length >= field.validations.maxCount?.value;
-	const isAddDisabled = readonly || maxLimitReached || !menuOptions.length;
+	const isAddDisabled = readonly || maxLimitReached || (!menuOptions.length && !customActions.length);
 	return (
 		<>
 			<Menu
-				anchorEl={addMenuButtonRef.current}
+				anchorEl={addMenuAnchor}
 				open={addMenuOpen}
 				onClose={() => {
 					setAddMenuOpen(false);
+					setAddMenuAnchor(null);
 				}}
-				children={menuOptions}
-			/>
+			>
+				{menuOptions}
+				{customActionItems}
+			</Menu>
 			<Dialog
 				open={pickerDialogOpen}
 				onClose={handleCloseDataSourcePickerDialog}
@@ -553,9 +672,11 @@ function NodeSelector(props: NodeSelectorProps) {
 							),
 							create: (
 								<CreateDataSourcePicker
+									key={`${createActions.map((action) => action.actionKey).join(',')}::${allowedCreatePaths.join(',')}::${Object.keys(allowedCreateTypes).join(',')}`}
 									siteId={siteId}
 									allowedCreateTypes={allowedCreateTypes}
 									allowedCreatePaths={allowedCreatePaths}
+									createActions={createActions}
 									contentTypesLookup={contentTypes}
 									onChange={handleDataSourcePickerDialogChange}
 								/>
@@ -568,7 +689,7 @@ function NodeSelector(props: NodeSelectorProps) {
 						<SecondaryButton onClick={handleCloseDataSourcePickerDialog}>
 							<FormattedMessage defaultMessage="Cancel" />
 						</SecondaryButton>
-						<PrimaryButton onClick={handleDataSourcePickerDialogAccept}>
+						<PrimaryButton onClick={handleDataSourcePickerDialogAccept} disabled={!createPickerChoice?.contentTypeId}>
 							<FormattedMessage defaultMessage="Accept" />
 						</PrimaryButton>
 					</DialogFooter>
@@ -610,12 +731,12 @@ function NodeSelector(props: NodeSelectorProps) {
 						<span>
 							<IconButton
 								autoFocus={autoFocus}
-								ref={addMenuButtonRef}
 								disabled={isAddDisabled}
 								size="small"
 								color="primary"
-								onClick={() => {
-									if (availableOptions.length === 1) {
+								onClick={(event) => {
+									setAddMenuAnchor(event.currentTarget);
+									if (availableOptions.length === 1 && customActions.length === 0) {
 										handleDataSourceOptionClick(null, availableOptions[0]);
 									} else {
 										setAddMenuOpen(true);
@@ -635,6 +756,11 @@ function NodeSelector(props: NodeSelectorProps) {
 					closeMenu();
 				}}
 			>
+				{dataSources?.errors.map((error) => (
+					<Alert key={`${error.code}-${error.dataSourceId}`} severity="error" sx={{ mb: 1 }}>
+						{error.message}
+					</Alert>
+				))}
 				<FieldBox dashed={!hasContent}>
 					{hasContent ? (
 						<List dense>
@@ -724,8 +850,11 @@ function NodeSelector(props: NodeSelectorProps) {
 					) : (
 						<Box
 							children={
-								menuOptions.length ? (
-									menuOptions
+								menuOptions.length || customActionItems ? (
+									<>
+										{menuOptions}
+										{customActionItems}
+									</>
 								) : (
 									<EmptyState
 										key="emptyState"
@@ -771,32 +900,44 @@ function CreateDataSourcePicker(props: {
 	contentTypesLookup: LookupTable<ContentType>;
 	allowedCreateTypes: LookupTable<AllowedContentTypesDataWithDestinations>;
 	allowedCreatePaths: string[];
+	createActions: readonly ResolvedDataSourceAction[];
 	onChange(e, choice: CreateDataSourcePickerData): void;
 }) {
-	const { siteId, allowedCreatePaths, contentTypesLookup, onChange } = props;
-	const [allowedTypes, setAllowedTypes] = useState<string[]>();
+	const { siteId, allowedCreatePaths, contentTypesLookup, createActions, onChange } = props;
+	const [allowedTypes, setAllowedTypes] = useState<string[] | undefined>(() =>
+		allowedCreatePaths.length ? undefined : Object.keys(props.allowedCreateTypes)
+	);
 	const [allowedCreateTypes, setAllowedCreateTypes] = useState<LookupTable<AllowedContentTypesDataWithDestinations>>(
 		props.allowedCreateTypes
 	);
-	const [value, setValue] = useState<CreateDataSourcePickerData>(() => {
-		for (const key in allowedCreateTypes) {
-			return {
-				path: allowedCreateTypes[key].createPaths?.[0] ?? '',
-				strategy: allowedCreateTypes[key].embedded ? 'embedded' : 'shared',
-				contentTypeId: key
-			};
-		}
-		return null;
-	});
+	const [value, setValue] = useState<CreateDataSourcePickerData>(() =>
+		getInitialCreatePickerValue(Object.keys(props.allowedCreateTypes), props.allowedCreateTypes)
+	);
 	const refs = useUpdateRefs({ value, onChange });
-	const [allowedStrategies, setAllowedStrategies] = useState({ embedded: false, shared: false });
+	const allowedStrategies = {
+		embedded: Boolean(value && allowedCreateTypes[value.contentTypeId]?.embedded),
+		shared: Boolean(value && allowedCreateTypes[value.contentTypeId]?.shared)
+	};
 	const handleTypeChange = (event: SyntheticEvent, contentType: ContentType) => {
-		const newValue = { ...value, contentTypeId: contentType.id };
+		const rules = allowedCreateTypes[contentType.id] ?? {};
+		const currentStrategy = value?.strategy ?? (rules.embedded ? 'embedded' : 'shared');
+		const strategy = rules[currentStrategy] ? currentStrategy : oppositeStrategy[currentStrategy];
+		const newValue = {
+			...value,
+			contentTypeId: contentType.id,
+			strategy,
+			path: rules.createPaths?.[0] ?? ''
+		};
 		setValue(newValue);
 		onChange?.(event, newValue);
 	};
 	const handleStrategyChange = (event: SyntheticEvent) => {
-		const newValue = { ...value, strategy: (event.target as HTMLInputElement).value as ContentCreationStrategy };
+		const strategy = (event.target as HTMLInputElement).value as ContentCreationStrategy;
+		const newValue = {
+			...value,
+			strategy,
+			path: strategy === 'shared' ? (allowedCreateTypes[value.contentTypeId].createPaths?.[0] ?? '') : ''
+		};
 		setValue(newValue);
 		onChange?.(event, newValue);
 	};
@@ -805,55 +946,40 @@ function CreateDataSourcePicker(props: {
 		setValue(newValue);
 		onChange?.(event, newValue);
 	};
+	const handleActionChange = (event: SyntheticEvent) => {
+		const newValue = { ...value, actionKey: (event.target as HTMLInputElement).value };
+		setValue(newValue);
+		onChange?.(event, newValue);
+	};
 	useEffect(() => {
 		const allowedCreateTypes = props.allowedCreateTypes;
 		if (allowedCreatePaths.length) {
 			// Find out all the types that can be created on the allowed creation paths (coming from shared-content DS).
 			const sub = forkJoin(allowedCreatePaths.map((path) => fetchAllowedTypes(siteId, path))).subscribe((responses) => {
-				const result = [
-					...new Set(responses.flatMap((types) => types.map((type) => type)).concat(Object.keys(allowedCreateTypes)))
-				];
-				const allowedLookup = { ...allowedCreateTypes };
-				result.forEach((contentTypeId) => {
-					allowedLookup[contentTypeId] = { ...allowedLookup[contentTypeId] };
-					allowedLookup[contentTypeId].shared = true;
+				const allowedLookup: LookupTable<AllowedContentTypesDataWithDestinations> = { ...allowedCreateTypes };
+				responses.forEach((types, index) => {
+					// The path the types were fetched from is their creation destination.
+					const path = allowedCreatePaths[index];
+					types.forEach((contentTypeId) => {
+						const entry = { ...allowedLookup[contentTypeId] };
+						const createPaths = entry.createPaths ?? [];
+						entry.shared = true;
+						entry.createPaths = createPaths.includes(path) ? createPaths : createPaths.concat(path);
+						allowedLookup[contentTypeId] = entry;
+					});
 				});
+				const result = Object.keys(allowedLookup);
 				setAllowedTypes(result);
 				setAllowedCreateTypes(allowedLookup);
-				const value: CreateDataSourcePickerData = {
-					path: allowedLookup[result[0]].createPaths?.[0] ?? '',
-					strategy: allowedLookup[result[0]].embedded ? 'embedded' : 'shared',
-					contentTypeId: result[0]
-				};
-				setValue(value);
+				setValue(getInitialCreatePickerValue(result, allowedLookup));
 			});
 			return () => sub.unsubscribe();
-		} else {
-			const result = Object.keys(allowedCreateTypes);
-			setAllowedTypes(result);
-			const value: CreateDataSourcePickerData = {
-				path: allowedCreateTypes[result[0]].createPaths?.[0] ?? '',
-				strategy: allowedCreateTypes[result[0]].embedded ? 'embedded' : 'shared',
-				contentTypeId: result[0]
-			};
-			setValue(value);
 		}
 	}, [allowedCreatePaths, props.allowedCreateTypes, refs, siteId]);
-	useEffect(() => {
-		if (value.contentTypeId) {
-			const newValue: CreateDataSourcePickerData = { ...refs.current.value };
-			const strategy = refs.current.value.strategy;
-			if (!allowedCreateTypes[value.contentTypeId][strategy]) {
-				newValue.strategy = oppositeStrategy[strategy];
-			}
-			newValue.path = allowedCreateTypes[value.contentTypeId].createPaths?.[0] ?? '';
-			setValue(newValue);
-			setAllowedStrategies({
-				shared: allowedCreateTypes[value.contentTypeId].shared,
-				embedded: allowedCreateTypes[value.contentTypeId].embedded
-			});
-		}
-	}, [allowedCreateTypes, refs, value.contentTypeId]);
+	const matchingCreateActions = useMemo(
+		() => (value ? findCreateActions(createActions, value) : []),
+		[createActions, value]
+	);
 	useEffect(() => {
 		refs.current.onChange?.(null, value);
 	}, [refs, value]);
@@ -870,19 +996,22 @@ function CreateDataSourcePicker(props: {
 		setFilteredTypes(types);
 	});
 
-	useEffect(() => {
-		if (allowedTypes?.length) {
-			setFilteredTypes((current) =>
-				current === undefined ? allowedTypes.map((typeId) => contentTypesLookup[typeId]).filter(Boolean) : current
-			);
-		}
-	}, [allowedTypes, contentTypesLookup]);
+	const visibleTypes = filteredTypes ?? allowedTypes?.map((typeId) => contentTypesLookup[typeId]).filter(Boolean);
 
 	const handleKeywordsChange = (value: string) => {
 		setKeywords(value);
 		onKeyword$.next(value);
 	};
 
+	if (!value) {
+		// Types coming from creation paths are fetched, so there's nothing to pick until they arrive.
+		return allowedTypes === undefined ? (
+			<TypeList contentTypes={[]} compact skeleton />
+		) : (
+			<EmptyState title={<FormattedMessage defaultMessage="There are no content types available for creation." />} />
+		);
+	}
+
 	return (
 		<Grid container spacing={2} display="flex" flexDirection="column">
 			<Grid>
@@ -932,6 +1061,30 @@ function CreateDataSourcePicker(props: {
 					</FormControl>
 				</Grid>
 			)}
+			{matchingCreateActions.length > 1 && (
+				<Grid sx={{ display: 'flex', flexDirection: 'column' }}>
+					<FormControl sx={{ mt: 1 }} fullWidth>
+						<FormLabel id="creationDataSourceLabel">
+							<FormattedMessage defaultMessage="Data Source" />
+						</FormLabel>
+						<RadioGroup
+							aria-labelledby="creationDataSourceLabel"
+							name="creationDataSource"
+							value={value.actionKey ?? matchingCreateActions[0]?.actionKey ?? ''}
+						>
+							{matchingCreateActions.map((action) => (
+								<FormControlLabel
+									key={action.actionKey}
+									value={action.actionKey}
+									control={<Radio />}
+									onChange={handleActionChange}
+									label={action.dataSourceTitle}
+								/>
+							))}
+						</RadioGroup>
+					</FormControl>
+				</Grid>
+			)}
 
 			<Grid width="100%">
 				<FormControl fullWidth>
@@ -955,12 +1108,12 @@ function CreateDataSourcePicker(props: {
 						}}
 					/>
 					<TypeList
-						contentTypes={filteredTypes}
+						contentTypes={visibleTypes}
 						compact={true}
 						onCardClick={handleTypeChange}
 						selectedTypeId={value.contentTypeId}
 						disableSelected={false}
-						skeleton={filteredTypes === undefined}
+						skeleton={allowedTypes === undefined}
 					/>
 				</FormControl>
 			</Grid>
@@ -999,6 +1152,32 @@ function DataSourcePicker(props: { allowedPaths: AllowedPathsData[]; onChange(e,
 	);
 }
 
+function findCreateAction(
+	actions: readonly ResolvedDataSourceAction[],
+	choice: CreateDataSourcePickerData
+): ResolvedDataSourceAction | undefined {
+	const matches = findCreateActions(actions, choice);
+	return matches.find((action) => action.actionKey === choice.actionKey) ?? matches[0];
+}
+
+function findCreateActions(
+	actions: readonly ResolvedDataSourceAction[],
+	choice: CreateDataSourcePickerData
+): ResolvedDataSourceAction[] {
+	return actions.filter((action) => {
+		if (action.kind !== 'create') return false;
+		const matchesTarget = action.meta?.createTargets?.some(
+			(target) =>
+				target.contentTypeId === choice.contentTypeId &&
+				target.strategy === choice.strategy &&
+				(choice.strategy === 'embedded' || target.path === choice.path)
+		);
+		const matchesCreatePath =
+			choice.strategy === 'shared' && action.meta?.createPaths?.some((path) => path === choice.path);
+		return matchesTarget || matchesCreatePath;
+	});
+}
+
 function createAddMenuOptions({
 	refs,
 	readonly,
@@ -1013,8 +1192,12 @@ function createAddMenuOptions({
 	menuOptions: ReactNode[];
 	availableOptions: DataSourcePickerType[];
 } {
-	const { allowedCreateTypes, allowedBrowsePaths, allowedSearchPaths, allowedUploadPaths } = itemPickerDataSourceData;
-	const createAllowed = Object.keys(allowedCreateTypes).length > 0;
+	const { allowedCreateTypes, allowedCreatePaths, allowedBrowsePaths, allowedSearchPaths, allowedUploadPaths } =
+		itemPickerDataSourceData;
+	// Data sources may enable creation without naming a content type (e.g. shared-content with no default
+	// type), in which case they only contribute the destination path and the types allowed there are
+	// resolved when the picker opens.
+	const createAllowed = Object.keys(allowedCreateTypes).length > 0 || allowedCreatePaths.length > 0;
 	const menuOptions = [];
 
 	const availableOptions: DataSourcePickerType[] = [];
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/PageNavOrder.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/PageNavOrder.tsx
new file mode 100644
index 000000000..879440d2f
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/PageNavOrder.tsx
@@ -0,0 +1,270 @@
+/*
+ * Copyright (C) 2007-2025 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { ControlProps } from '../types';
+import FormsEngineField from '../components/FormsEngineField';
+import React, { type ChangeEvent, useEffect, useId, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import ChangeCircleOutlinedIcon from '@mui/icons-material/ChangeCircleOutlined';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import { EnhancedDialog } from '../../EnhancedDialog';
+import useEnhancedDialogState from '../../../hooks/useEnhancedDialogState';
+import useActiveSiteId from '../../../hooks/useActiveSiteId';
+import {
+	getNavItemsOrder,
+	type PageNavItem,
+	reorderNavItems,
+	type ReorderNavItemsRequest
+} from '../../../services/content';
+import { DialogBody } from '../../DialogBody';
+import Typography from '@mui/material/Typography';
+import useSpreadState from '../../../hooks/useSpreadState';
+import { ApiResponse } from '../../../models';
+import { SortableList, type TItem } from '../components/SortableList';
+import { useItemContext, useStableFormContext } from '../lib/formsEngineContext';
+import { DialogFooter } from '../../DialogFooter';
+import SecondaryButton from '../../SecondaryButton';
+import PrimaryButton from '../../PrimaryButton';
+import { pushErrorDialog } from '../../../utils/system';
+import { useDispatch } from 'react-redux';
+import Paper from '@mui/material/Paper';
+import useUpdateRefs from '../../../hooks/useUpdateRefs';
+import { showSystemNotification } from '../../../state/actions/system';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import Alert from '@mui/material/Alert';
+import { isFieldReadOnly } from '../lib/formUtils';
+import { getParentPath } from '../../../utils/path';
+import { nou } from '../../../utils/object';
+import { PrimitiveAtom, useStore } from 'jotai';
+
+export interface PageNavOrderProps extends ControlProps {
+	value: boolean;
+}
+
+const ORDER_DEFAULT_FIELD_ID = 'orderDefault_f';
+
+export function PageNavOrder(props: PageNavOrderProps) {
+	const { value, setValue, field, autoFocus, readonly: formReadonly } = props;
+	const [initialValue] = useState<boolean>(value);
+	const htmlId = useId();
+	const orderDialogState = useEnhancedDialogState();
+	const { formatMessage } = useIntl();
+	const [pagesOrderState, setPagesOrderState] = useSpreadState<{
+		fetching: boolean;
+		error: ApiResponse | null;
+		order: TItem<PageNavItem>[] | null;
+		changedOrder: boolean;
+	}>({
+		fetching: false,
+		error: null,
+		order: null,
+		changedOrder: false
+	});
+	const contextItem = useItemContext();
+	const currentPath = contextItem?.path;
+	const siteId = useActiveSiteId();
+	const dispatch = useDispatch();
+	const formContext = useStableFormContext();
+	const jotaiStore = useStore();
+	const orderDefaultAtom = formContext.atoms.valueByFieldId[ORDER_DEFAULT_FIELD_ID] as
+		| PrimitiveAtom<number | string | null | undefined>
+		| undefined;
+	const effectRefs = useUpdateRefs({
+		initialValue,
+		contextItem,
+		orderDefaultAtom,
+		jotaiStore
+	});
+	const readonly: boolean = isFieldReadOnly(field, formReadonly);
+
+	useEffect(() => {
+		if (currentPath) {
+			setPagesOrderState({ fetching: true, error: null });
+			const parentPath = getParentPath(currentPath);
+			const subscription = getNavItemsOrder(siteId, parentPath).subscribe({
+				next: (order) => {
+					const newOrder = createSortableItemList(order);
+					// If the initialValue is false, then it means that we'll be adding this page to the navigation (since it won't
+					// be in the order response).
+					if (!effectRefs.current.initialValue) {
+						newOrder.push({
+							key: currentPath,
+							value: effectRefs.current.contextItem?.label || currentPath
+						});
+					}
+					setPagesOrderState({ fetching: false, order: newOrder });
+				},
+				error: ({ response }) => setPagesOrderState({ fetching: false, error: response.response })
+			});
+			return () => subscription.unsubscribe();
+		}
+	}, [siteId, setPagesOrderState, currentPath, effectRefs]);
+
+	const handleChange = (_event: ChangeEvent<HTMLInputElement>, selected: string) => {
+		if (readonly) return;
+		setValue(selected === 'true');
+	};
+	const handleUpdateOrder = () => {
+		orderDialogState.onClose();
+		if (!pagesOrderState.changedOrder) return;
+
+		// If no current path, or no nav items order, then nothing to reorder.
+		if (!currentPath || !pagesOrderState.order || !pagesOrderState.order.length) return;
+		const currentItemIndex = pagesOrderState.order.findIndex((item) => item.key === currentPath);
+		// If the current item is not found in the order, then nothing to reorder.
+		if (currentItemIndex === -1) return;
+		const previousItemPath = currentItemIndex > 0 ? pagesOrderState.order[currentItemIndex - 1]?.key : undefined;
+		const nextItemPath =
+			currentItemIndex < pagesOrderState.order.length - 1
+				? pagesOrderState.order[currentItemIndex + 1]?.key
+				: undefined;
+
+		let request: ReorderNavItemsRequest;
+		if (!nou(previousItemPath) && !nou(nextItemPath)) {
+			request = { type: 'insertBetween', previousPath: previousItemPath, nextPath: nextItemPath };
+		} else if (nou(previousItemPath) && !nou(nextItemPath)) {
+			request = { type: 'addBefore', referencePath: nextItemPath };
+		} else if (!nou(previousItemPath) && nou(nextItemPath)) {
+			request = { type: 'addAfter', referencePath: previousItemPath };
+		} else {
+			// Only item in the list — nothing to reorder against.
+			return;
+		}
+
+		reorderNavItems(siteId, request).subscribe({
+			next: ({ order }) => {
+				setPagesOrderState({ changedOrder: false });
+				const { orderDefaultAtom: atom, jotaiStore: store } = effectRefs.current;
+				if (atom) {
+					store.set(atom, order);
+				} else {
+					console.error(
+						`Missing "${ORDER_DEFAULT_FIELD_ID}" atom; computed nav order ${order} was not applied to the form.`
+					);
+				}
+				dispatch(showSystemNotification({ message: formatMessage({ defaultMessage: 'Navigation items reordered.' }) }));
+			},
+			error: ({ response }) => {
+				dispatch(pushErrorDialog({ props: { error: response.response } }));
+			}
+		});
+	};
+
+	return (
+		<FormsEngineField htmlFor={htmlId} field={field}>
+			<Box display="flex" flexDirection="row" gap={2}>
+				<RadioGroup
+					row
+					value={String(value)}
+					onChange={handleChange}
+					sx={{ display: 'inline-flex' }}
+					autoFocus={autoFocus}
+				>
+					<FormControlLabel
+						value="false"
+						control={<Radio />}
+						label={<FormattedMessage defaultMessage="No" />}
+						disabled={readonly}
+					/>
+					<FormControlLabel
+						value="true"
+						control={<Radio />}
+						label={<FormattedMessage defaultMessage="Yes" />}
+						disabled={readonly}
+					/>
+				</RadioGroup>
+
+				{value && (
+					<Button
+						variant="text"
+						startIcon={<ChangeCircleOutlinedIcon />}
+						onClick={() => orderDialogState.onOpen()}
+						disabled={readonly}
+						sx={{ flex: 'none' }}
+					>
+						<FormattedMessage defaultMessage="Edit Order" />
+					</Button>
+				)}
+			</Box>
+			<EnhancedDialog
+				open={orderDialogState.open}
+				onClose={orderDialogState.onClose}
+				maxWidth="sm"
+				title={<FormattedMessage defaultMessage="Edit Navigation Order" />}
+			>
+				<DialogBody>
+					<Typography variant="body2">
+						<FormattedMessage
+							defaultMessage={'Drag and Drop "{page}" to the desired location in the navigation structure.'}
+							values={{
+								page: contextItem?.label ?? ''
+							}}
+						/>
+					</Typography>
+					{/* TODO: Remove this alert when the 'content/reorder-items' new v2 API is implemented. */}
+					<Alert severity="warning" sx={{ mt: 2 }}>
+						Development draft. Waiting for 'content/reorder-items' new v2 API to be implemented.
+					</Alert>
+					<Paper elevation={0} sx={{ mt: 2 }}>
+						<SortableList
+							items={pagesOrderState.order ?? []}
+							selectedItemId={currentPath}
+							onlySelectedSortable={true}
+							onChange={(fields: TItem<PageNavItem>[]) =>
+								setPagesOrderState({
+									order: fields,
+									changedOrder: true
+								})
+							}
+						/>
+					</Paper>
+				</DialogBody>
+				<DialogFooter>
+					<SecondaryButton onClick={() => orderDialogState.onClose()}>
+						<FormattedMessage defaultMessage="Cancel" />
+					</SecondaryButton>
+					<PrimaryButton autoFocus onClick={handleUpdateOrder}>
+						{pagesOrderState.changedOrder ? (
+							<FormattedMessage defaultMessage="Save" />
+						) : (
+							<FormattedMessage defaultMessage="Close" />
+						)}
+					</PrimaryButton>
+				</DialogFooter>
+			</EnhancedDialog>
+		</FormsEngineField>
+	);
+}
+
+/**
+ * Converts an array of `PageNavItem` objects into an array of sortable items (`TItem<PageNavItem>`).
+ * This function is used to transform navigation items into a format compatible with the `SortableList` component.
+ *
+ * @param order {PageNavItem[]} - The array of navigation items to be converted.
+ * @returns {TItem<PageNavItem>[]} - The transformed array of sortable items.
+ */
+function createSortableItemList(order: PageNavItem[]): TItem<PageNavItem>[] {
+	return order.map((item) => ({
+		key: item.path,
+		value: item.label,
+		data: item
+	}));
+}
+
+export default PageNavOrder;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/RichTextEditor.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/RichTextEditor.tsx
index c10032dfa..2f3179685 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/controls/RichTextEditor.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/RichTextEditor.tsx
@@ -31,8 +31,15 @@ import { getTinymce } from '@tinymce/tinymce-react/lib/es2015/main/ts/TinyMCE';
 import { getPropertyValue } from '../lib/formUtils';
 import { loadAceEditorAssets } from '../../../utils/system';
 import { FormsEngineDialogContext } from '../lib/formsEngineContext';
-import { getTinyMceInitOptions } from '../lib/rteUtils';
+import { getTinyMceInitOptions, type OpenRteDataSourcePicker } from '../lib/rteUtils';
 import { getCurrentLocale } from '../../../utils/i18n';
+import Dialog from '@mui/material/Dialog';
+import MenuList from '@mui/material/MenuList';
+import { DialogHeader } from '../../DialogHeader';
+import { DialogBody } from '../../DialogBody';
+import GroupedDataSourceActionMenuItems from '../components/GroupedDataSourceActionMenuItems';
+import type { DataSourceFieldContext, DataSourceSelection, ResolvedDataSourceAction } from '../dataSources/types';
+import { FormattedMessage } from 'react-intl';
 
 export interface RichTextEditorProps extends ControlProps {
 	value: string;
@@ -48,11 +55,19 @@ declare global {
 }
 
 export function RichTextEditor(props: RichTextEditorProps) {
-	const { field, value, setValue, readonly, defaultInitOptions } = props;
+	const { field, value, setValue, readonly, defaultInitOptions, dataSources } = props;
 	const locale = getCurrentLocale();
 	const rteConfig = useRTEConfig();
 	const editorRef = useRef<Editor>(undefined);
 	const hasReceivedFocusRef = useRef(false);
+	const [dataSourcePicker, setDataSourcePicker] = useState<{
+		actions: readonly ResolvedDataSourceAction[];
+		context: DataSourceFieldContext;
+		onResult(selection: DataSourceSelection | DataSourceSelection[] | null): void;
+	} | null>(null);
+	const openDataSourcePicker: OpenRteDataSourcePicker = (actions, context, onResult) => {
+		setDataSourcePicker({ actions, context, onResult });
+	};
 	const maxLength = getPropertyValue(field.properties, 'maxlength') as number;
 	const dialogContext = useContext(FormsEngineDialogContext);
 	const setDisableEnforceFocus = dialogContext?.setDisableEnforceFocus;
@@ -128,14 +143,22 @@ export function RichTextEditor(props: RichTextEditorProps) {
 		>
 			<Editor
 				licenseKey="gpl"
-				init={getTinyMceInitOptions(field, rteConfig, locale, defaultInitOptions, (editor) => {
-					editor.on('OpenWindow', () => {
-						setDisableEnforceFocus?.(true);
-					});
-					editor.on('CloseWindow', () => {
-						setDisableEnforceFocus?.(false);
-					});
-				})}
+				init={getTinyMceInitOptions(
+					field,
+					rteConfig,
+					locale,
+					defaultInitOptions,
+					dataSources,
+					openDataSourcePicker,
+					(editor) => {
+						editor.on('OpenWindow', () => {
+							setDisableEnforceFocus?.(true);
+						});
+						editor.on('CloseWindow', () => {
+							setDisableEnforceFocus?.(false);
+						});
+					}
+				)}
 				tinymceScriptSrc={tinymceScriptSrc}
 				onEditorChange={handleChange}
 				value={value}
@@ -148,6 +171,31 @@ export function RichTextEditor(props: RichTextEditorProps) {
 				}}
 				disabled={readonly}
 			/>
+			<Dialog open={Boolean(dataSourcePicker)} onClose={() => setDataSourcePicker(null)} fullWidth maxWidth="xs">
+				<DialogHeader
+					title={<FormattedMessage defaultMessage="Choose how to add media" />}
+					onCloseButtonClick={() => setDataSourcePicker(null)}
+				/>
+				<DialogBody>
+					{dataSourcePicker && (
+						<MenuList>
+							<GroupedDataSourceActionMenuItems
+								actions={dataSourcePicker.actions}
+								context={dataSourcePicker.context}
+								disabled={readonly}
+								onResult={(selection) => {
+									dataSourcePicker.onResult(selection);
+									setDataSourcePicker(null);
+								}}
+								onError={(error) => {
+									console.error('Unable to select rich-text media.', error);
+									setDataSourcePicker(null);
+								}}
+							/>
+						</MenuList>
+					)}
+				</DialogBody>
+			</Dialog>
 		</FormsEngineField>
 	);
 }
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/TranscodedVideoPicker.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/TranscodedVideoPicker.tsx
new file mode 100644
index 000000000..38c0e08f6
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/TranscodedVideoPicker.tsx
@@ -0,0 +1,166 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ControlProps } from '../types';
+import { isFieldReadOnly } from '../lib/formUtils';
+import FormsEngineField from '../components/FormsEngineField';
+import React, { useId, useState } from 'react';
+import FieldBox from '../components/FieldBox';
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
+import { FormattedMessage } from 'react-intl';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import IconButton from '@mui/material/IconButton';
+import { useDispatch } from 'react-redux';
+import { pushDialog } from '../../../state/actions/dialogStack';
+import { createComponentId } from '../../../utils/system';
+import Box from '@mui/material/Box';
+import { DeleteOutlined, EditOutlined } from '@mui/icons-material';
+import { nnou } from '../../../utils/object';
+import Menu from '@mui/material/Menu';
+import type { DataSourceSelection } from '../dataSources/types';
+import GroupedDataSourceActionMenuItems from '../components/GroupedDataSourceActionMenuItems';
+import Skeleton from '@mui/material/Skeleton';
+import Typography from '@mui/material/Typography';
+import { EmptyState } from '../../EmptyState';
+
+export interface TranscodedVideoPickerProps extends ControlProps {
+	value: { url: string }[];
+}
+
+export function TranscodedVideoPicker(props: TranscodedVideoPickerProps) {
+	const { field, value, setValue, readonly: formReadOnly, autoFocus, dataSources } = props;
+	const htmlId = useId();
+	const dispatch = useDispatch();
+	const hasValue = Array.isArray(value) ? value.length > 0 : nnou(value);
+
+	const readonly = isFieldReadOnly(field, formReadOnly);
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	const actions = dataSources?.actions ?? [];
+	const dataSourcesLoading = dataSources?.status === 'loading';
+	const dataSourcesError = dataSources?.status === 'error';
+	const actionsReady = Boolean(dataSources?.context) && actions.length > 0 && !dataSourcesLoading;
+
+	const applySelection = (selection: DataSourceSelection | DataSourceSelection[] | null) => {
+		const selections = Array.isArray(selection) ? selection : selection ? [selection] : [];
+		const nextValue = selections.flatMap((selected) => {
+			if (selected.kind === 'asset') return [{ url: selected.relativeUrl }];
+			if (selected.kind === 'item' && selected.path) return [{ url: selected.path }];
+			if (selected.kind === 'variants' && Array.isArray(selected.items)) {
+				return selected.items
+					.filter((item): item is { url: string } => Boolean(item && typeof item.url === 'string'))
+					.map(({ url }) => ({ url }));
+			}
+			return [];
+		});
+		if (nextValue.length) setValue(nextValue);
+	};
+	const actionMenuItems = actionsReady ? (
+		<GroupedDataSourceActionMenuItems
+			actions={actions}
+			context={dataSources.context}
+			disabled={readonly}
+			onResult={applySelection}
+			onError={console.error}
+			onMenuClose={() => setAnchorEl(null)}
+		/>
+	) : null;
+
+	const handleViewVideo = (path: string) => {
+		if (!path) return;
+		dispatch(
+			pushDialog({
+				component: createComponentId('PreviewDialog'),
+				allowMinimize: true,
+				allowFullScreen: true,
+				props: {
+					type: 'video',
+					title: path,
+					url: path
+				}
+			})
+		);
+	};
+
+	const handleRemoveVideos = () => {
+		setValue(null);
+	};
+
+	return (
+		<FormsEngineField htmlFor={htmlId} field={field}>
+			{hasValue ? (
+				<FieldBox dashed={true}>
+					<List dense>
+						{value?.map((item, index) => (
+							<ListItem key={index}>
+								<ListItemText>{item.url}</ListItemText>
+								<Tooltip title={<FormattedMessage defaultMessage="View" />}>
+									<IconButton size="small" onClick={() => handleViewVideo(item.url)}>
+										<VisibilityOutlinedIcon fontSize="small" />
+									</IconButton>
+								</Tooltip>
+							</ListItem>
+						))}
+					</List>
+					<Box sx={{ width: '100%', display: 'flex', justifyContent: 'end', padding: '0 16px 10px 0' }}>
+						<Tooltip title={<FormattedMessage defaultMessage="Replace" />}>
+							<IconButton
+								size="small"
+								disabled={readonly || !actionsReady}
+								autoFocus={autoFocus}
+								onClick={(event) => {
+									if (!actionsReady) return;
+									setAnchorEl(event.currentTarget);
+								}}
+							>
+								<EditOutlined />
+							</IconButton>
+						</Tooltip>
+						<Tooltip title={<FormattedMessage defaultMessage="Delete" />}>
+							<IconButton size="small" disabled={readonly} autoFocus={autoFocus} onClick={handleRemoveVideos}>
+								<DeleteOutlined />
+							</IconButton>
+						</Tooltip>
+					</Box>
+				</FieldBox>
+			) : dataSourcesLoading ? (
+				<Skeleton variant="rounded" height={56} />
+			) : dataSourcesError ? (
+				<Typography color="error" variant="body2">
+					<FormattedMessage defaultMessage="Error loading video sources" />
+				</Typography>
+			) : !actionsReady ? (
+				<EmptyState
+					title={<FormattedMessage defaultMessage="No options are available for this control" />}
+					subtitle={
+						<FormattedMessage defaultMessage="Update the content type definition to add options to this control" />
+					}
+				/>
+			) : (
+				<Box display="flex" gap={1} flexWrap="wrap">
+					{actionMenuItems}
+				</Box>
+			)}
+			<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
+				{actionMenuItems}
+			</Menu>
+		</FormsEngineField>
+	);
+}
+
+export default TranscodedVideoPicker;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/VideoPicker.tsx b/studio-ui/ui/app/src/components/FormsEngine/controls/VideoPicker.tsx
new file mode 100644
index 000000000..a9dea6299
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/VideoPicker.tsx
@@ -0,0 +1,223 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { useState } from 'react';
+import { ControlProps } from '../types';
+import useEnv from '../../../hooks/useEnv';
+import { menuItemClasses } from '@mui/material/MenuItem';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Box from '@mui/material/Box';
+import FormsEngineField from '../components/FormsEngineField';
+import Card from '@mui/material/Card';
+import CardMedia from '@mui/material/CardMedia';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import { DeleteOutlined, DownloadOutlined, EditOutlined } from '@mui/icons-material';
+import { svgIconClasses } from '@mui/material';
+import { ensureSingleSlash } from '../../../utils/string';
+import useVideoInfo from '../../../hooks/useVideoInfo';
+import Skeleton from '@mui/material/Skeleton';
+import { downloadMedia } from '../lib/controlHelpers';
+import Tooltip from '@mui/material/Tooltip';
+import { isFieldReadOnly } from '../lib/formUtils';
+import Menu from '@mui/material/Menu';
+import type { DataSourceSelection } from '../dataSources/types';
+import GroupedDataSourceActionMenuItems from '../components/GroupedDataSourceActionMenuItems';
+import { EmptyState } from '../../EmptyState';
+
+export interface VideoPickerProps extends ControlProps {
+	value: string;
+}
+
+export function VideoPicker(props: VideoPickerProps) {
+	const { field, value, setValue, readonly: formReadonly, dataSources } = props;
+	const { guestBase } = useEnv();
+	// TODO: For testing, by using 3000 as the guestBase both the fetch in `useImageInfo` and the download functionality will work
+	// const guestBase = 'http://localhost:3000';
+	const hasValue = Boolean(value);
+	const { formatMessage } = useIntl();
+	const { videoInfo, isFetchingMetadata, isFetchingDimensions, errorDimensions, errorMetadata } = useVideoInfo(
+		value ? ensureSingleSlash(`${guestBase}${value}`) : ''
+	);
+	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+	const [addMenuOpen, setAddMenuOpen] = useState(false);
+
+	const readonly: boolean = isFieldReadOnly(field, formReadonly);
+	const actions = dataSources?.actions ?? [];
+	const dataSourcesLoading = dataSources?.status === 'loading';
+	const dataSourcesError = dataSources?.status === 'error';
+	const actionsReady = Boolean(dataSources?.context) && actions.length > 0 && !dataSourcesLoading;
+	const applySelection = (selection: DataSourceSelection | DataSourceSelection[] | null) => {
+		const selected = Array.isArray(selection) ? selection[0] : selection;
+		if (!selected) return;
+		if (selected.kind === 'asset') setValue(selected.relativeUrl);
+		else if (selected.kind === 'item' && selected.path) setValue(selected.path);
+		else if (selected.kind === 'variants') setValue(selected.items[0]?.url ?? null);
+	};
+	const menuOptions = actionsReady ? (
+		<GroupedDataSourceActionMenuItems
+			actions={actions}
+			context={dataSources.context}
+			disabled={readonly}
+			onResult={applySelection}
+			onError={console.error}
+			onMenuClose={() => setAddMenuOpen(false)}
+		/>
+	) : null;
+
+	const handleRemove = () => {
+		setValue(null);
+	};
+
+	return (
+		<>
+			<Menu
+				anchorEl={anchorEl}
+				open={addMenuOpen}
+				onClose={() => setAddMenuOpen(false)}
+				sx={{
+					[`.${menuItemClasses.root}`]: { pl: 3 }
+				}}
+			>
+				{menuOptions}
+			</Menu>
+			<FormsEngineField field={field}>
+				{hasValue ? (
+					<Card sx={{ display: 'flex' }}>
+						<CardMedia component="video" sx={{ width: '40%' }} image={ensureSingleSlash(`${guestBase}${value}`)} />
+						<Box sx={{ display: 'flex', flexDirection: 'column' }}>
+							<CardContent sx={{ flex: '1 0 auto' }}>
+								<Typography component="div" variant="body1" marginBottom={1}>
+									{value}
+								</Typography>
+								<Typography variant="body2" component="div" color="textSecondary" marginBottom={1}>
+									{isFetchingMetadata ? (
+										<>
+											<Skeleton variant="text" />
+											<Skeleton variant="text" />
+										</>
+									) : errorMetadata ? (
+										<Typography color="error" variant="body2">
+											<FormattedMessage defaultMessage="Error loading video metadata" />
+										</Typography>
+									) : (
+										<>
+											{videoInfo?.contentType}
+											<br />
+											{videoInfo?.size ? `${videoInfo.size} KB` : ''}
+											<br />
+										</>
+									)}
+									<br />
+									{isFetchingDimensions ? (
+										<Skeleton variant="text" />
+									) : errorDimensions ? (
+										<Typography color="error" variant="body2">
+											<FormattedMessage defaultMessage="Error loading video dimensions" />
+										</Typography>
+									) : (
+										`${videoInfo?.width}x${videoInfo?.height}`
+									)}
+									<br />
+								</Typography>
+								<Box>
+									<Tooltip title={<FormattedMessage defaultMessage="Replace" />}>
+										<IconButton
+											disabled={readonly || !actionsReady}
+											aria-label={formatMessage({ defaultMessage: 'Replace' })}
+											size="small"
+											onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+												if (!actionsReady) return;
+												setAnchorEl(event.currentTarget);
+												setAddMenuOpen(true);
+											}}
+										>
+											<EditOutlined />
+										</IconButton>
+									</Tooltip>
+									<Tooltip title={<FormattedMessage defaultMessage="Download" />}>
+										<IconButton
+											aria-label={formatMessage({ defaultMessage: 'Download' })}
+											size="small"
+											onClick={() => {
+												if (value) downloadMedia(guestBase, value);
+											}}
+										>
+											<DownloadOutlined />
+										</IconButton>
+									</Tooltip>
+									<Tooltip title={<FormattedMessage defaultMessage="Delete" />}>
+										<IconButton
+											disabled={readonly}
+											size="small"
+											onClick={handleRemove}
+											aria-label={formatMessage({ defaultMessage: 'Delete' })}
+										>
+											<DeleteOutlined />
+										</IconButton>
+									</Tooltip>
+								</Box>
+							</CardContent>
+						</Box>
+					</Card>
+				) : dataSourcesLoading ? (
+					<Skeleton variant="rounded" height={56} />
+				) : dataSourcesError ? (
+					<Typography color="error" variant="body2">
+						<FormattedMessage defaultMessage="Error loading video sources" />
+					</Typography>
+				) : !actionsReady ? (
+					<EmptyState
+						title={<FormattedMessage defaultMessage="No options are available for this control" />}
+						subtitle={
+							<FormattedMessage defaultMessage="Update the content type definition to add options to this control" />
+						}
+					/>
+				) : (
+					// TODO: same as in NodeSelector and ImagePicker - Refactor this when datasources implementation is ready.
+					<Box
+						children={menuOptions}
+						sx={{
+							p: 1,
+							gap: 1,
+							py: 0.5,
+							display: 'flex',
+							flexDirection: 'row',
+							flexWrap: 'wrap',
+							color: 'primary.main',
+							justifyContent: 'center',
+							[`.${svgIconClasses.root}`]: {
+								color: 'primary.main'
+							},
+							[`.${menuItemClasses.root}`]: {
+								flexDirection: 'column',
+								justifyContent: 'center',
+								borderRadius: 1
+							},
+							[`.${listItemIconClasses.root}`]: {
+								justifyContent: 'center'
+							}
+						}}
+					/>
+				)}
+			</FormsEngineField>
+		</>
+	);
+}
+
+export default VideoPicker;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/controls/registry.ts b/studio-ui/ui/app/src/components/FormsEngine/controls/registry.ts
new file mode 100644
index 000000000..764a2fafa
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/controls/registry.ts
@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { ComponentType } from 'react';
+import type { DataSourceBinding } from '../dataSources/types';
+import type { ControlProps } from '../types';
+
+/** Cached plugin control: Component, normalized bindings, and owning `PluginDescriptor.id`. */
+export interface RegisteredControlContribution {
+	Component: ComponentType<ControlProps>;
+	bindings: readonly DataSourceBinding[];
+	/** Owning {@link PluginDescriptor.id} — not the form-definition asset locator `pluginId`. */
+	pluginId: string;
+}
+
+const registeredControls = new Map<string, RegisteredControlContribution>();
+
+/**
+ * Stores an FE2 plugin control Component + bindings by `field.type`.
+ *
+ * Idempotent for the same owning plugin + Component. Throws if another plugin's descriptor already
+ * claims the type (even with an identical Component reference), so binding metadata cannot be
+ * overwritten under a retained first owner.
+ */
+export function registerControlContribution(controlType: string, contribution: RegisteredControlContribution): void {
+	if (!controlType) {
+		throw new TypeError('registerControlContribution requires a non-empty control type.');
+	}
+	const existing = registeredControls.get(controlType);
+	if (existing) {
+		if (existing.pluginId !== contribution.pluginId) {
+			throw new Error(
+				`Cannot register control type "${controlType}": already registered by plugin "${existing.pluginId}"` +
+					` (attempted by "${contribution.pluginId}").`
+			);
+		}
+		if (existing.Component !== contribution.Component) {
+			throw new Error(
+				`Cannot register control type "${controlType}": a different component is already registered` +
+					` by plugin "${existing.pluginId}".`
+			);
+		}
+		return;
+	}
+	registeredControls.set(controlType, contribution);
+}
+
+/** Read API for `controlPluginLoader` / hosts after `registerPlugin`. */
+export function getRegisteredControlContribution(controlType: string): RegisteredControlContribution | undefined {
+	return registeredControls.get(controlType);
+}
+
+export function hasRegisteredControl(controlType: string): boolean {
+	return registeredControls.has(controlType);
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useConsolidatedImagePickerData.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useConsolidatedImagePickerData.ts
deleted file mode 100644
index 09708f14d..000000000
--- a/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useConsolidatedImagePickerData.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright (C) 2007-2025 Crafter Software Corporation. All Rights Reserved.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as published by
- * the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { useMemo } from 'react';
-import type { AllowedPathsData } from '../controls/NodeSelector';
-import type { DataSource } from '../../../models';
-
-export interface ConsolidatedMediaPickerData {
-	allowedBrowsePaths: AllowedPathsData[];
-	allowedUploadPaths: AllowedPathsData[];
-	allowedSearchPaths: AllowedPathsData[];
-}
-
-// TODO: Handle custom data sources (plugins).
-/** Gets a list of data sources and categorizes them into browse, upload and search paths.
- *
- * @param dataSources List of data sources to consolidate.
- * @return An object containing categorized paths for browsing, uploading, and searching.
- * */
-export function useConsolidatedImagePickerData(dataSources: DataSource[]): ConsolidatedMediaPickerData {
-	return useMemo(() => {
-		const allowedBrowsePaths: AllowedPathsData[] = [];
-		const allowedUploadPaths: AllowedPathsData[] = [];
-		const allowedSearchPaths: AllowedPathsData[] = [];
-		dataSources.forEach((ds) => {
-			switch (ds.type) {
-				case 'img-repository-upload': {
-					const path = ds.properties.repoPath || ds.properties.path;
-					if (!path) break;
-					const sortOptions = {
-						sortBy: ds.properties?.['sortBy'] as string | undefined,
-						sortOrder: ds.properties?.['sortOrder'] as 'asc' | 'desc' | undefined
-					};
-					if (ds.properties.useSearch) {
-						allowedSearchPaths.push({
-							title: ds.title,
-							path,
-							options: sortOptions
-						});
-					} else {
-						allowedBrowsePaths.push({
-							title: ds.title,
-							path,
-							options: sortOptions
-						});
-					}
-					break;
-				}
-				case 'img-desktop-upload': {
-					const path = ds.properties.repoPath || ds.properties.path;
-					if (!path) break;
-					allowedUploadPaths.push({
-						title: ds.title,
-						path
-					});
-					break;
-				}
-			}
-		});
-
-		return {
-			allowedBrowsePaths,
-			allowedUploadPaths,
-			allowedSearchPaths
-		};
-	}, [dataSources]);
-}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useConsolidatedItemPickerData.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useConsolidatedItemPickerData.ts
deleted file mode 100644
index f4ad6ae22..000000000
--- a/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useConsolidatedItemPickerData.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-/*
- * Copyright (C) 2007-2025 Crafter Software Corporation. All Rights Reserved.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as published by
- * the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { useMemo } from 'react';
-import type LookupTable from '../../../models/LookupTable';
-import type { AllowedContentTypesDataWithDestinations, AllowedPathsData } from '../controls/NodeSelector';
-import { ComponentsDatasource, DataSource } from '../../../models';
-import type ContentType from '../../../models/ContentType';
-import useContentTypeList from '../../../hooks/useContentTypeList';
-import { parseComponentsDataSourceContentTypesProperty } from '../../../services/contentTypes';
-
-/**
- * Resolves the content types for a given components or pages data source, handling wildcards.
- *
- * This function interprets the `contentTypesProperty` parameter, which may contain a comma-separated list of content
- * type ids or the wildcard character "*". If "*" is provided, it is replaced with a comma-separated list of all
- * content type ids relevant for the given dataSourceType ('components' or 'pages')
- *
- * @param {string | undefined} contentTypesProperty - The raw content types property from the data source configuration. Can be a comma-separated list of ids or "*".
- * @param {'components' | 'pages'} dataSourceType - Indicates if the data source is for components or pages. Used to filter the contentTypes list accordingly.
- * @param {ContentType[] | null} contentTypes - The full list of all content types. Required if `contentTypesProperty` is '*'.
- * @returns {string | undefined} - A comma-separated list of resolved content type ids, the original property when not a wildcard, or undefined.
- */
-function resolveComponentsDataSourceContentTypes(
-	contentTypesProperty: string | undefined,
-	dataSourceType: 'components' | 'pages',
-	contentTypes: ContentType[] | null
-): string | undefined {
-	if (contentTypesProperty?.trim() !== '*') {
-		return contentTypesProperty;
-	}
-	if (!contentTypes) {
-		return undefined;
-	}
-	const expectedType = dataSourceType === 'pages' ? 'page' : 'component';
-	return contentTypes
-		.filter((contentType) => contentType.type === expectedType)
-		.map((contentType) => contentType.id)
-		.join(',');
-}
-
-export interface ConsolidatedItemPickerData {
-	allowedCreateTypes: LookupTable<AllowedContentTypesDataWithDestinations>;
-	allowedCreatePaths: string[];
-	allowedBrowsePaths: AllowedPathsData[];
-	allowedSearchPaths: AllowedPathsData[];
-	allowedUploadPaths: AllowedPathsData[];
-}
-
-export function useConsolidatedItemPickerData(dataSources: DataSource[]): ConsolidatedItemPickerData {
-	const contentTypes = useContentTypeList();
-	return useMemo(() => {
-		const allowedCreateTypes: LookupTable<AllowedContentTypesDataWithDestinations> = {};
-		const allowedCreatePaths = new Set<string>();
-		const allowedBrowsePaths: AllowedPathsData[] = [];
-		const allowedSearchPaths: AllowedPathsData[] = [];
-		const allowedUploadPaths: AllowedPathsData[] = [];
-
-		dataSources.forEach((ds) => {
-			switch (ds.type) {
-				case 'components':
-				case 'pages': {
-					const resolvedContentTypes = resolveComponentsDataSourceContentTypes(
-						ds.properties.contentTypes,
-						ds.type as 'components' | 'pages',
-						contentTypes
-					);
-					const allowedContentTypesData =
-						resolvedContentTypes !== undefined
-							? (parseComponentsDataSourceContentTypesProperty(
-									ds as ComponentsDatasource,
-									resolvedContentTypes
-								).allowedContentTypes.value ?? {})
-							: {};
-					const allowedContentTypes: string[] = Object.keys(allowedContentTypesData);
-					const allowedSharedExisingTypes: string[] = [];
-					allowedContentTypes.forEach((contentTypeId) => {
-						if (allowedContentTypesData[contentTypeId].embedded) {
-							allowedCreateTypes[contentTypeId] = allowedCreateTypes[contentTypeId] ?? {};
-							allowedCreateTypes[contentTypeId].embedded = true;
-						}
-						if (allowedContentTypesData[contentTypeId].shared) {
-							allowedCreateTypes[contentTypeId] = allowedCreateTypes[contentTypeId] ?? {};
-							allowedCreateTypes[contentTypeId].shared = true;
-							// Some already saved content has 'baseRepositoryPath' instead of 'baseRepoPath', so we need to check both.
-							// Current descriptors and old FE1 controls have 'baseRepoPath'.
-							const brp = ds.properties.baseRepositoryPath?.trim() ?? ds.properties.baseRepoPath?.trim();
-							if (brp) {
-								allowedCreateTypes[contentTypeId].createPaths = allowedCreateTypes[contentTypeId].createPaths ?? [];
-								allowedCreateTypes[contentTypeId].createPaths.push(brp);
-							}
-						}
-						if (allowedContentTypesData[contentTypeId].sharedExisting) {
-							allowedSharedExisingTypes.push(contentTypeId);
-						}
-					});
-					const sortOptions = {
-						sortBy: ds.properties?.['sortBy'] as string | undefined,
-						sortOrder: ds.properties?.['sortOrder'] as 'asc' | 'desc' | undefined
-					};
-					if (ds.properties.enableBrowse) {
-						allowedBrowsePaths.push({
-							title: ds.title,
-							path: ds.properties.baseBrowsePath,
-							allowedContentTypes: allowedSharedExisingTypes,
-							options: sortOptions
-						});
-					}
-					if (ds.properties.enableSearch) {
-						allowedSearchPaths.push({
-							title: ds.title,
-							path: ds.properties.baseBrowsePath,
-							allowedContentTypes: allowedSharedExisingTypes,
-							options: sortOptions
-						});
-					}
-					break;
-				}
-				case 'shared-content': {
-					// TODO: For some reason, in editorial, the home type doesn't have any of the "enable" properties: enableCreateNew, enableBrowseExisting, enableSearchExisting
-					//   Unsure if this is a BP issue or something that comes from legacy which loads of other old client sites could have.
-					// Shared content DS properties:
-					// - enableBrowseExisting
-					// - enableCreateNew
-					// - enableSearchExisting
-					// - browsePath
-					// - repoPath
-					// - type ("Default Type" property, refers to a content type)
-					const contentTypeId = ds.properties.type?.trim();
-					if (ds.properties.enableBrowseExisting) {
-						allowedBrowsePaths.push({
-							title: ds.title,
-							path: ds.properties.browsePath || ds.properties.repoPath,
-							allowedContentTypes: contentTypeId ? [contentTypeId] : []
-						});
-					}
-					if (ds.properties.enableSearchExisting) {
-						allowedSearchPaths.push({
-							title: ds.title,
-							path: ds.properties.browsePath,
-							allowedContentTypes: contentTypeId ? [contentTypeId] : []
-						});
-					}
-					if (ds.properties.enableCreateNew) {
-						// If the datasource has a specific type, add as an allowed, if not, add the repoPath so later on
-						// the system can calculate the types allowed on that path.
-						if (contentTypeId) {
-							allowedCreateTypes[contentTypeId] = allowedCreateTypes[contentTypeId] ?? {};
-							allowedCreateTypes[contentTypeId].shared = true;
-							const brp = ds.properties.repoPath?.trim();
-							if (brp) {
-								allowedCreateTypes[contentTypeId].createPaths = allowedCreateTypes[contentTypeId].createPaths ?? [];
-								allowedCreateTypes[contentTypeId].createPaths.push(brp);
-							}
-						} else {
-							allowedCreatePaths.add(ds.properties.repoPath);
-						}
-					}
-					break;
-				}
-				case 'embedded-content': {
-					// Embedded content DS properties: contentType
-					const contentTypeId = ds.properties.contentType.trim();
-					allowedCreateTypes[contentTypeId] = allowedCreateTypes[contentTypeId] ?? {};
-					allowedCreateTypes[contentTypeId].embedded = true;
-					break;
-				}
-				case 'file-desktop-upload': {
-					allowedUploadPaths.push({
-						title: ds.title,
-						path: ds.properties.repoPath
-					});
-					break;
-				}
-				case 'file-browse-repo': {
-					allowedBrowsePaths.push({
-						title: ds.title,
-						path: ds.properties.repoPath
-					});
-					break;
-				}
-				default:
-					console.warn(`Unknown item picker data source type "${ds.type}"`, ds);
-					return;
-			}
-		});
-
-		return {
-			allowedCreateTypes,
-			allowedCreatePaths: Array.from(allowedCreatePaths),
-			allowedBrowsePaths,
-			allowedSearchPaths,
-			allowedUploadPaths
-		};
-	}, [dataSources, contentTypes]);
-}
-
-export default useConsolidatedItemPickerData;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useDataSourceListOptions.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useDataSourceListOptions.ts
new file mode 100644
index 000000000..ac02968ed
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useDataSourceListOptions.ts
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import useUpdateRefs from '../../../hooks/useUpdateRefs';
+import type { DataSourceListItem, ResolvedDataSources } from '../dataSources/types';
+
+/** One bound DS’s `list()` results, labeled with the DS title for multi-DS dropdowns. */
+export interface DataSourceListOptionGroup {
+	id: string;
+	label: string;
+	items: DataSourceListItem[];
+}
+
+interface LoadedOptions {
+	/** The configuration these groups belong to; anything else means the options are stale. */
+	key: string;
+	groups: DataSourceListOptionGroup[];
+}
+
+/**
+ * Loads options from every `list`-capable data source bound to the field.
+ * Returns `undefined` while options are unavailable so controls can render a loading state.
+ * Keys the load on record id/type/properties (not instance identity) so re-resolve does not refetch forever.
+ */
+export function useDataSourceListOptions(dataSources: ResolvedDataSources | undefined) {
+	const [loaded, setLoaded] = useState<LoadedOptions>();
+	const { instances, status } = dataSources ?? {};
+	const listInstances = useMemo(
+		() => instances?.filter(({ instance }) => typeof instance.list === 'function') ?? [],
+		[instances]
+	);
+	// A re-resolution yields new instance objects even when the bound data sources are unchanged, so
+	// loading is keyed on the configuration rather than on object identity. This keeps one load per
+	// configuration instead of refetching (potentially without end) on unrelated re-renders.
+	const key = useMemo(
+		() => JSON.stringify(listInstances.map(({ record }) => [record.id, record.type, record.properties])),
+		[listInstances]
+	);
+	// The context carries the field value, which changes as the user picks options; reading it through
+	// a ref keeps selecting an option from reloading the list.
+	const latest = useUpdateRefs({ context: dataSources?.context, listInstances });
+
+	useEffect(() => {
+		let active = true;
+		const { context, listInstances } = latest.current;
+		if (status === 'loading') {
+			return () => {
+				active = false;
+			};
+		}
+		if (!context) {
+			setLoaded({ key, groups: [] });
+			return () => {
+				active = false;
+			};
+		}
+		Promise.all(
+			listInstances.map(async ({ record, instance }) => {
+				try {
+					return {
+						id: record.id,
+						label: record.title,
+						items: await instance.list(context)
+					};
+				} catch (error) {
+					console.error(`Unable to load options from data source "${record.title}" (${record.id}).`, error);
+					return { id: record.id, label: record.title, items: [] };
+				}
+			})
+		).then((groups) => {
+			if (active) setLoaded({ key, groups });
+		});
+		return () => {
+			active = false;
+		};
+	}, [key, latest, status]);
+
+	return loaded?.key === key ? loaded.groups : undefined;
+}
+
+export default useDataSourceListOptions;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useExtractDataSources.tsx b/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useExtractDataSources.tsx
index 7f904e951..1a2911228 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useExtractDataSources.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSourceHooks/useExtractDataSources.tsx
@@ -39,6 +39,9 @@ export function useExtractDataSources(
 			.split(',')
 			.map((id) => id.trim())
 			.filter((id) => id.length > 0);
-		return dataSources.filter((ds) => dataSourceIds.includes(ds.id));
+		const dataSourcesById = new Map(dataSources.map((dataSource) => [dataSource.id, dataSource]));
+		return dataSourceIds
+			.map((id) => dataSourcesById.get(id))
+			.filter((dataSource): dataSource is DataSource => Boolean(dataSource));
 	}, [dataSources, dataSourceIdString]);
 }
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/actionAdapters.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/actionAdapters.ts
new file mode 100644
index 000000000..12aa3dbd6
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/actionAdapters.ts
@@ -0,0 +1,236 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type LookupTable from '../../../models/LookupTable';
+import type { AllowedContentTypesDataWithDestinations, AllowedPathsData } from '../controls/NodeSelector';
+import type {
+	DataSourceAction,
+	DataSourceActionChoice,
+	DataSourceActionGroup,
+	DataSourceActionKind,
+	DataSourceFieldContext,
+	DataSourceSelection,
+	GroupedDataSourceActions,
+	ResolvedDataSourceAction
+} from './types';
+import { defineMessages } from 'react-intl';
+import { getCurrentIntl } from '../../../utils/i18n';
+
+/**
+ * Legacy aggregate of create/browse/search/upload allowances for NodeSelector.
+ * Prefer reading {@link ResolvedDataSourceAction}s directly for new UIs.
+ */
+export interface ConsolidatedItemPickerData {
+	allowedCreateTypes: LookupTable<AllowedContentTypesDataWithDestinations>;
+	allowedCreatePaths: string[];
+	allowedBrowsePaths: AllowedPathsData[];
+	allowedSearchPaths: AllowedPathsData[];
+	allowedUploadPaths: AllowedPathsData[];
+}
+
+const standardActionKinds = new Set<DataSourceActionKind>(['browse', 'search', 'upload', 'create']);
+
+const actionKindMessages = defineMessages({
+	browse: { defaultMessage: 'Browse' },
+	search: { defaultMessage: 'Search' },
+	upload: { defaultMessage: 'Upload' },
+	create: { defaultMessage: 'Create' }
+});
+
+function actionKindLabel(kind: DataSourceActionKind): string {
+	const message = actionKindMessages[kind as keyof typeof actionKindMessages];
+	if (message) {
+		return getCurrentIntl().formatMessage(message);
+	}
+	return kind.length ? `${kind.charAt(0).toUpperCase()}${kind.slice(1)}` : kind;
+}
+
+function buildActionChoices(action: ResolvedDataSourceAction): DataSourceActionChoice[] {
+	if (action.kind !== 'create') {
+		return [
+			{
+				key: action.actionKey,
+				label: action.dataSourceTitle || action.label,
+				action
+			}
+		];
+	}
+
+	const targets = action.meta?.createTargets ?? [];
+	const targetChoices = targets.map<DataSourceActionChoice>((target, index) => ({
+		key: `${action.actionKey}::create::${target.contentTypeId}::${target.strategy}::${target.path ?? index}`,
+		label: target.contentTypeId,
+		description: action.dataSourceTitle,
+		action,
+		target: { type: 'create', ...target }
+	}));
+	const pathChoices = (action.meta?.createPaths ?? []).map<DataSourceActionChoice>((path, index) => ({
+		key: `${action.actionKey}::create-path::${path || index}`,
+		label: action.dataSourceTitle || path,
+		description: path,
+		action,
+		target: { type: 'create-path', path }
+	}));
+
+	return targetChoices.length || pathChoices.length
+		? [...targetChoices, ...pathChoices]
+		: [{ key: action.actionKey, label: action.dataSourceTitle || action.label, action }];
+}
+
+/**
+ * Collapses standard browse/search/upload/create actions across data sources into intent-level menu
+ * groups keyed by binding property + kind, while keeping each concrete `run` on the choice.
+ * Custom MenuItem / Dialog / kinds stay flat so UIs do not lose bespoke chrome.
+ */
+export function buildActionGroups(actions: readonly ResolvedDataSourceAction[]): GroupedDataSourceActions {
+	const groups = new Map<string, DataSourceActionGroup>();
+	const customActions: ResolvedDataSourceAction[] = [];
+
+	actions.forEach((action) => {
+		if (action.MenuItem || action.Dialog || !standardActionKinds.has(action.kind)) {
+			customActions.push(action);
+			return;
+		}
+		const key = `${action.binding.propertyName}::${action.kind}`;
+		const group = groups.get(key) ?? {
+			key,
+			kind: action.kind,
+			label: actionKindLabel(action.kind),
+			icon: action.icon,
+			choices: []
+		};
+		group.choices.push(...buildActionChoices(action));
+		groups.set(key, group);
+	});
+
+	return { groups: Array.from(groups.values()), customActions };
+}
+
+/**
+ * Runs `action.run` with an optional choice target (e.g. create content-type / path).
+ * Throws if the action is presentation-only (MenuItem / Dialog without `run`).
+ */
+export async function invokeResolvedAction(
+	action: ResolvedDataSourceAction,
+	context: DataSourceFieldContext,
+	target?: DataSourceActionChoice['target']
+): Promise<DataSourceSelection | DataSourceSelection[] | null> {
+	if (!action.run) {
+		throw new Error(`Data-source action "${action.actionKey}" does not provide run().`);
+	}
+	return action.run(context, { target });
+}
+
+/** Invokes the {@link ResolvedDataSourceAction} behind a grouped choice, forwarding its target. */
+export function invokeActionChoice(
+	choice: DataSourceActionChoice,
+	context: DataSourceFieldContext
+): Promise<DataSourceSelection | DataSourceSelection[] | null> {
+	return invokeResolvedAction(choice.action, context, choice.target);
+}
+
+function actionTitle(action: DataSourceAction): string {
+	if (typeof action.label === 'string') return action.label;
+	return action.meta?.path ? String(action.meta.path) : action.id;
+}
+
+/**
+ * Builds the legacy item-picker summary shape from declarative actions so
+ * NodeSelector can keep its 1-vs-N picker UX without switching on DS type ids.
+ */
+export function consolidateItemActions(actions: readonly ResolvedDataSourceAction[]): ConsolidatedItemPickerData {
+	const allowedCreateTypes: LookupTable<AllowedContentTypesDataWithDestinations> = {};
+	const allowedCreatePaths = new Set<string>();
+	const allowedBrowsePaths: AllowedPathsData[] = [];
+	const allowedSearchPaths: AllowedPathsData[] = [];
+	const allowedUploadPaths: AllowedPathsData[] = [];
+
+	actions.forEach((action) => {
+		if (action.MenuItem || action.Dialog) return;
+		const meta = action.meta ?? {};
+		const title = actionTitle(action);
+		const sortOptions =
+			meta.sortBy || meta.sortOrder
+				? { sortBy: meta.sortBy as string | undefined, sortOrder: meta.sortOrder as 'asc' | 'desc' | undefined }
+				: undefined;
+
+		switch (action.kind) {
+			case 'browse':
+				if (meta.path) {
+					allowedBrowsePaths.push({
+						title,
+						path: meta.path,
+						actionChoice: buildActionChoices(action)[0],
+						allowedContentTypes: meta.contentTypes ?? [],
+						options: sortOptions
+					});
+				}
+				break;
+			case 'search':
+				if (meta.path) {
+					allowedSearchPaths.push({
+						title,
+						path: meta.path,
+						actionChoice: buildActionChoices(action)[0],
+						allowedContentTypes: meta.contentTypes ?? [],
+						options: sortOptions
+					});
+				}
+				break;
+			case 'upload':
+				if (meta.path) {
+					allowedUploadPaths.push({
+						title,
+						path: meta.path,
+						actionChoice: buildActionChoices(action)[0]
+					});
+				}
+				break;
+			case 'create': {
+				(meta.createTargets ?? []).forEach((target) => {
+					const contentTypeId = target.contentTypeId;
+					if (!contentTypeId) return;
+					allowedCreateTypes[contentTypeId] = allowedCreateTypes[contentTypeId] ?? {};
+					if (target.strategy === 'embedded') {
+						allowedCreateTypes[contentTypeId].embedded = true;
+					} else {
+						allowedCreateTypes[contentTypeId].shared = true;
+						if (target.path) {
+							allowedCreateTypes[contentTypeId].createPaths = allowedCreateTypes[contentTypeId].createPaths ?? [];
+							if (!allowedCreateTypes[contentTypeId].createPaths.includes(target.path)) {
+								allowedCreateTypes[contentTypeId].createPaths.push(target.path);
+							}
+						}
+					}
+				});
+				(meta.createPaths ?? []).forEach((path) => {
+					if (path) allowedCreatePaths.add(path);
+				});
+				break;
+			}
+			default:
+				break;
+		}
+	});
+
+	return {
+		allowedCreateTypes,
+		allowedCreatePaths: Array.from(allowedCreatePaths),
+		allowedBrowsePaths,
+		allowedSearchPaths,
+		allowedUploadPaths
+	};
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/bindings.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/bindings.ts
new file mode 100644
index 000000000..0df9cfbb9
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/bindings.ts
@@ -0,0 +1,184 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { ContentType, ContentTypeField, DataSource } from '../../../models/ContentType';
+import type { BuiltInControlType } from '../lib/controlMap';
+import type { DataSourceBinding, DataSourceResolutionError } from './types';
+
+/**
+ * Built-in control → DS binding metadata. Plugin controls do not belong here;
+ * they declare `dataSourceBindings` on `PluginDescriptor.controls[type]`
+ * and/or register via {@link registerControlDataSourceBindings}.
+ *
+ * `selection` is field-value cardinality (one selected option vs many checked
+ * options). It does not encode how many data sources TB may bind; that is a
+ * separate descriptor-property concern (`datasource:item` vs
+ * `datasource:item:singleSelection`).
+ */
+export const controlDataSourceBindings: Partial<Record<BuiltInControlType, readonly DataSourceBinding[]>> = {
+	'node-selector': [{ propertyName: 'itemManager', interfaces: ['item'], selection: 'multi' }],
+	'image-picker': [{ propertyName: 'imageManager', interfaces: ['image'], selection: 'single' }],
+	'video-picker': [{ propertyName: 'videoManager', interfaces: ['video'], selection: 'single' }],
+	'transcoded-video-picker': [{ propertyName: 'videoManager', interfaces: ['transcoded-video'], selection: 'single' }],
+	dropdown: [{ propertyName: 'datasource', interfaces: ['item', 'options'], selection: 'single' }],
+	'checkbox-group': [{ propertyName: 'datasource', interfaces: ['item', 'options'], selection: 'multi' }],
+	'linked-dropdown': [{ propertyName: 'datasource', interfaces: ['item', 'options'], selection: 'single' }],
+	rte: [
+		{ propertyName: 'imageManager', interfaces: ['image'], selection: 'single' },
+		{ propertyName: 'videoManager', interfaces: ['video', 'transcoded-video'], selection: 'single' },
+		{ propertyName: 'audioManager', interfaces: ['audio'], selection: 'single' },
+		{ propertyName: 'fileManager', interfaces: ['item'], selection: 'single' }
+	]
+};
+
+/** Runtime registrations for plugin / dynamically discovered control types. */
+const registeredControlDataSourceBindings = new Map<string, readonly DataSourceBinding[]>();
+
+// Controls without bindings are the common case. A shared instance keeps the identity stable so
+// callers keying effects on the result don't re-run on every render.
+const noBindings: readonly DataSourceBinding[] = Object.freeze([]);
+
+/** Type guard for plugin/control binding contributions before registry install. */
+export function isDataSourceBinding(value: unknown): value is DataSourceBinding {
+	if (!value || typeof value !== 'object') return false;
+	const candidate = value as Partial<DataSourceBinding>;
+	return (
+		typeof candidate.propertyName === 'string' &&
+		candidate.propertyName.length > 0 &&
+		Array.isArray(candidate.interfaces) &&
+		candidate.interfaces.length > 0 &&
+		candidate.interfaces.every((item) => typeof item === 'string' && item.length > 0) &&
+		(candidate.selection === 'single' || candidate.selection === 'multi')
+	);
+}
+
+/**
+ * Validates and normalizes binding contributions from plugins or control modules.
+ *
+ * Accepts one binding or an array; `null` / `undefined` → `[]`. Rejects partial objects so a typo’d
+ * binding does not silently become “no data sources”.
+ */
+export function normalizeDataSourceBindings(value: unknown): readonly DataSourceBinding[] {
+	if (value == null) return [];
+	const candidates = Array.isArray(value) ? value : [value];
+	const bindings = candidates.filter(isDataSourceBinding);
+	if (bindings.length !== candidates.length) {
+		throw new TypeError(
+			'Control dataSourceBindings must be a DataSourceBinding or DataSourceBinding[] with propertyName, interfaces, and selection.'
+		);
+	}
+	return bindings;
+}
+
+/**
+ * Reads binding metadata from a control plugin module.
+ * Supported shapes:
+ * - named export `dataSourceBindings` / `dataSourceBinding`
+ * - static on the default component: `Component.dataSourceBindings`
+ */
+export function extractDataSourceBindingsFromControlModule(module: unknown): readonly DataSourceBinding[] {
+	const imported = module as {
+		dataSourceBindings?: unknown;
+		dataSourceBinding?: unknown;
+		default?: {
+			dataSourceBindings?: unknown;
+			dataSourceBinding?: unknown;
+		};
+	};
+	const raw =
+		imported.dataSourceBindings ??
+		imported.dataSourceBinding ??
+		imported.default?.dataSourceBindings ??
+		imported.default?.dataSourceBinding;
+	return normalizeDataSourceBindings(raw);
+}
+
+/**
+ * Registers DS binding metadata for a control type (plugins / dynamic types).
+ *
+ * Built-ins live in {@link controlDataSourceBindings}; this map is for types not in that table.
+ * `registerPlugin` already calls this from `controls[type].dataSourceBindings`.
+ */
+export function registerControlDataSourceBindings(
+	controlType: string,
+	bindings: readonly DataSourceBinding[] | DataSourceBinding
+): void {
+	if (!controlType) {
+		throw new TypeError('registerControlDataSourceBindings requires a non-empty control type.');
+	}
+	registeredControlDataSourceBindings.set(controlType, normalizeDataSourceBindings(bindings));
+}
+
+/**
+ * Lookup order: built-in {@link controlDataSourceBindings} → runtime plugin registrations → shared
+ * empty array. Built-ins always win so plugins cannot shadow OOB control bindings.
+ * The empty result is a stable frozen `[]` so effect deps do not thrash.
+ *
+ * Binding metadata tells FE which field properties hold DS ids and which interfaces they require.
+ */
+export function getControlDataSourceBindings(controlType: string): readonly DataSourceBinding[] {
+	return (
+		controlDataSourceBindings[controlType as BuiltInControlType] ??
+		registeredControlDataSourceBindings.get(controlType) ??
+		noBindings
+	);
+}
+
+/**
+ * Parses comma-separated DS ids from `field.properties[binding.propertyName].value`.
+ * Order is authoring order; empty or non-string → `[]`.
+ */
+export function getFieldDataSourceIds(field: ContentTypeField, binding: DataSourceBinding): string[] {
+	const value = field.properties?.[binding.propertyName]?.value;
+	if (typeof value !== 'string') return [];
+	return value
+		.split(',')
+		.map((id) => id.trim())
+		.filter(Boolean);
+}
+
+/**
+ * Resolves records in the exact order authored on the field. Unknown ids are
+ * returned as errors instead of being silently dropped.
+ */
+export function resolveFieldDataSourceRecords(
+	contentType: ContentType,
+	field: ContentTypeField,
+	bindings: readonly DataSourceBinding[]
+): { records: DataSource[]; recordBindings: DataSourceBinding[]; errors: DataSourceResolutionError[] } {
+	const records: DataSource[] = [];
+	const recordBindings: DataSourceBinding[] = [];
+	const errors: DataSourceResolutionError[] = [];
+	const byId = new Map((contentType.dataSources ?? []).map((dataSource) => [dataSource.id, dataSource]));
+
+	bindings.forEach((binding) => {
+		getFieldDataSourceIds(field, binding).forEach((id) => {
+			const record = byId.get(id);
+			if (!record) {
+				errors.push({
+					code: 'unknown-id',
+					dataSourceId: id,
+					message: `Field "${field.id}" references unknown data source "${id}" through "${binding.propertyName}".`
+				});
+				return;
+			}
+			records.push(record);
+			recordBindings.push(binding);
+		});
+	});
+
+	return { records, recordBindings, errors };
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/completeness.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/completeness.ts
new file mode 100644
index 000000000..4d43b83e6
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/completeness.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { dataSourceDescriptors, type BuiltInDataSourceType } from '../../ContentTypeManagement/descriptors/dataSources';
+import { dataSourceModuleRegistry } from './registry';
+import { builtInDataSourceModules } from './modules';
+
+/**
+ * Diagnostic shape for TB descriptor ↔ FE module parity.
+ * `ok` is true only when `missingModules` is empty (`extraModules` do not fail the check).
+ */
+export interface DataSourceRegistryCompletenessReport {
+	descriptorTypes: string[];
+	moduleTypes: string[];
+	missingModules: string[];
+	extraModules: string[];
+	ok: boolean;
+}
+
+/**
+ * Compares TB `dataSourceDescriptors` to FE built-in modules (+ the live registry).
+ * Defaults ignore the dead `flash-desktop-upload` type. For CI / diagnostics, not runtime gating.
+ */
+export function checkBuiltInDataSourceRegistryCompleteness(
+	options: { ignoreTypes?: readonly string[] } = {}
+): DataSourceRegistryCompletenessReport {
+	const ignore = new Set(options.ignoreTypes ?? ['flash-desktop-upload']);
+	const descriptorTypes = (Object.keys(dataSourceDescriptors) as BuiltInDataSourceType[]).filter(
+		(type) => !ignore.has(type)
+	);
+	const moduleTypes = builtInDataSourceModules.map((module) => module.type).filter((type) => !ignore.has(type));
+	const moduleSet = new Set(moduleTypes);
+	const descriptorSet = new Set(descriptorTypes);
+	const missingModules = descriptorTypes.filter((type) => !moduleSet.has(type) && !dataSourceModuleRegistry.has(type));
+	const extraModules = moduleTypes.filter((type) => !descriptorSet.has(type as BuiltInDataSourceType));
+	return {
+		descriptorTypes,
+		moduleTypes,
+		missingModules,
+		extraModules,
+		ok: missingModules.length === 0
+	};
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/defineModule.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/defineModule.ts
new file mode 100644
index 000000000..a368d00ad
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/defineModule.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { DataSource } from '../../../models/ContentType';
+import type { DataSourceInstance, DataSourceModule } from './types';
+
+/**
+ * Identity helper that types an object literal as {@link DataSourceModule} without a cast.
+ *
+ * Does not register the module — pair with {@link registerDataSourceModule} for built-ins, or
+ * contribute via `PluginDescriptor.dataSources` + `registerPlugin` for plugins. Use at export
+ * sites so the IDE checks `apiVersion`, `interfaces`, `capabilities`, and `create` as you write.
+ *
+ * Equivalent to `satisfies DataSourceModule` when no separate `: DataSourceModule` annotation is
+ * present; call sites may keep both for consistency with other module files.
+ */
+export function defineDataSourceModule(module: DataSourceModule): DataSourceModule {
+	return module;
+}
+
+type InstanceExtras = Pick<DataSourceInstance, 'getActions'> &
+	Partial<Pick<DataSourceInstance, 'interfaces' | 'capabilities' | 'list' | 'edit' | 'refreshItem' | 'flags'>>;
+
+/**
+ * Builds a {@link DataSourceInstance} from the form-definition record + module metadata.
+ *
+ * Fills identity (`id` / `title` from the record, `type` / default `interfaces` / `capabilities`
+ * from the module) and merges runtime hooks from `extras`. Prefer this over hand-rolling instances
+ * so TB config and FE module metadata stay aligned; `extras` may narrow interfaces/capabilities or
+ * attach `list` / `edit` / `refreshItem` / `flags` when the instance differs from the module defaults.
+ */
+export function createInstanceFromRecord(
+	record: DataSource,
+	module: DataSourceModule,
+	extras: InstanceExtras
+): DataSourceInstance {
+	return {
+		id: record.id,
+		type: module.type,
+		title: record.title,
+		interfaces: extras.interfaces ?? module.interfaces,
+		capabilities: extras.capabilities ?? module.capabilities,
+		getActions: extras.getActions,
+		list: extras.list,
+		edit: extras.edit,
+		refreshItem: extras.refreshItem,
+		flags: extras.flags
+	};
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/host.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/host.ts
new file mode 100644
index 000000000..3ce985c33
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/host.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { getControlDataSourceBindings, registerControlDataSourceBindings } from './bindings';
+import { getRegisteredControlContribution } from '../controls/registry';
+import { dataSourceModuleRegistry, registerDataSourceModule } from './registry';
+import { DATA_SOURCE_API_VERSION } from './types';
+
+/**
+ * Public runtime surface for the data-source *module registry* (built-ins and
+ * plugin contributions). Instance-scoped services are supplied to
+ * DataSourceModule.create().
+ *
+ * Authoring extensions ship as PluginDescriptor bundles; `registerPlugin`
+ * installs `descriptor.dataSources` into this registry. Prefer
+ * `importPlugin` / `registerPlugin` over calling `register` from plugin code.
+ * See docs/type-builder-forms-engine-plugins.md §9.
+ */
+export const formsEngineDataSourcesHost = {
+	apiVersion: DATA_SOURCE_API_VERSION,
+	register: registerDataSourceModule,
+	get: dataSourceModuleRegistry.get.bind(dataSourceModuleRegistry),
+	getAll: dataSourceModuleRegistry.getAll.bind(dataSourceModuleRegistry)
+};
+
+/**
+ * Public runtime surface for control-extension binding metadata and contributions.
+ * Prefer contributing controls via `PluginDescriptor.controls` (loaded through
+ * `importPlugin` / `registerPlugin`). Eager binding registration remains available
+ * for UMD-style loaders.
+ */
+export const formsEngineControlsHost = {
+	registerDataSourceBindings: registerControlDataSourceBindings,
+	getDataSourceBindings: getControlDataSourceBindings,
+	getControl: getRegisteredControlContribution
+};
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/index.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/index.ts
new file mode 100644
index 000000000..e8297fe74
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/index.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * FormsEngine data-source public surface.
+ *
+ * Importing this barrel registers built-in modules once and (in development) warns on TB/FE module
+ * gaps. Prefer granular imports in FE runtime when you do not want the registration side effect;
+ * {@link loadDataSourceModule} also calls `registerBuiltInDataSourceModules` when consumers skip
+ * this barrel.
+ */
+
+export * from './actionAdapters';
+export * from './bindings';
+export * from './completeness';
+export * from './defineModule';
+export * from './loader';
+export * from './pathUtils';
+export * from './registry';
+export * from './services';
+export * from './types';
+export * from './useFieldDataSources';
+export { registerBuiltInDataSourceModules, builtInDataSourceModules } from './modules';
+
+import { checkBuiltInDataSourceRegistryCompleteness } from './completeness';
+import { registerBuiltInDataSourceModules } from './modules';
+
+// Side-effect: importing FormsEngine/dataSources registers built-ins once.
+registerBuiltInDataSourceModules();
+
+if (process.env.NODE_ENV !== 'production') {
+	const report = checkBuiltInDataSourceRegistryCompleteness();
+	if (!report.ok) {
+		console.warn('[FormsEngine] Built-in data-source modules missing for TB descriptors:', report.missingModules);
+	}
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/loader.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/loader.ts
new file mode 100644
index 000000000..26ab7e946
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/loader.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { DataSource } from '../../../models/ContentType';
+import { buildFileUrl, importPlugin } from '../../../services/plugin';
+import { registerBuiltInDataSourceModules } from './modules';
+import { dataSourceModuleRegistry, type DataSourceModuleRegistry } from './registry';
+import type { DataSourceModule } from './types';
+
+/**
+ * Resolves a DataSourceModule for a form-definition record.
+ *
+ * Built-ins come from the registry. Plugin types are loaded through the shared
+ * plugin system (`importPlugin` → `registerPlugin` → `descriptor.dataSources`),
+ * then looked up by `record.type`. This file is not a parallel plugin loader.
+ */
+export async function loadDataSourceModule(
+	siteId: string,
+	record: DataSource,
+	registry: DataSourceModuleRegistry = dataSourceModuleRegistry
+): Promise<DataSourceModule> {
+	// Built-ins must be present regardless of which entry point pulled the runtime in. Consumers
+	// import the granular modules (not the `dataSources` barrel), so registration can't rely on it.
+	if (registry === dataSourceModuleRegistry) registerBuiltInDataSourceModules();
+	const registered = registry.get(record.type);
+	if (registered) return registered;
+
+	if (!record.plugin) {
+		throw new Error(`No data-source module is registered for type "${record.type}".`);
+	}
+
+	const builder = {
+		site: siteId,
+		type: record.plugin.type,
+		name: record.plugin.name,
+		file: record.plugin.filename,
+		id: record.plugin.pluginId
+	};
+	const url = buildFileUrl(builder);
+	const plugin = await importPlugin(builder);
+	const contributed = registry.get(record.type);
+	if (!contributed) {
+		throw new Error(
+			`Plugin "${plugin.id}" loaded from "${url}" does not contribute data-source type "${record.type}". ` +
+				`Add it to PluginDescriptor.dataSources (keyed by type id).`
+		);
+	}
+	return contributed;
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/moduleHelpers.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/moduleHelpers.ts
new file mode 100644
index 000000000..c6c0c22f8
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/moduleHelpers.ts
@@ -0,0 +1,442 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type ContentType from '../../../models/ContentType';
+import type { DataSource } from '../../../models/ContentType';
+import type LookupTable from '../../../models/LookupTable';
+import type {
+	DataSourceAction,
+	DataSourceActionMeta,
+	DataSourceAssetSelection,
+	DataSourceCapability,
+	DataSourceItemSelection,
+	DataSourceListItem
+} from './types';
+import { expandPathOrRaw, toSearchPath } from './pathUtils';
+
+/**
+ * Normalizes a key/value list entry (configured options, taxonomy items, …).
+ * Coerces key/value to strings, spreads remaining properties, and throws indexed errors when invalid.
+ */
+export function normalizeListItem(item: unknown, index: number, sourceLabel: string): DataSourceListItem {
+	if (!item || typeof item !== 'object') {
+		throw new Error(`${sourceLabel} entry at index ${index} is not an object.`);
+	}
+	const record = item as Record<string, unknown>;
+	const key = String(record.key ?? '');
+	const value = String(record.value ?? '');
+	if (!key && !value) {
+		throw new Error(`${sourceLabel} entry at index ${index} is missing key/value.`);
+	}
+	return { ...record, key, value };
+}
+
+/** Shared allow-lists for browse/search/upload filters; keep in sync with legacy FE1 expectations. */
+export const IMAGE_MIME_TYPES = [
+	'image/jpeg',
+	'image/png',
+	'image/gif',
+	'image/tiff',
+	'image/bmp',
+	'image/svg+xml',
+	'image/webp'
+];
+
+export const VIDEO_MIME_TYPES = ['video/mp4', 'video/x-msvideo', 'video/quicktime', 'video/webm', 'video/ogg'];
+
+export const AUDIO_MIME_TYPES = ['audio/mpeg', 'audio/mp4', 'audio/ogg', 'audio/wav', 'audio/x-wav', 'audio/webm'];
+
+/** Shared/embedded create destination used by create actions and {@link consolidateItemActions}. */
+export type CreateTarget = {
+	contentTypeId: string;
+	path?: string;
+	strategy: 'shared' | 'embedded';
+};
+
+/** Reads a DS property as string; missing/empty → `fallback`. Form XML often stores everything as strings. */
+export function propString(record: DataSource, name: string, fallback = ''): string {
+	const value = record.properties?.[name];
+	if (value == null || value === '') return fallback;
+	return String(value);
+}
+
+/**
+ * Coerces a DS property to boolean. Missing/empty uses `defaultWhenMissing` so XML `"true"` strings
+ * work and explicit absence stays distinct from false.
+ */
+export function propBoolean(record: DataSource, name: string, defaultWhenMissing = false): boolean {
+	const value = record.properties?.[name];
+	if (value == null || value === '') return defaultWhenMissing;
+	if (typeof value === 'boolean') return value;
+	return String(value) === 'true';
+}
+
+/** Trims a CSV from TB properties; empty → `[]`. */
+export function splitCsv(value: string | undefined | null): string[] {
+	if (!value?.trim()) return [];
+	return value
+		.split(',')
+		.map((part) => part.trim())
+		.filter(Boolean);
+}
+
+/** Normalizes site content types whether stored as an array or an id lookup table. */
+export function contentTypesToArray(contentTypes: ContentType[] | LookupTable<ContentType> | undefined): ContentType[] {
+	if (!contentTypes) return [];
+	return Array.isArray(contentTypes) ? contentTypes : Object.values(contentTypes);
+}
+
+/**
+ * Resolves a contentTypes property that may be `*` (all pages or components) or a CSV of ids.
+ */
+export function resolveContentTypeIds(
+	raw: string | undefined,
+	family: 'page' | 'component',
+	contentTypes: ContentType[] | LookupTable<ContentType> | undefined
+): string[] {
+	const trimmed = raw?.trim();
+	if (!trimmed) return [];
+	if (trimmed !== '*') return splitCsv(trimmed);
+	return contentTypesToArray(contentTypes)
+		.filter((ct) => ct.type === family)
+		.map((ct) => ct.id);
+}
+
+/** Reads `baseRepoPath` or legacy `baseRepositoryPath` so older form-definitions keep working. */
+export function baseRepoPath(record: DataSource, fallback = ''): string {
+	return propString(record, 'baseRepoPath') || propString(record, 'baseRepositoryPath') || fallback;
+}
+
+/** Reads `repoPath` or legacy `path`, falling back to `fallback` (typically `/static-assets/`). */
+export function resolveRepoPath(record: DataSource, fallback = '/static-assets/'): string {
+	return propString(record, 'repoPath') || propString(record, 'path', fallback);
+}
+
+/** Extension of the last path segment; no extension → `undefined`. */
+export function fileExtensionFromPath(path: string): string | undefined {
+	const slash = path.lastIndexOf('/');
+	const name = slash >= 0 ? path.slice(slash + 1) : path;
+	const dot = name.lastIndexOf('.');
+	return dot > 0 ? name.slice(dot + 1) : undefined;
+}
+
+/**
+ * Maps heterogeneous picker/search/browse results into {@link DataSourceItemSelection}, probing
+ * common path/label/contentType fields from Studio dialogs.
+ */
+export function toItemSelection(item: unknown): DataSourceItemSelection {
+	if (!item || typeof item !== 'object') {
+		return { kind: 'item', value: item };
+	}
+	const candidate = item as Record<string, unknown>;
+	const path =
+		(typeof candidate.path === 'string' && candidate.path) ||
+		(typeof candidate.browserUri === 'string' && candidate.browserUri) ||
+		(typeof candidate.key === 'string' && candidate.key) ||
+		undefined;
+	const contentTypeId =
+		(typeof candidate.contentTypeId === 'string' && candidate.contentTypeId) ||
+		(typeof candidate.contentType === 'string' && candidate.contentType) ||
+		undefined;
+	const value = candidate.name ?? candidate.label ?? candidate.internalName ?? candidate.value ?? path;
+	return { kind: 'item', path, contentTypeId, value };
+}
+
+export function toItemSelections(items: unknown[]): DataSourceItemSelection[] {
+	return items.map(toItemSelection);
+}
+
+/**
+ * Maps browse/upload results to assets; special-cases Uppy `meta` upload payloads vs repo browse
+ * shapes. Throws if a path cannot be derived.
+ */
+export function toAssetSelection(item: unknown): DataSourceAssetSelection {
+	if (typeof item === 'string') {
+		return {
+			kind: 'asset',
+			relativeUrl: item,
+			fileExtension: fileExtensionFromPath(item)
+		};
+	}
+	if (!item || typeof item !== 'object') {
+		throw new Error('Unable to map data-source result to an asset selection.');
+	}
+	const candidate = item as Record<string, unknown>;
+	// Upload result (Uppy FileUpload)
+	if (candidate.meta && typeof candidate.meta === 'object') {
+		const meta = candidate.meta as { path?: string; name?: string; type?: string };
+		const name = meta.name ?? (typeof candidate.name === 'string' ? candidate.name : '');
+		const path = meta.path ?? '';
+		if (!path && !name) {
+			throw new Error('Unable to map data-source result to an asset selection: missing path.');
+		}
+		const relativeUrl = path && name ? `${path.replace(/\/$/, '')}/${name}` : path || name;
+		return {
+			kind: 'asset',
+			relativeUrl,
+			previewUrl: typeof candidate.preview === 'string' ? candidate.preview : undefined,
+			fileExtension:
+				(typeof candidate.extension === 'string' && candidate.extension) || fileExtensionFromPath(relativeUrl),
+			mimeType: meta.type ?? (typeof candidate.type === 'string' ? candidate.type : undefined)
+		};
+	}
+	const relativeUrl =
+		(typeof candidate.relativeUrl === 'string' && candidate.relativeUrl) ||
+		(typeof candidate.path === 'string' && candidate.path) ||
+		(typeof candidate.browserUri === 'string' && candidate.browserUri) ||
+		(typeof candidate.url === 'string' && candidate.url) ||
+		'';
+	if (!relativeUrl) {
+		throw new Error('Unable to map data-source result to an asset selection: missing path.');
+	}
+	return {
+		kind: 'asset',
+		relativeUrl,
+		previewUrl: typeof candidate.previewUrl === 'string' ? candidate.previewUrl : undefined,
+		fileExtension:
+			(typeof candidate.fileExtension === 'string' && candidate.fileExtension) || fileExtensionFromPath(relativeUrl),
+		mimeType: typeof candidate.mimeType === 'string' ? candidate.mimeType : undefined
+	};
+}
+
+export function toAssetSelections(items: unknown[]): DataSourceAssetSelection[] {
+	return items.map(toAssetSelection);
+}
+
+/** Extracts Uppy `successful[]` into asset selections; upload action factories rely on this shape. */
+export function mapUploadResultToAssets(result: unknown): DataSourceAssetSelection[] {
+	if (!result || typeof result !== 'object') return [];
+	const successful = (result as { successful?: unknown[] }).successful;
+	if (!Array.isArray(successful) || successful.length === 0) return [];
+	return toAssetSelections(successful);
+}
+
+/** Like {@link mapUploadResultToAssets}, but as item selections (path = relativeUrl). */
+export function mapUploadResultToItems(result: unknown): DataSourceItemSelection[] {
+	return mapUploadResultToAssets(result).map((asset) => ({
+		kind: 'item',
+		path: asset.relativeUrl,
+		value: asset.relativeUrl
+	}));
+}
+
+/**
+ * Hard-fail stub for S3/WebDAV ops not yet on `DataSourceServices`.
+ * Keeps remote modules loadable without fake success.
+ */
+export function unsupportedRemoteError(type: string, operation: string): never {
+	throw new Error(
+		`Data source "${type}" ${operation} is not yet supported by FormsEngine DataSourceServices. ` +
+			`Remote S3/WebDAV ${operation} requires dedicated platform services.`
+	);
+}
+
+/**
+ * Factory for a standard browse action: expands path, calls host services, maps results to item or
+ * asset selections. Prefer this over ad-hoc `run` so controls can group/consolidate uniformly.
+ */
+export function createBrowseAction(options: {
+	id?: string;
+	label?: string;
+	path: string;
+	contentTypes?: string[];
+	mimeTypes?: string[];
+	selection: 'item' | 'asset';
+	meta?: DataSourceActionMeta;
+}): DataSourceAction {
+	const { path, contentTypes, mimeTypes, selection } = options;
+	return {
+		id: options.id ?? 'browse',
+		kind: 'browse',
+		label: options.label ?? 'Browse',
+		meta: {
+			path,
+			contentTypes,
+			mimeTypes,
+			...options.meta
+		},
+		async run(ctx) {
+			const expanded = expandPathOrRaw(ctx, path);
+			const items = await ctx.services.browseFiles({
+				path: expanded,
+				contentTypes,
+				mimeTypes,
+				multiSelect: (ctx.remainingCapacity ?? 2) !== 1
+			});
+			if (!items.length) return null;
+			return selection === 'asset' ? toAssetSelections(items) : toItemSelections(items);
+		}
+	};
+}
+
+/**
+ * Factory for a standard search action (path expanded + recursive `/.+` suffix via {@link toSearchPath}).
+ */
+export function createSearchAction(options: {
+	id?: string;
+	label?: string;
+	path: string;
+	contentTypes?: string[];
+	mimeTypes?: string[];
+	selection: 'item' | 'asset';
+	meta?: DataSourceActionMeta;
+}): DataSourceAction {
+	const { path, contentTypes, mimeTypes, selection } = options;
+	return {
+		id: options.id ?? 'search',
+		kind: 'search',
+		label: options.label ?? 'Search',
+		meta: {
+			path,
+			contentTypes,
+			mimeTypes,
+			...options.meta
+		},
+		async run(ctx) {
+			const expanded = toSearchPath(expandPathOrRaw(ctx, path));
+			const initialParameters: Record<string, unknown> = {};
+			if (mimeTypes?.length) {
+				initialParameters.filters = { 'mime-type': mimeTypes };
+			}
+			const result = await ctx.services.search({
+				path: expanded,
+				contentTypes,
+				initialParameters
+			});
+			const items = result.items?.length ? result.items : result.paths;
+			if (!items.length) return null;
+			return selection === 'asset' ? toAssetSelections(items) : toItemSelections(items);
+		}
+	};
+}
+
+/** Factory for a standard upload action; maps Uppy results via {@link mapUploadResultToAssets}. */
+export function createUploadAction(options: {
+	id?: string;
+	label?: string;
+	path: string;
+	fileTypes?: string[];
+	selection: 'item' | 'asset';
+	meta?: DataSourceActionMeta;
+}): DataSourceAction {
+	const { path, fileTypes, selection } = options;
+	return {
+		id: options.id ?? 'upload',
+		kind: 'upload',
+		label: options.label ?? 'Upload',
+		meta: {
+			path,
+			fileTypes,
+			...options.meta
+		},
+		async run(ctx) {
+			const expanded = expandPathOrRaw(ctx, path);
+			const result = await ctx.services.upload({ path: expanded, fileTypes });
+			const mapped = selection === 'asset' ? mapUploadResultToAssets(result) : mapUploadResultToItems(result);
+			return mapped.length ? mapped : null;
+		}
+	};
+}
+
+/**
+ * Factory for a standard create action. When multiple targets exist, the control must pass a create
+ * target via `runOptions.target` — avoids ambiguous create.
+ */
+export function createCreateAction(options: {
+	id?: string;
+	label?: string;
+	createTargets: CreateTarget[];
+	meta?: DataSourceActionMeta;
+}): DataSourceAction {
+	const { createTargets } = options;
+	return {
+		id: options.id ?? 'create',
+		kind: 'create',
+		label: options.label ?? 'Create',
+		meta: {
+			createTargets,
+			...options.meta
+		},
+		async run(ctx, runOptions) {
+			if (createTargets.length === 0) {
+				throw new Error('No create targets are configured for this data source.');
+			}
+			const selectedTarget = runOptions?.target;
+			if (selectedTarget && selectedTarget.type !== 'create') {
+				throw new Error(`Action "${options.id ?? 'create'}" requires a create target.`);
+			}
+			if (!selectedTarget && createTargets.length > 1) {
+				throw new Error(
+					'Multiple create targets are available; the control must pick a content type before calling run().'
+				);
+			}
+			const target: CreateTarget =
+				selectedTarget?.type === 'create'
+					? {
+							contentTypeId: selectedTarget.contentTypeId,
+							path: selectedTarget.path,
+							strategy: selectedTarget.strategy
+						}
+					: createTargets[0];
+			const path = expandPathOrRaw(ctx, target.path ?? '');
+			return ctx.services.createContent({
+				path,
+				contentTypeId: target.contentTypeId,
+				embedded: target.strategy === 'embedded'
+			});
+		}
+	};
+}
+
+/**
+ * Action that always throws via {@link unsupportedRemoteError}.
+ * Use for remote DS types until platform services exist.
+ */
+export function createRemoteStubAction(options: {
+	id: string;
+	kind: DataSourceAction['kind'];
+	label: string;
+	type: string;
+	operation: string;
+	meta?: DataSourceActionMeta;
+}): DataSourceAction {
+	return {
+		id: options.id,
+		kind: options.kind,
+		label: options.label,
+		meta: options.meta,
+		async run() {
+			unsupportedRemoteError(options.type, options.operation);
+		}
+	};
+}
+
+/**
+ * Derives advertised capabilities from action kinds (+ extras) so instance `capabilities` stay
+ * consistent with what `getActions` returns.
+ */
+export function capabilitiesFromActions(
+	actions: readonly DataSourceAction[],
+	extra: DataSourceCapability[] = []
+): DataSourceCapability[] {
+	const set = new Set<DataSourceCapability>(extra);
+	actions.forEach((action) => {
+		if (action.kind === 'browse' || action.kind === 'search' || action.kind === 'upload' || action.kind === 'create') {
+			set.add(action.kind as DataSourceCapability);
+		}
+	});
+	return Array.from(set);
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/audioBrowseRepo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/audioBrowseRepo.ts
new file mode 100644
index 000000000..356134cc3
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/audioBrowseRepo.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { AUDIO_MIME_TYPES, createBrowseAction, resolveRepoPath } from '../moduleHelpers';
+
+export const audioBrowseRepoDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'audio-browse-repo',
+	interfaces: ['audio'],
+	capabilities: ['browse'],
+	create({ record }) {
+		const path = resolveRepoPath(record, '/static-assets/');
+		return createInstanceFromRecord(record, audioBrowseRepoDataSourceModule, {
+			capabilities: ['browse'],
+			getActions() {
+				return [
+					createBrowseAction({
+						label: `Browse - ${record.title}`,
+						path,
+						mimeTypes: AUDIO_MIME_TYPES,
+						selection: 'asset'
+					})
+				];
+			}
+		});
+	}
+});
+
+export default audioBrowseRepoDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/audioDesktopUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/audioDesktopUpload.ts
new file mode 100644
index 000000000..9dc2d30aa
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/audioDesktopUpload.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { AUDIO_MIME_TYPES, createUploadAction, resolveRepoPath } from '../moduleHelpers';
+
+export const audioDesktopUploadDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'audio-desktop-upload',
+	interfaces: ['audio'],
+	capabilities: ['upload'],
+	create({ record }) {
+		const path = resolveRepoPath(record, '/static-assets/');
+		return createInstanceFromRecord(record, audioDesktopUploadDataSourceModule, {
+			capabilities: ['upload'],
+			getActions() {
+				return [
+					createUploadAction({
+						label: `Upload - ${record.title}`,
+						path,
+						fileTypes: AUDIO_MIME_TYPES,
+						selection: 'asset'
+					})
+				];
+			}
+		});
+	}
+});
+
+export default audioDesktopUploadDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/components.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/components.ts
new file mode 100644
index 000000000..5b2047a33
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/components.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { createComponentsOrPagesModule } from './componentsPagesShared';
+
+export const componentsDataSourceModule = createComponentsOrPagesModule('components', 'component', {
+	browsePath: '/site/components',
+	repoPath: '/site/components'
+});
+
+export default componentsDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/componentsPagesShared.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/componentsPagesShared.ts
new file mode 100644
index 000000000..b4f96687f
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/componentsPagesShared.ts
@@ -0,0 +1,116 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceAction, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import {
+	baseRepoPath,
+	capabilitiesFromActions,
+	createBrowseAction,
+	createCreateAction,
+	createSearchAction,
+	type CreateTarget,
+	propBoolean,
+	propString,
+	resolveContentTypeIds
+} from '../moduleHelpers';
+
+export function createComponentsOrPagesModule(
+	type: 'components' | 'pages',
+	family: 'page' | 'component',
+	defaults: { browsePath: string; repoPath: string }
+): DataSourceModule {
+	const module: DataSourceModule = defineDataSourceModule({
+		apiVersion: DATA_SOURCE_API_VERSION,
+		type,
+		interfaces: ['item'],
+		capabilities: ['browse', 'search', 'create'],
+		create({ record }) {
+			const enableBrowse = propBoolean(record, 'enableBrowse', true);
+			const enableSearch = propBoolean(record, 'enableSearch', false);
+			const allowShared = propBoolean(record, 'allowShared', true);
+			const allowEmbedded = propBoolean(record, 'allowEmbedded', true);
+			const browsePath = propString(record, 'baseBrowsePath', defaults.browsePath);
+			const repoPath = baseRepoPath(record, defaults.repoPath);
+			const sortBy = propString(record, 'sortBy') || undefined;
+			const sortOrderRaw = propString(record, 'sortOrder');
+			const sortOrder = sortOrderRaw === 'asc' || sortOrderRaw === 'desc' ? sortOrderRaw : undefined;
+			const rawContentTypes = propString(record, 'contentTypes') || undefined;
+
+			const advertised: DataSourceAction[] = [];
+			if (enableBrowse) advertised.push({ id: 'browse', kind: 'browse', label: 'Browse' });
+			if (enableSearch) advertised.push({ id: 'search', kind: 'search', label: 'Search' });
+			if (allowShared || allowEmbedded) advertised.push({ id: 'create', kind: 'create', label: 'Create' });
+
+			return createInstanceFromRecord(record, module, {
+				capabilities: capabilitiesFromActions(advertised),
+				flags: { contentReference: true },
+				getActions(ctx) {
+					const contentTypeIds = resolveContentTypeIds(rawContentTypes, family, ctx.contentTypes);
+					const actions: DataSourceAction[] = [];
+					const sortMeta: { sortBy?: string; sortOrder?: 'asc' | 'desc' } = { sortBy, sortOrder };
+
+					if (enableBrowse) {
+						actions.push(
+							createBrowseAction({
+								label: `Browse - ${record.title}`,
+								path: browsePath,
+								contentTypes: contentTypeIds,
+								selection: 'item',
+								meta: sortMeta
+							})
+						);
+					}
+					if (enableSearch) {
+						actions.push(
+							createSearchAction({
+								label: `Search - ${record.title}`,
+								path: browsePath,
+								contentTypes: contentTypeIds,
+								selection: 'item',
+								meta: sortMeta
+							})
+						);
+					}
+
+					const createTargets: CreateTarget[] = [];
+					contentTypeIds.forEach((contentTypeId) => {
+						if (allowShared) {
+							createTargets.push({
+								contentTypeId,
+								path: repoPath || undefined,
+								strategy: 'shared'
+							});
+						}
+						if (allowEmbedded) {
+							createTargets.push({ contentTypeId, strategy: 'embedded' });
+						}
+					});
+					if (createTargets.length) {
+						actions.push(
+							createCreateAction({
+								label: `Create - ${record.title}`,
+								createTargets
+							})
+						);
+					}
+					return actions;
+				}
+			});
+		}
+	});
+	return module;
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/configuredList.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/configuredList.ts
new file mode 100644
index 000000000..0b4c49c95
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/configuredList.ts
@@ -0,0 +1,105 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { firstValueFrom } from 'rxjs';
+import { fetchConfigurationDOM } from '../../../../services/configuration';
+import { asArray } from '../../../../utils/array';
+import { deserialize } from '../../../../utils/xml';
+import { DATA_SOURCE_API_VERSION, type DataSourceListItem, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { propString } from '../moduleHelpers';
+
+function selectedDropdownValue(raw: string | undefined, fallback: string): string {
+	if (!raw) return fallback;
+	try {
+		const parsed = JSON.parse(raw) as Array<{ value?: string; label?: string; selected?: boolean }>;
+		const selected = asArray(parsed).find((opt) => opt?.selected);
+		return String(selected?.value ?? selected?.label ?? fallback);
+	} catch {
+		return raw || fallback;
+	}
+}
+
+function parseConfiguredListItems(doc: XMLDocument): DataSourceListItem[] {
+	const root = deserialize(doc.documentElement) as Record<string, unknown>;
+	// Legacy shape: <list><values><item key=".." value=".."/></values></list> or similar.
+	const values =
+		(root as { values?: { item?: unknown } }).values ??
+		(root as { list?: { values?: { item?: unknown } } }).list?.values ??
+		(root as { items?: { item?: unknown } }).items;
+	if (!values) {
+		throw new Error('Configured list XML did not contain a values/items collection.');
+	}
+	const items = asArray((values as { item?: unknown }).item);
+	if (!items.length) {
+		throw new Error('Configured list XML contains no items.');
+	}
+	return items.map((item, index) => {
+		if (!item || typeof item !== 'object') {
+			throw new Error(`Configured list item at index ${index} is invalid.`);
+		}
+		const record = item as Record<string, unknown>;
+		const key = String(record.key ?? '');
+		const value = String(record.value ?? '');
+		if (!key && !value) {
+			throw new Error(`Configured list item at index ${index} is missing key/value.`);
+		}
+		return { ...record, key, value };
+	});
+}
+
+function sortListItems(items: DataSourceListItem[], sort: string): DataSourceListItem[] {
+	if (!sort || sort === 'None' || sort === 'none') return items;
+	const copy = items.slice();
+	copy.sort((a, b) => {
+		const av = String(a.value);
+		const bv = String(b.value);
+		if (av === bv) return 0;
+		return av > bv ? 1 : -1;
+	});
+	if (sort === 'descending' || sort === 'Descending') {
+		copy.reverse();
+	}
+	return copy;
+}
+
+export const configuredListDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'configured-list',
+	interfaces: ['options'],
+	capabilities: ['list'],
+	create({ record }) {
+		const listName = propString(record, 'listName').trim();
+		const sort = selectedDropdownValue(propString(record, 'sort') || undefined, 'None');
+		return createInstanceFromRecord(record, configuredListDataSourceModule, {
+			capabilities: ['list'],
+			getActions: () => [],
+			async list(ctx) {
+				if (!listName) {
+					throw new Error(`Data source "${record.id}" (configured-list) requires listName.`);
+				}
+				const configPath = `/form-control-config/configured-lists/${listName}.xml`;
+				const doc = await firstValueFrom(fetchConfigurationDOM(ctx.siteId, configPath, 'studio'));
+				if (!doc?.documentElement) {
+					throw new Error(`Configured list "${listName}" was empty or could not be loaded from ${configPath}.`);
+				}
+				return sortListItems(parseConfiguredListItems(doc), sort);
+			}
+		});
+	}
+});
+
+export default configuredListDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/embeddedContent.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/embeddedContent.ts
new file mode 100644
index 000000000..8f84a8f4f
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/embeddedContent.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { createCreateAction, propString } from '../moduleHelpers';
+
+export const embeddedContentDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'embedded-content',
+	interfaces: ['item'],
+	capabilities: ['create'],
+	create({ record }) {
+		const contentTypeId = propString(record, 'contentType').trim();
+		if (!contentTypeId) {
+			throw new Error(`Data source "${record.id}" (embedded-content) requires a contentType property.`);
+		}
+		return createInstanceFromRecord(record, embeddedContentDataSourceModule, {
+			capabilities: ['create'],
+			flags: { embedded: true, contentReference: true },
+			getActions() {
+				return [
+					createCreateAction({
+						label: `Create - ${record.title}`,
+						createTargets: [{ contentTypeId, strategy: 'embedded' }]
+					})
+				];
+			}
+		});
+	}
+});
+
+export default embeddedContentDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/fileBrowseRepo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/fileBrowseRepo.ts
new file mode 100644
index 000000000..2942d7ba4
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/fileBrowseRepo.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { createBrowseAction, propString } from '../moduleHelpers';
+
+export const fileBrowseRepoDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'file-browse-repo',
+	interfaces: ['item'],
+	capabilities: ['browse'],
+	create({ record }) {
+		const path = propString(record, 'repoPath', '/');
+		return createInstanceFromRecord(record, fileBrowseRepoDataSourceModule, {
+			capabilities: ['browse'],
+			flags: { contentReference: true },
+			getActions() {
+				return [
+					createBrowseAction({
+						label: `Browse - ${record.title}`,
+						path,
+						selection: 'item'
+					})
+				];
+			}
+		});
+	}
+});
+
+export default fileBrowseRepoDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/fileDesktopUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/fileDesktopUpload.ts
new file mode 100644
index 000000000..6ebfc7dde
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/fileDesktopUpload.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { createUploadAction, propString } from '../moduleHelpers';
+
+export const fileDesktopUploadDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'file-desktop-upload',
+	interfaces: ['item'],
+	capabilities: ['upload'],
+	create({ record }) {
+		const path = propString(record, 'repoPath', '/');
+		return createInstanceFromRecord(record, fileDesktopUploadDataSourceModule, {
+			capabilities: ['upload'],
+			flags: { contentReference: true },
+			getActions() {
+				return [
+					createUploadAction({
+						label: `Upload - ${record.title}`,
+						path,
+						selection: 'item'
+					})
+				];
+			}
+		});
+	}
+});
+
+export default fileDesktopUploadDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/flashDesktopUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/flashDesktopUpload.ts
new file mode 100644
index 000000000..5873e4472
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/flashDesktopUpload.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+
+/** Dead legacy type retained so unknown-type errors are not thrown for old form-definitions. */
+export const flashDesktopUploadDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'flash-desktop-upload',
+	interfaces: ['item'],
+	capabilities: [],
+	create({ record }) {
+		return createInstanceFromRecord(record, flashDesktopUploadDataSourceModule, {
+			capabilities: [],
+			getActions: () => []
+		});
+	}
+});
+
+export default flashDesktopUploadDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgDesktopUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgDesktopUpload.ts
new file mode 100644
index 000000000..6fc0a9fe1
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgDesktopUpload.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { createUploadAction, IMAGE_MIME_TYPES, resolveRepoPath } from '../moduleHelpers';
+
+export const imgDesktopUploadDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'img-desktop-upload',
+	interfaces: ['image'],
+	capabilities: ['upload'],
+	create({ record }) {
+		const path = resolveRepoPath(record, '/static-assets/');
+		return createInstanceFromRecord(record, imgDesktopUploadDataSourceModule, {
+			capabilities: ['upload'],
+			getActions() {
+				return [
+					createUploadAction({
+						label: `Upload - ${record.title}`,
+						path,
+						fileTypes: IMAGE_MIME_TYPES,
+						selection: 'asset'
+					})
+				];
+			}
+		});
+	}
+});
+
+export default imgDesktopUploadDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgRepositoryUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgRepositoryUpload.ts
new file mode 100644
index 000000000..cdbdc4c86
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgRepositoryUpload.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import {
+	createBrowseAction,
+	createSearchAction,
+	IMAGE_MIME_TYPES,
+	propBoolean,
+	propString,
+	resolveRepoPath
+} from '../moduleHelpers';
+
+export const imgRepositoryUploadDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'img-repository-upload',
+	interfaces: ['image'],
+	capabilities: ['browse', 'search'],
+	create({ record }) {
+		const path = resolveRepoPath(record, '/static-assets/');
+		const useSearch = propBoolean(record, 'useSearch', false);
+		const sortBy = propString(record, 'sortBy') || undefined;
+		const sortOrderRaw = propString(record, 'sortOrder');
+		const sortOrder = sortOrderRaw === 'asc' || sortOrderRaw === 'desc' ? sortOrderRaw : undefined;
+
+		return createInstanceFromRecord(record, imgRepositoryUploadDataSourceModule, {
+			capabilities: useSearch ? ['search'] : ['browse'],
+			getActions() {
+				const meta: { sortBy?: string; sortOrder?: 'asc' | 'desc'; mimeTypes: string[] } = {
+					sortBy,
+					sortOrder,
+					mimeTypes: IMAGE_MIME_TYPES
+				};
+				if (useSearch) {
+					return [
+						createSearchAction({
+							label: `Search - ${record.title}`,
+							path,
+							mimeTypes: IMAGE_MIME_TYPES,
+							selection: 'asset',
+							meta
+						})
+					];
+				}
+				return [
+					createBrowseAction({
+						label: `Browse - ${record.title}`,
+						path,
+						mimeTypes: IMAGE_MIME_TYPES,
+						selection: 'asset',
+						meta
+					})
+				];
+			}
+		});
+	}
+});
+
+export default imgRepositoryUploadDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgS3Repo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgS3Repo.ts
new file mode 100644
index 000000000..ceeb04976
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgS3Repo.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { imgS3RepoDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgS3Upload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgS3Upload.ts
new file mode 100644
index 000000000..9fb10b0d1
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgS3Upload.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { imgS3UploadDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgWebDAVRepo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgWebDAVRepo.ts
new file mode 100644
index 000000000..245423c0f
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgWebDAVRepo.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { imgWebDAVRepoDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgWebDAVUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgWebDAVUpload.ts
new file mode 100644
index 000000000..959c82e12
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/imgWebDAVUpload.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { imgWebDAVUploadDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/index.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/index.ts
new file mode 100644
index 000000000..0af21bffb
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/index.ts
@@ -0,0 +1,130 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { dataSourceModuleRegistry, registerDataSourceModule } from '../registry';
+import type { DataSourceModule } from '../types';
+
+import components from './components';
+import pages from './pages';
+import sharedContent from './sharedContent';
+import embeddedContent from './embeddedContent';
+import fileBrowseRepo from './fileBrowseRepo';
+import fileDesktopUpload from './fileDesktopUpload';
+import imgRepositoryUpload from './imgRepositoryUpload';
+import imgDesktopUpload from './imgDesktopUpload';
+import imgS3Repo from './imgS3Repo';
+import imgS3Upload from './imgS3Upload';
+import imgWebDAVRepo from './imgWebDAVRepo';
+import imgWebDAVUpload from './imgWebDAVUpload';
+import videoBrowseRepo from './videoBrowseRepo';
+import videoDesktopUpload from './videoDesktopUpload';
+import videoS3Repo from './videoS3Repo';
+import videoS3Upload from './videoS3Upload';
+import videoWebDAVRepo from './videoWebDAVRepo';
+import videoWebDAVUpload from './videoWebDAVUpload';
+import videoS3Transcoding from './videoS3Transcoding';
+import audioBrowseRepo from './audioBrowseRepo';
+import audioDesktopUpload from './audioDesktopUpload';
+import keyValueList from './keyValueList';
+import simpleTaxonomy from './simpleTaxonomy';
+import configuredList from './configuredList';
+import s3Repo from './s3Repo';
+import s3Upload from './s3Upload';
+import webDavRepo from './webDavRepo';
+import webDavUpload from './webDavUpload';
+import flashDesktopUpload from './flashDesktopUpload';
+
+export const builtInDataSourceModules: readonly DataSourceModule[] = [
+	components,
+	pages,
+	sharedContent,
+	embeddedContent,
+	fileBrowseRepo,
+	fileDesktopUpload,
+	imgRepositoryUpload,
+	imgDesktopUpload,
+	imgS3Repo,
+	imgS3Upload,
+	imgWebDAVRepo,
+	imgWebDAVUpload,
+	videoBrowseRepo,
+	videoDesktopUpload,
+	videoS3Repo,
+	videoS3Upload,
+	videoWebDAVRepo,
+	videoWebDAVUpload,
+	videoS3Transcoding,
+	audioBrowseRepo,
+	audioDesktopUpload,
+	keyValueList,
+	simpleTaxonomy,
+	configuredList,
+	s3Repo,
+	s3Upload,
+	webDavRepo,
+	webDavUpload,
+	flashDesktopUpload
+];
+
+/**
+ * Registers every built-in DataSourceModule. Safe to call more than once —
+ * already-registered types are skipped.
+ */
+export function registerBuiltInDataSourceModules(): void {
+	builtInDataSourceModules.forEach((module) => {
+		if (dataSourceModuleRegistry.has(module.type)) return;
+		try {
+			registerDataSourceModule(module);
+		} catch (error) {
+			// Concurrent import / HMR may race; ignore duplicate registration.
+			if (!(error instanceof Error) || !/already registered/i.test(error.message)) {
+				throw error;
+			}
+		}
+	});
+}
+
+export {
+	components,
+	pages,
+	sharedContent,
+	embeddedContent,
+	fileBrowseRepo,
+	fileDesktopUpload,
+	imgRepositoryUpload,
+	imgDesktopUpload,
+	imgS3Repo,
+	imgS3Upload,
+	imgWebDAVRepo,
+	imgWebDAVUpload,
+	videoBrowseRepo,
+	videoDesktopUpload,
+	videoS3Repo,
+	videoS3Upload,
+	videoWebDAVRepo,
+	videoWebDAVUpload,
+	videoS3Transcoding,
+	audioBrowseRepo,
+	audioDesktopUpload,
+	keyValueList,
+	simpleTaxonomy,
+	configuredList,
+	s3Repo,
+	s3Upload,
+	webDavRepo,
+	webDavUpload,
+	flashDesktopUpload
+};
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/keyValueList.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/keyValueList.ts
new file mode 100644
index 000000000..67dea15a3
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/keyValueList.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceListItem, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { normalizeListItem, propString } from '../moduleHelpers';
+
+function parseKeyValueOptions(raw: string): DataSourceListItem[] {
+	let parsed: unknown;
+	try {
+		parsed = JSON.parse(raw);
+	} catch (cause) {
+		throw new Error('Unable to parse key-value-list options JSON.', { cause });
+	}
+	// Empty array is a valid empty list. Reject falsy primitives (null, false, 0, "") that
+	// asArray would silently coerce to [] — those are invalid options payloads.
+	if (Array.isArray(parsed)) {
+		return parsed.map((item, index) => normalizeListItem(item, index, 'key-value-list options'));
+	}
+	if (parsed && typeof parsed === 'object') {
+		return [normalizeListItem(parsed, 0, 'key-value-list options')];
+	}
+	throw new Error('key-value-list options JSON must be an array or a single options object.');
+}
+
+export const keyValueListDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'key-value-list',
+	interfaces: ['options'],
+	capabilities: ['list'],
+	create({ record }) {
+		const optionsRaw = propString(record, 'options');
+		return createInstanceFromRecord(record, keyValueListDataSourceModule, {
+			capabilities: ['list'],
+			getActions: () => [],
+			async list() {
+				if (!optionsRaw) {
+					throw new Error(`Data source "${record.id}" (key-value-list) has no options property.`);
+				}
+				return parseKeyValueOptions(optionsRaw);
+			}
+		});
+	}
+});
+
+export default keyValueListDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/pages.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/pages.ts
new file mode 100644
index 000000000..73dd01f6b
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/pages.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { createComponentsOrPagesModule } from './componentsPagesShared';
+
+export const pagesDataSourceModule = createComponentsOrPagesModule('pages', 'page', {
+	browsePath: '/site/website',
+	repoPath: '/site/website'
+});
+
+export default pagesDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/remoteStubs.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/remoteStubs.ts
new file mode 100644
index 000000000..1cf13777c
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/remoteStubs.ts
@@ -0,0 +1,153 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceCapability, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { createRemoteStubAction, propString } from '../moduleHelpers';
+
+function remoteMediaModule(options: {
+	type: string;
+	interfaces: DataSourceModule['interfaces'];
+	kind: 'browse' | 'upload';
+	pathProp: 'path' | 'repoPath';
+	defaultPath?: string;
+	mimeTypes?: string[];
+}): DataSourceModule {
+	const capabilities: DataSourceCapability[] = [options.kind];
+	const module: DataSourceModule = defineDataSourceModule({
+		apiVersion: DATA_SOURCE_API_VERSION,
+		type: options.type,
+		interfaces: options.interfaces,
+		capabilities,
+		create({ record }) {
+			const path = propString(record, options.pathProp, options.defaultPath ?? '');
+			const profileId = propString(record, 'profileId') || undefined;
+			const label = options.kind === 'browse' ? 'Browse' : 'Upload';
+			return createInstanceFromRecord(record, module, {
+				capabilities,
+				getActions() {
+					return [
+						createRemoteStubAction({
+							id: options.kind,
+							kind: options.kind,
+							label: `${label} - ${record.title}`,
+							type: options.type,
+							operation: options.kind,
+							meta: {
+								path,
+								profileId,
+								mimeTypes: options.mimeTypes
+							}
+						})
+					];
+				}
+			});
+		}
+	});
+	return module;
+}
+
+export const imgS3RepoDataSourceModule = remoteMediaModule({
+	type: 'img-S3-repo',
+	interfaces: ['image'],
+	kind: 'browse',
+	pathProp: 'path',
+	mimeTypes: ['image/*']
+});
+
+export const imgS3UploadDataSourceModule = remoteMediaModule({
+	type: 'img-S3-upload',
+	interfaces: ['image'],
+	kind: 'upload',
+	pathProp: 'repoPath',
+	mimeTypes: ['image/*']
+});
+
+export const imgWebDAVRepoDataSourceModule = remoteMediaModule({
+	type: 'img-WebDAV-repo',
+	interfaces: ['image'],
+	kind: 'browse',
+	pathProp: 'repoPath',
+	mimeTypes: ['image/*']
+});
+
+export const imgWebDAVUploadDataSourceModule = remoteMediaModule({
+	type: 'img-WebDAV-upload',
+	interfaces: ['image'],
+	kind: 'upload',
+	pathProp: 'repoPath',
+	mimeTypes: ['image/*']
+});
+
+export const videoS3RepoDataSourceModule = remoteMediaModule({
+	type: 'video-S3-repo',
+	interfaces: ['video'],
+	kind: 'browse',
+	pathProp: 'path',
+	mimeTypes: ['video/*']
+});
+
+export const videoS3UploadDataSourceModule = remoteMediaModule({
+	type: 'video-S3-upload',
+	interfaces: ['video'],
+	kind: 'upload',
+	pathProp: 'repoPath',
+	mimeTypes: ['video/*']
+});
+
+export const videoWebDAVRepoDataSourceModule = remoteMediaModule({
+	type: 'video-WebDAV-repo',
+	interfaces: ['video'],
+	kind: 'browse',
+	pathProp: 'repoPath',
+	mimeTypes: ['video/*']
+});
+
+export const videoWebDAVUploadDataSourceModule = remoteMediaModule({
+	type: 'video-WebDAV-upload',
+	interfaces: ['video'],
+	kind: 'upload',
+	pathProp: 'repoPath',
+	mimeTypes: ['video/*']
+});
+
+export const s3RepoDataSourceModule = remoteMediaModule({
+	type: 'S3-repo',
+	interfaces: ['item'],
+	kind: 'browse',
+	pathProp: 'path'
+});
+
+export const s3UploadDataSourceModule = remoteMediaModule({
+	type: 'S3-upload',
+	interfaces: ['item'],
+	kind: 'upload',
+	pathProp: 'repoPath'
+});
+
+export const webDavRepoDataSourceModule = remoteMediaModule({
+	type: 'WebDAV-repo',
+	interfaces: ['item'],
+	kind: 'browse',
+	pathProp: 'repoPath'
+});
+
+export const webDavUploadDataSourceModule = remoteMediaModule({
+	type: 'WebDAV-upload',
+	interfaces: ['item'],
+	kind: 'upload',
+	pathProp: 'repoPath'
+});
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/s3Repo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/s3Repo.ts
new file mode 100644
index 000000000..17201fc31
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/s3Repo.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { s3RepoDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/s3Upload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/s3Upload.ts
new file mode 100644
index 000000000..b27acfd5b
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/s3Upload.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { s3UploadDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/sharedContent.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/sharedContent.ts
new file mode 100644
index 000000000..5723b21a3
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/sharedContent.ts
@@ -0,0 +1,112 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceAction, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import {
+	capabilitiesFromActions,
+	createBrowseAction,
+	createCreateAction,
+	createSearchAction,
+	type CreateTarget,
+	propBoolean,
+	propString
+} from '../moduleHelpers';
+import { expandPathOrRaw } from '../pathUtils';
+
+export const sharedContentDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'shared-content',
+	interfaces: ['item'],
+	capabilities: ['browse', 'search', 'create'],
+	create({ record }) {
+		// Legacy defaults when the enable* properties are absent from older form-definitions.
+		const enableCreateNew = propBoolean(record, 'enableCreateNew', true);
+		const enableBrowseExisting = propBoolean(record, 'enableBrowseExisting', true);
+		const enableSearchExisting = propBoolean(record, 'enableSearchExisting', false);
+		const repoPath = propString(record, 'repoPath', '/site/');
+		const browsePath = propString(record, 'browsePath') || repoPath;
+		const contentTypeId = propString(record, 'type').trim();
+
+		const advertised: DataSourceAction[] = [];
+		if (enableBrowseExisting) advertised.push({ id: 'browse', kind: 'browse', label: 'Browse' });
+		if (enableSearchExisting) advertised.push({ id: 'search', kind: 'search', label: 'Search' });
+		if (enableCreateNew) advertised.push({ id: 'create', kind: 'create', label: 'Create' });
+
+		return createInstanceFromRecord(record, sharedContentDataSourceModule, {
+			capabilities: capabilitiesFromActions(advertised),
+			flags: { contentReference: true },
+			getActions() {
+				const actions: DataSourceAction[] = [];
+				const contentTypes = contentTypeId ? [contentTypeId] : [];
+
+				if (enableBrowseExisting) {
+					actions.push(
+						createBrowseAction({
+							label: `Browse - ${record.title}`,
+							path: browsePath,
+							contentTypes,
+							selection: 'item'
+						})
+					);
+				}
+				if (enableSearchExisting) {
+					actions.push(
+						createSearchAction({
+							label: `Search - ${record.title}`,
+							path: browsePath,
+							contentTypes,
+							selection: 'item'
+						})
+					);
+				}
+				if (enableCreateNew) {
+					if (contentTypeId) {
+						actions.push(
+							createCreateAction({
+								label: `Create - ${record.title}`,
+								createTargets: [{ contentTypeId, path: repoPath, strategy: 'shared' }]
+							})
+						);
+					} else {
+						// No default type: advertise createPaths for the control to resolve allowed types.
+						actions.push({
+							id: 'create',
+							kind: 'create',
+							label: `Create - ${record.title}`,
+							meta: { createTargets: [] as CreateTarget[], createPaths: [repoPath] },
+							async run(ctx, options) {
+								if (options?.target?.type !== 'create') {
+									throw new Error(
+										`Data source "${record.id}" (shared-content) has no default type; pick a content type before creating.`
+									);
+								}
+								return ctx.services.createContent({
+									path: expandPathOrRaw(ctx, options.target.path ?? repoPath),
+									contentTypeId: options.target.contentTypeId,
+									embedded: options.target.strategy === 'embedded'
+								});
+							}
+						});
+					}
+				}
+				return actions;
+			}
+		});
+	}
+});
+
+export default sharedContentDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/simpleTaxonomy.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/simpleTaxonomy.ts
new file mode 100644
index 000000000..f427c8603
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/simpleTaxonomy.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { firstValueFrom } from 'rxjs';
+import { fetchContentDOM } from '../../../../services/content';
+import { asArray } from '../../../../utils/array';
+import { deserialize } from '../../../../utils/xml';
+import { DATA_SOURCE_API_VERSION, type DataSourceListItem, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { expandPathOrRaw } from '../pathUtils';
+import { normalizeListItem, propString } from '../moduleHelpers';
+
+function itemsFromTaxonomyDoc(doc: XMLDocument): DataSourceListItem[] {
+	const itemsNode = doc.querySelector(':scope > items');
+	if (!itemsNode) {
+		throw new Error('Taxonomy content is missing an <items> element.');
+	}
+	const deserialized = deserialize(itemsNode) as { items?: { item?: unknown } };
+	const items = asArray(deserialized?.items?.item);
+	return items.map((item, index) => normalizeListItem(item, index, 'Taxonomy item'));
+}
+
+export const simpleTaxonomyDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'simpleTaxonomy',
+	interfaces: ['options'],
+	capabilities: ['list'],
+	create({ record }) {
+		const componentPath = propString(record, 'componentPath');
+		return createInstanceFromRecord(record, simpleTaxonomyDataSourceModule, {
+			capabilities: ['list'],
+			getActions: () => [],
+			async list(ctx) {
+				if (!componentPath) {
+					throw new Error(`Data source "${record.id}" (simpleTaxonomy) requires componentPath.`);
+				}
+				const path = expandPathOrRaw(ctx, componentPath);
+				const doc = await firstValueFrom(fetchContentDOM(ctx.siteId, path));
+				return itemsFromTaxonomyDoc(doc);
+			}
+		});
+	}
+});
+
+export default simpleTaxonomyDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoBrowseRepo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoBrowseRepo.ts
new file mode 100644
index 000000000..ac05dd570
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoBrowseRepo.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { createBrowseAction, VIDEO_MIME_TYPES, resolveRepoPath } from '../moduleHelpers';
+
+export const videoBrowseRepoDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'video-browse-repo',
+	interfaces: ['video'],
+	capabilities: ['browse'],
+	create({ record }) {
+		const path = resolveRepoPath(record, '/static-assets/');
+		return createInstanceFromRecord(record, videoBrowseRepoDataSourceModule, {
+			capabilities: ['browse'],
+			getActions() {
+				return [
+					createBrowseAction({
+						label: `Browse - ${record.title}`,
+						path,
+						mimeTypes: VIDEO_MIME_TYPES,
+						selection: 'asset'
+					})
+				];
+			}
+		});
+	}
+});
+
+export default videoBrowseRepoDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoDesktopUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoDesktopUpload.ts
new file mode 100644
index 000000000..448bd0480
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoDesktopUpload.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { createUploadAction, VIDEO_MIME_TYPES, resolveRepoPath } from '../moduleHelpers';
+
+export const videoDesktopUploadDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'video-desktop-upload',
+	interfaces: ['video'],
+	capabilities: ['upload'],
+	create({ record }) {
+		const path = resolveRepoPath(record, '/static-assets/');
+		return createInstanceFromRecord(record, videoDesktopUploadDataSourceModule, {
+			capabilities: ['upload'],
+			getActions() {
+				return [
+					createUploadAction({
+						label: `Upload - ${record.title}`,
+						path,
+						fileTypes: VIDEO_MIME_TYPES,
+						selection: 'asset'
+					})
+				];
+			}
+		});
+	}
+});
+
+export default videoDesktopUploadDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Repo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Repo.ts
new file mode 100644
index 000000000..8f9e5fb8c
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Repo.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { videoS3RepoDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Transcoding.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Transcoding.ts
new file mode 100644
index 000000000..7a70295d2
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Transcoding.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from '../types';
+import { createInstanceFromRecord, defineDataSourceModule } from '../defineModule';
+import { propString, unsupportedRemoteError } from '../moduleHelpers';
+
+/**
+ * Transcoded-video interface: upload+transcode via S3 profiles.
+ * When wired, run() should return `{ kind: 'variants', items: [{ url }, ...] }`.
+ * Platform services do not yet wrap uploadS3Asset(transcode:true); run() throws clearly.
+ */
+export const videoS3TranscodingDataSourceModule: DataSourceModule = defineDataSourceModule({
+	apiVersion: DATA_SOURCE_API_VERSION,
+	type: 'video-S3-transcoding',
+	interfaces: ['transcoded-video'],
+	capabilities: ['upload'],
+	create({ record }) {
+		const inputProfileId = propString(record, 'inputProfileId');
+		const outputProfileId = propString(record, 'outputProfileId');
+		const path = propString(record, 'repoPath') || propString(record, 'path');
+		return createInstanceFromRecord(record, videoS3TranscodingDataSourceModule, {
+			capabilities: ['upload'],
+			getActions() {
+				return [
+					{
+						id: 'upload',
+						kind: 'upload',
+						label: `Transcode - ${record.title}`,
+						meta: {
+							path,
+							inputProfileId,
+							outputProfileId,
+							selectionKind: 'variants'
+						},
+						async run() {
+							unsupportedRemoteError('video-S3-transcoding', 'transcode/upload');
+						}
+					}
+				];
+			}
+		});
+	}
+});
+
+export default videoS3TranscodingDataSourceModule;
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Upload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Upload.ts
new file mode 100644
index 000000000..30ee2cd16
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoS3Upload.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { videoS3UploadDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoWebDAVRepo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoWebDAVRepo.ts
new file mode 100644
index 000000000..aa8e2647c
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoWebDAVRepo.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { videoWebDAVRepoDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoWebDAVUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoWebDAVUpload.ts
new file mode 100644
index 000000000..834e97c9e
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/videoWebDAVUpload.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { videoWebDAVUploadDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/webDavRepo.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/webDavRepo.ts
new file mode 100644
index 000000000..aa9c53570
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/webDavRepo.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { webDavRepoDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/webDavUpload.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/webDavUpload.ts
new file mode 100644
index 000000000..63b3ea492
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/modules/webDavUpload.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export { webDavUploadDataSourceModule as default } from './remoteStubs';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/pathUtils.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/pathUtils.ts
new file mode 100644
index 000000000..e99d25c70
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/pathUtils.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { DataSourceFieldContext } from './types';
+
+/**
+ * Applies `{...}` path macros via `ctx.expandPath` when the field context provides it; otherwise
+ * leaves the configured path as authored (modules must not assume expansion always runs).
+ */
+export function expandPathOrRaw(ctx: Pick<DataSourceFieldContext, 'expandPath'>, path: string): string {
+	if (!path) return path;
+	return ctx.expandPath ? ctx.expandPath(path) : path;
+}
+
+/**
+ * Appends `/.+` for Studio search’s recursive path matcher.
+ * Trailing slashes are stripped first so `folder` and `folder/` match the same.
+ */
+export function toSearchPath(path: string): string {
+	if (!path) return path;
+	const trimmed = path.replace(/\/+$/, '');
+	return `${trimmed}/.+`;
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/registry.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/registry.ts
new file mode 100644
index 000000000..b1e3712de
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/registry.ts
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { DATA_SOURCE_API_VERSION, type DataSourceModule } from './types';
+
+/**
+ * Runtime gate for built-in and plugin module contributions.
+ *
+ * Asserts `apiVersion`, a non-empty `type`, at least one interface, a `capabilities` array, and
+ * `create()`. Call before registry insert so bad plugins fail at load time instead of during field
+ * resolve.
+ */
+export function validateDataSourceModule(module: unknown): asserts module is DataSourceModule {
+	if (!module || typeof module !== 'object') {
+		throw new TypeError('A data-source module must export an object.');
+	}
+	const candidate = module as Partial<DataSourceModule>;
+	if (candidate.apiVersion !== DATA_SOURCE_API_VERSION) {
+		throw new TypeError(
+			`Unsupported data-source API version "${String(candidate.apiVersion)}"; expected ${DATA_SOURCE_API_VERSION}.`
+		);
+	}
+	if (!candidate.type || typeof candidate.type !== 'string') {
+		throw new TypeError('A data-source module must declare a non-empty string "type".');
+	}
+	if (!Array.isArray(candidate.interfaces) || candidate.interfaces.length === 0) {
+		throw new TypeError(`Data-source module "${candidate.type}" must declare at least one interface.`);
+	}
+	if (!Array.isArray(candidate.capabilities)) {
+		throw new TypeError(`Data-source module "${candidate.type}" must declare its capabilities.`);
+	}
+	if (typeof candidate.create !== 'function') {
+		throw new TypeError(`Data-source module "${candidate.type}" must implement create().`);
+	}
+}
+
+/**
+ * In-memory map of DS type id → {@link DataSourceModule}.
+ *
+ * One registration per type (a second write throws). Separates “what modules exist” from “how a
+ * field’s records become instances” (`loadDataSourceModule` / `resolveFieldDataSources`).
+ */
+export class DataSourceModuleRegistry {
+	readonly #modules = new Map<string, DataSourceModule>();
+
+	register(module: DataSourceModule): void {
+		validateDataSourceModule(module);
+		if (this.#modules.has(module.type)) {
+			throw new Error(`A data-source module is already registered for type "${module.type}".`);
+		}
+		this.#modules.set(module.type, module);
+	}
+
+	has(type: string): boolean {
+		return this.#modules.has(type);
+	}
+
+	get(type: string): DataSourceModule | undefined {
+		return this.#modules.get(type);
+	}
+
+	getAll(): readonly DataSourceModule[] {
+		return Array.from(this.#modules.values());
+	}
+}
+
+/** Process-wide singleton used by built-ins, `importPlugin` / `registerPlugin`, and FE hosts. */
+export const dataSourceModuleRegistry = new DataSourceModuleRegistry();
+
+/**
+ * Registers a module on {@link dataSourceModuleRegistry}.
+ *
+ * Prefer `PluginDescriptor.dataSources` + `registerPlugin` for plugins; use this for Studio-shipped
+ * modules and tests.
+ */
+export function registerDataSourceModule(module: DataSourceModule): void {
+	dataSourceModuleRegistry.register(module);
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/services.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/services.ts
new file mode 100644
index 000000000..57fc80078
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/services.ts
@@ -0,0 +1,114 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Dispatch } from 'redux';
+import type { BrowseFilesDialogProps } from '../../BrowseFilesDialog';
+import type { SearchProps } from '../../Search';
+import type { FormsEngineGlobalApiContextProps } from '../lib/formsEngineContext';
+import { showBrowseFilesDialog, showSearchDialog, showSingleFileUploadDialog } from '../lib/controlHelpers';
+import type { DataSourceServices } from './types';
+
+/** Redux dispatch + site + forms API needed to bridge dialog / `pushForm` UI into promise services. */
+export interface CreateDataSourceServicesOptions {
+	dispatch: Dispatch;
+	siteId: string;
+	formsApi: Pick<FormsEngineGlobalApiContextProps, 'pushForm'>;
+}
+
+/**
+ * Adapts callback-driven Studio UI operations into the promise-based data-source extension API.
+ * Cancel / close resolves empty or `null` so actions treat dismiss as no selection.
+ */
+export function createDataSourceServices({
+	dispatch,
+	siteId,
+	formsApi
+}: CreateDataSourceServicesOptions): DataSourceServices {
+	return {
+		browseFiles(request) {
+			return new Promise((resolve) => {
+				showBrowseFilesDialog({
+					dispatch,
+					path: request.path,
+					contentTypes: request.contentTypes,
+					mimeTypes: request.mimeTypes,
+					multiSelect: request.multiSelect,
+					preselectedPaths: request.preselectedPaths,
+					initialParameters: request.initialParameters as BrowseFilesDialogProps['initialParameters'],
+					onClose: () => resolve([]),
+					onSuccess(items) {
+						resolve(Array.isArray(items) ? items : [items]);
+					}
+				});
+			});
+		},
+		search(request) {
+			return new Promise((resolve) => {
+				showSearchDialog({
+					dispatch,
+					path: request.path,
+					contentTypes: request.contentTypes,
+					preselectedPaths: request.preselectedPaths,
+					initialParameters: request.initialParameters as SearchProps['initialParameters'],
+					onClose: () => resolve({ paths: [], items: [] }),
+					onAcceptSelection(paths, items) {
+						resolve({ paths, items });
+					}
+				});
+			});
+		},
+		upload(request) {
+			return new Promise((resolve) => {
+				showSingleFileUploadDialog({
+					dispatch,
+					siteId,
+					path: request.path,
+					fileTypes: request.fileTypes,
+					onUploadComplete: resolve
+				});
+			});
+		},
+		createContent(request) {
+			return new Promise((resolve) => {
+				let settled = false;
+				const finish = (result: Parameters<typeof resolve>[0]) => {
+					if (!settled) {
+						settled = true;
+						resolve(result);
+					}
+				};
+				formsApi.pushForm({
+					create: {
+						path: request.path,
+						contentTypeId: request.contentTypeId,
+						embedded: request.embedded
+					},
+					onClose: () => finish(null),
+					onSave({ values, path }) {
+						finish({
+							kind: 'item',
+							path,
+							contentTypeId: request.contentTypeId,
+							value: values
+						});
+						return Promise.resolve({ close: true });
+					}
+				});
+			});
+		},
+		pushForm: formsApi.pushForm
+	};
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/types.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/types.ts
new file mode 100644
index 000000000..fd09db67e
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/types.ts
@@ -0,0 +1,387 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { ComponentType, ReactNode } from 'react';
+import type { ContentType, ContentTypeField, DataSource } from '../../../models/ContentType';
+import type LookupTable from '../../../models/LookupTable';
+import type { FormsEngineProps } from '../FormsEngine';
+
+export const DATA_SOURCE_API_VERSION = 1 as const;
+
+export type DataSourceInterface = 'item' | 'image' | 'video' | 'transcoded-video' | 'audio' | 'options' | (string & {});
+
+export type DataSourceCapability = 'browse' | 'search' | 'upload' | 'create' | 'list' | 'edit' | 'refreshItem';
+
+export type DataSourceActionKind = Exclude<DataSourceCapability, 'list' | 'edit' | 'refreshItem'> | (string & {});
+
+/** Selection of a file/media asset (image, video, audio, or generic file). */
+export interface DataSourceAssetSelection {
+	kind: 'asset';
+	relativeUrl: string;
+	previewUrl?: string;
+	fileExtension?: string;
+	mimeType?: string;
+}
+
+/** Selection of a content item (page/component), optionally with an embedded value payload. */
+export interface DataSourceItemSelection {
+	kind: 'item';
+	path?: string;
+	contentTypeId?: string;
+	value?: unknown;
+}
+
+/** Selection of a key/value option (dropdown, checkbox-group, taxonomy, configured lists). */
+export interface DataSourceOptionSelection {
+	kind: 'option';
+	key: string;
+	value: string;
+}
+
+/** Selection of transcoded/variant media URLs produced by a transcoding data source. */
+export interface DataSourceVariantsSelection {
+	kind: 'variants';
+	items: Array<{ url: string; [key: string]: unknown }>;
+}
+
+/** Plugin-defined selection shapes. Fixed `kind: 'custom'` so unions narrow cleanly vs built-ins. */
+export interface DataSourceCustomSelection {
+	kind: 'custom';
+	customKind: string;
+	[key: string]: unknown;
+}
+
+export type DataSourceSelection =
+	| DataSourceAssetSelection
+	| DataSourceItemSelection
+	| DataSourceOptionSelection
+	| DataSourceVariantsSelection
+	| DataSourceCustomSelection;
+
+/** Inputs for {@link DataSourceServices.browseFiles}. */
+export interface DataSourceBrowseRequest {
+	path: string;
+	contentTypes?: string[];
+	mimeTypes?: string[];
+	multiSelect?: boolean;
+	preselectedPaths?: string[];
+	initialParameters?: Record<string, unknown>;
+}
+
+/** Inputs for {@link DataSourceServices.search}. */
+export interface DataSourceSearchRequest {
+	path: string;
+	contentTypes?: string[];
+	preselectedPaths?: string[];
+	initialParameters?: Record<string, unknown>;
+}
+
+/** Inputs for {@link DataSourceServices.upload}. */
+export interface DataSourceUploadRequest {
+	path: string;
+	fileTypes?: string[];
+}
+
+/** Inputs for {@link DataSourceServices.createContent}. */
+export interface DataSourceCreateRequest {
+	path: string;
+	contentTypeId: string;
+	embedded: boolean;
+}
+
+/** Result of {@link DataSourceServices.search}. */
+export interface DataSourceSearchResult {
+	paths: string[];
+	items: unknown[];
+}
+
+/**
+ * Stable host operations available to built-in and plugin data-source modules.
+ * Modules should use these services instead of importing Studio dialog internals.
+ */
+export interface DataSourceServices {
+	browseFiles(request: DataSourceBrowseRequest): Promise<unknown[]>;
+	search(request: DataSourceSearchRequest): Promise<DataSourceSearchResult>;
+	upload(request: DataSourceUploadRequest): Promise<unknown>;
+	createContent(request: DataSourceCreateRequest): Promise<DataSourceItemSelection | null>;
+	/** @deprecated Use createContent so the action can return the created selection. */
+	pushForm(props: FormsEngineProps): void;
+}
+
+/**
+ * Per-field runtime context passed into actions and capabilities.
+ * Built once per control field and shared across that field's resolved data sources.
+ */
+export interface DataSourceFieldContext {
+	siteId: string;
+	contentType: ContentType;
+	field: ContentTypeField;
+	value: unknown;
+	readonly: boolean;
+	remainingCapacity?: number;
+	services: DataSourceServices;
+	/** Expand path macros (${objectId}, etc.). Controls/host should supply this. */
+	expandPath?(path: string): string;
+	/** Site content types for wildcard resolution (e.g. components contentTypes="*"). */
+	contentTypes?: ContentType[] | LookupTable<ContentType>;
+}
+
+/** Context supplied to {@link DataSourceModule.create} when instantiating a configured data source. */
+export interface DataSourceCreateContext {
+	siteId: string;
+	record: DataSource;
+	services: DataSourceServices;
+}
+
+/** Props for custom action `MenuItem` / `Dialog` React components. */
+export interface DataSourceActionComponentProps {
+	action: DataSourceAction;
+	context: DataSourceFieldContext;
+	disabled?: boolean;
+	onResult(selection: DataSourceSelection | DataSourceSelection[] | null): void;
+	onError(error: unknown): void;
+}
+
+/**
+ * Optional structured hints for control UX (1-vs-N pickers, create targets).
+ * Modules should still implement `run()` for the single-target / fire-directly case.
+ */
+export interface DataSourceActionMeta {
+	path?: string;
+	contentTypes?: string[];
+	mimeTypes?: string[];
+	sortBy?: string;
+	sortOrder?: 'asc' | 'desc';
+	createTargets?: Array<{
+		contentTypeId: string;
+		path?: string;
+		strategy: 'shared' | 'embedded';
+	}>;
+	createPaths?: string[];
+	[key: string]: unknown;
+}
+
+export type DataSourceActionTarget =
+	| {
+			type: 'create';
+			contentTypeId: string;
+			path?: string;
+			strategy: 'shared' | 'embedded';
+	  }
+	| {
+			type: 'create-path';
+			path: string;
+	  }
+	| {
+			type: 'custom';
+			payload: Record<string, unknown>;
+	  };
+
+/** Options passed to {@link DataSourceAction.run} when a grouped choice selects a concrete target. */
+export interface DataSourceActionRunOptions {
+	target?: DataSourceActionTarget;
+}
+
+/**
+ * Executable action exposed by a data-source instance.
+ * Prefer `run` for service-backed intents; use `MenuItem`/`Dialog` only for custom UI.
+ */
+export interface DataSourceAction {
+	id: string;
+	kind: DataSourceActionKind;
+	label: ReactNode;
+	icon?: ReactNode;
+	meta?: DataSourceActionMeta;
+	run?(
+		context: DataSourceFieldContext,
+		options?: DataSourceActionRunOptions
+	): Promise<DataSourceSelection | DataSourceSelection[] | null>;
+	MenuItem?: ComponentType<DataSourceActionComponentProps>;
+	Dialog?: ComponentType<DataSourceActionComponentProps>;
+}
+
+/**
+ * {@link DataSourceAction} stamped with stable cross-instance identity and owning binding.
+ * `actionKey` is `${dataSourceId}::${action.id}`.
+ */
+export interface ResolvedDataSourceAction extends DataSourceAction {
+	actionKey: string;
+	dataSourceId: string;
+	dataSourceTitle: string;
+	binding: DataSourceBinding;
+}
+
+/**
+ * One concrete option inside a presentation group (e.g. a create target or a single DS browse entry).
+ * Always retains the owning {@link ResolvedDataSourceAction}.
+ */
+export interface DataSourceActionChoice {
+	key: string;
+	label: ReactNode;
+	description?: ReactNode;
+	action: ResolvedDataSourceAction;
+	target?: DataSourceActionTarget;
+}
+
+/**
+ * Intent-level presentation group (`binding.propertyName` + `kind`) that may contain
+ * multiple {@link DataSourceActionChoice}s from different data sources.
+ */
+export interface DataSourceActionGroup {
+	key: string;
+	kind: DataSourceActionKind;
+	label: ReactNode;
+	icon?: ReactNode;
+	choices: DataSourceActionChoice[];
+}
+
+/**
+ * Host presentation result: standard intents flattened into groups,
+ * plus custom `MenuItem`/`Dialog`/non-standard actions kept standalone.
+ */
+export interface GroupedDataSourceActions {
+	groups: DataSourceActionGroup[];
+	customActions: ResolvedDataSourceAction[];
+}
+
+/** Key/value row returned by {@link DataSourceListCapability}. */
+export interface DataSourceListItem {
+	key: string;
+	value: string;
+	[key: string]: unknown;
+}
+
+/** Capability that supplies option lists for dropdown / checkbox-group style controls. */
+export interface DataSourceListCapability {
+	(context: DataSourceFieldContext): Promise<DataSourceListItem[]>;
+}
+
+/** Capability that opens an editor for an existing selection and returns the updated value. */
+export interface DataSourceEditCapability {
+	(selection: DataSourceSelection, context: DataSourceFieldContext): Promise<DataSourceSelection | null>;
+}
+
+/** Capability that reloads metadata for an existing selection without opening a full editor. */
+export interface DataSourceRefreshItemCapability {
+	(selection: DataSourceSelection, context: DataSourceFieldContext): Promise<DataSourceSelection | null>;
+}
+
+/**
+ * Live instance created from a configured form-definition data-source record.
+ * Owns actions and optional list/edit/refresh capabilities for one field binding.
+ */
+export interface DataSourceInstance {
+	id: string;
+	type: string;
+	title: string;
+	interfaces: readonly DataSourceInterface[];
+	capabilities: readonly DataSourceCapability[];
+	getActions(context: DataSourceFieldContext): readonly DataSourceAction[] | Promise<readonly DataSourceAction[]>;
+	list?: DataSourceListCapability;
+	edit?: DataSourceEditCapability;
+	refreshItem?: DataSourceRefreshItemCapability;
+	flags?: {
+		contentReference?: boolean;
+		embedded?: boolean;
+	};
+}
+
+/**
+ * Versioned behavior factory registered by data-source type (built-in or plugin).
+ *
+ * A form-definition {@link DataSource} record is configuration only (ids, titles, properties).
+ * This module is the executable counterpart: look up by `type`, then call {@link create} to get a
+ * live {@link DataSourceInstance} for a field binding. Built-ins register via
+ * `registerDataSourceModule`; plugins contribute via `PluginDescriptor.dataSources` + `registerPlugin`.
+ * Map keys on the descriptor **must** equal `module.type`.
+ */
+export interface DataSourceModule {
+	/**
+	 * Contract version this module implements. Must equal {@link DATA_SOURCE_API_VERSION};
+	 * mismatched values are rejected at registration / load time.
+	 */
+	apiVersion: typeof DATA_SOURCE_API_VERSION;
+	/**
+	 * Stable data-source type id (e.g. `img-desktop-upload`, `shared-content`).
+	 * Must match the form-definition record's `type` and (for plugins) the
+	 * `PluginDescriptor.dataSources` map key.
+	 */
+	type: string;
+	/**
+	 * Default interfaces this module can satisfy (`image`, `item`, `options`, …).
+	 * Used for control↔DS matching via {@link DataSourceBinding.interfaces}. Instances may narrow
+	 * this list in {@link create} when a configured record only supports a subset.
+	 */
+	interfaces: readonly DataSourceInterface[];
+	/**
+	 * Default capabilities the module advertises (`browse`, `upload`, `list`, …).
+	 * Should stay consistent with what instance `getActions` / `list` / `edit` expose; helpers like
+	 * `capabilitiesFromActions` can derive the action-facing subset at instance build time.
+	 */
+	capabilities: readonly DataSourceCapability[];
+	/**
+	 * Factory: turn one configured form-definition record into a live {@link DataSourceInstance}.
+	 * Receives {@link DataSourceCreateContext} (`siteId`, `record`, `services`). Prefer
+	 * `createInstanceFromRecord` so identity/metadata stay aligned with the module defaults.
+	 */
+	create(context: DataSourceCreateContext): DataSourceInstance | Promise<DataSourceInstance>;
+}
+
+/**
+ * Declares how a control property binds to data sources: which interfaces it accepts
+ * and whether the field value is single- or multi-valued.
+ */
+export interface DataSourceBinding {
+	propertyName: string;
+	interfaces: readonly DataSourceInterface[];
+	selection: 'single' | 'multi';
+}
+
+/** Fully resolved triple: form-definition record + registered module + live instance + control binding. */
+export interface ResolvedDataSource {
+	record: DataSource;
+	module: DataSourceModule;
+	instance: DataSourceInstance;
+	binding: DataSourceBinding;
+}
+
+/** Structured failure captured while resolving or loading a field's data sources. */
+export interface DataSourceResolutionError {
+	code:
+		| 'unknown-id'
+		| 'unknown-type'
+		| 'plugin-load'
+		| 'interface-mismatch'
+		| 'invalid-module'
+		| 'create-failed'
+		| 'actions-failed';
+	message: string;
+	dataSourceId?: string;
+	cause?: unknown;
+}
+
+/**
+ * Aggregate passed to controls via `ControlProps.dataSources`.
+ * Includes configured records, resolved instances, flattened actions, and load status.
+ */
+export interface ResolvedDataSources {
+	context: DataSourceFieldContext | null;
+	records: DataSource[];
+	instances: ResolvedDataSource[];
+	actions: ResolvedDataSourceAction[];
+	status: 'idle' | 'loading' | 'ready' | 'error';
+	errors: DataSourceResolutionError[];
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/dataSources/useFieldDataSources.ts b/studio-ui/ui/app/src/components/FormsEngine/dataSources/useFieldDataSources.ts
new file mode 100644
index 000000000..7ebcb9a5e
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/dataSources/useFieldDataSources.ts
@@ -0,0 +1,318 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import useUpdateRefs from '../../../hooks/useUpdateRefs';
+import type { ContentType, ContentTypeField } from '../../../models/ContentType';
+import type LookupTable from '../../../models/LookupTable';
+import { resolveFieldDataSourceRecords } from './bindings';
+import { loadDataSourceModule } from './loader';
+import { contentTypesToArray } from './moduleHelpers';
+import type {
+	DataSourceBinding,
+	DataSourceFieldContext,
+	DataSourceInstance,
+	DataSourceModule,
+	DataSourceResolutionError,
+	DataSourceServices,
+	ResolvedDataSource,
+	ResolvedDataSourceAction,
+	ResolvedDataSources
+} from './types';
+
+export interface ResolveFieldDataSourcesOptions {
+	siteId: string;
+	contentType: ContentType;
+	field: ContentTypeField;
+	/** Bindings drive which field properties hold DS ids and which interfaces they require. */
+	bindings: readonly DataSourceBinding[];
+	value: unknown;
+	readonly: boolean;
+	remainingCapacity?: number;
+	/** Host bridge for browse/search/upload/create dialogs. */
+	services: DataSourceServices;
+	expandPath?(path: string): string;
+	/** Enables `contentTypes: '*'` expansion inside modules while building actions. */
+	contentTypes?: ContentType[] | LookupTable<ContentType>;
+}
+
+function hasMatchingInterface(
+	module: DataSourceModule,
+	instance: DataSourceInstance,
+	persistedInterface: string,
+	binding: DataSourceBinding
+): boolean {
+	const interfaces = new Set([...module.interfaces, ...instance.interfaces, persistedInterface].filter(Boolean));
+	return binding.interfaces.some((candidate) => interfaces.has(candidate));
+}
+
+function validateInstance(instance: DataSourceInstance, expectedType: string): void {
+	if (!instance || typeof instance !== 'object') throw new TypeError('create() did not return a data-source instance.');
+	if (instance.type !== expectedType) {
+		throw new TypeError(`Data-source instance type "${instance.type}" does not match module type "${expectedType}".`);
+	}
+	if (!Array.isArray(instance.interfaces) || !Array.isArray(instance.capabilities)) {
+		throw new TypeError(`Data-source instance "${instance.id}" must declare interfaces and capabilities.`);
+	}
+	if (typeof instance.getActions !== 'function') {
+		throw new TypeError(`Data-source instance "${instance.id}" must implement getActions().`);
+	}
+	(['list', 'edit', 'refreshItem'] as const).forEach((capability) => {
+		const implemented = typeof instance[capability] === 'function';
+		const advertised = instance.capabilities.includes(capability);
+		if (implemented !== advertised) {
+			throw new TypeError(
+				`Data-source instance "${instance.id}" must advertise and implement "${capability}" together.`
+			);
+		}
+	});
+}
+
+/**
+ * End-to-end resolve: field property DS ids → load modules → `create()` → interface check → collect
+ * actions.
+ *
+ * Soft-fails per DS into `errors` so one bad plugin does not blank the whole field. Interface match
+ * unions module, instance, and persisted `record.interface`. Does not group or present actions —
+ * pair with {@link buildActionGroups} / {@link consolidateItemActions}.
+ */
+export async function resolveFieldDataSources(
+	options: ResolveFieldDataSourcesOptions
+): Promise<Omit<ResolvedDataSources, 'status'>> {
+	const {
+		siteId,
+		contentType,
+		field,
+		bindings,
+		value,
+		readonly,
+		remainingCapacity,
+		services,
+		expandPath,
+		contentTypes
+	} = options;
+	const extracted = resolveFieldDataSourceRecords(contentType, field, bindings);
+	const instances: ResolvedDataSource[] = [];
+	const actions: ResolvedDataSourceAction[] = [];
+	const errors: DataSourceResolutionError[] = extracted.errors.concat();
+	const fieldContext: DataSourceFieldContext = {
+		siteId,
+		contentType,
+		field,
+		value,
+		readonly,
+		remainingCapacity,
+		services,
+		expandPath,
+		contentTypes
+	};
+
+	for (const [index, record] of extracted.records.entries()) {
+		const binding = extracted.recordBindings[index];
+		try {
+			const module = await loadDataSourceModule(siteId, record);
+			let instance: DataSourceInstance;
+			try {
+				instance = await module.create({ siteId, record, services });
+				validateInstance(instance, module.type);
+			} catch (cause) {
+				errors.push({
+					code: 'create-failed',
+					dataSourceId: record.id,
+					message: `Unable to create data source "${record.title}" (${record.id}).`,
+					cause
+				});
+				continue;
+			}
+			if (!hasMatchingInterface(module, instance, record.interface, binding)) {
+				errors.push({
+					code: 'interface-mismatch',
+					dataSourceId: record.id,
+					message: `Data source "${record.title}" (${record.id}) does not support the interfaces required by "${binding.propertyName}".`
+				});
+				continue;
+			}
+			const resolved = { record, module, instance, binding };
+			instances.push(resolved);
+			try {
+				const instanceActions = await instance.getActions(fieldContext);
+				if (!Array.isArray(instanceActions)) {
+					throw new TypeError(`Data-source instance "${instance.id}" getActions() must return an array.`);
+				}
+				const actionIds = new Set<string>();
+				instanceActions.forEach((action) => {
+					if (!action.id || (!action.run && !action.MenuItem && !action.Dialog)) {
+						throw new TypeError(
+							`Data-source instance "${instance.id}" returned an invalid action; actions need an id and executable behavior.`
+						);
+					}
+					if (actionIds.has(action.id)) {
+						throw new TypeError(`Data-source instance "${instance.id}" returned duplicate action id "${action.id}".`);
+					}
+					actionIds.add(action.id);
+				});
+				instanceActions.forEach((action) => {
+					actions.push({
+						...action,
+						actionKey: `${record.id}::${action.id}`,
+						dataSourceId: record.id,
+						dataSourceTitle: record.title,
+						binding
+					});
+				});
+			} catch (cause) {
+				errors.push({
+					code: 'actions-failed',
+					dataSourceId: record.id,
+					message: `Unable to obtain actions for data source "${record.title}" (${record.id}).`,
+					cause
+				});
+			}
+		} catch (cause) {
+			errors.push({
+				code: record.plugin ? 'plugin-load' : 'unknown-type',
+				dataSourceId: record.id,
+				message: record.plugin
+					? `Unable to load data-source plugin for "${record.title}" (${record.id}).`
+					: `No data-source module is registered for type "${record.type}".`,
+				cause
+			});
+		}
+	}
+
+	return { context: fieldContext, records: extracted.records, instances, actions, errors };
+}
+
+const emptyResult: ResolvedDataSources = {
+	context: null,
+	records: [],
+	instances: [],
+	actions: [],
+	errors: [],
+	status: 'idle'
+};
+
+/**
+ * React wrapper around {@link resolveFieldDataSources}.
+ *
+ * Re-runs when bindings / content type / services change, but **not** on every value or
+ * `expandPath` identity change (those are read through a ref). Re-keys when the content-type
+ * id:type list changes so `contentTypes: '*'` actions appear once types load. Returns an idle empty
+ * result when bindings are empty.
+ */
+export function useFieldDataSources(options: ResolveFieldDataSourcesOptions): ResolvedDataSources {
+	const [result, setResult] = useState<ResolvedDataSources>({ ...emptyResult, status: 'loading' });
+	const {
+		siteId,
+		contentType,
+		field,
+		bindings,
+		value,
+		readonly,
+		remainingCapacity,
+		services,
+		expandPath,
+		contentTypes
+	} = options;
+
+	// The field value changes as the user edits, and callers commonly rebuild `expandPath`/`contentTypes`
+	// on unrelated re-renders. Re-resolving modules on any of those would reload lists, flash loading
+	// states, and (for equal-by-value-but-new-identity inputs) loop. Resolution reads the latest values
+	// through a ref so identity churn alone doesn't re-trigger it.
+	const latest = useUpdateRefs({ value, remainingCapacity, expandPath, contentTypes });
+
+	// Modules resolve wildcard content-type properties (e.g. `contentTypes: '*'`) while building their
+	// actions, and the content type list arrives asynchronously, so resolution must re-run once it
+	// loads or those actions (e.g. create) would be permanently missing. Keying on the ids/types
+	// instead of the collection identity keeps that without re-resolving on identity churn.
+	const contentTypesKey = useMemo(
+		() =>
+			contentTypesToArray(contentTypes)
+				.map((type) => `${type.id}:${type.type}`)
+				.join(','),
+		[contentTypes]
+	);
+
+	useEffect(() => {
+		let active = true;
+		if (bindings.length === 0) {
+			return () => {
+				active = false;
+			};
+		}
+		resolveFieldDataSources({
+			siteId,
+			contentType,
+			field,
+			bindings,
+			value: latest.current.value,
+			readonly,
+			remainingCapacity: latest.current.remainingCapacity,
+			services,
+			expandPath: latest.current.expandPath,
+			contentTypes: latest.current.contentTypes
+		}).then(
+			(next) => {
+				if (active) {
+					// Partial failures keep usable actions/instances as `ready` (errors stay on the
+					// result for soft UI like NodeSelector). Only hard-fail when nothing usable resolved.
+					const hasUsableResults = next.actions.length > 0 || next.instances.length > 0;
+					setResult({
+						...next,
+						status: next.errors.length && !hasUsableResults ? 'error' : 'ready'
+					});
+				}
+			},
+			(cause) => {
+				if (active) {
+					setResult({
+						context: null,
+						records: [],
+						instances: [],
+						actions: [],
+						status: 'error',
+						errors: [{ code: 'create-failed', message: 'Unable to resolve field data sources.', cause }]
+					});
+				}
+			}
+		);
+		return () => {
+			active = false;
+		};
+	}, [bindings, contentType, contentTypesKey, field, latest, readonly, services, siteId]);
+
+	// Actions receive the context at run time, so it must carry the current value. It's memoized to
+	// keep a stable identity for consumers that key effects on it.
+	const context = useMemo<DataSourceFieldContext>(
+		() => ({
+			siteId,
+			contentType,
+			field,
+			value,
+			readonly,
+			remainingCapacity,
+			services,
+			expandPath,
+			contentTypes
+		}),
+		[contentType, contentTypes, expandPath, field, readonly, remainingCapacity, services, siteId, value]
+	);
+
+	return useMemo(
+		() => (bindings.length === 0 ? emptyResult : { ...result, context }),
+		[bindings.length, context, result]
+	);
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/index.ts b/studio-ui/ui/app/src/components/FormsEngine/index.ts
index 04a05baf6..b1ea132a8 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/index.ts
+++ b/studio-ui/ui/app/src/components/FormsEngine/index.ts
@@ -19,3 +19,5 @@ export { default } from './FormsEngine';
 export * from './FormsEngine';
 
 export * from './FormsEngineDialog';
+
+export * from './dataSources';
diff --git a/studio-ui/ui/app/src/components/FormsEngine/lib/controlHelpers.tsx b/studio-ui/ui/app/src/components/FormsEngine/lib/controlHelpers.tsx
index 977798314..350bd17e6 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/lib/controlHelpers.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/lib/controlHelpers.tsx
@@ -17,18 +17,9 @@
 import { ControlProps } from '../types';
 import Alert from '@mui/material/Alert';
 import { FormattedMessage } from 'react-intl';
-import React, {
-	ComponentType,
-	ElementType,
-	lazy,
-	LazyExoticComponent,
-	memo,
-	MouseEvent as ReactMouseEvent,
-	Suspense
-} from 'react';
+import React, { ElementType, memo, Suspense, useCallback, useContext, useMemo } from 'react';
 import useActiveSiteId from '../../../hooks/useActiveSiteId';
 import { Atom, useAtom } from 'jotai/index';
-import { buildFileUrl } from '../../../services/plugin';
 import { controlMap } from './controlMap';
 import { UnknownControl } from '../components/UnknownControl';
 import ErrorBoundary from '../../ErrorBoundary';
@@ -36,14 +27,7 @@ import { ControlSkeleton } from '../components/ControlSkeleton';
 import { ContentTypeField } from '../../../models';
 import ContentType from '../../../models/ContentType';
 import FormsEngineField from '../components/FormsEngineField';
-import { FormsEngineAtoms } from './formsEngineContext';
-import type { ConsolidatedMediaPickerData } from '../dataSourceHooks/useConsolidatedImagePickerData';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import TravelExploreOutlined from '@mui/icons-material/TravelExploreOutlined';
-import SearchRounded from '@mui/icons-material/SearchRounded';
-import UploadFileOutlinedIcon from '@mui/icons-material/UploadFileOutlined';
+import { FormsEngineAtoms, ItemContext, ItemMetaContext, StableGlobalContext } from './formsEngineContext';
 import { getFileNameFromPath } from '../../../utils/path';
 import { ensureSingleSlash } from '../../../utils/string';
 import { Dispatch as ReduxDispatch } from 'redux';
@@ -55,31 +39,13 @@ import { SearchProps } from '../../Search';
 import type { ImageRestrictions } from '../../ImageEditorDialog/types';
 import type { SingleFileUploadDialogProps } from '../../SingleFileUploadDialog';
 import type { FileUploadResult } from '../../SingleFileUpload';
-import { ImagePickerType } from '../controls/ImagePicker';
-
-// Note: These persist past the closing of the form.
-const lazyControlMap = new Map<string, LazyExoticComponent<ComponentType>>();
-
-function addLazyControl(url: string): void {
-	lazyControlMap.set(
-		url,
-		lazy(() =>
-			import(/* @vite-ignore */ url)
-				.then((m) => {
-					if (m.default) return m;
-					else return { default: ControlPluginNoDefaultExportError };
-				})
-				.catch((reason) => {
-					console.error(
-						// TODO: Docs or internal URL
-						`An error occurred loading the control. The form attempted to load the control from \`${url}\`. Forms Engine v1 controls are not compatible with this version. If you haven't migrated this control, please check the migration guide at https://docs.craftercms.org/.\n\n`,
-						reason
-					);
-					return { default: ControlPluginError };
-				})
-		)
-	);
-}
+import { useControlPluginModule } from './controlPluginLoader';
+import { getControlDataSourceBindings } from '../dataSources/bindings';
+import { createDataSourceServices } from '../dataSources/services';
+import { useFieldDataSources } from '../dataSources/useFieldDataSources';
+import useContentTypes from '../../../hooks/useContentTypes';
+import { useDispatch } from 'react-redux';
+import { processPathMacros } from '../../../utils/path';
 
 export interface ControlWrapperProps {
 	field: ContentTypeField;
@@ -92,62 +58,105 @@ export interface ControlWrapperProps {
 
 export const ControlWrapper = memo(function (props: ControlWrapperProps) {
 	const siteId = useActiveSiteId();
-	const { field, autoFocus, readonly, contentType, atom, customControlMap } = props;
+	const { field, atom, customControlMap } = props;
 	const [value, setValue] = useAtom(atom);
-	const fieldId = field.id;
-	let Control: ElementType<ControlProps>;
-	if (field.properties?.plugin) {
-		const url = buildFileUrl(
-			siteId,
-			field.properties.plugin.type,
-			field.properties.plugin.name,
-			field.properties.plugin.filename,
-			field.properties.plugin.pluginId
-		);
-		if (!lazyControlMap.has(url)) addLazyControl(url);
-		Control = lazyControlMap.get(url);
-	} else {
-		Control = customControlMap?.[field.type] ?? controlMap[field.type] ?? UnknownControl;
-	}
+	const plugin = field.properties?.plugin;
 	return (
-		<ErrorBoundary key={fieldId}>
+		<ErrorBoundary key={field.id}>
 			<Suspense fallback={<ControlSkeleton label={field.name} />}>
-				<Control
-					// Only auto-focus on controls that are not readonly.
-					// Focus might not work consistently on disabled controls anyway.
-					autoFocus={autoFocus && !readonly}
-					value={value}
-					setValue={setValue}
-					field={field}
-					contentType={contentType}
-					readonly={readonly}
-				/>
+				{plugin ? (
+					<PluginControlRenderer {...props} value={value} setValue={setValue} siteId={siteId} plugin={plugin} />
+				) : (
+					<ResolvedControlRenderer
+						{...props}
+						value={value}
+						setValue={setValue}
+						Control={customControlMap?.[field.type] ?? controlMap[field.type] ?? UnknownControl}
+					/>
+				)}
 			</Suspense>
 		</ErrorBoundary>
 	);
 });
 
-function ControlPluginError({ field }: ControlProps) {
+function PluginControlRenderer({
+	siteId,
+	plugin,
+	...props
+}: ControlWrapperProps & {
+	value: unknown;
+	setValue: (value: unknown) => void;
+	siteId: string;
+	plugin: NonNullable<ContentTypeField['properties']['plugin']>;
+}) {
+	const loaded = useControlPluginModule(siteId, plugin, props.field.type, ControlPluginError);
+	return <ResolvedControlRenderer {...props} Control={loaded.Component} bindings={loaded.bindings} />;
+}
+
+function ResolvedControlRenderer({
+	field,
+	autoFocus,
+	readonly,
+	contentType,
+	value,
+	setValue,
+	Control,
+	bindings = getControlDataSourceBindings(field.type)
+}: Omit<ControlWrapperProps, 'atom' | 'customControlMap'> & {
+	value: unknown;
+	setValue: (value: unknown) => void;
+	Control: ElementType<ControlProps>;
+	bindings?: ReturnType<typeof getControlDataSourceBindings>;
+}) {
+	const siteId = useActiveSiteId();
+	const dispatch = useDispatch();
+	const contentTypes = useContentTypes();
+	const item = useContext(ItemContext);
+	const itemMeta = useContext(ItemMetaContext);
+	const stableGlobal = useContext(StableGlobalContext);
+	const services = useMemo(
+		() =>
+			createDataSourceServices({
+				dispatch,
+				siteId,
+				formsApi: stableGlobal?.api ?? { pushForm: () => undefined }
+			}),
+		[dispatch, siteId, stableGlobal]
+	);
+	const expandPath = useCallback(
+		(path: string) =>
+			processPathMacros({ path, objectId: itemMeta?.id, fullParentPath: item?.path ?? itemMeta?.pathInSite }),
+		[item, itemMeta]
+	);
+	const maxCount = field.validations?.maxCount?.value as number | undefined;
+	const remainingCapacity =
+		typeof maxCount === 'number' && Array.isArray(value) ? Math.max(0, maxCount - value.length) : undefined;
+	const dataSources = useFieldDataSources({
+		siteId,
+		contentType,
+		field,
+		bindings,
+		value,
+		readonly,
+		remainingCapacity,
+		services,
+		expandPath,
+		contentTypes
+	});
 	return (
-		<FormsEngineField field={field} menu={false}>
-			<Alert
-				severity="error"
-				variant="standard"
-				sx={(theme) => ({ border: 'none', strong: { fontWeight: theme.typography.fontWeightMedium } })}
-			>
-				<FormattedMessage
-					defaultMessage="Unable to load the {name} ({id}) control. The control may be absent or contain errors in the code. Check the browser console for error details."
-					values={{
-						name: field.name,
-						id: field.id
-					}}
-				/>
-			</Alert>
-		</FormsEngineField>
+		<Control
+			autoFocus={autoFocus && !readonly}
+			value={value}
+			setValue={setValue}
+			field={field}
+			contentType={contentType}
+			readonly={readonly}
+			dataSources={dataSources}
+		/>
 	);
 }
 
-function ControlPluginNoDefaultExportError({ field }: ControlProps) {
+function ControlPluginError({ field }: ControlProps) {
 	return (
 		<FormsEngineField field={field} menu={false}>
 			<Alert
@@ -156,16 +165,10 @@ function ControlPluginNoDefaultExportError({ field }: ControlProps) {
 				sx={(theme) => ({ border: 'none', strong: { fontWeight: theme.typography.fontWeightMedium } })}
 			>
 				<FormattedMessage
-					defaultMessage="Unable to render {name} ({id}) control. No default export found. A control's JavaScript file should export a React component as `default`. Please check <docs>the documentation</docs>."
+					defaultMessage="Unable to load the {name} ({id}) control. The control may be absent or contain errors in the code. Check the browser console for error details."
 					values={{
 						name: field.name,
-						id: field.id,
-						// TODO: Docs or internal link
-						docs: (str) => (
-							<a href="https://docs.craftercms.org" target="_blank">
-								{str}
-							</a>
-						)
+						id: field.id
 					}}
 				/>
 			</Alert>
@@ -203,57 +206,6 @@ export function renderFieldControl(
  * @param readonly - If true, the menu options will be disabled.
  * @returns An array of JSX elements representing the menu options.
  * */
-export function createMediaMenuOptions(
-	dataSourceSummary: ConsolidatedMediaPickerData,
-	handleDataSourceOptionClick: (option: ImagePickerType) => void,
-	readonly: boolean = false
-) {
-	const { allowedBrowsePaths, allowedUploadPaths, allowedSearchPaths } = dataSourceSummary;
-	const menuOptions = [];
-	const availableOptions: ImagePickerType[] = [];
-
-	if (allowedBrowsePaths.length > 0) {
-		availableOptions.push('browse');
-		menuOptions.push(
-			<MenuItem key="browse" onClick={(event) => handleDataSourceOptionClick('browse')} disabled={readonly}>
-				<ListItemIcon sx={{ mr: 0 }}>
-					<TravelExploreOutlined fontSize="small" />
-				</ListItemIcon>
-				<ListItemText>
-					<FormattedMessage defaultMessage="Browse" />
-				</ListItemText>
-			</MenuItem>
-		);
-	}
-	if (allowedSearchPaths.length > 0) {
-		availableOptions.push('search');
-		menuOptions.push(
-			<MenuItem key="search" onClick={(event) => handleDataSourceOptionClick('search')} disabled={readonly}>
-				<ListItemIcon sx={{ mr: 0 }}>
-					<SearchRounded fontSize="small" />
-				</ListItemIcon>
-				<ListItemText>
-					<FormattedMessage defaultMessage="Search" />
-				</ListItemText>
-			</MenuItem>
-		);
-	}
-	if (allowedUploadPaths.length > 0) {
-		availableOptions.push('upload');
-		menuOptions.push(
-			<MenuItem key="upload" onClick={(event) => handleDataSourceOptionClick('upload')} disabled={readonly}>
-				<ListItemIcon sx={{ mr: 0 }}>
-					<UploadFileOutlinedIcon fontSize="small" />
-				</ListItemIcon>
-				<ListItemText>
-					<FormattedMessage defaultMessage="Upload" />
-				</ListItemText>
-			</MenuItem>
-		);
-	}
-	return { menuOptions, availableOptions };
-}
-
 export function downloadMedia(base: string, url: string) {
 	const link = document.createElement('a');
 	link.href = ensureSingleSlash(`${base}${url}`);
@@ -268,17 +220,21 @@ export const showBrowseFilesDialog = ({
 	onSuccess,
 	path,
 	contentTypes,
+	mimeTypes,
 	multiSelect = true,
 	preselectedPaths = [],
-	initialParameters = {}
+	initialParameters = {},
+	onClose
 }: {
 	path: string;
 	dispatch: ReduxDispatch;
 	onSuccess: BrowseFilesDialogProps['onSuccess'];
 	contentTypes?: string[];
+	mimeTypes?: string[];
 	multiSelect?: boolean;
 	preselectedPaths?: string[];
 	initialParameters?: BrowseFilesDialogProps['initialParameters'];
+	onClose?(): void;
 }): void => {
 	const id = nanoid();
 	dispatch(
@@ -290,9 +246,13 @@ export const showBrowseFilesDialog = ({
 				multiSelect,
 				allowUpload: false,
 				contentTypes: contentTypes ?? [],
+				mimeTypes,
 				preselectedPaths,
 				initialParameters,
-				onClose: () => dispatch(popDialog({ id })),
+				onClose: () => {
+					dispatch(popDialog({ id }));
+					onClose?.();
+				},
 				onSuccess(items) {
 					dispatch(popDialog({ id }));
 					onSuccess(items);
@@ -308,7 +268,8 @@ export const showSearchDialog = ({
 	preselectedPaths = [],
 	contentTypes,
 	onAcceptSelection,
-	initialParameters
+	initialParameters,
+	onClose
 }: {
 	path: string;
 	contentTypes?: string[];
@@ -316,6 +277,7 @@ export const showSearchDialog = ({
 	initialParameters?: SearchProps['initialParameters'];
 	dispatch: ReduxDispatch;
 	onAcceptSelection: SearchProps['onAcceptSelection'];
+	onClose?(): void;
 }): void => {
 	const id = nanoid();
 	dispatch(
@@ -337,7 +299,10 @@ export const showSearchDialog = ({
 					})
 				},
 				preselectedPaths,
-				onClose: () => dispatch(popDialog({ id })),
+				onClose: () => {
+					dispatch(popDialog({ id }));
+					onClose?.();
+				},
 				onAcceptSelection(paths, items) {
 					dispatch(popDialog({ id }));
 					onAcceptSelection(paths, items);
diff --git a/studio-ui/ui/app/src/components/FormsEngine/lib/controlMap.ts b/studio-ui/ui/app/src/components/FormsEngine/lib/controlMap.ts
index e003a4c4c..720f98b64 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/lib/controlMap.ts
+++ b/studio-ui/ui/app/src/components/FormsEngine/lib/controlMap.ts
@@ -69,18 +69,18 @@ export const controlMap: Record<BuiltInControlType, ElementType> = {
 	label: lazy(() => import('../controls/Label')),
 	'link-input': null,
 	'link-textarea': null,
-	'linked-dropdown': null,
+	'linked-dropdown': lazy(() => import('../controls/Dropdown')),
 	'locale-selector': lazy(() => import('../controls/LocaleSelector')),
 	'node-selector': lazy(() => import('../controls/NodeSelector')),
 	'numeric-input': lazy(() => import('../controls/Numeric')),
-	'page-nav-order': null,
+	'page-nav-order': lazy(() => import('../controls/PageNavOrder')),
 	repeat: lazy(() => import('../controls/Repeat')),
 	rte: lazy(() => import('../controls/RichTextEditor')),
 	textarea: lazy(() => import('../controls/Textarea')),
 	time: lazy(() => import('../controls/Time')),
-	'transcoded-video-picker': null,
+	'transcoded-video-picker': lazy(() => import('../controls/TranscodedVideoPicker')),
 	uuid: lazy(() => import('../controls/Uuid')),
-	'video-picker': null,
+	'video-picker': lazy(() => import('../controls/VideoPicker')),
 	colorPicker: lazy(() => import('../controls/ColorPicker')),
 	'expired-date': lazy(() => import('../controls/DateTime')),
 	'input-email': lazy(() => import('../controls/Text')),
diff --git a/studio-ui/ui/app/src/components/FormsEngine/lib/controlPluginLoader.ts b/studio-ui/ui/app/src/components/FormsEngine/lib/controlPluginLoader.ts
new file mode 100644
index 000000000..14b6115af
--- /dev/null
+++ b/studio-ui/ui/app/src/components/FormsEngine/lib/controlPluginLoader.ts
@@ -0,0 +1,134 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { type ComponentType, use } from 'react';
+import type { FormDefinitionPlugin } from '../../../models/ContentType';
+import type PluginDescriptor from '../../../models/PluginDescriptor';
+import { buildFileUrl, importPlugin } from '../../../services/plugin';
+import { getRegisteredControlContribution } from '../controls/registry';
+import type { DataSourceBinding } from '../dataSources/types';
+import type { ControlProps } from '../types';
+
+export interface LoadedControlPlugin {
+	/** Resolved control Component + bindings; `url` is the plugin file URL used for cache/errors. */
+	Component: ComponentType<ControlProps>;
+	bindings: readonly DataSourceBinding[];
+	url: string;
+}
+
+/** Cache of in-flight / completed importPlugin calls, keyed by plugin file URL. */
+const controlPluginCache = new Map<string, Promise<PluginDescriptor>>();
+
+/** Cache of final LoadedControlPlugin promises, keyed by plugin URL + control type. */
+const loadedControlPluginCache = new Map<string, Promise<LoadedControlPlugin>>();
+
+function loadedCacheKey(url: string, controlType: string): string {
+	return `${url}::${controlType}`;
+}
+
+/** Builds the Studio plugin file URL for a form-definition plugin ref (same shape as DS plugin load). */
+export function buildControlPluginUrl(siteId: string, plugin: FormDefinitionPlugin): string {
+	return buildFileUrl(siteId, plugin.type, plugin.name, plugin.filename, plugin.pluginId);
+}
+
+/**
+ * Resolves a plugin control for `controlType` (`field.type`).
+ *
+ * Loads through the shared plugin system (`importPlugin` → `registerPlugin` →
+ * `descriptor.controls`), then looks up the contribution by control type.
+ * Cached by plugin file URL so one bundle can contribute multiple controls.
+ * The final {@link LoadedControlPlugin} promise is also cached by URL + control type
+ * so Suspense/`use` sees a stable promise across renders.
+ *
+ * Ownership is checked against {@link PluginDescriptor.id} from the loaded bundle — never
+ * against the form-definition locator `pluginId`, which is a separate identity.
+ * On miss after load, returns `errorComponent` instead of throwing so the form stays open.
+ */
+export function loadControlPluginModule(
+	siteId: string,
+	plugin: FormDefinitionPlugin,
+	controlType: string,
+	errorComponent: ComponentType<ControlProps>
+): Promise<LoadedControlPlugin> {
+	const builder = {
+		site: siteId,
+		type: plugin.type,
+		name: plugin.name,
+		file: plugin.filename,
+		id: plugin.pluginId
+	};
+	const url = buildFileUrl(builder);
+	const cacheKey = loadedCacheKey(url, controlType);
+
+	const cached = loadedControlPluginCache.get(cacheKey);
+	if (cached) return cached;
+
+	// Always go through the URL-keyed importPlugin promise. Do not fast-path on
+	// `plugin.pluginId` vs `RegisteredControlContribution.pluginId` — those are unrelated
+	// identities (asset locator vs PluginDescriptor.id).
+	let loading = controlPluginCache.get(url);
+	if (!loading) {
+		loading = importPlugin(builder).catch((reason) => {
+			controlPluginCache.delete(url);
+			loadedControlPluginCache.delete(cacheKey);
+			console.error(
+				// TODO: Docs or internal URL
+				`An error occurred loading the control. The form attempted to load the control from \`${url}\`. Forms Engine v1 controls are not compatible with this version. If you haven't migrated this control, please check the migration guide at https://docs.craftercms.org/.\n\n`,
+				reason
+			);
+			throw reason;
+		});
+		controlPluginCache.set(url, loading);
+	}
+
+	const result = loading
+		.then((descriptor) => {
+			const contribution = getRegisteredControlContribution(controlType);
+			if (!contribution) {
+				console.error(
+					`Plugin "${descriptor.id}" loaded from "${url}" does not contribute control type "${controlType}". ` +
+						`Add it to PluginDescriptor.controls.`
+				);
+				return { Component: errorComponent, bindings: [], url };
+			}
+			// Compare against the descriptor we just loaded — not the form-definition locator id.
+			if (contribution.pluginId !== descriptor.id) {
+				console.error(
+					`Control type "${controlType}" is registered by plugin "${contribution.pluginId}", but the bundle at ` +
+						`"${url}" has PluginDescriptor.id "${descriptor.id}". Refusing to use the mismatched contribution.`
+				);
+				return { Component: errorComponent, bindings: [], url };
+			}
+			return { Component: contribution.Component, bindings: contribution.bindings, url };
+		})
+		.catch(() => ({ Component: errorComponent, bindings: [], url }));
+
+	loadedControlPluginCache.set(cacheKey, result);
+	return result;
+}
+
+/**
+ * Suspense-friendly hook for plugin control modules (`use` over {@link loadControlPluginModule}).
+ * Must be rendered under a Suspense boundary.
+ */
+export function useControlPluginModule(
+	siteId: string,
+	plugin: FormDefinitionPlugin,
+	controlType: string,
+	errorComponent: ComponentType<ControlProps>
+): LoadedControlPlugin {
+	return use(loadControlPluginModule(siteId, plugin, controlType, errorComponent));
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/lib/dataSourceMap.ts b/studio-ui/ui/app/src/components/FormsEngine/lib/dataSourceMap.ts
deleted file mode 100644
index a43d6a86f..000000000
--- a/studio-ui/ui/app/src/components/FormsEngine/lib/dataSourceMap.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright (C) 2007-2024 Crafter Software Corporation. All Rights Reserved.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as published by
- * the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { ElementType } from 'react';
-
-// TODO: Currently not in use with the approach take for data sources
-export const dataSourceMap: Record<string, ElementType> = {
-	'S3-repo': null,
-	'S3-upload': null,
-	'WebDAV-repo': null,
-	'WebDAV-upload': null,
-	'audio-browse-repo': null,
-	'audio-desktop-upload': null,
-	components: null,
-	'configured-list': null,
-	'embedded-content': null,
-	'file-browse-repo': null,
-	'file-desktop-upload': null,
-	'flash-desktop-upload': null,
-	'img-S3-repo': null,
-	'img-S3-upload': null,
-	'img-WebDAV-repo': null,
-	'img-WebDAV-upload': null,
-	'img-desktop-upload': null,
-	'img-repository-upload': null,
-	'key-value-list': null,
-	'shared-content': null,
-	simpleTaxonomy: null,
-	'video-S3-repo': null,
-	'video-S3-transcoding': null,
-	'video-S3-upload': null,
-	'video-WebDAV-repo': null,
-	'video-WebDAV-upload': null,
-	'video-browse-repo': null,
-	'video-desktop-upload': null
-};
diff --git a/studio-ui/ui/app/src/components/FormsEngine/lib/formUtils.tsx b/studio-ui/ui/app/src/components/FormsEngine/lib/formUtils.tsx
index 71f613c54..82f3dec7e 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/lib/formUtils.tsx
+++ b/studio-ui/ui/app/src/components/FormsEngine/lib/formUtils.tsx
@@ -79,6 +79,8 @@ import { showErrorDialog } from '../../../state/actions/dialogs';
 import { ensureSingleSlash } from '../../../utils/string';
 import { isPagePath } from '../../../utils/path';
 import { nou } from '../../../utils/object';
+import type { DescriptorContentType } from '../../ContentTypeManagement/utils';
+import controlDescriptors from '../../ContentTypeManagement/descriptors/controls';
 
 /**
  * Returns the scroll container for the form's container.
@@ -489,7 +491,8 @@ export function setFieldAtoms(
 	fieldId: string,
 	atomsTarget: FormsEngineAtoms,
 	value: unknown,
-	validatorsData?: ValidatorsData
+	validatorsData?: ValidatorsData,
+	isAdditional?: boolean
 ): void {
 	let field = fieldLookup[fieldId];
 	if (!field) {
@@ -508,6 +511,20 @@ export function setFieldAtoms(
 				id: 'folder-name',
 				name: 'Folder Name'
 			};
+		} else if (isAdditional) {
+			field = {
+				defaultValue: undefined,
+				description: '',
+				fields: undefined,
+				helpText: '',
+				properties: undefined,
+				sortable: false,
+				type: '',
+				validations: undefined,
+				values: undefined,
+				id: fieldId,
+				name: fieldId
+			};
 		} else {
 			!systemFieldsNotInType.includes(fieldId) &&
 				console.warn(`Field ${fieldId} not found in content type "${contentType.name}" (${contentType.id})`);
@@ -833,6 +850,7 @@ export function prepareEmbeddedItemForm(props: {
 	parentPathInSite: string;
 	siteId: string;
 	contentTypesById?: LookupTable<ContentType>;
+	customControls?: LookupTable<DescriptorContentType>;
 }): { atoms: FormsEngineAtoms; values: LookupTable<unknown>; itemMeta: FormsEngineItemMetaContextProps } {
 	const {
 		username,
@@ -845,7 +863,8 @@ export function prepareEmbeddedItemForm(props: {
 		lockError,
 		affectedPackages,
 		siteId,
-		contentTypesById
+		contentTypesById,
+		customControls
 	} = props;
 	const lockResultAtom = atom<FormsEngineEditContextProps>({
 		locked,
@@ -858,19 +877,38 @@ export function prepareEmbeddedItemForm(props: {
 		expandedStateBySectionId: buildSectionExpandedStateAtoms(contentType.sections),
 		fileName: atom(update.modelId)
 	});
-	const values = update.values;
+	const values = { ...update.values };
 	const validatorsData = { siteId, contentTypesById };
+
+	const descriptors = resolveControlDescriptors(customControls);
+	const additionalFieldsIds: string[] = [];
+	// Retrieve all additional fields ids from the contentType fields.
+	Object.values(contentType.fields).forEach((field) => {
+		const descriptor = descriptors[field.type];
+		if (!descriptor) return;
+		additionalFieldsIds.push(...getAdditionalFieldsIdsFromDescriptor(field.id, descriptor));
+	});
+	// Ensure descriptor additional fields exist in values so atoms are created (same as main/repeat bootstrap).
+	additionalFieldsIds.forEach((additionalFieldId) => {
+		if (!(additionalFieldId in values)) {
+			values[additionalFieldId] = undefined;
+		}
+	});
+
 	Object.entries(values).forEach(([fieldId, value]) => {
+		const isAdditionalField = additionalFieldsIds.includes(fieldId);
 		// System fields (e.g. content-type, display-template, etc.) are not part of the content type, but are part of the content object. We don't need atoms or validity checks for these.
-		if (!contentType.fields[fieldId]) return;
-		const [valueAtom, validityAtom] = createFieldAtoms(
-			contentType.fields[fieldId],
-			value,
+		if (!contentType.fields[fieldId] && !isAdditionalField) return;
+		setFieldAtoms(
 			stableFormContextRef,
-			validatorsData
+			contentType,
+			contentType.fields,
+			fieldId,
+			atoms,
+			value,
+			validatorsData,
+			isAdditionalField
 		);
-		atoms.valueByFieldId[fieldId] = valueAtom;
-		atoms.validationByFieldId[fieldId] = validityAtom;
 	});
 	const xmlDoc = fromString(parentStackData.itemMeta.contentXml);
 	const element = xmlDoc.querySelector(`[id="${update.modelId}"]`);
@@ -927,3 +965,23 @@ export function composePathForType(basePath: string, fileName: string, contentTy
 		return ensureSingleSlash(`${basePath}/${fileName}.xml`);
 	}
 }
+
+export function getAdditionalFieldsIdsFromDescriptor(fieldId: string, descriptor: DescriptorContentType): string[] {
+	const additionalFields = descriptor.metadata?.additionalFields ?? [];
+	return additionalFields.map((additionalField) => processAdditionalFieldMacro(fieldId, additionalField));
+}
+
+/**
+ * Merges ui.xml custom control descriptors under code-default descriptors.
+ * Code defaults win on key collision so OOB controls are not overridden by ui.xml entries.
+ */
+export function resolveControlDescriptors(
+	customControls?: LookupTable<DescriptorContentType>
+): LookupTable<DescriptorContentType> {
+	return { ...customControls, ...controlDescriptors };
+}
+
+// TODO: are there going to be other placeholders besides {id}?
+export function processAdditionalFieldMacro(parentFieldId: string, fieldId: string): string {
+	return fieldId.replaceAll('{id}', parentFieldId);
+}
diff --git a/studio-ui/ui/app/src/components/FormsEngine/lib/rteUtils.ts b/studio-ui/ui/app/src/components/FormsEngine/lib/rteUtils.ts
index 43a00b4c1..15b068e6b 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/lib/rteUtils.ts
+++ b/studio-ui/ui/app/src/components/FormsEngine/lib/rteUtils.ts
@@ -18,6 +18,19 @@ import { Editor } from '@tinymce/tinymce-react';
 import { ContentTypeField, GlobalState, LookupTable } from '../../../models';
 import { reversePluckProps } from '../../../utils/object';
 import { getPropertyValue, getValidationValue } from './fieldPropertyUtils';
+import type {
+	DataSourceFieldContext,
+	DataSourceSelection,
+	ResolvedDataSourceAction,
+	ResolvedDataSources
+} from '../dataSources/types';
+import { buildActionGroups, invokeActionChoice } from '../dataSources/actionAdapters';
+
+export type OpenRteDataSourcePicker = (
+	actions: readonly ResolvedDataSourceAction[],
+	context: DataSourceFieldContext,
+	onResult: (selection: DataSourceSelection | DataSourceSelection[] | null) => void
+) => void;
 
 // Maps application locales to their corresponding TinyMCE language codes.
 const tinymceLangMap = {
@@ -32,6 +45,8 @@ export function getTinyMceInitOptions(
 	rteConfig: GlobalState['preview']['richTextEditor'], // GlobalState['preview']['richTextEditor']['']['']
 	locale: string,
 	defaultOptions?: Editor['props']['init'],
+	dataSources?: ResolvedDataSources,
+	openDataSourcePicker?: OpenRteDataSourcePicker,
 	setup?: Editor['props']['init']['setup']
 ): Editor['props']['init'] {
 	const setupId: string = getPropertyValue(field.properties, 'rteConfiguration', 'generic') as string;
@@ -113,6 +128,47 @@ export function getTinyMceInitOptions(
 		// If the allowAddMedia validation is set to false, then the callback is not set, so the add media/file options won't be shown in the editor.
 		file_picker_callback: allowAddMedia
 			? function (cb, value, meta) {
+					const propertyNames =
+						meta.filetype === 'image'
+							? ['imageManager']
+							: meta.filetype === 'media'
+								? ['videoManager', 'audioManager']
+								: ['fileManager'];
+					const actions =
+						dataSources?.actions.filter((candidate) => propertyNames.includes(candidate.binding.propertyName)) ?? [];
+					const applySelection = (selection: DataSourceSelection | DataSourceSelection[] | null) => {
+						const selected = Array.isArray(selection) ? selection[0] : selection;
+						if (selected?.kind === 'asset' && typeof selected.relativeUrl === 'string') cb(selected.relativeUrl);
+						else if (selected?.kind === 'item' && typeof selected.path === 'string') cb(selected.path);
+						else if (
+							selected?.kind === 'variants' &&
+							Array.isArray(selected.items) &&
+							typeof selected.items[0]?.url === 'string'
+						) {
+							cb(selected.items[0].url);
+						}
+					};
+					if (actions.length && dataSources?.context) {
+						const grouped = buildActionGroups(actions);
+						if (
+							grouped.customActions.length === 0 &&
+							grouped.groups.length === 1 &&
+							grouped.groups[0].choices.length === 1
+						) {
+							invokeActionChoice(grouped.groups[0].choices[0], dataSources.context)
+								.then(applySelection)
+								.catch((error) => console.error('Unable to select rich-text media.', error));
+						} else {
+							openDataSourcePicker?.(actions, dataSources.context, applySelection);
+						}
+					} else {
+						window.tinymce?.activeEditor?.notificationManager?.open({
+							text: 'No data sources have been configured for this field.',
+							timeout: 3000,
+							type: 'error'
+						});
+						cb('');
+					}
 					//   // meta contains info about type (image, media, etc). Used to properly add DS to dialogs.
 					//   // meta.filetype === 'file | image | media'
 					//   const datasources = {};
@@ -169,7 +225,7 @@ export function getTinyMceInitOptions(
 			//   e.stopPropagation();
 			// });
 
-			editor.on('paste', (e) => {
+			editor.on('paste', () => {
 				// console.log('content', getContent());
 			});
 
diff --git a/studio-ui/ui/app/src/components/FormsEngine/lib/valueRetrievers.ts b/studio-ui/ui/app/src/components/FormsEngine/lib/valueRetrievers.ts
index 34daf2dd9..73ab90bed 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/lib/valueRetrievers.ts
+++ b/studio-ui/ui/app/src/components/FormsEngine/lib/valueRetrievers.ts
@@ -22,9 +22,11 @@ import type { NodeSelectorItem } from '../controls/NodeSelector';
 import { systemFieldsNotInType, XmlKeys } from './formConsts';
 import { deserialize, unescapeXml } from '../../../utils/xml';
 import type { DescriptorControlType } from '../../ContentTypeManagement/controlMap';
+import type { DescriptorContentType } from '../../ContentTypeManagement/utils';
 import { nnou } from '../../../utils/object';
 import { v4 as uuid } from 'uuid';
 import { Matcher } from 'path-expression-matcher';
+import { getAdditionalFieldsIdsFromDescriptor, resolveControlDescriptors } from './formUtils';
 
 export type ValueRetriever<T = unknown> = (value: unknown, field: ContentTypeField) => T;
 
@@ -57,7 +59,7 @@ export const valueRetrieverLookup: Record<BuiltInControlType | DescriptorControl
 	rte: textFieldExtractor,
 	textarea: textFieldExtractor,
 	time: null,
-	'transcoded-video-picker': textFieldExtractor,
+	'transcoded-video-picker': arrayFieldExtractor,
 	uuid: uuidExtractor,
 	'video-picker': textFieldExtractor,
 	colorPicker: textOrNullExtractor,
@@ -99,12 +101,14 @@ export const valueRetrieverLookup: Record<BuiltInControlType | DescriptorControl
  * @param xmlDeserializedValues The raw deserialized values from the content XML
  * @param contentTypesLookup A lookup table of content types
  * @param fieldCallback A callback to run for each field
+ * @param customControls A lookup table with custom controls to extend the OOB controls descriptors
  **/
 export function createParsedValuesObject(
 	contentTypeFields: LookupTable<ContentTypeField> | ContentTypeField[],
 	xmlDeserializedValues: LookupTable<unknown>,
 	contentTypesLookup: LookupTable<ContentType>,
-	fieldCallback?: (fieldId: string, value: unknown) => void
+	fieldCallback?: (fieldId: string, value: unknown, isAdditionalField?: boolean) => void,
+	customControls?: LookupTable<DescriptorContentType>
 ): LookupTable<unknown> {
 	const values = {};
 	systemFieldsNotInType.forEach((systemFieldId) => {
@@ -113,13 +117,38 @@ export function createParsedValuesObject(
 			fieldCallback?.(systemFieldId, values[systemFieldId]);
 		}
 	});
+	const descriptors = resolveControlDescriptors(customControls);
 	(Array.isArray(contentTypeFields) ? contentTypeFields : Object.values(contentTypeFields)).forEach((field) => {
+		const descriptor = descriptors[field.type];
+		const additionalFieldIds = descriptor ? getAdditionalFieldsIdsFromDescriptor(field.id, descriptor) : [];
+
+		additionalFieldIds.forEach((additionalFieldId) => {
+			const additionalField: ContentTypeField = {
+				...field,
+				id: additionalFieldId,
+				type: additionalFieldControlType(additionalFieldId),
+				defaultValue: undefined
+			};
+			values[additionalFieldId] = createParsedValueForField(
+				xmlDeserializedValues[additionalFieldId],
+				additionalField,
+				contentTypesLookup
+			);
+			fieldCallback?.(additionalFieldId, values[additionalFieldId], true);
+		});
 		values[field.id] = createParsedValueForField(xmlDeserializedValues[field.id], field, contentTypesLookup);
 		fieldCallback?.(field.id, values[field.id]);
 	});
 	return values;
 }
 
+/** Maps additional-field id conventions (e.g. `orderDefault_f`) to a retriever-backed control type. */
+function additionalFieldControlType(additionalFieldId: string): BuiltInControlType {
+	if (/_(?:f|i|l)$/.test(additionalFieldId)) return 'numeric-input';
+	if (/_b$/.test(additionalFieldId)) return 'checkbox';
+	return 'input';
+}
+
 export function createParsedValueForField<T = unknown>(
 	xmlDeserializedValue: unknown,
 	field: ContentTypeField,
diff --git a/studio-ui/ui/app/src/components/FormsEngine/lib/valueSerializers.ts b/studio-ui/ui/app/src/components/FormsEngine/lib/valueSerializers.ts
index 294f7a156..1dca86a9c 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/lib/valueSerializers.ts
+++ b/studio-ui/ui/app/src/components/FormsEngine/lib/valueSerializers.ts
@@ -67,7 +67,7 @@ export const valueSerializersLookup: Record<BuiltInControlType | DescriptorContr
 	rte: prepareRTE,
 	textarea: (field, value) => prepareString(field, value as string),
 	time: undefined,
-	'transcoded-video-picker': undefined,
+	'transcoded-video-picker': (field, value) => prepareArray(field, value),
 	uuid: undefined,
 	'video-picker': undefined,
 	colorPicker: undefined,
diff --git a/studio-ui/ui/app/src/components/FormsEngine/types.ts b/studio-ui/ui/app/src/components/FormsEngine/types.ts
index 490ce505d..6cea43c00 100644
--- a/studio-ui/ui/app/src/components/FormsEngine/types.ts
+++ b/studio-ui/ui/app/src/components/FormsEngine/types.ts
@@ -19,6 +19,7 @@ import ContentType from '../../models/ContentType';
 import { createStore } from 'jotai/index';
 import type { RESET } from 'jotai/utils';
 import type { WritableAtom } from 'jotai/vanilla';
+import type { ResolvedDataSources } from './dataSources/types';
 
 export interface ControlProps {
 	value: unknown;
@@ -27,6 +28,7 @@ export interface ControlProps {
 	contentType: ContentType;
 	readonly: boolean;
 	autoFocus: boolean;
+	dataSources?: ResolvedDataSources;
 }
 
 export type JotaiStore = ReturnType<typeof createStore>;
diff --git a/studio-ui/ui/app/src/env/craftercms.ts b/studio-ui/ui/app/src/env/craftercms.ts
index 06e144ae9..e61a15c68 100644
--- a/studio-ui/ui/app/src/env/craftercms.ts
+++ b/studio-ui/ui/app/src/env/craftercms.ts
@@ -29,6 +29,7 @@ import { registerPlugin } from '../services/plugin';
 import { PluginDescriptor } from '../models/PluginDescriptor';
 import { components, icons, services, utils } from './studioUI';
 import { Observable } from 'rxjs';
+import { formsEngineControlsHost, formsEngineDataSourcesHost } from '../components/FormsEngine/dataSources/host';
 
 // TODO:
 //  To avoid pre-loading all services and utils and ending up with a large app
@@ -74,6 +75,10 @@ export interface CrafterCMSGlobal {
 	icons: typeof icons;
 	utils: typeof utils;
 	services: typeof services;
+	formsEngine: {
+		dataSources: typeof formsEngineDataSourcesHost;
+		controls: typeof formsEngineControlsHost;
+	};
 	getStore(): CrafterCMSStore;
 	define: {
 		(): void;
@@ -152,6 +157,10 @@ export const craftercms: CrafterCMSGlobal = {
 	components,
 	icons,
 	services,
+	formsEngine: {
+		dataSources: formsEngineDataSourcesHost,
+		controls: formsEngineControlsHost
+	},
 	utils,
 	store$: getStore
 };
diff --git a/studio-ui/ui/app/src/hooks/useVideoInfo.ts b/studio-ui/ui/app/src/hooks/useVideoInfo.ts
new file mode 100644
index 000000000..892c76bf3
--- /dev/null
+++ b/studio-ui/ui/app/src/hooks/useVideoInfo.ts
@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useEffect, useState } from 'react';
+import useSpreadState from './useSpreadState';
+
+interface VideoInfo {
+	width: number | null;
+	height: number | null;
+	duration: number | null;
+	contentType?: string | null;
+	size?: number | null; // size in KB
+}
+const videoInfoInitialState: VideoInfo = {
+	width: null,
+	height: null,
+	duration: null,
+	contentType: null,
+	size: null
+};
+
+/** Retrieves video dimensions, duration, and metadata (content type and size in KB) from a given URL
+ *
+ * @param url Video URL
+ * @returns Object containing video info, loading states, and error states
+ */
+export function useVideoInfo(url: string): {
+	videoInfo: VideoInfo;
+	isFetchingDimensions: boolean;
+	isFetchingMetadata: boolean;
+	errorDimensions: Error | null;
+	errorMetadata: Error | null;
+} {
+	const [videoInfo, setVideoInfo] = useSpreadState<VideoInfo>(videoInfoInitialState);
+	const [isFetchingDimensions, setIsFetchingDimensions] = useState<boolean>(false);
+	const [isFetchingMetadata, setIsFetchingMetadata] = useState<boolean>(false);
+	const [errorDimensions, setErrorDimensions] = useState<Error | null>(null);
+	const [errorMetadata, setErrorMetadata] = useState<Error | null>(null);
+
+	useEffect(() => {
+		if (url) {
+			// Reset previous info
+			setVideoInfo(videoInfoInitialState);
+			setIsFetchingDimensions(true);
+			setErrorDimensions(null);
+
+			let dimensionsCancelled = false;
+			const video = document.createElement('video');
+			video.preload = 'metadata';
+			video.onloadedmetadata = () => {
+				if (dimensionsCancelled) return;
+				setVideoInfo({
+					width: video.videoWidth,
+					height: video.videoHeight,
+					duration: video.duration
+				});
+				setIsFetchingDimensions(false);
+			};
+			video.onerror = () => {
+				if (dimensionsCancelled) return;
+				setErrorDimensions(new Error('Video failed to load'));
+				setIsFetchingDimensions(false);
+			};
+			video.src = url;
+
+			setIsFetchingMetadata(true);
+			setErrorMetadata(null);
+			const abortController = new AbortController();
+			(async () => {
+				try {
+					const response = await fetch(url, { method: 'HEAD', signal: abortController.signal });
+					if (!response.ok) {
+						throw new Error(`Metadata request failed (${response.status})`);
+					}
+					if (abortController.signal.aborted) return;
+					const contentType = response.headers.get('Content-Type');
+					const contentLength = response.headers.get('Content-Length');
+					const sizeKb =
+						contentLength && !Number.isNaN(Number(contentLength)) ? Math.round(Number(contentLength) / 1024) : null;
+					setVideoInfo({ contentType, size: sizeKb });
+					setIsFetchingMetadata(false);
+				} catch (error) {
+					if (abortController.signal.aborted) return;
+					setErrorMetadata(error instanceof Error ? error : new Error('Metadata request failed'));
+					setIsFetchingMetadata(false);
+				}
+			})();
+
+			return () => {
+				dimensionsCancelled = true;
+				video.onloadedmetadata = null;
+				video.onerror = null;
+				video.src = '';
+				abortController.abort();
+			};
+		} else {
+			setVideoInfo(videoInfoInitialState);
+			setIsFetchingDimensions(false);
+			setIsFetchingMetadata(false);
+			setErrorDimensions(null);
+			setErrorMetadata(null);
+		}
+	}, [url, setVideoInfo]);
+
+	return { videoInfo, isFetchingDimensions, isFetchingMetadata, errorDimensions, errorMetadata };
+}
+
+export default useVideoInfo;
diff --git a/studio-ui/ui/app/src/models/ContentType.ts b/studio-ui/ui/app/src/models/ContentType.ts
index c7ee037d1..b59eebf6a 100644
--- a/studio-ui/ui/app/src/models/ContentType.ts
+++ b/studio-ui/ui/app/src/models/ContentType.ts
@@ -153,12 +153,20 @@ export interface NewContentTypeField extends ContentTypeField {
 	NEW?: true;
 }
 
+export interface FormDefinitionPlugin {
+	type: string;
+	name: string;
+	filename: string;
+	pluginId: string;
+}
+
 export interface DataSource {
 	id: string;
 	type: string;
 	title: string;
 	interface: string;
 	properties: LookupTable;
+	plugin?: FormDefinitionPlugin;
 }
 
 export interface NewDataSource extends DataSource {
@@ -254,12 +262,7 @@ export interface LegacyFormDefinitionField {
 	constraints: { constraint: LegacyFormDefinitionProperty | Array<LegacyFormDefinitionProperty> };
 	properties: { property: LegacyFormDefinitionProperty | Array<LegacyFormDefinitionProperty> };
 	fields?: { field: LegacyFormDefinitionField | Array<LegacyFormDefinitionField> };
-	plugin: {
-		type: string;
-		name: string;
-		filename: string;
-		pluginId: string;
-	};
+	plugin: FormDefinitionPlugin;
 	// Repeat groups carry these both at the top and inside "properties" (duplicated)
 	minOccurs?: string;
 	maxOccurs?: string;
@@ -288,6 +291,7 @@ export interface LegacyDataSource {
 	type: string; // data source id
 	interface: string; // ?
 	properties: { property: LegacyFormDefinitionProperty[] | LegacyFormDefinitionProperty };
+	plugin?: FormDefinitionPlugin;
 }
 
 // Note: nearly identical to `LegacyFormDefinition`
diff --git a/studio-ui/ui/app/src/models/GlobalState.ts b/studio-ui/ui/app/src/models/GlobalState.ts
index 57c68147e..26f34ebcc 100644
--- a/studio-ui/ui/app/src/models/GlobalState.ts
+++ b/studio-ui/ui/app/src/models/GlobalState.ts
@@ -74,6 +74,7 @@ import { ViewPackagesDialogStateProps } from '../components/ViewPackagesDialog';
 import type { FolderMoveAlertDialogStateProps } from '../components/FolderMoveAlertDialog/FolderMoveAlertDialog';
 import type { PublishingStatus } from './Publishing';
 import type { Archetype } from '../components/ContentTypeManagement/descriptors/archetypes';
+import type { DescriptorContentType } from '../components/ContentTypeManagement/utils';
 
 export type HighlightMode = 'all' | 'move';
 
@@ -277,6 +278,8 @@ export interface GlobalState {
 		references: LookupTable;
 		xml: string;
 		remoteGitBranch: string;
+		/** Custom/config control descriptors keyed by control type id (from UI config). */
+		controls: LookupTable<DescriptorContentType>;
 	};
 	pathNavigator: LookupTable<PathNavigatorStateProps>;
 	pathNavigatorTree: LookupTable<PathNavigatorTreeStateProps>;
diff --git a/studio-ui/ui/app/src/models/PluginDescriptor.ts b/studio-ui/ui/app/src/models/PluginDescriptor.ts
index 149d1f0af..dc31fac78 100644
--- a/studio-ui/ui/app/src/models/PluginDescriptor.ts
+++ b/studio-ui/ui/app/src/models/PluginDescriptor.ts
@@ -14,9 +14,24 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import type { ComponentType } from 'react';
 import WidgetRecord from './WidgetRecord';
+import type { DataSourceBinding, DataSourceModule } from '../components/FormsEngine/dataSources/types';
+import type { ControlProps } from '../components/FormsEngine/types';
+
+/**
+ * FE2 control contribution on a PluginDescriptor.
+ * Map keys on `controls` must equal the control type id (`field.type`).
+ */
+export interface ControlPluginContribution {
+	/** React control component; must accept ControlProps. */
+	Component: ComponentType<ControlProps>;
+	/** Optional; same shapes as built-in `controlDataSourceBindings` entries. */
+	dataSourceBindings?: DataSourceBinding | readonly DataSourceBinding[];
+}
 
 export interface PluginDescriptor {
+	/** Stable plugin identity; used for registry keys and duplicate detection — must be a non-empty string. */
 	id: string;
 	// name: string;
 	// version: string;
@@ -28,7 +43,21 @@ export interface PluginDescriptor {
 	widgets?: Record<string, WidgetRecord>;
 	scripts?: Array<string | object>;
 	stylesheets?: Array<string | object>;
+	/**
+	 * Author-contributed helpers (lib-style). Stored on the registered descriptor;
+	 * eager load without widgets is still an open follow-up — see plugins companion §9.
+	 */
 	utils?: Record<string, unknown>;
+	/**
+	 * FE2 data-source modules contributed by this plugin, keyed by DS type id.
+	 * `registerPlugin` validates and installs each into the data-source module registry.
+	 */
+	dataSources?: Record<string, DataSourceModule>;
+	/**
+	 * FE2 control contributions, keyed by control type id (`field.type`).
+	 * `registerPlugin` validates and installs each into the control contribution registry.
+	 */
+	controls?: Record<string, ControlPluginContribution>;
 	// themes: Array<{ id: string; name: string; themeOptions: ThemeOptions[] }>;
 }
 
diff --git a/studio-ui/ui/app/src/services/content.ts b/studio-ui/ui/app/src/services/content.ts
index 8fee9677e..ceba56236 100644
--- a/studio-ui/ui/app/src/services/content.ts
+++ b/studio-ui/ui/app/src/services/content.ts
@@ -1456,3 +1456,29 @@ export function fetchContentByCommitId(site: string, path: string, commitId: str
 		})
 	);
 }
+
+export interface PageNavItem {
+	path: string;
+	order: number;
+	label: string;
+}
+
+export function getNavItemsOrder(siteId: string, parentPath: string): Observable<PageNavItem[]> {
+	const qs = toQueryString({ parentPath });
+	return get(`/studio/api/2/content/${siteId}/order${qs}`).pipe(map((response) => response?.response?.items));
+}
+
+export type ReorderNavItemsRequest =
+	| { type: 'addBefore'; referencePath: string }
+	| { type: 'addAfter'; referencePath: string }
+	| { type: 'insertBetween'; previousPath: string; nextPath: string };
+
+/**
+ * Calculates a new nav order value for the current page based on its neighbors.
+ * The caller must persist the returned `order` onto the page's `orderDefault_f` field.
+ */
+export function reorderNavItems(siteId: string, request: ReorderNavItemsRequest): Observable<{ order: number }> {
+	return postJSON(`/studio/api/2/content/${siteId}/order/reorder`, request).pipe(
+		map((response) => ({ order: response?.response?.order as number }))
+	);
+}
diff --git a/studio-ui/ui/app/src/services/contentTypes.ts b/studio-ui/ui/app/src/services/contentTypes.ts
index 652a458ff..ae5d1e7e4 100644
--- a/studio-ui/ui/app/src/services/contentTypes.ts
+++ b/studio-ui/ui/app/src/services/contentTypes.ts
@@ -421,9 +421,15 @@ function parseLegacyFormDefinition(definition: LegacyFormDefinition): ContentTyp
 
 	// get receptacles dataSources
 	legacyDataSourceArray.forEach((datasource: LegacyDataSource) => {
-		// TODO: Delete datasource.properties after props have been added to the root object? Must update code usages of datasource.properties.
-		dataSources[datasource.id] = { ...datasource, properties: {} };
-		const legacyDatasource = { ...datasource };
+		// Keep only the typed DataSource shape. Legacy XML may carry extra keys; plugin coords are preserved explicitly.
+		dataSources[datasource.id] = {
+			id: datasource.id,
+			type: datasource.type,
+			title: datasource.title,
+			interface: datasource.interface,
+			properties: {},
+			...(datasource.plugin ? { plugin: datasource.plugin } : {})
+		};
 		asArray(datasource.properties?.property).forEach((property) => {
 			let value: unknown = property.value;
 			switch (property.type) {
@@ -439,10 +445,8 @@ function parseLegacyFormDefinition(definition: LegacyFormDefinition): ContentTyp
 				//   break;
 			}
 			dataSources[datasource.id].properties[property.name] = value;
-			// Also update legacyDatasource, since dropTargetsLookup references it for 'components' type datasources.
-			legacyDatasource.properties[property.name] = value;
 		});
-		if (legacyDatasource.type === 'components') {
+		if (datasource.type === 'components') {
 			dropTargetsLookup[datasource.id] = dataSources[datasource.id];
 		}
 	});
diff --git a/studio-ui/ui/app/src/services/plugin.ts b/studio-ui/ui/app/src/services/plugin.ts
index cbfbd49d3..c2c0fb536 100644
--- a/studio-ui/ui/app/src/services/plugin.ts
+++ b/studio-ui/ui/app/src/services/plugin.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as published by
@@ -14,15 +14,36 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { isValidElementType } from 'react-is';
+import type { ComponentType } from 'react';
 import LookupTable from '../models/LookupTable';
 import { augmentTranslations } from '../utils/i18n';
 import { components, plugins } from '../utils/constants';
 import PluginDescriptor from '../models/PluginDescriptor';
 import PluginFileBuilder from '../models/PluginFileBuilder';
 import { WidgetRecord } from '../models/WidgetRecord';
+import type PluginDescriptorWithSource from '../models/PluginDescriptorWithSource';
+import {
+	normalizeDataSourceBindings,
+	registerControlDataSourceBindings
+} from '../components/FormsEngine/dataSources/bindings';
+import { dataSourceModuleRegistry, validateDataSourceModule } from '../components/FormsEngine/dataSources/registry';
+import type { DataSourceBinding, DataSourceModule } from '../components/FormsEngine/dataSources/types';
+import {
+	getRegisteredControlContribution,
+	registerControlContribution
+} from '../components/FormsEngine/controls/registry';
+import { controlMap } from '../components/FormsEngine/lib/controlMap';
+import type { ControlProps } from '../components/FormsEngine/types';
 
 const DEFAULT_FILE_NAME = 'index.js';
 
+type ControlContributionCommit = {
+	typeKey: string;
+	Component: ComponentType<ControlProps>;
+	bindings: readonly DataSourceBinding[];
+};
+
 function isPluginFileBuilder(target: any): target is PluginFileBuilder {
 	return typeof target === 'object';
 }
@@ -100,6 +121,11 @@ export function importFile(
 	return import(/* @vite-ignore */ url);
 }
 
+/**
+ * Dynamic-imports a plugin file, requires a {@link PluginDescriptor} with a string `id`, then
+ * {@link registerPlugin}. The same URL may be imported for widgets then FE; re-entry still installs
+ * new controls / data sources. Not FE-specific — shared Studio plugin loader.
+ */
 export function importPlugin(fileBuilder: PluginFileBuilder): Promise<PluginDescriptor>;
 export function importPlugin(site: string, type: string, name: string): Promise<PluginDescriptor>;
 export function importPlugin(site: string, type: string, name: string, file: string): Promise<PluginDescriptor>;
@@ -119,16 +145,16 @@ export function importPlugin(
 ): Promise<PluginDescriptor> {
 	// @ts-ignore — methods share the same signature(s)
 	const args: [string, string, string, string, string] = arguments;
+	// @ts-expect-error — methods share same signature, this is fine.
+	const url = buildFileUrl(...arguments);
 	return importFile(...args).then((module) => {
 		const plugin: PluginDescriptor = module.plugin ?? module.default;
-		if (plugin) {
-			// The file may have been previously loaded and hence the plugin registered previously.
-			// This may however cause silent skips of legitimate duplicate plugin id registrations.
-			// Perhaps we should consider keeping an internal registry of the plugin file URLs that
-			// have been loaded if this is an issue.
-			!isPluginRegistered(plugin) &&
-				registerPlugin(plugin, isPluginFileBuilder(siteOrBuilder) ? siteOrBuilder : createFileBuilder(...args));
+		if (!plugin?.id || typeof plugin.id !== 'string') {
+			throw new Error(`Plugin file at "${url}" must export a PluginDescriptor with a string id.`);
 		}
+		// Always call registerPlugin: when the id is already known (e.g. widget host loaded first),
+		// registerPlugin still installs any new FE controls/dataSources contributions.
+		registerPlugin(plugin, isPluginFileBuilder(siteOrBuilder) ? siteOrBuilder : createFileBuilder(...args));
 		return plugin;
 	});
 }
@@ -137,34 +163,127 @@ export function isPluginRegistered(plugin: PluginDescriptor): boolean {
 	return plugins.has(plugin?.id);
 }
 
+/**
+ * Registers widgets / locales and **always** installs FE `dataSources` / `controls`, even when
+ * `plugin.id` was already registered (e.g. widget host loaded first without FE contributions).
+ *
+ * FE contributions are fully preflighted before any registry write so a mid-flight failure leaves
+ * no partial DS/control state. Returns `false` if the id already existed; merges contributions onto
+ * the stored descriptor. Prefer this over calling FE registries directly from plugin code.
+ */
 export function registerPlugin(plugin: PluginDescriptor, source?: PluginFileBuilder): boolean {
-	// Skip registration if plugin with same id already exists
-	if (!plugins.has(plugin.id)) {
-		const extendedDescriptor = { ...plugin, source };
-		plugins.set(plugin.id, extendedDescriptor);
+	const alreadyRegistered = plugins.has(plugin.id);
+	const dataSources = plugin.dataSources;
+	const controls = plugin.controls;
+
+	// --- Preflight (no registry writes) ---
+	const dsToCommit: DataSourceModule[] = [];
+	if (dataSources) {
+		for (const [typeKey, module] of Object.entries(dataSources)) {
+			validateDataSourceModule(module);
+			if (module.type !== typeKey) {
+				throw new TypeError(
+					`Plugin "${plugin.id}" dataSources key "${typeKey}" does not match module.type "${module.type}".`
+				);
+			}
+			const existing = dataSourceModuleRegistry.get(module.type);
+			if (existing && existing !== module) {
+				throw new Error(
+					`Plugin "${plugin.id}" cannot register data-source type "${module.type}": a different module is already registered.`
+				);
+			}
+			if (!existing) {
+				dsToCommit.push(module);
+			}
+		}
+	}
+
+	const controlsToCommit: ControlContributionCommit[] = [];
+	if (controls) {
+		for (const [typeKey, entry] of Object.entries(controls)) {
+			if (!typeKey) {
+				throw new TypeError(`Plugin "${plugin.id}" controls map contains an empty type key.`);
+			}
+			if (typeKey in controlMap) {
+				throw new Error(
+					`Plugin "${plugin.id}" cannot register control type "${typeKey}": it collides with a built-in control.`
+				);
+			}
+			if (!entry || typeof entry !== 'object') {
+				throw new TypeError(`Plugin "${plugin.id}" control "${typeKey}" must be a ControlPluginContribution object.`);
+			}
+			if (!isValidElementType(entry.Component)) {
+				throw new TypeError(
+					`Plugin "${plugin.id}" control "${typeKey}" must declare a valid React Component on ControlPluginContribution.Component.`
+				);
+			}
+			const bindings = normalizeDataSourceBindings(entry.dataSourceBindings ?? []);
+			const existing = getRegisteredControlContribution(typeKey);
+			if (existing) {
+				if (existing.pluginId !== plugin.id) {
+					throw new Error(
+						`Plugin "${plugin.id}" cannot register control type "${typeKey}": already registered by plugin "${existing.pluginId}".`
+					);
+				}
+				if (existing.Component !== entry.Component) {
+					throw new Error(
+						`Plugin "${plugin.id}" cannot register control type "${typeKey}": a different component is already registered.`
+					);
+				}
+			}
+			controlsToCommit.push({ typeKey, Component: entry.Component, bindings });
+		}
+	}
+
+	// --- Commit (only after both preflights succeed) ---
+	dsToCommit.forEach((module) => {
+		dataSourceModuleRegistry.register(module);
+	});
+	controlsToCommit.forEach(({ typeKey, Component, bindings }) => {
+		registerControlContribution(typeKey, { Component, bindings, pluginId: plugin.id });
+		registerControlDataSourceBindings(typeKey, bindings);
+	});
+
+	if (alreadyRegistered) {
+		const existing = plugins.get(plugin.id);
+		// Merge newly contributed FE fields onto the stored descriptor so later lookups see them.
+		plugins.set(plugin.id, {
+			...existing,
+			...plugin,
+			widgets: { ...existing?.widgets, ...plugin.widgets },
+			locales: { ...existing?.locales, ...plugin.locales },
+			utils: { ...existing?.utils, ...plugin.utils },
+			dataSources: { ...existing?.dataSources, ...plugin.dataSources },
+			controls: { ...existing?.controls, ...plugin.controls },
+			source: existing?.source ?? source
+		} as PluginDescriptorWithSource);
 		registerComponents(plugin.widgets);
 		augmentTranslations(plugin.locales);
-		// TODO: Allow externals?
-		if (source) {
-			plugin.stylesheets?.forEach((href) =>
-				appendStylesheet(
-					typeof href === 'string' ? (hasProtocol(href) ? href : buildFileUrl({ ...source, file: href })) : href
-				)
-			);
-			plugin.scripts?.forEach((src) =>
-				appendScript(typeof src === 'string' ? (hasProtocol(src) ? src : buildFileUrl({ ...source, file: src })) : src)
-			);
-		} else {
-			console.error('Scripts & stylesheets not allowed for umd bundles');
-		}
-		return true;
-	} else {
-		console.error(`Attempt to register a duplicate plugin "${plugin.id}" skipped.`);
 		return false;
 	}
+
+	const extendedDescriptor = { ...plugin, source } as PluginDescriptorWithSource;
+	plugins.set(plugin.id, extendedDescriptor);
+	registerComponents(plugin.widgets);
+	augmentTranslations(plugin.locales);
+	// TODO: Allow externals?
+	if (source) {
+		plugin.stylesheets?.forEach((href) =>
+			appendStylesheet(
+				typeof href === 'string' ? (hasProtocol(href) ? href : buildFileUrl({ ...source, file: href })) : href
+			)
+		);
+		plugin.scripts?.forEach((src) =>
+			appendScript(typeof src === 'string' ? (hasProtocol(src) ? src : buildFileUrl({ ...source, file: src })) : src)
+		);
+	} else {
+		console.error('Scripts & stylesheets not allowed for umd bundles');
+	}
+	return true;
 }
 
-export function registerComponents(widgets: LookupTable<WidgetRecord>): void {
+export function registerComponents(widgets?: LookupTable<WidgetRecord>): void {
+	if (!widgets) return;
 	Object.entries(widgets).forEach(([id, widget]) => {
 		// Skip registration if component with same id already exists
 		if (!components.has(id)) {
diff --git a/studio-ui/ui/app/src/state/reducers/uiConfig.ts b/studio-ui/ui/app/src/state/reducers/uiConfig.ts
index a5e2deaa0..aa3787547 100644
--- a/studio-ui/ui/app/src/state/reducers/uiConfig.ts
+++ b/studio-ui/ui/app/src/state/reducers/uiConfig.ts
@@ -27,6 +27,7 @@ import { fetchSiteLocales, fetchSiteLocalesComplete, fetchSiteLocalesFailed } fr
 import { deserialize, fromString, serialize } from '../../utils/xml';
 import { applyDeserializedXMLTransforms } from '../../utils/object';
 import { getUserLocaleCode, getUserTimeZone } from '../../utils/datetime';
+import { asArray } from '../../utils/array';
 
 const initialState: GlobalState['uiConfig'] = {
 	error: null,
@@ -55,6 +56,7 @@ const initialState: GlobalState['uiConfig'] = {
 		}
 	},
 	references: null,
+	controls: {},
 	xml: null,
 	publishing: {
 		deleteCommentRequired: false,
@@ -80,6 +82,7 @@ const reducer = createReducer<GlobalState['uiConfig']>(initialState, (builder) =
 		.addCase(fetchSiteUiConfigComplete, (state, { payload }) => {
 			let config = payload.config;
 			const references = {};
+			const controls: GlobalState['uiConfig']['controls'] = {};
 			if (config) {
 				const configDOM = fromString(config);
 				const site = payload.site;
@@ -104,6 +107,35 @@ const reducer = createReducer<GlobalState['uiConfig']>(initialState, (builder) =
 
 				configDOM.querySelectorAll('widget').forEach((e, index) => e.setAttribute('uiKey', String(index)));
 
+				configDOM
+					.querySelectorAll('[id="craftercms.components.ContentTypeManagement"] > configuration > controls')
+					.forEach((tag) => {
+						const deserialized = deserialize(tag.innerHTML);
+						asArray(deserialized?.descriptor).forEach((descriptor) => {
+							if (!descriptor?.id) return;
+							// Normalize XML-deserialized shapes (single nodes vs arrays, empty fields tag, etc.)
+							controls[descriptor.id] = {
+								...descriptor,
+								id: descriptor.id,
+								// empty <fields /> deserializes as []; treat as empty object map
+								fields: Array.isArray(descriptor.fields) ? {} : (descriptor.fields ?? {}),
+								sections: descriptor.sections
+									? asArray(descriptor.sections).map((section) => ({
+											...section,
+											fields: section.fields ? asArray(section.fields) : []
+										}))
+									: [],
+								metadata: {
+									...descriptor.metadata,
+									suffixes: descriptor.metadata?.suffixes ? asArray(descriptor.metadata.suffixes) : null,
+									additionalFields: descriptor.metadata?.additionalFields
+										? asArray(descriptor.metadata.additionalFields)
+										: null
+								}
+							};
+						});
+					});
+
 				config = serialize(configDOM);
 			}
 
@@ -111,7 +143,8 @@ const reducer = createReducer<GlobalState['uiConfig']>(initialState, (builder) =
 				...state,
 				isFetching: false,
 				xml: config,
-				references
+				references,
+				controls
 			};
 		})
 		.addCase(fetchSiteUiConfigFailed, (state, { payload }) => ({