@overmap-ai/forms 1.0.32-react-flow-david-fixes.27 → 1.0.32-react-flow-david-fixes.30

package/dist/form/builder/flow/index.d.ts

@@ -1,2 +1,2 @@
 export * from './FlowBuilder';
-export { getLayoutedElements } from './layout';
+export { getLayoutedNodesAndEdges } from './layout';

package/dist/form/builder/flow/layout.d.ts

@@ -1,2 +1,2 @@
 import { FieldSectionConditionEdge, FieldSectionNode, LayoutDirection } from './typings';
-export declare const getLayoutedElements: (nodes: FieldSectionNode[], edges: FieldSectionConditionEdge[], direction: LayoutDirection) => [FieldSectionNode[], FieldSectionConditionEdge[]];
+export declare const getLayoutedNodesAndEdges: (nodes: FieldSectionNode[], edges: FieldSectionConditionEdge[], direction: LayoutDirection) => [FieldSectionNode[], FieldSectionConditionEdge[]];

package/dist/form/builder/flow/typings.d.ts

@@ -10,5 +10,6 @@ export type FieldSectionNode = Node<FieldSectionNodeData, "fieldSection">;
 export type FieldSectionConditionEdgeData = {
     targetSection: FieldSection;
     sourceSection: FieldSection;
+    layoutDirection: LayoutDirection;
 };
 export type FieldSectionConditionEdge = Edge<FieldSectionConditionEdgeData, "fieldSectionCondition">;

package/dist/form/fields/FieldSection/FieldSection.d.ts

@@ -10,7 +10,7 @@ export interface FieldSectionOptions extends FormElementOptions {
     conditions?: FieldSectionConditions;
     fields: Field[];
 }
