@bluprynt/forms-viewer 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,194 @@
+import { ArrayItemDef, ArrayItemDef as ArrayItemDef$1, ContentItem, DocumentError, DocumentValidationError, DocumentValidationError as DocumentValidationError$1, DocumentValidationErrorCode, FieldContentItem, FieldContentItem as FieldContentItem$1, FieldEntry, FieldEntry as FieldEntry$1, FieldType, FieldValidationError, FieldValidationError as FieldValidationError$1, FileValue, FileValue as FileValue$1, FormDefinition, FormDefinition as FormDefinition$1, FormDocument, FormDocument as FormDocument$1, FormEngine, FormSnapshot, FormValidationResult, FormValidationResult as FormValidationResult$1, FormValues, FormValuesEditor, SectionContentItem, SectionContentItem as SectionContentItem$1, SelectOption, SelectOption as SelectOption$1 } from "@bluprynt/forms-core";
+import { ComponentType, FC, PropsWithChildren, ReactNode } from "react";
+
+//#region src/constants.d.ts
+declare const ROOT: unique symbol;
+type ROOT = typeof ROOT;
+//#endregion
+//#region src/form-context.d.ts
+type FormContextValue = {
+  definition: FormDefinition$1 | undefined;
+  data: FormDocument$1 | undefined;
+  engine: FormEngine | undefined;
+  visibilityMap: Map<number, boolean>;
+  validation: FormValidationResult$1 | undefined;
+  documentErrors: readonly DocumentValidationError$1[] | undefined;
+  fieldErrors: Map<number, FieldValidationError$1[]>;
+  section: typeof ROOT | number | undefined;
+  showInlineValidation: boolean;
+};
+declare const useFormContext: () => FormContextValue;
+type FormProps = {
+  definition?: FormDefinition$1;
+  data?: FormDocument$1;
+  section?: typeof ROOT | number;
+  showInlineValidation?: boolean;
+  children: ReactNode;
+};
+declare const Form: FC<FormProps>;
+//#endregion
+//#region src/form-document-validation.d.ts
+type FormDocumentValidationProps = {
+  container: ComponentType<PropsWithChildren>;
+  error: ComponentType<DocumentValidationError$1>;
+};
+declare const FormDocumentValidation: FC<FormDocumentValidationProps>;
+//#endregion
+//#region src/types/base.d.ts
+type BaseViewFieldProps = {
+  field: FieldContentItem$1;
+  errors: FieldValidationError$1[];
+};
+type BaseEditFieldProps = BaseViewFieldProps & {
+  onChange: (value: unknown) => void;
+};
+type ErrorProps = {
+  errors: FieldValidationError$1[];
+  field: FieldContentItem$1;
+};
+//#endregion
+//#region src/types/editor.d.ts
+type StringEditProps = BaseEditFieldProps & {
+  value: string | undefined;
+  onChange: (value: string | undefined) => void;
+};
+type NumberEditProps = BaseEditFieldProps & {
+  value: number | undefined;
+  onChange: (value: number | undefined) => void;
+};
+type BooleanEditProps = BaseEditFieldProps & {
+  value: boolean | undefined;
+  onChange: (value: boolean | undefined) => void;
+};
+type DateEditProps = BaseEditFieldProps & {
+  value: string | undefined;
+  onChange: (value: string | undefined) => void;
+};
+type SelectEditProps = BaseEditFieldProps & {
+  value: string | number | undefined;
+  options: SelectOption$1[];
+  onChange: (value: string | number | undefined) => void;
+};
+type ArrayEditProps = BaseEditFieldProps & {
+  value: unknown[] | undefined;
+  itemDef: ArrayItemDef$1;
+  children: ReactNode[];
+  onAddItem: () => void;
+  onRemoveItem: (index: number) => void;
+  onMoveItem: (fromIndex: number, toIndex: number) => void;
+};
+type FileEditProps = BaseEditFieldProps & {
+  value: FileValue$1 | undefined;
+  onChange: (value: FileValue$1 | undefined) => void;
+};
+type SectionEditProps = {
+  section: SectionContentItem$1;
+  children: ReactNode;
+};
+type EditorComponentMap = {
+  string: ComponentType<StringEditProps>;
+  number: ComponentType<NumberEditProps>;
+  boolean: ComponentType<BooleanEditProps>;
+  date: ComponentType<DateEditProps>;
+  select: ComponentType<SelectEditProps>;
+  array: ComponentType<ArrayEditProps>;
+  file: ComponentType<FileEditProps>;
+  section: ComponentType<SectionEditProps>;
+  error?: ComponentType<ErrorProps>;
+};
+type EditorFieldProps = {
+  onChange: (value: unknown) => void;
+  onAddItem?: () => void;
+  onRemoveItem?: (index: number) => void;
+  onMoveItem?: (fromIndex: number, toIndex: number) => void;
+};
+type EditorArrayItemProps = {
+  onChange: (value: unknown) => void;
+};
+//#endregion
+//#region src/types/viewer.d.ts
+type StringViewProps = BaseViewFieldProps & {
+  value: string | undefined;
+};
+type NumberViewProps = BaseViewFieldProps & {
+  value: number | undefined;
+};
+type BooleanViewProps = BaseViewFieldProps & {
+  value: boolean | undefined;
+};
+type DateViewProps = BaseViewFieldProps & {
+  value: string | undefined;
+};
+type SelectViewProps = BaseViewFieldProps & {
+  value: string | number | undefined;
+  options: SelectOption$1[];
+};
+type ArrayViewProps = BaseViewFieldProps & {
+  value: unknown[] | undefined;
+  itemDef: ArrayItemDef$1;
+  children: ReactNode[];
+};
+type FileViewProps = BaseViewFieldProps & {
+  value: FileValue$1 | undefined;
+};
+type SectionViewProps = {
+  section: SectionContentItem$1;
+  children: ReactNode;
+};
+type ViewerComponentMap = {
+  string: ComponentType<StringViewProps>;
+  number: ComponentType<NumberViewProps>;
+  boolean: ComponentType<BooleanViewProps>;
+  date: ComponentType<DateViewProps>;
+  select: ComponentType<SelectViewProps>;
+  array: ComponentType<ArrayViewProps>;
+  file: ComponentType<FileViewProps>;
+  section: ComponentType<SectionViewProps>;
+  error?: ComponentType<ErrorProps>;
+};
+//#endregion
+//#region src/form-editor.d.ts
+type FormEditorProps = {
+  components: EditorComponentMap;
+  onChange: (data: FormDocument$1, validation: FormValidationResult$1) => void;
+};
+declare const FormEditor: FC<FormEditorProps>;
+//#endregion
+//#region src/form-fields-validation.d.ts
+type FieldValidationFieldEntry = {
+  field: FieldEntry$1 | undefined;
+  errors: FieldValidationError$1[];
+};
+type FormFieldsValidationProps = {
+  container: ComponentType<PropsWithChildren>;
+  field: ComponentType<PropsWithChildren<FieldValidationFieldEntry>>;
+  error: ComponentType<FieldValidationError$1>;
+};
+declare const FormFieldsValidation: FC<FormFieldsValidationProps>;
+//#endregion
+//#region src/form-sections.d.ts
+type FormSectionEntry = Omit<SectionContentItem$1, 'id' | 'type'> & {
+  id: typeof ROOT | number;
+};
+type FormSectionItemProps = {
+  section: FormSectionEntry;
+  active: boolean;
+  select: () => void;
+};
+type FormSectionsProps = {
+  container: ComponentType<PropsWithChildren>;
+  item: ComponentType<FormSectionItemProps>;
+  defaultSectionTitle?: string;
+  defaultSectionDescription?: string;
+  onSelect?: (id: typeof ROOT | number) => void;
+};
+declare const FormSections: FC<FormSectionsProps>;
+//#endregion
+//#region src/form-viewer.d.ts
+type FormViewerProps = {
+  components: ViewerComponentMap;
+};
+declare const FormViewer: FC<FormViewerProps>;
+//#endregion
+export { type ArrayEditProps, type ArrayItemDef, type ArrayViewProps, type BaseEditFieldProps, type BaseViewFieldProps, type BooleanEditProps, type BooleanViewProps, type ContentItem, type DateEditProps, type DateViewProps, DocumentError, type DocumentValidationError, type DocumentValidationErrorCode, type EditorArrayItemProps, type EditorComponentMap, type EditorFieldProps, type ErrorProps, type FieldContentItem, type FieldEntry, type FieldType, type FieldValidationError, type FieldValidationFieldEntry, type FileEditProps, type FileValue, type FileViewProps, Form, type FormDefinition, type FormDocument, FormDocumentValidation, FormEditor, FormFieldsValidation, type FormSectionEntry, type FormSectionItemProps, FormSections, type FormSnapshot, type FormValidationResult, type FormValues, FormValuesEditor, FormViewer, type NumberEditProps, type NumberViewProps, ROOT, type SectionContentItem, type SectionEditProps, type SectionViewProps, type SelectEditProps, type SelectOption, type SelectViewProps, type StringEditProps, type StringViewProps, type ViewerComponentMap, useFormContext };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/constants.ts","../src/form-context.tsx","../src/form-document-validation.tsx","../src/types/base.ts","../src/types/editor.ts","../src/types/viewer.ts","../src/form-editor.tsx","../src/form-fields-validation.tsx","../src/form-sections.tsx","../src/form-viewer.tsx"],"mappings":"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"}

