@bluprynt/forms-builder 1.0.0

package/README.md

@@ -0,0 +1,147 @@
+# @bluprynt/forms-builder
+
+Headless React component for building and editing form schemas with drag-and-drop reordering. Pairs with `@bluprynt/forms-core` to handle schema mutations via `FormDefinitionEditor`.
+
+## Key Capabilities
+
+- **Drag-and-drop reordering** — reorder fields and sections with depth-aware nesting via @dnd-kit, respecting the maximum nesting depth of 3 levels.
+- **Schema CRUD** — add, update, and remove fields and sections. All mutations go through `FormDefinitionEditor` from `@bluprynt/forms-core`.
+- **Headless architecture** — all rendering is delegated to components you provide (`container`, `section`, `field`, `addPlaceholder`), so the package has zero UI opinions.
+- **Depth-aware nesting** — horizontal drag offset controls nesting depth. Only sections can accept nested children, enforced during drag projection.
+- **Add placeholders** — automatic insertion points at the end of each section and at the root level for adding new items.
+
+## Installation
+
+```bash
+npm install @bluprynt/forms-builder @bluprynt/forms-core ajv react react-dom @dnd-kit/abstract @dnd-kit/dom @dnd-kit/helpers @dnd-kit/react @dnd-kit/state
+```
+
+`@bluprynt/forms-core`, `react`, `react-dom`, and `@dnd-kit/*` packages are peer dependencies and must be installed in your project.
+
+## Quick Start
+
+```tsx
+import { useState, type FC } from 'react'
+import { FormBuilder } from '@bluprynt/forms-builder'
+import type {
+  FieldRenderProps,
+  SectionRenderProps,
+  AddPlaceholderRenderProps,
+  NewContentItem,
+} from '@bluprynt/forms-builder'
+import type { FormDefinition } from '@bluprynt/forms-core'
+
+const MyField: FC<FieldRenderProps> = ({ ref, handleRef, item, isDragging, onRemove }) => (
+  <div ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>
+    <span ref={handleRef}>⠿</span>
+    {item.label}
+    <button onClick={onRemove}>Remove</button>
+  </div>
+)
+
+const MySection: FC<SectionRenderProps> = ({ ref, handleRef, item, isDragging }) => (
+  <div ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>
+    <span ref={handleRef}>⠿</span>
+    {item.title}
+  </div>
+)
+
+const MyAddPlaceholder: FC<AddPlaceholderRenderProps> = ({ onAdd }) => (
+  <button onClick={() => onAdd({ type: 'string', label: 'New Field' })}>
+    + Add Field
+  </button>
+)
+
+const Builder: FC = () => {
+  const [definition, setDefinition] = useState<FormDefinition>(initialDefinition)
+
+  return (
+    <FormBuilder
+      definition={definition}
+      container={({ children }) => <div>{children}</div>}
+      section={MySection}
+      field={MyField}
+      addPlaceholder={MyAddPlaceholder}
+      selectedId={null}
+      onDefinitionChange={setDefinition}
+    />
+  )
+}
+```
+
+### Handling Selection
+
+Track which item is selected by passing `selectedId`. Each field and section component receives `isSelected`:
+
+```tsx
+const [selectedId, setSelectedId] = useState<number | null>(null)
+
+<FormBuilder
+  definition={definition}
+  container={({ children }) => <div>{children}</div>}
+  section={(props) => (
+    <div ref={props.ref} onClick={() => setSelectedId(props.id)}
+      style={{ outline: props.isSelected ? '2px solid blue' : 'none' }}>
+      <span ref={props.handleRef}>⠿</span>
+      {props.item.title}
+    </div>
+  )}
+  field={(props) => (
+    <div ref={props.ref} onClick={() => setSelectedId(props.id)}
+      style={{ outline: props.isSelected ? '2px solid blue' : 'none' }}>
+      <span ref={props.handleRef}>⠿</span>
+      {props.item.label}
+    </div>
+  )}
+  addPlaceholder={MyAddPlaceholder}
+  selectedId={selectedId}
+  onDefinitionChange={setDefinition}
+/>
+```
+
+## Render Component Props
+
+### FieldRenderProps
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `ref` | `(element: Element \| null) => void` | Sortable item ref — attach to outermost DOM element |
+| `handleRef` | `(element: Element \| null) => void` | Drag handle ref — attach to the drag handle element |
+| `id` | `number` | Field ID |
+| `depth` | `number` | Nesting depth (0 = root level) |
+| `index` | `number` | Position index in the flat list |
+| `parentId` | `number \| null` | Parent section ID, or `null` for root-level |
+| `type` | `FieldType` | Field type (`'string'`, `'number'`, etc.) |
+| `item` | `FieldContentItem` | Full field content item from the definition |
+| `isDragging` | `boolean` | `true` when this item is being dragged |
+| `isSelected` | `boolean` | `true` when this item's ID matches `selectedId` |
+| `onAdd` | `(item: NewContentItem) => number` | Add a new item to this field's parent section; returns the new ID |
+| `onRemove` | `() => void` | Remove this field |
+| `onChange` | `(item: ContentItem) => void` | Update this field |
+
+### SectionRenderProps
+
+Same shape as `FieldRenderProps` except:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `item` | `SectionContentItem` | Full section content item from the definition |
+| `onAdd` | `(item: NewContentItem) => number` | Add a new item **inside** this section; returns the new ID |
+| `onRemove` | `() => void` | Remove this section and all descendants |
+
+### AddPlaceholderRenderProps
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `depth` | `number` | Nesting depth where the placeholder appears |
+| `parentId` | `number \| null` | Parent section ID, or `null` for root-level |
+| `onAdd` | `(item: NewContentItem) => number` | Add a new item at this location; returns the new ID |
+| `onChange` | `(id: number, item: ContentItem) => void` | Update an existing item by ID |
+
+## Documentation
+
+| Document | Description |
+|----------|-------------|
+| [Architecture](./docs/architecture.md) | Project structure, module dependency graph, drag-and-drop flow, tree flattening |
+| [API Reference](./docs/api-reference.md) | Complete public API — components, hooks, types, props tables |
+| [Development Guide](./docs/development-guide.md) | How to build, test, lint, and extend the builder |

package/dist/index.cjs