-export declare class FieldSection extends BaseFormElement<"section", FieldSection> implements ConditionManager<Condition>, FieldsManager<Field> {
+export declare class FieldSection extends BaseFormElement<"section", FieldSection> implements ConditionManager<Condition>, FieldsManager {
     static readonly fieldTypeName = "Section";
     static readonly fieldTypeDescription = "Sections can be useful for grouping fields together. They can also be conditionally shown or hidden.";
     readonly type = "section";

package/dist/form/fields/typings.d.ts

@@ -26,12 +26,22 @@ export type Field = BooleanField | CheckboxListField | DateField | MultiSelectFi
 export type FieldClass = typeof BooleanField | typeof CheckboxListField | typeof DateField | typeof MultiSelectField | typeof MultiStringField | typeof NumberField | typeof RadioField | typeof ScanField | typeof SelectField | typeof StringField | typeof TextField | typeof UploadField | typeof OTPField;
 export type SerializedField = SerializedTextField | SerializedBooleanField | SerializedNumberField | SerializedDateField | SerializedStringField | SerializedSelectField | SerializedFieldSection | SerializedMultiStringField | SerializedMultiSelectField | SerializedUploadField | SerializedScanField | SerializedRadioField | SerializedCheckboxListField | SerializedOTPField;
 export type SerializedOnlyField = Exclude<SerializedField, SerializedFieldSection>;
-export interface FieldsManager<TField extends AnyFormElement> {
-    readonly fields: TField[];
-    getFields(): TField[];
-    addField(field: TField): void;
-    addFields(fields: TField[]): void;
+export interface FieldsManager {
+    readonly fields: Field[];
+    getFields(): Field[];
+    addField(field: Field): void;
+    addFields(fields: Field[]): void;
     moveField(sourceIndex: number, targetIndex: number): void;
-    removeField(field: TField): void;
-    removeFields(fields: TField[]): void;
+    removeField(field: Field): void;
+    removeFields(fields: Field[]): void;
+}
+export interface FieldSectionManager {
+    readonly fieldSections: FieldSection[];
+    getFields(): Field[];
+    getFieldSections(): FieldSection[];
+    addFieldSection(field: FieldSection): void;
+    addFieldSections(fields: FieldSection[]): void;
+    moveFieldSection(sourceIndex: number, targetIndex: number): void;
+    removeFieldSection(field: FieldSection): void;
+    removeFieldSections(fields: FieldSection[]): void;
 }

package/dist/form/schema/FieldSchema.d.ts

@@ -1,19 +1,20 @@
-import { FieldSection, FieldsManager, SerializedFieldSection } from '../fields';
+import { Field, FieldSection, FieldSectionManager, SerializedFieldSection } from '../fields';
 import { Observable } from '../observable/Observable';
 import { FieldValues, SerializedFieldValues } from '../typings';
-export declare class FieldSchema extends Observable<FieldSchema> implements FieldsManager<FieldSection> {
-    fields: FieldSection[];
+export declare class FieldSchema extends Observable<FieldSchema> implements FieldSectionManager {
+    fieldSections: FieldSection[];
     constructor(fields: FieldSection[]);
     serialize(): SerializedFieldSection[];
     static deserialize(serializedSections: SerializedFieldSection[]): FieldSchema;
     private fieldObserver;
     private initFields;
-    addField(field: FieldSection): void;
-    addFields(fields: FieldSection[]): void;
-    getFields(): FieldSection[];
-    removeField(field: FieldSection): void;
-    removeFields(fields: FieldSection[]): void;
-    moveField(sourceIndex: number, targetIndex: number): void;
+    getFields(): Field[];
+    getFieldSections(): FieldSection[];
+    addFieldSection(field: FieldSection): void;
+    addFieldSections(fields: FieldSection[]): void;
+    removeFieldSection(field: FieldSection): void;
+    removeFieldSections(fields: FieldSection[]): void;
+    moveFieldSection(sourceIndex: number, targetIndex: number): void;
     deserializeValues(values: SerializedFieldValues): FieldValues;
     serializeValues(values: FieldValues): SerializedFieldValues;
 }

package/dist/forms.js

@@ -7,7 +7,7 @@ import { cx } from "class-variance-authority";
 import * as React from "react";
 import { memo, forwardRef, createContext, useContext, useState, useRef, useCallback, useMemo, useEffect, Fragment as Fragment$1, use, useLayoutEffect, useId as useId$1 } from "react";
 import "@xyflow/react/dist/style.css";
-import { getBezierPath, BaseEdge, EdgeLabelRenderer, NodeToolbar, Position, Handle, MarkerType, useNodesState, useEdgesState, ReactFlow, Panel } from "@xyflow/react";
+import { getBezierPath, Position, BaseEdge, EdgeLabelRenderer, NodeToolbar, Handle, MarkerType, useNodesState, useEdgesState, ReactFlow, Panel } from "@xyflow/react";
 import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
 import { DirectedGraph } from "graphology";
 import { willCreateCycle } from "graphology-dag";
@@ -34938,7 +34938,7 @@ let FieldSection = _FieldSection;
 class FieldSchema extends Observable {
   constructor(fields) {
     super();
-    __publicField(this, "fields");
+    __publicField(this, "fieldSections");
     // Fields
     __publicField(this, "fieldObserver", () => {
       this.notify(this);
@@ -34947,50 +34947,53 @@ class FieldSchema extends Observable {
       for (const field of fields) field.observe(this.fieldObserver);
       return fields;
     });
-    this.fields = this.initFields(fields);
+    this.fieldSections = this.initFields(fields);
   }
   serialize() {
-    return this.fields.map((field) => field.serialize());
+    return this.fieldSections.map((field) => field.serialize());
   }
   static deserialize(serializedSections) {
     return new FieldSchema(serializedSections.map(FieldSection.deserialize));
   }
-  addField(field) {
-    this.fields = this.initFields([...this.fields, field]);
-    this.notify(this);
+  getFields() {
+    return this.fieldSections.flatMap((fieldSection) => fieldSection.getFields());
   }
-  addFields(fields) {
-    this.fields = this.initFields([...this.fields, ...fields]);
+  getFieldSections() {
+    return this.fieldSections;
+  }
+  addFieldSection(field) {
+    this.fieldSections = this.initFields([...this.fieldSections, field]);
     this.notify(this);
   }
-  getFields() {
-    return this.fields;
+  addFieldSections(fields) {
+    this.fieldSections = this.initFields([...this.fieldSections, ...fields]);
+    this.notify(this);
   }
-  removeField(field) {
-    const newFields = this.fields.filter((f) => f.identifier !== field.identifier);
+  removeFieldSection(field) {
+    const newFields = this.fieldSections.filter((f) => f.identifier !== field.identifier);
     for (const field2 of newFields) {
       field2.removeConditional(field2.identifier);
     }
-    this.fields = this.initFields(newFields);
+    this.fieldSections = this.initFields(newFields);
     this.notify(this);
   }
-  removeFields(fields) {
+  removeFieldSections(fields) {
     const fieldsIds = new Set(fields.map((f) => f.identifier));
-    this.fields = this.initFields(this.fields.filter((f) => !fieldsIds.has(f.identifier)));
+    this.fieldSections = this.initFields(this.fieldSections.filter((f) => !fieldsIds.has(f.identifier)));
     this.notify(this);
   }
-  moveField(sourceIndex, targetIndex) {
-    const newFields = [...this.fields];
+  moveFieldSection(sourceIndex, targetIndex) {
+    const newFields = [...this.fieldSections];
     const [removedElement] = newFields.splice(sourceIndex, 1);
     newFields.splice(targetIndex, 0, removedElement);
-    this.fields = this.initFields(newFields);
+    this.fieldSections = this.initFields(newFields);
     this.notify(this);
   }
   deserializeValues(values) {
-    return deserializeFieldValues(flattenFields(this.fields), values);
+    return deserializeFieldValues(this.getFields(), values);
   }
   serializeValues(values) {
-    return serializeFieldValues(flattenFields(this.fields), values);
+    return serializeFieldValues(this.getFields(), values);
   }
 }
 const FieldSchemaContext = createContext(new FieldSchema([]));
@@ -35437,7 +35440,7 @@ const FieldWithActions = memo((props) => {
 FieldWithActions.displayName = "FieldWithActions";
 const FieldSectionConditionEdgeComponent = memo((props) => {
   const { id, sourceX, sourceY, targetX, targetY, style, markerEnd, data } = props;
-  const { targetSection, sourceSection } = data;
+  const { targetSection, sourceSection, layoutDirection } = data;
   const conditions = useMemo(() => {
     return sourceSection.getConditions(targetSection.identifier);
   }, [sourceSection, targetSection.identifier]);
@@ -35459,11 +35462,13 @@ const FieldSectionConditionEdgeComponent = memo((props) => {
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
+    sourcePosition: layoutDirection === "LR" ? Position.Right : Position.Bottom,
     targetX,
-    targetY
+    targetY,
+    targetPosition: layoutDirection === "LR" ? Position.Left : Position.Top
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(BaseEdge, { id, path: edgePath, style, markerEnd }),
+    /* @__PURE__ */ jsx(BaseEdge, { id, path: edgePath, style, markerEnd, labelX, labelY }),
     /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
       Card,
       {
@@ -35512,7 +35517,7 @@ const FieldSectionConditionEdgeComponent = memo((props) => {
           }) }, condition.id)) })
         ]
       }
-    ) }, id)
+    ) })
   ] });
 });
 FieldSectionConditionEdgeComponent.displayName = "FieldSectionConditionEdgeComponent";