package/dist/index.mjs

@@ -0,0 +1,470 @@
+import { DocumentError, DocumentError as DocumentError$1, FormEngine, FormValuesEditor } from "@bluprynt/forms-core";
+import { Fragment, createContext, useCallback, useContext, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/constants.ts
+const ROOT = Symbol("ROOT");
+//#endregion
+//#region src/form-context.tsx
+const FormContext = createContext(void 0);
+const useFormContext = () => {
+	const context = useContext(FormContext);
+	if (!context) throw new Error("useFormContext must be used within a <Form> provider");
+	return context;
+};
+const Form = ({ definition, data, section, showInlineValidation = true, children }) => {
+	const { engine, documentErrors: definitionErrors } = useMemo(() => {
+		if (!definition) return {};
+		try {
+			return { engine: new FormEngine(definition) };
+		} catch (error) {
+			if (error instanceof DocumentError$1) return { documentErrors: error.errors };
+			throw error;
+		}
+	}, [definition]);
+	const { visibilityMap, validation, documentErrors, fieldErrors } = useMemo(() => {
+		const visibilityMap = engine && data ? engine.getVisibilityMap(data) : /* @__PURE__ */ new Map();
+		const validation = engine && data ? engine.validate(data) : {
+			valid: true,
+			fieldErrors: /* @__PURE__ */ new Map()
+		};
+		return {
+			visibilityMap,
+			validation,
+			documentErrors: [...definitionErrors ?? [], ...validation?.documentErrors ?? []],
+			fieldErrors: validation?.fieldErrors ?? /* @__PURE__ */ new Map()
+		};
+	}, [
+		engine,
+		data,
+		definitionErrors
+	]);
+	const value = {
+		definition,
+		data,
+		engine,
+		visibilityMap,
+		validation,
+		documentErrors,
+		fieldErrors,
+		section,
+		showInlineValidation
+	};
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value,
+		children
+	});
+};
+//#endregion
+//#region src/form-document-validation.tsx
+const FormDocumentValidation = ({ container: ContainerComponent, error: ErrorComponent }) => {
+	const { documentErrors } = useFormContext();
+	if (!documentErrors?.length) return null;
+	return /* @__PURE__ */ jsx(ContainerComponent, { children: documentErrors.map((error, index) => /* @__PURE__ */ jsx(ErrorComponent, { ...error }, `error-${error.code}-${error.itemId ?? ""}-${index}`)) });
+};
+//#endregion
+//#region src/form/utils.ts
+/**
+* Retrieves validation errors for a specific field from the pre-indexed error map.
+*
+* Uses O(1) map lookup by `fieldId`. When `itemIndex` is omitted, returns only
+* **field-level** errors (those without an `itemIndex`). When `itemIndex` is
+* provided, returns only **item-level** errors matching the given array item index.
+*
+* @param fieldErrors - Map from field id to its validation errors.
+* @param fieldId - The numeric ID of the field to retrieve errors for.
+* @param itemIndex - Optional zero-based index of the array item. When omitted, only
+*   field-level errors (where `itemIndex` is `null` / `undefined`) are returned.
+* @returns Errors for the given field (and optionally item index). Empty array if none.
+*
+* @example
+* ```ts
+* // Field-level errors only (no itemIndex on the error)
+* getFieldErrors(fieldErrors, 5)
+*
+* // Errors for the third item of array field 5
+* getFieldErrors(fieldErrors, 5, 2)
+* ```
+*/
+const getFieldErrors = (fieldErrors, fieldId, itemIndex) => {
+	const errors = fieldErrors.get(fieldId) ?? [];
+	if (itemIndex === void 0) return errors.filter((e) => e.itemIndex == null);
+	return errors.filter((e) => e.itemIndex === itemIndex);
+};
+/**
+* Creates a synthetic {@link FieldContentItem} that represents a single item inside an array field.
+*
+* Array fields store their per-item schema in `arrayField.item` ({@link ArrayItemDef}).
+* Components that render individual array items need a standard `FieldContentItem` shape,
+* so this helper projects the item definition into one, preserving the parent field's `id`
+* while adopting the item's `type`, `label`, `description`, `validation`, and `options`.
+*
+* @param arrayField - The array field definition whose `.item` property describes the item schema.
+* @param _index - The zero-based position of the item in the array (reserved for future use,
+*   e.g. per-item overrides).
+* @returns A `FieldContentItem` that can be passed directly to a typed field component.
+*
+* @example
+* ```ts
+* const arrayField: FieldContentItem = {
+*   id: 10, type: 'array', label: 'Tags',
+*   item: { type: 'string', label: 'Tag' },
+* }
+*
+* const itemDef = getArrayField(arrayField, 0)
+* // → { id: 10, type: 'string', label: 'Tag', ... }
+* ```
+*/
+const getArrayField = (arrayField, _index) => {
+	const itemDef = arrayField.item;
+	return {
+		id: arrayField.id,
+		type: itemDef.type,
+		label: itemDef.label,
+		description: itemDef.description,
+		validation: itemDef.validation,
+		options: itemDef.options
+	};
+};
+/**
+* Recursively searches content items for a section with the given id.
+*
+* Walks the content tree depth-first, checking sections and their nested
+* content. Returns the first matching {@link SectionContentItem}, or
+* `undefined` if no section with that id exists.
+*
+* @param items - The content items to search through.
+* @param sectionId - The numeric id of the section to find.
+* @returns The matching section, or `undefined` if not found.
+*
+* @example
+* ```ts
+* const section = findSection(definition.content, 42)
+* if (section) {
+*   // render section.content
+* }
+* ```
+*/
+const findSection = (items, sectionId) => {
+	for (const item of items) if (item.type === "section") {
+		if (item.id === sectionId) return item;
+		const found = findSection(item.content, sectionId);
+		if (found) return found;
+	}
+};
+//#endregion
+//#region src/form/form-items.tsx
+const FormItems = ({ items, visibilityMap, values, fieldErrors, components, showInlineValidation, renderFieldProps, renderArrayItemProps }) => {
+	const SectionComponent = components.section;
+	const ErrorComponent = showInlineValidation ? components.error : void 0;
+	const elements = [];
+	for (const item of items) {
+		if (!visibilityMap.get(item.id)) continue;
+		if (item.type === "section") elements.push(/* @__PURE__ */ jsx(SectionComponent, {
+			section: item,
+			children: /* @__PURE__ */ jsx(FormItems, {
+				items: item.content,
+				visibilityMap,
+				values,
+				fieldErrors,
+				components,
+				showInlineValidation,
+				renderFieldProps,
+				renderArrayItemProps
+			})
+		}, item.id));
+		else if (item.type === "array") {
+			const errors = getFieldErrors(fieldErrors, item.id);
+			const modeProps = renderFieldProps?.(item) ?? {};
+			const ArrayComponent = components.array;
+			const arrayValue = values[String(item.id)] ?? [];
+			const itemDef = item.item;
+			const ItemComponent = components[itemDef.type];
+			elements.push(/* @__PURE__ */ jsx(ArrayComponent, {
+				field: item,
+				value: values[String(item.id)],
+				itemDef: item.item,
+				errors,
+				...modeProps,
+				children: ItemComponent ? arrayValue.map((itemValue, index) => {
+					const itemErrors = getFieldErrors(fieldErrors, item.id, index);
+					const synthetic = getArrayField(item, index);
+					const baseProps = {
+						field: synthetic,
+						value: itemValue,
+						errors: itemErrors,
+						...renderArrayItemProps?.(item, index) ?? {}
+					};
+					if (itemDef.type === "select") baseProps.options = itemDef.options ?? [];
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ItemComponent, { ...baseProps }), ErrorComponent && itemErrors.length > 0 && /* @__PURE__ */ jsx(ErrorComponent, {
+						errors: itemErrors,
+						field: synthetic
+					})] }, `${item.id}-${index}`);
+				}) : null
+			}, item.id));
+			if (ErrorComponent && errors.length > 0) elements.push(/* @__PURE__ */ jsx(ErrorComponent, {
+				errors,
+				field: item
+			}, `${item.id}-error`));
+		} else {
+			const errors = getFieldErrors(fieldErrors, item.id);
+			const modeProps = renderFieldProps?.(item) ?? {};
+			const fieldProps = {
+				field: item,
+				value: values[String(item.id)],
+				errors,
+				...modeProps
+			};
+			if (item.type === "select") fieldProps.options = item.options ?? [];
+			const FieldComponent = components[item.type];
+			elements.push(/* @__PURE__ */ jsx(FieldComponent, { ...fieldProps }, item.id));
+			if (ErrorComponent && errors.length > 0) elements.push(/* @__PURE__ */ jsx(ErrorComponent, {
+				errors,
+				field: item
+			}, `${item.id}-error`));
+		}
+	}
+	if (elements.length === 0) return null;
+	return elements;
+};
+//#endregion
+//#region src/form/form-content.tsx
+const FormContent = (props) => {
+	const { items, visibilityMap, values, fieldErrors, section, showInlineValidation } = props;
+	const sharedProps = props.mode === "editor" ? {
+		visibilityMap,
+		values,
+		fieldErrors,
+		components: props.components,
+		showInlineValidation,
+		renderFieldProps: props.renderFieldProps,
+		renderArrayItemProps: props.renderArrayItemProps
+	} : {
+		visibilityMap,
+		values,
+		fieldErrors,
+		components: props.components,
+		showInlineValidation
+	};
+	if (section === void 0) return /* @__PURE__ */ jsx(FormItems, {
+		items,
+		...sharedProps
+	});
+	if (section === ROOT) return /* @__PURE__ */ jsx(FormItems, {
+		items: items.filter((item) => item.type !== "section"),
+		...sharedProps
+	});
+	const foundSection = findSection(items, section);
+	if (!foundSection || !visibilityMap.get(foundSection.id)) return null;
+	const Section = props.components.section;
+	return /* @__PURE__ */ jsx(Section, {
+		section: foundSection,
+		children: /* @__PURE__ */ jsx(FormItems, {
+			items: foundSection.content,
+			...sharedProps
+		})
+	}, foundSection.id);
+};
+//#endregion
+//#region src/form-editor.tsx
+const FormEditor = ({ components, onChange }) => {
+	const { definition, data, visibilityMap, fieldErrors, section, engine, showInlineValidation, documentErrors } = useFormContext();
+	const { renderFieldProps, renderArrayItemProps } = useEditorHandlers(engine, data, onChange);
+	if (!definition || !data || documentErrors && documentErrors.length > 0) return null;
+	return /* @__PURE__ */ jsx(FormContent, {
+		mode: "editor",
+		items: definition.content,
+		visibilityMap,
+		values: data.values,
+		fieldErrors,
+		components,
+		section,
+		showInlineValidation,
+		renderFieldProps,
+		renderArrayItemProps
+	});
+};
+const useEditorHandlers = (engine, data, onChange) => {
+	const stateRef = useRef({
+		data,
+		onChange,
+		engine
+	});
+	stateRef.current = {
+		data,
+		onChange,
+		engine
+	};
+	const fieldOnChangeMap = useRef(/* @__PURE__ */ new Map());
+	const getFieldOnChange = useCallback((fieldId) => {
+		const key = String(fieldId);
+		let handler = fieldOnChangeMap.current.get(key);
+		if (!handler) {
+			handler = (newValue) => {
+				const { data, onChange, engine } = stateRef.current;
+				if (!data || !engine) return;
+				const document = {
+					...data,
+					values: {
+						...data.values,
+						[key]: newValue
+					}
+				};
+				onChange(document, engine.validate(document));
+			};
+			fieldOnChangeMap.current.set(key, handler);
+		}
+		return handler;
+	}, []);
+	const arrayHandlersMap = useRef(/* @__PURE__ */ new Map());
+	const getArrayHandlers = useCallback((fieldId) => {
+		const key = String(fieldId);
+		let handlers = arrayHandlersMap.current.get(key);
+		if (!handlers) {
+			const fire = (mutate) => {
+				const { data, onChange, engine } = stateRef.current;
+				if (!data || !engine) return;
+				const items = data.values[key] ?? [];
+				const document = {
+					...data,
+					values: {
+						...data.values,
+						[key]: mutate([...items])
+					}
+				};
+				onChange(document, engine.validate(document));
+			};
+			handlers = {
+				onAddItem: () => fire((values) => {
+					values.push(void 0);
+					return values;
+				}),
+				onRemoveItem: (index) => fire((values) => {
+					values.splice(index, 1);
+					return values;
+				}),
+				onMoveItem: (fromIndex, toIndex) => fire((values) => {
+					const [moved] = values.splice(fromIndex, 1);
+					values.splice(toIndex, 0, moved);
+					return values;
+				})
+			};
+			arrayHandlersMap.current.set(key, handlers);
+		}
+		return handlers;
+	}, []);
+	const arrayItemOnChangeMap = useRef(/* @__PURE__ */ new Map());
+	const getArrayItemOnChange = useCallback((fieldId, index) => {
+		const mapKey = `${fieldId}-${index}`;
+		let handler = arrayItemOnChangeMap.current.get(mapKey);
+		if (!handler) {
+			handler = (newValue) => {
+				const fieldKey = String(fieldId);
+				const { data, onChange, engine } = stateRef.current;
+				if (!data || !engine) return;
+				const items = [...data.values[fieldKey] ?? []];
+				items[index] = newValue;
+				const document = {
+					...data,
+					values: {
+						...data.values,
+						[fieldKey]: items
+					}
+				};
+				onChange(document, engine.validate(document));
+			};
+			arrayItemOnChangeMap.current.set(mapKey, handler);
+		}
+		return handler;
+	}, []);
+	return {
+		renderFieldProps: (field) => {
+			if (field.type === "array") return {
+				onChange: getFieldOnChange(field.id),
+				...getArrayHandlers(field.id)
+			};
+			return { onChange: getFieldOnChange(field.id) };
+		},
+		renderArrayItemProps: (field, index) => ({ onChange: getArrayItemOnChange(field.id, index) })
+	};
+};
+//#endregion
+//#region src/form-fields-validation.tsx
+const FormFieldsValidation = ({ container: ContainerComponent, field: FieldComponent, error: ErrorComponent }) => {
+	const { engine, data, fieldErrors, visibilityMap } = useFormContext();
+	const groups = useMemo(() => {
+		if (!engine || !data || fieldErrors.size === 0) return [];
+		const result = [];
+		for (const [fieldId, errors] of fieldErrors) {
+			if (visibilityMap.get(fieldId) === false) continue;
+			result.push({
+				field: engine.getFieldDef(fieldId),
+				errors
+			});
+		}
+		return result;
+	}, [
+		engine,
+		data,
+		fieldErrors,
+		visibilityMap
+	]);
+	if (groups.length === 0) return null;
+	return /* @__PURE__ */ jsx(ContainerComponent, { children: groups.map((group) => /* @__PURE__ */ jsx(FieldComponent, {
+		...group,
+		children: group.errors.map((error) => /* @__PURE__ */ jsx(ErrorComponent, { ...error }, `${error.fieldId}-${error.rule}-${error.itemIndex ?? ""}`))
+	}, group.field?.id)) });
+};
+//#endregion
+//#region src/form-sections.tsx
+const FormSections = ({ container: Container, item: Item, defaultSectionTitle = "General", defaultSectionDescription, onSelect }) => {
+	const { definition, section, visibilityMap, data, documentErrors } = useFormContext();
+	const entries = useMemo(() => {
+		if (!definition) return [];
+		const result = [];
+		const rootFields = definition.content.filter((item) => item.type !== "section");
+		if (rootFields.some((item) => visibilityMap.get(item.id))) result.push({
+			id: ROOT,
+			title: defaultSectionTitle,
+			description: defaultSectionDescription,
+			content: rootFields,
+			condition: void 0
+		});
+		for (const item of definition.content) if (item.type === "section") {
+			if (visibilityMap.get(item.id) === false) continue;
+			result.push(item);
+		}
+		return result;
+	}, [
+		definition?.content,
+		visibilityMap,
+		data,
+		defaultSectionTitle,
+		defaultSectionDescription
+	]);
+	if (!definition || !data || documentErrors && documentErrors.length > 0) return null;
+	return /* @__PURE__ */ jsx(Container, { children: entries.map((entry) => /* @__PURE__ */ jsx(Item, {
+		section: entry,
+		active: entry.id === section,
+		select: () => onSelect?.(entry.id)
+	}, entry.id === ROOT ? "root" : String(entry.id))) });
+};
+//#endregion
+//#region src/form-viewer.tsx
+const FormViewer = ({ components }) => {
+	const { definition, data, visibilityMap, fieldErrors, section, showInlineValidation, documentErrors } = useFormContext();
+	if (!definition || !data || documentErrors && documentErrors.length > 0) return null;
+	return /* @__PURE__ */ jsx(FormContent, {
+		mode: "viewer",
+		items: definition.content,
+		visibilityMap,
+		values: data.values,
+		fieldErrors,
+		components,
+		section,
+		showInlineValidation
+	});
+};
+//#endregion
+export { DocumentError, Form, FormDocumentValidation, FormEditor, FormFieldsValidation, FormSections, FormValuesEditor, FormViewer, ROOT, useFormContext };
+
+//# sourceMappingURL=index.mjs.map