@@ -0,0 +1,393 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _dnd_kit_react = require("@dnd-kit/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _dnd_kit_react_sortable = require("@dnd-kit/react/sortable");
+let react = require("react");
+let _bluprynt_forms_core = require("@bluprynt/forms-core");
+let _dnd_kit_helpers = require("@dnd-kit/helpers");
+//#region src/add-placeholder.tsx
+const AddPlaceholder = ({ depth, parentId, component: Component, onAdd, onChange }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+	depth,
+	parentId,
+	onAdd,
+	onChange
+});
+//#endregion
+//#region src/core/types.ts
+/**
+* Type guard that narrows a `TreeItem` to a section (`type` is `'section'`, `item` is `SectionContentItem`).
+*/
+const isSection = (item) => item.type === "section";
+/**
+* Type guard that narrows a `TreeItem` to a field (`type` is not `'section'`, `item` is `FieldContentItem`).
+*/
+const isField = (item) => item.type !== "section" && item.type !== "add-placeholder";
+/**
+* Type guard that narrows a `TreeItem` to an "add" placeholder.
+*/
+const isAddPlaceholder = (item) => item.type === "add-placeholder";
+//#endregion
+//#region src/core/constants.ts
+const SORTABLE_CONFIG = {
+	alignment: {
+		x: "start",
+		y: "center"
+	},
+	transition: { idle: true }
+};
+//#endregion
+//#region src/field.tsx
+const Field = ({ id, depth, index, parentId, type, item, isSelected, component: Component, onAdd, onRemove, onChange }) => {
+	const { ref, handleRef, isDragSource } = (0, _dnd_kit_react_sortable.useSortable)({
+		...SORTABLE_CONFIG,
+		id,
+		index,
+		data: {
+			depth,
+			parentId
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref,
+		handleRef,
+		id,
+		depth,
+		index,
+		parentId,
+		type,
+		item,
+		isDragging: isDragSource,
+		isSelected,
+		onAdd,
+		onRemove,
+		onChange
+	});
+};
+//#endregion
+//#region src/section.tsx
+const Section = ({ id, depth, index, parentId, item, isSelected, component: Component, onAdd, onRemove, onChange }) => {
+	const { ref, handleRef, isDragSource } = (0, _dnd_kit_react_sortable.useSortable)({
+		...SORTABLE_CONFIG,
+		id,
+		index,
+		data: {
+			depth,
+			parentId
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref,
+		handleRef,
+		id,
+		depth,
+		index,
+		parentId,
+		item,
+		isDragging: isDragSource,
+		isSelected,
+		onAdd,
+		onRemove,
+		onChange
+	});
+};
+//#endregion
+//#region src/core/projection.ts
+/**
+* Converts a horizontal pixel offset into a depth level based on indentation width.
+*/
+const getDragDepth = (offset, indentationWidth) => Math.round(offset / indentationWidth);
+/**
+* Returns the maximum allowed nesting depth when dragging above a target item.
+* Only sections can accept nested children.
+*/
+const getMaxDepth = (targetItem, previousItem) => {
+	if (!previousItem) return 0;
+	if (previousItem.type !== "section") return previousItem.depth;
+	return Math.min(targetItem.depth + 1, previousItem.depth + 1);
+};
+/**
+* Returns the minimum depth based on the next sibling item.
+* If there is no next item, the minimum depth is 0 (root level).
+*/
+const getMinDepth = (nextItem) => nextItem ? nextItem.depth : 0;
+/**
+* Calculates the projected depth and parent for a dragged item relative to a target position.
+* Clamps depth between min/max bounds and enforces `maxAllowedDepth`.
+*/
+const getProjection = (items, targetId, projectedDepth, maxAllowedDepth) => {
+	const targetItemIndex = items.findIndex(({ id }) => id === targetId);
+	const previousItem = items[targetItemIndex - 1];
+	const targetItem = items[targetItemIndex];
+	const nextItem = items[targetItemIndex + 1];
+	if (!targetItem) return {
+		depth: 0,
+		maxDepth: 0,
+		minDepth: 0,
+		parentId: null
+	};
+	const maxDepth = getMaxDepth(targetItem, previousItem);
+	const minDepth = getMinDepth(nextItem);
+	let depth = projectedDepth;
+	if (depth >= maxDepth) depth = maxDepth;
+	else if (depth < minDepth) depth = minDepth;
+	if (depth > maxAllowedDepth) depth = maxAllowedDepth;
+	const getParentId = () => {
+		if (depth === 0 || !previousItem) return null;
+		if (depth === previousItem.depth) return previousItem.parentId;
+		if (depth > previousItem.depth) {
+			if (previousItem.type !== "section") return previousItem.parentId;
+			return previousItem.id;
+		}
+		return items.slice(0, targetItemIndex).reverse().find((item) => item.depth === depth)?.parentId ?? null;
+	};
+	return {
+		depth,
+		maxDepth,
+		minDepth,
+		parentId: getParentId()
+	};
+};
+//#endregion
+//#region src/core/tree.ts
+let placeholderIdCounter = -1e3;
+/**
+* Resets the placeholder id counter. Call before each full flatten to ensure stable ids per flatten pass.
+*/
+const resetPlaceholderIds = () => {
+	placeholderIdCounter = -1e3;
+};
+const nextPlaceholderId = () => --placeholderIdCounter;
+/**
+* Flattens a nested content tree into a flat list of items with depth and parent info.
+* Each item preserves its position metadata for rendering in a sortable tree.
+* Appends an "add-placeholder" at the end of each section and at the root level.
+*/
+const flattenTree = (items, parentId = null, depth = 0) => {
+	if (parentId === null) resetPlaceholderIds();
+	const result = items.reduce((result, current, index) => {
+		const isSection = current.type === "section";
+		result.push({
+			id: current.id,
+			type: current.type,
+			parentId,
+			depth,
+			index,
+			item: current
+		});
+		if (isSection) {
+			const children = current.content;
+			result.push(...flattenTree(children, current.id, depth + 1));
+		}
+		return result;
+	}, []);
+	result.push({
+		id: nextPlaceholderId(),
+		type: "add-placeholder",
+		parentId,
+		depth,
+		index: items.length,
+		item: void 0
+	});
+	return result;
+};
+/**
+* Collects all transitive descendant ids for a given parent from a flat item list.
+*/
+const getDescendants = (items, parentId) => {
+	return items.filter((item) => item.parentId === parentId).reduce((result, child) => {
+		result.add(child.id);
+		for (const descendant of getDescendants(items, child.id)) result.add(descendant);
+		return result;
+	}, /* @__PURE__ */ new Set());
+};
+//#endregion
+//#region src/use-form-builder.ts
+/**
+* Manages the form builder state: flattened tree items, drag-and-drop reordering,
+* item editing, and removal. Uses {@link FormDefinitionEditor} for all definition mutations
+* and notifies the consumer of structural changes via {@link onDefinitionChange}.
+*
+* @param definition - The current form definition to build upon.
+* @param onDefinitionChange - Optional callback invoked with the updated `FormDefinition`
+*   whenever the tree structure, item content, or item order changes.
+* @returns Flattened items and handlers for item/drag operations.
+*/
+const useFormBuilder = (definition, onDefinitionChange) => {
+	const [items, setItems] = (0, react.useState)(() => flattenTree(definition.content));
+	const initialDepth = (0, react.useRef)(0);
+	const sourceChildren = (0, react.useRef)([]);
+	const dragSourceId = (0, react.useRef)(null);
+	const definitionRef = (0, react.useRef)(definition);
+	definitionRef.current = definition;
+	const onDefinitionChangeRef = (0, react.useRef)(onDefinitionChange);
+	onDefinitionChangeRef.current = onDefinitionChange;
+	(0, react.useEffect)(() => {
+		setItems(flattenTree(definition.content));
+	}, [definition]);
+	const applyEditor = (0, react.useCallback)((editor) => {
+		const updated = editor.toJSON();
+		setItems(flattenTree(updated.content));
+		onDefinitionChangeRef.current?.(updated);
+	}, []);
+	const handleItemAdd = (0, react.useCallback)((sectionId, item) => {
+		const editor = new _bluprynt_forms_core.FormDefinitionEditor(definitionRef.current);
+		const parentId = sectionId ?? void 0;
+		const id = editor.nextId();
+		if (item.type === "section") editor.addSection({
+			...item,
+			id
+		}, parentId);
+		else editor.addField({
+			...item,
+			id
+		}, parentId);
+		applyEditor(editor);
+		return id;
+	}, [applyEditor]);
+	const handleItemChange = (0, react.useCallback)((id, newItem) => {
+		const editor = new _bluprynt_forms_core.FormDefinitionEditor(definitionRef.current);
+		if (newItem.type === "section") {
+			const { id: _, type: __, content: ___, ...updates } = newItem;
+			editor.updateSection(id, updates);
+		} else {
+			const { id: _, type: __, ...updates } = newItem;
+			editor.updateField(id, updates);
+		}
+		applyEditor(editor);
+	}, [applyEditor]);
+	const handleItemRemove = (0, react.useCallback)((itemId) => {
+		const editor = new _bluprynt_forms_core.FormDefinitionEditor(definitionRef.current);
+		editor.removeItem(itemId);
+		applyEditor(editor);
+	}, [applyEditor]);
+	const handleDragStart = (event) => {
+		const { source } = event.operation;
+		if (!source) return;
+		const item = items.find(({ id }) => id === source.id);
+		if (!item) return;
+		initialDepth.current = item.depth;
+		dragSourceId.current = source.id;
+		setItems((prev) => {
+			sourceChildren.current = [];
+			const descendants = getDescendants(prev, source.id);
+			return prev.filter((i) => {
+				if (descendants.has(i.id)) {
+					sourceChildren.current = [...sourceChildren.current, i];
+					return false;
+				}
+				return true;
+			});
+		});
+	};
+	const handleDragOver = (event, manager) => {
+		const { source, target } = event.operation;
+		event.preventDefault();
+		if (source && target && source.id !== target.id) setItems((prev) => {
+			const offsetLeft = manager.dragOperation.transform.x;
+			const dragDepth = getDragDepth(offsetLeft, 40);
+			const projectedDepth = initialDepth.current + dragDepth;
+			const { depth, parentId } = getProjection(prev, target.id, projectedDepth, 3);
+			return (0, _dnd_kit_helpers.move)(prev, event).map((item) => item.id === source.id ? {
+				...item,
+				depth,
+				parentId
+			} : item);
+		});
+	};
+	const handleDragMove = (event, manager) => {
+		if (event.defaultPrevented) return;
+		const { source, target } = event.operation;
+		if (!source || !target) return;
+		const offsetLeft = manager.dragOperation.transform.x;
+		const dragDepth = getDragDepth(offsetLeft, 40);
+		const projectedDepth = initialDepth.current + dragDepth;
+		const { depth, parentId } = getProjection(items, source.id, projectedDepth, 3);
+		if (source.data?.depth !== depth || source.data?.parentId !== parentId) setItems((prev) => prev.map((item) => item.id === source.id ? {
+			...item,
+			depth,
+			parentId
+		} : item));
+	};
+	const handleDragEnd = (event) => {
+		if (event.canceled) {
+			setItems(flattenTree(definitionRef.current.content));
+			dragSourceId.current = null;
+			sourceChildren.current = [];
+			return;
+		}
+		const draggedId = dragSourceId.current;
+		if (draggedId === null) return;
+		const draggedItem = items.find((i) => i.id === draggedId);
+		if (!draggedItem) return;
+		const targetParentId = draggedItem.parentId;
+		const draggedFlatIndex = items.findIndex((i) => i.id === draggedId);
+		let siblingIndex = 0;
+		for (let i = 0; i < draggedFlatIndex; i++) {
+			const current = items[i];
+			if (current && current.parentId === targetParentId && current.type !== "add-placeholder") siblingIndex++;
+		}
+		const editor = new _bluprynt_forms_core.FormDefinitionEditor(definitionRef.current);
+		editor.moveItem(draggedId, targetParentId ?? void 0, siblingIndex);
+		applyEditor(editor);
+		dragSourceId.current = null;
+		sourceChildren.current = [];
+	};
+	return {
+		items,
+		handleItemAdd,
+		handleItemChange,
+		handleItemRemove,
+		handleDragStart,
+		handleDragOver,
+		handleDragMove,
+		handleDragEnd
+	};
+};
+//#endregion
+//#region src/builder.tsx
+const FormBuilder = ({ definition, container: Container, section: SectionComponent, field: FieldComponent, addPlaceholder: AddPlaceholderComponent, selectedId, onDefinitionChange }) => {
+	const { items, handleItemAdd, handleItemChange, handleItemRemove, handleDragStart, handleDragOver, handleDragMove, handleDragEnd } = useFormBuilder(definition, onDefinitionChange);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_react.DragDropProvider, {
+		onDragStart: handleDragStart,
+		onDragOver: handleDragOver,
+		onDragMove: handleDragMove,
+		onDragEnd: handleDragEnd,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, { children: items.map((item, index) => {
+			const onAdd = (value) => handleItemAdd(item.type === "section" ? item.id : item.parentId, value);
+			const onRemove = () => handleItemRemove(item.id);
+			const onChange = (value) => handleItemChange(value.id, value);
+			return isSection(item) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
+				id: item.id,
+				depth: item.depth,
+				index,
+				parentId: item.parentId,
+				item: item.item,
+				isSelected: selectedId === item.id,
+				component: SectionComponent,
+				onAdd,
+				onRemove,
+				onChange
+			}, item.id) : isField(item) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+				id: item.id,
+				depth: item.depth,
+				index,
+				parentId: item.parentId,
+				type: item.type,
+				item: item.item,
+				isSelected: selectedId === item.id,
+				component: FieldComponent,
+				onAdd,
+				onRemove,
+				onChange
+			}, item.id) : isAddPlaceholder(item) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AddPlaceholder, {
+				depth: item.depth,
+				parentId: item.parentId,
+				component: AddPlaceholderComponent,
+				onAdd,
+				onChange: handleItemChange
+			}, item.id) : null;
+		}) })
+	});
+};
+//#endregion
+exports.FormBuilder = FormBuilder;