@@ -35534,7 +35539,7 @@ const FieldSectionNodeComponent = memo((props) => {
   const { fieldSection, index: sectionIndex, layoutDirection } = data;
   const fieldSchema = use(FieldSchemaContext);
   const removeSection = useCallback(() => {
-    fieldSchema.removeField(fieldSection);
+    fieldSchema.removeFieldSection(fieldSection);
   }, [fieldSchema, fieldSection]);
   const addField = useCallback(
     (type) => {
@@ -35544,11 +35549,11 @@ const FieldSectionNodeComponent = memo((props) => {
   );
   const handleAddBranch = useCallback(() => {
     const section = new FieldSection({ identifier: v4(), fields: [] });
-    fieldSchema.addField(section);
+    fieldSchema.addFieldSection(section);
     fieldSection.addConditional(section.identifier);
   }, [fieldSchema, fieldSection]);
   const handleDuplicate = useCallback(() => {
-    fieldSchema.addField(fieldSection.duplicate(v4()));
+    fieldSchema.addFieldSection(fieldSection.duplicate(v4()));
   }, [fieldSchema, fieldSection]);
   const fieldTypeItems = useFieldTypeItems(addField);
   const removeField = useCallback(
@@ -35664,10 +35669,17 @@ const nodeTypes = {
 const edgeTypes = {
   fieldSectionCondition: FieldSectionConditionEdgeComponent
 };
-const getLayoutedElements = (nodes, edges, direction) => {
+const getLayoutedNodesAndEdges = (nodes, edges, direction) => {
   const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   g.setGraph({ rankdir: direction, nodesep: 200, edgesep: 500, ranksep: 500 });
-  edges.forEach((edge) => g.setEdge(edge.source, edge.target));
+  edges.forEach(
+    (edge) => g.setEdge(edge.source, edge.target, {
+      // TODO: Measure edges
+      width: 500,
+      height: 200,
+      labelpos: "c"
+    })
+  );
   nodes.forEach(
     (node) => {
       var _a2, _b;
@@ -35705,7 +35717,7 @@ const FormBuilderFlowBuilder = memo(() => {
     ref.current.classList.remove("light");
   }, []);
   const initialNodes = useMemo(
-    () => fieldSchema.fields.map((fieldSection, index) => ({
+    () => fieldSchema.fieldSections.map((fieldSection, index) => ({
       id: fieldSection.identifier,
       position: { x: 0, y: 0 },
       data: {
@@ -35716,15 +35728,15 @@ const FormBuilderFlowBuilder = memo(() => {
       draggable: true,
       type: "fieldSection"
     })),
-    [fieldSchema.fields, layoutDirection]
+    [fieldSchema.fieldSections, layoutDirection]
   );
   const initialEdges = useMemo(() => {
     const es = [];
     const sectionsMapping = {};
-    for (const section of fieldSchema.fields) {
+    for (const section of fieldSchema.fieldSections) {
       sectionsMapping[section.identifier] = section;
     }
-    for (const section of fieldSchema.fields) {
+    for (const section of fieldSchema.fieldSections) {
       const sectionConditions = section.conditions;
       for (const [conditionSectionId, conditions] of Object.entries(sectionConditions)) {
         es.push({
@@ -35733,7 +35745,8 @@ const FormBuilderFlowBuilder = memo(() => {
           target: conditionSectionId,
           data: {
             targetSection: sectionsMapping[conditionSectionId],
-            sourceSection: section
+            sourceSection: section,
+            layoutDirection
           },
           animated: conditions.length > 0,
           markerEnd: MarkerType.Arrow,
@@ -35743,7 +35756,7 @@ const FormBuilderFlowBuilder = memo(() => {
       }
     }
     return es;
-  }, [fieldSchema.fields]);
+  }, [fieldSchema.fieldSections, layoutDirection]);
   const [nodes, setNodes, handleNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, handleEdgesChange] = useEdgesState(initialEdges);
   useEffect(() => {
@@ -35753,15 +35766,15 @@ const FormBuilderFlowBuilder = memo(() => {
     setEdges(initialEdges);
   }, [initialEdges, setEdges]);
   const [layoutedNodes, layoutedEdges] = useMemo(() => {
-    return getLayoutedElements(nodes, edges, layoutDirection);
+    return getLayoutedNodesAndEdges(nodes, edges, layoutDirection);
   }, [edges, layoutDirection, nodes]);
   const handleAddSection = useCallback(() => {
-    fieldSchema.addField(new FieldSection({ identifier: v4(), fields: [] }));
+    fieldSchema.addFieldSection(new FieldSection({ identifier: v4(), fields: [] }));
   }, [fieldSchema]);
   const handleConnect = useCallback(
     (params) => {
       const { source: sourceId, target: targetId } = params;
-      const sourceSection = fieldSchema.fields.find(({ identifier }) => identifier === sourceId);
+      const sourceSection = fieldSchema.fieldSections.find(({ identifier }) => identifier === sourceId);
       sourceSection.setOptions({
         conditions: {
           ...sourceSection.conditions,
@@ -35769,19 +35782,19 @@ const FormBuilderFlowBuilder = memo(() => {
         }
       });
     },
-    [fieldSchema.fields]
+    [fieldSchema.fieldSections]
   );
   const handleValidConnection = useCallback(
     (edge) => {
       const graph = new DirectedGraph({});
-      for (const sourceSection of fieldSchema.fields) {
+      for (const sourceSection of fieldSchema.fieldSections) {
         for (const targetSectionId of Object.keys(sourceSection.conditions)) {
           graph.mergeEdge(sourceSection.identifier, targetSectionId);
         }
       }
       return !willCreateCycle(graph, edge.source, edge.target);
     },
-    [fieldSchema.fields]
+    [fieldSchema.fieldSections]
   );
   const [titleFieldProps, titleMeta, titleHelpers] = useField("title");
   const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = useField("description");
@@ -35918,8 +35931,8 @@ const FieldSectionBuilder = memo((props) => {
   const { fieldSection } = props;
   const fieldSchema = use(FieldSchemaContext);
   const conditionalSections = useMemo(() => {
-    return fieldSchema.fields.filter((section) => fieldSection.identifier in section.conditions);
-  }, [fieldSchema.fields, fieldSection.identifier]);
+    return fieldSchema.fieldSections.filter((section) => fieldSection.identifier in section.conditions);
+  }, [fieldSchema.fieldSections, fieldSection.identifier]);
   const handleAddConditional = useCallback(
     (conditionalSection) => {
       conditionalSection.addConditional(fieldSection.identifier);
@@ -35928,15 +35941,15 @@ const FieldSectionBuilder = memo((props) => {
   );
   const validFieldSections = useMemo(() => {
     const graph = new DirectedGraph({});
-    for (const sourceSection of fieldSchema.fields) {
+    for (const sourceSection of fieldSchema.fieldSections) {
       for (const targetSectionId of Object.keys(sourceSection.conditions)) {
         graph.mergeEdge(sourceSection.identifier, targetSectionId);
       }
     }
-    return fieldSchema.fields.filter(
+    return fieldSchema.fieldSections.filter(
       (sourceSection) => !willCreateCycle(graph, sourceSection.identifier, fieldSection.identifier)
     );
-  }, [fieldSchema.fields, fieldSection.identifier]);
+  }, [fieldSchema.fieldSections, fieldSection.identifier]);
   return /* @__PURE__ */ jsxs("div", { className: "flex grow w-full flex-col gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 w-full overflow-hidden", children: [
       /* @__PURE__ */ jsx(Input.Root, { variant: "outline", size: "md", children: /* @__PURE__ */ jsx(
@@ -36000,17 +36013,17 @@ const FieldSectionWithActions = memo((props) => {
     [fieldSection]
   );
   const removeSection = useCallback(() => {
-    fieldSchema.removeField(fieldSection);
+    fieldSchema.removeFieldSection(fieldSection);
   }, [fieldSchema, fieldSection]);
   const moveSection = useCallback(
     (direction) => {
       const targetIndex = direction === "up" ? sectionIndex - 1 : sectionIndex + 1;
-      fieldSchema.moveField(sectionIndex, targetIndex);
+      fieldSchema.moveFieldSection(sectionIndex, targetIndex);
     },
     [fieldSchema, sectionIndex]
   );
   const duplicateSection = useCallback(() => {
-    fieldSchema.addField(fieldSection.duplicate(v4()));
+    fieldSchema.addFieldSection(fieldSection.duplicate(v4()));
   }, [fieldSchema, fieldSection]);
   const handleCreateField = useCallback(
     (type) => {
@@ -36069,7 +36082,7 @@ const FormBuilderListBuilder = memo(() => {
   const { hideTitle, hideDescription, onCancel } = use(FormBuilderContext);
   const fieldSchema = use(FieldSchemaContext);
   const handleCreateEmptySection = useCallback(() => {
-    fieldSchema.addField(new FieldSection({ identifier: v4(), fields: [] }));
+    fieldSchema.addFieldSection(new FieldSection({ identifier: v4(), fields: [] }));
   }, [fieldSchema]);
   const [titleFieldProps, titleMeta, titleHelpers] = useField("title");
   const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = useField("description");
@@ -36108,7 +36121,7 @@ const FormBuilderListBuilder = memo(() => {
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsx(FieldSectionWithActions, { fieldSection, index }, fieldSection.identifier)),
+      fieldSchema.fieldSections.map((fieldSection, index) => /* @__PURE__ */ jsx(FieldSectionWithActions, { fieldSection, index }, fieldSection.identifier)),
       /* @__PURE__ */ jsxs(
         Button,
         {
@@ -36357,12 +36370,12 @@ const FormBuilderPreview = memo((props) => {
     return {
       title: values.title,
       description: values.description,
-      fields: fieldSchema.fields,
+      fields: fieldSchema.fieldSections,
       meta: {
         readonly: false
       }
     };
-  }, [fieldSchema.fields, values.description, values.title]);
+  }, [fieldSchema.fieldSections, values.description, values.title]);
   return /* @__PURE__ */ jsx(FormRenderer, { schema: previewSchema, hideTitle: !showFormTitle });
 });
 FormBuilderPreview.displayName = "FormBuilderPreview";

package/dist/forms.umd.cjs

@@ -34940,7 +34940,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   class FieldSchema extends Observable {
     constructor(fields) {
       super();
-      __publicField(this, "fields");
+      __publicField(this, "fieldSections");
       // Fields
       __publicField(this, "fieldObserver", () => {
         this.notify(this);
@@ -34949,50 +34949,53 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         for (const field of fields) field.observe(this.fieldObserver);
         return fields;
       });
-      this.fields = this.initFields(fields);
+      this.fieldSections = this.initFields(fields);
     }
     serialize() {
-      return this.fields.map((field) => field.serialize());
+      return this.fieldSections.map((field) => field.serialize());
     }
     static deserialize(serializedSections) {
       return new FieldSchema(serializedSections.map(FieldSection.deserialize));
     }
-    addField(field) {
-      this.fields = this.initFields([...this.fields, field]);
-      this.notify(this);
+    getFields() {
+      return this.fieldSections.flatMap((fieldSection) => fieldSection.getFields());
     }
-    addFields(fields) {
-      this.fields = this.initFields([...this.fields, ...fields]);
+    getFieldSections() {
+      return this.fieldSections;
+    }
+    addFieldSection(field) {
+      this.fieldSections = this.initFields([...this.fieldSections, field]);
       this.notify(this);
     }
-    getFields() {
-      return this.fields;
+    addFieldSections(fields) {
+      this.fieldSections = this.initFields([...this.fieldSections, ...fields]);
+      this.notify(this);
     }
-    removeField(field) {
-      const newFields = this.fields.filter((f) => f.identifier !== field.identifier);
+    removeFieldSection(field) {
+      const newFields = this.fieldSections.filter((f) => f.identifier !== field.identifier);
       for (const field2 of newFields) {
         field2.removeConditional(field2.identifier);
       }
-      this.fields = this.initFields(newFields);
+      this.fieldSections = this.initFields(newFields);
       this.notify(this);
     }
-    removeFields(fields) {
+    removeFieldSections(fields) {
       const fieldsIds = new Set(fields.map((f) => f.identifier));
-      this.fields = this.initFields(this.fields.filter((f) => !fieldsIds.has(f.identifier)));
+      this.fieldSections = this.initFields(this.fieldSections.filter((f) => !fieldsIds.has(f.identifier)));
       this.notify(this);
     }
-    moveField(sourceIndex, targetIndex) {
-      const newFields = [...this.fields];
+    moveFieldSection(sourceIndex, targetIndex) {
+      const newFields = [...this.fieldSections];
       const [removedElement] = newFields.splice(sourceIndex, 1);
       newFields.splice(targetIndex, 0, removedElement);
-      this.fields = this.initFields(newFields);
+      this.fieldSections = this.initFields(newFields);
       this.notify(this);
     }
     deserializeValues(values) {
-      return deserializeFieldValues(flattenFields(this.fields), values);
+      return deserializeFieldValues(this.getFields(), values);
     }
     serializeValues(values) {
-      return serializeFieldValues(flattenFields(this.fields), values);
+      return serializeFieldValues(this.getFields(), values);
     }
   }
   const FieldSchemaContext = React.createContext(new FieldSchema([]));
@@ -35439,7 +35442,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   FieldWithActions.displayName = "FieldWithActions";
   const FieldSectionConditionEdgeComponent = React.memo((props) => {
     const { id, sourceX, sourceY, targetX, targetY, style, markerEnd, data } = props;
-    const { targetSection, sourceSection } = data;
+    const { targetSection, sourceSection, layoutDirection } = data;
     const conditions = React.useMemo(() => {
       return sourceSection.getConditions(targetSection.identifier);
     }, [sourceSection, targetSection.identifier]);
@@ -35461,11 +35464,13 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const [edgePath, labelX, labelY] = react.getBezierPath({
       sourceX,
       sourceY,
+      sourcePosition: layoutDirection === "LR" ? react.Position.Right : react.Position.Bottom,
       targetX,
-      targetY
+      targetY,
+      targetPosition: layoutDirection === "LR" ? react.Position.Left : react.Position.Top
     });
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.BaseEdge, { id, path: edgePath, style, markerEnd }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.BaseEdge, { id, path: edgePath, style, markerEnd, labelX, labelY }),
       /* @__PURE__ */ jsxRuntime.jsx(react.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsxs(
         blocks.Card,
         {
@@ -35514,7 +35519,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             }) }, condition.id)) })
           ]
         }
-      ) }, id)
+      ) })
     ] });
   });
   FieldSectionConditionEdgeComponent.displayName = "FieldSectionConditionEdgeComponent";
@@ -35536,7 +35541,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { fieldSection, index: sectionIndex, layoutDirection } = data;
     const fieldSchema = React.use(FieldSchemaContext);
     const removeSection = React.useCallback(() => {
-      fieldSchema.removeField(fieldSection);
+      fieldSchema.removeFieldSection(fieldSection);
     }, [fieldSchema, fieldSection]);
     const addField = React.useCallback(
       (type) => {
@@ -35546,11 +35551,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     );
     const handleAddBranch = React.useCallback(() => {
       const section = new FieldSection({ identifier: uuid.v4(), fields: [] });
-      fieldSchema.addField(section);
+      fieldSchema.addFieldSection(section);
       fieldSection.addConditional(section.identifier);
     }, [fieldSchema, fieldSection]);
     const handleDuplicate = React.useCallback(() => {
-      fieldSchema.addField(fieldSection.duplicate(uuid.v4()));
+      fieldSchema.addFieldSection(fieldSection.duplicate(uuid.v4()));
     }, [fieldSchema, fieldSection]);
     const fieldTypeItems = useFieldTypeItems(addField);
     const removeField = React.useCallback(
@@ -35666,10 +35671,17 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   const edgeTypes = {
     fieldSectionCondition: FieldSectionConditionEdgeComponent
   };
-  const getLayoutedElements = (nodes, edges, direction) => {
+  const getLayoutedNodesAndEdges = (nodes, edges, direction) => {
     const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
     g.setGraph({ rankdir: direction, nodesep: 200, edgesep: 500, ranksep: 500 });
-    edges.forEach((edge) => g.setEdge(edge.source, edge.target));
+    edges.forEach(
+      (edge) => g.setEdge(edge.source, edge.target, {
+        // TODO: Measure edges
+        width: 500,
+        height: 200,
+        labelpos: "c"
+      })
+    );
     nodes.forEach(
       (node) => {
         var _a2, _b;
@@ -35707,7 +35719,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       ref.current.classList.remove("light");
     }, []);
     const initialNodes = React.useMemo(
-      () => fieldSchema.fields.map((fieldSection, index) => ({
+      () => fieldSchema.fieldSections.map((fieldSection, index) => ({
         id: fieldSection.identifier,
         position: { x: 0, y: 0 },
         data: {
@@ -35718,15 +35730,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         draggable: true,
         type: "fieldSection"
       })),
-      [fieldSchema.fields, layoutDirection]
+      [fieldSchema.fieldSections, layoutDirection]
     );
     const initialEdges = React.useMemo(() => {
       const es = [];
       const sectionsMapping = {};
-      for (const section of fieldSchema.fields) {
+      for (const section of fieldSchema.fieldSections) {
         sectionsMapping[section.identifier] = section;
       }
-      for (const section of fieldSchema.fields) {
+      for (const section of fieldSchema.fieldSections) {
         const sectionConditions = section.conditions;
         for (const [conditionSectionId, conditions] of Object.entries(sectionConditions)) {
           es.push({
@@ -35735,7 +35747,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             target: conditionSectionId,
             data: {
               targetSection: sectionsMapping[conditionSectionId],
-              sourceSection: section
+              sourceSection: section,
+              layoutDirection
             },
             animated: conditions.length > 0,
             markerEnd: react.MarkerType.Arrow,
@@ -35745,7 +35758,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         }
       }
       return es;
-    }, [fieldSchema.fields]);
+    }, [fieldSchema.fieldSections, layoutDirection]);
     const [nodes, setNodes, handleNodesChange] = react.useNodesState(initialNodes);
     const [edges, setEdges, handleEdgesChange] = react.useEdgesState(initialEdges);
     React.useEffect(() => {
@@ -35755,15 +35768,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       setEdges(initialEdges);
     }, [initialEdges, setEdges]);
     const [layoutedNodes, layoutedEdges] = React.useMemo(() => {
-      return getLayoutedElements(nodes, edges, layoutDirection);
+      return getLayoutedNodesAndEdges(nodes, edges, layoutDirection);
     }, [edges, layoutDirection, nodes]);
     const handleAddSection = React.useCallback(() => {
-      fieldSchema.addField(new FieldSection({ identifier: uuid.v4(), fields: [] }));
+      fieldSchema.addFieldSection(new FieldSection({ identifier: uuid.v4(), fields: [] }));
     }, [fieldSchema]);
     const handleConnect = React.useCallback(
       (params) => {
         const { source: sourceId, target: targetId } = params;
-        const sourceSection = fieldSchema.fields.find(({ identifier }) => identifier === sourceId);
+        const sourceSection = fieldSchema.fieldSections.find(({ identifier }) => identifier === sourceId);
         sourceSection.setOptions({
           conditions: {
             ...sourceSection.conditions,
@@ -35771,19 +35784,19 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           }
         });
       },
-      [fieldSchema.fields]
+      [fieldSchema.fieldSections]
     );
     const handleValidConnection = React.useCallback(
       (edge) => {
         const graph = new graphology.DirectedGraph({});
-        for (const sourceSection of fieldSchema.fields) {
+        for (const sourceSection of fieldSchema.fieldSections) {
           for (const targetSectionId of Object.keys(sourceSection.conditions)) {
             graph.mergeEdge(sourceSection.identifier, targetSectionId);
           }
         }
         return !graphologyDag.willCreateCycle(graph, edge.source, edge.target);
       },
-      [fieldSchema.fields]
+      [fieldSchema.fieldSections]
     );
     const [titleFieldProps, titleMeta, titleHelpers] = formik.useField("title");
     const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = formik.useField("description");
@@ -35920,8 +35933,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { fieldSection } = props;
     const fieldSchema = React.use(FieldSchemaContext);
     const conditionalSections = React.useMemo(() => {
-      return fieldSchema.fields.filter((section) => fieldSection.identifier in section.conditions);
-    }, [fieldSchema.fields, fieldSection.identifier]);
+      return fieldSchema.fieldSections.filter((section) => fieldSection.identifier in section.conditions);
+    }, [fieldSchema.fieldSections, fieldSection.identifier]);
     const handleAddConditional = React.useCallback(
       (conditionalSection) => {
         conditionalSection.addConditional(fieldSection.identifier);
@@ -35930,15 +35943,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     );
     const validFieldSections = React.useMemo(() => {
       const graph = new graphology.DirectedGraph({});
-      for (const sourceSection of fieldSchema.fields) {
+      for (const sourceSection of fieldSchema.fieldSections) {
         for (const targetSectionId of Object.keys(sourceSection.conditions)) {
           graph.mergeEdge(sourceSection.identifier, targetSectionId);
         }
       }
-      return fieldSchema.fields.filter(
+      return fieldSchema.fieldSections.filter(
         (sourceSection) => !graphologyDag.willCreateCycle(graph, sourceSection.identifier, fieldSection.identifier)
       );
-    }, [fieldSchema.fields, fieldSection.identifier]);
+    }, [fieldSchema.fieldSections, fieldSection.identifier]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex grow w-full flex-col gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 w-full overflow-hidden", children: [
         /* @__PURE__ */ jsxRuntime.jsx(blocks.Input.Root, { variant: "outline", size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -36002,17 +36015,17 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       [fieldSection]
     );
     const removeSection = React.useCallback(() => {
-      fieldSchema.removeField(fieldSection);
+      fieldSchema.removeFieldSection(fieldSection);
     }, [fieldSchema, fieldSection]);
     const moveSection = React.useCallback(
       (direction) => {
         const targetIndex = direction === "up" ? sectionIndex - 1 : sectionIndex + 1;
-        fieldSchema.moveField(sectionIndex, targetIndex);
+        fieldSchema.moveFieldSection(sectionIndex, targetIndex);
       },
       [fieldSchema, sectionIndex]
     );
     const duplicateSection = React.useCallback(() => {
-      fieldSchema.addField(fieldSection.duplicate(uuid.v4()));
+      fieldSchema.addFieldSection(fieldSection.duplicate(uuid.v4()));
     }, [fieldSchema, fieldSection]);
     const handleCreateField = React.useCallback(
       (type) => {
@@ -36071,7 +36084,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const { hideTitle, hideDescription, onCancel } = React.use(FormBuilderContext);
     const fieldSchema = React.use(FieldSchemaContext);
     const handleCreateEmptySection = React.useCallback(() => {
-      fieldSchema.addField(new FieldSection({ identifier: uuid.v4(), fields: [] }));
+      fieldSchema.addFieldSection(new FieldSection({ identifier: uuid.v4(), fields: [] }));
     }, [fieldSchema]);
     const [titleFieldProps, titleMeta, titleHelpers] = formik.useField("title");
     const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = formik.useField("description");
@@ -36110,7 +36123,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-        fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsxRuntime.jsx(FieldSectionWithActions, { fieldSection, index }, fieldSection.identifier)),
+        fieldSchema.fieldSections.map((fieldSection, index) => /* @__PURE__ */ jsxRuntime.jsx(FieldSectionWithActions, { fieldSection, index }, fieldSection.identifier)),
         /* @__PURE__ */ jsxRuntime.jsxs(
           blocks.Button,
           {
@@ -36359,12 +36372,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       return {
         title: values.title,
         description: values.description,
-        fields: fieldSchema.fields,
+        fields: fieldSchema.fieldSections,
         meta: {
           readonly: false
         }
       };
-    }, [fieldSchema.fields, values.description, values.title]);
+    }, [fieldSchema.fieldSections, values.description, values.title]);
     return /* @__PURE__ */ jsxRuntime.jsx(FormRenderer, { schema: previewSchema, hideTitle: !showFormTitle });
   });
   FormBuilderPreview.displayName = "FormBuilderPreview";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@overmap-ai/forms",
-	"version": "1.0.32-react-flow-david-fixes.27",
+	"version": "1.0.32-react-flow-david-fixes.30",
 	"license": "UNLICENSED",
 	"main": "dist/forms.umd.cjs",
 	"module": "dist/forms.js",