Advanced tree

The Tree tab represents the serialized form structure and can now modify it directly without constantly returning to the canvas.

Supported nodes

The tree displays:

• the form root;
• stepper steps;
• every field and static element;
• sections and fieldsets;
• every column of a q-columns container;
• every tab of a q-tabs-structure container;
• nested children at any depth.

Selection stays synchronized with the canvas and settings panel.

Direct drag and drop

A drag handle is displayed before movable fields, steps, and columns.

Three destinations are visualized:

Indicator	Effect
top line	inserts before the target node;
outline	drops inside the target container;
bottom line	inserts after the target node.

A field can move between:

• the root;
• a step;
• a section or fieldset;
• a column;
• a tab.

Steps can be reordered. Columns can be reordered within their own q-columns container.

Dragging is disabled while a search filter is active so that insertion indexes are never derived from a partially hidden list.

Cycle prevention

A container cannot be dropped into itself or one of its descendants. The store checks the destination before showing a valid indicator and checks it again when applying the mutation.

This also protects programmatic calls to moveFieldToTarget().

Action menus

Each node exposes an accessible menu:

• through the ⋮ button;
• by right-clicking the node.

Depending on the node type, actions include:

• select;
• expand or collapse;
• move up or down;
• duplicate;
• delete.

Business constraints remain enforced: the last step and the last column in a container cannot be deleted.

Public contract

Pure types and helpers are available from the tree subpath:

import type {
  QFormBuilderTreeAction,
  QFormBuilderTreeDragSource,
  QFormBuilderTreeDropIntent,
  QFormBuilderTreeNodeMeta,
} from '@vevedh/qform-builder-layer/types'

import {
  getQFormBuilderTreeDropPosition,
  normalizeQFormBuilderTreeDestinationIndex,
  resolveQFormBuilderTreeDropIntent,
} from '@vevedh/qform-builder-layer/tree'

Final mutations still go through the builder store, so they appear in visible history as field-move, column-move, or step-move actions.

Best practices

• Give every field and container a stable name.
• Prefer tree moves for deeply nested structures.
• Keep the canvas for visual width and property editing.
• Do not bypass canMoveFieldToTarget() in custom integrations.
• Test imported schemas in FormViewer after complex moves.