package/dist/index.d.cts

@@ -0,0 +1,64 @@
+import { FC, PropsWithChildren } from "react";
+import { ContentItem, FieldContentItem, FieldType, FormDefinition, SectionContentItem } from "@bluprynt/forms-core";
+
+//#region src/core/types.d.ts
+/**
+ * A `ContentItem` without an `id` — used when adding new items (id is auto-generated).
+ */
+type NewContentItem = Omit<FieldContentItem, 'id'> | Omit<SectionContentItem, 'id'>;
+//#endregion
+//#region src/add-placeholder.d.ts
+type AddPlaceholderRenderProps = {
+  depth: number;
+  parentId: number | null;
+  onAdd: (item: NewContentItem) => number;
+  onChange: (id: number, item: ContentItem) => void;
+};
+//#endregion
+//#region src/field.d.ts
+type FieldRenderProps = {
+  ref: (element: Element | null) => void;
+  handleRef: (element: Element | null) => void;
+  id: number;
+  depth: number;
+  index: number;
+  parentId: number | null;
+  type: FieldType;
+  item: FieldContentItem;
+  isDragging: boolean;
+  isSelected: boolean;
+  onAdd: (item: NewContentItem) => number;
+  onRemove: () => void;
+  onChange: (item: ContentItem) => void;
+};
+//#endregion
+//#region src/section.d.ts
+type SectionRenderProps = {
+  ref: (element: Element | null) => void;
+  handleRef: (element: Element | null) => void;
+  id: number;
+  depth: number;
+  index: number;
+  parentId: number | null;
+  item: SectionContentItem;
+  isDragging: boolean;
+  isSelected: boolean;
+  onAdd: (item: NewContentItem) => number;
+  onRemove: () => void;
+  onChange: (item: ContentItem) => void;
+};
+//#endregion
+//#region src/builder.d.ts
+type FormBuilderProps = {
+  definition: FormDefinition;
+  container: FC<PropsWithChildren>;
+  section: FC<SectionRenderProps>;
+  field: FC<FieldRenderProps>;
+  addPlaceholder: FC<AddPlaceholderRenderProps>;
+  selectedId?: number | null;
+  onDefinitionChange?: (definition: FormDefinition) => void;
+};
+declare const FormBuilder: FC<FormBuilderProps>;
+//#endregion
+export { type AddPlaceholderRenderProps, type FieldRenderProps, FormBuilder, type NewContentItem, type SectionRenderProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/core/types.ts","../src/add-placeholder.tsx","../src/field.tsx","../src/section.tsx","../src/builder.tsx"],"mappings":";;;;;;;KAKY,cAAA,GAAiB,IAAA,CAAK,gBAAA,UAA0B,IAAA,CAAK,kBAAA;;;KCCrD,yBAAA;EACR,KAAA;EACA,QAAA;EACA,KAAA,GAAQ,IAAA,EAAM,cAAA;EACd,QAAA,GAAW,EAAA,UAAY,IAAA,EAAM,WAAA;AAAA;;;KCFrB,gBAAA;EACR,GAAA,GAAM,OAAA,EAAS,OAAA;EACf,SAAA,GAAY,OAAA,EAAS,OAAA;EACrB,EAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;EACA,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,gBAAA;EACN,UAAA;EACA,UAAA;EACA,KAAA,GAAQ,IAAA,EAAM,cAAA;EACd,QAAA;EACA,QAAA,GAAW,IAAA,EAAM,WAAA;AAAA;;;KCbT,kBAAA;EACR,GAAA,GAAM,OAAA,EAAS,OAAA;EACf,SAAA,GAAY,OAAA,EAAS,OAAA;EACrB,EAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;EACA,IAAA,EAAM,kBAAA;EACN,UAAA;EACA,UAAA;EACA,KAAA,GAAQ,IAAA,EAAM,cAAA;EACd,QAAA;EACA,QAAA,GAAW,IAAA,EAAM,WAAA;AAAA;;;KCThB,gBAAA;EACD,UAAA,EAAY,cAAA;EACZ,SAAA,EAAW,EAAA,CAAG,iBAAA;EACd,OAAA,EAAS,EAAA,CAAG,kBAAA;EACZ,KAAA,EAAO,EAAA,CAAG,gBAAA;EACV,cAAA,EAAgB,EAAA,CAAG,yBAAA;EACnB,UAAA;EACA,kBAAA,IAAsB,UAAA,EAAY,cAAA;AAAA;AAAA,cAGzB,WAAA,EAAa,EAAA,CAAG,gBAAA"}

package/dist/index.d.mts

@@ -0,0 +1,64 @@
+import { FC, PropsWithChildren } from "react";
+import { ContentItem, FieldContentItem, FieldType, FormDefinition, SectionContentItem } from "@bluprynt/forms-core";
+
+//#region src/core/types.d.ts
+/**
+ * A `ContentItem` without an `id` — used when adding new items (id is auto-generated).
+ */
+type NewContentItem = Omit<FieldContentItem, 'id'> | Omit<SectionContentItem, 'id'>;
+//#endregion
+//#region src/add-placeholder.d.ts
+type AddPlaceholderRenderProps = {
+  depth: number;
+  parentId: number | null;
+  onAdd: (item: NewContentItem) => number;
+  onChange: (id: number, item: ContentItem) => void;
+};
+//#endregion
+//#region src/field.d.ts
+type FieldRenderProps = {
+  ref: (element: Element | null) => void;
+  handleRef: (element: Element | null) => void;
+  id: number;
+  depth: number;
+  index: number;
+  parentId: number | null;
+  type: FieldType;
+  item: FieldContentItem;
+  isDragging: boolean;
+  isSelected: boolean;
+  onAdd: (item: NewContentItem) => number;
+  onRemove: () => void;
+  onChange: (item: ContentItem) => void;
+};
+//#endregion
+//#region src/section.d.ts
+type SectionRenderProps = {
+  ref: (element: Element | null) => void;
+  handleRef: (element: Element | null) => void;
+  id: number;
+  depth: number;
+  index: number;
+  parentId: number | null;
+  item: SectionContentItem;
+  isDragging: boolean;
+  isSelected: boolean;
+  onAdd: (item: NewContentItem) => number;
+  onRemove: () => void;
+  onChange: (item: ContentItem) => void;
+};
+//#endregion
+//#region src/builder.d.ts
+type FormBuilderProps = {
+  definition: FormDefinition;
+  container: FC<PropsWithChildren>;
+  section: FC<SectionRenderProps>;
+  field: FC<FieldRenderProps>;
+  addPlaceholder: FC<AddPlaceholderRenderProps>;
+  selectedId?: number | null;
+  onDefinitionChange?: (definition: FormDefinition) => void;
+};
+declare const FormBuilder: FC<FormBuilderProps>;
+//#endregion
+export { type AddPlaceholderRenderProps, type FieldRenderProps, FormBuilder, type NewContentItem, type SectionRenderProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/core/types.ts","../src/add-placeholder.tsx","../src/field.tsx","../src/section.tsx","../src/builder.tsx"],"mappings":";;;;;;;KAKY,cAAA,GAAiB,IAAA,CAAK,gBAAA,UAA0B,IAAA,CAAK,kBAAA;;;KCCrD,yBAAA;EACR,KAAA;EACA,QAAA;EACA,KAAA,GAAQ,IAAA,EAAM,cAAA;EACd,QAAA,GAAW,EAAA,UAAY,IAAA,EAAM,WAAA;AAAA;;;KCFrB,gBAAA;EACR,GAAA,GAAM,OAAA,EAAS,OAAA;EACf,SAAA,GAAY,OAAA,EAAS,OAAA;EACrB,EAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;EACA,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,gBAAA;EACN,UAAA;EACA,UAAA;EACA,KAAA,GAAQ,IAAA,EAAM,cAAA;EACd,QAAA;EACA,QAAA,GAAW,IAAA,EAAM,WAAA;AAAA;;;KCbT,kBAAA;EACR,GAAA,GAAM,OAAA,EAAS,OAAA;EACf,SAAA,GAAY,OAAA,EAAS,OAAA;EACrB,EAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;EACA,IAAA,EAAM,kBAAA;EACN,UAAA;EACA,UAAA;EACA,KAAA,GAAQ,IAAA,EAAM,cAAA;EACd,QAAA;EACA,QAAA,GAAW,IAAA,EAAM,WAAA;AAAA;;;KCThB,gBAAA;EACD,UAAA,EAAY,cAAA;EACZ,SAAA,EAAW,EAAA,CAAG,iBAAA;EACd,OAAA,EAAS,EAAA,CAAG,kBAAA;EACZ,KAAA,EAAO,EAAA,CAAG,gBAAA;EACV,cAAA,EAAgB,EAAA,CAAG,yBAAA;EACnB,UAAA;EACA,kBAAA,IAAsB,UAAA,EAAY,cAAA;AAAA;AAAA,cAGzB,WAAA,EAAa,EAAA,CAAG,gBAAA"}

package/dist/index.mjs

@@ -0,0 +1,394 @@
+import { DragDropProvider } from "@dnd-kit/react";
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FormDefinitionEditor } from "@bluprynt/forms-core";
+import { move } from "@dnd-kit/helpers";
+//#region src/add-placeholder.tsx
+const AddPlaceholder = ({ depth, parentId, component: Component, onAdd, onChange }) => /* @__PURE__ */ jsx(Component, {
+	depth,
+	parentId,
+	onAdd,
+	onChange
+});
+//#endregion
+//#region src/core/types.ts
+/**
+* Type guard that narrows a `TreeItem` to a section (`type` is `'section'`, `item` is `SectionContentItem`).
+*/
+const isSection = (item) => item.type === "section";
+/**
+* Type guard that narrows a `TreeItem` to a field (`type` is not `'section'`, `item` is `FieldContentItem`).
+*/
+const isField = (item) => item.type !== "section" && item.type !== "add-placeholder";
+/**
+* Type guard that narrows a `TreeItem` to an "add" placeholder.
+*/
+const isAddPlaceholder = (item) => item.type === "add-placeholder";
+//#endregion
+//#region src/core/constants.ts
+const SORTABLE_CONFIG = {
+	alignment: {
+		x: "start",
+		y: "center"
+	},
+	transition: { idle: true }
+};
+//#endregion
+//#region src/field.tsx
+const Field = ({ id, depth, index, parentId, type, item, isSelected, component: Component, onAdd, onRemove, onChange }) => {
+	const { ref, handleRef, isDragSource } = useSortable({
+		...SORTABLE_CONFIG,
+		id,
+		index,
+		data: {
+			depth,
+			parentId
+		}
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		handleRef,
+		id,
+		depth,
+		index,
+		parentId,
+		type,
+		item,
+		isDragging: isDragSource,
+		isSelected,
+		onAdd,
+		onRemove,
+		onChange
+	});
+};
+//#endregion
+//#region src/section.tsx
+const Section = ({ id, depth, index, parentId, item, isSelected, component: Component, onAdd, onRemove, onChange }) => {
+	const { ref, handleRef, isDragSource } = useSortable({
+		...SORTABLE_CONFIG,
+		id,
+		index,
+		data: {
+			depth,
+			parentId
+		}
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		handleRef,
+		id,
+		depth,
+		index,
+		parentId,
+		item,
+		isDragging: isDragSource,
+		isSelected,
+		onAdd,
+		onRemove,
+		onChange
+	});
+};
+//#endregion
+//#region src/core/projection.ts
+/**
+* Converts a horizontal pixel offset into a depth level based on indentation width.
+*/
+const getDragDepth = (offset, indentationWidth) => Math.round(offset / indentationWidth);
+/**
+* Returns the maximum allowed nesting depth when dragging above a target item.
+* Only sections can accept nested children.
+*/
+const getMaxDepth = (targetItem, previousItem) => {
+	if (!previousItem) return 0;
+	if (previousItem.type !== "section") return previousItem.depth;
+	return Math.min(targetItem.depth + 1, previousItem.depth + 1);
+};
+/**
+* Returns the minimum depth based on the next sibling item.
+* If there is no next item, the minimum depth is 0 (root level).
+*/
+const getMinDepth = (nextItem) => nextItem ? nextItem.depth : 0;
+/**
+* Calculates the projected depth and parent for a dragged item relative to a target position.
+* Clamps depth between min/max bounds and enforces `maxAllowedDepth`.
+*/
+const getProjection = (items, targetId, projectedDepth, maxAllowedDepth) => {
+	const targetItemIndex = items.findIndex(({ id }) => id === targetId);
+	const previousItem = items[targetItemIndex - 1];
+	const targetItem = items[targetItemIndex];
+	const nextItem = items[targetItemIndex + 1];
+	if (!targetItem) return {
+		depth: 0,
+		maxDepth: 0,
+		minDepth: 0,
+		parentId: null
+	};
+	const maxDepth = getMaxDepth(targetItem, previousItem);
+	const minDepth = getMinDepth(nextItem);
+	let depth = projectedDepth;
+	if (depth >= maxDepth) depth = maxDepth;
+	else if (depth < minDepth) depth = minDepth;
+	if (depth > maxAllowedDepth) depth = maxAllowedDepth;
+	const getParentId = () => {
+		if (depth === 0 || !previousItem) return null;
+		if (depth === previousItem.depth) return previousItem.parentId;
+		if (depth > previousItem.depth) {
+			if (previousItem.type !== "section") return previousItem.parentId;
+			return previousItem.id;
+		}
+		return items.slice(0, targetItemIndex).reverse().find((item) => item.depth === depth)?.parentId ?? null;
+	};
+	return {
+		depth,
+		maxDepth,
+		minDepth,
+		parentId: getParentId()
+	};
+};
+//#endregion
+//#region src/core/tree.ts
+let placeholderIdCounter = -1e3;
+/**
+* Resets the placeholder id counter. Call before each full flatten to ensure stable ids per flatten pass.
+*/
+const resetPlaceholderIds = () => {
+	placeholderIdCounter = -1e3;
+};
+const nextPlaceholderId = () => --placeholderIdCounter;
+/**
+* Flattens a nested content tree into a flat list of items with depth and parent info.
+* Each item preserves its position metadata for rendering in a sortable tree.
+* Appends an "add-placeholder" at the end of each section and at the root level.
+*/
+const flattenTree = (items, parentId = null, depth = 0) => {
+	if (parentId === null) resetPlaceholderIds();
+	const result = items.reduce((result, current, index) => {
+		const isSection = current.type === "section";
+		result.push({
+			id: current.id,
+			type: current.type,
+			parentId,
+			depth,
+			index,
+			item: current
+		});
+		if (isSection) {
+			const children = current.content;
+			result.push(...flattenTree(children, current.id, depth + 1));
+		}
+		return result;
+	}, []);
+	result.push({
+		id: nextPlaceholderId(),
+		type: "add-placeholder",
+		parentId,
+		depth,
+		index: items.length,
+		item: void 0
+	});
+	return result;
+};
+/**
+* Collects all transitive descendant ids for a given parent from a flat item list.
+*/
+const getDescendants = (items, parentId) => {
+	return items.filter((item) => item.parentId === parentId).reduce((result, child) => {
+		result.add(child.id);
+		for (const descendant of getDescendants(items, child.id)) result.add(descendant);
+		return result;
+	}, /* @__PURE__ */ new Set());
+};
+//#endregion
+//#region src/use-form-builder.ts
+/**
+* Manages the form builder state: flattened tree items, drag-and-drop reordering,
+* item editing, and removal. Uses {@link FormDefinitionEditor} for all definition mutations
+* and notifies the consumer of structural changes via {@link onDefinitionChange}.
+*
+* @param definition - The current form definition to build upon.
+* @param onDefinitionChange - Optional callback invoked with the updated `FormDefinition`
+*   whenever the tree structure, item content, or item order changes.
+* @returns Flattened items and handlers for item/drag operations.
+*/
+const useFormBuilder = (definition, onDefinitionChange) => {
+	const [items, setItems] = useState(() => flattenTree(definition.content));
+	const initialDepth = useRef(0);
+	const sourceChildren = useRef([]);
+	const dragSourceId = useRef(null);
+	const definitionRef = useRef(definition);
+	definitionRef.current = definition;
+	const onDefinitionChangeRef = useRef(onDefinitionChange);
+	onDefinitionChangeRef.current = onDefinitionChange;
+	useEffect(() => {
+		setItems(flattenTree(definition.content));
+	}, [definition]);
+	const applyEditor = useCallback((editor) => {
+		const updated = editor.toJSON();
+		setItems(flattenTree(updated.content));
+		onDefinitionChangeRef.current?.(updated);
+	}, []);
+	const handleItemAdd = useCallback((sectionId, item) => {
+		const editor = new FormDefinitionEditor(definitionRef.current);
+		const parentId = sectionId ?? void 0;
+		const id = editor.nextId();
+		if (item.type === "section") editor.addSection({
+			...item,
+			id
+		}, parentId);
+		else editor.addField({
+			...item,
+			id
+		}, parentId);
+		applyEditor(editor);
+		return id;
+	}, [applyEditor]);
+	const handleItemChange = useCallback((id, newItem) => {
+		const editor = new FormDefinitionEditor(definitionRef.current);
+		if (newItem.type === "section") {
+			const { id: _, type: __, content: ___, ...updates } = newItem;
+			editor.updateSection(id, updates);
+		} else {
+			const { id: _, type: __, ...updates } = newItem;
+			editor.updateField(id, updates);
+		}
+		applyEditor(editor);
+	}, [applyEditor]);
+	const handleItemRemove = useCallback((itemId) => {
+		const editor = new FormDefinitionEditor(definitionRef.current);
+		editor.removeItem(itemId);
+		applyEditor(editor);
+	}, [applyEditor]);
+	const handleDragStart = (event) => {
+		const { source } = event.operation;
+		if (!source) return;
+		const item = items.find(({ id }) => id === source.id);
+		if (!item) return;
+		initialDepth.current = item.depth;
+		dragSourceId.current = source.id;
+		setItems((prev) => {
+			sourceChildren.current = [];
+			const descendants = getDescendants(prev, source.id);
+			return prev.filter((i) => {
+				if (descendants.has(i.id)) {
+					sourceChildren.current = [...sourceChildren.current, i];
+					return false;
+				}
+				return true;
+			});
+		});
+	};
+	const handleDragOver = (event, manager) => {
+		const { source, target } = event.operation;
+		event.preventDefault();
+		if (source && target && source.id !== target.id) setItems((prev) => {
+			const offsetLeft = manager.dragOperation.transform.x;
+			const dragDepth = getDragDepth(offsetLeft, 40);
+			const projectedDepth = initialDepth.current + dragDepth;
+			const { depth, parentId } = getProjection(prev, target.id, projectedDepth, 3);
+			return move(prev, event).map((item) => item.id === source.id ? {
+				...item,
+				depth,
+				parentId
+			} : item);
+		});
+	};
+	const handleDragMove = (event, manager) => {
+		if (event.defaultPrevented) return;
+		const { source, target } = event.operation;
+		if (!source || !target) return;
+		const offsetLeft = manager.dragOperation.transform.x;
+		const dragDepth = getDragDepth(offsetLeft, 40);
+		const projectedDepth = initialDepth.current + dragDepth;
+		const { depth, parentId } = getProjection(items, source.id, projectedDepth, 3);
+		if (source.data?.depth !== depth || source.data?.parentId !== parentId) setItems((prev) => prev.map((item) => item.id === source.id ? {
+			...item,
+			depth,
+			parentId
+		} : item));
+	};
+	const handleDragEnd = (event) => {
+		if (event.canceled) {
+			setItems(flattenTree(definitionRef.current.content));
+			dragSourceId.current = null;
+			sourceChildren.current = [];
+			return;
+		}
+		const draggedId = dragSourceId.current;
+		if (draggedId === null) return;
+		const draggedItem = items.find((i) => i.id === draggedId);
+		if (!draggedItem) return;
+		const targetParentId = draggedItem.parentId;
+		const draggedFlatIndex = items.findIndex((i) => i.id === draggedId);
+		let siblingIndex = 0;
+		for (let i = 0; i < draggedFlatIndex; i++) {
+			const current = items[i];
+			if (current && current.parentId === targetParentId && current.type !== "add-placeholder") siblingIndex++;
+		}
+		const editor = new FormDefinitionEditor(definitionRef.current);
+		editor.moveItem(draggedId, targetParentId ?? void 0, siblingIndex);
+		applyEditor(editor);
+		dragSourceId.current = null;
+		sourceChildren.current = [];
+	};
+	return {
+		items,
+		handleItemAdd,
+		handleItemChange,
+		handleItemRemove,
+		handleDragStart,
+		handleDragOver,
+		handleDragMove,
+		handleDragEnd
+	};
+};
+//#endregion
+//#region src/builder.tsx
+const FormBuilder = ({ definition, container: Container, section: SectionComponent, field: FieldComponent, addPlaceholder: AddPlaceholderComponent, selectedId, onDefinitionChange }) => {
+	const { items, handleItemAdd, handleItemChange, handleItemRemove, handleDragStart, handleDragOver, handleDragMove, handleDragEnd } = useFormBuilder(definition, onDefinitionChange);
+	return /* @__PURE__ */ jsx(DragDropProvider, {
+		onDragStart: handleDragStart,
+		onDragOver: handleDragOver,
+		onDragMove: handleDragMove,
+		onDragEnd: handleDragEnd,
+		children: /* @__PURE__ */ jsx(Container, { children: items.map((item, index) => {
+			const onAdd = (value) => handleItemAdd(item.type === "section" ? item.id : item.parentId, value);
+			const onRemove = () => handleItemRemove(item.id);
+			const onChange = (value) => handleItemChange(value.id, value);
+			return isSection(item) ? /* @__PURE__ */ jsx(Section, {
+				id: item.id,
+				depth: item.depth,
+				index,
+				parentId: item.parentId,
+				item: item.item,
+				isSelected: selectedId === item.id,
+				component: SectionComponent,
+				onAdd,
+				onRemove,
+				onChange
+			}, item.id) : isField(item) ? /* @__PURE__ */ jsx(Field, {
+				id: item.id,
+				depth: item.depth,
+				index,
+				parentId: item.parentId,
+				type: item.type,
+				item: item.item,
+				isSelected: selectedId === item.id,
+				component: FieldComponent,
+				onAdd,
+				onRemove,
+				onChange
+			}, item.id) : isAddPlaceholder(item) ? /* @__PURE__ */ jsx(AddPlaceholder, {
+				depth: item.depth,
+				parentId: item.parentId,
+				component: AddPlaceholderComponent,
+				onAdd,
+				onChange: handleItemChange
+			}, item.id) : null;
+		}) })
+	});
+};
+//#endregion
+export { FormBuilder };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/add-placeholder.tsx","../src/core/types.ts","../src/core/constants.ts","../src/field.tsx","../src/section.tsx","../src/core/projection.ts","../src/core/tree.ts","../src/use-form-builder.ts","../src/builder.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport type { ContentItem } from '@bluprynt/forms-core'\n\nimport type { NewContentItem } from './core/types'\n\nexport type AddPlaceholderRenderProps = {\n    depth: number\n    parentId: number | null\n    onAdd: (item: NewContentItem) => number\n    onChange: (id: number, item: ContentItem) => void\n}\n\ntype AddPlaceholderProps = {\n    depth: number\n    parentId: number | null\n    component: FC<AddPlaceholderRenderProps>\n    onAdd: (item: NewContentItem) => number\n    onChange: (id: number, item: ContentItem) => void\n}\n\nexport const AddPlaceholder: FC<AddPlaceholderProps> = ({ depth, parentId, component: Component, onAdd, onChange }) => (\n    <Component depth={depth} parentId={parentId} onAdd={onAdd} onChange={onChange} />\n)\n","import type { ContentItem, ContentItemType, FieldContentItem, SectionContentItem } from '@bluprynt/forms-core'\n\n/**\n * A `ContentItem` without an `id` — used when adding new items (id is auto-generated).\n */\nexport type NewContentItem = Omit<FieldContentItem, 'id'> | Omit<SectionContentItem, 'id'>\n\n/**\n * Flat representation of a content item within the sortable tree.\n * Carries depth, parent reference, and the original `ContentItem` for rendering and reconstruction.\n */\nexport type TreeItem = {\n    id: number\n    type: ContentItemType | 'add-placeholder'\n    parentId: number | null\n    depth: number\n    index: number\n    collapsed?: boolean\n    item: ContentItem | undefined\n    onChange?: (item: ContentItem) => void\n}\n\n/**\n * Type guard that narrows a `TreeItem` to a section (`type` is `'section'`, `item` is `SectionContentItem`).\n */\nexport const isSection = (item: TreeItem): item is TreeItem & { type: 'section'; item: SectionContentItem } =>\n    item.type === 'section'\n\n/**\n * Type guard that narrows a `TreeItem` to a field (`type` is not `'section'`, `item` is `FieldContentItem`).\n */\nexport const isField = (\n    item: TreeItem,\n): item is TreeItem & { type: Exclude<ContentItemType, 'section'>; item: FieldContentItem } =>\n    item.type !== 'section' && item.type !== 'add-placeholder'\n\n/**\n * Type guard that narrows a `TreeItem` to an \"add\" placeholder.\n */\nexport const isAddPlaceholder = (item: TreeItem): item is TreeItem & { type: 'add-placeholder'; item: undefined } =>\n    item.type === 'add-placeholder'\n","export const INDENTATION = 40\nexport const MAX_DEPTH = 3\n\nexport const SORTABLE_CONFIG = {\n    alignment: {\n        x: 'start',\n        y: 'center',\n    },\n    transition: {\n        idle: true,\n    },\n} as const\n","import type { FC } from 'react'\n\nimport type { ContentItem, FieldContentItem, FieldType } from '@bluprynt/forms-core'\nimport { useSortable } from '@dnd-kit/react/sortable'\n\nimport { SORTABLE_CONFIG } from './core/constants'\nimport type { NewContentItem } from './core/types'\n\nexport type FieldRenderProps = {\n    ref: (element: Element | null) => void\n    handleRef: (element: Element | null) => void\n    id: number\n    depth: number\n    index: number\n    parentId: number | null\n    type: FieldType\n    item: FieldContentItem\n    isDragging: boolean\n    isSelected: boolean\n    onAdd: (item: NewContentItem) => number\n    onRemove: () => void\n    onChange: (item: ContentItem) => void\n}\n\ntype FieldProps = {\n    id: number\n    depth: number\n    index: number\n    parentId: number | null\n    type: FieldType\n    item: FieldContentItem\n    isSelected: boolean\n    component: FC<FieldRenderProps>\n    onAdd: (item: NewContentItem) => number\n    onRemove: () => void\n    onChange: (item: ContentItem) => void\n}\n\nexport const Field: FC<FieldProps> = ({\n    id,\n    depth,\n    index,\n    parentId,\n    type,\n    item,\n    isSelected,\n    component: Component,\n    onAdd,\n    onRemove,\n    onChange,\n}) => {\n    const { ref, handleRef, isDragSource } = useSortable({\n        ...SORTABLE_CONFIG,\n        id,\n        index,\n        data: { depth, parentId },\n    })\n\n    return (\n        <Component\n            ref={ref}\n            handleRef={handleRef}\n            id={id}\n            depth={depth}\n            index={index}\n            parentId={parentId}\n            type={type}\n            item={item}\n            isDragging={isDragSource}\n            isSelected={isSelected}\n            onAdd={onAdd}\n            onRemove={onRemove}\n            onChange={onChange}\n        />\n    )\n}\n","import { type FC } from 'react'\n\nimport type { ContentItem, SectionContentItem } from '@bluprynt/forms-core'\nimport { useSortable } from '@dnd-kit/react/sortable'\n\nimport { SORTABLE_CONFIG } from './core/constants'\nimport type { NewContentItem } from './core/types'\n\nexport type SectionRenderProps = {\n    ref: (element: Element | null) => void\n    handleRef: (element: Element | null) => void\n    id: number\n    depth: number\n    index: number\n    parentId: number | null\n    item: SectionContentItem\n    isDragging: boolean\n    isSelected: boolean\n    onAdd: (item: NewContentItem) => number\n    onRemove: () => void\n    onChange: (item: ContentItem) => void\n}\n\ntype SectionProps = {\n    id: number\n    depth: number\n    index: number\n    parentId: number | null\n    item: SectionContentItem\n    isSelected: boolean\n    component: FC<SectionRenderProps>\n    onAdd: (item: NewContentItem) => number\n    onRemove: () => void\n    onChange: (item: ContentItem) => void\n}\n\nexport const Section: FC<SectionProps> = ({\n    id,\n    depth,\n    index,\n    parentId,\n    item,\n    isSelected,\n    component: Component,\n    onAdd,\n    onRemove,\n    onChange,\n}) => {\n    const { ref, handleRef, isDragSource } = useSortable({\n        ...SORTABLE_CONFIG,\n        id,\n        index,\n        data: { depth, parentId },\n    })\n\n    return (\n        <Component\n            ref={ref}\n            handleRef={handleRef}\n            id={id}\n            depth={depth}\n            index={index}\n            parentId={parentId}\n            item={item}\n            isDragging={isDragSource}\n            isSelected={isSelected}\n            onAdd={onAdd}\n            onRemove={onRemove}\n            onChange={onChange}\n        />\n    )\n}\n","import type { TreeItem } from './types'\n\n/**\n * Converts a horizontal pixel offset into a depth level based on indentation width.\n */\nexport const getDragDepth = (offset: number, indentationWidth: number): number => Math.round(offset / indentationWidth)\n\n/**\n * Returns the maximum allowed nesting depth when dragging above a target item.\n * Only sections can accept nested children.\n */\nconst getMaxDepth = (targetItem: TreeItem, previousItem: TreeItem | undefined): number => {\n    if (!previousItem) return 0\n    if (previousItem.type !== 'section') {\n        return previousItem.depth\n    }\n    return Math.min(targetItem.depth + 1, previousItem.depth + 1)\n}\n\n/**\n * Returns the minimum depth based on the next sibling item.\n * If there is no next item, the minimum depth is 0 (root level).\n */\nconst getMinDepth = (nextItem: TreeItem | undefined): number => (nextItem ? nextItem.depth : 0)\n\n/**\n * Calculates the projected depth and parent for a dragged item relative to a target position.\n * Clamps depth between min/max bounds and enforces `maxAllowedDepth`.\n */\nexport const getProjection = (\n    items: TreeItem[],\n    targetId: number,\n    projectedDepth: number,\n    maxAllowedDepth: number,\n): { depth: number; maxDepth: number; minDepth: number; parentId: number | null } => {\n    const targetItemIndex = items.findIndex(({ id }) => id === targetId)\n    const previousItem = items[targetItemIndex - 1]\n    const targetItem = items[targetItemIndex]\n    const nextItem = items[targetItemIndex + 1]\n    if (!targetItem) return { depth: 0, maxDepth: 0, minDepth: 0, parentId: null }\n\n    const maxDepth = getMaxDepth(targetItem, previousItem)\n    const minDepth = getMinDepth(nextItem)\n    let depth = projectedDepth\n\n    if (depth >= maxDepth) {\n        depth = maxDepth\n    } else if (depth < minDepth) {\n        depth = minDepth\n    }\n\n    if (depth > maxAllowedDepth) {\n        depth = maxAllowedDepth\n    }\n\n    const getParentId = (): number | null => {\n        if (depth === 0 || !previousItem) {\n            return null\n        }\n\n        if (depth === previousItem.depth) {\n            return previousItem.parentId\n        }\n\n        if (depth > previousItem.depth) {\n            if (previousItem.type !== 'section') {\n                return previousItem.parentId\n            }\n            return previousItem.id\n        }\n\n        const newParent = items\n            .slice(0, targetItemIndex)\n            .reverse()\n            .find((item) => item.depth === depth)?.parentId\n\n        return newParent ?? null\n    }\n\n    return { depth, maxDepth, minDepth, parentId: getParentId() }\n}\n","import type { ContentItem } from '@bluprynt/forms-core'\n\nimport type { TreeItem } from './types'\n\nlet placeholderIdCounter = -1000\n\n/**\n * Resets the placeholder id counter. Call before each full flatten to ensure stable ids per flatten pass.\n */\nconst resetPlaceholderIds = () => {\n    placeholderIdCounter = -1000\n}\n\nconst nextPlaceholderId = () => --placeholderIdCounter\n\n/**\n * Flattens a nested content tree into a flat list of items with depth and parent info.\n * Each item preserves its position metadata for rendering in a sortable tree.\n * Appends an \"add-placeholder\" at the end of each section and at the root level.\n */\nexport const flattenTree = (items: ContentItem[], parentId: number | null = null, depth = 0): TreeItem[] => {\n    if (parentId === null) resetPlaceholderIds()\n\n    const result = items.reduce<TreeItem[]>((result, current, index) => {\n        const isSection = current.type === 'section'\n\n        result.push({\n            id: current.id,\n            type: current.type,\n            parentId,\n            depth,\n            index,\n            item: current,\n        })\n\n        if (isSection) {\n            const children = (current as { content: ContentItem[] }).content\n            result.push(...flattenTree(children, current.id, depth + 1))\n        }\n\n        return result\n    }, [])\n\n    result.push({\n        id: nextPlaceholderId(),\n        type: 'add-placeholder',\n        parentId,\n        depth,\n        index: items.length,\n        item: undefined,\n    })\n\n    return result\n}\n\n/**\n * Collects all transitive descendant ids for a given parent from a flat item list.\n */\nexport const getDescendants = (items: TreeItem[], parentId: number): Set<number> => {\n    const directChildren = items.filter((item) => item.parentId === parentId)\n\n    return directChildren.reduce((result, child) => {\n        result.add(child.id)\n        for (const descendant of getDescendants(items, child.id)) {\n            result.add(descendant)\n        }\n        return result\n    }, new Set<number>())\n}\n","import { type ComponentProps, useCallback, useEffect, useRef, useState } from 'react'\n\nimport {\n    type ContentItem,\n    type FieldContentItem,\n    type FormDefinition,\n    FormDefinitionEditor,\n    type SectionContentItem,\n} from '@bluprynt/forms-core'\nimport { move } from '@dnd-kit/helpers'\nimport { DragDropProvider } from '@dnd-kit/react'\n\nimport { INDENTATION, MAX_DEPTH } from './core/constants'\nimport { getDragDepth, getProjection } from './core/projection'\nimport { flattenTree, getDescendants } from './core/tree'\nimport type { NewContentItem, TreeItem } from './core/types'\n\n/**\n * Manages the form builder state: flattened tree items, drag-and-drop reordering,\n * item editing, and removal. Uses {@link FormDefinitionEditor} for all definition mutations\n * and notifies the consumer of structural changes via {@link onDefinitionChange}.\n *\n * @param definition - The current form definition to build upon.\n * @param onDefinitionChange - Optional callback invoked with the updated `FormDefinition`\n *   whenever the tree structure, item content, or item order changes.\n * @returns Flattened items and handlers for item/drag operations.\n */\nexport const useFormBuilder = (\n    definition: FormDefinition,\n    onDefinitionChange?: (definition: FormDefinition) => void,\n): {\n    items: TreeItem[]\n    handleItemAdd: (sectionId: number | null, item: NewContentItem) => number\n    handleItemChange: (id: number, newItem: ContentItem) => void\n    handleItemRemove: (itemId: number) => void\n    handleDragStart: ComponentProps<typeof DragDropProvider>['onDragStart']\n    handleDragOver: ComponentProps<typeof DragDropProvider>['onDragOver']\n    handleDragMove: ComponentProps<typeof DragDropProvider>['onDragMove']\n    handleDragEnd: ComponentProps<typeof DragDropProvider>['onDragEnd']\n} => {\n    const [items, setItems] = useState<TreeItem[]>(() => flattenTree(definition.content))\n    const initialDepth = useRef(0)\n    const sourceChildren = useRef<TreeItem[]>([])\n    const dragSourceId = useRef<number | null>(null)\n\n    const definitionRef = useRef(definition)\n    definitionRef.current = definition\n\n    const onDefinitionChangeRef = useRef(onDefinitionChange)\n    onDefinitionChangeRef.current = onDefinitionChange\n\n    // Re-sync items when definition changes externally (e.g. from field editor sheet)\n    useEffect(() => {\n        setItems(flattenTree(definition.content))\n    }, [definition])\n\n    const applyEditor = useCallback((editor: FormDefinitionEditor) => {\n        const updated = editor.toJSON()\n        setItems(flattenTree(updated.content))\n        onDefinitionChangeRef.current?.(updated)\n    }, [])\n\n    const handleItemAdd = useCallback(\n        (sectionId: number | null, item: NewContentItem): number => {\n            const editor = new FormDefinitionEditor(definitionRef.current)\n            const parentId = sectionId ?? undefined\n            const id = editor.nextId()\n\n            if (item.type === 'section') editor.addSection({ ...item, id }, parentId)\n            else editor.addField({ ...item, id } as FieldContentItem, parentId)\n\n            applyEditor(editor)\n            return id\n        },\n        [applyEditor],\n    )\n\n    const handleItemChange = useCallback(\n        (id: number, newItem: ContentItem) => {\n            const editor = new FormDefinitionEditor(definitionRef.current)\n\n            if (newItem.type === 'section') {\n                const { id: _, type: __, content: ___, ...updates } = newItem as SectionContentItem\n                editor.updateSection(id, updates)\n            } else {\n                const { id: _, type: __, ...updates } = newItem as FieldContentItem\n                editor.updateField(id, updates)\n            }\n\n            applyEditor(editor)\n        },\n        [applyEditor],\n    )\n\n    const handleItemRemove = useCallback(\n        (itemId: number) => {\n            const editor = new FormDefinitionEditor(definitionRef.current)\n            editor.removeItem(itemId)\n            applyEditor(editor)\n        },\n        [applyEditor],\n    )\n\n    const handleDragStart: ComponentProps<typeof DragDropProvider>['onDragStart'] = (event) => {\n        const { source } = event.operation\n        if (!source) return\n\n        const item = items.find(({ id }) => id === source.id)\n        if (!item) return\n\n        initialDepth.current = item.depth\n        dragSourceId.current = source.id as number\n\n        setItems((prev) => {\n            sourceChildren.current = []\n            const descendants = getDescendants(prev, source.id as number)\n\n            return prev.filter((i) => {\n                if (descendants.has(i.id)) {\n                    sourceChildren.current = [...sourceChildren.current, i]\n                    return false\n                }\n                return true\n            })\n        })\n    }\n\n    const handleDragOver: ComponentProps<typeof DragDropProvider>['onDragOver'] = (event, manager) => {\n        const { source, target } = event.operation\n        event.preventDefault()\n\n        if (source && target && source.id !== target.id) {\n            setItems((prev) => {\n                const offsetLeft = manager.dragOperation.transform.x\n                const dragDepth = getDragDepth(offsetLeft, INDENTATION)\n                const projectedDepth = initialDepth.current + dragDepth\n\n                const { depth, parentId } = getProjection(prev, target.id as number, projectedDepth, MAX_DEPTH)\n\n                const sorted = move(prev, event)\n                return sorted.map((item) => (item.id === source.id ? { ...item, depth, parentId } : item))\n            })\n        }\n    }\n\n    const handleDragMove: ComponentProps<typeof DragDropProvider>['onDragMove'] = (event, manager) => {\n        if (event.defaultPrevented) return\n\n        const { source, target } = event.operation\n        if (!source || !target) return\n\n        const offsetLeft = manager.dragOperation.transform.x\n        const dragDepth = getDragDepth(offsetLeft, INDENTATION)\n        const projectedDepth = initialDepth.current + dragDepth\n\n        const { depth, parentId } = getProjection(items, source.id as number, projectedDepth, MAX_DEPTH)\n\n        if (\n            (source.data as { depth: number })?.depth !== depth ||\n            (source.data as { parentId: number | null })?.parentId !== parentId\n        ) {\n            setItems((prev) => prev.map((item) => (item.id === source.id ? { ...item, depth, parentId } : item)))\n        }\n    }\n\n    const handleDragEnd: ComponentProps<typeof DragDropProvider>['onDragEnd'] = (event) => {\n        if (event.canceled) {\n            setItems(flattenTree(definitionRef.current.content))\n            dragSourceId.current = null\n            sourceChildren.current = []\n            return\n        }\n\n        const draggedId = dragSourceId.current\n        if (draggedId === null) return\n\n        const draggedItem = items.find((i) => i.id === draggedId)\n        if (!draggedItem) return\n\n        // Compute sibling index in the new parent\n        const targetParentId = draggedItem.parentId\n        const draggedFlatIndex = items.findIndex((i) => i.id === draggedId)\n        let siblingIndex = 0\n        for (let i = 0; i < draggedFlatIndex; i++) {\n            const current = items[i]\n            if (current && current.parentId === targetParentId && current.type !== 'add-placeholder') {\n                siblingIndex++\n            }\n        }\n\n        const editor = new FormDefinitionEditor(definitionRef.current)\n        editor.moveItem(draggedId, targetParentId ?? undefined, siblingIndex)\n        applyEditor(editor)\n\n        dragSourceId.current = null\n        sourceChildren.current = []\n    }\n\n    return {\n        items,\n        handleItemAdd,\n        handleItemChange,\n        handleItemRemove,\n        handleDragStart,\n        handleDragOver,\n        handleDragMove,\n        handleDragEnd,\n    } as const\n}\n","import type { FC, PropsWithChildren } from 'react'\n\nimport type { ContentItem, FormDefinition } from '@bluprynt/forms-core'\nimport { DragDropProvider } from '@dnd-kit/react'\n\nimport { AddPlaceholder, type AddPlaceholderRenderProps } from './add-placeholder'\nimport { isAddPlaceholder, isField, isSection, NewContentItem } from './core/types'\nimport { Field, type FieldRenderProps } from './field'\nimport { Section, type SectionRenderProps } from './section'\nimport { useFormBuilder } from './use-form-builder'\n\ntype FormBuilderProps = {\n    definition: FormDefinition\n    container: FC<PropsWithChildren>\n    section: FC<SectionRenderProps>\n    field: FC<FieldRenderProps>\n    addPlaceholder: FC<AddPlaceholderRenderProps>\n    selectedId?: number | null\n    onDefinitionChange?: (definition: FormDefinition) => void\n}\n\nexport const FormBuilder: FC<FormBuilderProps> = ({\n    definition,\n    container: Container,\n    section: SectionComponent,\n    field: FieldComponent,\n    addPlaceholder: AddPlaceholderComponent,\n    selectedId,\n    onDefinitionChange,\n}) => {\n    const {\n        items,\n        handleItemAdd,\n        handleItemChange,\n        handleItemRemove,\n        handleDragStart,\n        handleDragOver,\n        handleDragMove,\n        handleDragEnd,\n    } = useFormBuilder(definition, onDefinitionChange)\n\n    return (\n        <DragDropProvider\n            onDragStart={handleDragStart}\n            onDragOver={handleDragOver}\n            onDragMove={handleDragMove}\n            onDragEnd={handleDragEnd}>\n            <Container>\n                {items.map((item, index) => {\n                    const onAdd = (value: NewContentItem) =>\n                        handleItemAdd(item.type === 'section' ? item.id : item.parentId, value)\n                    const onRemove = () => handleItemRemove(item.id)\n                    const onChange = (value: ContentItem) => handleItemChange(value.id, value)\n\n                    return isSection(item) ? (\n                        <Section\n                            key={item.id}\n                            id={item.id}\n                            depth={item.depth}\n                            index={index}\n                            parentId={item.parentId}\n                            item={item.item}\n                            isSelected={selectedId === item.id}\n                            component={SectionComponent}\n                            onAdd={onAdd}\n                            onRemove={onRemove}\n                            onChange={onChange}\n                        />\n                    ) : isField(item) ? (\n                        <Field\n                            key={item.id}\n                            id={item.id}\n                            depth={item.depth}\n                            index={index}\n                            parentId={item.parentId}\n                            type={item.type}\n                            item={item.item}\n                            isSelected={selectedId === item.id}\n                            component={FieldComponent}\n                            onAdd={onAdd}\n                            onRemove={onRemove}\n                            onChange={onChange}\n                        />\n                    ) : isAddPlaceholder(item) ? (\n                        <AddPlaceholder\n                            key={item.id}\n                            depth={item.depth}\n                            parentId={item.parentId}\n                            component={AddPlaceholderComponent}\n                            onAdd={onAdd}\n                            onChange={handleItemChange}\n                        />\n                    ) : null\n                })}\n            </Container>\n        </DragDropProvider>\n    )\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@bluprynt/forms-builder",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blupryntco/forms-engine.git",
+    "directory": "packages/builder"
+  },
+  "homepage": "https://blupryntco.github.io/forms-engine/",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@dnd-kit/abstract": "^0.3.0",
+    "@dnd-kit/dom": "^0.3.0",
+    "@dnd-kit/helpers": "^0.3.0",
+    "@dnd-kit/react": "^0.3.0",
+    "@dnd-kit/state": "^0.3.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@bluprynt/forms-core": "1.0.0"
+  },
+  "devDependencies": {
+    "@dnd-kit/abstract": "0.3.2",
+    "@dnd-kit/dom": "0.3.2",
+    "@dnd-kit/helpers": "0.3.2",
+    "@dnd-kit/react": "0.3.2",
+    "@dnd-kit/state": "0.3.2",
+    "@testing-library/react": "16.3.2",
+    "@types/jest": "29.5.14",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "30.3.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "ts-jest": "29.4.6",
+    "tsdown": "0.21.1",
+    "typescript": "5.9.3",
+    "@bluprynt/forms-core": "1.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "biome check .",
+    "check-types": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --coverage"
+  }
+}